Analyze Your First Page

For Beachtech's Web Page Training Class

The GetStarted Page of the Class

Your first web page was created with a Wizard. You told the wizard what you wanted on your page and it generated the HyperText Markup Language (HTML) to create that page.

Look at your page in Netscape or Internet Explorer. Use File-Open to browse to your page (i.e., "C:\webclass\char\firstpage.html"). How do the colors look? Can you read the text against the colored background, if any?

The HTML contains both the text that you supplied, plus tags to tell the browser how to format it. You can recognize the tags because they start with a less-than symbol < and end with a a greather-than symbol >. Most tags apply to section of text, causing it to be shown in Bold or whatever.

In the HTML below, you should spot <CENTER>, which says to start centering the text and </CENTER> which says to to stop centering. Don't worry that you don't know what all the tags do in this example -- you will learn them over the next few days. Can you find the tag that causes your selected picture to display on your web page?

<HTML>
<!--This page was created with HTML Express-->
<HEAD><TITLE>My First Web Page</TITLE></HEAD>
<BODY BACKGROUND="WP0047.JPG" TEXT="#004080">

<CENTER>

<H1>Live from Tropical Anguilla</H1>

<HR WIDTH=50%>
</CENTER>

<CENTER>

<H2>On the Beach</H2>

<HR WIDTH=50%>
</CENTER>

<CENTER>
<img src="COVEBAY.JPG">
</CENTER>
<HR WIDTH=50%>

My name is BOb and I live in anguilla, british 
west indies, eastern caribbean.
My favorite sport is snorkeling.
My wife Mary Ann likes to build houses.
<HR WIDTH=50%>

<H3>Here are some links:</H3>
<UL>
<LI><A HREF="http://www.pe.net/~coolkev/">Kevin's Homepage</a>
<LI><A HREF="http://news.ai">anguilla</A>
<LI><A HREF="http://search.ai">search</A>
<LI><A HREF="http://hotels.ai">hotels</A>
</UL>
<HR WIDTH=50%>
You can reach me by e-mail at: <A HREF="mailto:[email protected]">[email protected]</A>

<HR>
This Web Page was created on 11/27/98 with <A HREF="http://www.pe.net/~coolkev/htmlexpress.html">HTML <i>Express</i></A>

</BODY>
</HTML>

Here is what the other tags in this sample accomplish:

IMG: This is the answer to the question above: Can you find the tag that causes your selected picture to display on your web page? IMG defines the source for a GIF or JPG file to be displayed in=line within the web page and can also control how it is displayed, somewhat.
HTML: Surrounds the entire page, which ends when </HTML> is encountered (see last line of listing).
HEAD: Surrounds the header portion of the page, which ends at </HEAD>. The tags in here control the Window title, how your page is indexed, and other matters, but do NOT usually appear in the browser window.
TITLE: The title to appear across the top of the browser window.
BODY: Surrounds the actual body of your page, which ends at </BODY> near the end of the listing. Notice that this tag has two attributes: BACKGROUND="WP0047.JPG" TEXT="#004080". These define values for the BODY tag-- the background image and the color for the text.
H1: Make the text into a Heading of the largest size. There are also headings of smaller size: H2, H3, H4, H5, H6.
CENTER: Centers the text and images that follow until </CENTER>
HR: End the current paragraph and insert a horizontal rule (aka line). You can specify the width of the line: <HR WIDTH=50%>
UL: Unordered List. This starts a list that is showned with bullets for each list item, rather than numbers.
LI: A List Item. There can be any number of List Items between <UL> and </UL>
A HREF=: Anchor for a "link" or Hypertext reference. The link can be some words of an image and ends at the </A> tag. This is how web pages link to each other. Much more on this topic later....

Back to the GetStarted Page