The first code in the body of the source code is an h2 heading tag containing the text "Image Tag and Image Link". The opening h2 tag utilizes the align attribute with the value of "center" (this is an instruction to the browser to center the heading on the web page). The nested font tags set the color of the text in this heading to "9933ff". Scroll this code into view in the above frame.
The next line of code is a hr (horizontal rule) tag. Scroll this line of code into view in the above frame. This tag causes a horizontal rule to appear on the web page.
The next line of code is a break (br) tag. Scroll this line of into view in the above frame. This tag causes a blank line on the web page immediately after the horizontal rule.
The next line of code is the first line of source code for the lesson 12 content and is the image tag. This image tag causes an image (graphic) to be displayed on the web page if the specified image is available in the same folder or directory as the web page file. The code within this tag reads as follows (scroll this tag into view in the above frame):
img src="landscp2.jpg" alt="Utah Landscape" hspace="15" align="left" /
The explanations of the components of this tag are as follows:
The first three characters, "img", specifies that the tag is an image tag.
The src attribute has a value of "landscp2.jpg", which is the name of the image file. When the src value consists only of the name of an image file, the image file must be in the same folder or directory as the web page file.
The alt attribute has the value of "Utah Landscape". The alt value appears on the computer screen during the downloading of the image file or when any user is surfing with the display of graphics turned off in his/her browser.
The hspace (horizontal space) attribute has a value of "15" which is a pixel value. This attribute causes the specified amount of space to appear on the left side and right side of the graphic, separating the graphic from the text and margin on the sides of the picture.
Another available attribute (not utilized here) is the vspace (vertical space) attribte. This attribute value is also specified in pixels. This attribute separates the graphic from text above or below the graphic.
The align attribute has a value of "left". This value causes the graphic to appear at the left margin and causes all other web page components (text, paragraphs, new lines, other graphics, etc..) to wrap on the right side of the graphic.
An align attribute with a value of "right" would cause the graphic to appear at the right margin and would cause all other web page components to wrap on the left side of the graphic.
If the align attribute is omitted (graphic default position is at left margin), and text is typed immediately after the image tag (without a paragraph or break tag), the text will begin on the right side of the image at the bottom of the image. If this line of text is long enough to wrap, the second line of text (and any subsequent lines of text) will be below the image. In these instances, the one line of text which appears on the right side of the image at the bottom of the image, can be repositioned by utlizing the align attribute with a value of "middle" or "top". This repositions only the first line of the text to the middle or top of the graphic (not the second or any subsequent lines, if such lines exist). When an align attribute value of "middle" or "top" is utilized to position the text, the graphic position will be at the left margin by default.
This feature allows the user to position a title or the first line of a paragraph on the right side of the graphic in one of the three positions; bottom, middle or top (reminder: this first line positioning applies only when the text immediately follows the image tag, without a paragraph or break tag).
A line or two of text can be typed in a paragraph immediately prior to an image tag. This action causes the image to be embedded in the paragraph rather than being at the top of the paragraph.
The image tag is not a paired tag and the last two characters in the image tag are the space slash syntax for unpaired tags.
The next line of code is a one line paragraph which wraps on the right side of the graphic (the align attribue value of "left" in the image tag, in previous line of code, causes this wrap). Scroll to an view this code in the above frame.
The next two lines of code are a paragraph that also wraps on the right side of the graphic (this wrap is also caused by the align attibute value of "left" in the above image tag). Scroll to an view this code in the above frame.
The next line of code is the break tag which reads as follows; br clear="left". Scroll this code into view in the above frame. This line of code interupts the wrapping of other web page components around the graphic. This interuption causes the next text or other web page component to appear below the graphic. The clear attribute value ("left" or "right") must be equal to the align attribute value in the image tag (if not equal, graphic wrap will not be interupted).
The next three lines of code are a paragraph. Scroll this code into view in the above frame. On the web page, this paragraph appears below the graphic, demonstrating that the graphic wrap was interupted by the clear attribute value of "left" in the br (break) tag.
The next line of code is the second image tag which is within a paragraph tag pair to create a blank line before the image. The text within this image tag reads as follows:
img src="landscp2.jpg" alt="Utah Landscape" border="1" hspace="15" align="middle" /
Scroll this code into view in the above frame. This is the same graphic image as the above image. The border attribute with a value of "1" (value specified in pixels) has been added. The align value has been changed to "middle".
The next line of code is text which immediately follows the image tag (no paragraph or break tag between the image tag and this text). Scroll this code into view in the above frame. The opening and closing bold tags are utiilized for this text. The value of "middle" specified in the align attribute of the image tag in the previous line of code causes this text to be positioned in the middle of the space on the right side of the graphic. This result can be viewed on the Lesson 12 web page (if viewed at this point, use the "Back" button on your browser to return to this page).
The next 3 lines of code are a paragraph that appear on the web page, explaining the appearance of the border and the pixel value for the border attribute. Scroll to and view this code in the above frame.
The next 4 lines of code create two hyperlinks (paragraph tags are utilized to create a blank line immediately before these links). The first hyperlink is a graphic link and the second hyperlink is a text link Graphic links are usually accompanied by text links for the reasons preseneted below under the heading of "Lessons Comments".
The first three lines of this code create the graphic link. This graphic link is created by placing the image tag between the opening and closing anchor tags. In the image tag, the align attribute with the attribute value of "middle" causes the hypertext for the text link to be center aligned on the right side of the image. The text link is created by the fourth line of this code. The graphic link and the text link are links to the same web page, "index.html" (the two opening anchor tags are identical).
Lesson Comments:When a web page contains too many images, and/or images that are too large, the user may not wait for the images to be displayed. In these instances, any expected image benefit(s) will be lost. The expected image benefit(s) will also be lost when the user is surfing with the display of graphics turned off on his/her browser. Web pages should be designed on the basis that the user will not see or utilize the graphics on the web page.
If you create and link 10 web pages for your URL on the Internet, having the same image appear on each web page (when feasible and appropriate) is much more efficient (much less download time) than having a different image appear on each web page.
Two of the most common image file name extensions are jpg (or jpeg) and gif. These are the only two image file name extensions utilized in the lessons herein. Bitmap image files do not appear on all browsers (bitmap file names have the extension of bmp) . Other image file name extensions should be avoided unless the user is confident about the feasibility of such extensions.
The image utilized in this lesson for the graphic link, "HomeImage.gif" was created with Microsoft Paint (a graphic application that is available with Microsoft Windows 95 which generates bitmap files). This bitmap graphic file was converted to the gif file which is utilized in this lesson.
When image links are created, a border is automatically created around the image. In these instances, the boder attribute can still be used in the image tag to create a wider border if desired. The other image attributes can also be utilized in image links.
End of Lesson 12.