GoldBorder - HTML Guide: Learning HTML

INTRODUCTION

Style

You are now ready to begin developing your page with information that the viewer sees. As you continue your learning process and learn the HTML code needed to make the page come alive, remember to always have some basic concepts in the back of your mind (or at least on the side a little):

Keep a theme going with your page(s). A page that starts out as a fan page for Country Singers would not look professional if the second page they clicked on dealt with Heavy Metal Music.

Remember LESS IS MORE. As you read web pages, notice that you have an easier time finding information and enjoying the page if the creator did not fill-in every space on the screen. This is sometimes referred to as WHITESPACE. As you get better you'll get a feel for what is too much or too little WHITESPACE. Give the viewer's eyes time to move between links, pictures, text on your page with well done WHITESPACE and you will have a viewer who will enjoy your site.

Organization of information. Keep in mind what the visitor will be looking for on your site and how you can easily get them there. If you were a banking institution, you would make sure your telephone number, address, and other contact information was near the top. I went to a banking site to find a customer service telephone number so that I could ask a question and I had to do the following:
. Type in their web address,
... on their home address they only had a graphic with an ENTER button, so I clicked,
... gobs upon gobs of links, non-related to a phone number. After many guesses I clicked on ABOUT US,
... again..gobs upon gobs of links, after many tries I clicked on BRANCHES,
... received a search page. Had to type in what region I wanted (state), then click,
... had to type in what county, then click,
... pick my branch, then click,
... and finally at the bottom of this page in really small text was the phone number!

Okay, those are some basic TIPS on web design. I'll pass some more on to you as the course continues.

The Assignment

At the end of this assignment you should be able to...

INTRODUCTION
(1) Edit your page 1 and insert text about your favorite animal
(2) Enhance the look of your text so information stands out
(3) Create a link to your 2nd page (page two)

(1) Edit Your Page 1 And Insert Text About Your Favorite Animal

TIP! When web browsers read your HTML code, they ignore all characters that are not printable. These include:

spaces
tabs
new lines (hitting the ENTER key)
etc...

The browsers will take any of the above characters and crunch them into one space. For instance, let's say you type the following two words: green dog . The browser would do what you expect and just print green dog on the screen. But let's say you typed the same two words, but with five space between them? Here goes: green dog. Did you notice the extra spacing? No? That is because the browser took the 5 spaces and crunched them into one space.

Now what if you wanted the two words on different lines? I am going to type the two words on different lines and see if you can notice: green dog . Anything different? No? Again, the browser took the new line and made it a space. I could have hit the ENTER key 100 times and the browser would still turn those into one space. You will learn code that will tell the browser to specifically place new lines or extra spacing.

Time to put some text into your page (page one). Remember the code that contains information the viewer will see? That would be the <body> command. And how does the browser know to stop displaying information to the viewer? (you answer this one)

So now, go inside your page one (like you did for placing your title) and type the type of animal you are going to talk about. I am going to talk about a ONE HAIRED BLUE BELLIED SNORT BLASTER. I am also going to remember to go into my page and change the TITLE to reflect the subject of my page (hint).

To see an example of my new page one, Click Here.

Now we want a sentence or two (or more if you wish) about our animal, but we want the information a couple lines down so that there is some WHITESPACE on the page (remember the viewer). To make sure there is a blank line between the name of my animal and my information, I have to put code telling the browser to place breaks (like hitting the ENTER key) in the information.

In HTML the command is  . This command informs the browser to break to the next line on the screen. Remember I mentioned I wanted a blank line between the name and the information? To accomplish this I simply put two   commands right after each other. If I were to place only one, the browser would simply go to the next line and start showing the information. This would not produce a blank line between the information. For example:

If I only used one   between the name and information I would get a result like:

RESULT CODE USED

NAME OF ANIMAL
INFORMATION ON ANIMAL NAME OF ANIMAL
 INFORMATION ON ANIMAL
If I used two  's between the name and information I would get a result like:

RESULT CODE USED

NAME OF ANIMAL

INFORMATION ON ANIMAL NAME OF ANIMAL
 INFORMATION ON ANIMAL

Note: The   command has an exception to coding like some words do in English. Remember earlier we talked about HTML commands having an ending command with a /? Like <body> and</body>. Well the   command has no ending command. This is because you are just asking for a break in the information, you are not actually changing the look of the information/format.

TIP! HTML code is handled by the same rules as text. This means you can place code on the same line, different lines, etc. Remember the rule about WHITESPACE? So the following two styles of typing code will result in the browser doing the same thing:

Now go back to your page one and add some information about the animal. Remember I want a blank line between the name and the information. I also want a blank link between paragraphs. Typing two separate paragraphs of information will be plenty to show me you know how to use the   command (you may add more if you wish). To see my updated page one with information, Click Here.

(2) Enhance The Look Of Your Text So Information Stands Out

For instance, in the page you have created; you want the name of the animal to stand out from the information. One good practice with titles is to bold them. In HTML this command is  (b stands for BOLD). By placing the  command in your information, you can bold parts of it for better clarification. When you wish to stop bolding information, you then place the 's ending command which is  (notice the / ?). For example:

Snort Blaster

TIP! One of the common mistakes in a beginner coder is to not turn code off when needed. In the following example I am going to bold a couple words in a sentence the proper way, then I will redo the sentence but not turn off the bolding:

Correct

The quick brown fox jumped over the lazy dogs back.
Code Used: The quick brown fox jumped over the lazy dogs back.

Incorrect :

The quick brown fox jumped over the lazy dogs back.
Code Used: The quick brown fox jumped over the lazy dogs back.

Notice how on the INCORRECT version, the  is missing? The browser was told to start bolding information right before the word jumped and yet never told to stop bolding. So the browser will keep bolding information, merrily doing its job until you specifically tell it to stop.

Go back to your page one and make the name of your animal bolded. Also go into each of your two paragraphs and bold at least one word in the middle of a sentence.

HTML has other commands that also allow you to change the look of information. The following are commands that will allow you to change the look in the same manner you did with bolding. The page number is used as reference for the book you purchased for the course. The book goes into a lot of detail about commands and you will not be using a high majority of the attributes they list. If you wish to jump into more advanced coding, go ahead and try out some of the attributes the book shows. Remember that each command should be used with its ending command to turn the effect off.

COMMAND

EFFECT

PAGE

Bold (ring a bell?)

Example:

Bolded

P. 701-702

<blink>

Only viewable in Netscape

Blinking (use with caution, known to annoy visitors)

Example:

Blinking

P. 710-711

Italicize

Example:

Italicized

P. 777-779

Subscript

Example:

The following word is in _Subscript

P. 873-875

Superscript

Example:

The following word is in ^Superscript

P. 875-877

<strike> or
<s>

Strikethrough

Example:

~~Strikethrough~~

P. 852-853

Underline

Note: The underline should be used with caution. In web pages, the browser makes links UNDERLINED so the viewer understands what they can/cannot click. If you add information with underlining that is not clickable, the viewer can get easily confused.

Example:

Underlined

P. 912-913

There are other commands that also affect text, but the above are some of the most common.

Go to your page and add another paragraph about your animal (remember to put a blank line). Now inside your paragraph, use each of the above commands on a word or two to show me you know how to use them.

To view my up to date page, Click Here

(3) Create A Link To Your 2nd Page (page two)

Remember: The visitor has to make the choice to go to your page. They are making an effort to type in your address or get to a place that links to your site. Make their efforts worth it.

To make information more interactive (allowing the user to pick and choose), good web pages will create links to subpages that contain a majority of the information. The first page a viewer receives should only have titles or short descriptions of topics it covers. Our web page project is a good example. So far we have only typed a few paragraphs about the animal you like. Now we can have a link to our second page with more detailed information on the animal. If the viewer does not wish gobs of information on our animal, they would not have wasted time and effort going through that information on this first page.

Idea: Keep your homepage (the first page a viewer sees on your site) to only links and maybe one or two paragraphs about your site. Save the detailed information about topics to other pages the user can click to.

We are now going to place a link on our page one to our page two where we can later put more information about our animal.

There are two major aspects to a link.

The first is: where are you taking the viewer
The second is: what do you want the link to be listed as

To create a link, we must use the HTML command called an anchor. The basic anchor command looks like the following:

<a></a>

Notice the anchor command also has an ending command like most others. Up to this point you have been placing information between a command and its ending command to affect the information. Now we are going to place information inside the command to affect how the command acts.

To get the anchor command to redirect someone to another web page when they click, we have to let the anchor know what page address we want and that we want it clickable. To accomplish this we put a word called href inside the anchor command: <a href>

The href tells the anchor command that we want the information between the <a> and the </a> clickable.

We now have to tell the href where we want it to go. This is done by placing a = after the href and then the Internet Address of the webpage contained within quotes. For Example:

<a href="http://goldborder.com"></a>

The last thing you need to do is tell the anchor what you want to call the link. This is what the viewer will actually see as a clickable part of your information. This is the easy part, just type what you want to call it between the <a> and the </a>. For Example:

<a href="http://goldborder.com">GoldBorder Homepage</a>

Now that we have done all the parts of the link, you should be able to guess that I am making the text GoldBorder Homepage clickable to the GoldBorder web page which has an Internet Address of http://goldborder.com. By typing in the code into this page I would get a result like the following:

GoldBorder Homepage

It is time for you to do the work. I want you to place a link on your page one to your page two. When you have accomplished this, you will have a link that will pull up a blank page (remember we havn't done anything to our page two, yet). The address to your page two will look something like the following, except that the word dave will be replaced by your desired page two name:

dave2.htm

Click Here to see my updated page.