Copyright: Helpfile Generated by VB HelpWriter!


Contents

Anchors Aweigh!

An Introduction To HTML

Introduction to HTML

Lesson 1: HTML Basics

Lesson 2: Finish What You've Started

Lesson3: Line breaks and the Run-On Sentence

Lesson 4: What was that Called Anyway? (Titles and Headings)

Lesson 5: Picture This... (Adding Graphics)

Lesson 6: The Missing Links

Testing Your Page

I Have a Page Made, How Do I Get it on the WWW?

Useful Links

Summation

Glossary

Copyright © 1996 Steven T. Fricke

Helpfile generated by VB HelpWriter.


Introduction
Introduction to HTML

How do you make a WWW Page? HTML De-mystified

"What do you mean I have to learn a computer language to make a Home Page?!?!?!" That is a question I have been asked many, many times. It does sound intimidating, doesn't it? "HTML: Hyper Text Markup Language." Boy! Whoever came up with that term described making a World Wide Web so hard only a person that studied computers for years could make this up.

HTML should not intimidate anyone. The simple fact to the matter is, if you have something you want to say and you can type, you can write good HTML. In it's purest form, HTML is really nothing more than the words you would like to present; and a few symbols that tell a computer how to display that text. These symbols are called tags.

I could go into a long drawn out explanation about the origins of HTML or the Internet or an in-depth discussion revolving around the significance of each and every part of HTML, but that is not really what this whole tutorial is about. This tutorial is designed to introduce you to HTML and give you the information you need to get up and running. Once you have started using HTML well, use the included references files and demo pages or "hit the 'net". There is so much information out there on the Internet for developing good HTML that is it difficult to point to any one source as being the best.

There are several ways to view an HTML document. One is with a text editor like "Notepad" or "Anchors Away!". Another other way to view it is with an HTML viewer or browser. The most popular browsers are Netscape and Mosaic, although there are many others available. Browsers display your HTML the way you want it seen, with pretty pictures and colorful text.

One last point to make about HTML is that it is an evolving language. As time goes by, new standards will be set, new tags added and new technology will be introduced.

Helpfile generated by VB HelpWriter.


Lesson 1: HTML Basics
HTML Basics

Lesson 1

While using this document, you will see words that have a solid underline, and words that have dashed underlines. The words that have dashed underlines are words you can click on to get a definition. The words with solid underlines are links to other parts of this document.

In it's simplest form, HTML is nothing more than some text and codes (called tags) which tells a Hyper Text viewer (browser) how to display that text. These codes are typed in just like the rest of the text, but they are contained in brackets which tell the browser that it is a code, not text. In the example below, a very short, yet complete, document is displayed with all the codes included. Start a new document and enter this example into the document.

<HTML>

<BODY>

Hello World!

</BODY>

</HTML>

Anything between the < > brackets will not be displayed by a WWW browser. That is the tag that gives the display instructions to the browser. The tag can be in upper case or lower case. For the remainder of this tutorial, the upper case will be used. This does not hold true for entering an URL. These are case sensitive, so be sure to enter them exactly.

In the above example:

<HTML> tells a browser that what it is about to display is an HTML document.

<BODY> tells a browser that this is where the actual document begins.

"Hello World" is what you will actually see with the browser.

</BODY> tells the browser the body of the document is over.

</HTML> tells the browser the HTML document is done.

Save you file with the name "TUTOR.HTM". You have now created an HTML document... also called a World Wide Web Page!

Helpfile generated by VB HelpWriter.


Lesson 2: Finish What You Started
Finish What You Started

Lesson 2

Many of the tags used in HTML are tags which have a beginning and an ending. In these cases, the only difference between the beginning tag and the ending tag is a slash. In this example the <HTML> is a starting tag, and </HTML> is an ending tag.

Two very popular tags are italics and bold text. To start text displayed in italics, use the <I> tag, to end the italics, use the </I> tag.

To start text as bold use <B> tag, to end bold text use the </B> tag. You can also combine and overlap tags.

Whatever you start, be sure to finish. If you do not, the rest of your document will appear your first format. The tags that do not require a closing tag usually are line and paragraph  breaks.

Now add the following lines immediately under "Hello World!" in your document:

<I>I would like to show you italic text.</I>

<B>I would like to show you bold text.</B>

<B><I>I would like to show you bold italic text.</I><B>

Your document should now look like this:

<HTML>

<BODY>

Hello World!

<I>I would like to show you italic text.</I>

<B>I would like to show you bold text.</B>

<B><I>I would like to show you bold italic text.</I><B>

</BODY>

</HTML>

Save your file.

Helpfile generated by VB HelpWriter.


Lesson 3: Line Breaks
Line Breaks and the Run-On Sentence

Lesson 3

If your document were viewed using a browser, all the text would run together on the same line. This is because there are no line breaks. Line breaks tell a browser where to end a line and start a new one. Line breaks are usually done in one of three ways:

<P> begins a paragraph, </P> ends the paragraph.

<BR> is a line break

<HR> puts a line across the screen

In the next section, the paragraph tags have have been added before and after the paragraph, and the <BR> line breaks are used to seperate the lines. Markup your file to add the <P> tag under "Hello World!", add the <BR> tag to the end of the text lines, and the </P> tag under all the text lines. <HR> enters a horzontal rule (a line) into your document.Your document should look the same as below.

<HTML>

<BODY>

Hello World!<BR>

<HR>

<P>

<I>I would like to show you italic text.</I><BR>

<B>I would like to show you bold text.</B><BR>

<B><I>I would like to show you bold italic text.</I><B><BR>

</P>

</BODY>

</HTML>

Save your file.

Helpfile generated by VB HelpWriter.


Lesson 4: Titles and Heads
What Was That Called, Anyway?

Lesson 4

Like any good book, an HTML document should have a title. This is done using the <TITLE> tag, (and of course the </TITLE> ending tag).

To declare the head of your document, use the tag <HEAD> and </HEAD> tag.

Page names can be displayed using the <Hx> and </Hx> tag; x being a number from 1 to 6, 1 being the largest.

Add the <TITLE> and <HEAD> tags to your document as displayed below.

<HTML>

<HEAD><TITLE>My Hello World Page</TITLE></HEAD>

<BODY>

<H1>My Hello World Page</H1>

Hello World!<BR>

<HR>

<P>

<I>I would like to show you italic text</I>

<B>I would like to show you bold text</B>

<B><I>I would like to show you bold italic text</I><B>

</BODY>

</HTML>

Save your file.

Helpfile generated by VB HelpWriter.


Lesson 5: Picture This...
Picture This...

Lesson 5

Adding graphics to your page can make it much more attractive. To do this, use the <IMG SRC=xxx> tag, where the xxx is the file to be displayed. If we wanted to display the CLICKME.JPG file, then the tag would be:

<IMG SRC="CLICKME.JPG>

This file would then need to be uploaded to the same area as the HTML document. You can use graphics from oother places by calling out their URL. While it is possible to call someone else's graphic, it may may not be the best idea for several reasons:

 They may delete it without notification

 It adds undo strain on thier bandwidth

 It may slow down the loading of you document.

Add the code <IMG SRC="CLICKME.JPG><BR> (that is the image call and a line break) under the Hello World! line.

Your document shuld now look like below:

<HTML>

<HEAD><TITLE>My Hello World Page</TITLE></HEAD>

<BODY>

<H1>My Hello World Page</H1>

Hello World!<BR>

<HR>

<IMG SRC="CLICKME.JPG"><BR>

<P>

<I>I would like to show you italic text</I>

<B>I would like to show you bold text</B>

<B><I>I would like to show you bold italic text</I><B>

nowhere</A>

</BODY>

</HTML>

Save your file.

Helpfile generated by VB HelpWriter.


Lesson 6: The Missing Links
The Missing Links

Lesson 6

The last of the primary tags covered is the Anchor. This calls up another document or anchor name. This is done using an <A> tag with the attirbute to be called, usually an URL, between the A and the > bracket, then the </A> to end the anchor. You should then include descriptive text to the anchor before the </A> tag. If you wanted to link the URL: http://www.nowhere.com/index.html, then the tag would be:

<A HREF="http://www.nowhere.com/index.html">This is a link to nowhere.</A>

Directly under the bold/italic line, enter the line:

<A HREF="http://www.nowhere.com/index.html">This is a link to nowhere.</A>

Your document should now look like this:

<HTML>

<HEAD><TITLE>My Hello World Page</TITLE></HEAD>

<BODY>

<H1>My Hello World Page</H1>

Hello World!<BR>

<HR>

<IMG SRC="CLICKME.JPG"><BR>

<P>

<I>I would like to show you italic text</I>

<B>I would like to show you bold text</B>

<B><I>I would like to show you bold italic text</I><B>

<A HREF="http://www.nowhere.com/index.html">This is a link to nowhere.</A>

</BODY>

</HTML>

Save your file.

Helpfile generated by VB HelpWriter.


Summation

Now you have your final document. The file names and the URL calls are not real, but can very easily be replaced by very real information. Consult your provider for where to upload your file. You will need to be familiar with FTP (File Transfer Protocal) software to upload it. Once the document and all the graphics, etc are uploaded, it can be called from anywhere over the Internet.

Once your *.HTM file has been uploaded to your WWW space, you will need to do some minor changes to the file names. DOS limits your extentions to three characters. This means that by default, your file will not have the full four letter extention that it needs. Once uploaded, rename your file filename.HTML (where filename is the name of your file).

If you want your document to be the first thing to load load when someone calls your area with a browser, name the document INDEX.HTML.

This is just a starting block. There are tons of other resources out there on the Internet regarding HTML. In my opinion, the best teacher of all is to download someone else's page, and see how they did their markup. Most browsers allow you to do that by File + Save  from the menu or View + Source from the menu.

My homepage will list several very good sites for graphics and more in-depth information. Be sure to stop by to round out your education.

My Homepage:

http://www.why.net/home/sfricke

Helpfile generated by VB HelpWriter.


Testing Your Page

All That Typing, But What Will My Page Look Like on the World Wide Web?

Taking a look at your page is really very easy if you are familiar with a WWW Browser, and hopefully you are if you are trying to create an HTML page!. Most all browsers allow you to load files from your local drive in addition to loading them on the World Wide Web. Consult your browser instructions on viewing a page locally.

The most importrant thing to remember before loading any local documents is that the *.HTM file and all the graphics need to be in the same directory on your computer. Otherwise they may not display.

It is always a good idea to look at your page using a browser before uploading to your World Wide Web space. It can save you a lot of trouble, especially if there are errors in your HTML.

Helpfile generated by VB HelpWriter.


Uploading to the WWW

I Have A Page Made, How Do I Get it on the WWW?

Simple question... not such a simple answer.

In order to put your page on the World Wide Web, you first must have a service provider. If your provider has WWW space for you, this is where you will need to copy all your files. Be sure to check with your provider regarding the location of the area, and how to get your files copied into it.

Most often in order to copy the page and all the graphics, you will need to use your modem and FTP software. Simply call up your service provider using your Internet account, and load your FTP software. Once loaded go to your "home" directory and copy all your files.

If your files end with the extention HTM, and your files are copied to your home area, make sure you rename them to the Internet standard of *.HTML.

If you want a page to come up automaticly when someone comes to your site, which is a good idea, then rename the file "INDEX.HTML" This loads the default page. This page is often referred to as the "Home Page"

Lesson 1	Lesson 2	Leeson 3	Leeson 4	Lesson 5	Lesson 6

Intro	Testing	Upload	Summary	Using AA	Links	Glossary

Helpfile generated by VB HelpWriter.


Useful Links

Listing of Links Worth Looking Into

Steven T. Fricke's Home Page

http://www.why.net/home/sfricke

From this page you will find links to great stuff all over the Internet which I feel live up to the high standards of Anchors Aweigh!. These sites include information, graphics and tools.

World Wide Web Consortium

http://www.w3.org/

WWW FAQ

http://sunsite.unc.edu/boutell/faq

For information not covered in this introduction:

Forms:

http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html

Tables:

http://www.hpl.hp.co.uk/people/dsr/html/tables

Image Maps:

http://hoohoo.ncsa.uiuc.edu/docs/setup/admin/NewImagemap.html

Lesson 1	Lesson 2	Leeson 3	Leeson 4	Lesson 5	Lesson 6

Intro	Testing	Upload	Summary	Using AA	Links	Glossary

Helpfile generated by VB HelpWriter.


Glossary

<!-- -->

<A>

<ADDRESS>

<B>

<BASE>

<BLOCKQUOTE>

<BODY>

<BR>

<CITE>

<CODE>

<DD>

<DFN>

<DIR>

<DL>

<DT>

<EM>

<FORM>

<H1>

<H2>

<H3>

<H4>

<H5>

<H6>

<HEAD>

<HR>

<HTML>

<I>

<IMG>

<ISINDEX>

<KBD>

<LI>

<LINK>

<LISTING>

<MENU>

<NEXTID>

<OL>

<P>

<PLAINTEXT>

<PRE>

<SAMP>

<STRONG>

<TITLE>

<TT>

<U>

<UL>

A

anchor

B

browser

F

FAQ

FTP

G

GIF

H

Home Page

HTML

hypertext

J

JPEG

JPG

T

tag

tags

U

URL

W

WWW


<!-- -->

Used to write something in the HTML form which does not display  when viewed using a Hyper Text browser. This is generally refered as "commenting out".

Syntax: <!-- text -->


<A>

Adds an anchor to picture or text. This means that this is what you use to link text or a picture to something else.

Syntax: <A attribute> description or picture </A>


<ADDRESS>

Presents information in the form of an address.

Syntax: <ADDRESS> address </ADDRESS>


<B>

Displays text bold.

Syntax: <B> text </B>


<BASE>

Specifies the name of the document. This is usually used as part of the heading.

Syntax: <BASE>


<BLOCKQUOTE>

Specifies a section as quoted form a source outside the document.

Syntax: <BLOCKQUOTE> ... </BLOCKQUOTE>


<BODY>

Specifies the body of the document. Normally used at the beginning and end of the document.

Syntax: <BODY> ... </BODY>


<BR>

Line break. This is used when sections need to be separated, but not a line space between then.

Syntax: <BR>


<CITE>

Cites material.

Syntax: <CITE> ... </CITE>


<CODE>

Specifies the text as code.

Syntax: <CODE> ... </CODE>


<DD>

Display as a definition list/glossary.

Syntax: <DD>

See also:

<DL>

<DT>


<DFN>

Display a definition

Syntax: <DFN> ... </DFN>


<DIR>

Display a directory

Syntax: <DIR> ... </DIR>


<DL>

Make a definition list/glossary

Syntax: <DL> ... </DL>

See Also:

<DD>

<DT>


<DT>

Term in a defnition list/glossary

Syntax: <DT>

See Also:

<DD>

<DL>


<EM>

Add emphasis to text

Syntax: <EM> ... </EM>


<FORM>

Specify a form  for user input.

Suntax: <FORM attribute> ... </FORM>

attributes:

ACTION="URL" where the URL is hte URL of the query server.

METHOD="method" where method is either GET or POST

See Also:

<INPUT>

<OPTION>

<SELECT>

<TEXTAREA>


<H1>

Make text appear in header style 1 (The largest)

Syntax: <H1> text </H1>


<H2>

Make text appear in header style 2

Syntax: <H2> text </H2>


<H3>

Make text appear in header style 3

Syntax: <H3> text </H3>


<H4>

Make text appear in header style 4

Syntax: <H4> text </H4>


<H5>

Make text appear in header style 5

Syntax: <H5> text </H5>


<H6>

Make text appear in header style 6

Syntax: <H6> text </H6>


<HEAD>

Sepecify the head of a document

Syntax: <HEAD> ... </HEAD>


<HR>

Horizontal Rule. Adds a separeator line

Syntax: <HR>


<HTML>

Specifies and HTML document type.

Syntax: <HTML> ... </HTML>


<I>

Specify italic text to be displayed

Syntax: <I> text </I>


<IMG>

Place an image at this location.

Syntax: <IMG attribute>

Possible attributes:

ALIGN=alignment  Where alignment may be TOP, MIDDLE or BOTTOM

ALT="text"  Where "text" is text to be displayed should the graphics for some reason not load.


<ISINDEX>

Speicifes an Index file. This makes this a searchable document

Syntax: <ISINDEX>


<KBD>

Specifies the key to be displayed as if it were a key from a keyboard.

Syntax: <KBD> key </KBD>


<LI>

Specifies an item in a list

Syntax: <LI>

See also:

<DIR> <MENU> <OL> <UL>


<LINK>

Specifies a link to another file.

Syntax: <LINK attribute>

Possible attributes are:

REV=relationship  The relationship of this file to another.

HREF="URL" The URL of another page.


<LISTING>

Defines a listing of compter code

Syntax: <LISTING> ... </LISTING>


<MENU>

Defines a menu of items.

Syntax: <MENU> ... </MENU>

See also:

<LI>


<NEXTID>

Sets a variable name (Used by HTML editors... not humans). Normally polaced in the head of a document.

Syntax: <NEXTID>


<OL>

Specifies an ordered list or glossary.

Syntax: <OL> ... </OL>

See Also:

<LI>


<P>

Specifes text as a paragraph. In technical levels the switch off may be omitted. If a pragraph starts, it is assumed to also end.

Syntax: <P> ... </P>

Also Acceptable Syntax: <P>...


<PLAINTEXT>

Specifies text to be plain text.

Syntax: <PLAINTEXT> ... </PLAINTEXT>


<PRE>

Specifies area as preformatted text to be displayed axactly as it was entered. This is normally diplayed in a Courier or other fixed spaced font.

Syntax: <PRE> ... </PRE>


<SAMP>

Makes sample output.

Syntax: <SAMP> ... </SAMP>


<STRONG>

Specifies text to be displayed with a strong emphasis.

Syntax: <STRONG> ... </STRONG>


<TITLE>

Specifies the title of the document

Syntax: <TITLE> title </TITLE>


<TT>

Specifies text to be dislplayed as typewritten.

Syntax: <TT> ... </TT>


<U>

Specifies text to be displayed using an underlined font.

Syntax: <U> ... </U>


<UL>

Specifies an un-ordered list or glossary.

Syntax: <UL> ... </UL>

See Also:

<LI>


anchor

This is a link to something outsde the document, such as a picture or to an URL, or the name of a place where a link is referred to.


browser

Software which displays Hyper Text documents


FAQ

Frequently Asked Questions

A Q&A document which answers the most frequently asked questions regarding a specific topic.


FTP

File Transfer Protocal

The protocal used to copy files over the Internet. FTP aslo refers to the name of the software that uses the FTP to transfer information and files over the Internet


GIF

Graphic Interchange Format

Image type. A style of storing an image to a computer file developed by Compuserve.


Home Page

The term used to describe the first page loaded at a particular site, or to refer to a pgae which serves primarily as a lunching place for other pages.


HTML

Hyper Text Markup Language.

The term used to describe the style of writing that lies behind a Hyper Text document.


hypertext

A  term used to describe a document which has computer links to other documents or external information such as graphics.


JPEG

Joint Photographic Experts Group

Image type. A style of storing an image to a computer file developed by the Joint Photographic Experts Group.

See Also:

JPG

GIF


JPG

Joint Photographic Experts Group

Image type. A style of storing an image to a computer file developed by the Joint Photographic Experts Group.

See Also:

JPEG

GIF


tag

The code which tells a Hyper Text veiwer or Browser how to display or respond.


tags

The code which tells a Hyper Text veiwer or Browser how to display or respond.


URL

Uniform Resource Locator.

The address (location) of a page on the WWW


WWW

World Wide Web

A hypertext document based distribution system for computers.