SiteBilder Website Tutorials ~ Basic HTML Lesson 2

Basic HTML Lesson 2

Go To... (1) (3) (4) (5)

Review

efore we go on, take the time to review what you have learned so far, and to play around with different color and font attributes until you begin to feel a little familiar with them. I also want to mention a little bug that sometimes crops up in browsers: if your browser doesn't seem to want to reload when you hit the button, try hitting the F5 key or hold down the shift key when you click on the Reload button.

Backgrounds: Colors and Images

Putting a background color on a page is a pretty simple matter but one that you still have to take a little thought about the outcome. If you refer back to the demo on text color in lesson one, you will see that not all combinations of font color and background color will go well together. Also, not all browsers will display colors in the same way. Your safest bet is to stick with the basic colors, of which you can see a chart if you visit here.

Background colors are usually entered inside the <BODY> tag. Here's how you do it:

....and here is what you'll get:

Your Text

Try to always use a high contrast beetween your text and background color and use colors that won't produce eyestrain for your users or they may soon leave your site. Here's an example of very poor color combinations that I actually found on a website:

What NOT to do!

Needless to say, not many visitors will browse through that site for very long.

You can add a background Image if you want. Here's an example.

....here is what you'll get:

Text

If you're wondering about the term 'buttons/ivorybg.gif' in the example, it simply states the 'Path to the image. If you put all your html documents and images in the same folder on you hard drive you won't have to worry about path statements; just enter the name of the image. But sometimes, especially if you build a really big website someday, you may want to create some subfolders in your base directory to keep things a little easier to find. I keep all my html docs in 'C:\HTML\WebCrafters' and since I am working in that folder, I don't have to enter a path statement to load my files. But I keep all my images in a subfolder call 'images', so the path from my default folder to my images has to have the above format.

It's also important to remember a few more thing about paths image names. First, all path statements, image names and html documant names are case sensitive. In the above example, if I entered 'buttons/Ivorybg.gif' or 'buttons/ivorybg.GIF' or any other rendition of the path and filename, I would generate an error and see no image on my web page. In most of HTML programming it doesn't matter whether you use small letters, capitols or mix 'em all up. But when it come to any file name or path statement it most definitely does matter.

That said, let's try this....

...and you'll get this:

Text

And if you sometimes like to do the wild thing...

Text

Background images come in different shapes and sizes and your browser displays them a little differently, but you dont have to worry about that- your browser will configure it. If you want any of the above images by the way, just put your cursor on it, right-click and choose "Save Picture As" to download it.

There is a little more that we should put into our Body tag. Your browser, by default, displays Text in black, Links in blue, Active Links in red, and Visited Links in purple. If you leave your body tag as we did above, these colors are what you'll get automatically. But in case you may want to specify your own colors, this is how you do it:

This is what you'll have:

Text
Links
Active Links
Visited Links

Keep in mind that most users are pretty well used to seeing the link in blue.

Links

One thing that all web pages rely on is links of one kind or another. A link is just a way to tell the browser where to find things, like the path statement does for your hard drive. Another term for a link to a website is URL. A URL (Universal Resource Locator) is simply an address.

To make a link you start out with the Anchor tags:

<A> </A>

An integral part of the Anchor tag is the HREF attribute like so:

<A HREF=" "> </A>

The next step is to put in the URL. The link to this web page you are viewing now would be this:

And the last step is to add the name of the link for the user to click on:

<A HREF="http://sitebilders.com/ learn3.html">Lesson 2</A>

Lesson 2

All the URL information goes in the opening Anchor tag, the name you want the user to see and click on goes between the two tags, and the tag on the right closes things.

The same holds true for URL's as for filenames and path statements. URL's are case sensitive on most servers, such as Unix. A safe course to follow is to always make your URL's in lower case letters.

You can also link to a different part of the same page. This type of link is called a Document link, or doc link for short. And even though we are not going very far and only linking to the same page we're on, this type of link has to have a 'target' or reference to find the exact part of the page we want to go to when the link is clicked. This target is sometimes referred to as a Bookmark. For this demonstration, we will make a link to take us back up to the heading 'Links' on this page.

In this document, I added this code as my 'target':

<A NAME="Links">Links</A>

As you see, our target uses Anchor tags also, but in a different way. The first reference to 'Links' (in quotes) tells the browser where to go, and the second one prints the word 'Links' on the page. If you want to take the viewer somewhere else on your page, but you don't want any text printed there, just leave the space between the anchor tags empty. Click Here and you're off! (Don't forget to come back!)

The code that took you up to the Links heading is this:

Click <A HREF="#Links">Here</A> and you're off!

Notice the # symbol immediately before the target name; this tells the browser that you are going to someplace else on the page, not to another page altogether. It's a good idea to require the name of your html document also, to insure that all browsers that view your site will find the place you intend them to:

Click <A HREF="learn2.html#Links">Here</A> and you're off!

You can also use an image as a bookmark for your document link. Just type it up like this:

The code for the link to take you there is this:

Click <A HREF="#bigeyes.gif">Here</A>

If you want to try it, click Here

How about an email link? No problem.

Mail Me!

Well, that's about it for Text, Backgrounds and Links. In Chapter Three we'll learn a little about graphics. All set?

Lesson 3

Contents

(1) (3) (4) (5)