HTML Notes #3 – Image Tag
Summary
Below is an HMTL page containing basic image tag with a photo that is named “yak.jpg”. There is only a single tag that contains the path to the image. We “end” the tag by putting a slash just before the closing “>” sign. In the image element, the path to the file is called the “source”, written as “src”. It is part of the W3C specifications to always include an alternative text, written as “alt”, for people who do not have image-capable browsers, are visually impaired, etc. It is just a good idea and may even help you get better placement in search results. I have “nested” the image tag within a paragraph element only to create a gap between it and the other content on the page. You can delete the paragraph tags during testing to see the difference.
<html>
<head>
<title>Image Tags</title>
</head>
<body>
<h1>Image Tag is an "Empty" Tag</h1>
<p><img src="/yak.jpg" alt="Yak Image" /></p>
<p>Here we begin to see just how an HTML page is really a collection of "stuff" that the markup language says, "put this text here, then a list, then an image, then a table, etc." The image is not acutally "in" the web page, like it is "in" a word processor document like Word. Not surprisingly, your web server needs to have access to the actual image file. If I kept the image in a folder called "images" at the top level of my web server directory, then the source would be src="/images/yak.jpg". It does NOT have to be on the same server, in which case the "src" part of the tag would begin with "http://", meaning it would go to the internet to find it instead of having a local "path", or address. This is what is referred to as "hot linking" and is beyond the scope of this tutorial.</p>
<p>A few more options for the image tag:<br />
title = A brief name for the image. Used in "mouse-over" pop-ups and audio browsers<br />
length and width = The size of the image in pixels. Using these stops pages "jumping" around.<br/>
border = The size of the border in pixels. Should be controlled with CSS.<br />
align = How to position image in relation to surrounding text. Should use CSS insteas.<br /></p>
<p><img title="A kicking yak pic" src="/yak.jpg" length="150" height="150"
alt="Yak Image" border="2" align="bottom" />Let's see where the text winds up.</p>
</body>
</html>Go to the first HTML page if you are not sure how to test the example. Note: For this page you need to have the file “yak.jpg” in the same directory as the web page you are creating. Here is a copy of the yak photo.
Remarks
img – Image tag for images of photos, pictures, etc. (JPG, GIF, PNG, etc.).
