Contents
HTML Basics

In this chapter, you learn the basic concepts and tags of HTML.

Introduction to HTML

Using Basic HTML Tags

Using Advanced HTML Tags


Introduction to HTML

What is HTML?

Reading an HTML File

Structure of an HTML Document


What is HTML?

HTML, or HyperText Markup Language, is used as a standard language for creating Web pages.  Because HTML is browser independent, after you create your Web page, people are able to access it regardless of the browser they are using.  For those of you who are familiar with programming, HTML may seem like an extremely simplified programming language.


Reading an HTML File

You can open an HTML file (normally designated by a .htm extension) in any text editor because it is in plain (ASCII) text format.  What you see upon opening an HTML may be confusing at first:

HTML file

However, once you understand what the <'s and >'s mean, using HTML becomes second nature.  HTML uses tags to tell a browser the structure of the text, or how the text should look, on the screen.  Anything beginning with a < and ending with a > is considered a tag.  For example, everything between the <HEAD> and </HEAD> tags tells the browser that the text is part of the document's head.

	Not all tags are supported by all browsers.  If a browser doesn't recognize a tag, don't worry--the browser simply ignores the tag.
Any tag with a / following the < is called an ending tag which signifies the ending of a particular code.  In the case of the header mentioned above, if we hadn't put in the </H1> tag, everything after the <H1> would have been considered a header.  Most tags need a corresponding ending tag.  The exceptions are mentioned as they come up.

	In the above example, tags are placed on different lines.  You probably want to follow a similar design structure despite the fact that HTML is not line sensitive.  Putting line breaks in helps to make your document more readable.
	HTML tags are not case sensitive.


Structure of an HTML Document

There are two elements that define an HTML document's structure:  the header and the body.  For every page you create, you must have a header (where information for browsers is kept) and will probably want a body (where all of your text is placed).

Header

Nothing typed as part of the header actually appears when the Web user calls up your page.  The information here is used mainly by the browser to clarify properties of the document such as titles, links, and the base URL (Universal Resource Locator) of the document.  The most important item a beginning user needs to enter here is the <Title>, which consists of a short phrase describing the document.  Again, this title doesn't appear on your Web page, but is used for document identification.

Body

These elements tell the browser how to display text within the document.  In the body, you enter all of the text and special options (such as links and graphics) to make your Web page into something both exciting and useful.  The body consists of not only what a Web user sees on your Web page, but also the tags that create the look of your page.  Click here to learn the basics about tags that open up an amazingly creative world to the experienced and novice HTML user alike!  Click here to learn about more advanced tags.


Using Basic HTML Tags

The tags in this section are the ones you probably see and use most frequently.  The given explanation about how to use the tags is designed to be editor independent.  WebDesigner has shortcuts for creating a Web page.  If you have never created a Web page before, keep in mind that this chapter is more of a reference section, and you might want to first read the chapter mentioned above.

Here are some basic HTML tags:

Body Designator

Title Designator

Head Designator

Headings

HTML Designator

Paragraphs

Hyperlinks

In-line Images


Body Designator

To specify which area of your file is the body, put the <Body> tag immediately before the body (which is usually right after the </Head> tag).  To specify the end of the body section, use the </Body> tag.


Title Designator

To enter a title, go to the header section of a document and type the following:

<Title>SuperWeb Information</Title>

where "SuperWeb Information" is the title of the document.  Be sure to use the ending tag of </Title> or the rest of your document is considered a title and doesn't appear on your web page!


Head Designator

After the <HTML> tag, use the <Head> tag to specify where the header of your document is located.  Be sure to include the Title tags in this section, and don't forget the </Head> tag at the end of the header section.  Nothing in this section (not even the title text) appears in the document Web users access.  The information in the header section is merely for a browser's use.


Headings

There are up to six levels of headings that go in the body section of your document.  Often your title is the same as your first heading.  Use headings to mark divisions of a document, similar to the way you use a heading when writing a report or a paper.  You might want to use them as chapter titles or to signify a topic change.  They are implemented as follows:

<H1>This is the first heading.</H1>

<H2>This is the second heading.</H2>

.     .     .

<H6>This is the sixth heading.</H6>


HTML Designator

So a browser knows you have an HTML document, put the <HTML> in your document before your header.  The very last tag in your document (usually following the </Body> tag) is then the </HTML> tag.


Paragraphs

HTML depends on tags to determine when to move on to the next paragraph.  Therefore, when you have come to the end of a paragraph in the body section of your document, you must use <P>.  Manual returns are ignored by HTML.  They are used mainly to make the file easy to read for the author.  For example, if you type in the following,

Though I have hit return,

there's no new paragraph until here. <P> Now there is a new paragraph.

you see this as your output:

Though I have hit return, there's no new paragraph until here.

Now there is a new paragraph.


Links (or Anchors)

Links are excellent ways of getting more information to the Web users who want to delve more deeply into the information you have to offer.  At the same time, you won't be bogging down the surface users with too many details.  Often times links are used to provide a more complete definition of a term or to direct Web users to a related topic.  You may create links from text or from images.

Creating Links to Another Web Page

To create a link to another web page, enter the following:

<A HREF="superweb.htm">SuperWeb Information</A>

The <A HREF=   >   </A> is the standard part of the tag.  Between the quotation marks, fill in the file name of the destination web page.  After the first >, enter the text which users click on to jump to the next page.

	Suppose a person wants to know more about SuperWeb.  In the example above, simply clicking on "SuperWeb Information" (which has a dashed line under it) links the interested person to the file superweb.htm.  This HTML file may contain information such as price, hardware requirements, or other product information.
	In the above example, the file superweb.htm was in the same directory as the original document.  If you want to specify a file in a different directory, specify the relative path.  For example, if superweb.htm was in the directory "products," you would instead enter a relative link: <A HREF="products/superweb.htm">SuperWeb Information</A>
Creating Links to a Specific Area on the Same Web Page

If you have a long document, you may want to direct readers from one section to another.  You can do so by creating a named anchor.

1.	Create a named anchor in the location where you want the user to end up.  Instead of <A HREF=, use <A NAME=.  Here's the format for a named anchor:

Here is the <A NAME="Keyword">text I want to go to</A>

where "keyword" is the name you've chosen for the text "I want to go to."

2.	To create the link (where you want to link from), type in the usual link tag, but instead of the file name, type "#keyword":

From here, I <A HREF="#Keyword"> jump </A>

where "keyword" is the reference name you chose in step 1.

3.	When the Web user click on the word "jump," the person is immediately taken to the words "text I want to go to."

Creating Links to a Specific Area on a Different Web Page

The format is the same as above except that the named anchor goes in the document you want to jump to, and the link in the base document has the file name before the #.

1.	For example, in the document you want the web user to end up (let's give it the file name newstuff.htm), enter

Here is the <A NAME="Keyword">text I want to go to</A>

2.	In the document you are jumping from, enter the following:

From here, I <A HREF="newstuff.htm#Keyword"> jump </A>

3.	Now when the Web user clicks on the word "jump," the Web page with the file name newstuff appears, and the cursor is on the words "text I want to go to."


In-line Images

If you want to include in-line images (pictures with text next to them) in your document, you can easily do so using the methods described below.

	Graphics make your page more visually appealing.  However, though at first you might be tempted to fill your page with graphics, remember that some Web users turn the graphics off to make downloading a page faster, and some Web users may not have graphic capabilities.  Therefore, be certain your page looks good with or without graphics!
	Be sure that you have already created a graphic image to insert in your document and saved it to the same directory as your web page.  Many graphical images are created using other tools on your computer and are often saved as .GIF files.  Consult your SuperWeb Master to learn more about creating images and where you might find some already created images.
1.	Once you have the image saved in the same directory as your web page, place the cursor in the location you want the image to appear.

2.	Use the following format to place the image in your document:

<IMG SCR="lkmich.gif" ALT ="Picture of Sunset"> Sunset on Lake Michigan

Between the first set of quote marks, put the URL of the image file.  If the image file is a GIF file, the file name must end with .gif.  If the image file is an X Bitmap (used in the X Windows System), it must end with .XBM.

After the ALT, you can put text you would like to appear in case the browser doesn't support graphics.  If you don't include the ALT, the word IMAGE appears on the screen of the Web user whose browser doesn't support graphics.  The text that appears outside of the > appears next to the image to explain what the Web user is looking at.

Clickable Images

If you create a map file for an image, you can make the image clickable.  When web users view this image through a browser, they can click on many areas of it to bring up different web pages.

	You can create map files by using ImageMaster.  Click here for more information!
Using clickable images involves adding the map file name you want to associate with the image:

<A HREF ="imagemap/choicebx"><IMG SCR = "/choicbx6.gif" ISMAP border = 0></A>

The <A HREF> tag lets you identify the map file to associate with the image.  When you use the SuperWeb Server, you MUST include the imagemap/f_name section, replacing f_name with the name of the map file without the .map extension. In this case, the map file name is choicebx.map.  Imagemap is a backend service included with SuperWeb which allows you have clickable images in your Web pages, so if you dont include it in the <A HREF>, the clickable image wont work.

Aligning In-Line Images

If you decide to use in-line images to make your web page more visually exciting, you might want to take advantage of HTML's alignment options.  By default, text is aligned with the bottom on an image.  However, you may chose to align the text with the TOP or MIDDLE as well.  For example, you can type in the following

<IMG SCR="lkmich.gif" ALIGN=TOP ALT ="Picture of Sunset"> Sunset on Lake Michigan

so that the text aligns with the top of the image.

Using In-Line Images as Anchors

If you want Web users to click on an image instead of text as the hyperlink, you can do so by using an in-line image as the anchor.  If you wanted to tell users more about Lake Michigan, but you wanted them to click on a GIF of the great lake to get the information, you could type the following:

<A HREF="lakemich.htm"> <IMG SCR="lkmich.gif" ALT ="For information about Lake Michigan, click here"></A>

You could also give the user a small image to click on to see the larger image that would take time to download.


Using Advanced HTML Tags

Advanced HTML Tags are elements that are not necessarily hard to understand or implement; they just probably won't be seen or used as often.  Don't be afraid to experiment with new tags--the more creative you are, the more interested others are in your web page!

Here are some advanced HTML tags:

Address Style

BlockQuote Style

Character Formatting

Comments

External Images, Movies and Sound

Form Processing

Horizontal Rule

Line Breaks

Lists

Preformatted Text

Special Characters


Address Style

If you want to include an address, use the <ADDRESS> tag.  Often, authors of pages use this tag to show their email addresses at the end of a document so that the Web users can provide feedback or send requests.  You may also create a link to your home page here.  The format of the address tag is as follows:

<Address><A HREF="http://www.frontiertech.com">Home Page</A>

(Info@FrontierTech.com)</Address>

A link was made to Frontier's home page, followed by the address of where to send comments about SuperWeb.


BlockQuote Style

If you have a block quote you want to put in your web page, you may use the <BlockQuote> tag.  For example, the following quote

<BlockQuote> This is a block quote that I want to set off from the rest of the text because it is so important.<P> No other block quote has ever been as important as this one is!  I can't wait for people to read this block quote.</BlockQuote>

appears as follows:

This is a block quote that I want to set off from the rest of the text because it is so important.

No other block quote has ever been as important as this one is! I can't wait for people to read this block quote.

Most browsers indent text within the <BlockQuote> section.


Character Formatting

There are two ways you can format characters in HTML:  physical, which describes what text looks like (i.e., bold, italics) and logical, which describes the function of text (i.e., variable name, definition).  To use the tags, place the first tag before the text to be formatted and the ending tag after the text.  Here are some of the physical and logical tags:

Physical

<B>  Bold text

<I>  Italicized text

<TT>  Typewriter text (fixed width font)

Logical

<DFN>  The definition of a word

<EM>  Provides emphasis

<CITE>  Indicates a citation such as a book title

<CODE>  For pieces of computer code

<KBD>  For user keyboard entry

<SAMP>  For computer status message

<STRONG>  For strong emphasis

<VAR>  For a variable name where the user is supposed to enter a specific instance for a variable

	Note that the logical styles are displayed differently depending on the browser.  For example, <STRONG> may be bolded text in one browser and italicized text in another.


Comments

At times you may want to include comments in your document simply for your own benefit.  Comments are especially helpful on a page that you do not frequently edit because they can remind you of your logic (for example, why you placed a graphic in the beginning of the body instead of in the middle).  Other important information (such as when the page was last updated) that people editing the file might need can be commented as well.  The tags are <!  -> and are used in this format:

<!-Date:  August 3, 1995->

<!-If this image was in the middle, people wouldn't see the company logo right away->


External Images, Movies and Sound

So that Web users can chose whether or not to display a large image, you may simply refer to it on your web page.  Then they can decide whether or not to download it.  The image then becomes an external image because it's shown in an external viewer.  Creating a link to an external image is easy!  Just enter the same tags that you would if you were referencing a pagesimply use the file name of the image, sound or whatever else you want to jump to:

To see a picture of the Port Washington shore line, click <A HREF "http://www.pictures.com/portwash.gif"> here </A>


Form Processing

Below are listed the tags which can only be used inside of the FORM tag:

The FORM Tag

Simple Text Input

Password Input

Radio Button Input

Combo Box

The Checkbox

The Hidden Box

The Multiple Line Text Box

The Submit Button

The Clear Button


The FORM Tag

In an HTML document:

<FORM ACTION="/formtest" METHOD="POST">

This tag along with the </FORM> tag surrounds all of the form controls.

ACTION:  Set this equal to the backend service to which the form sends the retrieved information.

METHOD is set equal to POST or GET.

POST should be used as much as possible.  If the GET method is used by a form returning many variables, long URLs are returned and data could be lost or the Server could crash.


Simple Text Input

If you want a web user to enter any simple text consisting of only a short string on a form, you can use simple text input.

In an HTML document, the tags looks like this:

<INPUT SIZE=25 NAME="username">

In a browser a simple input text box looks like this:

This INPUT tag provides an input field in the form.  This field can be set with the following parameters:

TYPE:  Defaults to TEXT if not given.  Other types are discussed below.

NAME:  The name portion of the name=value pair

MAXLENGTH:  An integer specifying the maximum number of characters the input accepts.

SIZE:  The size, in characters, of the displayed input box.

VALUE:  The initial value displayed in the input box.


Password Input

If you want a Web user to enter a password on a form, you can do so using the password input tags.

In an HTML document, the tags look like this:

<INPUT SIZE=10 TYPE=PASSWORD MAXLENGTH=9>

In a browser, the password input box looks like this:

This type of input displays each entered character as an asterisk and hide the real character from prying eyes.  The parameters are the same as for simple text input.


Radio Button Input

If you want a user to choose from a list on a form by simply clicking on a circle, known as a radio button, you can use the radio button input tags.

In an HTML document, the tags look like this:

<INPUT TYPE=RADIO NAME="sex" VALUE="Female">Female

<INPUT TYPE=RADIO NAME="sex" VALUE="Male">Male

<INPUT TYPE=RADIO NAME="sex" VALUE="NeverMind" CHECKED>None of Your Business

In a browser, the radio buttons look like this:

This input displays a group of options, only one of which may be selected.

VALUE:  Set this equal to the value you want the name to equal when that button is selected.

CHECKED:  You may include this parameter to indicate which option should be initially selected.


Combo Box

If you want the user to choose an option from a drop-down list on a form, you can use combo box, or selection box, tags.

In an HTML document, the tags look like this:

<SELECT NAME="color">

<OPTION SELECTED>RED

<OPTION>Green

<OPTION>Yellow

</SELECT>

In a browser, the combo box looks like this,

an input box with a drop-down menu.  The initial value in the box is which ever OPTION has a SELECTED parameter.  The drop-down box contains all the other values.

SELECT:  Accepts NAME, SIZE and MUTIPLE as parameters.

MULTIPLE:  Allows many items to be displayed at once in the initial box.

OPTION:  Accepts SELECTED and VALUE as parameters.

VALUE:  Sets the value to return if the option is selected.  The value defaults to whatever follows the OPTION tag if no VALUE is specified.


The Checkbox

If you want Web users to simply check a box depending on their response to a 2 option question on a form, use a checkbox.  For example, you may have a yes or no question to which you want people to respond.

In an HTML document, the checkbox tags look like this:

<INPUT TYPE=CHECKBOX NAME="check" Value="Yes">

In a browser, the checkbox looks like this:

This box is useful for obtaining "one or the other" information.

VALUE:  Set the value to be returned if the box is checked.  For example, instead of returning the default value "on" if the box is checked and "off" if the box isn't checked, you could return "yes" if the box is checked and "no" if it isn't.

CHECKED:  Displays the box as initially checked.  Here's how you would add the parameter:

<INPUT TYPE=CHECKBOX NAME="check" Value="Yes" CHECKED>


The Hidden Box

If you want to include information in your form that people don't actually see, you can use a hidden box.

In an HTML document, the tags look like this:

<INPUT TYPE=HIDDEN NAME="something" VALUE="on">

In a browser, a hidden box looks like this:

(There's not supposed to be anything here!)

A hidden box doesn't display a button or text area.  Instead, it is useful for passing information along to another CGI program or invocation of the same CGI program.


The Multiple Line Text Box

If you want to obtain a longer response from a Web user than a simple text input box allows, you can use a multiple line text box.

In an HTML document, the tags look like this:

<TEXTAREA NAME="comments" ROWS=5 COLS=40>Any Comments?</TEXTAREA>

In a browser, the multiple line text box looks like this:

The box displayed is of a specified height and width and accepts text as a normal text box would.


The Submit Button

When Web users are done filling out your form, they need to click a submit button so the information gets back to the SuperWeb Server.  You can easily create a submit button!

In an HTML document, the tags look like this:

<INPUT TYPE=SUBMIT VALUE="Submit Information">

<INPUT TYPE=IMAGE SRC="/image/submit.gif">

In a browser, the submit button looks like this:

This produces a button that, when pressed, submits all the values you have entered.

SUBMIT:  Places the text of VALUE on the button.

IMAGE:  Places the image specified in SRC on the button.


The Clear Button

Your Web users may decide that they want to clear the screen of the information they have already entered on a form.  So they don't have to delete each field, you can provide a Clear button to allow them to clear all of their input at once.

In an HTML document, the tags look like this:

<INPUT TYPE=RESET VALUE="Clear All Entries">

In a browser, the Clear button looks like this:

This produces a button with the string specified in VALUE on it.  Upon pressing this button, all entries are cleared from the controls on the form.

This information along with the CGI information presented previously in this document is enough to start creating some very powerful backend services for SuperWeb Server!  Have fun!!


Sample HTML Form Page

Here is an example of an HTML document which uses many of the form options available to the author of a web document:

<HTML><TITLE>Forms and You!</TITLE>

<BODY><H2>Forms and You!</H2></TITLE>

Here are some example form controls available for your use:

<FORM ACTION="/formtest" METHOD="POST">

<PRE>

Please Enter Your Name:  <INPUT SIZE=25 NAME="username">

Please Enter Password:  <INPUT SIZE=10 TYPE=PASSWORD MAXLENGTH=9>

Sex:  <INPUT TYPE=RADIO NAME="sex" VALUE="Female">Female

      <INPUT TYPE=RADIO NAME="sex" VALUE="Male">Male

      <INPUT TYPE=RADIO NAME="sex" VALUE="NeverMind">None of Your Business

<SELECT NAME="color">

<OPTION SELECTED>Red

<OPTION VALUE="Green">Green

<OPTION VALUE="Yellow">Yellow

</SELECT>

Do You Like This Checkbox? <INPUT TYPE=CHECKBOX NAME="check" Value="Yes">

Following is a Hidden control for returning a value

<INPUT TYPE=HIDDEN NAME="something" VALUE="on">

<TEXTAREA NAME="comments" ROWS=5 COLS=40>Any Comments?</TEXTAREA>

<INPUT TYPE=SUBMIT VALUE="Submit Information">

<INPUT TYPE=RESET VALUE="Clear All Entries">

<INPUT TYPE=IMAGE SRC="/image/submit.gif">

</PRE>

</FORM>

</BODY></HTML>


Horizontal Rule

Using the <HR> tag (no ending tag is needed ) places a solid line across the browser window.  No ending tag is needed.


Line Breaks

If you want to insert a line break with no extra space between lines (most browsers put an extra line of space after the <P> tag), use the tag <BR>.  Like <P>, no </BR> is needed.  For example,

Putting in a line break here <BR> moves you to the next line.

looks like this:

Putting in a line break here

moves you to the next line.


Lists

There are many kinds of lists you might want to create on your web page.  Here are some of the types you can create using HTML:

Definition lists

Definition lists are used when you want to list short terms along with their definitions.  Normally the definition appears indented on a browser.

1.	Put in a <DL> tag (a definition list tag).

2.	Put a <DT> tag in front of each term you want to define.

3.	Type in the term.

4.	Put a <DD> tag in front of each definition.

5.	Place a </DL> tag (a definition list ending tag) at the end of your definition list.  For example,

<DL>

<DT>First Definition

<DD>This is the first term I want to define.

<DT>Second Definition

<DD>This is the second term I want to define.

</DL>

might look like this:

First Definition

This is the first term I want to define.

Second Definition

This is the second term I want to define.

	You may use multiple <P> tags, lists, or other definition information within the <DT> or <DD> tags.  You can use all formatting tags except headings.
Unnumbered lists

1.	Put in a <UL> tag (an open list tag).

2.	For each item on the list, put a <LI> tag in front of it.  No corresponding </LI> is needed.

3.	End with a </UL> tag.  For example,

<UL>

<LI> first item

<LI> second item

</UL>

looks like:

•	first item

•	second item

	If you want to put multiple paragraphs in the list, simply use the <P> tag.
Numbered (Ordered) lists

1.	Follow the same format as the unnumbered lists, except use <OL> and </OL> tags.  For example,

<OL>

<LI> first item

<LI> second item

</OL>

looks like:

1.	first item

2.	second item

	You can nest an ordered list in an unordered list and vice versa.


Preformatted Text

Because HTML ignores formatting such as multiple spaces (it combines them into one space) or hard returns (it ignores them completely), you might want to preformat text using the <PRE> tag.  With this tag, you may display text in the exact manner you want it to appear.  For example, if you typed the following text:

<PRE>

If you       want to display       multiple

spaces and line breaks where

there usually

aren't any, use the preformatting tag.

</PRE>

it would be displayed as follows:

If you       want to display       multiple

spaces and line breaks where

there usually

aren't any, use the preformatting tag.

You may use links within the <PRE> tag sections, but try to avoid using other tags.


Special Characters

There are four reserved characters (<, >, ", and &) in HTML that you can't type in your document as regular text.  Instead, you must enter the escape sequences so they are seen the way you want them to be.  When you want to use the characters on the left, enter the sequence on the right:

<	&#lt

>	&#rt

"	&#quot

&	&#amp

	HTML extensions are constantly being added by Web/Internet vendors.  Frontier Technologies supports the inclusion of these new HTML tags in both the Raw and HTML Edit modes.  Actual support for viewing or listening at the web user's end depends on the extensions the user's browser supports.