1 / 9

Images

Images. N100 Building a Simple Web Page. The <img> Element. The src attribute specifies the filename of an image file To include the src attribute within the <img> element, you type <img src =“mygraphic.gif”> The <img> element also includes other attributes. The alt Attribute.

marli
Download Presentation

Images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Images N100 Building a Simple Web Page XHTML

  2. The <img> Element The src attribute specifies the filename of an image file To include the src attribute within the <img> element, you type <img src =“mygraphic.gif”> The <img> element also includes other attributes XHTML

  3. The alt Attribute • For an XHTML document to be well formed, the <img> 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 XHTML

  4. The alt Attribute • The alt attribute also serves another purpose: • For any <img> 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: <img src = “myGraphic.gif” alt = “A Rose”> XHTML

  5. 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 <img> element. This means that the image is one folder (images) and the web page is another folder (myWebPage). XHTML

  6. Relative Location The image that is used for from a relative location would be written in this manner. <img src = “myGraphic.jpg” /> Notice the (/) at the end. The <img> tag is considered an empty element because it has no closing tag. XHTML

  7. 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: <img src = “images/myGraphic.jpg” /> In the above code, images is where the picture is located. XHTML

  8. 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 <img src = “myGraphic.jpg” alt = “A Rose”/> • * Incorrect format for the web page would be • <img src = “C:\DocumentsandSettings\Desktop\ejacks\computer.gif” /> XHTML

  9. 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 XHTML

More Related