HTML ... Working with images (cont'd)
STEP 15
We will now try to make an html file that includes the images that you were viewing in the previous page. We will also play with text flow around images and image placement and re-sizing in this part of the tutorial. Finally, we will display picture names (when the mouse is held over any image) and using "hypertext" links with images. (This is useful when you want to display dozens of images in "postage stamp" size that can be clicked on to display larger in a new window, etc.) For this part of the course, we will be using the image called "testpix_min.jpg". It is displayed below:
In order to "save this picture" (copy it from our website to your local computer in the c:/websites/basicweb/images folder), all you have to do is to "right click" and "hold" your mouse over the image and choose "save image as" and then point it to the folder as mentioned above. NOTE: This is slightly different for Macintosh users... Mac users click once and hold on the image and then choose "save image as" to the correct directory as above on your desktop.
We are now going to create an html file with this image displayed on it. Enter the following code into your text editor and save it as "imagetest.htm" to your "html" folder inside the "basicweb" folder: <html>
<title> Testing HTML with Images </title>
<body text = "#000000" bgcolor = "#ffffff" link = "#ff0000" alink = "#00ff00" vlink = "#0000ff">
<font face = "arial">
This is my first webpage with an image in it! I am going to enjoy putting pictures into my websites now. The image below is a simple test image in .jpg format that should be centered on the page: <p> </font> <center> <img src = "../images/testpix_min.jpg"><p> </center> </body>
</html> CLICK TO TEST
STEP 16
There are many attributes you can add to the "img src tags" to control how pictures are displayed on your pages including aligning pictures to the left, middle or right of the page, amount of space between the top, bottom and sides of the images, the size and colour of the image border, displaying the image name and making "hypertext" links to images. We will be working with our "original" "imagetest.htm" file and editing it accordingly. In order to control the placement of images on the page, we must add an "align tag" to the "img src tag" attributes. Open your "imagetest.htm" file and simply add the following attributes to the "img src tag" to move the image to the left of the page. NOTE: You may want to ADD some more text to your "imagetest.htm" file and change the "...that should be centered on the page" line to read "...should be aligned on the left side of the page, etc." <img src = "../images/textpix_min.jpg" align = "left"> CLICK TO TEST
STEP 17
Let's try to move the image to the "right" and to the "center" again using the "align tags". Try removing the <center> tags and a few other things to have it make sense to you! To move the image to the right use: <img src = "../images/textpix_min.jpg" align = "right"> CLICK TO TEST
STEP 18
Now we want to see how it looks using the <blockquote> tags for the text and putting two images in the "imagetext.htm" file, one aligned to the left and the second aligned to the right. To do this, enter a reasonably good body of text in the "imagetest.htm" file using the <blockquote> tag BEFORE the text and the </blockquote> tag after the text. Now, within the actual text... make some paragraph breaks using the </p> tags. The final thing to do is to add the two images to the file using the <img src tags> with the align = "left" and the align = "right" attributes. If you have done everything correctly, your page should look like the sample (CLICK TO TEST): <img src = "../images/textpix_min.jpg" align = "right"> CLICK TO TEST
STEP 19
You may have noticed that in the previous step (18) that the text flowed around the images but was "almost touching" the image edges making the page look at little bit "cluttered". In order to control this, we need to utilize another tag with our images - the <vspace = "8"> and the <hspace = "8"> tag attributes. The "vspace" attribute controls the empty space at the top and bottom of the image where "8" equals "8 pixels" of empty space and the "hspace" attributes controls the empty space to the right and left of the image. Try editing the "imagetest.htm" file now using these attributes. NOTE: For this test, make sure you use at least "8 pixels" to see the effect clearly or try adjusting these values at will to see how it affects the display. In the sample below, we have used "32 pixels for vspace" and "64 pixels for hspace" to illustrate this attribute tag clearly. <img src = "../images/textpix_min.jpg" align = "right" vspace = "32" hspace = "64"> CLICK TO TEST
STEP 19
There are even more things we can do to have fun with images. In this step, we will be adding a border of "8 pixels" to both our images. To do this, another image tag attribute <border = "8"> is used. The "default colour" of this image border is the same as the "body text" tag at the beginning of your HTML pages unless your "img src" tags are WITHIN (or follow) a "font face" tag that is "OPEN" (i.e. between <font> and the </font> tags). Now edit the "imagetest.htm" file image attributes for both images adding this "border tag" attribute. <img src = "../images/textpix_min.jpg" align = "right" vspace = "32" hspace = "64" border = "8"> CLICK TO TEST