How to include images in HTML

George P. Landow

[Home —> E-Nonfiction —> Directions]

The document header and footer icons previously discussed employ the image command:

<img src="../top.gif">

<img src="sitemap2.gif" alt="project sitemap">

Image placement tags ("img src") can employ multiple parameters, all of which BBEdit, Homesite, and other html editors handle. Here are some examples:

<img src="12.jpg" align="left" alt="Portrait of Theodor Nelson" hspace="10" border="0">

What it all means

<img src>Image source command. This is one of two tags that cannot be closed.
12.jpg1. Source file for image to be placed in current file. 2. Note that images in html take the form of .gid or .jpg. Therefore, if you have .tiff or .pict, you must convert them using Photoshop or other graphics software. 3. The linked icon helps readers navigate the website. Essential for instructional or educational websites and projects.
align="left"1. Aligns image at left, causing text to flow around it. 2. A very useful means of combining graphics and text without having to use tables. 3. images can be algned "left," "right," "center," "top,"and "bottom."
alt="Portrait of Theodor Nelson"1. Provides title of image, which is very useful if the image serves as a link anchor: without the alt tag, the link will not function if there is a problem with the image. 2. The alt tage followed by text permits users with slow internet (narrowband) connections, who may need to turn off images in their browser, to use html. Therefore, linked icons at the foot of pages should always use "alt."
hspace="10"1. Hspace provides space around image in pixels. 2. One can also use "vspace" which provides space above and below image.
border="0"This tag sets size of border in pixels. When set to zero, link will not appear.

Related Materials

Cyberspace Web Overview Creative Nonfiction E-Nonfiction related courses Directions

Last modified 4 December 2006