Remember, the precise fonts, colors, sizes, and so on are mostly controlled by the brower software on the client machine. The best the HTML designer can do is to force relative differences in the fonts.
One of the easiest ways to set relative font sizes is in headings. Headings always force a blank line before and after the heading. By default, headings appear at the left margin...
| HTML Syntax | Resulting Display |
|---|---|
| <h1>Heading Level 1</h1> | Heading Level 1 |
| <h2>Heading Level 2</h2> | Heading Level 2 |
| <h3>Heading Level 3</h3> | Heading Level 3 |
| <h4>Heading Level 4</h4> | Heading Level 4 |
| <h5>Heading Level 5</h5> | Heading Level 5 |
| <h6>Heading Level 6</h6> | Heading Level 6 |
By comparison, this paragraph is the plain text as interpreted by your browser. You can compare the text here with the headings above for size. Note that all headings are bolder, but some are larger and some smaller than this plain text.
Within a paragraph of plain text you can alter the size of the font with the <font size=n> where n can be any number from 1 to 7...
| HTML Syntax | Resulting Display |
|---|---|
| Here is some text in <font size=7>Size 7, </font><font size=6>Size 6, </font><font size=5>Size 5, </font><font size=4>Size 4, </font><font size=3>Size 3, </font><font size=2>Size 2, </font><font size=1>Size 1.</font> All text between the open tag <font> and the close tag </font> will be in the set size. | Here is some text in Size 7, Size 6, Size 5, Size 4, Size 3, Size 2, Size 1. All text between the open tag <font> and the close tag </font> will be in the set size. |
A long heading will wrap to a second line depending on the width of the browser window. The text is left-justified by default.
If you wish to force a short heading onto two lines you can insert the <br> tag at the point of the desired break...
| HTML Syntax | Resulting Display |
|---|---|
| <h1>Heading Without Break</h1> | Heading Without Break |
| <h1>Heading<br>With Break</h1> | Heading
|
The same command can force a line break in plain text as well. Note the command   creates a non-breaking space to prevent a line break between two words.
| HTML Syntax | Resulting Display |
|---|---|
| Plain Text Without Break | Plain Text Without Break |
| Plain Text<br>With Break | Plain Text With Break |
A tag related to the line break <br> tag is the paragraph <p> tag. The paragraph tag also takes the following text to a new line, but it also inserts a blank line...
| HTML Syntax | Resulting Display |
|---|---|
| Plain Text Without Break | Plain Text Without Break |
| Plain Text<br>With Break | Plain Text With Break |
| Plain Text Without Paragraph | Plain Text Without Paragraph |
| Plain Text<p>With Paragraph | Plain Text With Paragraph |
You can alter the appearance of plain text as well. The commands are shown here.
| HTML Syntax | Resulting Display |
|---|---|
| <b>Bold</b> Text | Bold Text |
| <i>Italic</i> Text | Italic Text |
| <blink>Blink</blink> Text | Text |
| <b><i><blink>Bold Italic Blink</blink></i></b> Text | Text |
Browsers ignore returns and multiple spaces in the source document. You have seen how to force returns with the line break and paragraph commands. There appears to be no command for inducing multiple spaces for text alignment in plain text.
It is possible to force multiple spacing with what is called a preformatted tag <pre>. This tag allows whatever is in the document in terms of spaces and returns to be displayed. Notice that the preformatted text usually appears in a monospaced (Courier) font...
| HTML Syntax | Resulting Display |
|---|---|
<pre>Text One</pre> | Text One |
<pre>Text Two</pre> | Text Two |
<pre>Text Three</pre> | Text Three |
| Plain Three | Plain Three |
Plain text is by default left-aligned. It is possible to have plain text and even headers centered in the user's window by using the <center> tags...
| HTML Syntax | Resulting Display |
|---|---|
| <center>Center Text</center> | |
| Plain Text | Plain Text |
| <center><h3>Center Heading</h3></center> | Center Heading |
Headings can also be aligned with a heading attribute. This is done by adding an alignment command within the heading open tag...
| HTML Syntax | Resulting Display |
|---|---|
| <h1>Align Left</h1> | Align Left |
| <h1 align=center>Align Center</h1> | Align Center |
| <h1 align=right>Align Right</h1> | Align Right |
A paragraph of plain text can be aligned at will using the align attribute. This is done by adding an alignment command within the paragraph tag...
| HTML Syntax | Resulting Display |
|---|---|
| <p>A paragraph of plain text can be aligned at will using the align attribute. This is done by adding an alignment command within the paragraph tag... | A paragraph of plain text can be aligned at will using the align attribute. This is done by adding an alignment command within the paragraph tag... |
| <p align=center>A paragraph of plain text can be aligned at will using the align attribute. This is done by adding an alignment command within the paragraph tag... | A paragraph of plain text can be aligned at will using the align attribute. This is done by adding an alignment command within the paragraph tag... |
| <p align=right>A paragraph of plain text can be aligned at will using the align attribute. This is done by adding an alignment command within the paragraph tag... | A paragraph of plain text can be aligned at will using the align attribute. This is done by adding an alignment command within the paragraph tag... |
Another issue of alignment is creation of outlines for various levels of left margin indentation. The current versions of Netscape do not support tabs as far as I can tell, so the way to do this is by a definition list. This first example is a simple definition list:
| HTML Syntax | Resulting Display |
|---|---|
|
<DL> <DT>Defined Term <DD>Defined Definition...as you can see this can go to another line and the word wrap continues the indentation. Of course this depends on the width of the window. <DT>Second Term <DD>Definition for the second term. </DL> |
|
Now I show you a nested definition list that could be an outline. You simply use nested definition lists to force additional indentation. It is a trick, but it works.
| HTML Syntax | Resulting Display |
|---|---|
|
<DL> <DT>I. First Level Indent <DD>A. Second Level Indent <DL> <DD>1. Third Level Indent </DL> </DL> |
|
Return to the HTML Development Home Page.
Return to Ross Koning's Home Page.