![]() HTML Short Reference |
This is a simple reference to get you going. The tags shown here were chosen for their cross-browser compatibility. There are many more tags, and many more ways to use them. Older browsers may or may not recognize many of the newer tags - so they are not included here. If you become serious about html there are many fine choices available to assist you in learning how to do more with your web pages. |
BASIC TAGS | |
<html>
</html>
Needed tags to indicate the page is indeed an HTML document. May be preceded by a statement of which version of html was used for the document. |
|
<head>
</head>
Encloses the title, meta tags, and other information. This information is not displayed on the Web page itself |
|
<body>
</body>
Encloses the visible portion of the document. |
HEADER TAGS | |
<title>
</title>
Places information in the title bar of the browser - usually the title of the page, though you can use additional descriptive words here. This is the information seen when someone saves the page to their Favorites or as a Bookmarked page. |
|
<meta > tags
May find several in any html page. These contain a variety of information. These are a separate study in themselves. The most common use is to assist search engines in categorizing the page, by inserting a string of keywords search engines use to determine what kind of site it is, and what kind of information is on the site. They use no closing tag. There is great disagreement about what should be, and should not be, put into meta tags. Several meta tags are simply made up are are disregarded by search engines. One new development is that some search engines are now comparing information found in these tags to information in the docuent, and if it doesn't match, the search engine will not index the page at all - effectively blacklisting it from being displayed as a search result. |
|
<script language=JavaScript>
</script>
JavaScripts are small programs which may be inserted within the head or body tags. They add much in the way of function to a page without the security problems of some other methods of creating interaction with your visitor. JavaScripts are another area that must be studied on it's own. Many scripts are available for use in your pages, without having to learn to write them. JavaScripts are not the same thing as Java. Java is a full-fledged programming language. |
Body Attributes | |
<body bgcolor=#xxxxxx>
Sets the background color of the page. Usually a pound-sign followed by a six-digit hex value, but certain color names can be used. These names may not be recognized by some browsers. The use of hex values is always preferable. There are a limited number of colors generally recognized - often referred to as the 216 Web-Safe Color Palette. See a version of the 216 Color Web-Safe palette here See a version of the 140 Named Colors palette here. These are large tables, allow a few moments for loading. |
|
<body background=xxxxx.xxx>
Sets the background of the page when using an image in place of a background color. Insert the image name, location, and file type. Generally tiled to cover the entire screen area. |
|
<body text=#xxxxxx>
Sets the base color of the text for the entire page, (can be changed in spots), and the default color is black if not specified. Usually a hex value - color names can be used with the same problems in borwsers. |
|
<body link=#xxxxxx>
Sets the color of hyperlinks on the page. Use hex values or names. |
|
<body alink=#xxxxxx>
Sets the color of hyperlinks as you click on it. Uses hex values or names. |
|
<body vlink=#xxxxxx>
Sets the color of followed (already viewed) hyperlinks. Use hex values or names. |
|
<body leftmargin=#> number in pixels
Sets the number of pixels from the left (and right) sides of the page where the contents will begin. Used by Internet Explorer and ignored by Netscape Navigator. |
|
<body topmargin=#> number in pixels
Sets the number of pixels from the top of the page where the contents will begin. Used by Internet Explorer and ignored by Netscape Navigator. |
|
<body marginwidth=#> number in pixels
Sets the number of pixels from the left (and right) sides of the page where the contents will begin. Used by Netscape Navigator and ignored by Internet Explorer. |
|
<body marginheight=#> number in pixels
Sets the number of pixels from the top of the page where the contents will begin. Used by Netscape Navigator and ignored by Internet Explorer. |
TEXT TAGS | |
<hl>
</hl> down to <h6>
</h6>
Creates the largest headline: 6, down to the smallest headline: 1. |
|
<font size=#>
</font>
Sets size of font, from the smallest: 1 to the largest: 7. There is some controversy here - the default font size is a 3, that is with no other instruction to change it. You can change the font size by using a +1, +2, +3, or +4 for each step larger than the default size of 3, to a maximum equal to 7. You can use -1, or -2 to make the font smaller, down to a equal of the smallest size of 1. |
|
<font color=#xxxxxx>
</font>
Sets font color, using hex values or color name. |
|
<b>
</b>
Makes the text between the tags Bold. NOTE: <em> and <strong> are for this also - but can produce differing results, especially when used by text-to-speech readers. Stick to the standard Bold instruction. |
|
<i>
</i>
Italicizes the text between the tags |
|
<u>
</u>
Underlines the text between the tags. Underlining is definitely falling out of favor since the fax machine and scanning have become more widely used. It creates problems for scanners of all kinds, printers, and optical character recognition software. Simply get in the habit of not underlining anything. |
|
<sub>
</sub>
Subscript. Shifts and reduces the text between the tags downward. How are you. |
|
<sup>
</sup>
Superscript. Shifts and reduces the text between the tags upward. How are you. |
|
<tt>
</tt>
Creates teletype, or typewriter-style monospaced text between the tags. |
|
<cite>
</cite>
Creates a citation, usually italicized |
|
<pre>
</pre>
Permits insertion of pre-formatted text. Still not a good choice for controlling layout in html, as browsers still interpret it in different ways. |
LINKS | |
<a
>
</a>
Anchor tag. Is used with several other tags. |
|
<a href=www.somewebsite.com>
</a>
Creates a hyperlink or link. These can be used to direct the visitor to another website, another page or graphic on the same site, or to a specific section of a document on the same or another site, or for Email connection. Whatever you place between the tags becomes active as a clickable link to wherever you specified. By default, If text; it appears in the color chosen for links. If an image; it appears with a border in the color chosen for links. You can change the color and not use a border, or change the font attributes also. |
|
<a href=mailto:somebody@something.com>
</a>
Creates a mailto (Email) link |
|
<a name=Top>
</a>
Creates a target location within a document. |
|
<a href=/Top>
</a>
Links to that target location from elsewhere in the document. |
FORMATTING | |
<!--
-->
The use of this pair of tags - really one tag if you take notice, allows you to insert information as notes to yourself about anything you feel is important to remember. This tag can contain information about content, layout, dates, script information, etc. When it is used correctly the tag and the information it contains will not be visible on the page. You can see it when you view the source code for the page at any later date. |
|
<center>
</center>
Centers, left-to-right on the page, whatever is contained within these tags, headlines, text, or images. It applies to centering an entire table or the contents of table cells too. |
|
<p>
</p>
Creates a new paragraph. Some leave off the closing tag - best not to do it that way. It is not recommended to create empty space by creating empty paragraphs. |
|
<p align=
>
</p>
Sets justification for a paragraph to left, right, or center |
|
<br>
Inserts a line break. No closing tag is used. Can be used to create empty space. When inserted by most html editing programs it generally appears at the end of the line where it is broken. For help in locating line breaks at a later time (when updating a page for instance), insert them to the left of the page, at the beginning of a line. This tip makes them easy to find as they will all be right down the left edge of the html layout. |
|
<blockquote>
</blockquote>
Indents text from both sides |
|
<ol>
</ol>
Creates a numbered list using Arabic numerals when used as shown - default. Example:
|
|
<ol type=
>
</ol>
Creates a numbered, alphabetical, or Roman numeral list when used with further instruction as to type. Choices are (in boldface for clarity) 1 | A | a | I | i , to be inserted in the type area of the above instruction. Example:
|
|
<ul>
</ul>
Creates a bulleted list using a Disc when used as shown - default. Example:
|
|
<ul type=
>
</ul>
Creates a bulleted list with further instruction as to type of bullet to use. There are also ways to use images as bullets. Examples:
|
|
<li>
</li>
List item. Adds a number or letter if used with an ordered list instruction, and adds a bullet when used with an unordered list. |
|
<dl>
</dl>
Creates a definition list |
|
<dt>
</dt>
Precedes each definition term |
|
<dd>
</dd>
Precedes each definition |
GRAPHICAL ELEMENTS | |
<img src=xxxxxx.xxx>
<img src=http://www.xxxxxx.xxx/xxxxxx.xxx> Adds an image. Insert the exact location of the image, and the file type. This can be an absolute URL, using the full path of the image: http://www.xxxxxx.xxx/xxxxxx.xxx, where the image remains on the original server, or a relative URL xxxxxx.xxx where the image can be kept in a local folder. |
|
<img src=xxxxxx.jpg align=
>
Aligns an image with text: left, right, center; bottom, top, middle. |
|
<img src=xxxxxx.gif border=#>
Sets size of border around an image, number in pixels. Usually set to 0 |
|
<img src=xxxxxx.png vspace=#>
Sets the amount of space above and below an image, in pixels. |
|
<img src=xxxxxx.xxx hspace=#>
Sets the amount of space to the left and right of an image, in pixels. |
|
<hr>
Inserts a horizontal rule ( as shown - across the entire page ). It has no closing tag. |
|
<hr width=
>
Sets width of rule across the page, in percentage or absolute width in pixels. Automatically centered. |
|
<hr size=
>
Sets size (height or thickness) of rule. Number in pixels. |
|
<hr noshade>
Creates a rule without a shadow |
TABLES | |
Tables can be one of the best tools you can have. They can allow you to divide a page for a whole variety of reasons. Columns for brochure-style layouts, inserting photos into a layout, ease of change of type faces, etc. They can get tricky - and this is one place you can use a graphical layout ( drawn on paper even! ) to great advantage. Over-use or improper use of tables can slow the loading of a page - take care. | |
<table>
</table>
Indicates a table - between the tags. |
|
<tr>
</tr>
Defines each row in a table |
|
<td>
</td>
Indicates each cell in a row |
|
<th>
</th>
Sets off the table header (a normal cell with automatically bold and centered text) |
TABLE ATTRIBUTES | |
<table border=#>
Sets width of border around table cells, in pixels. Leave a "1" for the border while working on your webpage so you can see the layout while previewing your work. Then when the page or table is completed change it to a "0" again. The border attribute can be used for a "picture frame" effect as well. |
|
<table cellspacing=#>
Sets amount of space between table cells, in pixels. |
|
<table cellpadding=#>
Sets amount of space between a cell's border and the contents, in pixels. |
|
<table width=# or #%>
Sets width of table - in pixels or as a percentage of document (screen) width |
|
<tr align=
> or <td align=
>
Sets horizontal alignment for cell(s) contents, (left, center, or right) |
|
<tr valign=
> or <td valign=
>
Sets vertical alignment for cell(s) contents, (top, middle, or bottom) |
|
<td colspan=#>
Sets number of columns a cell should span, (default=1 - but no span code would be needed for just one cell), in pixels. Remember - columns in tables do not really exist, only rows - but you can span cells across what appear to be columns. |
|
<td rowspan=#>
Sets number of rows a cell should span, (default=1, no span code), in pixels. |
|
<td nowrap>
Prevents the lines of text within a cell from being broken to fit within the width of a cell. |
FRAMES | |
<frameset></frameset>
tag in a frames document; can also be nested in other framesets |
|
<frameset rows=value,value>
Defines the rows within a frameset, using number in pixels, or percentage of width |
|
<frameset 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 src=xxxxx.html>
Specifies which HTML document should be displayed within that frame. |
|
<frame name=name>
Names the frame, or region, so it may be targeted by other frames |
|
<frame marginwidth=#>
Defines the left and right margins for the frame; must be equal to, or greater than, 1 |
|
<frame marginheight=#>
Defines the top and bottom margins for the frame; must be equal to, or greater than, 1 |
|
<frame 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 noresize>
Prevents the user from resizing a frame |
FORMS | |
HTML creates the appearance of a form. For a functional form, a cgi script must be in place on your server. | |
<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=## rows=##><#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=name size=##>
Creates a one-line text area. Size sets length, in characters. |
|
<input type=submit value=name>
Creates a Submit button. |
|
<input type=image border=# name=name src=imagename.gif>
Creates a Submit button using an image. |
|
<input type=reset>
Creates a Reset button |
COMMENTS | |
Complete references are abundant - but you need to determine how you learn best. You can sit with a book (I always keep a book handy), and you can find many, many free resources on the Internet as well. This applies to the design of webpages, websites, and graphics, as well as the simple HTML that makes it possible. Shareware and free progams are everywhere. |