Transcript Images

Images
N100
Building a Simple Web Page
XHTML
1
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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9