Web Help - HTML Short Reference - A2Z Computer Works

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.
HTML really is quite simple. It operates in the same linear fashion as a word processor such as WordPerfect. The language is just a bit unfamiliar - for now. Jump right in and get started!

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

Example: <body bgcolor=“#ffffff” text=“#000000” link=“#0000cc” vlink=“#ff0000”>

<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: First line.

<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: Default, with or without the type instruction of “1”. Entire list is created by inserting only the uppercase “A” as to type. Created by inserting only the lowercase “a” as to type. Created by inserting only the uppercase “I” as to type. Created by inserting only the lowercase “i” as to type.

<ul> … </ul> Creates a bulleted list using a “Disc” when used as shown - default. Example: Default bullet

<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: Disc - default bullet Square bullet Circle bullet

<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. WYSIWYG (What You See Is What You Get) or graphical editors are available. Using these means you may never have to see one bit of HTML. Every one of these either adds some bit of extraneous code or proprietary code to “help” you - NOT! Like so many things, the more you learn about how it works, the better job you can do - skip these types of programs. Many learned HTML “coders” swear by NotePad, the free program that comes with every Windows-equipped machine. Macs have a similar program too. These will serve you very well but require some attention that might be better directed to creating the content and the overall finished product. I own several programs for coding HTML. (The biggest assist has come from the built-in color-coded tags.) From the expensive top-of-the-line “Dreamweaver” to several lesser ones. My choice has come down to a favorite: Evrsoft First Page. First - it is free! This is a professional coding program with an “easy” mode, a “normal” mode, an “expert” mode, and a “hard-core” mode. It can be very easy to use, and as you learn, it offers tons of features and scripts and references built right into the program. It is what I have used to create nearly all the pages on all my sites. Not for graphics - but the actual webpages. You can download your free copy by going here. •