Virginia Commonwealth
University

HTML Basics

Creating a Home Page


Table of Contents

  1. Course Description
  2. Definitions
  3. Creating and Saving the File
  4. Page Structure and Basic Markup Tags
    1. HTML
    2. Head
    3. Body
    4. Title
    5. Heading
    6. Action: Start Home Page
  5. Tags that Control Spacing
    1. Paragraph
    2. Line Break
    3. Horizontal Rule
    4. Fixed Width Font
    5. Pre-formatted Text
    6. Block Quotes
    7. Action: Revise Home Page
  6. Lists
    1. Unordered Lists
    2. Ordered Lists
    3. Definition Lists
    4. Action: Revise Home Page
  7. Character Formatting
    1. Boldface Text
    2. Italics
    3. Action: Revise Home Page
  8. Links
    1. Linking to Local Files
    2. Linking to Remote Files
    3. Linking to a Section with a Document
    4. Electronic Mail
    5. Action: Revise Home Page
  9. In-Line Images
  10. Page Signature and Disclaimer
  11. Action: Finish Home Page
  12. Putting Home Page on Saturn
  13. Accessing your Home Page
  14. Publishing your Home Page
  15. General Comments

Course Description

Creating a Home Page with HTML (Basic)

(Prerequisite: Basic knowledge of Windows/Macintosh, Netscape 2.x and the World Wide Web) Topics include basic components of hypertext markup language (HTML) needed to create documents for the World Wide Web. Topics will include basic page creation and an introduction to markup tags including basic text formatting, lists, hypertext links, and inline graphics.

Top


Definitions

WWW
stands for the World Wide Web. Commonly referred to as the Web. An Internet client-server hypertext distributed information retrieval system which originated from the CERN High-Energy Physics laboratories in Geneva, Switzerland.

Hypertext
A term coined by Ted Nelson around 1965 for a collection of documents (or "nodes") containing cross-references or "links" which, with the aid of an interactive browser program, allow the reader to move easily from one document to another.

Hypertext link.
A reference from some point in one hypertext document to (some point in) another document or another place in the same document. A browser usually displays a hyperlink in some distinguishing way, e.g. in a different color, font or style. When the user activates the link (e.g. by clicking on it with the mouse) the browser will display the target of the link.

Hypertext Transfer Protocol
(HTTP) The client-server TCP/IP protocol used on the World Wide Web for the exchange of HTML documents. It conventionally uses port 80.

HTML
stands for HyperText Markup Language. HTML is a collection of styles (indicated by markup tags) that define the various components of a WWW document. HTML is a subset of the Standard Generalization Markup Language.

Browser
A program which allows a person to read hypertext. The browser gives some means of viewing the contents of nodes and of navigating from one node to another. Netscape and Lynx are browsers for the World Wide Web. They act as clients to remote servers.

Uniform Resource Locator
(URL) A draft standard for specifying an object on the Internet, such as a file or newsgroup. URLs are used extensively on the World Wide Web. They are used in HTML documents to specify the target of a hyperlink. Note: Also known as Uniform Resource Indicator (URI).

Markup
In computerized document preparation, a method of adding information to the text indicating the logical components of a document, or instructions for layout of the text on the page or other information which can be interpreted by some automatic system.

Markup Tags
are used by HTML to tell the Web browser (e.g. Netscape) how to display the text. The tags are paired <TAG></TAG>. They consist of a left angle bracket (<) followed by the name of the tag and closed by a right angle bracket (>). Tags are usually paired, e.g. <TITLE> and </TITLE>. The ending tags is similar to the beginning tag except for a slash (/) that precedes the text within the bracket. For example, <TITLE> tells the Web browser the beginning of the document title and </TITLE> tells the Web browser the ending of the document title. Note: HTML is not case sensitive. <TITLE> is equivalent to <title> or <TiTle>. Not all tags are supported by all Web browsers. If a browser does not support a tag, it just ignores it.

Top


Creating and Saving the File

You can create your file with a simple word processor (like Notepad or WordPad for Windows or TeachText for the Macintosh) or an on-line text editor (like penove, jove or vi in UNIX). You can also use a more powerful word processor (like Word or WordPerfect) or an HTML Editor (like Navigator Composer, Microsoft FrontPage), but it's not necessary. When you save your file, it's critical that you do the following: We'll use Notepad in our class.

Top


Page Structure and Basic Markup Tags

A web document consists of two parts: Head and Body. The HEAD primarily contains one piece of information: the TITLE of the document. All of the remaining contents of the web document are contained in the BODY.

The following five (5) tags are used to create a web document.

HTML: <HTML>

The HTML tag indicates to the web browser that this is a readable HTML file. This will be your first and last tags in your page source file.

Example:

<HTML>Your entire document</HTML>

Head: <HEAD>

The HEAD primarily contains one piece of information: the TITLE of the document.

Example:

<HEAD>Document Title Information</HEAD>

Body: <BODY>

All of the remaining contents of the web document are contained in the BODY.

Example:

<BODY>document context</BODY>

Title: <TITLE>

Every HTML document should have a title. The title is generally displayed separately from the document and is used primarily for document identification in other context (e.g. Bookmarks). Note: Please limit your title of 6 words or less.
Example:

<TITLE>Joe Smith's Home Page</TITLE>

Heading: <Hn>

HTML has six (6) levels of headings, numbered 1 (largest) through 6 (smallest). Headings are displayed in larger and/or bolder fonts than normal body text. Note: H4-H6 are smaller than regular text. Also, a blank line is inserted above and below each header.
Example:

<H1>Joe Smith's Home Page</H1>

The following is the skeleton of a basic WWW Document.
Example:

<HTML>
<HEAD>
<TITLE>Title of the Document</TITLE>
</HEAD>
<BODY>Contents of the Document</BODY>
</HTML>

Action: Start Home Page

Top


Tags that Control Spacing

Paragraph: <P>

A paragraph tag is used to separate one paragraph from another. A paragraph tag inserts a blank line between the text prior to paragraph tag and the text following the paragraph tag.

In general, the browser ignores any indentations, multiple spaces or blank lines in the source text. One noted exception is "pre-formatted" text which we will cover later. Therefore, HTML relies entirely on the tags for formatting instructions and without the <P> tags, the document would be one large paragraph. The ending paragraph tags </P> is optional.

Example:

Welcome to HTML. This is the first paragraph<P>Now you
are reading the second paragraph.

Click to see Results

Note: multiple paragraph tags are ignored. In other words, <P> has the same affect as <P><P><P>.

Line Break: <BR>

A line break is used to start a new line of text or to break a line at a specific point. A line break, like the paragraph tag, is usually a single tag, i.e. There is no </BR>.

Example:

This part of the sentence is on the first line<BR>and this part is on the second line.

Click to see Results

Horizontal Rule: <HR>

Horizontal Rules are used to visually separate text and can be place almost anywhere in the document.

Example:

Here are the items above the line.
<HR>
And here are the items below the line.

Click to see Results

Fixed Width Font: <CODE>

The <CODE> tag defines text that should be shown in a fixed width font. Many browsers use the same font for the CODE and TT tags. For many lines of fixed width text, with the line breaks and other whitespace specified by the page author, use the PRE tag.

Example:

<CODE>
This is text displayed in a fixed width font.
</CODE>
<BR>
This is text displayed in a variable width font.

Click to see Results

Pre-formatted Text: <PRE>

The pre-formatted text tag <PRE> is used to preserve the tabs, indentations, and line spacing in your original source text. Netscape and other graphical browsers display pre-formatted text in fixed font, such as Courier; other text appears is a proportional font, such as Geneva or Times.

Example:
<PRE>
NCAA BB  COLONIAL ATHLETIC ASSN 1996 FINAL

  FINAL               1ST 2ND     TOTAL
                      --- ---     -----
  NC WILMINGTON        26  17       43
  VA COMMONWEALTH      23  23       46    FINAL
</PRE>

Click to see Results

Block Quotes: <BLOCKQUOTE>

Block quotes tags are used to set paragraphs apart from the text. This tag set indents a block of text from the left and right margins, and inserts a single line space above and below the block.

Example:

In May, Virginia Commonwealth University's School of Business unveiled its professional Direct Marketing Certification program. It delivers graduate-level studies that businesses are demanding to keep pace with this contemporary marketplace phenomenon. The new modular weekend program -- offered through VCU's Interactive Marketing Institute -- combines elements of a traditional M.B.A. program with direct marketing tools and techniques that professionals need as this strategy expands.
<BLOCKQUOTE>
"To do marketing well today, it needs to be direct," said Pamela Kiecker, Ph.D., executive director of the Interactive Marketing Institute. A 15-year veteran marketer, Kiecker also chairs the school's Department of Marketing and Business Law.
</BLOCKQUOTE>
"We're moving away from broadcast messages to one-on-one communications," she said. "People don't want to be a number, an account. People want to be addressed as individuals, and direct marketing is the way businesses can do so effectively and efficiently."

Click to see Results

Action #2: Update Home Page

Top


Lists

HTML supports three (3) types of lists: unnumbered, numbered, and definition. It should be noted that lists are indented and can be nested.

Unordered: <UL>

Unordered lists are commonly referred to as bullet lists. Use the <UL> tag to begin an unordered list and </UL> tag to end the list. Individual items in the lists are specified with the <LI> or "list item" tag. Note: there is no corresponding </LI> tag.

Example:

Here are things that I need to do this weekend
<UL>
<LI>Do some outside work (between the rain drops) such as wash the car, rake gum balls, and spread some mulch
<LI>Organize my toolshed
<LI>Clean the bathrooms
</UL>
I hope I have time to finish them.

Click to see results

Ordered Lists: <OL>

To create a ordered list use the <OL> tag at the beginning of the list and the </OL> at the end of the list. Again, items within the list are specified by the <LI> tag.

Examples:

Ordered List

My four favorite sports are
<OL>  
<LI>professional baseball
<LI>college football
<LI>college basketball
<LI>golf
</OL> 
Enjoy the games!!!
Click to see results

Nested List

My four favorite sports are
<OL>
<LI>professional baseball
<LI>college football
<LI>college basketball
     <UL>
     <LI>VCU 
     <LI>Penn State
     <LI>Wake Forest
     </UL> 
<LI>golf
</OL>
Enjoy the games!!!
Click to see results

Definition Lists: <DL>

Definition Lists are usually used, as stated in the name, for definitions. The list is made up of alternating a term (identified by the <DT> tag) and a definition (identified by the <DD> tag). Web browsers generally format the definition on a new line.

Example:

<DL>
<DT> Browser
<DD> A program which allows a person to read hypertext. The browser gives some means of viewing the contents of nodes and of navigating from one node to another. Netscape and Lynx are browsers for the World Wide Web. They act as clients to remote servers.
<DT> Hypertext
<DD> A term coined by Ted Nelson around 1965 for a collection of documents (or "nodes") containing cross-references or "links" which, with the aid of an interactive browser program, allow the reader to move easily from one document to another.
</DL>

Click to see results

Action #3: Revise Home Page

Top


Character Formatting

Boldface Text: <B>

Most, but not all, browsers display text as bold when you use the <B></B> tag set.
Example:

I like Disneyworld, but I <B>do not like</B> standing in line.

Click to see results

Italics: <I>

Many, but not all, browsers display text in italics when you use the <I></I> tag set.

Example:

My favorite place in Disneyworld is <I>Adventureland</I>.

Click to see results

Action #4: Update Home Page

Top


Links

One of the most important features of HTML is its ability to interconnect with other documents.

Linking to Remote Files

The basic format for links are:

<A HREF="protocol://<domain name>/<requested file>">visible link</A>

where:

<A
is called the anchor
HREF="protocol://<domain name>/<requested file>"
specifies the filename that is being pointed to
visible link is text (or graphics) that will serve as the hypertext link in the current document
</A>
is the ending anchor tag
Example: <A HREF="HTTP://www.vcu.edu/index.html">remote file</A>

Results in:

Example: remote file

Linking to Local Files

The basic format for linking to a local file is:
Example:<A HREF="localfile.html">local file</A>

Results in:

Example:local file

Linking to a Section within a Document

You may link a particular section within a document. First you need to set the target using the anchor tag along with the name attribute.
<a name="target_name"></a>
To set a link to that target from somewhere else in that document you would use the html code:
<a href="#target_name">visible text</a>

You can also link to a target that is defined in another document, using the following HTML code:

<a href="computer/file/#target_name">visible text</a>
Example:

<a href="sample.html#rams">VCU Rams </a>

Electronic Mail

The "mailto" link allows electronic mail to be sent directly from a HTML document. As a web author adding an email link to your home page 1) tells visitors to your page who is responsible for its content and 2) enables visitors to contact them with questions or suggestions about their pages. The form for adding an e-mail link to your page is:

<A HREF = "MAILTO: your_email@address">your_email@address</A>

Example:

<A HREF="MAILTO:webmaster@www.vcu.edu">VCU Webmaster</A>

Click to see results

Note:

Action #5: Update Home Page

Top


In-line Images

An in "in-line" image is a graphics file (e.g. gif, jpeg) that displays as part of your HTML document. It appears automatically if the user turns on "Auto-Load images" in the Options menu. If that option isn't turned on, a place holder appears instead, and the graphics file can be downloaded later. To add an in-line image, you specify the image source using this format:

<IMG SRC="graphics filename" ALT="alternate text">
where "graphics filename" is the name of the graphics file and "alternate text" is displayed if graphics is turned off of if the pages is being viewed by a non-graphical browser like lynx. The alt="alternate text" is optional.

For Netscape: If images are turned off, you will see some type of graphical marker. Netscape 2.0 displays . If alt="graphic name", then the words "graphic name" will appear beside the graphical marker.

For LYNX: If alt is not included then the browser will display [IMAGE]. If alt="", nothing will be displayed. If alt="graphic name", then the browser will display graphic name.

Be sure to include the quotation marks around the file names.

Top


Page Signature and Disclaimer

All VCU Web Pages should include a signature with the following attributes.

  1. Departmental, etc., names are to be easily identifiable and completely spelled out.
  2. Home pages will include the name and e-mail of the responsible person or entity, e.g., webmaster@vcu.edu
  3. Top level pages (and preferably, secondary pages) will include a date of last update.
Examples of appropriate last update lines include:

       Date Last Modified: September 26, 1996 
       Expiration Date: June 30, 1998 
       Updated each business day. 

All VCU Personal Home Pages must include a disclaimer, such as:

     This page does not reflect an official position of Virginia
     Commonwealth University. 

Action #6: Finish Home Page

Top


Putting Home Page on Saturn

Note: Saturn is an IBM RS/6000 multi-user, timesharing computer running the AIX (UNIX based) operating system.

Moving Your Account to Saturn (from atlas or titan)

If your account is on either the atlas or titan RS/6000 computer system, you will need to move your account to the saturn system. To move your account, you will need to enter the command

goto-saturn
from the Unix prompt. If you use the UCS-AC menu, you need to "quit" the menu (type 'q') to get to this prompt. After you are done, type "menu" to get back into the menu or logout, as desired. To learn more about this process, please visit the web page Moving to the Saturn Computer System.

Initial Saturn Setup

In order to create a "home page" in your saturn account, you must create a "Web" directory to contain your HTML documents and allow the WWW server "read" access to the documents. While this will slightly relax the security of your account area, if you follow these instructions your exposure will be minimized.

You will need to modify the permission on your "home directory" and create the "public_html" directory before you can start creating Web pages. We have created a program to do this for you.
Simply enter the command

makeweb

from the Unix prompt on saturn. If you use the UCS-AC menu, you need to "quit" the menu (type 'q') to get to this prompt. After you are done, type "menu" to get back into the menu or logout, as desired.

Uploading a file to saturn

If you created your homepage on a Macintosh or a PC, you will then need to upload the homepage to saturn with Fetch or Winsock FTP respectively. These applications are available from the Network Desktop page.

Setting Permissions on your Documents

Your "home page" (the initial entry point to your Web documents) should be named "index.html" to keep people from looking at all documents in your Web directory without following your specific links. After you have created a new document you must enter the command

chmod 644 [filename]

before you or anyone else can view it using the Web server.

Top


Accessing your Web Page

There are certain standards in the way the WWW server operates that dictate the way you must set things up. The server runs as a standard "user" on the system so it uses the "other" permissions on your directory and files. It will look for Web documents ONLY in a directory called "public_html" in your home directory (or in sub-directories under that directory). The URL address for these documents is

http://saturn.vcu.edu/~[userid]/[filename]

where "[userid]" is your login id on the system and "[filename]" is the actual name of the file (do not include the brackets "[ ]" in your actual address). Remember, in order for browsers to process HTML documents properly, the "filename" must end in ".html". If no filename is included then the browser looks for a file named index.html.

Top


Publishing your Home Page

Once you have completed your home page and you are satisfied with its appearance, you can submit your URL to be included in the VCU Faculty and Staff Homepage Directory.

Top


General Comments:

  1. Please remember to follow VCU's Web Guidelines when creating your Web documents.

  2. Organizational homepages must

  3. Personal Home Pages must include a disclaimer.

  4. All Web Pages should include a signature file.

  5. Avoid overlapping tags, such as

    <B><I>Title 96</B></I>

Top


Date Last Modified: October 6, 1998
Please send comments to Web Support