Things You'll Need:
- A Computer (of course!)
- Notepad or any text editor program
- Your ability to type and understand
- Your saved HTML file (the one we used on Part 1)
- Images
-
Step 1
Locate your HTML file and double click to open it on a web browser. After that, go to VIEW > SOURCE to open your web page’s codes on a Notepad. Here you can view, edit and save any changes that you will make for your codes. Leave your browser window opened so that it will be easy for you to see the effects or changes you’ve made. Always save after each step to view your work.
-
Step 2
To insert an image, first, locate the image that you will use. May it be on your hard drive or on the web, get the address or URL of that image. I will use this image as an example. It is saved on Local Disk D and on My Pictures folder and lastly on its very own folder named Gazette. In case that your image is on the web, just type the URL where your image is uploaded but now, many of the image hosting sites gives you the complete URL code of your image for easy insertion in your HTML. Pay attention to your image’s properties, as it will be needed for further formatting.
-
Step 3
Type the tag you see on the image. Save your work (CTRL + S on your keyboard) then refresh your browser. You will now see your image.
-
Step 4
You can speed up the loading of your images by setting the exact dimensions of it. On Step 2, I explained on the image (3) about the details or properties of an image. You can see its dimensions there. You can also view the details by right-clicking your image and selecting Properties. Just add the exact height and width of the image on your image tag to reduce the loading time. My image’s dimension is 621 x 386 where the width is 621 and the height is 386 pixels. Remember that this attributes is also useful in reducing or enlarging the image’s actual size. See image for instructions.
-
Step 5
To make your images float on sides of your page with text and other elements wrapped on it, you can use the align attribute with left and right values. I will reduce the size of my image and add some text so that you will see the effect of the attribute. This is aligned in left with the text on right wrapping the image. Just change the value of left to right if you want to make your image float on the right side and text wrapping the image on left.
-
Step 6
If you want to stop text from wrapping your image, you can use the clear attribute added on the br tag with values of left, right and all. Left is to stop flowing content until there are no more floating objects aligned to the left margin. Right is to stop flowing content until there are no more floating objects aligned to the right margin, and all is to stop flowing content until there are no more floating objects on either margin. This image is in “clear all” attribute.
-
Step 7
Here is an attribute for the image tag to add some space between your image and text wrapped on it. Refer to the image for instructions.
-
Step 8
Now that you already know how to insert and format images for your page, the next part is about Links. You’ll learn how to make links by using tags and attributes. The download for the images I used on this tutorial is always available at the Resources section. See you on the next part! =)
Marc Hyde 078
For Questions, Comments and Suggestions:
Message me on my Friendster or Yahoo! At hyde_078@yahoo.com
Comments
katakana said
on 10/16/2008 nice tutorial.. been wanting to learn how to create an overlay... thanks.. :) you have helped tons of people with this tutorial im sure of that :)
my email add is..
CarlosAldrinCuevas@yahoo.com
thanks in advance
BRUNO8888 said
on 7/31/2008 your a good blogger. i hope i can be one