(adsbygoogle = window.adsbygoogle || []).push({});

Add an Image to Web Page || Tutorial.6

What fun is a web page with no image? In Exercise 6-1, we’ll add an image to the page using the img element. Images will be discussed in more detail in Chapter-4, Adding Images, but for now, it gives us an opportunity to introduce two more basic markup concepts: empty elements and attributes.

Empty elements

A handful of elements, however, do not have text content because they are used to provide a simple directive. These elements are said to be empty. The image element (img) is an example of such an element; it tells the browser to get an image file from the server and insert it at that spot in the flow of the text. Other empty elements include the line break (br), thematic breaks (hr), and elements that provide information about a document but don’t affect its displayed content, such as the meta element that we used earlier.


Example: The br element inserts a line break.


1005 Gravenstein Highway North
Sebastopol, CA 95472



Let’s get back to adding an image with the empty img element. Obviously, an tag is not very useful by itself—there’s no way to know which image to use. That’s where attributes come in. Attributes are instructions that clarify or modify an element. For the img element, the src (short for “source”) attribute is required, and specifies the location (URL) of the image file.

                                   Figure 6-1. An img element with attributes.

The syntax for an attribute is as follows:


Attributes go after the element name, separated by a space. In non-empty elements, attributes go in the opening tag only:

<element attributename=”value”>

<element attributename=”value”>Content

You can also put more than one attribute in an element in any order. Just keep them separated with spaces.

attribute1=”value” attribute2=”value”>

For another way to look at it, Figure 6-1 shows an img element with its required attributes labeled.

Here’s what you need to know about attributes:

• Attributes go after the element name in the opening tag only, never in the end tag.

• There may be several attributes applied to an element, separated by spaces in the opening tag. Their order is not important.

• Most attributes take values, which follow an equals sign (=). In HTML, some attribute values can be reduced to single descriptive words, for example, the checked attribute, which makes a checkbox checked when a form loads. In XHTML, however, all attributes must have explicit values (checked=”checked“). You may hear this type of attribute called a Boolean attribute because it describes a feature that is either on or off.

• A value might be a number, a word, a string of text, a URL, or a measurement, depending on the purpose of the attribute. You’ll see examples of all of these throughout this book.

• Some values don’t have to be in quotation marks in HTML, but XHTML requires them. Many developers like the consistency and tidiness of quotation marks even when authoring HTML. Either single or double quotation marks are acceptable as long as they are used consistently; however,double quotation marks are the convention. Note that quotation marks in HTML files need to be straight (“) not curly (”).

• Some attributes are required, such as the src and alt attributes in the img element.

• The attribute names available for each element are defined in the HTML specifications; in other words, you can’t make up an attribute for an element.

Now you should be more than ready to try your hand at adding the img element with its attributes to the Black Goose Bistro page in the next exercise. We’ll throw a few line breaks in there as well.

Exercise | Adding an image

1 : If you’re working along, the first thing you’ll need to do is get a copy of the image file on your hard drive so you can see it in place when you open the file locally. Name the file Logo.png. Be sure to save it in the bistro folder with index.html.

2 : Once you have the image, insert it at the beginning of the first-level heading(h1) by typing in the img element and its attributes as shown here: 

<h1><img src=”logo.png” alt=”Logo is here”>Black Goose Bistro</h1>

The src attribute provides the name of the image file that should be inserted, and the alt attribute provides text that should be displayed if the image is not available. Both of these attributes are required in every img element.

3 : I’d like the image to appear above the title, so lets add a line break (br) after the img element to start the headline text on a new line. 

<h1><img src=”blackgoose.png” alt=”Black Goose logo”><br>Black Goose Bistro</h1>

4 : Let’s break up the last paragraph into three lines for better clarity. Drop a <br> tag at the spots you’d like the line breaks to occur.

<p>Seekonk, Massachusetts;<br>Monday through Thursday 11am to 9pm, <br>Friday and Saturday, 11am to midnight</p>

5 : Now save index.html and open or refresh it in the browser window. The page should look like the one shown in Figure 6-2. If it doesn’t, check to make sure that the image file, logo.png, is in the same directory or folder as index.html. If it is, then check to make sure that you aren’t missing any characters, such as a closing quote or bracket, in the img element markup.

                                             Figure 6-2. The Black Goose Bistro page with the logo image



(adsbygoogle = window.adsbygoogle || []).push({});