GoldBorder - HTML Guide: Learning HTML

INTRODUCTION

Style (continued)

Now that you have learned some basic formatting commands, we can move in to more advanced lessons involving multiple commands on the same information. I will also introduce you to some more style commands and finally give you pointers on how your style should also be reflected in your links.

The Assignment

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

INTRODUCTION
(1) Use style commands together
(2) Explore the  command
(3) Returning back to your page one

(1) Use Style Commands Together

CODE	My book is titled <i>The World Of Snort Blasters</i> and I like it very much.
Result	My book is titled The World Of Snort Blasters and I like it very much.

This works fine, but in the above sentence I really want the reader to notice the title. So I would like it to be italicized and bolded. To accomplish this, I simply place the BOLD command and the ITALICS command in front of the information and end both the BOLD and ITALICS commands afterwards. So my new code would look like:

CODE	My book is titled <i><b>The World Of Snort Blasters</b></i> and I like it very much.
Result	My book is titled The World Of Snort Blasters and I like it very much.

TIP: When using multiple commands, try and end the commands in reverse order of how you started them. For example, if I wanted to have some information bolded, italicized and superscript I would first put the  commands before my information and then to end them I would put the ending commands in reverse order like .

There is actually a good reason for this. Using this type of organization will help you better control and understand what your code is doing when you look at it later. An analogy of this could be painting a statue. When painting a statue you could first paint on a base coat, then a dull color and finally a bright gold color. If you wanted the statue to getback to its original state, you would first remove the gold color, then the dull color and finally the base coat (working in reverse order).

Though HTML will allow you to be unorganized and end commands in any order you want, learning to be organized in the beginning will save you headaches later when your pages become large with 100's of commands.

Edit your page two. Type the basic HTML commands to get the page started then put a title for the browser as well as a title for the viewer (remember <title>and <body>?). The title should reflect that page two is about more detailed information on your animal.

After you have the title placed in the two proper places, I want the title the viewer sees to be BOLDED as well as ITALICIZED (look above for using multiple commands).

Now type some more detailed information about your animal. At least two paragraphs should be used so I can see your use of spacing (remember blank lines, etc..). I also want you to have a small list of characteristics about your animal. Each characteristic should be listed on its own line. For example:

TIP! The  command. This command is used to perform two   commands in a row. It stands for paragraph and is useful when you want to have a blank line but want to shorten your typing. If you wanted four blanks lines you could put two 's in a row (etc..).

Try using the command on your page in places where you were going to type .

Click Here to view my page two.

(2) Explore The  Command

color
font (i.e. Times New Roman, Arial, etc..)
size

There are a few other attributes the  command allows you to change, but those are for advanced programming (intermediate HTML?). This command does have an ending command of .

Here are some examples of what you can do with the  command, the first example is the information without ANY enhancements:

EXAMPLE # CODE USED RESULT EFFECTS
USED

1 Big Sale on NOW
 Great PRICES on
 . Yellow Polka Dot Suites
 . Cotton Sandals
 . Upside-down Umbrellas
 Hurry Hurry
 Before Its All Gone!
Big Sale on NOW
Great PRICES on
. Yellow Polka Dot Suites
. Cotton Sandals
. Upside-down Umbrellas
Hurry Hurry
Before Its All Gone!
• None

Notice how in the above example with no enhancements that it doesn't grab your attention. The words HURRY HURRY and the items all look the same.

2 Big Sale on NOW
 Great PRICES on
 . Yellow Polka Dot Suites
 . Cotton Sandals
 . Upside-down Umbrellas
 Hurry Hurry
 Before Its All Gone!
Big Sale on NOW
Great PRICES on
. Yellow Polka Dot Suites
. Cotton Sandals
. Upside-down Umbrellas
Hurry Hurry
Before Its All Gone!
• Increased size +1

Now with the GREAT PRICES and HURRY HURRY words larger than the rest of the information, the ad starts to grab your attention.

3 Big Sale on NOW
 Great PRICES on
 . Yellow Polka Dot Suites
 . Cotton Sandals
 . Upside-down Umbrellas
 Hurry Hurry
 Before Its All Gone!
Big Sale on NOW
Great PRICES on
. Yellow Polka Dot Suites
. Cotton Sandals
. Upside-down Umbrellas
Hurry Hurry
Before Its All Gone!
• Increased size +1
• Used Color

By making the GREAT PRICES red, we really emphasize the reason for the ad (and not to mention the viewers desire to save money). The items are also now their own color which helps the viewer see what is on sale.
Have you noticed the "'s (quotes) around the +1, blue and red? When you give a value to a command you should get in the habit of surrounding the values with "'s (quotes). Though you can get away without them sometimes, it is better to do code correctly from the beginning.
The +1 in the above examples is telling the browser to increase the size of the text one greater than the current size. Depending on the browser you are using and its version number, you can do this up to +7. You can also shrink the text by placing -1. And again, depending on the browser and its version number, you can shrink text down to -7.

4 Big Sale on NOW
 Great PRICES on
 . Yellow Polka Dot Suites
 . Cotton Sandals
 . Upside-down Umbrellas
 Hurry Hurry
 Before Its All Gone!
Big Sale on NOW
Great PRICES on
. Yellow Polka Dot Suites
. Cotton Sandals
. Upside-down Umbrellas
Hurry Hurry
Before Its All Gone!
• Increased size +1
• Used Color
• Used Garmond Italic Font on Hurry Hurry

In example 4 above, I changed the font to Garamond Italic for the words Hurry Hurry The changing of fonts in your text should be used with caution though. If the viewers computer does not have the font you have stated, then their text will appear normal and not in the font you requested.
Some examples of common fonts that most computers use are:

Arial
Courier
Times New Roman

Let's compare the original ad to the last example and see how taking the time to enhance the look of the information really helps in the experience for your viewer:

ORIGINAL AD	ENHANCED AD
Big Sale on NOW Great PRICES on . Yellow Polka Dot Suites . Cotton Sandals . Upside-down Umbrellas Hurry Hurry Before Its All Gone!	Big Sale on NOW Great PRICES on . Yellow Polka Dot Suites . Cotton Sandals . Upside-down Umbrellas Hurry Hurry Before Its All Gone!

Go to your page two, change the list of characteristics into an ad for your animal. Use all the  variations used in the above ad. Remember, you want to grab your viewers attention to the fact that you are selling the animal and what a great deal it is.

Click Here to view my updated page two.

(3) Returning Back To Your Page One

page one

At the top and bottom of your page two you should give the viewer the opportunity to return to your page one.

Place a link on your page two that links to page one and has the title of My Animal's Home Page (refer to lesson #3 in Assignment 3 for creating links). Your internet address will look like the following (except Dave will be replaced by your name).

Tip! When putting the internet address in the <a href="..."> command, I gave you the FULL internet address:

http://goldborder.com/htmlguide/dave2.htm
Though the procedure of using the full internet address is good, you can actually cut down the address if the web page you are linking to resides in the same location as the page from which you are linking from. For example, your page one is sitting on your computer in the same location as your page two. Because of this, in the link command you only need to give it the name of the page (short form). (This only works if the page(s) reside on the same computer and same location .)
So in your page two, you can place a link command that looks like the following (remember to replace dave with yourname):
<a href="dave1.htm">My Animal's Home Page</a>

You can edit your page one and change the link command in there to just refer to page two instead of the full internet address if you feel energetic enough (did you eat your wheaties this morning?).

Click Here to view my updated page two.