CS248 Menu Buttons

UNIX Programming

"Chapter Sixteen - Programming for the Internet: HTML"

Chapter Outline

Lecture Notes

Programming for the Internet: HTML

We will see how HTML, the language of the World Wide Web, is written and then set up a server so we can view our documents across a newtworks.

Here are some of the topics covered.

What is the World Wide Web?

The World Wide Web, sometimes called simply WWW or the Web, started in 1989 at the CERN laboratory Geneva. In 1992, CERN placed the sample interface and protocol in the public domain.

Internet has three parts: a server to hold the documents, a network to transfer the documents, and a client with a browser to view the documents.

Terminology

Standard are in documents called RFCs, and can be found at ds.internic.net.

Other documents related to WWW can be found at http://www,w3.org/.

The HyperText Transfer Protocol (HTTP)

This is the protocol that is used to transfer information between the client and server computers.

Multimedia Internet Mail Extensions (MIME)

this started as an extension to Internet e-mail, to allow transfer of information other than plain text.

Standard Generalized Markup Language (SGML)

This is an international standard, ISO 8879:1986, for defining structured documents.

Document Type Definition (DTD)

This is a set of rules that define how SGML is applied to a particular document type.

HyperText Markup Language (HTML)

This is a particular application of SGML which defines the markup language used with WWW.

Uniform Resource Locator (URL)

This is a way of specifying a resource, such as:

Uniform Resource Identifier (URI)

A URI is a more general naming scheme for network resources and includes the URL naming scheme.

Writing HTML

Before we look at HTML in detail, let's look at a very small HTML document, what it contains and how it appears in a browser.

Try It Out - A simple HTML Document

Here's the source of a very simple HTML document:

Here's what Netscape NAvigator 2.0 for the X Windows systems shows when it loads this source file:

How It Works

The markup parts of the HTML are enclosed in the angle braces, <>, and aren't displayed. Rather, they control how the remaining text is displayed.

The doctype statement defines the type of document and is usually omitted. The HTML and /HTML tags define the enclosed is HTML. The HEAD and /HEAD hold header information on the document. The TITLE and /TITLE hold the title to be display at the top of the browser window. The BODY and /BODY hold what is display on the web page. The H1 and /H1 define what is to be displayed as a larger heading. THe P and /P make up a paragraph of information.

A More Formal Look at HTML

So, the minimum legal HTML document consists of:

However, since this displays a blank page it isn't very useful!

HTML Tags

Let's look at the principal HTML tags.

Title

THe TITLE and /TITLE tags in the head part of the document define the document title.

Comments

Just like code, HTML documents can benefit from comments. An HTML comment looks like this,.

where the !- must be where it is shown.

Headings

There are six level of headings from the large H1 to the small H6.

Here is a level two heading.

Here is a level 3 heading the is centered on the page.

Text Formatting

Text is generally formatted as a continuous flow. The following tags allow additional control over formmating of text.

Text Styles

Text styles is done with pairs of tags. B and /B for bold. U and /U for underlined. I and /I for italocozed. SUP and /SUP for super script. SUB and /SUB for subscript.

Try It Out - Text Formatting

Here is some more HTML showing some of the text formatting tags.


When we view it with Netscape Navigator 2.0 we see:

How It Works

The DOCTYPE specifier is 3.0. It has additional features over 2.0. Notice that < can't be used in the text of our document. It is aspecial character, handled below.

Special Characters

A wide range of special charcters is defined. Some of the more common ones are:

Lists

There is an important group of tags that you can use for providing lists.

Here are the tags for unordered lists, directory lists, and menus

Inside the list, each item is started with a list item, LI, tag.

For numbered items, use the ordered list, OL.


The directory list is inside of DL and /DL tags. The items use pairs of tag, DT for definition text, and DD for definitin details.

Try It Out - Lists

Here's another example, containing lists:

The result of displaying the above information is:

Images

Adding picture to the web page is done using the IMG tag.

Here is the full tag, with attributes:

ALIGN can only take one of the values separated by |.

Try It Out - Adding an Image

Here's some HTML that inserts a picture of two of the author's favorite beers:


Here's what we will see.

How It Works

The browser loads the text and image separately and places them together on the screen.

Tables

A table is enclosed in TABLE /TABLE tags. Additional tags are used inside the table.

The table tag has attributes such as CELLPADDING and CELLSPACING that control the width and separation of cells inside the table

Try It Out - Tables

Here's a simple table:

This is how it displays:

How It Works

Each row starts with a TR tag. Each column is separated by a TD tag.

Try It Out - Another Table

Here's some HTML that generates a rather more complex table:

Here's what the table displays as:

How It Works

We add the BORDER attribute to specify the border aound cells.

Anchors or Hyperlinks

A very important part of the way World Wide Web documents work is the links between them.

The anchor tag is actually quite simple. It is:

The NAME attribute provides a way of naming the current location in a document. You man omit it.

The HREF provides a URL to go to when the link is activated.

Try It Out - Anchors

Here's a pair of HTML files that contain anchors allowing you to jump not only within each file, but also between them:


Here's a screen shot of part of html8.html, showing the highlighted links:

How It Works

Anchors work with <A NAME=...> tags. Hyperlinks work with <A HREF=...> tags.

Combining Anchors and Images

Images can be used as links if you combine anchors <:A> and images <IMG>.

Try It Out - Images as Anchors

Check out the following HTML:

Here is what you see:

How It Works

We used the <IMG> tag inserts a picture into the anchor tag.

Non-HTML URLs

We can use references to other things than HTML pages. For example, we can linke to graphic files.

We can also reference and have play audio files.

Anchors to Other Sites

We can reference pages out on the network (Internet). This is done using an absolute URL, of the form http://machine.name/file.html.

Try It Out - Links to Other Sites

Here's an example of a page using some less common URLs and some links to other sites:


When we view it we see:

How It Works

This example shows a page combining absolute URLs and some other less common ones.

Otherr Things to Do with Images

We can use the BACKGROUND attribute of the BODY tag to get a background picture.

Authoring HTML

We can use a text editor to create HTML files. Here are some ways to make HTML files.

Serving HTML Pages

We don't usually make web pages just to be viewed locally. We want to place the HTML files on a file server that is part of Internet! You do this by uplaoding the pages to An ISP (Internet Service Provider).

Networked HTML Overview

The diagram below shows how clients can request HTML documents stored on a server.

Setting up a Server

You can set up an HTTP server on an Linux machine using the httpd program. Many Linux machines include the Apache Web Server.

Clickable Maps

These are images that take different actions, depending on which location inside the image is clicked on.

Server-side Maps

The (x,y) location that was clicked on a map image is translated to a URL, which is returned to the client as the next page to load.

Here's a sample map file, in NCSA format, which relates different parts of the image to different URL's

On the Apache server, you simply put the map file in a subdirectory called maps in the main HTTP file directory and, in the client HTML document, specify an image file with an anchor, like this:

Client-side Maps

To make a client-side map, we use an <IMG> tag with the USEMAP attribute, like this:

Then, somewhere in the same HTML page, we include the actual map, in <MAP> </MAP> tags, like this:

Server-side Includes

Pages served by httpd programs is that they can be processed before they are returned to the client.

All server-side includes start with the sequence <!-# and end with the sequence ->.

All server-side includes have a directive and may also have an attribute. The directives are:

Here's an example of a server-side include that would insert the date and time that the current document was last modified:

Try It Out - Client-side Maps and Server-side Includes

HEre's some HTML that shows both a client-side map and some server-side includes..


The resulting page is:

How it Works

The #echo server-side include inserts the current date and time of the file into the page.

Tips for Setting up WWW Pages

Lastly, here are some tips for setting up Web pages:

Summary

We've learned the basics of HTML, the markup language used to write pages that appear on the World Wide Web.

CS 248 - UNIX Programming Web Site Menu
Information | Syllabus | Schedule | Online "Lectures" | Projects | Quizzes | Web Board


Copyright © 2001 by James L. Fuller, all rights reserved.