My Account - Duncan Cable

Features

Information

Basic HTML Guide

Published 09/05/2005 04:17 PM | Updated 04/07/2009 02:20 AM

Basic HTML Guide

Basic HTML Guide

Contents:

Introduction
How HTML Works
Creating an HTML Document
HTML Quick Guide

Introduction

HTML (HyperText Markup Language)- the basic language that is used in creating hypertext documents on the World Wide Web. It is used in basic, plain ASCII-text documents, but when those documents are interpreted (called rendering) by a web browser, the document can display formatted text, color, a variety of fonts, graphic images, sound, video clips, run programs, perform special effects and handle hypertext jumps to other Internet locations anywhere in the world.

Put simply, HTML is a format that tells a computer how to display a web page. The documents themselves are plain text files (ASCII) with special "tags" or codes that a web browser knows how to interpret and display on the computer screen.

How HTML Works

When a web browser displays a page, it reads from a plain text file, and looks for special codes or "tags" that are marked by the < and > signs. The general format for a HTML tag is:

<tag_name>string of text</tag_name>

As an example, the title for this section uses a bold tag:

<b>How HTML Works</b>

This tag tells a web browser to display the text How HTML Works in bold. HTML tags may tell a web browser to bold the text, italicize it, make it into a header, or make it be a hypertext link to another web page. It is important to note that the ending tag,

</tag_name>

contains the "/" slash character. This "/" slash tells a web browser to stop tagging the text. Many HTML tags are paired this way. If the slash is forgotten, a web browser will continue the tag for the rest of the text in the document, producing undesirable results.

Creating an HTML Document

An HTML document contains two distinct parts, the head and the body. Thehead contains information about the document that is not displayed on the screen. The body then contains everything else that is displayed as part of the web page.

The basic structure then of any HTML page is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
 <html>
 <head>
 <!-- header info used to contain extra information about
 this document, not displayed on the page -->
 </head>
 <body>
****
THE CONTENT HERE
****
 </body>
 </html>

Enclose all HTML content within <html>...</html> tags. Inside is first<head>...</head> and then the<body>...</body> sections.

Here are the steps for creating an HTML file.

If it is not open already, launch your text editor program.
Go to the text editor window.
Enter the following text (you do not have to press RETURN at the end of each line; the web browser will word wrap all text):
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
 <html>
 <head>
 <title>My Page</title>
 </head>
 <body>
This is my content.  I like content.  Content is very nice.  Look at all the
 pretty content.
 </body>
 </html>
```
NOTE: Look where the <title>...</title> tag is located. It is in the <head>...</head> portion and thus will not be visible on the screen. The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window.
Save the document as a file called "index.html". By using this file name extension, a web browser will know to read these text files as HTML and properly display the web page.

HTML Quick Guide

Now that there is a basic understanding of what HTML is and how it works, here are the most common HTML tags. These can be used to create a web page.

Basic Tags
<html></html> Creates an HTML document
<head></head> Sets off the title and other information that isn't displayed on the page itself
<body></body> Sets off the visible portion of the document

<title></title> Puts the name of the document in the title bar
Body Attributes
<body bgcolor=?> Sets the background color, using name or hex value
<body text=?> Sets the text color, using name or hex value
<body link=?> Sets the color of links, using name or hex value
<body vlink=?> Sets the color of followed links, using name or hex value
<body alink=?> Sets the color of links on click
Text Tags
<pre></pre> Creates preformatted text
<hl></hl> Creates the largest headline
<h6></h6> Creates the smallest headline
<b></b> Creates bold text
<i></i> Creates italic text
<tt></tt> Creates teletype, or typewriter-style text
<cite></cite> Creates a citation, usually italic
<em></em> Emphasizes a word (with italic or bold)
<strong></strong> Emphasizes a word (with italic or bold)
<font size=?></font> Sets size of font, from 1 to 7)
<font color=?</font> Sets font color, using name or hex value
Links
<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
<a name="NAME"></a> Creates a target location within a document
<a href="#NAME"></a> Links to that target location from elsewhere in the document
Formatting
<p></p> Creates a new paragraph
<p align=?> Aligns a paragraph to the left, right, or center
<br> Inserts a line break
<blockquote></blockquote> Indents text from both sides
<dl></dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<ol></ol> Creates a numbered list
<li></li> Precedes each list item, and adds a number
<ul></ul> Creates a bulleted list
<div align=?> A generic tag used to format large blocks of HTML, also used for stylesheets
Graphical Elements
<img src="name"> Adds an image
<img src="name" align=?> Aligns an image: left, right, center; bottom, top, middle
<img src="name" border=?> Sets size of border around an image
<hr> Inserts a horizontal rule
<hr size=?> Sets size (height) of rule
<hr width=?> Sets width of rule, in percentage or absolute value
<hr noshade> Creates a rule without a shadow
Tables
<table></table> Creates a table
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
<th></th> Sets off the table header (a normal cell with bold, centered text)
Table Attributes
<table border=#> Sets width of border around table cells
<table cellspacing=#> Sets amount of space between table cells
<table cellpadding=#> Sets amount of space between a cell's border and its contents
<table width=# or %> Sets width of table — in pixels or as a percentage of document width
<tr align=?> or <td align=?> Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?> Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#> Sets number of columns a cell should span
<td rowspan=#> Sets number of rows a cell should span (default=1)
<td nowrap> Prevents the lines within a cell from being broken to fit
Frames
<frameset></frameset> Replaces the <body> 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="URL"> Specifies which HTML document should be displayed
<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

Support:

Features

Customer Support

Phone Support