The Aim of this Session

This session will introduce setting up well-designed and reliable web sites for research projects, courses, and personal use at CHASS. The focus will be on the basics of the HyperText Markup Language (HTML), the use of images on the Web, as well as Web page design and construction.

Basic Definitions and Concepts

• World Wide Web is a world wide "web" of hypertext linked pages with vast database resources, such as online electronic journals, world-wide dictionaries and encyclopedias. One of the reasons the WWW is so popular is because of its ability to allow text, graphics, sound and video files, animation, etc., to be mixed together. Web pages are accessed by a Web browser through the HyperText Transfer Protocol (HTTP) and are written in a HyperText Markup Language (HTML). A Web page is accessed by a URL (Uniform Resource Locator).

• TCP/IP (Transmission Control Protocol/Internet Protocol) is the set of protocols that defines how machines on the Internet communicate.

Web pages, which are written in Hypertext Markup Language (HTML), are accessed by a Uniform Resource Locator (URL) that is sent to a server by your Web browser by means of the Hypertext Transfer Protocol (HTTP).

• HTML (HyperText Markup Language) is the coding language used to mark up text files with styles and links that are then rendered by World Wide Web browsers, such as Netscape or Internet Explorer. HTML is the primary focus of this session.

• A URL (Uniform Resource Locator) is the standard way to give the address of any resource on the World Wide Web. For example, the following URL contains the following information: the protocol to use when accessing the server (http); the Internet domain name of the site (www.chass.utoronto.ca), the port number to contact (8080, which is the default value for the CHASS servers); and the location of the page (/chass/tutor.html):

• A SERVER is a computer, or a software package, that provides a specific kind of service to client software running on other computers. A Web server makes Web pages available through the HTTP.

• A Web browser is a software program that allows you to navigate through the Web, like Netscape or Internet Explorer. Browsers read and interpret HTML documents and display their contents on your computer.

• HTTP (HyperText Transport Protocol) is the protocol (i.e., a language that computers use when talking to each other) for moving hypertext files across the Internet. It requires a HTTP client program on one end (= Web browser), and an HTTP server program on the other end.

HyperText Markup Language (HTML)

HTML (HyperText Markup Language) is the coding language used to mark up text files with styles and links for use with World Wide Web browsers, such as Netscape or Internet Explorer.

General Characteristics of HTML

Markup languages are used all the time by word processors (e.g., when you use the "reveal codes" command in WordPerfect) to mark up the physical characteristics of a document. For instance, the following sentence: "This is bold" is coded (approximately) by WordPerfect as "This is [BOLD] bold [BOLD]". Likewise, HTML is a markup language that uses special tags to define the characteristics of a document. Some important characteristics of HTML include:

• In contrast to the way that most word processors markup a text, HTML is first and foremost a logical (or semantic) markup language. Most of the tags define the abstract valuse of the text (such as "emphasized"). Nevertheless, HTML is sort of a hybrid, as it also contains many other tags that define the physical on-screen representation in the Web browser's window (such as "italicized").

• HTML is a "living language" in that it is constantly developing (technically it is an "extensible" language). The version of HTML that all (?) current Web browsers support is HTML 2.0. There are a number of proposals to changes in HTML and there is a HTML 3.2 specification available, though not all browsers support HTML 3.2.. In addition, some -- noteably Netscape and Internet Explorer -- have developed their own extensions to HTML that their browsers support, and perhaps only their browsers. Most browsers, however, are flexible, so that if there is tagging that it does not understand it will ignore it.

• HTML is a structured language in that there are guidelines controlling the markup of HTML documents (this will be discussed more below). It is important to follow these guidelines if you want your page to be rendered properly by all Web browsers.

• HTML documents are made up of tagged elements that can be either container tags or empty tags. Container tags are marked off by start and end tags, while empty tags are empty in that they do not require an end tag.

HTML Element Tags

HTML is composed of tagged elements that instruct Web browsers to perform a defined task (make text bold, insert a paragraph break, or format and number a list in a predetermined manner). HTML tags consist of individual elements inside angle brackets. Here are a couple common tags:

• <P> inserts a paragraph break in a document.

• <B> "turns on" the bold, while </B> turns it off. E.g., "This is bold" is tagged as "This is <B>bold</B>".

• <H1 ALIGN="CENTER"> begins a centred level 1 heading and </H1> ends the heading.

Characteristics of HTML Tags

As the above examples illustrate, HTML tags differ depending on what function they perform. Elements can be container elements or empty elements, and may take attributes or may not take attributes.

• Empty and Container Tags

HTML uses two types of elements: empty (or open) and container tags. These tags differ because of what they represent. Empty tags represent formatting constructs, such as line breaks and horizontal rules. These tags indicate "one time" instructions that Web browsers can read and execute without concern for any other HTML construction or document text.

Container tags define a section of text (or the document itself) and specify the formatting or construction for all of the text between the start and end tags. A container tag has both a beginning and an ending: the end tag is identical to the start tag, with the addition of a forward slash ("/"). Most containers can overlap and hold other containers or empty tags.

• HTML Tag Attributes

Many HTML elements take additional attributes to increase their functionality. These attributes are passed on to the client software and affect the way the element is applied to the section of text (or, with empty tags, how the tag's construct is displayed in the viewing software's window).

For example, the heading 1 element used above can take an alignment attribute that can make the heading centred or left or right alignment. NB. Attributes are contained within the start tag's angle brackets. E.g., <H1 ALIGN="CENTER">This is a heading</H1>.

• Entering Tags in HTML

HTML element names are case independent. You can write tags with any mixture of upper and lowercase characters. For example, you can write one tag that defines the formatting of a section of text as <BLOCKQUOTE>, <blockquote>, <BlockQuote>, or even <bLocKquOtE>. Nevertheless, it is a good practice to write tag elements in all uppercase so that they stand out from the rest of the text.

The Structure of HTML Documents

As noted above, HTML is a structured language in that there are certain rules to follow to write good HTML. An HTML document consists of three major containers, or structural blocks. Note the following example:

     <HTML>

          <HEAD>
             <TITLE> The Title goes in here </TITLE>
          </HEAD>

          <BODY>
               Put the body text in here.
          </BODY>

     </HTML>

The three major container elements of all HTML documents are:

• The HTML container element, set off by a <HTML> start tag and a </HTML> end tag. This is necessary for the beggining and end of every HTML document.

• The HEAD container element, set off by a <HEAD> start tag and a </HEAD> end tag. The elements in the Head provide the browser and user certain information about the HTML document, such as the <TITLE> element.

• The BODY container element, set off by a <BODY> start tag and a </BODY> end tag. This will be where the all of the material in your document is placed so that it can be viewed.
  

Some Examples

Before we go on to look at the tag elements in more detail, let's look at a couple examples:

• Example 1: A Model HTML Document.
• A Real-life HTML Document. (This is the Homepage from my Web site).

HTML Tags in More Detail

The follow section will go into a bit more detail on the different HTML element tags as they appear in the structure of an HTML document, i.e., Head first, so to speak!

The HEAD Element

The HEAD section of an HTML document precedes the main content of the document. It provides information for both the viewer software and the end user. Writing proper document heads is not only good HTML, it also prepares your documents to be used by additional applications, such as indexing robots/crawlers, as well as special WAIS searches.

HTML Elements for Head Sections

Element	Element Type	Description
BASE	empty	Base context document
HEAD	container	Document head
ISINDEX	empty	Document is a searchable index
LINK	empty	Link from this document
META	container	Generic meta-information. This is important if you want to create pages that can be indexed by some robots.
NEXTID	empty	Next ID to use for link name
TITLE	container	Title of document

For our purposes, the two important tag elements for the HEAD are the TITLE and META elements:

• The TITLE tag provides the title of your Web page. This is different from the file name of the HTML document. E.g., the file name of this page is "authoring.html" while the title is "Authoring for the WWW." It is the TITLE element that is displayed in the window title bar of most browsers, and they are also the main tag by which indexes identify your page. It is therefore important to make your title descriptive and short. Values that are too long might get cut off by the viewer's title bar or window, decreasing the effectiveness of the home page. A good rule of thumb for the length of a title is no more than a single phrase or no longer than 60 characters. Here is an incorrect use of the TITLE element.

• The META element is used by a number of Web indexing robots and crawlers. If you are creating a page that you want to be listed in these major search indexes, then it is a good idea to include META tags.

The BODY Element

The BODY of an HTML document contains the "meat" of the Web page. This is what everyone sees and reads when they access your page. There are innumerable element tags for this section, all which give you considerable latitude in the display of your page. Naturally, we'll only be able to cover a few of the more common ones.

HTML Elements for Body Sections

Element	Element Type	Description
A	container	Anchor: source and/or destination of a link
ADDRESS	container	Address, signature, or byline for a document or passage
B	container	Bold text
BLOCKQUOTE	container	Quoted passage
BODY	container	Document body
BR	empty	Line break
CITE	container	Name or title of cited work
CODE	container	Source code phrase
DD	empty	Definition of term
DIR	container	Directory list
DL	container	Definition list, or glossary
DT	empty	Term in definition list
EM	container	Emphasized phrase
H1	container	Heading, level 1
H2	container	Heading, level 2
H3	container	Heading, level 3
H4	container	Heading, level 4
H5	container	Heading, level 5
H6	container	Heading, level 6
HR	empty	Horizontal rule
I	container	Italic text
IMG	empty	Image; icon, glyph, or illustration
KBD	container	Keyboard phrase, such as user input
LI	empty	List item
LISTING	container	Computer listing
MENU	container	Menu list
OL	container	Ordered or numbered list
P	empty	Paragraph
PRE	container	Preformatted text
SAMP	container	Sample text or characters
SELECT	empty	Selection of option(s)
STRONG	container	Strong emphasis
TT	container	Typewriter text
UL	container	Unordered list
VAR	container	Variable phrase or substitutable
XMP	container	Example section

As the HTML standard changes, elements will be deprecated, or replaced by new elements with greater functionality. Deprecated elements will still be supported by existing WWW viewers but may not be in the future. Be prepared to review your older HTML documents for deprecated elements that may no longer be useful.

Some More Examples

Before we go on to look at the tag elements in more detail, let's look at a couple examples:

• Web Page with Links and Images
• Let's Look at this page.

For convenience, I have abbreviated NSCA's Beginner's Guide to HTML. Let's look at it now to go into a bit more detail on some of these links.

Setting Up a Web Page on CHASS

NB. CHASS users can create their own personal Web pages as long as they comply with the University's policy on appropriate use of information technology. The CHASS Facility has the right to restrict the resources (human and computing) devoted to creating and maintaining personal home pages.

We would appreciate it if you could include a disclaimer stating the you, and not CHASS, is responsible for the content of the material that you make available on the Web.

The base URL (Uniform Resource Locator) or address to the information you make available on the Web is:

          http://www.chass.utoronto.ca/~userid
      

where userid is your CHASS account name.

The following outlines the steps necessary for users with current computing accounts to set up personal Web pages at CHASS:

• Create your HTML documents in your Word Processor or in an HTML Editor (Make sure the suffix for the file is ".html". DOS users will have to change the name of their pages from ".htm" to ".html" after they are uploaded into their home directory at CHASS. If you name your homepage "index.html", this will be the page that a browser will automatically come to when accessing your site.

Here is a Template HTML document that you may want to use as a guide for your Web page.

• Create a "public_html" directory in your home directory at CHASS. By typing mdir public_html at the UNIX shell prompt (%) from your home directory.

The CHASS Web server will look for Web pages in a directory named public_html in your CHASS home directory. Any subdirectory of the public_html directory can also be used, so you can organize the location of your Web pages to make it easier to maintain. The specific URL that would be used to access:

          /homes/userid/public_html/page.html
      

would be:

          http://www.chass.utoronto.ca/~userid/page.html

• Set the permissions of your public_html directory by running the publish_html script from the UNIX shell (%) prompt to ensure that your public_html directory and its contents are available on the Web.

To do these steps Telnet to CHASS

• Upload your Web page and any necessary graphics to your public_html directory using FTP software such as Fetch on the Macintosh or WS_FTP on Windows. It is always good to test out your Web pages from your desktop computer before uploading it.