Quick Reference

Quick Review
More Common Tags
Adding Colour
Tags with Attributes
Font Attributes

Activity # 2
HTML Tag Summary
Tutorial # 3
Table of Contents

Webpage Tutorial # 2

Welcome

This is the second page in a series covering the essentials of HTML. Each tutorial has a short lesson and a learning activity to practice what you have just learned.

     
  back to top  

Quick Review

Here is a short list of the tags introduced in Tutorial #1 and in Learning Activity #1. If you skipped the Learning Activity, then
go back and see what you missed.

Organizational Tags

These tags are an important part of your Webpage and every HTML document should have them.

<HTML>
<HEAD>
  <TITLE> . . . </TITLE>
</HEAD>

<BODY>

< !-- comment -- >

</BODY>

</HTML>

 < HTML > ... < /HTML > Defines an HTML document
 < HEAD > ... < /HEAD > Descriptive information about the HTML document
 < TITLE > ... < /TITLE > The title appears in the Windows titlebar of the Webpage
 < BODY > ... < /BODY > The Webpage content
<!-- ... --> A Comment

Formatting Tags

Here are some tags that alter the appearance of your text.

 < B > ... < /B > Makes text bold
 < I > ... < /I > Makes text italic
 < H1 > ... < /H1 > to
< H6 > ... < /H6 >

Heading Level One

to
Heading Level Six
 < P > ... < /P > Start a new Paragraph
 < BR > Break to a new line

     
    back to top  

A Few More Common Tags

Just like the BOLD (<B>...</B>) and Italics (<:I>:...<:/I>:) there are a number of tags that control common formatting features. Here are a few more:

 <U>...</U>
Underline:   It looks like this.
 <EM>...</EM>
Emphasis   Text that is formatted with Emphasis looks like italics.
 <STRONG> ... </STRONG>
Strong:   The Strong tag looks like bold.
 <SUP>  ... </SUP> and  <SUB>  ... </SUB>
Superscript and Subscript:   The Superscript and Subscript tags are occasionally very useful.
 <CENTER>  ... </CENTER>
Center:   aligns text in the middle of the screen.
     
    back to top  

Adding Some Colour

A quick and easy way to give your pages colour is to add the background colour to the BODY tag:

<BODY BGCOLOR="green">

Remember that you add the BGCOLOR attribute to the BODY tag that is already in your HTML document.

There are many colour words that you can use in place of green in this tag. Here are a few of the more common ones:

Black Maroon Green Olive Purple Navy Teal Gray
White Red Lime Yellow Blue Fuchsia Aqua Silver

For many more colour names, visit Color Words D E M Y S T E F I E D !

Instead of the colour names you also have the option of using a Hexadecimal colour number in the quotation marks. The Hexadecimal colour numbers are composed of three parts. Each two-digit part (from 00 to FF) controls the amount of colour to blend into the mixture. For example: #CC00EE is about 75% Red, 0% Green, and about 90% Blue. The result is Purple.

# FF FF FF
Red
Green
Blue

Here are some of the Hexadecimal colour numbers as examples:

Grey
#AAAAAA
Red
#FF0000
Blue
#0080FF
Yellow
#BBBB00
Green
#00FF00

Looking for the perfect colour? Try the Colour Selector by Lindsay Marshall.

     
    back to top  

Tags With Attributes

So far most tags you have seen are the simple <tag-name>. Some tags, however, have extra information (attributes) included. The background colour tag is a good example:

<   BODY BGCOLOR="#$$$$$$"   >
Tag Name Tag Attribute

Here are a few more tags with attributes that are commonly used:

<DIV>...</DIV>
Division:   Use this tab to control the alignment of your paragraphs. There are four attributes:

<DIV ALIGN=left|right|center|justify>
<H?>...</H?>
Align Heading:   Use this attribute to control the alignment of your headings (level 1 to 6). There are four attributes:

<H1 ALIGN=left|right|center|justify>
<HR>
Horizontal Rule: This is a simple way to draw a horizontal line across the page. Here are the attributes:

<HR   WIDTH="#|%"   SIZE="#"   NOSHADE   ALIGN=left|right|center|justify>

The WIDTH can be the number of pixels or as a percentage of the page. The SIZE is the thickness of the line. The NOSHADE attribute removes the 3D look.

Examples:
<HR   WIDTH="50%"   ALIGN="center">


<HR   WIDTH="100"   SIZE="5"   ALIGN="left">


     
    back to top  

Fonts

There are several font attributes that you can change: The font face, size and colour. The FONT tag always requires the closing tag: </FONT>

Font Face
This is the shape of the letters and is the same as Font Name in many application programs.

Here is how it works:

<FONT FACE="arial">Font Example: Arial</FONT>
Font Example: Arial

More Examples:

<FONT FACE="Courier">Font Example: Courier</FONT>
Font Example: Courier

<FONT FACE="Times New Roman">Font Example: Times New Roman</FONT>
Font Example: Times New Roman

<FONT FACE="Modern">Font Example: Modern</FONT>
Font Example: Modern

Font Size
There are two wats to changing fonts with the "SIZE" attribute:
<FONT SIZE="1|2|3|4|5|6|7">
or
<FONT SIZE="+|-">

For example: (Remember that this font size will vary on different browsers)

<FONT SIZE="1">This is size 1.</FONT>
<FONT SIZE="7">Size 7.</FONT>

Increase or decrease the font size with + or -

For example: <font size="+2">Increase +2</font>

Font Colour
Change the colour of your text with the COLOR attribute:

<FONT COLOR="purple">This is purple, in case you didn't notice</FONT>

You may use standard HTML colour words like red. green. yellow . or even dustyrose.

Use hexadecimal colour numbers like this:
<FONT COLOR="#FF3366">This is..um..kind of redish-pink, I think. </FONT>

Combining Font Attributes
Here they are; all three attributes in one tag:

To get this

Ta Da!

type this

<font face="Times New Roman" size="4" color="Green">Ta Da!</font>

     
    back to top  

Learning Activity # 2

Work through Learning Activity # 2 to expand on your first Webpage. Then follow on with Tutorial # 3. You can also view a Summary of all the tags covered in this tutorial.