Web Page Construction

Snippets

Any code that you are going to use repeatedly can be saved as a snippet and installed into your document later in its entirety and at a place of your choosing.

Inserting an image into any part of the document body

Images are located somewhere among your site's data. It is convenient to have all of your images in an folder labelled images. In putting an image into your document, whether you do it in hand in code view or by a program in design view, it must have something like the following tag:

If your document is in a folder different from your folder of images the image folder will be preceeded by ../

For example, a tag with an image of Clinton might be as follows:

Adding a description of the image (preferred by people like Google) and image dimensions produces:

If you want your image on the right with a horizontal margin of 12 pixels with a 1 pixel border, your tag might look like this:

Hspace puts a horizontal distance between your image and other images or text, and vspace does the same thing veritically, moving your image down however much you please.

You can put images inside a paragraph or let them stand alone. If you put an image on the right side of a paragraph, it might look like the following.

<p><img src=../images/clinton" alt="William Jefferson Clinton" width="160" height="248" align="right" vspace="4" hspace="12" border ="1"/> Blah blah beginning of paragraph to end of paragraph. </p>

Adding a CSS element to vertical spacing of a line of words below your image

Invent any name for a class selector, for example .p4 and add some values:

.p4 { clear:left; margin-top:3px; line-height: 16px }

Clear:left assures that your line of text will be at the bottom of your image rather than to the right of it.

Margin-top is the vertical distance between the image and the line of text.

Line-height is the distance between lines if the text is more than one line.

Web Page Construction Lesson 9: Images

Web Page Construction
Lesson 9: Images