HTML Tutorial


Lesson 6
Simple Formatting Tools

This page employs a number of simple formatting tools that you may find useful.

Both the banner graphic and the title are centered on the page using the <center> tag.

The line between them is created using the tag <hr width=468 align=center>.
hr designates this as a tag for a horizontal rule.
width=468 sets the width of the rule or line in pixels. Alternatively, you can use a percentage (e.g., width=80%).
align=center centers the line on the page.

The tag for the picture of the car is Beetle <img src="./gfx/beetle.gif" width=240 height=140 border=0 alt="Beetle" align=right>. From Lesson 4 you should recognize everything except align=right. This tells the browser to display the image on the right side of the page and to flow the text around it. In the source code, the <img src=...> tag comes before most of the text for this paragraph.

If you view the source of this page you will see the <img src=...> tag just below a tag that reads <!The next line places the picture on the right>. The <!...> tag contains a comment and is ignored by the browser. You may find it useful to have comments in your HTML documents if you ever need to go back and change them. If you even suspect someone else may need to maintain your documents, you should comment anything even slightly tricky.

To format indented text (like this) you will need to use a <blockquote> tag. The tag stays in effect after either or both the <br> and/or the <p> tags, as shown by the next paragraph

This paragraph is also indented because the browser has not yet gotten to the </blockquote> tag to close the blockquote.

The menu items below are centered on the page using a <p align=center> tag. The copyright notice uses a <p align=right> tag.

LESSON 5 | HOME PAGE | LESSON 7

© Geo. McCalip 2001