What is a Web Page?

What is a Web Page?

When you are browsing the internet using your web browser, you are looking at web pages. Web Pages make up what you see on a screen anytime you type in a web address, click on a button, or type in a query on a search engine. A web page can contain any type of information, from book reviews to airline schedules, from newspapers to pornography, and from resumes to live pictures from the winter olymics. Web Pages are used by 92% of the top fortune 1000 companies, 93% of colleges and universities, and hundreds of thousands of small business, non-profit organizations, and K-12 schools (Wired, December 1997). These pages are used for markets, sales, information disemination, training, education, and just for fun. In 1996, 12 new web pages were added to the web EVERY MINUTE! (Change, 1997) Imagine how many web pages there are today! To say lots would be an underestimate.
So what makes up a web page? To start out, lets take a look at a simple page.

On this sample page, you see a very simple layout, with white text, a magenta background, and some blue and yellow text that indicates that type is "clickable" and will act as a link to another page, another website, or a screen where you can type in a message to Jake Plumber. You also see on this screen the menubar and buttons that make up the Netscape Navigator web browser. So what make up this page? Lets take a look at the "source code" or the HyperText MarkUp Language that makes up this particular page.

Here you see the source code, or HTML code that makes up the sample web page. If you look at the HTML line by line, here's what some of the tags (or codes) mean:

<HTML> The following text is in HyperText Markup Language (HTML).

<HEAD> The following information will be included in the header. This information includes <META> tags, which are used by search engines when they look at your site, and the <TITLE> of the page (for example, the title of this web page is "What is a Web Page?" as is located at the top of the window, above the menu bar.

</HEAD> The end of the header information

<BODY TEXT="#FFFFFF" BGCOLOR="#BF0D5A" LINK="#00FFFF" VLINK="#FFFF00" ALINK="#0000FF"> This is the information for the "look" and colors in the body of the web page. The text color will be white (the code for white is "#FFFFFF", the background color or BGCOLOR is magenta "#BF0D5A", links will be blue "#00FFFF" before they are visited, yellow after they are visited "#FFFF00", and dark blue "#0000FF" after they are visited. To find more of the codes for the colors in a web page, take a look at this color chart. Please note that links will always be underlined.

<CENTER> <H1> <B><I> A Sample WebPage: Stage One </I></B> </H1> </CENTER> The tags here indicate the justification, size, boldness, and italics of the text "A Sample WebPage: Stage One". If you scroll up to the sample page, you will see that this text is centered <CENTER>, bold <B>, and italic<I>. You will also notice that the text is large, or a heading size one. The tag for heading 1 is <H1>. Also notice that there are also end tags (the tags with the / in front of the command). This "ends" this formatting. If you don't have an end tag, all the text on the page will be in this large, bold, italic, centered format.

<HR> A Hard Return, or that nice little bar that divides the sections.

Hi, I am <A HREF="mailto:sirvine@american.edu">Jake Plumber</A> A link. The <A HREF...> indicates that the text will be a link to another place. In this class, the text "Jake Plumber" is a link to an email window. If you click on the text "Jake Plumber" you will open a window to send email to the email address sirvine@american.edu (which happens to be me). The </A> tag ends the link. A link will not work with out an end tag. Note that the link will be blue and underlined to indicate that it is a link.

I am a student in The School of Education at <A HREF="http://www.american.edu">The American University</A> Another link. The text "The American University" with be underlined and blue, and when you click on the text, you will go to American Universities web site (with the address http://www.american.edu). Notice the end tag.

<FONT SIZE=+3>C</FONT><FONT SIZE=+2>ool</FONT> S<FONT SIZE=+2>tuff</FONT> These tags control the size of the text. <FONT SIZE=+3> means the text will be three times as large as average size, <...=+2> will be two time largers than average size, etc. Note this is one way to have initial caps.

<IMG SRC="sun.gif"> This tag, although not in the above sample page, is VERY VERY VERY important. This tag places an image on the web page. In this case, the name of the image is sun.gif. It is very important that the name of the image in the HTML code is EXACTLY the same as the actual name of the image. For example, if the name of the image was actually Sun.gif, then it would not "show up" on this web page (notice the capital "s" in the name). To make my life easier, I try to always use all lower case letters when I save an image that I just created.

The table above includes examples of just some HTML tags. There are MANY MANY more. However, you really don't have to know HTML to make web pages. Lucky you. It is important however, to know a little about HTML, so you can find mistakes in your code. The most common mistake I run across in web page construction is when you call out for a picture or image, and you don't have the name EXACTLY the same (as in the Sun.gif vs sun.gif example above).

Now that you know enough HTML to be dangerous, lets start making web pages.
On to the Make a Web Page or go back Home.

If you have any problems with this CD (or ideas for changes), click on the icon or send email to sirvine@american.edu.

<HTML>	The following text is in HyperText Markup Language (HTML).
<HEAD>	The following information will be included in the header. This information includes <META> tags, which are used by search engines when they look at your site, and the <TITLE> of the page (for example, the title of this web page is "What is a Web Page?" as is located at the top of the window, above the menu bar.
</HEAD>	The end of the header information
<BODY TEXT="#FFFFFF" BGCOLOR="#BF0D5A" LINK="#00FFFF" VLINK="#FFFF00" ALINK="#0000FF">	This is the information for the "look" and colors in the body of the web page. The text color will be white (the code for white is "#FFFFFF", the background color or BGCOLOR is magenta "#BF0D5A", links will be blue "#00FFFF" before they are visited, yellow after they are visited "#FFFF00", and dark blue "#0000FF" after they are visited. To find more of the codes for the colors in a web page, take a look at this color chart. Please note that links will always be underlined.
<CENTER> <H1> <B><I> A Sample WebPage: Stage One </I></B> </H1> </CENTER>	The tags here indicate the justification, size, boldness, and italics of the text "A Sample WebPage: Stage One". If you scroll up to the sample page, you will see that this text is centered <CENTER>, bold <B>, and italic<I>. You will also notice that the text is large, or a heading size one. The tag for heading 1 is <H1>. Also notice that there are also end tags (the tags with the / in front of the command). This "ends" this formatting. If you don't have an end tag, all the text on the page will be in this large, bold, italic, centered format.
<HR>	A Hard Return, or that nice little bar that divides the sections.
Hi, I am <A HREF="mailto:sirvine@american.edu">Jake Plumber</A>	A link. The <A HREF...> indicates that the text will be a link to another place. In this class, the text "Jake Plumber" is a link to an email window. If you click on the text "Jake Plumber" you will open a window to send email to the email address sirvine@american.edu (which happens to be me). The </A> tag ends the link. A link will not work with out an end tag. Note that the link will be blue and underlined to indicate that it is a link.
I am a student in The School of Education at <A HREF="http://www.american.edu">The American University</A>	Another link. The text "The American University" with be underlined and blue, and when you click on the text, you will go to American Universities web site (with the address http://www.american.edu). Notice the end tag.
<FONT SIZE=+3>C</FONT><FONT SIZE=+2>ool</FONT> S<FONT SIZE=+2>tuff</FONT>	These tags control the size of the text. <FONT SIZE=+3> means the text will be three times as large as average size, <...=+2> will be two time largers than average size, etc. Note this is one way to have initial caps.
<IMG SRC="sun.gif">	This tag, although not in the above sample page, is VERY VERY VERY important. This tag places an image on the web page. In this case, the name of the image is sun.gif. It is very important that the name of the image in the HTML code is EXACTLY the same as the actual name of the image. For example, if the name of the image was actually Sun.gif, then it would not "show up" on this web page (notice the capital "s" in the name). To make my life easier, I try to always use all lower case letters when I save an image that I just created.