Beginner’s Guide to Web Development – HTML Tag Reference

This page contains examples and descriptions of some of the most commonly used HTML tags such as tables, forms, links, images, and style sheets. These templates do not include every possible value for these tags, only those that are commonly used.                                          

HTML Template

<html>

<head>

      <title>[title of page]</title>
      <style type="text/css">
            [Put style classes here]
      </style>

</head>

<body>

      [Put page content here]

</body>

</html>

Table Template

<table border="pixels" width="pixels/%" cellpadding="pixels/% cellspacing="pixels/%">

<tr align="left/right/center" valign="top/middle/bottom">

<td align="left/right/center" colspan="number" rowspan="number" valign="top/middle/bottom" height="pixels/%" width="pixels/%">

</table>

NOTE: As a general rule, height, width, alignment, and color attributes can be used on table tags, but a preferred method is to set up style classes and then apply those style classes to your table tags where applicable. However, it seems that some browsers are not yet fully capable of supporting height and width attributes in style sheets. Thus, most web developers still use height and width attributes directly in the "<td>" tags. Putting the rest of your other attributes in a style class is a good practice to follow.

Form Template

<form name="name of form" action="URL" method="GET/POST">

<input type="text" name="any name" value="any value" size="number" maxlength="number">

<input type="password" name="any name" value="any value" size="number" maxlength="number">

<input type="hidden" name="any name" value="any value">

<input type="submit" name="any name" value="any value">

<input type="reset" name="any name" value="any value">

<input type="radio" name="radio1" value="value1" checked="checked">

<input type="radio" name="radio1" value="value2">

<input type="checkbox" name="any name" value="any value" checked="checked">

<input type="textarea" name="any name" value="any value">

</form>

NOTE: In order to be grouped together (i.e. only one can be selected at a time) the radio buttons need the same name. Also, the checked attribute on radio buttons and checkboxes is optional. If the checked attribute is present, the radio button or checkbox will be checked when the form loads.

Style Template

."name of class" {
color: "color value";
font-size: "pt/px";
font-family: "family of fonts";
font-weight: "normal/bold";
font-style: "normal/italic";
text-align: "left/right/center";
height: "height";
width: "width}

NOTE: The font-family is a list of prioritized font-family or generic-family names. The list is comma separated with the preferred font-family or generic-family listed first. A generic-family should always be listed as a last resort in case your preferred font is not available. Here are some examples of generic-families and font-families.

GENERIC-FAMILIES: "serif", "sans-serif", "monospace"

FONT-FAMILIES: "Arial", "Helvetica", "Verdana"

Link Template

Regular link:

<a href="URL">Text to be displayed</a>

Image as a link:

<a href="URL"><img src="image name" height="x" width="x"></a>

Linking in a style sheet file named main.css

<link href="main.css" rel="stylesheet" type="text/css">

HTML Color Template

This template provides a guide so that you can determine the appropriate hexadecimal value that corresponds to a given color. For example, #FFFFFF is the color white. Take a look at the template to see the hex values of some of the most common colors.

#FF0000=RED  #00FF00=GREEN  #0000FF=BLUE  #000000=BLACK 
#FFFF00=YELLOW  #808080=GRAY  #FF9900=ORANGE  #9966CC=PURPLE 
#A52A2A=BROWN  #FF99CC=PINK  #FFFFFF=WHITE 

You can mix and match the various hex cominbations to make different colors. The first two digits of the 6 digit hex number are the amount of red color. The next two are the amount of green color, and the last two are the amount of blue color. The possible values are the numbers '0' through '9' and the letters 'A' through 'F'.