Week 2 - Formatting Text

First, let's cover a little business. We will be saving everything from this class to the G:\ drive, which is on a network computer at Bridgerland. Save to G:\scratch\begweb\yourname folder. Everyone will can create their own folder for saving their work. I suggest that you work from the C:\work\ directory and at the end of class, save everything to your folder on the G:\ drive.

To save your files to your folder, open Windows Explorer. Browse to the C:\work folder. Select the files you want to back up. Hold down the CTRL key and click to select more than one file at a time. Select the Edit menu and click on Copy. Now browse to your folder on the G:\scratch network. When your folder is open, select the Edit menu then click on Paste. You may be prompted if you want to overwrite old files. Click Yes. Your files are now backed up.

When class starts the next time, follow the same directions, but copy from your folder on the network and paste to C:\work, then open the files found in the C:\work directory. You may want to backup more than once per class in case something happens and you must shut-down your computer. DO NOT OPEN ANYBODY'S FOLDER BUT YOUR OWN. In a few weeks we'll learn how to save things to a web server that can be accessed from anywhere.

In this lesson, we will be learning how to further format our webpage by changing the way our text appears. To begin, make sure you have open your basic HTML document we created in Lesson 1, or create a new one. Remember the three sets of basic HTML tags?

We will be learning many new HTML tags today, so take your time and insert them into your document and see how they affect your page. Remember that a pair of HTML tags will only affect text that is between the opening and closing tags. All tags that format text must be closed.

CHANGING FONT FACE
I am arial.
would display -
I am arial.

The tag has several attributes. The FACE attribute changes the font that the user sees. All text between the opening and closing font tags will appear in that font. Fonts are designated by the computer the web-page is being viewed on. If you specify a font that is not loaded on the viewers computer, that font will not be displayed. For this reason, you can specify more than one font in the values of the FACE attribute, separated by commas. In the example above, ARIAL was my first font choice. If a viewer does not have ARIAL loaded on his computer, then the browser would try to display COURIER, which is my second choice. You can enter any fonts that you would like, but if the first font is not loaded on the viewers computers, it will try the next font, until all of the fonts options have been attempted. If none of the fonts are available, the browser with then display the default font, which is usually Times New Roman.
HINT: Only specify common fonts so that you are sure your viewers will be able to see it.

Bold
To bold text, use the  tag.
I am bold text
would display -
I am bold text

Italicize
Italics are done with the tag.
I am italicized text
would display -
I am italicized text

You can also use the tag for <BOLD> and the tag for . They are displayed exactly the same.

You can combine any text formatting tags to further format the text.
I am bold, italicized, arial narrow text. would display -
I am bold, italicized, arial narrow text.

Notice how the tags above are properly nested. They are closed in the opposite order than which they were opened.
HINT: AN EASY WAY TO SEE IF TAGS ARE PROPERLY NESTED IS TO DRAW ARCHING LINES FROM OPENING TAGS TO CLOSING TAGS. IF ANY OF THE LINES CROSS, THEN AT LEAST ONE TAG IS IMPROPERLY NESTED.

Subscript and Superscript

H2O ----- H₂O
E=MC2 ----- E=MC²

Monospaced Fonts

Use <TT> <CODE> <KBD> or <SAMP> to show monospaced font. <TT> is the most commonly used.

<TT>This is teletype font</TT>
would display

This is teletype font

Preformatted Text

Previously we have learned that if you include extra spaces or hard returns in your source code that the browser would ignore them. The only exception to this rule is for text within the <PRE> and the </PRE> tag.

<PRE>Name Age State
Jared 23 Utah</PRE>
would display

Name          Age       State

Jared         23        Utah

Underline, Strikeout, and Blink

is for underlining. Be careful with underlining, because underlined text is reserved for links.
<STRIKE> is the tag for ~~strikeout.~~
<BLINK> is used for blinking text. Blinking text is only recognized by Netscape.

Changing Text Size

To change the text size, we could use the <H1-6> tag, but the heading tag is reserved for page titles or headings. For long sections of text, you can change the size by adding a SIZE attribute to the tag. The SIZE attribute can have values of 1 through 7. 1 is the smallest size and 7 the largest. This is just opposite of heading sizes, so don’t get confused. It is used in this manner:
I am font size 7
I am font size 1

would display:

I am font size 7.I am font size 1

You can also use relative font sizes of +/- 1 through 7. This will increase or decrease the font by the number of sizes specified from the default font size. The default is typically 3. would change the font size to 5, or 3 (the default) + 2.
The <BIG> tag increases the font 1 size bigger than the default.
The tag decreases the size by 1 from the default.

You can also override the default text size with the <BASEFONT> tag. This tag is not closed, because it affects the entire document. It is used only once per HTML document. Insert the <BASEFONT> tag directly after the opening <BODY> tag. Again the default is typically three, so it makes no sense to set it to three.

<BODY>
<BASEFONT SIZE="5">
would set the default font size to 5.

Once the BASEFONT has been set, relative font sizes <BIG>, , and + or - values will be measured from the new default set in the BASEFONT SIZE tag.

If you set a BASEFONT to say, 5 and add a tag, the font size will be 7, not 9, because 9 is not a possible font size (only 1 - 7 are available). If you set a size above 7 or below 1, the browser will display it in the closest available size.

Adding Color

To learn how colors work in HTML, read the page on hexadecimal, RGB colors found here.

You can now set the background color of the browser window by adding an attribute to the <BODY> tag.

where rrggbb is a hex color value. You may also use one of the predefined colors found at the link above.

To set the default font color, add the TEXT attribute to the BODY tag.

Because there is only one <BODY> tag per HTML document, combine the two attributes if you need to:

To change the color of sections of text, use the COLOR attribute in the tag.

This is yellow text
would display

This is yellow text

You can combine attributes of the FONT tag:

I am big, purple text.
would display

I am big, purple text.

Adding Comments

To add a comment to your HTML code that will not appear in the browser, insert this -

Comments are primarily for you, the web designer's use only. They can be used as reminders or to explain sections of your HTML document. If there is a section of your webpage that doesn't seem to be working, you can surround that section with  so it will not display and you won't have to delete it.

That's all for now, but there is lot's more to come!

Return to Class Homepage.