Intro to HTML

The Concept of HTML
Features of HTML
HTML Limitations
Types of Home Pages
Steps to Creating a Home Page
Some Information About Browsers

The Concept of HTML

World Wide Web documents, or "Web pages," use a language called HyperText Markup Language (HTML). This language consists of elements which describe to a client, or "browser," the structural make up of the document. The browser then displays the text using the cues it gets from the elements. These elements are marked (hence "Markup Language") using tags.

Elements begin with a Starting Tag, which consists of an angled bracket, "<" (less than sign), the "code name" of the element, and another angled bracket, ">" (greater than sign). Attributes of the element are put in the Starting Tag. Elements end with a Closing Tag, which consist of the angled bracket and a slash, "</", the "code name" again, and a final angled bracket, ">". Attributes are never put in a Closing Tag.

Confused yet? Here is an example of an element describing some text which should be rendered as a centered level one heading:

    <H1 ALIGN="CENTER">Getting Started</H1>
   ||  |Name| |Value_|||__The Text___||   ||
   ||  |             ||               |   ||
   ||  |_An Attribute||               |   ||
   ||                 |               |The||
   ||_The Starting Tag|            Closing Tag
   |                                       |
   |_______Level One Heading Element_______|

The great thing about HTML documents is that they can be used by all computers that understand plain old text. If you've ever had to try to read a Windows WordPerfect 5.1 document on a Mac Plus, you know what a great thing this is. If you've haven't tried this, be thankful you probably won't have to in the future.

According to Tim Berners-Lee, the "father" of the WWW,

"The concept of the web is of universal readership. If you publish a document on the web, it is important that anyone who has access to it can read it and link to it."

Return to Table of Contents.

Features of HTML

HTML 3.2 provides elements which:

Display text in a structured way.
Display graphics.
Create hypertext links to other documents.
Create hypertext links within documents.
Display bulleted and numbered lists.
Display horizontal lines.
Perform simple text formatting such as centering, bold, italics and large type.
Create a limited number of font sizes.
Create tables.
Create forms.

Return to Table of Contents.

HTML Limitations

HTML is powerful but has some limiting features.

HTML is not a desk-top publishing language. You (or anyone else) can not have exact pixel placement of anything in a Web document. The idea behind the WWW is that anyone, anywhere, using any software and hardware can view your pages. This means there is an infinite number of possible browser/platform/display device combinations. Also, all decent browsers are configurable by the user. You can not know how big the reader's screen is, what colors they use, if they can see color, at what resolution the screen is set, how wide the reader has their window open, or if they even use a monitor at all! In other words, you have little control over the exact appearance of your document.

Your job as an HTML author is to present information in a structured, logical, and meaningful way. This will allow the most flexibility for display. No matter how your document appears, the reader will still come away with whatever you wished to convey. With regards to publishing on the Web, the reader is in control, not the author. It's kind of a drag, but if your content relies so much on presentation that without the right presentation the message gets lost, perhaps you should consider using another format, such as GIF or PDF.

Here are some things to keep in mind when marking up documents:

You cannot choose between a variety of fonts as you would in a word processor.
Line breaks must be added manually.
Extra spacing doesn't matter. A single space is all that is recognized.
Text size is limited. A FONT SIZE command is available. It provides text sizes from 1 to 7. However, you may want to read "What's Wrong With FONT?" before using this element.
Graphics are not saved as part of the document. Moving HTML documents means moving each graphic image on the pages.

Return to Table of Contents.

Types of Home Pages

Web pages are created for different purposes. The content, use of graphics and complexity will differ depending upon their purpose. It is important to keep this in mind while you are planning and creating the page. It is also important to remember that pages are rarely islands; they fit in with a certain set of pages, which in turn fit into your school or department's pages, which in turn fit into the District's pages.

Purposes of Web documents include:

A school, department or organization home page.
School information, including course selection material and calendars.
An on-line newsletter.
A list of annotated links.
Hypertext research paper.
Information-gathering page.
A tutorial
Other....

Return to Table of Contents.

Steps to Creating a Homepage

Steps to making home pages are simple... once you get the idea!

Plan your site. Have an outline before you begin. This is especially important for more complex pages.
Open your text editor such as Notepad (Windows) or SimpleText or BBedit (Mac). You can use a word processor such as Word or ClarisWorks. If you do, be sure to save your file in ASCII (Text) format! Note: If you are typing in HTML in a word processor, do not save the file as HTML.
Type the text and HTML.
Save the file with an .htm extension.
Switch to your web browser software.
Open the document you created.
Check for errors and make sure the hyperlinks work.
Switch to your text editor, make corrections and re-save the file.
Switch back to Netscape after each correction and get your page on the screen and click "Reload" to see your latest corrections.

When you are starting out, it is helpful to write the HTML yourself. It helps you understand what is going on and makes debugging the pages easier.

Later on, you can also use an HTML Editor to help you write the code. There are many available on the Internet. Be aware, though, that many popular ones, such as PageMill, FrontPage and Netscape's editor, have a tough time producing standard HTML 3.2. The one we use in class is AOL Press 2.0.

Return to Table of Contents.

Some Information About Browsers

There are several browsers available for accessing the Internet and several versions of each browser. When you create Web documents, it is important to remember that not all browsers have the same capabilities for handling HTML codes. Below are some of the most popular browsers.

Netscape

Netscape was, a short time ago, by far the most popular graphic WWW browser in use. However, it is now in battle with Microsoft's Internet Explorer. Netscape is the browser that MIS supports and installs on MMSD's computers. There are many versions of Netscape: 1.0, 1.1N, 1.2, 2.0, 2.01, 2.02, 3.0, 3.0Gold, 3.01, 3.02, 4.0, 4.01, 4.02, 4.03, 4.04, 4.7. And no two are alike. And some are on Windows 3.1 computers, some are on Windows 95 computers, some are on Macs and some are on computers running Unix OSes. Because of this incredible variety, writing standard HTML makes even more sense. Sure, maybe something non-standard you do looks right to you using Netscape 3.01 on your Windows 95 machine, but it's not guaranteed to work on other platforms, even if they're running the same version of Netscape! Also, each new major revision of Netscape (2.0, 3.0, 4.0, 6.0) has been less tolerant of mistakes or "hacks" as the previous version. Version 6, which is in testing right now, will be very standards-compliant; it will even be able to tell you when it encounters incorrect HTML!

You probably already have a copy of Netscape on your computer. If you don't, or would like an upgrade, call the MIS Helpline at 267-1666.

Internet Explorer

Internet Explorer appeared in August, 1995, with the introduction of Windows 95. It has rapidly developed into a full fledged browser that currently challenges Netscape. Currently, Microsoft follows HTML standards closer than Netscape, but neither is perfect.

If you are using a version of Windows 95 that came with IE 3.0, you may wish to download Internet Explorer 5.01 at http://www.microsoft.com/ie/. Like the latest version of Netscape, it's a very large download. If you have Windows 98, you already have IE 5.0.

Lynx

Lynx is an excellent text only browser. It's very fast, because it ignores graphics. (You can, however, download graphics with Lynx and view them in another program, if you desire.) Lynx is good for testing how pages "look" to search engine spiders and to speaking browsers used by the blind/visually impaired. You can read more about Lynx at "What is Lynx, and why would I want to use it?".

You can get Lynx for Win95/DOS at http://www.fdisk.com/doslynx/lynxport.htm and MacLynx at http://www.edprint.demon.co.uk/se/lynx.html

Opera

Opera is a browser for use on Windows machines. They are developing a Mac version as you read this. Opera is very quick, very configurable, small (setup file fits on a floppy!), and you can open and browse in several different windows simultaneously. It does cost $18 for educators, however, whereas the other browsers above are free.

You can get Opera 3.62 at http://www.opera.com.

Return to Table of Contents.