Creating HTML Documents

Web pages are written as text files in a form called HTML - HyperText Markup Language.

They are text files, meaning they're made up of ordinary characters. The files include with special tags (most commonly text between angle brackets < >) that indicate how the text is to be displayed.

We will cover an introduction to creating HTML documents. There are several good tutorials and aids for creating Web pages available through the WWW. Here's a list of a few.

  1. One place to start is the HTML Primer at NCSA You can also get there by pressing H while using Lynx and choosing Help on HTML
  2. Another is How to Create Web Services from Netscape. You can also get there by choosing How to Create Web Services from the Help pull-down menu in Netscape.
  3. A third is the section Computers: Internet: World Wide Web: Authoring from the Yahoo Directory. This lists lots of resources.
  4. After you've started writing HTML you'll probably want to take a look at this style guide from Yale

You can always see how a Web page is constructed by viewing the source of a document.

How to do it?

You can start by looking at some files I've made up that show some of the features of HTML. They're not sophisticated.

First copy the files sample1.html, sample2.html, and sample3.html , and the files smbill.gif and bill.gif from the directory /users/ernie/www to your directory.

Here's how to do it if you're using an HP-Xterminal

Regardless of which terminal or interface you're using:

Press Enter after typing each line, and REMEMBER to type the period (.) preceded by a space at the end of each line.

Now you can look at these through Netscape, by starting Netscape (if it's not already open) and choosing Open File.. from the File pull-down window.

There's one more thing you ought to get in the habit of doing. The files that are to be viewed on the WWW by anyone, anywhere need to have permissions set so anyone can read them.

To make all of these readable, go back to the terminal window and type the following line and press Enter

To create your own Web pages you have to use a text editor (such as pico on our computer systems) or use an add-on to some popular word processing software such as Microsoft Word, and then upload the html file to our system.

There is a simple text editor you can use for experimenting during this workshop. To use it click on the icon shown below.

Then choose Open .. from the File pull down menu and type the name of the file to use. To edit the file sample1.html, type its name in the dialog box.

The first file we'll look at is sample1.html.

It contains some text and the html tags

<html> </html> These identify the start and end of an html document.
<title> </title> These identify the start and end of the title of the document. The title shows up at the top of the window when you view it through Netscape or Lynx.
<body> </body> These separate the body of the document from the title.
<p> You use this to separate "paragraphs" in the body.
<br> This is used to start text on a new line.
<H1> </H1> This identifies an item as a level 1 heading. There are six levels you can use. They get progressively smaller.
<H2> </H2> This identifies an item as a level 2 heading.
<i> </i> These start and end the representation of a text in italics.
<ol> </ol> These start an end an ordered (numbered) list.
<li> Used to mark each item in a list.
<ul> </ul> These start and end an unordered list.

Here is the file

<html>

<head>

<title> A First HTML Document</title>

</head>

<body>

<h1>Hi!</h1>

How do you like the way this looks? Was that too large? Let's try it again as a level two heading.

<h2>Hi!</h2>

Was that better?

<p>We just did a paragraph break. That ought to give a blank line. <br> Here we'll try a line break.You can see here that html doesn't care about horizoantalor verticle spacing. Now if it would only check spellling!<p>Ok, now for some other things. <br>

My name is <i>Ernest Ackermann</i>

and I teach <i>Computer Science</i>

at Mary Washington College. In the past two years I've taught these courses

<ol>

<li>Computer Science I

<li>Operating Systems

<li>Organization of Programming Languages

</ol>

A few other things I've done are<ul><li>Served as Chairman of The Committee On Instructional Technology

<li>Written a book titled

<i>Learning to Use the Internet</i>

<li>Finally got out of being Chair of my department!!!</ul></body></html>

When you see it on the screen it looks something like this

Hi!

How do you like the way this looks? Was that too large? Let's try it again as a level two heading.

Hi!

Was that better?

We just did a paragraph break. That ought to give a blank line.

Here we'll try a line break. You can see here that html doesn't care about horizoantal or verticle spacing. Now if it would only check spelling!

Ok, now for some other things.

My name is Ernest Ackermann and I teach Computer Science at Mary Washington College. in the past two years I've taught these courses

  1. Computer Science I
  2. Operating Systems
  3. Organization of Programming Languages

A few other things I've done are

If you want to see sample1.html "live" click here .

The file sample2.html includes some hyperlinks.

You enclose hyperlinks in bracketed html tags (like we've seen before), using <A> and </A>.

But we also have to include a URL so the link can be made when we click on an item.

For example, to create a link from the phrase Mary Washington College to the home page on the WWW for the college, we use

<A HREF="http://www.mwc.edu"> Mary Washington College </A>.

Then we would see something like this on the screen (with Mary Washington College in bold)

My name is Ernest Ackermann and I teach Computer Science at Mary Washington College.

and someone could select or click on Mary Washington College and be taken to the MWC Home Page.

Also included are a link so someone could click on my name and be taken to a screen to send me e-mail, a link to the home page for the course I taught this past semester, and a link to the home page for my book. Just to show there's no tricks, we'll also include a link to the computer science section of the WWW Virtual Library.

Here is what's different in sample2.html.

My name is

<a href="mailto:ernie@paprika.mwc.edu">

<i>Ernest Ackermann</i> </a>

and I teach <a href="http://src.doc.ic.ac.uk/bySubject/Computing/Overview.html"><i>

Computer Science</i> </a>

at <a href="http://www.mwc.edu"> Mary Washington College</a>.

In the past two years I've taught these courses<ol><li>Computer Science I<li>Operating Systems<li>

<a href="http://www.mwc.edu/ernie/cpsc401.html">

Organization of Programming Languages</a></ol>

A few other things I've done are<ul><li>Served as Chairman of The Committee On Instructional Technology<li>

Written a book titled <a href="http://www.mwc.edu/ernie/lrn-net.html">

<i>Learning to Use the Internet</i><a>

Click here to take a look at it on your screen!

The last file, sample3.html shows some ways to include images in an html document. The image needs to be in a file in some sort of graphics format. In this case it's in GIF format. Once you have an image or two you can place them in a document as shown here.

<html>

<title> The Title </title>

<body>

Here are some ways to display an image.

<br>

<ol>

<li>First as a thumbnail, a small picture that's on the screen when you view

it with Netscape or Mosaic.

<IMG SRC="smbill.gif">

<p>

<li>Now with some text along with it.

<p>

<IMG ALIGN=top SRC="smbill.gif"> A picture of my friend Bill.

<p>

<li>And now with text and have it set so when you click on the image or the

word Bill you get to see a larger version of the image.

<p>

A picture of my friend <A HREF="bill.gif"> <IMG SRC="smbill.gif"> Bill. </A>

<p>

And this <img src="/users/ernie/www/ernie.gif"> is what I got after working here for 15

years.

</body>

</html>

Take a look at it yourself!

Now, ready to try some on your own?