Welcome to the UCI CHP
"Create Your Own Web Page"
Workshop

This Page has been created for the Campuswide Honors Program workshops held in the Biological Sciences PC Computer Laboratory, University of California, Irvine, January 30 and February 13, 1997.

Table of Contents

Goals
What is a Hypertext Document?
HTML: The Hypertext Markup Language
What is HTML?
A Bit of HTML "Grammar"
HTML Entities
The HTML Tag
Header Elements
Body Elements
Our Text Editor
Naming the Document
Writing our Document
Netscape Controls We Will Use
First, Basic Netscape
So... How do I Check Out My Page as I Edit It?
Editing Process Overview
View Document Source (or, How did they do that?)
How to Post Your Web Page
On Antweb (EA)
References

Goals

  1. To gain a basic understanding of how the World Wide Web / Internet works.
  2. To understand how to effectively use our web browser (in this case, Netscape Communicator)
  3. To learn basic HTML (Hypertext Markup Language) in order to create our own hypertext home page.
  4. To post our page (HTML) on a site where a browser can access it and turn it into a beautiful extravaganza of information!
Because we only have two hours, our introduction to HTML, the markup language used to create web pages, will be brief and we will cover only the fundamentals.

Roughly the first hour of our time will be dedicated to learning HTML basics. This means learning how to speak the language and learn some of the vocabulary.

The second hour will be "free time" so that you can begin to create your home page in an environment where we can help each other. You'll be surprised at how quickly you will be picking up HTML.

Note:

There are many ways to create web pages. Programs such as Netscape Communicator and Microsoft Office have HTML options for creating web page with less "pain."

I believe this is all well and good, but learning basic HTML will allow you to create web pages on virtually any computer, independent of its platform (PC, Mac, UNIX) and edit your page more quickly, especially when it resides in your EA account. Also, so called WYSIWYG (What You See Is What You Get) editors such as Netscape Communicator require relatively intense hardware to run on efficiently, as well as learning how to use a specialized piece of software. Sometimes it is just faster to go the "simple" route with a simple text editor and text based browser, such as Lynx.

Table of Contents

What is a Hypertext Document?

A Hypertext document is one in which there is text with mixed in "hot links" which, when you select them by clicking on them using your mouse, send you to another location with a reference to the words or image you have selected.

Links are generally represented in Netscape as underlined blue text which changes to a purple color after it is selected to indicate that the link has been previously selected. This serves a history of your travels around the web. (These colors can change depending on the page you visit or your browser settings.)

Table of Contents

HTML: The Hypertext Markup Language

What is HTML?

The hypertext Markup Language uses "tags" to mark up text so that a web browser (or other program) will present the text with formatting.

This differs from your word processor where you might be used to making text bold or underlined. These formats can be specified using HTML, but more often, tags are more general, allowing each browser to handle tags as the browser sees fit.

An Example of this is seen with the levels "heading" tag. Headings of levels 1-6 can be specified using HTML to set off sections from one another in almost an outline form. But, the text of a level 1 heading, represented by the HTML tag <H1>, might be shown by Netscape as 24 point font size text along the left border, while Lynx, a text based web browser might only show this text in all capital letters against the left margin.

Another example is that there are no true right margins. If the window for the browser is expanded or contracted to fit into a certain area, the browser will show text and images to fit in that area, still following the "instructions" of the HTML tags. So, if a sentence does not fit all on one line in the browser you are using, it might in another browser on another computer.

With this in mind we realize HTML can be used with aesthetics in mind, but, the next time you see the same page on a different computer with a different browser, it may appear differently.

Table of Contents

A Bit of HTML "Grammar"

When you look at the source for a web page, one distinct thing you will note is the presence of the "less than" sign (<) and the "greater than" sign (>). These surround almost every HTML entity. The entity then tell the browser what to do. These entities can be thought of as your vocabulary. Just as you memorize words or use a dictionary to look them up, so too you must either memorize or look up HTML entities.

The text inside of the < > can be either uppercase or lowercase. I suggest that you use all capital letters (eg. <P>) so that tags become more distinct and recognizable from other text. Things can get a bit jumbled.

Some entities define the area where an action takes place. Therefore, it is necessary to begin and end a command. To begin on a command, one uses the command surrounded by less than and greater than signs. To end the command, one uses the same command preceded with the backslash ( / ) and again surrounded by the less than and greater than signs.

For example, to center the word "Hello" below, one would use the CENTER command like this:

<CENTER>
Hello
</CENTER>
Of course, the command would not be visible. It is only visible here for illustration purposes.

Finally, HTML is "whitespace insensitive." This means that typing a line of text which scrolls at the right side of your screen does NOT necessarily mean that the rendered line of text will be cut at the same position. Where text and graphics are ultimately placed relative to the page and relative to one another is defined both by the HTML and the size of the browser window (see "What is HTML" above). This means that you can type the source of the HTML in almost any text editor and in almost any configuration which makes it easy to read. Also, it means that it is necessary to insert line breaks <BR> and define paragraphs <P> manually, as this is not done by simply hitting the return key.

If you did not insert line breaks for the following,

Monday<BR>
Tuesday<BR>
Wednesday<BR>
(NOTE: Normally you would not see the tag "<BR>")

You would see instead:

Monday Tuesday Wednesday

If I were to only hit return in the HTML source.

Ultimately, HTML is not as easy to use as your word processor when it comes to formatting text, but it is a very powerful language.

Table of Contents

HTML Entities

There are two basic areas which comprise a hypertext document:
  1. The Header Area, where we place some document information,
    and
  2. The Body, where we place the actual marked-up text of our page.

NOTE! Don't forget the quotation marks around the URL's and don't leave out any of the less than or greater than signs!

Table of Contents

Graphics & Images

Inserting Images is a snap if you have the image or the image's location:

<IMG SRC="balls/yellowball.gif">

will produce

I have the image of a yellow ball saved in the account where this tutorial page resides. You would need to know the location of an image you wanted to insert (the URL of the image).

This element can be modified to align the image with surrounding text by adding [align=...] (without brackets) before the greater than sign and after the image location, where ... can be top, middle, or bottom.

Another attribute which can be defined is [alt="alternate text"] (without the brackets) where "alternate text" will replace the image if it cannot be displayed (as in a text based browser).

Here, SRC="URL" can contain either a filename if the image or graphic is local, or it can be a URL (http://...) if you have one. If you have space to store the image, and it is legal to do so, it is advantageous to download the image or graphic to the same location as your web page. If the server with the image is unreachable, then your page will be missing an image. But, if the page is local, then, as long as someone can reach your page, they can see the image.

Table of Contents

Lists

Three types of list are (there are other list types):

  1. The Ordered List -- <OL>...</OL> -- In this list, all list elements which are placed between the ordered list tags must have the <LI> indicator preceding each new list element. Because this is an ordered list, the bullet for each item is a digit, in order from 1-?, beginning at 1 with your first list element. (This list is an ordered list... check out the source!) 
    An Ordered List...
<OL>
 <LI> oranges
 <LI> peaches
 <LI> grapes
</OL>

    Would appear as:

    1. oranges
    2. peaches
    3. grapes

  2. The Unordered List -- <UL>...</UL> -- In this list, all elements which are placed between the unordered list tags must have the <LI> indicator preceding each new list element. Because this is an unordered list, the bullet for each item is a dot (or other item as you define it to be). 
    An Unordered List...
<UL>
 <LI> oranges
 <LI> peaches
 <LI> grapes
</UL>

    Would appear as:

  3. The Definition List -- <DL>...</DL> -- In this list, all list elements which are placed between the definition list tags are either Definition Titles <DT> which are then defined by Definition Details <DD>. Definition Details are indented with respect to Definition Titles. This element is not restricted to simply defining words. 

    A Definition List...
<DL>
 <DT>Freeway Driving
  <DD>The Driving of a Car on the Freeway
 <DT>City Driving
  <DD>The Kind of Driving Done in the City
</DL>
    Freeway Driving
    The Driving of a Car on the Freeway
    City Driving
    The Kind of Driving Done in the City
Table of Contents

Our Text Editor

We are going to use "Text Editor", found in the "Main" Window of your computers. The icon is the image of a notepad.

To create an HTML page, we need a text editor which is easy to use and preferably one in which it is easy to copy and paste text and easy to move large blocks of text. Most basic text editors allow this, and of course, a word processor allows us some extra capabilities.

In our case, we will simply open a new, clean, "normal," document in Text Editor and begin our text page there. Then we will view how our HTML is rendered using Netscape.

Naming the document

A browser, when pointed to a machine (for example http://www.uci.edu/) automatically looks for a file called "index.htm" or "index.html" unless a path is specified after the machine name (for example http://www.uci.edu/health)

"index.htm" is the filename for PC files because they have three letter extensions after the dot, and "index.html" is what you might see for a Macintosh or UNIX file (your EA account is UNIX) because they allow almost unlimited filenames.

Table of Contents

Writing our Document

  1. So, our first step is to open a new document in Text Editor and do a "Save As..." onto our diskettes.
  2. Next, we will save the document as "index.htm" and select a text format as the default format for this file.
  3. Be sure you have selected your diskette to save on, or that you know the path where you are saving this document. We want to be able to retrieve it later.
  4. Go ahead and begin to write your document, beginning with the HTML tag. Personally, I like to close all tags when I write them and then separate them with spaces. So, below it, put your </HTML> tag and write all of your text between these tags. I find that this way I don't have tags I leave "hanging" open which may affect the formatting of the document below that point.
  5. As you construct your page, remember to save often.
  6. Now to look at our page using Netscape!
Table of Contents

Netscape Controls We Will Use

First, Basic Netscape:

Netscape is a Web browser which reads HTML files (and other types of files) and presents those files according to the HTML elements it encounters in the document and its own instructions regarding to do when each element is encountered. That is to say, a level one heading may be displayed differently in different browsers, but relative to other elements, it will be distinct as a level one heading.

Netscape downloads the document you point to, and any other data associated with it (such as images or background sounds) to your computer and then displays them as the page you see (such as with the page you are seeing now. This means that the page is downloaded only once, and if the document changes at the computer which served it, you will not know about it. This can be likened to xeroxing a page out of a book. If someone rewrites that page, you will not know about it until you get a new xerox copy.

Table of Contents

So... How do I Check Out My Page as I Edit It?

Because Netscape downloads its information from the saved disk copy of a document, we must save a copy of our work in Text Editor each time we want to take a look at a change. Remember, the stuff you type in Text Editor will disappear if you do not save it and the power to your computer is cut (bad memories of lost Humanities core essays come to mind...) because it is only in the RAM of the computer. So, save often in case of computer crashes, and save in Text Editor each time you want to check out your changes.

Then, to check out the change in Netscape, we must first open it using the "Open File..." command located in the "File" menu. This opens our file and we should see a rendered view of our HTML.

Finally, to see our changes, we must download a new copy of the same document. Fortunately, the "Reload" button at the top of the browser will do this for us. It downloads a new copy of the page you are currently looking at (the URL in the "Location" bar above the page)

You can then leave both Netscape and Text Editor open and alternate between the two programs, editing and reloading as you make changes. (In Windows, the key combination ALT+TAB will cycle you through open applications)

Table of Contents

Editing Process Overview:

Your editing process should go something like this:
  1. What do I want to say?
  2. Open Text Editor Document
  3. Be sure it was and will be saved as a Text file
  4. Edit Your Document
  5. Save the document after editing (and during editing, just in case of crashes)
  6. Go To Netscape
  7. In the "File" Menu, select "Open File..." (because we are working with a local file, not a remote location, at least not at this time... later you might be editing in EA and not in a word processor)
  8. Smile as you look at your beautiful new web page, or...
  9. Troubleshoot when you see something that doesn't work

Table of Contents

View Document Source (or, How did they do that?)

When you are in Netscape, and you want to see the HTML behind a document, you can use the "Document Source..." option under the "View" menu.

This is very useful when you want to see how someone has created a particular part of a web page or when you want to troubleshoot your own web page. This can also be handy if you want to copy an image to your own computer or account and you want to find out where it is located. You can also view "Document Info" which gives the URL of each image in a web page.

This document is intented to be pretty simple so that you can view the document source and mimic some of the elements you see here. This may all sound somewhat dishonest or plagiaristic, but, well... as long as you are not copying something 100% and using it for commercial purposes, we'll say you are surfing the web with a learner's permit.

(normally you are not breaking any laws by doing this... you are just learning how someone else creatively used HTML elements to achieve a certain look. It is always nice to give credit though, or at least e-mail the person and tell them how much you admire their page.)

Table of Contents

How to Post Your Web Page

On Antweb (EA)

Table of Contents

References

Table of Contents
Created January 30, 1997 for The Campuswide Honors Program by Sepehr Khonsari. Please direct all comments and questions regarding this document to sepi at khonsari dot com

This workshop sponsored by the CHP Peer Academic Advisors

Table of Contents

UCI Home Page

Apple Home Page