Website Tutor - Lesson 2

	Sign In Sign-Up

Html Studio's

Lesson 2

To keep things a little cleaner I am only going to write what is in the <BODY> tags. I will omit the <HTML>, <HEAD> & <TITLE> tags. Needless to say, keep these in your document.

<BODY>
</BODY>

Type something really cool.

<BODY>
Something really cool
</BODY>

Something really cool

Whenever you make a change to your document, just save it, then hit the Reload button on your browser. In some instances just hitting the reload button doesn't quite do the trick... in that case hit Reload while holding down the SHIFT key.

I think the first thing we are going to learn is how to change background colors.

<BODY BGCOLOR="#CCFFCC">
Something really cool
</BODY>

Something really cool

In 256 color mode Netscape dithers all images to these colors. Additionally if a background color is specified that is not one of these colors, then Netscape will usually pick the closest of these colors to use. Although it's not overly important to understand how browsers and colors work together at this point in time, you may want to stop back after the lessons and learn about Netscape's infamous 216 colors.

You can specify a background image instead. (Note, the image should be in the same folder as your HTML file. More on this below.)

<BODY BACKGROUND="swirlies.gif">
Something really cool
</BODY>

Here's the background image

In order for the image to show up, the browser has to be able to find it. For now, we want the image to be in the same folder as your HTML document (page1.html). The easiest way to do this is to right click on the swirlies image above and choose Save Image As (or some variant thereof). Browse to wherever you put page1.html and save the image there. Later we'll get into this stuff in a little more detail.

It's probably pretty obvious that the image is tiled. If you use a long skinny image you can get an effect like this...

<BODY BACKGROUND="bluebar.gif">
Something really cool
</BODY>

Here's the background image

(It's actually 1700x4, but I have compressed it here to 560x4 so it will fit on everyones screen)

Let's go back to a plain old screen.

<BODY>
Something really cool
</BODY>

Something really cool

We can make things bold.

<BODY>
Something really <B>cool</B>
</BODY>

Something really cool

What we are (more or less) telling the browser is: at the <B> start making things bold, and at the </B> stop making things bold.

The same principle applies to italics...

<BODY>
Something <I>really</I> <B>cool</B>
</BODY>

Something really cool

..and underlining.

<BODY>
<U>Something</U> <I>really</I> <B>cool</B>
</BODY>

Something really cool

Back again to a plain screen.

<BODY>
Something really cool
</BODY>

Something really cool

We can use tags in combination if we want to.

<BODY>
Something really <I><B>cool</B></I>
</BODY>

Something really cool

This is an example of nested tags. If you are going to use tag pairs in combination (which you will probably be doing quite a bit), then to avoid confusing the browser, they should be nested, not overlapping. Let me illustrate...

<THIS><THAT></THIS></THAT> Overlapping tags.... bad
<THIS><THAT></THAT></THIS> Nested tags.... good

<--BACK NEXT-->

General Table of Contents	Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10	Index and Quick Reference	HTML Guide
Website Tutor

Maintained by Nick Grant < htmlstudio@talk21.com >

HTML Studio's Main Page