HTML Tags Glossary

Definitions

HTML

(Hyper Text Mark-up Language) While it is not an official computer language such as C++ or Pascal, HTML is the way in which computers communicate across the world wide web. It consists of many tags that allow writers to mark-up text documents so that they can be viewed by others using web browsers.

Web Browsers

Web browsers are the applications that allow one to view HTML documents from either your own computer or from any other computer connected to the internet.

Tags

Tags are the commands that give HTML documents their functionality. They consist of commands placed within < and >. Some tags work by placing a start and stop tag at each end of the desired text, such as below <big>.This makes the text bigger <big>.The stop tags are often the same as the start with the addition of "/" at the beginning of the stop tag. Using both of these tags places the desired text in a container. But not all tags need to use a container, and thus don't need a stop tag. In the glossary below you will find a "</>" next to the tags that require a stop tag.

Containers

Containers refer to the area enclosed by <start> and </stop> tags where the commands take effect. Some tags, such as <HTML> enclose the entire document, others enclose lists, and others can enclose a single world. One of the more common problems in writing HTML is when one forgets to add a stop tag and close of the container, thus leaving the tag to effect the rest of the document. So try and keep track of each container that you create.

Pixels

Pixels are a method of measurement used in the computer world. Your computer screen's resolution is measured in pixels, 832*624, 640*480, etc. They are the number of "dots, or pixels, that computer displays horizontally and vertically. This allows for a standard to be set, so that a 100*50 picture always comes up as the same relative size, but could vary in absolute size depending on the resolution of your monitor.

Relative and Absolute Links

Relative and absolute links are styles of links that one finds connecting a web page to other pages, files, etc. Relative links look like this /example/text.html. They consist of telling the link where to find what it is looking for, but leave out the server that the page is attached to because the original page and the one being sought after are in the same directory(folder or server). The same link in absolute link format would look like this http:/www.bigskywebdesign/text/text.html. It includes the complete web address of the sought after page. They accomplish the same goal, but each has it's advantages and disadvantages. If you move a folder with web pages with relative links to a new server, then nothing will happen and all the links will remain stable. But if you were to only move one of those pages, then it's links would be broken because the other pages would be in a different directory(folder or server). Absolute links have the opposite effect, if you move one file then it's links will be fine.

Top of the Page

The Basic Tags

<html></html>---begins and ends web document,tells the browser that the document is in HTML

<head></head>---header, used after html tag

<title></title>---located within header container

<body></body>---creates the body of the document

body attributes---to be used within <body> tag

background="sample.jpg"---background picture
bgcolor="color"---background color
text="color"---text color
alink="color"---active link color
vlink="color"---visited link
bgproperties---when equal to "fixed", background does not scroll
topmargin---sets height of top margin
leftmargin---sets width of left margin(not used in Netscape)

<address></address>---place your name and date of page creation within at bottom of page

Top of the Page
Document Formatting Tags

<p>---place at the end of a paragraph, it will then skip a line for the next paragraph

<align=left,right,center></align>---alignment

<br>---line break, it will begin again on the next line

<nobr></nobr>---no line breaks are allowed to occur within the container (be careful)

<wbr>---gives the browser suggestions for where a break should occur if needed, use within the <nobr> tag

<h1></h1>---heading style, choose from sizes 1(largest)-6(smallest)

<hr>---horizontal line

horizontal line attributes--- to be used within the <hr> tag

align=left, right, center---alignment
width=---in percentages or pixels
size=---thickness, in pixels
noshade---keeps browser from using 3D effects on line
color="color"---line color

<pre></pre>---for preformatted text, comes up as monospaced

&lt and &gt---represent < and > without the functionality, so you can display them without being interpreted as commands

Top of the Page
Text Formatting Tags

<i></i>---italics

<b></b>---bold

<u></u>---underline

<tt></tt>---teletype, monospaced text

<blockquote></blockquote>---formatted for quoted text

<strike></strike>---strikethrough style

<big></big>---bigger text

<small></small>---smaller text

<sub></sub>---subscript

<sup></sup>---superscript

<font face="font name"></font>---to select specific font

<font size=1></font>---font size, sizes 1-7

<font color="color"></font>---font color

<base font>---the font for the document, can use face,size and color with it

Top of the Page
Graphics Formatting Tags

<img src="filename">---Places an image within your document, review relative vs. absolute links.

image attributes

align=top,middle,bottom---align text with picture's top, middle, or bottom
align=left,right---place picture on left or right and wrap text around it
width,height=---in pixels or percentage, dimensions of picture can be altered (be careful with the ratio if using pixels)
alt=---description of the picture so that text-only browsers know what it is
border=---in pixels, border around the picture
vspace,hspace=---in pixels, empty space around picture

Top of the Page
Linking Tags

<a href="http://www.bigskywebdesign.com/text.html">text link</a>---text link, absolute link

<a href="text.html">text link</a>---text link, relative link

<base href="http://wwwbigskywebdesign.com">---gives web site for all relative links

<a href="http://www.bigskywebdesign.com"><img src="text.jpg"></a>---graphic link

<a name=middle>middle section of web page</a>---internal anchor

<a href="#middle">jump tp the middle</a>---link to the internal anchor

<a href="mailto:sales@bigskywebdesign.com"></a>---link to email

<a href="news:news.newuser.questions"></a>---link to usenet group

<a href="ftp://ftp.mysite.com/pub/FAQ"></a>---link to ftp

<a href="gopher://gopher.mysite.com"></a>---link to gopher site

Top of the Page
Creating Lists

<ol></ol>---ordered lists

Ordered List Attributes

compact---makes list more compact
type=A---uses uppercase letters
type=a---uses lowercase letters
type=I---uppercase roman numerals
type=i---lowercase roman numerals
type=1---uses numbers
start=n---uses n as beginning of that set

<li></li>---list item

<lh></lh>---list header

<ul></ul>---unordered list

Unordered List Attributes

type=square---closed square bullet
type=circle---open circle bullet
type=disc---closed circle bullet
---to replace the bullets with an image us <img src...> instead of <li>

<menu>---basically works the same as unordered list

<dl>---definition list; can use term :compact for effect (but not all browsers support this)

<dt>---definition term

<dd>---definition itself

Top of the Page
Tables

<table></table>---table tag

Table attributes---all of which can refer to the whole table or single cell (by using <th>, <td>, <tr>)

border=---in pixels
align=left, right, center---alignment of data within the cells
valign=top, middle, bottom---vertical alignment of data within the cells
width/height=---in pixels, of table or individual cells
cellpadding/cellspacing=---in pixels, adds space within cell/border
bordercolor/bgcolor="color"---will change table, row, or cell border/background color, use with td, th, and tr tags
rowspan/colspan---allows one cell to occupy more than one "cellblock"

<th></th>---table header within the cells-can use valign=top/middle/bottom and align=left/right/center

<td></td>---table data within the cells-can use valign=top/middle/bottom and align=left/right/center

<tr></tr>---table row

<caption></caption>---places a caption, either above or below <table align=top/bottom>

---keep in mind that you can place a picture in a table by using <img src...> between <td>...</td>

Top of the Page

Hexadecimal Color System

EEEEEE	DDDDDD	CCCCCC	BBBBBB	AAAAAA	999999
888888	777777	666666	555555	444444	333333
222222	111111	000000	FF0000	EE0000	DD0000
CC0000	BB0000	AA0000	990000	880000	770000
660000	550000	440000	330000	220000	110000
FFFFFF	FFFFCC	FFFF99	FFFF66	FFFF33	FFFF00
CCFFFF	CCFFCC	CCFF99	CCFF66	CCFF33	CCFF00
99FFFF	99FFCC	99FF99	99FF66	99FF33	99FF00
66FFFF	66FFCC	66FF99	66FF66	66FF33	66FF00
33FFFF	33FFCC	33FF99	33FF66	33FF33	33FF00
00FFFF	00FFCC	00FF99	00FF66	00FF33	00FF00
FFCCFF	FFCCCC	FFCC99	FFCC66	FFCC33	FFCC00
CCCCFF	CCCCCC	CCCC99	CCCC66	CCCC33	CCCC00
99CCFF	99CCCC	99CC99	99CC66	99CC33	99CC00
66CCFF	66CCCC	66CC99	66CC66	66CC33	66CC00
33CCFF	33CCCC	33CC99	33CC66	33CC33	33CC00
00CCFF	00CCCC	33CC66	33CC33	00CC99	00CC66
00CC33	00CC00	FF99FF	FF99CC	FF9999	FF9966
FF9933	FF9900	CC99FF	CC99CC	CC9999	CC9966
CC9933	CC9900	9999FF	9999CC	999999	999966
999933	999900	6699FF	6699CC	669999	669966
669933	669900	3399FF	3399CC	339999	339966
339933	339900	0099FF	0099CC	009999	009966
009933	009900	FF66FF	FF66CC	FF6699	FF6666
FF6633	FF6600	CC66FF	CC66CC	CC6699	CC6666
CC6633	CC6600	9966FF	9966CC	996699	996666
996633	996600	6666FF	6666CC	666699	666666
666633	666600	3366FF	3366CC	336699	336666
336633	336600	0066FF	0066CC	006699	006666
006633	006600	FF33FF	FF33CC	FF3399	FF3366
FF3333	FF3300	CC33FF	CC33CC	CC3399	CC3366
CC3333	CC3300	9933FF	9933CC	993399	993366
993333	993300	6633FF	6633CC	663399	663366
663333	663300	3333FF	3333CC	333399	333366
333333	333300	0033FF	FF3333	0033CC	003399
003366	003333	003300	FF00FF	FF00CC	FF0099
FF0066	FF0033	FF0000	CC00FF	CC00CC	CC0099
CC0066	CC0033	CC0000	9900FF	9900CC	990099
990066	990033	990000	6600FF	6600CC	660099
660066	660033	660000	3300FF	3300CC	330099
330066	330033	330000	0000FF	0000CC	000099
000066	000033	00FF00	00EE00	00DD00	00CC00
00BB00	00AA00	009900	008800	007700	006600
005500	004400	003300	002200	001100	0000FF
0000EE	0000DD	0000CC	0000BB	0000AA	000099
000088	000077	000055	000044	000022	000011

Top of the Page

Frames

<frameset></frameset>---to designate use of frames, but will be ignored if <body> tag is present

Frameset Attributes---found within the <frameset> tag

rows/cols=---in pixels/percentages/proportions, pixels set an absolute distance while the other two give relative distances

---proportions are designated by *,2*,*;which is 1/4,1/2,1/4

border=---in pixels, assigns a width to all frames

frameborder=yes,no---default is yes for a 3-D look, no turns off the effect

bordercolor="color"---defines color for all frame borders

<frame>---defines each individual frame, and there must be one per created frame

Frame Attributes---found within the <frame> tag

src=---must use URL of either a HTML document or picture, text alone can not be used

name=---assigned to each frame so that they can be linked to from other frames

target=---it designates which frame a new link will be opened up within when used in the <a href> tag

---for example, <a href="list.html" target="one"> will open list.html in frame one

---can also be used to name windows

="_blank"---will launch a new browser window with the link's contents

="_self"---will replace the frame with the link's contents

="_parent"---the frameset will be replaced by link's contents

="_top"---replaces current browser window with link's contents

scrolling=yes,no,auto---auto is the default, but the scrollbars can be turned on or off when possible

marginwidth/height=---in pixels, area within border where source content will not be shown

noresize---prevents users from resizing individual and adjacent frames, in order to preserve layout

bordercolor="color"---defines color for individual frame border

<noframes></noframes>---use this tag to provide alternate content for those with non-frames compatible browsers

---can safely use the <body> tag with it's attributes within this container

note---one can place frames(<frameset>) within frames(<frameset>) to create more complex layouts

Top of the Page

A Glossary of HTML Tags

Table of Contents

Definitions

The Basic Tags

Document Formatting Tags

Text Formatting Tags

Graphics Formatting Tags

Linking Tags

Creating Lists

Tables

Frames