home  •    about us  •    courses  •    student work  •    alumni news  •    what's new
 

Summary of Basic HTML Tags (FILM 410* Course Material)

Structure Tags

<html> ... ≪/html> encloses the entire html document.

<head> ... ≪/head> encloses the head of the html document
<title> ... ≪/title> indicates the 'title' of the document. This appears in the title bar of the browser and is the name used when a user makes a bookmark; it does not display in the actual text of the browser itself.)

<body> ... ≪/body> encloses the body (text and tags) of the html document

Headings

<h1> text </h1> a first-level (largest) heading.
<h2> text </h2> a second-level heading.
<h3> text </h3> a third-level heading.

Paragraphs

<p> text </p> indicates a paragraph. Options include align="center".
<br> a line break. Options include clear="all" to clear graphics.

Character Formatting - Physical Highlighting

<b> text </b> boldface text.
<i> text </i> italic text. Can be difficult to read.
<tt> text </tt> typewriter font (usually courier).

Other Elements

<hr> a horizontal rule line.
<!-- Text --> comment. This text does not appear in the browser.
<pre> text </pre>displays formatted exactly as typed, including spaces, usually in courier.

Lists

<ol> ... ≪/ol> an ordered (numbered) list. Start each item with the <li> tag
<ul> ... ≪/ul> an unordered (bulleted) list.
<li> text </li> a list item, for use inside <ol> or <ul>

<dl> ... ≪/dl> a definition list, enclosing the <dt> and <dd> tags.
<dt> text </dt> a term to be defined, for use inside <dl>.
<dd> text </dd> the corresponding definition to each <dt> term. Can be used to create a non-bulleted list.

Links

<a href="http://www.Queensu.Ca/">Queen's Home Page </a> contains the information defining the location of the link to another document. A relative link to a page on the same website does not need the domain location.

Images

<img src="filename.Gif"> allows you to embed an image with that filename.

Parameters include:
alt="descriptive text" a text alternative to the image, important for text only browsers.
align="left" indicates to the browser where the text following the image is to be displayed -- usually left or right.
width="300" height ="200"; indicates to the browser how much space to leave for the image.
border="0" indicates absence or thickness (in pixels) of border.
hspace="10" indicates buffer space (in pixels) beside the image.

Tables

Tables are specified using the table tag. Table data cells may contain text and graphics. Adjacent cells can be merged to create a cell which spans two columns. A simple table could look like:

Year Month Day
1972 June 23rd
1982 October 7th

You can set "border =#" to specify in pixels the size of the table border. A number of "0" removes all borders.

The TD element precedes data cells. The TR element is used to separate table rows. The next example shows how cells can be merged with their neighbors:

*

 AverageOther
Category
Height Weight
Males 1.9 0.003 yyy
Females 1.7 0.002 xxx

This table is defined by the markup:

<table border ="1" cellpadding="10">
<tr>
<td rowspan="2" bgcolor="00FFFF" align ="center" valign ="center"> <H1>*</H1> </td>
<td colspan="2">Average</td>
<td rowspan="2">Other Category</td>
</tr>
<tr>
<td>Height</td> <td>Weight</td>
</tr>
<tr>
<td>Males</td>
<td>1.9</td> <td>0.003</td> <td>yyy</td>
</tr>
<tr>
<td>Females</td>
<td>1.7</td> <td>0.002</td> <td>xxx</td>
</tr>
</table>

The first cell is merged with the cell below it: <td rowspan=2>. The ALIGN attribute can be one of LEFT, CENTER or RIGHT. The second column is merged with the third: <td colspan=2>. The definition for the third column is skipped as it was covered by the merged cell. The fourth column/first row is also merged, this time with the next row: <td rowspan=2>. The </tr> element signifies the end of the first row and <tr> the beginning of the second.

The second row only contains definitions for the second and third columns since the others were merged with cells on the preceding row. The general rule is to avoid defining any cell twice.

Columns of Text with Tables


Here's one more example that uses tables to achieve a 2-column layout (view source to see how this is done.)

HTML or "hypertext markup language" is a document formatting language that all computers on the Internet can understand. The most important thing to know about HTML is that it permits any kind of computer -- Macs, PCs, SUNs, etc. -- to interpret a document in approximately the same way. This tutorial, for example, should look essentially the same regardless of whether you are looking at it on a PC, a Mac, a Sun SPARC station, or any other type of computer. The obvious advantage to this is that HTML permits information to be exchanged more or less regardless of the technology. Because there are so many different types of personal computers and workstations, HTML, by necessity, had to be very basic in the sorts of document formats it allows. The current formatting options available in HTML are somewhat limited; in the future HTML will permit you to do more than what is described in this tutorial and/or the accompanying documents.

The second most important thing to know about HTML is that it enables documents to be "hyperlinked" to each other. For example, this is a link that will take you to another document.

Colours

The Hexadecimal Color Codes are used for many things in HTML.

For Page Backgrounds: <body bgcolor="#hexdec">

For Text Colors: <font color="#hexdec">

For Page-Wide Link and Text Colors: <body text="#hexdec" link="#hexdec" vlink="#hexdec" alink="#hexdec"> (where text is text color, link is non-visited link color, vlink is already-visited link color, and alink is the color a link turns at the second it is clicked)

There are 16.7 million different colors in the hexadecimal color system. #000000 is black, and #FFFFFF is white. Each of the 6 digits in the hexadecimal code is broken into 3 separate groups...

  • #XXxxxx - Red Color Value
  • #xxXXxx - Green Color Value
  • #xxxxXX - Blue Color Value

Each digit is a value from 0 to F, in the hexadecimal system. The hexadecimal color system counts by 0 1 2 3 4 5 6 7 8 9 A B C D E F, with 0 being null value, and F being highest value.

So if the first two digits (red values) are full (FF) and the other four are null (00) the color will be red.

#FF0000 - AaBbCcDdEeFf1234567890Background #FF0000
If the first two are null (00), the third and fourth digit (green value) are full (FF), and the fifth and sixth digit are null (00), the color will be green.
#00FF00 - AaBbCcDdEeFf1234567890Background #00FF00
If the first four digits are null (00), and the fifth and sixth digit (blue value) are full (FF), the color will be blue.
#0000FF - AaBbCcDdEeFf1234567890Background #0000FF
Here is an example of the different shades of colors between black and white.
#000000 - AaBbCcDdEeFf1234567890Background #000000
#111111 - AaBbCcDdEeFf1234567890Background #111111
#222222 - AaBbCcDdEeFf1234567890Background #222222
#333333 - AaBbCcDdEeFf1234567890Background #333333
#444444 - AaBbCcDdEeFf1234567890Background #444444
#555555 - AaBbCcDdEeFf1234567890Background #555555
#666666 - AaBbCcDdEeFf1234567890Background #666666
#777777 - AaBbCcDdEeFf1234567890Background #777777
#888888 - AaBbCcDdEeFf1234567890Background #888888
#999999 - AaBbCcDdEeFf1234567890Background #999999
#AAAAAA - AaBbCcDdEeFf1234567890Background #AAAAAA
#BBBBBB - AaBbCcDdEeFf1234567890Background #BBBBBB
#CCCCCC - AaBbCcDdEeFf1234567890Background #CCCCCC
#DDDDDD - AaBbCcDdEeFf1234567890Background #DDDDDD
#EEEEEE - AaBbCcDdEeFf1234567890Background #EEEEEE
#FFFFFF - AaBbCcDdEeFf1234567890Background #FFFFFF

Thanks to Davesite.com's Web Tutorials.

If you want your site to be the most compatible for varying monitor settings, see the 216 'web safe' (hexadecimal) colours below.

Browser-Safe Colours

Here is a table of the browser safe colors and their hex values. They can be used to define background, text and link colours in the body tag or within table cells:

<body bgcolor="#FFFFFF" text="#000000" link="#003399" alink="#FFFF00" vlink="#990000">
 
FFF
 FFF		 CCC
 CCC		 999
 999		 666
 666		 333
 333		 000
 000		 FFC
 C00		 FF9
 900		 FF6
 600		 FF3
 300
99C
 C00		 CC9
 900		 FFC
 C33		 FFC
 C66		 FF9
 966		 FF6
 633		 CC3
 300		 CC0
 033
CCF
 F00		 CCF
 F33		 333
 300		 666
 600		 999
 900		 CCC
 C00		 FFF
 F00		 CC9
 933		 CC6
 633		 330
 000		 660
 000		 990
 000		 CC0
 000		 FF0
 000		 FF3
 366		 FF0
 033
99F
 F00		 CCF
 F66		 99C
 C33		 666
 633		 999
 933		 CCC
 C33		 FFF
 F33		 996
 600		 993
 300		 663
 333		 993
 333		 CC3
 333		 FF3
 333		 CC3
 366		 FF6
 699		 FF0
 066
66F
 F00		 99F
 F66		 66C
 C33		 669
 900		 999
 966		 CCC
 C66		 FFF
 F66		 996
 633		 663
 300		 996
 666		 CC6
 666		 FF6
 666		 990
 033		 CC3
 399		 FF6
 6CC		 FF0
 099
33F
 F00		 66F
 F33		 339
 900		 66C
 C00		 99F
 F33		 CCC
 C99		 FFF
 F99		 CC9
 966		 CC6
 600		 CC9
 999		 FF9
 999		 FF3
 399		 CC0
 066		 990
 066		 FF3
 3CC		 FF0
 0CC
00C
 C00		 33C
 C00		 336
 600		 669
 933		 99C
 C66		 CCF
 F99		 FFF
 FCC		 FFC
 C99		 FF9
 933		 FFC
 CCC		 FF9
 9CC		 CC6
 699		 993
 366		 660
 033		 CC0
 099		 330
 033
33C
 C33		 66C
 C66		 00F
 F00		 33F
 F33		 66F
 F66		 99F
 F99		 CCF
 FCC		 CC9
 9CC		 996
 699		 993
 399		 990
 099		 663
 366		 660
 066
006
 600		 336
 633		 009
 900		 339
 933		 669
 966		 99C
 C99		 FFC
 CFF		 FF9
 9FF		 FF6
 6FF		 FF3
 3FF		 FF0
 0FF		 CC6
 6CC		 CC3
 3CC
003
 300		 00C
 C33		 006
 633		 339
 966		 66C
 C99		 99F
 FCC		 CCF
 FFF		 339
 9FF		 99C
 CFF		 CCC
 CFF		 CC9
 9FF		 996
 6CC		 663
 399		 330
 066		 990
 0CC		 CC0
 0CC
00F
 F33		 33F
 F66		 009
 933		 00C
 C66		 33F
 F99		 99F
 FFF		 99C
 CCC		 006
 6CC		 669
 9CC		 999
 9FF		 999
 9CC		 993
 3FF		 660
 0CC		 660
 099		 CC3
 3FF		 CC0
 0FF
00F
 F66		 66F
 F99		 33C
 C66		 009
 966		 66F
 FFF		 66C
 CCC		 669
 999		 003
 366		 336
 699		 666
 6FF		 666
 6CC		 666
 699		 330
 099		 993
 3CC		 CC6
 6FF		 990
 0FF
00F
 F99		 66F
 FCC		 33C
 C99		 33F
 FFF		 33C
 CCC		 339
 999		 336
 666		 006
 699		 003
 399		 333
 3FF		 333
 3CC		 333
 399		 333
 366		 663
 3CC		 996
 6FF		 660
 0FF
00F
 FCC		 33F
 FCC		 00F
 FFF		 00C
 CCC		 009
 999		 006
 666		 003
 333		 339
 9CC		 336
 6CC		 000
 0FF		 000
 0CC		 000
 099		 000
 066		 000
 033		 663
 3FF		 330
 0FF
00C
 C99		 009
 9CC		 33C
 CFF		 66C
 CFF		 669
 9FF		 336
 6FF		 003
 3CC		 330
 0CC
00C
 CFF		 009
 9FF		 006
 6FF		 003
 3FF

Thanks to Bob Stein, www.visibone.com.

See also this table as a downloadable graphic (200K GIF).

See an interactive

Websafe Colorizer.

Return to FILM 410* Course Materials home page.
 
home  •   what's new  •   links  •   search