Once you understand links, adding images is straightforward.
Images are a little different than the HTML headings and paragraphs that we’ve seen so far. An image is actually a separate file that you embed in your web page using the
img element. Let’s see how this works:
Example 2.15. Example Image
<p> Yet more evidence that I did not go to Art School: </p> <img src="/images/html/oscope.gif" alt="a cartoon of an oscilloscope">
To try this example on your own, you not only need to copy the HTML, but you also need to download the image “oscope.gif” to your system. If you don’t know how to do this, refer to “Save Images”. Save the file in the same directory as your test page, and try it out.
img element has two required attributes:
srcattribute provides a URL that points to the image file. If the URL is missing or incorrect, the image won’t appear. The
srcattribute is very similar to the
hrefattribute of the
aelement. It’s too bad that they couldn’t both be called “href”, because then this would all be easier to remember.
altattribute provides “alternative text” for the image, should the image not be displayable. This could happen if the user turns off images in their browser, or uses a browser that doesn’t support images (such as a text-only browser or a screen reader). The alternative text could also appear while the user is waiting for the image to download, or if the link to the image is broken.
Some browsers display the
alttext as a “tooltip” that pops up if you hover your mouse over the image. Strictly speaking, this is incorrect behavior, because the
altattribute is for when the image cannot be displayed. To provide “extra information” about an image, use the optional
An image file is not coded in the HTML language. Images have their own formats, such as GIF, JPEG, or PNG. There are several ways to acquire or create digital images:
- take a photo with a digital camera
- use drawing software to create a digital image
- download an image off the web using your browser’s Save Image function
It’s fine to mess around with images for learning purposes, but please don’t publish someone else’s images on a website unless you know you have the owner’s permission.
Positioning elements in HTML can be tricky, and we’ll be talking about how to do this in the more advanced sections of this tutorial. That said, let’s take a sneak preview at one of the basic concepts of positioning: the
Example 2.16. Floating Images
<h1>Not Your Father's Oscilloscope...</h1> <img src="/images/html/oscope.gif" height="64" width="90" alt="Right-floating oscilloscope" style="float: right"> <p> The <b>Model XJ-2000</b>: Quality, quality, quality. That's what our bosses asked for when we designed the XJ-2000, and that's what we delivered. Our competitors claim to deliver "quality"... but do they? Sure, they prattle on about about sample rates, picosecond/div sweep rates, Fast Fourier Transforms, and other technical mumbo-jumbo. But the fact is that the XJ-2000 is light-years ahead of the competition. From the scratch-resistant chrome case to the innovative green phosophorescent screen, only one word should spring to mind when you look at the XJ-2000: quality. </p>
float: right directive does something peculiar: it removes the image from the regular flow of the page and “floats” it to the right. The paragraph flows around the image. If we had specified
float: left, the image would float to the left of the paragraph. (Try it!)
Just like the
background properties, you can actually apply the
float property to nearly any element. We’ll return to this concept later.