Return to CALL resources page | esl_home index
Return to the Writing for Webheads page
Next visit, start at http://www.netword.com and GO to the netword "webheads"


What is HTML?
 Created by Vance Stevens, MLI; Updated Oct 20, 1997

HTML stands for "Hypertext Markup Language".

Hypertext is text that is "hot". To see hypertext, you need to be looking at it in a "browser" such as Netscape or Microsoft Internet Explorer. You know when you see hypertext because it is a different color than the rest of the text and it may be underlined. When you move your cursor over it, the cursor turns into a hand with a pointed finger.

If you want to check it out, click here.

If you are looking at a hypertext document, when you click on "hot" text, you jump to a destination.

The destination could be to a document or image on the computer you are working on or on your local area network.

Or if you are online, the destination could be anywhere on the Internet.

If you are creating a hypertext document,

You just do it in Microsoft Word.

OK, what do you want to do now?

Tell me more about how I can create an HTML file using Word

I'm an inductive learner. Show me some code.

I already know this. Let me outta here.

Or, use the back arrow on your browser's task bar to page back through screens you've already visited.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I'll show you some HTML below. But don't put off by it. You can create HTML automatically in Microsoft Word. If you create a Word document and "save as HTML", then the coding is placed in the file automatically. When you edit your document, you work only on the links and content. You never have to deal with the code.

 

HTML looks like this. (Click here to see a brief explanation)

<HTML>

<HEAD>

<META NAME="Generator" CONTENT="Microsoft Word 97">

<TITLE>Example teacher management file</TITLE>

<META NAME="Template" CONTENT="C:\PROGRAM FILES\MICROSOFT OFFICE\OFFICE\html.dot">

</HEAD>

<BODY LINK="#0000ff" VLINK="#800080" BACKGROUND="Image2.jpg">

<FONT SIZE=6><P ALIGN="CENTER">Example Teacher Management File</P>

</FONT><P>This file started as a simple Word document and was "saved as" HTML. As a result, it is now a hypertext document, with hyperlinks. Try to imagine how a teacher could create such text and use it to organize class records and activities.</P>

<P ALIGN="CENTER">(To get the clip art below, in Word, use Insert / Picture / etc. or Insert / Horizontal line;<BR>

Background is done with Format / Background / Fill effects.)</P>

<P ALIGN="CENTER">&nbsp;</P>

<P ALIGN="CENTER"><IMG SRC="line7.gif" WIDTH=623 HEIGHT=18></P>

<P>&nbsp;</P>

<P>Here are some test documents to illustrate some of the ways you can set up linked files. Click on what you'd like to see:</P>

<P>&nbsp;</P>

<P><IMG SRC="Arrow.gif" WIDTH=42 HEIGHT=41><FONT SIZE=5>Documents at the MLI </P>

</FONT><FONT SIZE=4><P>(These documents are all on this computer but <I>could</I> be anywhere on the network).</P>

</FONT><P><A HREF="linked documents/Windows Tutorial 01.txt">A Windows Tutorial</A> (This is a text document, saved as text from a Word document. For an HTML version, <A HREF="linked documents/Windows Tutorial 01.html">click here</A>. Notice how the text file, bulleted with text dashes, has been converted to outline form in HTML.)</P>

<P><A HREF="linked documents/Equip list.htm">MLI Computer Equipment List</A> and the <A HREF="linked documents/software list.htm">MLI Software Request List </A><BR>

 To see an explanation, click here.

 I don't want to see code. I want to know how to DO IT!

To get back to the top of this document, click here.

I've seen enough. I wanna quit now.

 Or, use the back arrow on your browser's task bar to page back through screens you've already visited.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML Code Briefly Explained

Remember, Word does this for you, so you really don't have to know about this. But since you asked, here it is:

Briefly, HTML works by placing a command before and after a text string in order to turn the command on and off, respectively. For example, to center the above heading, there is a command < P ALIGN="CENTER"> before the heading and a </P> afterwards meaning to turn the P command off. As a result, everything between the commands is centered.

Commands can be imbedded. Again in the case of the above text,

<FONT SIZE=6><P ALIGN="CENTER">HTML Code Briefly Explained</P></FONT>

Here, the font size is increased to #6 (not 6 pt), the item is centered, and then both centering and font increase are turned off.

The real magic in HTML is the Hypertext Reference command, which links text or objects on your page to objects elsewhere. In the following example, the link for the text string MLI Computer Equipment List is a file in the <linked documents> folder called Equip list.htm. If we were to replace what is inside the quotes with a valid URL (i.e. http://www etc.) then your browser would attempt to retrieve whatever is at that site. (By the way, don't click on the http etc part).

<P><A HREF="linked documents/Equip list.htm">MLI Computer Equipment List</A>

Click here to go back and look at the code

I don't want to see code. I want to know how to DO IT!

To get back to the top of this document, click here.

Thanks, but I've gotta go now.

 Or, use the back arrow on your browser's task bar to page back through screens you've already visited.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Great, you checked it out. You're on your way to some interesting discoveries. Keep going!

To get back to the top of this document and keep going, click here.

This is silly. I think I'd rather be somewhere else.

Or, use the back arrow on your browser's task bar to page back through screens you've already visited. 

 

 

 

 

 

 

 

 

 

 

 

OK. Just click "Yes, please" if you want an explanation of how you can set up a single document so that users can jump around in it.

To get back to the top of this document, click here.

OK, I appreciate what you're trying to show me but not today, thanks.

Or, use the back arrow on your browser's task bar to page back through screens you've already visited. 

 

 

 

 

 

 

 

 

 

 

 

 

OK here's an explanation of how you can set up a single document so that users can jump around in it.

If you scroll through this file you will see that all the interaction is placed in different parts of the file.

Each interaction is spaced far enough from the one above and below so that only that interaction will appear on the screen at any one time.

Each interaction is bookmarked. To bookmark a point in your file, you pull down Insert and select Bookmark.

You give each interaction a unique label.

Elsewhere in the file, you create hot text by highlighting it and then pulling down insert and selecting Hyperlink. Link your hypertext to a "Named location in file" and put in the label for the interaction you wish to jump to. Or Browse the list of labels in your file and select your link from that list.

 If you want to specific instructions on how this is done, click here. Otherwise,

To get back to the top of this document, click here.

This has been very informative, but I'm ready to head out now.

Or, use the back arrow on your browser's task bar to page back through screens you've already visited.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

You can create HTML automatically in Microsoft Word.

You create a Word document in the usual manner, except that when you save it, you use "Save as HTML". The coding is placed in the file automatically.

When you edit your document, you work only on the links, appearance, and content. You never have to deal with the code.

Show me the code, anyway. I can take it.

Explain it to me step by step.

Would you like for me to explain how this document is set up so you can jump from one part of it to another?

Yes, please.

No, thanks. Maybe later.

Alternatively: 

To get back to the top of this document, click here.

Or, go to the end of the tutorial.

 

 

 

 

Or, use the back arrow on your browser's task bar to page back through screens you've already visited.

 

.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

End of Tutorial
Congratulations, you've reached the end of this tutorial!

Here, you have (or might have) learned:

What HTML is

What HTML looks like

How HTML works, essentially 

How you can avoid having to know any of the above by creating all your hypertext documents in Microsoft Word

How this document has been set up to create a simple tutorial using Word's HTML features

You may now

Go back to the top of this document, or click on any of the items above to review it.

See specific instructions on creating html in MS Word 97

Or, use the back arrow on your browser's task bar to page back through screens you've already visited.

Or, you may shut down the computer in a controlled fashion and quietly leave the room. Bye.

 


Use your browser's BACK button to return to a previous page

For comments, suggestions, or further information on this page, contact Vance Stevens, page author and webmaster.

Last updated: June 29, 1999