n this final lesson we'll enhance some of the things you have already learned, and give you a few handy insider tips. If you recall, in lesson 1 we mentioned that the default placement of text in HTML programming was on the left side of the page, and you learned how to right-justify and center the text.

Luckily, there are a few more tools we can use to put what we want to display where we want it on the page. The first of these is the Preformat Tag.

<PRE></PRE>

The Preformat tag does pretty much as it says- whatever you type between the tags and where you type it should be how your browser will display it. For instance, if you type something like this...

<PRE>

These lines this! of text just like should show up

</PRE>

...then this is what you'll get:

These lines this! of text just like should show up

Another handy tool is the Unordered List tag.

<UL>
<li>Apples</li>
<li>Oranges</li>
<li>Banannas</li>
</UL>

Apples Oranges Banannas

The little tag li stands for line insertion, and also tells the browser that since this is an unordered list it should add a bullet before the text. In the case of the Ordered List which follows, the same tag li is used and tells the browser to put in line numbers.

<OL>
<li>Banannas</li>
<li>More Banannas</li>
<li>Prunes</li>
</OL>

Banannas More Banannas Prunes

Or, you may want to use a Definition List:

<DL>
<dt>Animals</dt>
<dd>Dogs</dd>
<dd>Cats</dd>
<dd>Mice</dd>
<dd>Rats</dd>
<dd>Politicians</dd>
</DL>

Animals Dogs Cats Mice Rats Politicians

We can jazz it up just a mite by making the definition title bold and underlined.

<DL>
<dt><B><U>Animals</U></B></dt>
<dd>Dogs</dd>
<dd>Cats</dd>
<dd>Mice</dd>
<dd>Rats</dd>
<dd>Politicians</dd>
</DL>

Animals Dogs Cats Mice Rats Politicians

We can even do something like this with the Definition list:

<DL>
<dt><B>Sorry Jokes</B></dt>
<dd>
A country bumpkin came home and found his house<BR>
on fire. He rushed nextdoor, telephoned the fire<BR>
department and shouted, "Hurry over here. My house<BR>
is on fire!"<BR>
"OK," replied the fireman, "how do we get there?"<BR><BR>
"Shucks, don't you still have those big red trucks?"
</dd>
</DL>

Sorry Jokes A country bumpkin came home and found his house on fire. He rushed next door, telephoned the fire department and shouted, "Hurry over here. My house is on fire!" "OK," replied the fireman, "how do we get there?" "Shucks, don't you still have those big red trucks?"

Well, you're right... it wasn't that funny.

There is also the Blockquote. Here is an example:

<BLOCKQUOTE>
Whatever text you may decide you want to put in a Blockquote will be indented from the other text before and after you use it. This tag can be useful for making a paragraph stand out a little bit from the text on the rest of your page, like this:
</BLOCKQUOTE>

Here's the output of the above:

Whatever text you may decide you want to put in a Blockquote will be indented from the other text before and after you use it. This tag can be useful for making a paragraph stand out a little bit from the text on the rest of your page, like this:

Another tag I will mention, though I've never had much use for it, is the 'Typewriter Tag'. This tag will print out monospaced text to your web page, and is useful for printing text that is very legible.

<TT>
This is an example of mono-spaced typewriter text.
</TT>

This is the way it looks on your page:

This is an example of mono-spaced typewriter text.

One more text manipulation tag, which was mentioned only briefly in lesson one, is the Paragraph tag. This tag is one which you will eventually find yourself using a lot. Here are some examples of what else this tag can do along with the Align attribute:

<P>This is aligned left by default</P>
<P ALIGN="CENTER">...this is in the middle</P>
<P ALIGN="RIGHT">...and this is aligned right.</P>
<P ALIGN="JUSTIFY">
And this is the neatest use of the Paragraph tag because it will allow you to format your page just like the words you see in a novel. You won't have to look at those messy uneven line ending on the right side of the page which usually makes all your other attempts at making your page look well, just go to waste... that's about all I can think of to say, but you get the idea.
</P>

This is aligned left by default

...this is in the middle

...and this is aligned right. And this is the neatest use of the Paragraph tag because it will allow you to format your page just like the words you see in a novel. You won't have to look at those messy uneven line endings on the right side of the page which usually makes all your other attempts at making your page look well, just go to waste... that's about all I can think of to say, but you get the idea.

Static Background Image

The following code will cause your background image to remain fixed as the page contents are scrolled over it. It's a neat effect, but is Internet Explorer specific.

<BODY BACKGROUND="Pic.jpg " BGPROPERTIES=FIXED>

How to open a page in a new window

You have two choices to do this, this one:

<A HREF="Name.html" TARGET="new">Go Here!</A>

....or this one which is an old standby that works with almost all browsers:

<A HREF="Name.html" TARGET="_blank">Go Here!</A>

The following code is not HTML but JavaScript. I'm throwing it in here as a bonus because you've been such a good student. (Haven't you?) This will do about the same thing as the above, but you have a few more options. You can only change the values in red. As I said, this is a scripting language and a very technical one. To use the script, highlight, copy and paste the code into your html document between the two Head tags like this:

<HEAD>
Paste Following code Here in your document...
</HEAD>

<script language="JavaScript">
<!-- hide script from old browsers

function openNewWindow() {
popupWin = window.open('Your URL or Page Name Goes Here',
'open_window', 'status,scrollbars,resizable,dependent,
width=400,height=300,left=0,top=0')
}

// end hiding -->
</script>

Then, the next step is to copy the following code and paste it where you want to have your link Name for the new window on your page, in between the Body tags

<a href=""javascript":openNewWindow();">Link Name</a>

Read Carefully...
The target URL or html document you want to link to in the new window goes in the first code, NOT in the code for the link Name you will click on.

The width value is the new window width in pixels- keep this value between about 100 to 640.

The Height value can be between about 50 and 400.

left refers to the distance from the left edge of your browser window to the left edge of your new window. This is usually zero but you can change it.

top refers to the distance from the top of your browser window to the top of the new window.

The Name of your Link, not the URL or html document you are linking to, goes in the second code example that goes in the body of your page.

Well, that's about it for the basics. If you've gotten this far, you deserve a pat on the back. With what you have learned you make your home page just about the way you want it, and not have to depend on those 'slick' html editors that sometimes do what you want, and more often do what they want, while using enough verbage to fill a small dictionary.

You'll find some links that may help you in one way or another below. And when you're ready, you may want to check out the Advanced HTML tutorial and the the one on basic Javascript (preferably in that order). Thanks for your company, you've been a great student!

Some Freeware links for you:

Clipart.Com
     Lots of good clipart graphics here.

---

Contents

(1)    (2)    (3)    (4)

[Printer Friendly Page]