XHTML1 Images N100 Building a Simple Web Page

XHTML2 The Element The src attribute specifies the filename of an image file To include the src attribute within the element, you type The element also includes other attributes

XHTML3 The alt Attribute For an XHTML document to be well formed, the element must include the src and alt attributes The alt attribute is very important for user agents that do not display images and Web browsers that are designed for users of Braille and speech devices Alternate text will display if an image has not yet downloaded, if the user has turned off the display of images in their Web browsers, or if for some reason the image is not available

XHTML4 The alt Attribute The alt attribute also serves another purpose: –For any elements that do not include a title attribute, the value assigned to the alt attribute appears as a ToolTip in Internet Explorer and other browsers when you hold your mouse over the image. The code looks like this:

XHTML5 Using Images from Other Locations You can place images in subfolders that are relative to the location of the current Web page folder. This means that the web page document you created and the image are in the same folder (directory). You can link to images at other locations on the Web by assigning an absolute URL to the src attribute of the element. This means that the image is one folder (images) and the web page is another folder (myWebPage).

XHTML6 Relative Location The image that is used for from a relative location would be written in this manner. Notice the (/) at the end. The tag is considered an empty element because it has no closing tag.

XHTML7 Absolute Location Using an image from a location outside of where the web page document is located, you will use an absolute reference to the location of the image. It will written like this: In the above code, images is where the picture is located.

XHTML8 Image Source and Oncourse  When placing an image in an HTML page, the code will be a relative link.  Do not use the file path from the computer where the document originates.  The correct format for the web page would be  * Incorrect format for the web page would be

XHTML9 Image Source and Oncourse (cont’d)  The graphic must be loaded into Oncourse along with the web file.  The Drop Box will display this information, n100WebPageLab.html turtle.jpg