HTML Tables Tutorial
HyperText Markup Language is the "language" used to write home pages for the World Wide Web. Special "markup" codes are used to tell the web browser how to display the content of the page. These markups or "tags" are defined by angle brackets (< and >), also known as "less than" and "greater than" symbols. While a HTML "standard" specification is promoted by organizations such as the WorldWideWeb Consortium (W3C), the major browsers (Microsoft and Netscape) do not support the standard uniformly and offer special "extensions" to the standard. Browser-specific extensions may not work predictably in other browsers.
Although there are lots of software tools available for writing HTML, any text editor or word processor will do just fine! All HTML files are saved in plain ASCII text format with the filename extension ".htm" or ".html". A browser is needed to view the work-in-progress. Image editing software may be needed, too.
A good way to study HTML is to use the "View Source" feature in your web browser. For example, if you use "View Source" to check this page, you'll find that the angle brackets in the preceding paragraph were defined using the special character codes "<" and ">", because the browser expects < and > to enclose an HTML markup tag! When you see a web page that you like, take a peek behind the scenes and see how it was constructed!
If you find a page that you really want to study, use the browser's File|Save As (or Save Frame As) function to store a copy of the file on your local hard drive. Be aware, though, that any images that are embedded on the page will not automatically be saved along with the HTML document. To save images (or swipe them), point your mouse at the image, click the right mouse button, and pick the appropriate option (Save Image As) from the menu that pops up.
All HTML documents should begin with a <HTML> tag and end with a </HTML> tag. This signals to the browser that the document file is in HTML, rather than plain text or some other format. Within this "container", most HTML documents have a <HEAD> and a <BODY>.
Within the <HEAD> section, most HTML documents have a <TITLE>. This is what will be displayed in the uppermost bar of the web browser. The <TITLE> of this document is "HTML Demo". (<META> definitions used to provide keywords to search engines, as well as JavaScript program code, may also be placed in the <HEAD> of the document. These are advanced topics, though.)
The <BODY> of the HTML document contains most of the actual content of the page. Formatted text, images, and hyperlinks are all placed in the <BODY> of the document. Thus, the most basic structure for a HTML document is:
<HTML>
<HEAD>
<TITLE>
The Title of the Document
</TITLE>
</HEAD>
<BODY>
The document content goes here!
</BODY>
</HTML>
Table of Contents
Fixed-Width Fonts
HTML supports a wide range of text formatting options. In general, the text selection to be formatted is enclosed within a pair of HTML tags. A forward slash ("/") indicates the closing tag. Some HTML tags do not have closing tags, but most do. Unpredictable things happen with tags aren't properly closed!
a. Comments. It is often useful to put notes within a HTML document. These might include a copyright notice, instructions for other users who may want to modify the file, or even annotations. Comments are enclosed within <!-- and --> tags. Anything within the comment container is not displayed by the browser but is visible in View Source mode.
b. Line Breaks. To force a line break -- called a "carriage return" back in the days of typewriters -- use the <BR> tag. There is no closing tag for <BR>. Consider the following examples:
This is a line of text. Note that it continues to the right margin of the browser window and wraps around (unless you have the screen resolution set to something absolutely huge!).This is another line of text. There is a <BR> inserted here.
You can't see the actual <BR>, of course, but it's why there was a line break.
c. Paragraph Breaks. To force a break with a full line feed (a blank line), use the <P> tag. There is a corresponding </P> closing tag, but it is seldom used and is considered unnecessary. Additionally, an ALIGN attribute may be specified inside the <P> tag. If ALIGN is not specified, the default is left justification. Here are some examples:
There is a <P> tag inserted herewhich is why there is a full blank line in the middle of this sentence.
This paragraph starts with a <P ALIGN="Right"> tag. This causes the text to line up on the right margin of the browser window.
This paragraph starts with a <P ALIGN="Justify"> tag. This causes the text to wrap around in a fully justified fashion. Sometimes this looks good, and sometimes is doesn't. This alignment attribute does not display properly in early versions of Microsoft Internet Explorer.
d. Bold Text. To display a text selection in boldface, enclose it in <B> and </B> tags like this:
HTML formatted like this displays <B>boldface</B>.
HTML formatted like this displays boldface.
e. Italics. To display a text selection in italics, enclose it in <I> and </I> tags like this:
HTML formatted like this displays <I>italics</I>.
HTML formatted like this displays italics.
f. Fixed-Width Fonts. To display a text selection in a fixed-width font, enclose it in <TT> and </TT> tags like this:
HTML formatted like this displays <TT>in a fixed-width font</TT>.If you have a large selection of text that has already been laid out using tabs and spaces, the <PRE> and </PRE> container can be used. (PRE stands for "preformatted" text.) The selection also displays in a fixed-width font. The HTML structure outline shown above uses preformatted text.
HTML formatted like this displays in a fixed-width font.
g. <FONT> The <FONT> tag permits the size, color, and font face to be specified. In order for a font face to be defined, that font must be on the end user's computer; for this reason, it's a good idea to only use "basic" fonts that come with Windows 3.1 and/or Windows 95. Good HTML practice is to provide a suitable alternative for MacIntosh users, too. Confused? Good! Here are some basic examples of <FONT SIZE>:
<FONT SIZE=-1>Makes the font smaller.</FONT>
<FONT SIZE=+2>Makes the font bigger.</FONT>
<FONT SIZE=+3>Makes the font even bigger.</FONT>
<FONT SIZE=-1>Makes the font smaller.</FONT>
<FONT COLOR> is a little trickier. You need to know the hexadecimal red-green-blue (RGB) color code you want to use. Some browsers support named colors, but again this is not universally implemented.
<FONT COLOR="#FF0000">Makes the font red.</FONT>
<FONT COLOR="#00FF00">Makes the font green.</FONT>
<FONT COLOR="#0000FF">Makes the font blue.</FONT>
<FONT COLOR="#FFFF00">Makes the font yellow.</FONT>
<FONT FACE> lets you specify the font to be used. Again, basic Windows and/or Mac fonts should be used, since you have no control over any "special" fonts that may be installed on an end-user's computer. If a font is not installed, the browser merely uses the default proportional font.
<FONT FACE="Comic Sans MS">Comic Sans MS</FONT>
<FONT FACE="Desdemona" SIZE=+2>Desdemona</FONT>
Font definitions should be used with discretion!
h. Blinking Text. Without a doubt, this is one of the most annoying markups that exists. Look at the example below for a few minutes, and see if you don't agree!
HTML formatted like this <BLINK>BLINKS</BLINK>.
HTML formatted like this .
i. Headings. Outline style headings are defined using the <Hx> tag, where "x" is the size of the heading. The larger the number used for "x" the smaller the heading. Heading sizes range from 1 to 6. The closing tag </Hx> must be provided, and "x" must match the opening tag. There is an ALIGN attribute for headings, too. Here are some examples:
<H1>Largest Heading, Default Left-Justified</H1>
Images are important components of most HTML documents. In general, two types of image formats are used: .gif and .jpg files. Image files are saved separately from the HTML document itself -- the HTML document specifies where the image should be inserted on the page by the browser.
The <IMG SRC> tag is used to specify image placement, sizing, and alignment. There is no closing tag. The basic syntax for placing an image called "logo2.gif" is:
<IMG SRC="logo2.gif">
If the image file is saved in the same directory as the HTML document, only the file name is needed in the <IMG SRC> definition. Otherwise, the path to the image file is included. This gets complicated in a hurry!
Alignment may be specified within the IMG SRC tag. This tells the browser to place the image to the left or right and line up any text accordingly. Here are some examples:
<IMG SRC="logo2.gif" ALIGN="Left">This text will line up to the right of the image, which is placed on the left-hand side of the browser window.
This text will line up to the right of the image, which is placed on the left-hand side of the browser window.
<IMG SRC="logo2.gif" ALIGN="Right">This text will line up to the left of the image, which is placed on the right-hand side of the browser window.
This text will line up to the left of the image, which is placed on the right-hand side of the browser window.
Some end-users set their browsers not to auto-load images. This makes pages load faster. Also, some browsers (e.g., Lynx) don't display images at all. For this reason the ALT attribute is used to present some text where the image would be placed. In new browsers, ALT text displays in a pop-up box when the mouse is passed over an image. Try it on the image below:
<IMG SRC="logo2.gif" ALT="MGCCC School Logo">
When images are not auto-loaded, the browser displays a funky little icon. This may disrupt a carefully designed page. For this reason, it's often useful to specify the WIDTH and HEIGHT of the image in pixel units. The syntax is simple:
<IMG SRC="logo2.gif" WIDTH=263 HEIGHT=87>
This is especially useful if a small image is to be inserted into a line of text like this. If the user has auto-load images off, the funky browser icon won't disturb the line spacing.
Hyperlinks are perhaps the most powerful feature of HTML. A hyperlink (usually) appears as underlined, specially colored text. Images may also be placed in a hyperlink definition; by default a hyperlinked image will be surrounded by a colored border, but this can be switched off.
To link to a another document located within the same server directory as the "calling" document, use the following syntax:
<A HREF="theother.htm">"Hot" Text</A>
"Hot" Text
To link to a another document on a different server from the "calling" document, use the following syntax (substituting the URL of the document you want to call):
<A HREF="http://www.mgccc.cc.ms.us">"Hot" Text</A>
"Hot" Text
To link to a another location within the "calling" document, you will first need to insert "name anchors" at the destinations. There are name anchors throughout this tutorial. The syntax for a name anchor given to the Table of Contents of this document is:
<A NAME="TOC">"</A>
The <A HREF> definition for an "internal" hyperlink uses a hashmark (#). Thus, to call the Table of Contents, the following hyperlink is used:
<A HREF="#TOC">"</A>
"Hot" Text
Note that the links above use "Hot Text". This is not very descriptive! Good hyperlinks should have descriptive text (or images). "Click here" is awful, but is sadly overused. Avoid it!
To use an image in a hyperlink, simply insert the <IMG SRC> definition between the <A HREF> and </A> tags. Here's an example that will take you back to "theother.htm":
<A HREF="theother.htm"><IMG SRC="lamp.gif"></A>
To avoid the tacky border, use the BORDER=0 attribute for the image definition
<A HREF="theother.htm"><IMG SRC="lamp.gif" BORDER=0></A>
a. Centering. To center almost anything in an HTML document, use the <CENTER> and </CENTER> container. Of course, if a ALIGN attribute is available (e.g., for headings) you should use that instead. Here are examples:
<CENTER>This text will be centered on the page</CENTER>
<CENTER><IMG SRC="lamp.gif"><IMG SRC="lamp.gif"></CENTER>
b. Lines. To insert a horizontal rule (line) across the page, use <HR>. <HR> has a SIZE attribute (the higher the number up to 6 the thicker the line), a WIDTH attribute (the span of the line as a percentage of page width), and an ALIGN attribute (center, left, or right). Here are examples:
<HR SIZE=3 WIDTH=100% ALIGN="Center">
<HR SIZE=5 WIDTH=75% ALIGN="Left">
<HR SIZE=2 WIDTH=50% ALIGN="Right">
c. Lists. HTML supports both unordered (bulleted) and ordered (numbered). An unordered list is enclosed within <UL> and </UL> tags. Each list item begins with an <LI> tag. Here's an example of an unordered list:
<UL> <LI> Item #1 <LI> Item #2 <LI> Item #3 </UL> | Looks like: |
|
| TYPE = 1 | = | arabic numbers |
| TYPE = I | = | uppercase Roman numerals |
| TYPE = i | = | lowercase Roman numerals |
| TYPE = A | = | uppercase letters for each item |
| TYPE = a | = | lowercase letters |
<OL TYPE=1> <LI> Item #1 <LI> Item #2 <LI> Item #3 </OL> | Looks like: |
|
d. Quotes. The <BLOCKQUOTE> and </BLOCKQUOTE> tags are used to enclose a text selection that will be displayed as an indented quotation. Here's the example:
<BLOCKQUOTE>
This might be a quote or some other section of text that needs to be indented for special emphasis or for design considerations. Within the blockquote, all the usual formatting tags apply. What fun!
</BLOCKQUOTE>
This might be a quote or some other section of text that needs to be indented for special emphasis or for design considerations. Within the blockquote, all the usual formatting tags apply. What fun!
World Wide Web Consortium is a primary source for the latest information about the HTML specification. The W3C recommends HTML specifications and promotes uniform implementation of the specifications. This is an essential reference!
A Beginner's Guide to HTML, prepared by the National Center for Supercomputing Applications (NCSA) is a user-friendly reference.
Quick reference card from Peter Flynn's The WorldWideWeb Handbook. The format assumes some familiarity with HTML.
HTML Style Guide This document outlines good practices and provides a list of things to avoid. Recommended for beginning and intermediate HTML authors.
Netscape's "official" guide to using frames Authors considering using this advanced technique should consult this document.
Reference table of special characters (such as the < and > codes used in this document). Essential for setting up fancy pages or for incorporating financial or mathematical symbols.
Copyright © 1998, Joseph W. Cliburn (jclibu33@mgccc.cc.ms.us).
Office of Institutional Research/Planning
Mississippi Gulf Coast Community College
All rights reserved.
Last modified: 21-Aug-98.