HTML QUIK-CHART
PLUS EXAMPLES
by Florence W Deems |
|---|
| Basic Tags |
<html> </html>
Creates an HTML document; first and last tags on a page. |
<head> </head>
Separates the title (see below) and other information that isn't displayed (visible) on the Web page itself: meta tags, pre-loaded image & sound tags, some Javascripts and some CSS scripts. |
<body> </body>
Defines the visible portion of the document. |
| Header Tags |
<title> </title>
Puts the name of the page in the title bar. |
<meta>
There are many different meta tags. See tutorials for using them. |
<embed src="url-of-mid" hidden="true" autostart="true" loop="2"></embed> (and)
<noembed><bgsound src="url-of-mid" loop="2"></noembed>
Use only the embed tag OR the bgsound tag (without the noembed tags)
Refer to Sound Tags for a complete discussion. |
| Body Tag Attributes |
bgcolor="?"
Sets the background color, using name or hex value. |
text="?"
Sets the text color, using name or hex value. |
link="?"
Sets the color of links, using name or hex value. |
vlink="?"
Sets the color of followed or visited links, using name or hex value. |
alink="?"
Sets the color of links on click. Does not work for some browsers.
Example of a body tag: <body bgcolor="#ffffff" text="#330000" link="#0000ff" vlink="#800000"> |
| Text Tags |
<pre> </pre>
Creates preformatted text. |
<h1> </h1>
Creates the (largest) headline. Sizes are 1 (largest) through 6 (smallest).
Example: This is H1 This is H6.
Refer to H & Font Sizes Comparison Chart |
<b> </b>
Creates bold text.
Example: This text is bold. |
<i> </i>
Creates italic text.
Example: This line is all in italics. |
<u> </u>
Emphasizes a word or sentence by underlining it.
Example This word has been underlined. |
<tt> </tt>
Creates teletype, or typewriter-style text.
Example: This is typewriter style. |
<cite> </cite>
Creates a citation, usually italic.
Example: This word has been cited, for emphasis. |
<em> </em>
Emphasizes a word with italics.
Example: This word is emphasized by italics. |
<strong> </strong>
Emphasizes a word - bold.
Example This word has been made strong. |
<font size="?"> </font>
Sets size of font, from 1 to 7
Example: This is size 7. This is size 1.
Refer to H & Font Sizes Comparison Chart |
<font color="?"> </font>
Sets font color, using name or hex value. |
<span style="?"></span>
This span style tag will eventually replace the font tag. Sets text size and color. Uses colons (:) instead of equal signs (=). Also, uses semicolons (;) between attributes in the same tag.
font: xx-large (or x-large, large, medium, small, x-small, xx-small)
color: use either color name or hex code - #000000 (no quotes around hex code)
Example: <span style="font: x-large; color: bisque">
<span style="px": font-size: 25px;">
Instead of the x-large, etc, sizes, use either px (pixel) or pt (point). The 25px is smaller than 25pt. |
| Link Tags |
<a href="URL">Name or url here </a>
Creates a hyperlink (clickable link) to another page. |
<a href="mailto:username@host.com">Name or address </a>
Creates a mailto hyperlink. |
<a name="NAME">text here </a>
Creates a target location within a document/page. Must be used with one of the following three tags: |
<a href="#NAME">text here </a>
Links to the above target location from elsewhere on the same page. |
<a href="anotherpage.html#NAME">text here </a>
Links to the above target from a different page in the same website/subdirectory. |
<a href="../sub/page.html#NAME">text here </a>
Links to the above target from a different website/subdirectory. |
| Formatting |
<p> </p>
Creates a new paragraph (a double line break). |
<p align="?"> </p>
Aligns a paragraph to the left, right, or center. |
<br>
Inserts a line break after text, images or audioscopes. Two <br> equal one <p>. This tag does not need to be closed like the <p> tag does. |
<blockquote> </blockquote>
Indents text from both sides.
Example:This whole paragraph of text should appear indented from both sides. This whole paragraph of text should appear indented from both sides. This whole paragraph of text should appear indented from both sides. This whole paragraph of text should appear indented from both sides. |
<dl> </dl>
Creates a definition list.
Refer to Lists: What They are and How to Make Them for a tutorial. |
<dt>
Precedes each word to be defined (definition term). |
<dd>
Precedes each definition. These tags will indent or create a wider left margin for a block of text, without numbering or bulleting. Will also create a single line break, so if a double line spacing is required, use 2 <br> tags. |
<ol> </ol>
Creates an ordered (numbered) list; is used with the <li> tag below. |
<li></li>
Precedes each list item, and adds a number. For more than one item, use 2 <br> tags after the end of each item (</li>) for a double line break. Close each list item with </li> |
<ul> </ul>
Creates an unordered (bulleted) list. Is used with the <li></li> tags above. But instead of adding numbers, this tag will cause the <li> tag to put a bullet in front of each item. For more than one item, use two <br> tags after the end of each item (</li>) for a double line break. |
<div align="?"> </div>
A generic tag used to format large blocks of HTML or images left, center or right, also used for stylesheets. |
| Graphical Elements |
<img src="url-of-image">
Adds an image to the page. |
align="?"
Aligns an image: left, center, right. |
valign="?"
Aligns an image vertically: top, middle, bottom. |
height="?" width="?"
Assists the browser in setting aside space for the image on the page. This allows the text to continue loading before the image itself fully loads, because text usually loads faster than images. |
border="?"
Sets size of a border around an image. For no border, if computer viewers will be looking at the page, use 0 (zero). |
alt="description"
Some computer browsers do not have images enabled. The description should tell in a few words what the subject of the image is.
All the above image attributes should be combined in the same tag:
<img align="right" src="url" height="100" width="100" border="0" alt="description"> |
<hr>
Inserts a horizontal rule (slim line) which will have a default width of 100%. |
width="?"
Sets width of rule, in percentage or absolute value (pixels). This tag incorporates automatic centering.
Examples: Default
80%
350 pixels:
|
size="?"
Sets size (height) of rule. This does not work for Safari and Chrome browsers.
Example:
|
| Basic Table Construction |
<table> </table>
Creates a table. |
<tr> </tr>
Sets off each row in a table. |
<td> </td>
Sets off each cell in a row. Cells contain the text and images, in other words, the table data. |
<th> </th>
Sets off the table header (a normal cell with bold, centered text). The blue cells on this page are table headers. |
| Table Attributes |
Please refer to Dictionary of Table Attributes for more indepth explanations.
(table tag) border="?"
Sets width of border around table cells.
Examples:
Border equals 5 pixels
|
(table tag) cellspacing="?"
Sets amount of space (pixels) between table cells.
Examples:
Cellspacing equals 2 pixels
Cellspacing equals 5 pixels
|
(table tag) cellpadding="?"
Sets amount of space (pixels) between a cell's border and its contents. |
(table tag) width="?"
Sets width of table, in pixels or as a percentage of document width. |
(tr tag) align="?" (td tag) align="?"
Sets horizontal alignment for contents of rows or cell(s) (left, center, or right). |
(tr tag) valign="?" or (td tag) valign="?"
Sets vertical alignment of contents of rows or cell(s) (top, middle, or bottom)
|
(th tag) colspan="?" or (td tag) colspan="?"
Sets number of columns a header or cell should span (default=1).
Refer to Colspan | |
(td tag) rowspan="?"
Sets number of rows a cell should span (default=1).
Refer to Rowspan |
(td tag) nowrap
Prevents the lines within a cell from being broken to fit the width. |
(th tag) bgcolor="?" or (td tag) bgcolor="?" or (tr tag) bgcolor="?"
Sets the background color for each header, individual cell or row, if it is to be different from the bgcolor of the table itself. |
(th tag) height="?" width="?" or (td tag) height="?" width="?"
Sets specific heights and widths for table headers and cells. All cells in the same row will be the same height, so the height for only the first cell in each row need be specified. Widths may vary, so must be included in each header or cell. Default width is the width of the table.
Any or all attributes listed above for headers, cells and rows can be included in the same tag. |
| Frames |
<frameset> </frameset>
Tag in a frames document; can also be nested in other framesets. |
(frameset tag) rows="value,value"
Defines the rows within a frameset, using number in pixels, or percentage of width. |
(frameset tag) cols="value,value"
Defines the columns within a frameset, using number in pixels, or percentage of width. |
<frame>
Defines a single frame - or region - within a frameset. |
<noframes> </noframes>
Defines what will appear on browsers that don't support frames. |
| Frames Attributes |
(frame tag) src="URL"
Specifies which HTML document should be displayed. |
(frame tag) name="name"
Names the frame, or region, so it may be targeted by other frames. |
(frame tag) marginwidth="?"
Defines the left and right margins for the frame; must be equal to or greater than 1. |
(frame tag) marginheight="?"
Defines the top and bottom margins for the frame; must be equal to or greater than 1. |
(frame tag) scrolling=VALUE
Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto. " The default, as in ordinary documents, is auto. |
(frame tag) noresize
Prevents the user's browser from resizing a frame. |
| Forms |
For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form.
<form> </form>
Creates all forms. |
<select multiple name="NAME" size=?> </select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll. |
option
Sets off each menu item. |
<select name="NAME"> </select>
Creates a pulldown menu. |
option
Sets off each menu item. |
<textarea name="NAME" cols="40" rows="8"> </textarea>'
Creates a text box area. Columns set the width; rows set the height. |
input type="checkbox" name="NAME"
Creates a checkbox. Text follows tag. |
input type="radio" name="NAME" value="x"
Creates a radio button. Text follows tag. |
input type="text" name="foo" size="20"
Creates a one-line text area. Size sets length, in characters. |
input type="submit" value="NAME"
Creates a Submit button. |
input type="image" border="0" name="NAME" src="name.gif"
Creates a Submit button using an image. |
input type="reset"
Creates a Reset button. |
|
