EMC/Paradigm Benchmark Resource Center

main home page / cover page / student resources

How do I create a simple Web page using HTML?

To create Web pages, you can either write scripts (specification files) in Hypertext Markup Language (HTML) or use a software package known as a Web authoring program. An example is Microsoft FrontPage.

Web authoring programs were developed so that users could create Web pages without having to learn HTML. Learning HTML, however, is not difficult, and creating pages directly in HTML gives you considerable flexibility because you are not limited to the tools provided by an authoring program.

HTML Basics

The most important components of an HTML script are tags. A tag is an HTML formatting command. It specifies a feature or element of an HTML page, such as a title, heading, or paragraph. HTML tags are usually written in uppercase letters and enclosed within less than (<) and greater than (>) symbols, which are referred to by HTML script writers as brackets:

<H1> HTML tag for "first-level header"

Most HTML tags consist of two parts, an opening tag and an ending tag. The ending tag contains a forward slash (/), as in this example:

<H1>This is my first Web page</H1>

The material that comes between the two tags is the argument, or content, of the tag. The argument contains the material that is acted on by the tag. The example shown formats the argument "This is my first Web page" as a first-level header.

Every HTML page begins with the HTML tag <HTML> and ends with the tag /HTML>.

The header tags <HEAD> and </HEAD> surround introductory material such as the title of a page. Every Web page needs a title that can be referenced by the bookmark or hotlist feature of a browser. In the preceding example, the title tags <TITLE> and </TITLE> surround the title "My First Web Page." The commands that specify the body of the Web page appears between the body tags <BODY> and </BODY>.

Headings and Paragraphs

The most common elements that appear within the <BODY> and </BODY> tags are headings and paragraphs. The heading tags are <H?> and </H?>. The question mark should be replaced with a number between 1 and 6, with 1 being the largest heading and 6 being the smallest. The paragraph tags are <P> and </P>. The paragraph end tag </P> is optional.

Try It Yourself

HTML Basics

Open a word processing program or text editor and enter these lines:

<HTML>

<HEAD>

<TITLE>My First Web Page</TITLE>

</HEAD>

<BODY>

<H1>This is my first Web page</H1>

</BODY>

</HTML>

Check to make sure that you have entered the above text correctly. Then save the text as an ASCII file called "MyPage.htm". Start up your Web browser application and open the file "MyPage.htm" in it. You will see the Web page created by your script.

Headings and Paragraphs

Open a new word processing document and enter the following lines:

<HTML>

<HEAD>

<TITLE>My Second Web Page</TITLE>

</HEAD>

<BODY>

<H1>Welcome to my HTML tutorial page.</H1>

<H3>Markup Languages</H3>

<P>HTML is a markup language. It provides codes, known as tags, for specifying the characteristics of various elements on a page.</P>

<H3>Hypertext</H3>

<P>HTML is used to create hypertext documents, collections of pages that contain links to other pages and documents.</P>

</BODY>

</HTML>

Save this file as "MyPage2.htm". Then open the file in a browser so that you can view the results.

Lists

A list is a collection of items that appear one after the other. Lists are often numbered or bulleted. To create a numbered list, use the ordered list tags <OL> and </OL>. Begin each item in the list with the list item tag <LI>.

A bulleted list is created using the unordered list commands <UL> and </UL>.

Links and Attributes

A link, created by the link tags <A> and </A>, provides a connection to another part of a page, to another page, or to another Web site. A typical link looks like this:

HREF =". . ." is an example of an attribute, a command that can be added to a tag to provide an option or additional information. The HREF attribute specifies what the link will link to. In the example given, the link is to the URL for the IBM Web site. The command given above creates the following line in a Web browser:

Go to IBM Web site.

Notice that a link is indicated in a browser by underlining. Browsers also indicate links by displaying them in a color different from that of the surrounding text (see "Adding Colors," below). When a user clicks on a link, he or she is transferred to the place indicated in the HREF.

You can also write links to other pages on a local hard drive. To do so, simply list the pathname for the file within the quotes that are part of the HREF attribute. From right to left, a pathname consists of the name of the file that you are linking to and the names of nested folders or directories, separated by forward slashes (/). Here are some examples:

The following command creates a link to a file called "pumpkinsoup.htm" located in the current folder or directory:

<A HREF="pumpkinsoup.htm">Cold Pumpkin Soup.</A>

The following command creates a link to a file called "pumpkinsoup.htm" that is in a folder or directory called "cookbook" that is located within the current folder or directory:

<A HREF="cookbook/pumpkinsoup.htm">Cold Pumpkin Soup</A>

3. The following command creates a link to a file called "pumpkinsoup.htm" that is in the folder or directory one step up from the current folder or directory:

<A HREF=". . /pumpkinsoup.htm">Cold Pumpkin Soup</A>

4. The following command creates a link to a file called "pumpkinsoup.htm" that is in a folder or directory called "cookbook" that is two steps up from the current folder or directory:

<A HREF=" . . / . . /cookbook/pumpkinsoup.htm">Cold Pumpkin Soup</A>

Try It Yourself

Numbered Lists

Type the following into a word processor:

<HTML>

<HEAD>

<TITLE>Recipe for Cold Pumpkin Soup</TITLE>

</HEAD>

<BODY>

<P>Here is a recipe for making cold pumpkin soup:

<OL>

<LI>Begin with two pounds of raw pumpkin, cubed.

<LI>Cook the raw pumpkin over medium high heat until it is soft.

<LI>Remove from heat, drain, and place in food processor.

<LI>Add to pumpkin in processor: 1/4 cup butter, 1 cup milk, 1/2 cup cream cheese, 1 tsp. vanilla, 1/4 cup sugar, and spices (cinnamon, nutmeg, allspice, coriander, anise, or whatever you prefer) to taste. Process until smooth.

<LI>Add water to processed soup until the desired consistency is reached. Chill the soup in the refrigerator before serving. Enjoy!

</OL>

</BODY>

</HTML>

Save this document as an ASCII file with the name "pumpkinsoup.htm". Then open the file in a browser to view it. After viewing the file, close it, but do not delete it from your hard drive. You will need the file for exercises later in this tutorial.

Bulleted Lists

Open your file "pumpkinsoup.htm" in a word processor. Change the command <OL> to <UL> and the command </OL> to </UL>. Save the document as an ASCII file, keeping the name "pumpkinsoup2.htm." View the file by opening it in a browser.

Try It Yourself

Links and Attributes

Here is the HTML code for a bulleted list containing one item, a link to the NASA Web site:

<H3>Government Web Sites</H3>

<UL>

</UL>

Write an HTML script, using the code given above, and adding the following links to the list:

The Department of Education (http://www.edu.gov)

FedWorld (http://www.fedworld.gov)

The White House (http://www.whitehouse.gov)

The Library of Congress (http://www.thomas.loc.gov)

Save the script as "govsites.htm". Then view it in a browser.

Links To Other Pages

Create a folder or directory on your hard drive called "cookbook". Transfer the file "pumpkinsoup.htm" that you created earlier to this folder. In a word processor, type in the following script and save it in the "cookbook" folder as an ASCII file called "summersoups.htm".

<HTML>

<HEAD>

<TITLE>Some Summertime Favorites</TITLE>

</HEAD>

<BODY>

<P>Click on the following links for some of my favorite cold soup recipes:</P>

<UL>

<LI><A HREF="pumpkinsoup.htm">Cold Pumpkin Soup</A>

<LI><A HREF="gazpacho.htm">Gazpacho</A>

<LI><A HREF="vichyssoise.htm">Vichyssoise</A>

</UL>

</BODY>

</HTML>

Open your file "summersoups.htm" in a Web browser. Click on the Cold Pumpkin Soup link. Doing so should take you to the page created by the file "pumpkinsoup.htm".

formatting text

The following formatting tags can be used to format text:

<B>This text will appear in boldface.</B>

<I>This text will appear in italics.</I>

<B><I>This text will be in boldface and in italics</B></I>

<BIG>This text will be bigger than the surrounding text</BIG>

<SMALL>This text will be smaller than the surrounding text</SMALL>

The size of a font can be specified by using the font tags <FONT> and </FONT> and the SIZE attribute, as follows:

<FONT SIZE=5>This text will appear in font size 5.</FONT>

Sizes can be from 1 to 7, with 1 being the smallest and 7 being the largest.

horizontal rules

To create a horizontal rule, use the horizontal rule tag <HR> without a closing tag. An <HR> tag can have the following attributes:

ALIGN=". . ." The ellipsis (. . .) should be replaced by LEFT, RIGHT, or CENTER.

SIZE=". . ." The ellipsis should be replaced by a number, 2 or higher, that specifies the thickness of the rule in pixels.

WIDTH=". . ." The ellipsis should be replaced by a number that specifies the width of the rule in pixels.

adding colors

Colors in HTML scripts are expressed in one of two ways, as color names or as numbers. The color names supported by various browsers differ, so it is best to use numbers. The following basic color names (given with their associated numbers) are supported by most graphical browsers:

Black #000000 Lime #00FF00

Silver #C0C0C0 Olive #808000

Gray #808080 Yellow #9ACD32

White #FFFFFF Navy #000080

Maroon #800000 Blue #0000FF

Purple #800080 Teal #008080

Fuchsia #FF00FF Aqua #00FFFF

Green #008000 Red #FF0000

The sixteen colors above are the basic ones given in the W3 Consortium specification for HTML 3.2. These are the sixteen standard colors of the Windows VGA palette. Common browser applications support other color names as well.

To change the background color of a Web page, use the BGCOLOR attribute with the <BODY> tag, as follows:

To change the color of all text in a page, use the TEXT attribute with the <BODY> tag, as follows:

To change the color of a link that has not yet been selected by a visitor to your page, use the LINK attribute with the <BODY> tag, as follows:

To change the color of a particular bit of text, use the COLOR attribute with the font tags <FONT> and </FONT>, as follows:

<H1><FONT COLOR="#EE82EE">This heading is violet.</FONT></H1>

Try It Yourself

Formatting Text

Open the file "pumpkinsoup.htm". Add a <FONT> tag and SIZE attribute to make the first paragraph appear in size 5 type. Add a <FONT> tag and SIZE attribute before the first list item to make the material in the list appear in size 3 type. Add a <BIG> tag to make the word "raw" in the first listed item bigger. Then add a <B> tag to make the word "Enjoy!" in the last listed item boldface. View the results in your Web browser.

Horizontal Rules

Open the file "pumpkinsoup.htm" in a word processor and add the following material after the <BODY> tag:

View the results in a Web browser.

Adding Colors

Open the file "pumpkinsoup.htm" in a word processor and change the background color to orange. View the file in your Web browser.

Adding images

Popular formats for images on Web pages include the Graphics Interchange File Format, or GIF, and the Joint Photographic Experts Group format, or JPEG. Many graphics programs allow users to save files in GIF or JPEG format, with the extensions .gif, .jpg, or .jpeg. To add an image to an HTML script, use the image tag <IMG> along with the SRC attribute, as follows:

Try It Yourself

Adding Images

Use a graphics program such as CorelDRAW or Adobe Photoshop to create a simple drawing of a pumpkin, or open a clip art image. Save the drawing as a JPEG file with the file name "pumpkin.jpg" in the "Cookbook" folder or directory alongside the file "pumpkinsoup.htm". Open the file "pumpkinsoup.htm" in a word processor. Add the following command before the </BODY> tag:

Save the file "pumpkinsoup.htm" as an ASCII file. Then open it in a Web browser.

learning more

There are many fine manuals on the market today that provide step-by-step instructions for learning HTML. Check the shelves of your local bookstore to find one of these manuals. Experiment with the tags and attributes that you have learned in this lesson, using them to create your own Web pages. Try constructing your own Home Page using these tags and attributes, and have fun. To learn more, purchase one of the many fine HTML manuals available today. You can find such manuals at many bookstores. For information on the HTML 3.2 specification, see http://www.w3.org/TR/REC-html32. For information on the draft version of the latest HTML specification, HTML 4.0, see http://www.w3.org/TR/WD-html40-970708/contents.html.

Click here to see a text-only printable version of this page.