Hands-On: Writing HTML

Table of Contents

The following is the Table of Contents for this tutorial. It contains links to later locations on this same page. You can also get to these locations by scrolling your Netscape window. The Table of Contents is a convenience in case you want to go directly to a particular point for later reference.

Instructions

This is an online tutorial which should be used via the Netscape WWW browser. If you have a hardcopy, you can refer to it when going through instructions, but you'll need the online version to actually do the instructions since the online version contains active links (underlined text) that you will need to click on.

This tutorial assumes that you will cover the points in the order that they are presented. Put this document on your bookmark list now. Use this bookmark to return to this page after trying each instruction.

Project

Write a web document on your chosen topic including your own introduction, the links you collected relevant to your topic in your bookmarks list, and your commentary on those links.

Write your document so that one of your students, colleagues, or administrators could use this as a starting point to learn about your topic and the information available about your topic on the internet. (assuming this person had a browser and an internet connection)

Use this online worksheet as you do your project. It will guide you through writing an HTML document. This worksheet includes instructions for saving your WWW page to your disk so you can use, modify, or add to your document on your computer at home or at school.

Introduction

World Wide Web documents are written in a language called HTML. HTML stands for HyperText Markup Language. It is called Hypertext because not only can you do formatting, but you can point or link to other documents and resources from inside your document. Actually, it is really more like a Hypermedia markup language, because you can incorporate and link to many different kinds of media, not just text.

HTML is a markup language which means the author has to specify formatting commands as well as the text content of the document. For example, the author has to indicate what text should be used for the document's title, what text should be a section heading, and what text should be bold or italic.

This is done through the use of formatting elements called tags. Tags consist of a formatting keyword surrounded by angle brackets (i.e. less than and greater than signs):

<TAG_KEYWORD_HERE>
Usually these tags come in pairs so that they mark the beginning and the ending of the text phrase that is to be formatted. The ending tag is the same as the starting tag, except that the ending tag is preceded by a forward slash "/". For example: A document title would be written:
<TITLE>This Is My Document Title</TITLE>
Note that in HTML, you specify the document's structure, not the document's exact layout. A document's structure includes specifying which text is a TITLE, paragraph, section heading, subsection heading, numbered list, etcetera. (i.e. what logical part of the document the text represents)

A document's layout includes specifying margins, font names, text sizes, etcetera. (i.e. how the text should be presented to the user) The document's layout is determined by the browser the reader uses. It is the browser that decides when it sees a TITLE tag that it will display the text in 24 pt Helvetica font. The document author can only indicate which text is tagged as the TITLE.

This can be somewhat frustrating for authors who want to set the exact look of a document. But it is worthwhile for several reasons:

  1. Because the browser decides the exact presentation of the document, this information does not need to be sent over the network. This means documents are smaller and can be transmitted more quickly.

  2. The browser can allow the user to set font and size preferences, and then display the document with the user's preferences instead of the author's preferences.

  3. Browsers on computer systems with different capabilities, can still work on the same document. A text-only browser on a non-graphics terminal could present a TITLE in one way, while a browser on your Mac could present it in a fancier way.

Getting Started

You will need two browser windows to do this tutorial: one for looking at these instructions, and one for viewing your own document as you write it. From the FILE menu, select NEW WINDOW to pop up another browser window. From the BOOKMARKS menu, select Hands-On: Writing HTML to get your new browser window to the same page as your first window.

Use your first window as your "instructions" window. In your second window, click on this link for an empty file. Your browser should show an empty page.

Now from the VIEW menu, select SOURCE... This will bring up your text editor (in this case SimpleText), so you can see the source code for the current Web page you have been viewing. This can be used for any Web (HTML) page, and is very useful in learning HTML via seeing how others have written their documents.

In this case, since the page was empty, there is no source code and your text editor should show a blank page.

Start your document using this blank page. To do this:

  1. Insert your floppy disk from last session (metal rectangle first, metal circle on the bottom face of the disk) into you Mac drive. A disk icon with the name you gave it last week should appear on your desktop.

  2. From your editor's FILE menu, choose SAVE AS. This will pop up a file selection dialog box.

  3. In the menu above the scrolled list of file and folder names, select DESKTOP (if it is not already selected).

  4. Your disk's name should appear in the scrolled list now. Select that by double clicking on it.

  5. Now type in the filename you want to use for your topic. It should be something like topic_name.html . Observe these rules for naming your file:

  6. Click on SAVE. The file should be saved onto your floppy disk now.

  7. To check this, double click on the floppy disk icon on your Desktop to see if your file is there. This will pop up a window containing a listing of all the files on your floppy disk. To remove this window, click on the square in the top left corner of the window.

  8. Click on the text editor window that shows your blank file now in order to make this the active window. Type in a sentence introducing your topic like:

    This is a Web Page of information on YOUR_TOPIC_NAME_HERE.

  9. From the FILE menu, select SAVE.

  10. Now you can view what your document looks like so far by loading the file you just created into Netscape. Click on your second ("previewing") Netscape window to make it active. From the FILE menu, select OPEN FILE. Select DESKTOP in the menu above the scrolled list. Double click on your floppy disk name. Then double click on the name of the file you just created.
Your Netscape "previewing" window should now show a page with the text you just typed in. You have just started writing your own web page!

Note the file:/// prefix of the LOCATION field at the top of your window. This tells you that you are viewing a local file.

Your Web document should look like this example.

When you are using Netscape to view any of the examples in this tutorial, you can use the VIEW menu SOURCE item to see the source code for that example. Note that VIEW SOURCE shows the source code for the current document you are viewing. So you will actually have to be viewing the example at the time you select VIEW SOURCE in order to see the source for it. Try this now with the example link above, and then return back to this page. You can close the window with the example's source code by clicking on the square in the top left corner of that window.

Modifying Your Document

Next we'll go through modifying your web page. Creating web pages is somewhat like taking photographs and then taking them to get developed to see how they "turned out". In this case, "getting them developed" means using your Netscape browser to see how your page will look to your reader. Fortunately, there is no travelling or development charge involved.

So as you go through this tutorial, you will be alternating between modifying your page in the text editor, and then previewing your page with Netscape to see how it looks. We will go through this cycle once here, and then you will be expected to use this process for the rest of the tutorial.

To modify and preview your Web Document:

  1. Click on your text editor's window that shows your file so far to make that window active again.

  2. Type in your modifications. In this case, type a second line of text introducing your topic:

    This was written as part of Fermilab's WWW Institite for Educators.

  3. From your editor's FILE menu, select SAVE your editing changes.

  4. Click on your Netscape "previewing" window to make it active.

  5. Click on the RELOAD button at the top of this browser window so that it reloads your file with the new changes you have made.
Your Netscape "previewing" window should now show a page with the new text you just typed in. Your Web document should look like this example now. Use VIEW SOURCE on these examples whenever you want to compare their source code with yours.

You can use this tutorial in two ways: You can type in the exact text specified, so your file should match the example files given, or you can type in text appropriate to your topic in these examples. Do whichever you feel most comfortable doing.

If you choose to type in the exact text suggested, it may be a little easier to check your work. You can always change the text to content relevant to your topic later.

Paragraphs

You may have noticed that your text lines did not appear on two separate lines in Netscape. (i.e. not in the format you typed them in in your editor) In general, web browser pay no attention to extra spaces or line endings in your source file. Web browsers format the source lines and show new lines based on the size of the readers window.

Try resizing your Netscape window to be very large and very small using the squares in the bottom right corner of the window. So this type of automatic formatting is a good feature because you as an author do not know how big your reader's window will be.

However, You can add Paragraph tags to start a new paragraph of text in your document. Web browsers will show the reader blank lines between the paragraphs. Change your two introductory lines to be two separate paragraphs by putting <P> at the start of the text to be a paragraph and </P> at the end of the text. This should look like:

<P>This is a Web Page of information on YOUR_TOPIC_NAME_HERE. </P>
<P>This was written as part of Fermilab's WWW Institite for Educators. </P>
Paragraphs can of course be longer than these two examples. Whatever their length, they are still implemented by putting <P> at the start of the paragraph and </P> at the end.

HTML tags are case insensitive: they work whether they are upper case letters or lower case letters. I like using all upper case tags to make it easier to distinguish between the text content and the formatting.

This is the example with paragraphs.

Title

Now add a title to your document by putting this line at the top of the page.
<TITLE>Internet information on YOUR_TOPIC_NAME_HERE</TITLE>
You can leave a blank line in your editor between the Title and your paragraphs. As we saw before, browsers ignore line endings and blank lines, but your source file will be easier to read and change if you include some blank lines in it.

Note that the Title is not actually part of your document's content. The Title appears at the very top bar of the Netscape window, rather than as text inside the window. Netscape uses the file name as a title if there is no Title information in your document.

This is the example with a title.

Section Headings

Now we'll add some section headings to your document. It is customary to repeat the Title as a section heading, so that the reader sees this in the web page as well as at the top of the window. The heading tags we'll use are <H1> and </H1>. Repeat your Title line, but replace your TITLE tag with H1 like so:
<TITLE>Internet information on YOUR_TOPIC_NAME_HERE</TITLE>

<H1>Internet information on YOUR_TOPIC_NAME_HERE</H1>

<P>This is a Web Page of information on YOUR_TOPIC_NAME_HERE. </P>
<P>This was written as part of Fermilab's WWW Institite for Educators. </P>

There are six levels of headings: H1 to H6. H1 is the most significant (largest) and H6 is the least significant. Add a level 2 heading after your level 1 heading. Also add another level 2 heading after your introductory paragraphs. This should look like so:
<TITLE>Internet information on YOUR_TOPIC_NAME_HERE</TITLE>

<H1>Internet information on YOUR_TOPIC_NAME_HERE</H1>

<H2>Introduction</H2>

<P>This is a Web Page of information on YOUR_TOPIC_NAME_HERE. </P>
<P>This was written as part of Fermilab's WWW Institite for Educators. </P>

<H2>Related Information</H2>

This is the example with headings.

Lists

There are several ways to make lists in HTML. These are two of the major ones. Lists require a tag to indicate the starting of the list, a tag to indicate the ending of the list, and a tag to indicate each item in the list.

Unordered Lists (Bulleted)

Unordered lists are usually presented as bullets are something similar. There have been many unorders lists in this tutorial document so far. The tag for an unordered list is <UL> which must be at the beginning of the list and correspondingly </UL> at the end of the list. The tag to indicate each list item is <LI>. Note that <LI> does not have a corresponding ending tag.

Add an unordered list at the bottom of your document. Use place holders like "Resource 1" for the individual items in the list for now. We will fill in links to the resources you collected in your bookmark list at a later time.

The text that you add to the bottom of your document will look something like this:

This is a list of items related to XYZ aspect of YOUR_TOPIC_NAME_HERE.

<UL>
<LI> Resource 1
<LI> Resource 2
<LI> Resource 3
</UL>

This is the example with an Unordered List.

Ordered Lists (Numbered)

Ordered lists work are exactly like the unordered list, except the <OL> tag is used instead of the <UL> tag.

Add an ordered list at the bottom of your document using place holders again.

This is a list of items related to ABC aspect of YOUR_TOPIC_NAME_HERE.

<OL>
<LI> Resource 1
<LI> Resource 2
<LI> Resource 3
</OL>

This is the example with an Ordered List.

Preformatted Text

Sometimes you want to put a block of text in your page that already has a format, and you don't want the web browser to ignore the extra spaces and line breaks. You can do this by using the <PRE> tag.

For example, add some preformatted text indicating your classes and units that this page might be useful for. This would look like something like:

<H2>Audience</H2>

This information could be useful for

<PRE>
    6th Grade          Earth Science
    7th Grade          Life Science
    8th Grade          Writing
</PRE>
This is the example with an Preformatted Text.

The <BR> tag can be used if you just want to force a line break. To do this, just put <BR> at the end of the line of text where you want the line break. <BR> has no matching ending tag. <BR> and <PRE> should not be used frequently because you may be writing something that will look good when viewed with your browser, but will look bad when viewed by a different browser. It is usually better to let the browser make spacing decisions.

Writing a Table of numbers is a good reason for using these tags. In the future, there will be a HTML tag for writing tables, so using preformatted tags for tables won't be necessary.

Font Style (Bold, Italic, ...)

You can specify that text should appear in a specialized way by using Font Style tags. Again, you should indicate logical style - like which words should be emphasized, rather than physical style - like which words should be bold.

There are many logical font styles. The two most common are "emphasized" (<EM>) and "stronger emphasized" (<STRONG>). These tags all have matching ending tags, and must be used at the start and the end of the words to be affected.

In your Document, emphasize the phrase "WWW Institute for Educators". Use "stronger emphasized" font style on the phrase YOUR_TOPIC_NAME_HERE in your first paragraph. This should look something like:

<P>This is a Web Page of information on <STRONG>YOUR_TOPIC_NAME_HERE</STRONG>. </P>
<P>This was written as part of Fermilab's <EM>WWW Institite for Educators</EM>. </P>
This is the example using font styles.

Horizontal Lines

You can add Horizontal Lines as separators in your documents using the <HR> tag. This tag has no matching ending tag. Add Horizontal Lines to your document after your first heading and again at the end of your document.
<TITLE>Internet information on YOUR_TOPIC_NAME_HERE</TITLE>

<H1>Internet information on YOUR_TOPIC_NAME_HERE</H1>

<HR>

<P>This is a Web Page of information on <STRONG>YOUR_TOPIC_NAME_HERE</STRONG>. </P>

... rest of document ...

<HR>

This is the example using horizontal lines.

Author / Maintainer Address

It is customary to put the Author or Maintainer of the web page and the contact address at the bottom of each web page. It is also customary to note the last date the page was modified, so readers can get an idea of how current the information is. Both of these are done using the <ADDRESS> tag.

Put an author, contact address and date at the bottom of your page (just below the last horizontal line) like so:

<ADDRESS>YOUR NAME (email address if you have one)</ADDRESS>
<ADDRESS>January 30, 1995</ADDRESS>
This is the example using the ADDRESS tag.

Structure Tags for Legal Documents

A legal HTML document starts an ends with an <HTML> tag. This tells the browser to expect an HTML document when it starts reading your file from over the network. Add the <HTML> tag as the first line of your document. Add </HTML> as the last line of your document.
<HTML>
... rest of document ...
</HTML>
A legal HTML document has two sections: <HEAD> (which contains header information about your document, but no document content) and <BODY> (which contains the content of your document). Both have matching ending tags (preceded by "/").

The header information (not to be confused with section headings) includes at least the title of the document. This is all we have included for now. Add these <HEAD> tags surrounding your document Title.

<HTML>

<HEAD>
<TITLE>Internet information on YOUR_TOPIC_NAME_HERE</TITLE>
</HEAD>

... rest of document ...

</HTML>

The body information includes everything else (all document content) up until the final </HTML> tag. Add a <BODY> tag immediately after the ending </HEAD> tag. Add an ending </BODY> tag as the second to last line of your file - just before the ending </HTML> tag.
<HTML>

<HEAD>
<TITLE>Internet information on YOUR_TOPIC_NAME_HERE</TITLE>
</HEAD>

<BODY>

... rest of document ...

</BODY>
</HTML>

This is the example using HTML, HEAD, and BODY tags.

Linking in WWW and Gopher Resources from your Bookmarks

Please read the following summary for writing URL's from the University of Toronto.

To link to a Gopher or WWW resource on the internet, you use the following Anchor Hypertext Reference tags:

<A HREF="URL_GOES_HERE">Your choice of text to activate the link </A>
For example, a link to the Fermilab Education home page would look like this:
<A HREF="http://www-ed.fnal.gov/ed_home.html"> Fermilab Education Home Page</A>
A Gopher link to the Veronica searching tools we used last session would look like this:
<A HREF="gopher://cheops.anu.edu.au/11/Socioinf-query/JugheadVeronica"> Veronica searches</A>
Add a link to the Fermilab Education Home page in your introductory paragraphs in your document. When you view your document, try the link out to see if it works.

You can put these links almost anywhere in your document that text can go: Headings, Paragraph Text, List Items, etcetera. As a List item, the Fermilab Education Page link would look like this:

<LI> <A HREF="http://www-ed.fnal.gov/ed_home.html"> Fermilab Education Home Page</A>
For the moment, add this link as your first unordered list item (replacing "Resource 1"). When you view your document, try the link out to see if it works. This will look like:
This is a list of items related to XYZ aspect of YOUR_TOPIC_NAME_HERE.

<UL>
<LI> <A HREF="http://www-ed.fnal.gov/ed_home.html"> Fermilab Education Home Page</A>
<LI> Resource 2
<LI> Resource 3
</UL>

This is the example using both Fermilab WWW links.

Now use your Bookmark list to replace your other "Resource N" placeholders with links to the resources you collected last session. To do this:

  1. From your BOOKMARKS menu, select VIEW BOOKMARKS. This should pop up the bookmarks dialog box.

  2. Click on the MORE OPTIONS button in this dialog box if it is not grayed out (inactive). If it is grayed out this means you are already seeing the extra bookmark options.

  3. Click on the IMPORT button to import your Bookmark list from last session. Choose the Bookmark list file name from your floppy disk when the file selection box pops up. This will import your Bookmark list. If the Bookmark list is long, you may need to scroll to the end to see the bookmarks that were imported.

  4. Click ONCE on one of the bookmarks you would like to link to in your Document. This will make this Bookmark the "Current Bookmark". This means you will be able to see both the Link Text and the URL for this bookmark in the bookmark dialog box in the NAME and LOCATION fields.

  5. Now you can COPY and PASTE from these fields into your document. (i.e. Put
    <A HREF="XXX"> YYY</A>
    in your document where you want the link. Then replace XXX with a copy of the text from the URL / LOCATION field and replace YYY with a copy of the text from the NAME field.

    Feel free to change the text from the NAME field if you can think of text that would be more helpful for your page.

    When you COPY the text from the LOCATION field, be sure you get the whole text of the URL, not just the part that is showing. Sometimes the URL is quite long and the LOCATION field does not show all of it. Just be sure to drag your mouse all the way to the right of the LOCATION field when you COPY.

Add links to more of the resources from your collected bookmarks if you have time. You can put your links in your headings, paragraph text, or add more list items to either list.

This is the example using more links with arbitrary links of my own put in.

Finishing Up

Drag and drop your disk icon over your Trash icon, and the disk should be ejected. Keep this disk with your document on it for next session. You are done!

Even though you do not yet have an internet connection, you can still use Netscape to preview files local to your computer at home or at school. You can continue to write and preview your files this way.

Consult the next two sections for information on writing HTML if you need or want to know where to look for information we have not covered.

A few other tutorials on Writing HTML

These are some beginner's guides for Writing HTML.

Reference material about Writing HTML

The WWW Virtual Library catalog has a large list of resources providing information on HTML.

Laura Mengel (lauram@fnal.gov)
January 29, 1995