HTML Tags

Rules

Tags begin and end with carats: "<" and ">"
Tags come in pairs: an opening tag and a closing tag
- Example:
  and
- The closing tag is the same as the opening tag except it has a slash / after the first carat
- A few tags don't have a closing pair. In this case the slash comes after a space at the end of the tag. Example: <hr />

HTML formatting tags

Header	<h1> </h1> (or <h2> or <h3>, etc. up to 6)
Paragraph	<p> </p>
Bold	<strong> </strong>
Emphasis	<em> </em>
Numbered Lists	<ol> </ol>
Bullet Points	<ul> </ul>
List items	<li> </li> Format: <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>
Division:	<div id="___"> </div>
Table:	<table> <tr><td>item1</td><td>item1</td><td>item1</td></tr> <tr><td>item1</td><td>item1</td><td>item1</td></tr> <tr><td>item1</td><td>item1</td><td>item1</td></tr> </table>
Images:	<img src="filename.jpg">
Link:	<a href="address"> </a>

Basic CSS

put this somewhere in the <head of your web page:
<style type="text/css" media="all"> @import "name-of-file.css"; </style>

#name_of_div {

property: value;

next-property: value;

}

example:

#navigation h2 {

font: 12pt arial;

color: red;

} This makes all the h2 titles in the "Navigation" section 12point in size, red in color, arial in font

font: size family; sets the size and font-type

color: name-of-color;

background: color url(name-of-image.jpg) no-repeat top left;

a:link

a:visited

a:hover these set the style for the various states of a link

a:hover {

font: 12pt verdana;

color: white;

background: blue;

}

This makes the font white and the background blue anytime someone moves their mouse over a link.

height:50px;

width: 100px; these set the height and width of a div

position: absolute top: 0px left: 0px; this moves an object 0px from the top and from the left side of its container

border: 1px dotted gray; This puts a thin gray dotted line all the way around an object (options for "dotted" include "solid" and "dashed"). If you want a border on just one side, you can use "border-top" "border-bottom" "border-left" and/or "border-right"

padding: 0px 5px 10 px 15px; This sets an extra space that is 0px on top, 5px on the right, 10px on the bottom, and 15px on the left inside the div

margin: 0px 5px 10 px 15px; same as padding only the space is outside the div