Webmastering

HTML, Page 2

We've learned that HTML operates on a system of tags and that the tags tell the Web browser how to make stuff appear on the screen.

In Assignment 4 we set up a basic page with no formatting...let's expand our knowledge.

Font Formatting

Most browser have default (built-in) fonts: Fixed width or Variable width. Fixed width fonts generally appear as Courier. Variable width fonts generally appear as Times New Roman. Remember, this is dependent on the viewer's browser's related fonts, not the fonts on your machine. Therefore, don't choose a font that is rare or obscure. If you do, make sure you include an alternate font, just in case.

The <FONT...> tag allows you to do three things: Set the font face, font color, and font size. These are called attributes and they are contained within the opening FONT tag itself.
For example: Font 1 looks like: Font 1
Notice there are two fonts listed. The first is the one you hope they have. The second is the alternative font...just in case.
For example: Font 2 looks like: Font 2
The Color can either be one of the 16 predefined colors in HTML or the hexadecimal code for other colors.
For example: Font 3 looks like: Font 2
Of course, these can be combined within the same tag. Some HTML editors use separate, nested tags, but it is cleaner to use one tag.
For example: Font 4 looks like: Font 4

Text Formatting

Ways that you can format how the text itself appears on the screen includes Headings, Bold, Italic, Underline, ^Superscript, and _Subscript.

First we'll talk about Headings. The Heading tags, represented by <H...> allow you to format a heading, in sizes 1-6, which automatically includes a bold type and blank lines above and below the text between the tags.

For example: <H1>Heading 1</H1> through <H6>Heading 6</H6> looks like:
Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6
As you can tell, anything smaller than Heading 3 may not be worth the formatting. Heading tags do prevent you from getting close to the heading line, either from the top or the bottom.

Bold, Italic, and Underline are pretty self explanatory. They do exactly what they say and, if you're familiar with a word processor, chances are that you have used each of these often.

For example: Bold looks like: Bold
For example: Italic looks like: Italic
For example: Underline looks like: Underline

Superscript and Subscript will probably be rarely used, but are nice to know.

For example: Superscript looks like: ^Superscript
For example: Subscript looks like: _Subscript

Combining formats. Yes, you can combine tags. But you don't really combine them ~ you nest them, like you nest measuring cups. Be careful, though, that you nest & un-nest in the reverse order. Notice in the examples how the outermost tag is the last closed and the innermost is the first closed.

For example: BoldItalic looks like: BoldItalic
For example: UnderlineBold looks like: UnderlineBold

Line Breaks

Line breaks don't really format the text, but they are important. Without breaks, Web browsers will run all the lines together unless it is a tag that has its own, built-in line breaks (like <H...>).

Paragraph tags do not require a closing tag. When it encounters a tag, it starts a new line and adds just enough space to set it off from the previous line. On the other hand, Break is equivalent to pressing Enter in a word processor and does not add blank space above or below the line.

For example: Paragraph looks like:
Paragraph
For example: Line Break looks like:
Line Break

Now, go forth and create! Assignment #6

On-Line HTML Tutorials and Tips:
HTML Goodies

Previous page ~ Telecom ~ Next page