Format graphics

Add the alt (alternative text) attribute to the tag:

alt="Chesapeake Bay Retriever">

What is Alt text?

"Alt" text allows visually-impaired people to know what a graphic represents.

It also allows search engines to index visual content.

Add the vspace (vertical space) and hspace (horizontal space) attributes as well:

vspace="4" hspace="12">

TIP: The "4" and "12" in these attributes refer to pixels on the computer screen: 4 pixels vertical space and 12 pixels horizontal space, respectively.

Add the border attribute:

border="1">

Save the page and view it in the browser.

The text should be aligned with the top of the graphic:

TIP: An hspace of 12 creates a horizontal space of 12 pixels around the graphic that nothing can occupy.

A border of 1 creates a 1-pixel border around the graphic.

Move your cursor onto the graphic.

The "Alt" text should pop up.

Click this link:

www.inpics.net/files/html/dogpics

The browser should appear.
Save the German Shepherds graphic in the graphics folder, with the file nameshepherds.gif.

Save the Yorkshire Terrier graphic in the graphics folder, with the file name yorkie.gif.

Insert shepherds.gif into the German Shepherds page below the heading.

Insert yorkie.gif into the Yorkshire Terriers page below the heading.

On the German Shepherds page, insert the text:

German Shepherds are smart dogs.

as a paragraph below the graphic.

On the Yorkshire Terriers page, insert the text:

Yorkshire Terriers are cute.

as a paragraph below the graphic.

On both pages, align the text to the side of the graphic, as on the Chesapeake Bay Retrievers page.

In both pages, give the graphics a border of 1, vspace of 4, and hspace of 12.

Save both pages.

Web Layout HTML & CSS