20MB of webspace and email for FREE! Click here!
This banner was supplied by SAFE Audit




©1997 Webshowplace



HTML Lesson 2

Improving the appearance of your web page is a simple matter of adding the appropriate HTML tags.

Before proceeding, though, use your word processor to make a backup copy of home.htm (which you created in lesson 1), so that you can freely experiment on your working copy without fear of losing what you have accomplished so far.

Use your word processor to open home.htm. Notice, first, the top portion of the page, the part between the <HEAD> and </HEAD> tags:

<HTML>
<HEAD>
<TITLE>......YOUR PAGE TITLE. .........</TITLE>
</HEAD>

Leave this portion alone for now. (It affects the title bar at the top of the browser window and can contain other information directed at browsers and search engines.) You can experiment with the appearance of the page by changing the HTML tags between <BODY> and </BODY>.

Large-Print Page Heading

First, try changing the heading by using different numbers after "H" in <H1> and </H1> (always making sure the numbers are the same in both places). The number determines the size of this text as it appears in browser windows. (Remember to "save" home.htm as a text-only word processor file each time before opening it with your browser, and to "reload" in the browser window to see the new version.)

Paragraphs & Line Breaks

Now try adding and deleting <P> tags, which define paragraphs by instructing the browser to add a line break and a line space.

Also try replacing <P> in some places with <BR> which causes a line break without a line space.

When writing HTML source code like this you may find it helpful to make your word processor document follow the same pattern of line brakes and line spaces that will appear in the browser window. For example,

text text text text text text text text text text text text text
<P>
text text text text text text text text text text<BR>
text text text text text text text text text text text text<BR>
text text text text text text text text text text
<P>
text text text text text text text text text text<BR>
text text text text

will be easier for you to read and revise later, even though the same web page appearance would be generated for browsers if your word processing document looked like this:

text text text text text text text text text text text text text<P>text text text text text text text text text text<BR>text text text text text text text text text text text text<BR>text text text text text text text text text text<P>text text text text text text text text text text<BR>text text text text

The browser has no problem reading the source code when it is all run in together like that, but humans do find it difficult.

Horizontal lines

Some horizontal lines you see on web pages are actually graphics added to the page. We will explain how to add graphics in a later lesson. But now you can experiment with the <HR> tag, which inserts a horizontal rule.

Typing this

text text text text text text text text text text text text text
<HR>
text text text text text text text text text text

in your word processor results in this

text text text text text text text text text text text text text

text text text text text text text text text text

on the page when viewed throught the browser.

Bold Face Type and Font Sizes

To make certain words appear in boldface, you must add the tags <B> before and </B> after those words.

Most browsers also recognize font size commands. Try enclosing various words or sentences between these HTML tags: <FONT SIZE=1> and </FONT>. Varying the number from 1 to 7 will give you text of various sizes.

Centering on the Page

Text that you type between <CENTER> and </CENTER> will appear centered in the browser window. Try experimenting with a few words on home.htm.

Nested Tags

If you use more than one set of HTML tags to modify the same portion of text, it is helpful to "nest" them with one group of tags inside the other. For example, write

<CENTER><B>words</B></CENTER>

to make "words" boldface and centered, rather than writing

<CENTER><B>words</CENTER></B>

In some cases, tags that are not nested will not work properly, while in other cases they will work but will be more difficult to work with if you want to go back and revise.

Characters Reserved for HTML

Besides the tags that you must add, there are also certain symbols that you must remove from ordinary text because these symbols are used in HTML code. For example, quotation marks are used in the code and so must not appear in your text to avoid confusing the browser. You must replace them with something else that will tell the browser to insert them on screen. You replace the quotation mark with "&quot;".

So, in order for people to see

John said, "Hello."

on their screen, you must type

John said, &quot;Hello.&quot;

To help you keep track of such tags that do not have < > around them to make them stand out, you might want to type them in a different style, if your word processor permits this:

John said, &quot;Hello.&quot;

Lesson Review

To review the techniques covered so far, notice how you would create a page with this appearance

My page heading

My first paragraph says, "Hello."

My second paragraph says more.

And in a footnote, I also have more to say.

by writing it this way:

<HTML>
<HEAD>
<TITLE>My page heading</TITLE>
</HEAD>
<BODY>
<CENTER><H1>My page heading</H1></CENTER>
<P>
<FONT SIZE=4>My <B>first</B> paragraph says, "Hello."
>P>
My <B>second</B> paragraph says this.</FONT>
<P>
<HR>
<P>
<FONT SIZE=2>And in a <B>footnote</B>, I also have this to say.</FONT>
</BODY>
</HTML>

Congratulations! You can