Inserting Images in HTML

Adding a Third Level Heading

In HTML there are six levels of headings that can be used throughout a web document, but remember the order of the headings should be logical and follow a hierarchal pattern.

1. Type an appropriate heading, i.e. Holocaust Memorial, surrounded by an opening heading 3 tag <h3> and followed by a closing heading 3 tag </h3>.
2. Type the following paragraph below (or another appropriate paragraph) surrounded by paragraph tags.

<p>A recently opened (Spring 2005) gigantic abstract artwork covering an entire block near the Brandenburg Gate. The blocks start out at ground level on the oter edges of the memorial, and then grown taller towards the middle, where the ground also slopes donwards.</p>

Adding Images

The image tag <img> is used to insert an image into a html document. Image files should be in either JPEG or GIF format. These files will have an extension of .jpg or .gif. GIF files are generally smaller than JPEG files. Size of image files is very important because the web browser must load every image file associated with a page before the entire page is viewable. JPEG images are best for photographs or artwork that needs more than 256 colors to display properly.

REMEMBER: Save the image to the same directory as the HTML document that references it. If the images are not in the same file they will not properly load into the web page.

The image tag by itself does not give the browser enough information to display an image so some attributes are required to give additional information. Similar to the break tag, the image tag does not contain an closing tag but instead combines the closing tag by ending in a slash before the closing bracket, <img ... />.

Attributes:

src: Use src=“Filename of image” to reference your image file.
alt: Use alt=“Type a description of the image.” to provide a text alternative for images displaying text or visual elements essential to the understanding of the page. Use alt="" if the image is used to create bullets in a list, a horizontal line, or other similar decoration, that is not essential for the understanding of the page.

1. Add an appropriate image to the page, remember to include the source information and an appropriate alternative text followed by the correct syntax to close the tag.

<img src="holocaustMemorial.jpg" alt=Holocaust Memorial" />

2. Preview in your document in a browser to ensure that the image appeared correctly.

Note: If your image appears broken, make sure the image is saved in the same location as the HTML document and make sure the image file name is spelled correctly being careful with case sensitivity.