Leland Initiative Web Tutorial Series: Lesson 2--First Steps/Anatomy of a Web Page

Leland Initiative Web Tutorial Series:
Lesson 2--First Steps/Anatomy of a Web Page

Introduction--Ask Yourself Some Questions First

In the previous lesson, you learned some basic facts about the World Wide Web and some of the advantages of using it.

In this lesson, I am going to introduce you to the basic elements of a web page. I will also show you how to see the coding behind a web page that you are viewing.

But before we get into that, I want you to think a little more about some of the questions you should be asking before you make your first web page. You should keep these questions in mind during all of the coming lessons--if you do, I think you may have a clearer idea of exactly why you are building a web site in the first place.

Planning is always the first step in creating a web site. If you plan out your web site before you start on it, then you'll probably save yourself a lot of time while you're actually building it. Think of writing a research paper. How do you start writing this paper? Well, first you'll want to state a purpose for the paper. Then, you should make an outline for the paper. Only after defining the paper's purpose and devising an outline should you actually start writing the paper. You should do the same with your web site.

Here are a few questions to ask about your web site:

What is the purpose of the site? Is it simply a way of saying "Here we are and here's how to reach us", in which case the site could really consist of just one page. Or do you want to make full-text documents available on your web site, in which case it would be more complicated. Think carefully about the site's purpose. The amount of time and effort you'll have to spend on it will depend on how much you want it to do!
Who will be the audience for the web site? The answer to this question may determine whether you want to use English alone in your web site--or another language if it is targeted to non-English speakers. Will most people visiting your site already be familiar with the subjects and material on it, in which case the language you use in the site could be more technical. Or will most visitors be unfamiliar with the site's content, in which case you may want to devote more time to educating visitors about the site's purposes.
How much time do you want to spend on building and maintaining the site? Think about this one carefully. Keeping a web site up-to-date can be time-consuming, so if your site promises to post constantly updated information, be sure you have time to keep that promise.

Anatomy of a Web Page

What you always see when you look at a web page is text, probably with a few hyperlinks. You may also see some images and maybe even some boxes where you can fill in information and send it to someone.

What you may not know is that there is "coding" that lies behind what you see on your computer screen. The technical name for this coding is Hyper-Text Markup Language, or HTML for short. HTML is a computer language for making web pages. Like any other computer language, there is a set of "rules" for writing pages in HTML. These rules exist so that we can all look at the same web pages, regardless of what browsers we are using and regardless of who created the web pages. So, in a sense this whole series is designed to teach you the "rules" of making web pages. You will learn these rules by learning HTML.

So what does HTML look like? I'll show you later how you can look at the HTML coding behind any web page you are viewing in your web browser, but for now I'll just show you a few examples. Below is an example of a simple web page as HTML coding (just the red text:

<html>

<head>

</head>

<body>

Here is an example of a simple web page.<p>

</body>

</html>

If you were to save the coding above as an HTML file and then open that file in your web browser, you would see a web page with the text "Here is an example of a simple web page." in it. That's it. Nothing fancy, but it would be a web page. In upcoming lessons, you'll learn how to make more complex pages, but let's focus on just the basics for now.

Everything you see that is enclosed in the brackets (<>) is HTML code. HTML codes enclosed in those brackets are known as "tags." In the above example, <html>, <head>, <title>, </title>, </head>, <body>, <p>, </body>, and </html> are the HTML tags. Text not enclosed in the brackets is what will actually show up in your browser (anything enclosed in the brackets--the HTML tags--will be invisible when you actually look at the page in your browser).

EVERY HTML file you create must contain the tags you see in the above example. So, an HTML file should always start with <html> and end with </html>. The <html> tag, for example, says to your browser, "This is the beginning of an HTML file." The </html> tag tells your browser, "This is the end of the HTML file."

You might be wondering why there are near duplicates for almost all the tags (for example, <html> AND </html>). To put it simply, the tag without the forward slash (/) says START doing something. The tag with the forward slash says STOP doing something. So, <html> means START the HTML file, while </html> means STOP the HTML file. It is very important that you understand this concept because it is basic to making HTML files.

In case this isn't clear, let's use another example. Let's say that you like the way the example page above looks in your browser, but you think it would look better if the text "Here is an example of a simple web page." were horizontally centered on your screen. It's easy to center text using HTML. All you need to do is to add HTML tags on both sides of the text you want centered.

Here's an example of how you would center the text in the example page:

<html>

<head>

</head>

<body>

<center>Here is an example of a simple web page.</center><p>

</body>

</html>

Note that the text now has two HTML tags around it, <center> and </center>. The <center> tags tells the browser to "START centering here". Again, <center> is the standardized code for centering text in the HTML language. There are a lot of other codes, and you'll learn many of these in future lessons.

What about the </center> tag, though? Why does it need to be there? It is there to tell the browser "STOP centering here." If you didn't have the </center> tag there, then ALL the text on your web page would be centered. In the example above, that wouldn't matter, since there isn't any other text. But if you were building a web page that does have a lot of text, then you might want only SOME of the text centered. The </center> tag gives you a way of telling the browser where to stop centering text.

As I mentioned before, we'll explore more tags in upcoming lessons. By using these tags in web pages, you'll learn how to insert images; change text fonts and font sizes; make tables; and create hyperlinks. Until then, try out the little exercise below to get a better idea of how people use tags in web pages.

See for Yourself!

You may not know it, but you can see the HTML coding that lies behind every web page you visit. If you are connected to the World Wide Web, you can take a look at the HTML coding and compare it to how the web page looks in your browser. This should give you an idea of what the tags do. Here's how to do it:

Use your web browser to connect to a web site;
If you are using Microsoft Internet Explorer, click on "View" at the top of the screen, then click on "Source." If you are using Netscape Navigator, click on "View" at the top of the screen, then click on "Page Source."

A new page with a lot of HTML tags will pop up. This is the HTML coding that makes the page appear as it does. Take a close look and see if you can figure out how the coding is used.

Related Sites

Below are a few links you might want to check out. These links provide introductions to HTML tags. Some of the sites below offer online exercises too. When you check out the sites below, try looking at the "source code" behind them as explained above.

Next Session

In the next session, we'll take a closer look at the elements of a web page. I'll tell you about what the <head>, <title>, and <body> tags are for and we'll start thinking about how to format text on a web page.

Lesson 1 | Table of Contents | Lesson 3

This series was developed for USAID’s Leland Initiative by the Research and Reference Services Project (operated by the Academy for Educational Development).