DIGITAL SMILES INC.

HTML & Web Design

Introduction & Intermediate Levels

T.I. McLaughlin

mcse, mct, b-admin, a+, webmaster

Table of Contents

Basic Concepts............................................................................................................................................... 5

Tags:............................................................................................................................................................................................ 5

Head:............................................................................................................................................................................................ 5

Title:............................................................................................................................................................................................. 5

Body:............................................................................................................................................................................................ 5

Headings:.................................................................................................................................................................................... 5

Paragraphs:................................................................................................................................................................................ 5

Alignment:.................................................................................................................................................................................. 6

Lists:............................................................................................................................................................................................ 6

A Basic HTML Document............................................................................................................ 7

<P> Paragraph command......................................................................................................................................................... 7

<BR> Line Break command.................................................................................................................................................... 7

<Center> command................................................................................................................................................................... 7

<ALIGN> command................................................................................................................................................................... 7

<I> Italicize (Emphasis or Citation) command:.................................................................................................................... 8

<B> Bold (Strong) command:.................................................................................................................................................. 8

<UL> Indentation (Blockquote) command:............................................................................................................................ 8

<H1> (Big) command:............................................................................................................................................................... 8

<HR> command:......................................................................................................................................................................... 8

Lists.............................................................................................................................................. 10

Ordered Lists........................................................................................................................................................................... 10

Unordered Lists....................................................................................................................................................................... 10

Directory lists.......................................................................................................................................................................... 11

Definition Lists........................................................................................................................................................................ 11

Hyperlinks................................................................................................................................... 12

Local Links.............................................................................................................................................................................. 12

Absolute Links........................................................................................................................................................................ 12

Bookmark hyperlinks:.......................................................................................................................................................... 12

Mailto: command..................................................................................................................................................................... 13

Embedding Images...................................................................................................................... 14

<IMG SRC> command:........................................................................................................................................................... 14

Hyperlink an Image:............................................................................................................................................................... 14

Tables:......................................................................................................................................... 16

Fixing Column Widths:.......................................................................................................................................................... 18

Setting Table Borders:........................................................................................................................................................... 18

Forms:.......................................................................................................................................... 19

Form Elements......................................................................................................................................................................... 19

Optional attributes are:.......................................................................................................................................................... 20

Form Submission.................................................................................................................................................................... 21

The form-urlencoded Media Type.................................................................................................................................... 21

Example Form Submission:................................................................................................................................................... 21

CGI-BIN...................................................................................................................................... 24

HTML & WEB DESIGN - DAY TWO....................................................................................... X

Image Maps................................................................................................................................. 25

Advanced Formatting.................................................................................................................. 26

Controlling Document Backgrounds.................................................................................................................................. 26

The Bgcolor Attribute............................................................................................................................................................ 26

Text Attributes......................................................................................................................................................................... 26

The Link, Vlink, And Alink Attribute................................................................................................................................ 26

Controlling Individual Text Attributes:.............................................................................................................................. 26

Preventing Line Breaks:....................................................................................................................................................... 27

Multi-Column Text:................................................................................................................................................................ 27

Scrolling:.................................................................................................................................................................................. 27

Margins:................................................................................................................................................................................... 27

Buttons:..................................................................................................................................................................................... 28

Inline Video:............................................................................................................................................................................. 28

Embedded Objects:..................................................................................................................... 28

Frames......................................................................................................................................... 29

NOFRAMES............................................................................................................................... 30

Floating Frames:.......................................................................................................................... 30

META TAGS............................................................................................................................... 31

Abstract..................................................................................................................................................................................... 31

Introduction.............................................................................................................................................................................. 31

The META Tag......................................................................................................................................................................... 31

HTTP-EQUIV........................................................................................................................................................................... 31

NAME........................................................................................................................................................................................ 32

CONTENT................................................................................................................................................................................ 32

Cataloguing an HTML document......................................................................................................................................... 32

Page Transitions..................................................................................................................................................................... 32

Search Engines:...................................................................................................................................................................... 32

Cascading Style Sheets............................................................................................................... 33

The Contents of a Style Sheet............................................................................................................................................... 33

Linking a Style Sheet to a Page........................................................................................................................................... 33

To link a page to an external style sheet............................................................................................................................. 33

Cascading Style Sheets Tip:................................................................................................................................................. 34

Inline Video:................................................................................................................................ 34

Embedded Objects:..................................................................................................................... 34

Cookies........................................................................................................................................ 35

What is XML?............................................................................................................................. 37

Introduction to DHTML............................................................................................................. 38

JAVA AND JAVASCRIPT........................................................................................................ 39

What is needed?...................................................................................................................................................................... 39

Flash - Introduction..................................................................................................................... 40

Shockwave - Introduction............................................................................................................ 40

E-Commerce - Introduction......................................................................................................... 41

A Tutorial on E-commerce..................................................................................................................................................... 41

WebMonkey's HTML Cheat Sheet........................................................................................... 41

Legaleese:

This document mentions several HTML viewers and companies by name, this is not intended as an endorsement of any company or product. All trademarks are recognized as belonging to their respective owners.

Introduction

Publishing information electronically requires some medium to present the information to the reader. A graphics viewer is used to access pictures, Example. An HTML viewer (or web browser as they are commonly known) is a program which presents electronic documents, in HTML format, to the reader.

The hypertext Mark-up Language (HTML) is a simple data format used to create formatted electronic documents with hyperlinks to other documents and resources (this hyper linking to other documents is known as hypertext) that are portable from one computer platform to another. That is, an HTML document created on a PC may also be read by a user of a UNIX machine or an Atari, Macintosh and so on. The term "mark-up" is a printing expression describing the process of putting together words and picture to form a document. HTML, is used electronically to put together words (text) and pictures (images) into a finished presentation document. Recent innovations mean that video clips and

sound can also be added, making HTML a full multimedia publishing medium.

You will probably be familiar with the idea of formatted documents, these are produced by word processors. A formatted document has a variation in its appearance. It looks pretty. Where as an unformatted document has all the text in one style. Links to other documents and resources may be a newer idea for you.

A standard formatted document simply conveys information, and may suggest other sources of information to the reader. A hypertext document does the same, but where a suggestion of other information is made a provision is made for the reader to click the mouse button or press a keyboard button and the program being used to view the hypertext document will load and display the linked document.

Example, this is a formatted text document that you are reading. If I wish to refer you to another document, titled "order.doc" to view that document you need to select the file option from your viewer software, and open the named file. With a hypertext document, you could simply point the mouse to the words "order.doc" which would be displayed in a different color, and click the mouse button to ask the viewer software to load and display the document. Of course as the author of the document, I would have to include some instruction to the viewer software that would enable you to do that. These instructions form part of the HTML language. They are called "hyperlinks" and provide a path to other documents or resources, called Uniform Resource Locations, or URLs for short.

HTML documents are viewed with an HTML viewer, or "web browser" as they are starting to be known in PC circles. The most common HTML viewers used by PC users are Microsoft's Internet Explorer and Netscape's Navigator. But there are others. Mosaic, by NCSA is available in a number of custom Internet packages including Quarter-deck's Internet connectivity package and is perhaps the next most widely used. What is less well known is that all HTML viewers present HTML documents slightly differently. Although HTML is specified, HTML viewers do not pay too much attention to the official specifications and manufacturers have added support (both documented and not!) for a variety of additional features and commands including built-in Java compilers to understand Java code and support for Frames.

If you are publishing your document for a known audience, you should know which HTML viewer will be used to access the document, and you should be aware of the facilities supported by that viewer. When publishing for the World Wide Web you should remember that your audience is comprised of millions of people, with dozens of different HTML viewers, which whilst supporting basic features, have many discrepancies in their support of advanced features. Some may not even have the ability to display images. So while this e-text describes and illustrates many features found only in one or two HTML viewers, it should not be viewed as a recommendation to use these features for general HTML publishing.

Basic Concepts

As with any aspect of computing, HTML introduces some new concepts and jargon. It is necessary to be familiar with these basic terms in order to understand the rest of this document.

Tags:

Tags provide instructions to an HTML viewer about elements such as headings, paragraphs, lists, character highlighting, and hyperlinks. Most HTML elements are identified in a document as a start-tag followed by an end tag. The start-tag provides the HTML viewer with the element name and attributes, followed by the content. The end-tag

tells the HTML viewer about the end of the element. Start-tags are delimited by `<'and `>'; end tags are delimited by `</' and `>'.

Example:

<H1>This is a Heading</H1>

In the above example the start-tag is <H1> and the end-tag is </H1>

Comments:

To include comments in an HTML document, use a comment declaration. The entire comment declaration is ignored.

Example:

<!-- This is a multiple-line

comment -->

Head:

The head of an HTML document, defined by the start-tag <HEAD> and delimited by the end-tag </HEAD>, is where heading information about the document goes. The heading information is an unordered collection of information about the document, such as the title of the document.

Example:

<HEAD>

<TITLE>Document Title</TITLE>

</HEAD>

This example declares the document title to the HTML viewer as "Document Title".

The title element contains your document title and identifies its content in a global context. The title is displayed somewhere on the HTML viewer window (usually at the top), but not within the document area. The title is also used for book marking and during a WAIS search of a server and should be less than 64 characters long.

Title:

Every HTML document must contain a TITLE element. The title should identify the contents of the document in a global context. A short title, such as "Introduction" may be meaningless out of context. A title such as "Introduction to HTML Elements" is more appropriate. An HTML viewer may display the title of a document in a history list or as a label for the window displaying the document.

Example:

<TITLE>Put something descriptive in the Title area</TITLE>

Body:

The BODY section of an HTML document is where the text to be displayed is placed. This is the largest section of an HTML document, and is defined by the start-tag <BODY> and terminated by the end-tag </BODY>

Example:

<BODY>

This is displayed in the HTML viewer text window

</BODY>

Headings:

Headings are generally displayed in a larger type-face (or font) than the main text. HTML provides two systems for declaring a heading.

The old system, which is recognized by all HTML viewers, supports six sizes of text declared by the start-tags <H1>, <H2>, <H3>, <H4>, <H5> and <H6>, each of which has a corresponding end-tag such as </H1>, </H2> and so on. The text sizes range from <H1> the biggest, through <H3> the default size to <H6> the smallest.

Example:

<H1>This is a large heading</H1>

<H3>This is in the normal default size</H3>

<H6>This is very small!</H6>

Paragraphs:

Unlike most word processors, HTML viewers ignore carriage returns, and additionally multiple spaces are reduced to a single space. The paragraph command (<P> and </P>) tells the HTML viewer that the text contained within the start-tag and end-tag is a paragraph. Paragraphs are displayed by the HTML viewer separated by a single blank line from the preceding items.

Example:

<P>

This is a paragraph.

This second line is actually displayed by an HTML viewer on the same line as the previous line, as the carriage return is ignored.

</P>

<P>

This second paragraph is displayed with a single blank line between it and the previous paragraph.

</P>

This results in the following to be displayed by an HTML viewer:

This is a paragraph. This second line is actually displayed by an HTML viewer on the same line as the previous line, as the carriage return is ignored. This second paragraph is displayed with a single blank line between it and the previous paragraph.

Alignment:

Text and images may be aligned to the left, to the right, centered or justified.

Lists:

A list is simply a list of items. The HTML viewer automatically starts each list item on a new line, and handles list numbering and bulleting depending upon how the HTML author has declared the list.

Hyperlinks:

Hyperlinks are a provision allowing the user of the HTML document to navigate through the document and to external resources. Hyperlinks may be local, allowing navigation within the currently loaded document, or external providing access to other documents not loaded and resources such as ftp servers and mail servers. These generally come in blue text and underlined

A Basic HTML Document

A simple HTML document is comprised of the following components:

NOTE: Use lower case whenever possible, the examples are upper case for emphasis.

<HTML> A HTML declaration tag,

<HEAD> A heading tag,

<TITLE> A title, such as within the Head.

<BODY> A body declaration tag:

The main body of the document - this is what the people browsing will see.

A body termination tag </BODY> and finally an HTML termination tag: </HTML>

Example:

<HTML>

<HEAD>

<TITLE>Example HTML Document</TITLE>

<BODY>

This is an example HTML document.

</BODY>

</HTML>

Adding Headings:

Headings can be added to an HTML document with the heading tags in the BODY section;

<H1> through <H6>.

Example:

<HTML>

<HEAD>

<TITLE>Example HTML Document</TITLE>

<BODY>

<H1>Main Heading</H1>

<P>

This is an example HTML document.

</P>

</BODY>

<P> Paragraph command

Notice the use of the paragraph start-tag <P> and end-tag </P> which tells the HTML viewer to display the text as a new paragraph, and not as a continuation of the heading line.

Simple Formatting

HTML viewers do not recognize carriage-returns in the text. Instead, they display the text as continuous lines, breaking each line at a word end so that it fits in the text window. This is known as word-wrap. You can force a line break with the HTML tag <BR>.

<BR> Line Break command

Example:

This is line one<BR>This is line two

Which displays as:

This is line one

This is line two

<Center> command

Centering a line of text is also easy. The HTML tag <CENTER> causes all subsequent text and images to be displayed in the centre of the text window until a </CENTER> end-tag is reached.

Example:

<H1>Main Heading</H1>

<P>

This is an example HTML document.

</CENTER>

If you just want to center a single heading, you can use the "align=" command within the heading tag, Example: <H1 align=center>

The example HTML document would then look like this:

<H1 align=center>Main Heading</H1>

<P>

This is an example HTML document.

<ALIGN> command

The ALIGN= command may also be added to the paragraph tag, <P> to align an entire paragraph, Example:

<P ALIGN=CENTER>In addition to defining the size of the typeface used to display text (heading), HTML also supports bold, italic, strikethrough, underline, subscript and superscript formats. The following example illustrates the popular formatting tags:

<H1 align=center>Main Heading</H1>

<P>

Paragraphs are contained within a <P> and </P> tag pair, although the end-tag </P> is not needed if another paragraph starts with a <P> start-tag. Paragraphs may be aligned, with the "align=" command,

Example:

A standard paragraph

<P>

Left aligned paragraph

Center aligned paragraph

Right aligned paragraph

<I> Italicize (Emphasis or Citation) command:

Text defined as italic. An Italic address is declared by the tag pair <I > and </I >,

Example:

<I>

This text will normally be displayed in italic.

</I>

<B> Bold (Strong) command:

Strong text is declared by the tag pair <B> and </B> and is usually displayed in bold.

<UL> Indentation (Blockquote) command:

Text defined as a UL or "Blockquote" for older browsers is displayed as a new paragraph, and usually displayed indented from the left margin, and with some HTML viewers in a unique typeface. A UL is declared by the tag pair: <UL> and </UL>, remember it's not the <I> command - that's italicize!

Example:

<UL>

This section will normally be displayed indented.

</UL>

<CODE> Source Code command:

Source code is declared by the tag pair <CODE> and </CODE> and is usually displayed in a fixed width font, though this may be changed by the user of the HTML viewer. Generally used to show how the coding is done and not having the browser actually do it.

<H1> (Big) command:

Big text is declared by the tag pair <H#> and </H#> and is usually displayed larger than the ordinary text and has up to 6 sizes.

Dividers

HTML provides three basic ways of dividing a document window: Paragraphs, Line Breaks, and Horizontal Rules.

Line breaks are enforced with the <BR> tag. When an HTML viewer encounters the <BR> tag, the cursor is moved down one line and to the left of the window. If an alignment is in operation, the next displayed line will be aligned correctly.

<HR> command:

Horizontal rules are affected with the <HR> tag. This tells the HTML viewer to display a graphical horizontal line across the entire width of the window. The form of the rule can be amended with the optional "size=", "width=", "noshade" and "align=" parameters.

The vertical thickness of the horizontal rule can be defined by adding a size= parameter to the <HR> tag. The number following the size= parameter tells the HTML viewer how many vertical pixel lines to use for the rule.

Example:

By default, a horizontal rule extends the entire width of the window. The width= parameter may be used to specify the horizontal width of the rule either in pixels, or as a percentage of the window width:

<HR width=100> or <HR width=50%> <- this one is preferable

Horizontal rules are usually aligned in the center of the window, or if an alignment is in force, they follow the rules of the current alignment. This may be overridden by the align= parameter,

Example:

Finally, horizontal rules are displayed in a 3d representation. This can be changed to a solid thick 2 dimensional line with the noshade parameter:

As usual, these parameters can be mixed together,

Example:

Lists

HTML supports a number of types of list: Ordered, Unordered, Definition, Menu and Directory.

Ordered lists are displayed one item per line, with a sequential numbering system to the left of each item. An ordered list is declared by the start-tag <OL> and terminated with the end-tag </OL>. Individual items are declared with the tag <LI>.

Ordered Lists

Example:

<OL>

<LI> Item one

<LI> Item two

<LI> Item three

</OL>

Which is displayed by an HTML viewer as:

1. Item one

2. Item two

3. Item three

The numbering system may be amended with the optional TYPE= command.

The valid types are A,a,I,i, giving the following displays:

Example:

Capital A <OL TYPE="A">

A. Item one

B. Item two

C. Item three

Small A <OL TYPE="a">

a. Item one

b. Item two

c. Item three

Numbered Lists <OL TYPE="1">

1. Item One

2. Item Two

3. Item Three

Roman Capital <OL TYPE="I">

I. Item one

II. Item two

III. Item three

Roman Small <OL TYPE="i">

i. Item one

ii. Item two

iii. Item three

The starting number may be defined by adding a START= command to the ordered list declaration,

Example:

Which then produces the following display:

100. Item one

101. Item two

102. Item three

The numbering order may be further amended during the list by adding a VALUE= command to a list item declaration,

Example:

<LI> Item one

<LI VALUE=500> Item two

<LI> Item three

</OL>

Which produces the following display:

100. Item one

500. Item two

501. Item three

Unordered Lists

An unordered list is displayed without numbering, but with bullets,

Example:

<UL>

<LI> Item one

<LI> Item two

<LI> Item three

</UL>

Which is displayed by an HTML viewer as:

· Item one

· Item two

· Item three

Some HTML viewers allow the bullet style to be redefined with a TYPE=command, accepting the values DISC, CIRCLE and SQUARE,

Example:

<LI> Item one

<LI> Item two

<LI> Item three

</UL>

Directory lists

Directory lists are specified by the <DIR> element, are similar to unordered lists. They represent a list of short items, typically up to 20 characters each. Items in a directory list may be arranged in columns, typically 24 characters wide, but may not be nested (unlike

other lists). Some HTML viewers will further display directory lists in a different font to other lists.

Definition Lists

Definition lists are used for listing terms and their definitions. A definition list is declared with the start-tag <DL>, and rather than using the list item tag <LI>, it uses a pair of tags, data-term and data-definition, <DT> and <DD> respectively. The data-definition is

displayed indented from the preceding data-term.

Example:

<DL>

<DT>Definition one

<DD> Description of definition one which can wrap around to more than one line

<DT>Definition two

<DD> Description two which can wrap around<BR>to more than one line

<DT>Definition three

<DD> Description of definition three

</DL>

Which is displayed by an HTML viewer as:

Definition one

Description of definition one which can wrap around to more than one line

Definition two

Description of definition two which can also wrap around to more than one line

Definition three

Description of definition three

Hyperlinks

Hyperlinks enable the user of an HTML document to navigate through the currently loaded document (using local hyperlinks) and to external resources.

All hyperlinks are defined in the HTML source code by anchors. An anchor is the following HTML code: <A..>. There are local links and absolute links.

Local Links

A local link is one that will bring the person to another page on your website.

Example:

<A HREF="page2.html">Click Here For Page Two</A>

Absolute Links

An absolute link is one that will take the person to another website.

Example:

<A HREF="http://tom.mclaughlin.net>Click Here for Tom's Website</A>

An image could be used instead of the text, by replacing the hyperlink display text with an inline image command,

Example:

Bookmark hyperlinks:

Local hyperlinks, known as "Fragment Identifiers", are defined in a hypertext address by a # character following the resource. If navigation is required within the local document, the resource may be omitted so that a local hyperlink may look like:

<A HREF="#introduction">Introduction</A>

Selecting this hyperlink will cause the HTML viewer to search the current document for a declaration of "introduction". This declaration is achieved with the anchor name tag <A NAME=>, like this:

Notice that the <A NAME=> tag does not have an end-tag, and is case insensitive. It doesn't matter if the anchor name is declared as "INTRODUCTION" or "Introduction" or even "introDuction" it will still be found by a hyperlink to "#introduction". Local hyperlinks can be added to hyperlinks to external documents to force the HTML viewer to load an external document and then navigate straight to a desired section within that document.

Example:

This will create a hyperlink to the anchor "section_3" within the HTML doc