Data Koncepts

HTML Tutorial - Overview

Data Koncepts

HTML Tutorial - Overview

This page will provide an overview of HTML basics
— and more!

HTML — What Is It?

Hypertext Markup Language, or HTML, is a computer language which tells a Web browser how to display it's information.

I'll first cover the basic HTML command structure.

I won't cover the new features of HTML 4 (DHTML). There are a multitude of books that do a very credible job of that. It's CRITICAL that the basics of HTML is learned first -- all the "glitz" can be added afterward.

Cascading Style Sheets offer a significant benefit in formatting your content. I create a site-wide stylesheet in conjunction with each site's template and incorporate it with reference in the <HEAD> section with:

This allows selected "containers" to be formatted by the common style sheet or specified in separate style="..." commands.

On to the basics!

Note: I've used UPPER CASE HTML tags in this tutorial for two reasons — first that it used to be the preferred way to visually see that was HTML and what was not and second, to retain that visual distinction for you. TODAY's best practice (and entering the latest standards) that all HTML tags are lower case.

HTML Structure

In order to identify a document as HTML, it should begin with the prologue:

    <DOCTYPE! HTML PUBLIC "-//IETF//DTD HTML//EN//3.2">

However, if this is NOT included, most Web browsers will infer its presence so this may be considered optional (a poor practice).

<HTML> ... </HTML>

The HTML element contains the whole of the HTML document. The HTML element can contain ONLY the <HEAD> ... </HEAD> and <BODY> ... </BODY> element pairs.

<HEAD> ... </HEAD>

The HEAD element is an unordered collection of information about the document. It offers the opportunity to define aspects of the entire page: The base address of the HTML document, provision for keyword search, to indicate relationships between documents, create a unique document identifier, specify the title of the document, and provide information usable by servers and clients -- and search engines!

The TITLE element pair is the only required element within the HEAD element pair.

    <HEAD>
    <TITLE> Document Title </TITLE>
    ... 
    </HEAD>

<BODY> ... </BODY>

The BODY element pair contains all the displayed information of the HTML document. The BODY element is required.

Putting all this together might look like:

    <DOCTYPE! HTML PUBLIC "-//IETF//DTD HTML//EN//3.2>
    <HTML> 
    <HEAD> 
        <TITLE> Document Title </TITLE>
        ... 
    </HEAD>
    <BODY> 
        ... 
    </BODY>
    </HTML>

You might have noticed something: All the HTML elements are contained within the "<" and ">" symbol pairs. Moreover, the elements come in pairs (not all elements come in pairs but I'll point out those which do not as I discuss each one). The closing part of the element pair repeats the opening element but adds a "/" after the opening "<" bracket. This is true of ALL the element pairs.

Current standards are treating HTML elements that are not paired in a new manner — they are being "closed" by adding a space/ before the closing >, i.e.,

HEAD Elements

The following elements are related to the head element. While not directly affecting the look of the document when rendered by a Web browser, they do provide important information to the browser — when they are used.

<TITLE> ... </TITLE>

Every HTML document must have a TITLE element pair. The title should identify the contents of the document and will label the window displaying the document.

<BASE>

Allows the base address of the HTML document to be specified.

<ISINDEX>

Allows keyword searching of the document. However, to use the ISINDEX element, the server must have a search engine which supports this element.

<LINK>

Indicates relationships between documents. Typical uses are to indicate authorship, related indices and glossaries, older or more recent versions, etc. Links can indicate a static tree structure in which the document was authored by pointing to a "parent" and "next" and "previous" document.

<NEXTID>

Creates unique document identifiers.

<META>

Specifies document information useable by servers and browsers. The meta element is used within the HEAD element to embed document information not defined by other HTML elements. THIS is where you embed the information so critical to search engines.

BODY Elements

The <BODY> element pair contains the web page -- everything!

BODY Attributes

I know, it does sound kind of kinky, but the BODY attributes play a major part in determining how your Web page is observed. BODY attributes include:

BACKGROUND allows you to provide a background image for the user's Web browser. Use caution, though, as the text or images that are specified will be tiled to cover the entire viewing area and may detract from the information provided. The format is:

    <BODY BACKGROUND="image.gif">

BGCOLOR changes the color of the background without having to wait for an image to load. Color is defined by a hexadecimal red-green-blue triplet in the format:

    <BODY BGCOLOR="#rrggbb">

Note: BGCOLOR="#000000" is black (no color or all colors are zero brightness) and BGCOLOR="#FFFFFF" is white (all colors are on at full brightness).

TEXT color is controllable via the BODY attribute TEXT="#rrggbb" in the same manner as BGCOLOR. Remember, if you use a black background, use a light colored text!

LINK, VLINK, and ALINK control the color of your links to other pages (or other areas within your Web page). The LINK attribute controls links, by the VLINK attribute controls visited links, and by the ALINK attribute controls the active link. The format for these colors is the same as for TEXT and BGCOLOR.

NOTE: These colors can only be set ONCE for the entire document (but can be modified by STYLEs).

Text Formatting

Text will be formatted by Web browsers continuously and left justified until either a Line Break (<br />) or Paragraph (<P>) element is included in the document. In addition, a Horizontal Rule (<HR>) will provide a line across the displayed page.

Note: The <P>aragraph tag can also be used as a container to enclose a paragraph.

Text is formatted to provide Bold (<B or STRONG>), Italic (<I or EM>), and Underline (<U>), the style is changed to provide headers (<H1 through H6>), and a preformatted (<PRE>) text is provided to change font.

Lists

Lists are accommodated in three styles: Numbered List, Unordered List, and Definition List. The following are examples of all three:

**HTML List Elements**
Ordered (Numbered) List	Unordered List	Definition List
Item Item Item Item	Item Item Item Item	Term Definition Term Definition
Syntax:
<OL> <LI>...</LI> </OL>	<UL> <LI>...</LI> </UL>	<DL> <DT>...</DT> <DD>...</DD> </DL>

Tables

You've just seen a table at work. The format for TABLEs is as follows:

    <TABLE>
        <TR><TD> (cell_data) </TD> ... </TR>
        ...
    </TABLE>

TABLE Attributes

BORDER = value

If present (and greater than the default of zero, this element will cause a border to be drawn around the table with the pixel width specified.

WIDTH = value(%)

If not present, the table will be as small as possible. If specified, it will take on the value specified in percent of available page width (%) or pixels.

CELLSPACING = value

A new element provided by NetScape browsers, this provides a default of 2 pixel spacing between table cells.

CELLPADDING = value

An element introduced by NetScape, this provides a default of 1 pixel spacing between table cell borders and the cell data.

The above elements are included within the opening <TABLE> element as follows (default values are provided except for WIDTH):

    <TABLE BORDER=0 Width=100% CELLSPACING=2 CELLPADDING=1>
        <TR><TD> (cell_data) </TD> ... </TR>
        ...
    <TABLE>

Table Elements

The elements which may be contained within the <TABLE> ... </TABLE> pair, aside from the required row element, are as follows:

<CAPTION VALIGN= "top or bottom"> Caption </CAPTION>

This optional element pair allows the table to have a title which is centered on the table. The default alignment is TOP but it can be centered under the table with BOTTOM specified.

<TR> ... </TR>

The table row element pairs give the count of the number of rows in the table and it can provide both vertical and horizontal alignment of its cell's contents. Table rows can contain either Header (<TH>) or Data (<TD>) elements.

In addition, the row element can have both the (<ALIGN>) and (<VALIGN>) attributes which become the default for that row.

    ALIGN=(left, center or right)

ALIGN makes the row, column, or cell's data align to the left, center, or right. The use of ALIGN as a row attribute makes that alignment the baseling for that entire row.

    VALIGN=(top, middle, bottom, or baseline for that row)

VALIGN makes the row, column or cell's data align vertically within the cell.

<TD> ... </TD>

The Table Data (<TD>) element pair identifies a cell within a table. The Table Data element may contain the following attributes:

    ALIGN=(left, right, or center)

    VALIGN=(top, middle, bottom, or baseline)

    COLSPAN=value

COLSPAN allows a cell to span (value) columns.

    ROWSPAN=value

ROWSPAN allows a cell to span (value) rows.

    NOWRAP

This means that the cell contents cannot be broken to fit in the cell and can result in E X C E S S I V E L Y W I D E cells.

<TH> ... </TH>

The Table Header (<TH>) element pair is identical to a Table Data element pair except that the default text is BOLD and centered (no need to add align="CENTER"). The Table Header element may also contain the following attributes:

    ALIGN=(left, right, or center)

    VALIGN=(top, middle, bottom, or baseline)

    NOWRAP

    COLSPAN=value

    ROWSPAN=value

Comment

Last but not least, is the COMMENT element — whose attribute IS the comment:

    <!-- comment -->

Graphics

One of the benefits of HTML is that you can include graphics. Most Web browsers can read and display graphics in the .GIF and .JPG format. You'll find that the .GIF images are better for displaying simple graphics and the .JPG format is better for displaying photographic images.

Images are displayed with the Image element:

    <IMG SRC="image.gif">

Image Attributes

    SRC="image.gif"

The IMaGe SouRCe obviously MUST be specified and this example assumes that the file, image.gif, resides in the same directory as the active page.

    ALT="caption for text-only browsers"

This attribute provides an ALTernate text for text-only browsers — and for those of us who prefer NOT to auto-load images. It's essential to add an ALT for the visually impaired and is required in current standards.

    ALIGN=(top, middle, or bottom)

The ALIGN attribute specifies the placement of the next line of text with relation to the image.

Note: NetScape has extended the ALIGN attribute to:

    ALIGN=(left, right, top, texttop, middle, absmiddle, 
          baseline, absbottom, or bottom)

The left and right values will float the image to the left and right margins and text to wrap in the unused area. The texttop, absmiddle, and absbottom position the image with respect to the current line of text. Use caution, though, as large images can often overlap adjoining text.

NetScape has also added the WIDTH="pixelvalue" and HEIGHT="pixelvalue" attributes to size images, a BORDER=value to provide a "picture frame" for your image, and HSPACE=value and VSPACE=value to provide space both horizontally and vertically around the image.

    ISMAP

The ISMAP attribute identifies an image as an image map, a graphic in which regions are mapped to URLs. Since the ISMAP attribute is server sensitive (is handled differently by different servers), I'll leave this to your local service provider to explain to you.

Hypertext Links

Hypertext links allow Web browsers to leap from one location in a single document to another location in that document — or to a location in any document on any computer around the world!

External Links

To jump to another document, anywhere, you use the general format of the Anchor element, <A>:

    <A HREF="http://datakoncepts.com/">Data Koncepts</A> Home Page

Here, the Anchor points to the Data Koncepts website and the "/" points to the default Home Page ("/index.html" or "/index") and identifies it as such.

When you point to another one of your pages in the same directory, this can be shortened to a relative reference as:

    <A HREF="page2.html">Second Page of ...</A>

Internal Links

To jump to another location within a document, that location must be NAMEd. You NAME it with the following:

    <A NAME=OtherPlace>

and the link would then be accessed via:

    <A HREF="#OtherPlace">

If you're ready, let's go on to take a look at:

Go back to:

So You Want To Have A Web Presence?

or take a look at: