Images

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:

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

The img element has two required attributes:

• The src attribute provides a URL that points to the image file. If the URL is missing or incorrect, the image won’t appear. The src attribute is very similar to the href attribute of the a element. It’s too bad that they couldn’t both be called “href”, because then this would all be easier to remember.

• The alt attribute 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 alt text as a “tooltip” that pops up if you hover your mouse over the image. Strictly speaking, this is incorrect behavior, because the alt attribute is for when the image cannot be displayed. To provide “extra information” about an image, use the optional title attribute instead.

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

  Note

  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.

Floating Images

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 float property.

<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>

The 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 color and background properties, you can actually apply the float property to nearly any element. We’ll return to this concept later.