An explanation of the codes for the sample page

Count on HTML to create your page:
Part 1

Go to Part 2

After you have an idea for your web page and the elements you would like to incorporate into it, you will need to learn the language of the web. The web "speaks" HTML or HyperText Markup Language. HTML consists of program codes or tags that you insert at appropriate places to tell the browser how to display your page.

On a basic web page, you will use HTML codes for setting up the page structure, formatting text (such as using bold, headers, bullets, and line breaks), displaying graphics, and linking to another web page.

Deciphering the codes

An HTML file underlying a web page is shown on the left. You can easily see the HTML codes because they are enclosed in brackets. Some codes have a companion ending tag, shown with a forward slash (/), while others are used alone.

The file begins with the <HTML> tag and ends with the </HTML> tag. The forward slash denotes an ending tag. This HTML code encloses the entire file because it tells the browser that your file is a web page.

The <Head> tag is shown next with the ending tag right after the <Title> tags. The Head tag relays information about your web address. In this case, it also includes title information that will appear in the title bar at the very top of the browser window. The text you type between the <Title> tags will appear in the title bar.

Right after the ending </Head> tag, the <Body> tag appears. The ending </Body> tag is shown toward the very end of the file because, like the HTML tag, it encloses all the information you wish to display on your page.

The HTML, Head, and Body tags are considered standard parts of a web page. After the Body tag, the tags that you will use depend on how you would like to format the information on your page.

Figuring out a format

The example on the opposite page begins with a graphic centered at the top. The coding that makes this happen is shown by the <P Align=Center> tag and the <IMG SRC="write.gif" > tag. The paragraph alignment tag, <P Align=Center>, allows you to center a graphic or text while the image source tag, <IMG SRC="filename" >, makes a call to a graphic file that should be stored in your Unix account or on your computer along with your HTML file. The graphic in this case is called write.gif. Note that you must enclose the filename in quotation marks. Also note that there are no ending tags for the paragraph alignment and graphic tags.

After the graphic, the main heading, Creating the HTML File, appears centered on the page. The header tags, shown as <H1> and </H1>, display the text within the tags in a large, bold font. The number in the header tag, which can be from 1 through 6, determines text size. The smaller the number, the larger the text will appear. The centering tags, shown as <Center> and </Center> are also used to center the heading.

Next, the paragraph alignment tag is used again, but this time it aligns the text to the left. The text flows into one paragraph until it is broken by the paragraph tag shown as <P>.

The next tag in the file is <UL> which stands for unordered list. This tag, along with the list tag, shown as <LI>, allows you to create an indented, bulleted list. The <UL> tag tells the browser the type of list it is, while the <LI> tag indicates a bulleted item. The paragraph tag is also used to create separate paragraphs.

Learning to link

In the example on the opposite page, in the second paragraph of the bulleted list, you will see the tag: <A HREF="http://www.temple.edu/computer_services/web ">

This tag, along with the ending tag </A> creates a link to the specified web page. To create a link, type a web address (such as http://www.cnn.com) within quotation marks. Then, type the text that will appear as the clickable link between the two tags as shown:

<A HREF="http://www.cnn.com"> News Item</A>

People who view your page will see that News Item is a link. When they click on the link, they will go to the web page indicated within the quotation marks.

The tags for formatting text in bold typeface are also included in the same paragraph. Any text that you place between the two tags, <B> and </B>, will be displayed in bold type.

At the end of the last paragraph within the list tags, you will see the ending unordered list tag, </UL>. This tag is used to close the list.

Once you have closed the list with the </UL> tag, the text reverts back to left alignment from the

<P Align=Left> tag shown toward the top. The final line of text ends with the ending Body and HTML tags which were previously explained.


**Continue on to Part 2 of Count on HTML to create your web page or go back to the web sample page.**


1998. Temple University. All rights reserved.