Creating a Web Page--The Basics
CREATING A WEB PAGE--The Basics

CONTENTS
Tutorial

Tips for your pages:
Changing Background Colors
Changing Text Colors
Background Images
Tables
Where to go for more information
Notes about printing this document

This handout describes the basics of creating a Web page using Hypertext Markup Language (HTML). Prepared for the Academic Computing multimedia workshops, it includes a tutorial that shows you how to create a simple Web page. (For more information about workshops offered by the Multimedia Studio, visit the Web at http://acomp.stanford.edu/studio/sched.html.)

To create a Web page, use a text editor to write a document in HTML, then put it on a server that others can access across a network. A Web browser such as Netscape will read an HTML file, interpret it, and display the page based on the settings and preferences of that copy of the browser. As a result, you have limited control over how your page will look. The viewer can, for example, decide to not load the images you have imbedded in your page.

HTML is made up of a series of tags that specify to the browser the placement and formatting of items on a page. Almost every set of tags in HTML has an "open" and a "close" tag. There are a few exceptions, but for the most part, tags are opened before the item to be formatted and closed after it. Tags are enclosed in pointed brackets: < and >. To open a tag, simply type the name of the tag in the brackets: <HTML>. To close a tag, use a slash inside the bracket with the name of the tag: </HTML>.


Tutorial


The following procedures describe how to create a simple Web page using some basic HTML tags. To find out how to write more elaborate HTML, visit the Web at http://pcd.stanford.edu/mogens/intro/tutorial.html.

1. Write some text for your page.

You can create an HTML file using any text editor, but we suggest you use SimpleText. You can use a word processor such as Microsoft Word or WordPerfect; however, these applications add invisible formatting codes that can render your document unreadable by Web browsers. If you create your HTML document using one of these applications, save your document as "Text Only."

Type some text for your page. For instance, type your name, introduce yourself in a short paragraph, and then type your email address and a short list of your favorite foods. For example:

Lassie's Web Page

My name is Lassie. You may have seen me in movies, such as Lassie Come Home. I am a very famous collie. A collie is a type of dog that is used for herding sheep in places where sheep are still herded with dogs. In other places, collies just make good pets.

My email address is lassie@comehome.com.

My favorite foods include:
Dry dog food
Wet dog food
Steaks
Socks

If you are working in the Meyer or Tresidder computer cluster, create a new folder for your work on the desktop of the system you are using, then save your HTML file in this folder. (Note: When you are finished using the system, save your work on a disk and remove the folder you created from the desktop.)

To save your file, go into the File menu and select Save. Name your HTML file "index.html," which is the naming convention for start or "home" pages on the Web. For instance, the home page file for Stanford University is titled "index.html," but you arrive at this page when you point your browser to "http://www.stanford.edu/."

2. View your page in Netscape.

Launch Netscape Communicator. Select Open Page in Navigator... from the File Menu. In the dialog box that appears, select your index.html file, then click on Open.

Your file will appear in the browser window, but it will not be formatted. Steps three through twelve describe how to format your file by inserting HTML tags.

3. Make your name into a heading.

To make your name standout from the rest of the text on your page in a larger, bolded font, you can make it into a heading using one of six heading tags available in HTML. Heading 1 (H1) is the largest, and heading 6 (H6) is the smallest.

Insert the <H1> tags around the text of your name as shown below. The browser recognizes <H1>text</H1> as the instruction to display text as a level 1 header:

<H1>Lassie's Web Page</H1>

To reduce the size of your heading, use a different heading tag in place of <H1> (i.e., <H2> through <H6>).

When you are finished, save your file by going into the File menu and selecting Save. Your file should already be open in the Web browser window. To view your changes, click on Reload at the top of the browser window.

4. Bold text in your paragraph.

To bold text in HTML, insert the bold tags (<B> and </B>) around the text you want to affect, as shown below:

My name is <B>Lassie</B>. You may have seen me in movies, such as Lassie Come Home. I am a very famous collie. A collie is a type of dog that is used for herding sheep in places where sheep are still herded with dogs. In other places, collies just make good pets.

Save your file. In Netscape, click on Reload to see the change you made.

5. Add line spacing to your file.

To add line spacing to your file, use the paragraph tag <P> to add a double carriage return and the line break tag <BR> to add a single carriage return. These tags have no "close tag" counterpart. You must add these tags because Web browsers ignore any "white space" (e.g, carriage returns, spaces, or tabs that you placed in your file using a text editor) in an HTML file. The browser interprets white space as a single spacebar space when displaying a file.

<H1>Lassie's Web Page</H1>

My name is <B>Lassie</B>. You may have seen me in movies, such as Lassie Come Home. I am a very famous collie. A collie is a type of dog that is used for herding sheep in places where sheep are still herded with dogs. In other places, collies just make good pets.<P>

My email address is lassie@comehome.com.<P>

My favorite foods include:<BR>
Dry dog food
Wet dog food
Steaks
Socks

Note: You can also use the <PRE>...text goes here...</PRE> tags to force the browser to recognize carriage returns and multiple spaces. However, your text will be displayed according to the size of your viewers' browser windows, which reduces your control over the appearance of your Web page. In general, it's a good idea to use the <P> and <BR> tags.

Save your file. In Netscape, click on Reload to see the change you have made.

6. Create a bulleted list in your document.

To create a bulleted list, insert the list tags, <UL> and </UL> around the text that will be your list. The "UL" stands for Un-numbered List.

Define each bullet with the List Item tag, <LI>. This tag has no close tag counterpart.

My favorite foods include:<BR>
<UL>
<LI>Dry dog food
<LI>Wet dog food
<LI>Steaks
<LI>Socks
</UL>

Save the file. In Netscape, click on Reload to see your changes.

You can also create numbered lists. To do so, use the numbered (ordered) list tags: <OL> and </OL>. Use the same <LI> tag to denote list items in an ordered list. When you create an ordered list, the items in your list are automatically numbered; do not insert numbers before your list items.

7. Add a Horizontal Rule to separate parts of your page.

To add a horizontal rule before your bulleted list, insert the horizontal rule tag <HR>. This tag has no close tag counterpart:

My name is <B>Lassie</B>. You may have seen me in movies, such as Lassie Come Home. I am a very famous collie. A collie is a type of dog that is used for herding sheep in places where sheep are still herded with dogs. In other places, collies just make good pets.<P>
My email address is lassie@comehome.com.<P>
<HR>
My favorite foods include:<BR>
<UL>
<LI>Dry dog food
<LI>Wet dog food
<LI>Steaks
<LI>Socks
</UL>

Save your file. In Netscape, click on Reload to see your changes.

8. Center the title on the page.

Insert the <CENTER> tags around the text you want to center, as shown:

<CENTER><H1>Lassie's Web Page</H1></CENTER>

Tags must be properly nested. Tags within the body of other tags will not be formatted correctly by the browser. For instance, in the example above, the following tag order would not work:

<CENTER><H1>Lassie's Web Page</CENTER>

Save the file. In Netscape, click on Reload to see the changes you made.

9. Add anchor tags that will allow you to link to other documents.

Anchor tags let you link images or text to other Web pages. When you click on an anchored item, the browser responds by finding the data or page the link points to and loading it.

An anchor tag has the form <A HREF="URL">text</A>. "URL" stands for Universal Resource Locator. This is the address, or "path," to the data to which you are linking. It tells the browser where to find the data it needs on the Web in relation to where your page is located. If you wanted to add a link to Stanford's Web page, the anchor tag would look like this:

<A HREF="http://www.stanford.edu">link</A>

The URL above is called a "fully qualified" address. If you want to link to a Web page that is located in the same directory as your Web page, you can simply tell the browser the name of the file you want to link to and it won't look outside of the directory. This type of URL is called a "relative" address. In the following example, the first anchor tag has a fully qualified address and the second anchor tag has a relative address:

<A HREF="http://www.jagat.com/joel/socks.html">Socks</A>

<A HREF="dryfood.html">Dry dog food</A>

When you are finished adding anchors to your text, save your file. In Netscape, click on Reload to see the change you have made.

10. Add an email link.

An email link is an anchor tag with a different protocol specification (mailto: instead of http:). You can add an email link using a standard anchor tag. After the HREF attribute, place the phrase "mailto:", followed by the email address to which you want to link, in quotes as shown below:

My email address is
<A HREF="mailto:lassie@comehome.com">lassie@comehome.com.</A><P>

Save the file. In Netscape, click on Reload to see the changes you made.

11. Add the final tags required for a proper HTML document.

Open and close your document with the <HTML> and </HTML> tags. You'll notice that your page apparently worked fine without them, but it's still important to include them. Not all browsers work similarly. If your page doesn't follow the standard HTML format, it might not be interpreted correctly.

Use the Title tags (<TITLE> and </TITLE>) to give a page title to your document. The title will appear in the title bar of the browser window. It also appears as the name of your Web page in many search engines.

Place Head tags (<HEAD> and </HEAD>) around the title tags in your document.

Insert the <BODY> tag after the </HEAD> tag, at the beginning of the body of your document. Make sure to close this tag at the end of your document before you insert the </HTML> tag.

<HTML>
<HEAD><TITLE>Lassie on the Web</TITLE></HEAD>

<BODY>

<CENTER><H1>Lassie's Web Page</H1></CENTER>

My name is <B>Lassie.</B> You may have seen me in movies, such as Lassie Come Home. I am a very famous collie. A collie is a type of dog that is used for herding sheep in places where sheep are still herded with dogs. In other places, collies just make good pets.<P>

My email address is
<A HREF="mailto:lassie@comehome.com">lassie@comehome.com.</A><P>

<HR>

My favorite foods include:<BR>
<UL>
<LI><A HREF = "dryfood.html">Dry dog food</A>
<LI>Wet dog food
<LI>Steaks
<LI><A HREF = "http://www.jagat.com/joel/socks.html">Socks</A>
</UL>
</BODY>
</HTML>

When you are finished adding these HTML tags, save your file.

12. Add an image to your document.

To add an image to your document, use the image source tag: <IMG SRC="path of image file">. The image source tag works like an anchor tag; you must include the path to your image file inside the tag. An image must be saved in the GIF or JPEG file formats to be recognized by the Web browsers. To learn more about file formats, see the document Graphic File Formats at a Glance. Image path specifications follow the same address rules as Web pages.

<CENTER><IMG SRC="doc.gif"><H1>Lassie's Web Page</H1></CENTER>

Save the file. In Netscape, click on the Reload button to see your changes.


Tips for Your Pages


Changing Background Colors

To put background colors on your pages (instead of the default gray), include the BGCOLOR attribute inside your <BODY> tag, as shown:

<BODY bgcolor="#hexcode">

To specify the color you want, use the desired color's hexadecimal ("hex") code. A list of hex color codes is on the Web at http://www.lynda.com/hexh.html.

Following are some useful hex color codes:

FFFFFF white
FF0000 red
00FF00 green
0000FF blue
000000 black

Hex codes are pretty simple. You may have noticed a pattern above-three pairs of characters specify the amount of red, green, and blue that makes up the color. The pairs of characters are numbers converted to two hexadecimal digits that range from 00 (equal to zero) to FF (equal to 255).

Changing Text Colors

You can also change the colors of text on your page. To do so, add the TEXT attribute followed by a hex color code inside the <BODY> tag. This changes the color of all the text in your document. To determine the color of linked text in your document, insert the LINK attribute followed by a hex code inside the <BODY> tag. To determine the color of visited anchor links, follow the same procedure using the VLINK attribute. The following body tag gives the page a black background, white letters, and silvery links:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

To change the color of a single word or phrase, use the <FONT> and </FONT> tags as follows:

<FONT COLOR="#FF0000">This text will be red.</FONT>

Background Images

You can also specify an image to serve as the background of your Web page. The image will appear in the browser behind any text or other pictures. Instead of including BGCOLOR in the <BODY> tag, add BACKGROUND= followed by the path to the image.
<BODY BACKGROUND="../pics/dark.gif" TEXT="#FFFFFF" LINK="#9690CC">

Be aware that the browser may tile, or repeat, any image that is used as a background. This means that if the browser window is expanded to a size larger than the dimensions of your background image, the browser will repeat that image in the background to fill in the window.

Some people use the tiling feature to their advantage by specifying a small patterned image (with dimensions such as 150 by 150 pixels) for the background of their Web page. The browser tiles this image, giving users the illusion of a seamless patterned background. These seamless patterns are similar to what appears in the background of Macintosh desktops.

Tables

Tables can add a sophisticated, varied appearance to your Web page. See the document Formatting With Tables for more information about adding tables to your Web page.


Where to Go For More Information


A Beginner's Guide to HTML:

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

HTML Goodies (Master list of HTML tags and their attributes):

http://www.htmlgoodies.com/master.html

Introduction to HTML from Case Western Reserve University:

http://www.cwru.edu/help/introHTML/toc.html

Non-Dithering Colors by Hue (Hexadecimal codes for Web colors):

http://www.lynda.com/hexh.html

Explore! If you like something on another Web page, you can probably use the code that created it. While viewing a page in Netscape Navigator, select Document Source. Netscape will open the HTML version of that page.


Copyright ©, 1999, by The Board of Trustees of the Leland Stanford Junior University. Permission granted to copy for non-commercial purposes, provided we receive acknowledgment and a copy of the document in which our material appears. No right is granted to quote from or use any material in this document for purposes of promoting any product or service.
[ Academic Computing Publications ] [ Academic Computing ]
Academic Computing Publications
Document revised: April 1999