HTML (HyperText Markup Language) is one of the most popular and accessible markup languages available. If you have spent any time on the World Wide Web, you have encountered HTML, as it is used to author Web documents such as this tutorial. HTML gives you the power to create structured multimedia documents with relative ease, and offers a variety of tags to achieve a wide range of page designs.
This tutorial will discuss tags up to and including those covered by the HTML version 3.2 specifications. HTML 3.2 is fully supported by versions 3 and later of the two most popular Web browsers, Netscape Navigator and Microsoft Internet Explorer.
The structure of an HTML document resembles the following:
<HTML> <HEAD> <TITLE>The title of your document goes here.</TITLE> </HEAD> <BODY> Your HTML code goes here. </BODY> </HTML>
Certain tags are interpreted correctly by Netscape Navigator and Internet Explorer even if the tags are not included between the <BODY> and </BODY> tags. Those cases, however, constitute exceptions rather than the rules; therefore, you should keep your HTML code in the BODY of your document.
One notable exception to this rule is JavaScript, a simple object-oriented programming language integrated into both Netscape Navigator and Internet Explorer. JavaScript allows the HTML author to include programming elements in any web page. Such elements may range from simple functionalities, such as popping up an alert box when the user clicks on a button, to complex programs, such as games or calculators. JavaScript function declarations belong between the <HEAD> and </HEAD> tags.
The <BODY> tag can be used to give a whole new look to your HTML document. When declared simply as <BODY>, it usually comes as default with black text on a gray background, with unvisited links in blue, visited links in purple and active links in red. However, an HTML document can override the defaults to declare an original color scheme. The <BODY> tag can accept the following attributes:
There are two ways to define colors for the BGCOLOR, TEXT, LINK, VLINK, and ALINK attributes. Most recent browsers allow you to use the name of the color, such as "white" or "blue." If you want to use a more exotic color, however, you'll have to figure out its RGB (red-green-blue) value in hexadecimal. This is even less fun than it sounds, so unless you really enjoy using trial and error to find the perfect shade of burnt sienna, you'll probably want to use a utility that will figure out the value for you. An excellent one that's available on the Internet is ColorCenter.
Here's an example of a <BODY> tag:
<BODY BGCOLOR="black" TEXT="#30ff3d" LINK="#f89400"
ALINK="purple" VLINK="#FF8DDD">
This page has a fluorescent green text, hyperlinks in orange, active links in purple, and visited links in pink, all on a black background.
A note of caution: It's a lot of fun to dream up crazy color schemes for your pages, but make sure that your text is still readable. If your page has white text on a flourescent yellow background, your visitors will not stick around very long.
A successful presentation of your HTML content may be as important as the content itself, since the design will define the content's accessibility and appeal. The following tags will help you structure your document, placing text and graphics where they truly belong.
<P>Your text goes here.</P>
The paragraph tag defines a new paragraph, and all the text that goes between <P> and </P> appears as one whole block of text. HTML does not indent paragraphs. Paragraphs are aligned to the left by default, the ALIGN attribute which can take on the values RIGHT, CENTER or LEFT can be added to the <P> tag to dictate how the paragraph will be placed on the page. For instance,
<P ALIGN="RIGHT">blah blah blah</P>
would appear like this:
blah blah blah
The <P> tag usually puts two lines between the end of one paragraph and the beginning of the next, but sometimes you just want text to appear on the next line. You can use the <BR> tag to do this:
This text will appear on one line.<BR> And this text will appear on the very next line.
This text will appear on one line.
And this text will appear on the very next line.
<A HREF="http://www.your.hyperlink.goes.here.com/">Your hyperlink goes here.</A>
The hypertext reference anchor tag creates a hyperlink - a special
block of text that takes you to a new URL when it is clicked. The
specified URL can be a hypertext document address, in the form of
http://computername.domain.com/folder/filename.html, or an email
address, in the form of
mailto:email_address@host.com. Here are some
examples:
One excellent Web directory is <A HREF="http://www.yahoo.com/">Yahoo.</A> Yahoo links to all sorts of pages such as the <A HREF="http://www.brown.edu/">Brown University home page</A>. Lisa and Catherine both attend Brown; you can email Lisa (<A HREF="mailto:ljc@cs.brown.edu">ljc@cs.brown.edu</A>) or Catherine (<A HREF="mailto:ck@cs.brown.edu">ck@cs.brown.edu</A>).
When loaded in a Web browser, the above text will look like this:
One excellent Web directory is Yahoo. Yahoo links to all sorts of pages such as the Brown University home page. Lisa and Catherine both attend Brown; you can email Lisa (ljc@cs.brown.edu) or Catherine (ck@cs.brown.edu).
One important attribute of the anchor tag is NAME, which allows you to define a "named anchor" at an arbitrary point in the page. This allows you to link to different points in the page, as the index for this tutorial does. To define a named anchor, enclose the text to link to with the <a name="anchor_name"> and </a> tags. To link to this anchor, use the # sign followed by anchor_name, as in <a href="#anchor_name">Go to the named anchor</a>. If the named anchor is on another page, specify the filename before the # sign, as in <a href="filename.html#named_anchor">.
For example, at the top of this section on hyperlinks is the following:
<A NAME="hypertext">[some text]</A>
Now, you can create a hyperlink to the top of this section with the following:
<A HREF="#hypertext">Go to the top of this
section</A>
This will appear as follows:
<IMG>
The image tag allows you to embed images in an HTML document. The most important attributes for this tag are as follows:
<EMBED>
The embed tag can be used to embed multimedia content in an HTML document, such as sound, video, and VRML. The embedded multimedia document is declared through the use of the SRC attribute:
<EMBED SRC="myvideo.avi">
<B>Your text goes here.</B>
The bold tag does exactly what its name suggests - it forms bold text.
<I>Your text goes here.</I>
The italic tag also modifies the text, this time italicizing it.
<U>Your text goes here.</U>
The underline tag, not surprisingly, underlines the text.
<S>Your text goes here.</S>
The strike-through tag draws a horizontal line across your text and
provides a crossed-out effect.
<FONT>Your text goes here.</FONT>
The font tag is utilized mainly to make use of its attributes, which can do weird and wonderful things to the text in your HTML document.
<FONT SIZE="-1" FACE="Courier New,Courier" COLOR="red">This text is smaller and in a fixed-pitch font. It's also red.</FONT> <FONT SIZE="7" COLOR="blue">And this text is really big and blue.</FONT>
This text is smaller and in a fixed-ptich font. It's also red. And this text is really big and blue.
<H1>Your text goes here.</H1>
The heading tag, which ranges from <H1> to <H6>, largest to smallest, defines a heading - a bold title. Although heading tags can be achieved through the use of the <FONT> and <B> tags, they provide the semantic meaning that the enclosed text is a heading rather than normal text. The heading is aligned to the left by default, the ALIGN attribute, which can take on the values RIGHT, CENTER or LEFT, can be added to modify the placement of the text.
<H1>This is a big heading that is left-aligned.</H1> <H5 ALIGN=RIGHT>And this is a small heading that is right-aligned.</H5>
The unordered list tag creates a list of bullet points. Each separate bullet point is placed between a pair of <LI> and </LI> tags. An ordered list can be created in exactly the same way, by specifying <OL> ... </OL> rather than <UL> ... </UL>. The OL tag supports the attribute TYPE with possible values A (A, B, C ... ), a (a, b, c ... ), I (I, II, III ... ), i (i, ii, iii ... ) as well as the default (1, 2, 3 ... ). It also supports the attribute START which declares the number that the list begins with.
<UL> <LI>This is an unordered list</LI> <LI>It uses bullet points</LI> </UL> <OL> <LI>And this is an ordered list</LI> <LI>It uses numbers</LI> </OL>
<HR>
The <HR> tag displays a nice horizontal line on the screen. It is useful for visually separating different sections of your document. You can define the width of the line using the WIDTH attribute. The WIDTH can be specified as a pixel value (e.g. 100) or a percentage of the screen (e.g. 50%). You can also define the lines thickness in pixels using the SIZE attribute, its alignment using the ALIGN attribute (possible values are LEFT, RIGHT, CENTER with CENTER being default), and finally its 3D look with the NOSHADE attribute ( possible values are YES or NO).
Tables can be extremely useful in defining a grid within which you can place various objects, such as blocks of text, images, sound, or video. A table is placed between a pair of <TABLE> ... </TABLE> tags. Some of the most important attributes supported by the <TABLE> tag are as follows:
Once you declare a table, you must declare each table row separately by using a pair of <TR> ... </TR> tags. You must then declare the columns within a row as distinct table data cells by using a pair of <TD> ... </TD> tags. Table data cells must be nested within their respective table rows, which must in turn be nested within their respective table.
<TD> and <TR> tags can take on all the attributes supported by <TABLE>. An attribute declared by a specific <TD> overrides the same attribute declared by its parent <TR>, which in turn overrides the same attribute declared by its parent <TABLE> .
Additional attributes supported by <TD> are the following:
Check out the following HTML code, and the table that it creates:
<TABLE CELLPADDING="5" CELLSPACING="10" BORDER="2" WIDTH="100" HEIGHT="100"> <TR ALIGN ="CENTER"> <TD><STRONG>Item One</STRONG></TD> <TD BGCOLOR="#888fff">Item Two</TD> </TR> <TR BGCOLOR="#ffaaff"> <TD COLSPAN="2">Item Three, plus a description</TD> </TR> </TABLE>
Forms allow the user to enter information into a series of fields, such as text fields, radio buttons, checkboxes, and pull-down menus. This information can then be submitted either to an email address, or more regularly, to a CGI script that processes this information.
The <FORM> ... </FORM> tag can take on the ACTION attribute, which specifies the URL to which the data will be submitted. It also supports the METHOD attribute, which can take on the values GET or POST, with POST being most commonly used. The following tags must all be nested between a pair of <FORM> ... </FORM> tags:
The <INPUT> tag constitutes the most important form element. It defines a field input format by taking on the TYPE attribute with one of the values TEXT, CHECKBOX, RADIO, SUBMIT, or RESET.
The NAME attribute defines the field name for the INPUT tag, and the optional VALUE attribute defines the default value for the field.
The <SELECT> ... </SELECT> tag specifies a pull-down menu. It can take on a NAME attribute which, like its counterpart in the INPUT tag, specifies the name of the field being declared. A pull-down menu contains numerous options, each of which is defined by an tag. The OPTION tag takes on a VALUE attribute, which defines the name of the field being declared. Each text string that appears in the pull-down menu goes between a pair of <OPTION> ... </OPTION> tags. All <OPTION> ... </OPTION> tags must be nested within a pair of <SELECT> ... </SELECT> tags.
The <TEXTAREA> ... </TEXTAREA> tag defines a scrollable, multi-line text field where the user can input ASCII text. It can take on a NAME attribute, which defines the field name. The default value for the textarea is the text in between the <TEXTAREA> and </TEXTAREA> tags. The number of rows and columns can be defined through the use of ROWS and COLS attributes. Finally, the WRAP attribute, which can take on the values PHYSICAL or VIRTUAL, automatically wraps text around when the end of the text area is reached.
If this all sounds somewhat confusing, take a look at this forms example.
The use of frames is cause for much debate among HTML experts. While some claim that frames can be a powerful tool for navigation and for factoring out code from web pages, others contend that frames are inherently ugly and should be executed on the spot. The following will give you an overview of how frames work and what they are capable of.
The <FRAMESET> ... </FRAMESET> tags replace the <BODY> ... </BODY> tags within an HTML document. They define a frameset within which HTML documents appear. The FRAMESET tag can take on the attributes COLS or ROWS, each of which can specify the number and sizes of the frames to be included. Sizes can be specified as pixel values or as percentages. A wildcard (*) can be used at most once in either attribute to denote that the frame will take up whatever space remains on the screen. The <FRAME> tag specifies the name and source file of a particular frame. The SRC attribute defines the HTML file that will appear within that frame. The NAME attribute declares a name for the frame. This name can later be used as the target of a hyperlink, making the document specified by the hyperlink appear in that frame. Finally, the FRAME tag can accept the SCROLLING attribute with the values YES, NO, or AUTO and the NORESIZE attribute with the values YES or NO. Frames require the hypertext reference anchor tag to be used somewhat differently. When declaring an <A HREF> tag, apart from specifying the URL reference, it is necessary to also provide a TARGET attribute with a value referring to the name of the frame being targeted. For instance, in a FRAMESET that includes frames named navigation and body, an HTML document called target.html would be displayed in the body frame by clicking on a hyperlink defined as follows:<A HREF="target.html" TARGET="body">Why don't you click here?</A>
Text included between a pair of <NOFRAMES>
... </NOFRAMES> tags ensures that all users will receive
some form of HTML content. The text between a pair of
For instance, check out the following HTML code, which creates a column that is 20% as wide as the browser window on the left side, a 200-pixel wide column on the right side, and allocates the remaining space to the middle column. The leftmost column is then sliced into two rows, the top row being 250 pixels high and the bottom row inheriting whatever space is left of the column. If this vivid description has not satisfied you, see for yourself.
<FRAMESET COLS="20%,*,200"> <FRAMESET ROWS="250,*"> <FRAME SRC="a.html" NAME="A"> <FRAME SRC="b.html" NAME="B"> </FRAMESET> <FRAME SRC="c.html" NAME="C"> <FRAME SRC="d.html" NAME="D"> </FRAMESET>
Thus ends our excursion into the world of HyperText Markup Language. The above tags, along with a healthy dose of creativity, will allow you to author all sorts of beautiful web projects. However, for the benefit of those who wish to learn more, we provide a list of our favorite HTML reference sites below: