Creating a Web Page

This tutorial shows you how to create your own web page. This is a basic overview suitable for kids (pre-teens or teens) or adults.

There are tools, or software programs, that allow you to create a web page by dragging items on the screen. This tutorial, though, shows you how to create a web page by hand. You don't need fancy software to create your own web page.

Tools

You don't need many tools to create your own web page.

  1. You need an editor that allows you to create a plain text file. This means there is no formatting; such as bold, underline, colors, or different font sizes. You probably have one of these on your system already. If your text editor is able to add formating to text, make sure that you are saving files as plain text.
  2. You need a browser to see the results, which you are using now.
  3. You need a hostServers (computers) that deliver content to the internet; usually a web hosting service. where your web page will be located. This is often a web hosting service that charges a monthly fee. You can create a web page without a host, but no one else will be able to see it.
  4. If you want to add pictures, you may need a graphics program.

Note: Some text editors for programming have syntaxSyntax covers the rules for writing in a particular language (the order of words and symbols). highlighting, which shows certain items (such as XHTML tags) in a particular color. The files are still plain text, the color formatting is not saved in the file.

Text Editors

Basics

Computers won't necessarily do what you want them to do, since they don't know what you want. Computers are very literal—they assume a strict meaning. To put it another way, they do exactly what you tell them to do. So your job is to figure out how to tell the computer exactly what you want.

First, a little background. Most web pages are written in HTML or XHTML. HTML stands for “HyperText Markup Language.” The “X” in “XHTML” stands for “eXtensible”— eXtensible HyperText Markup Language.

A web page is located at a particular URL, or “Uniform Resource Locator.” This is a unique address, like your street address. HTTP, which you see in the beginning of a URL, stands for “HyperText Transfer Protocol.” The “www” in the URL stands for “WorldWide Web.”

This is the basic structure of an HTML file. You can copy this into a text file and save it with the name “test.htm”. Open this file in your browser (you may be able to drag and drop it into the browser). 

<html>
    <head>
        <title>Page Title Goes Here</title>
    </head>
    <body>
    </body>
</html>

Not very interesting, is it? This page has a title, but no content. There is nothing in the body of the document.

Tags

The text within angle brackets (or between the less than and greater than signs < and >), such as <title>, is called a “tag.” The tags must be written exactly as shown. XHTML requires tags to be lowercase (small letters) <title>, but HTML allows capital letters or uppercase <TITLE>.

Tags generally occur in pairs. There is an open tag <title>, and a closing tag </title> that matches the opening tag with a slash / at the beginning. The content is between the pair of tags.

For this XHTML, the <title> is inside the <head>, which is inside <html>. The <body> is also inside <html>.

There is a standard that defines all the tags used for XHTML. You don't need to know all of the tags. A few tags are required: <html>, <head>, <title>, and <body>. The required tags must be in every document. Then if you learn just a few more tags, you can create nice XHTML documents.

Some tags don't have any content, so may be “self-closing.” These tags contain the slash at the end before the “>”, like this: <br />. A self-closing tag both opens and closes the tag.

Whitespace

Most whitespace is ignored. Whitespace is what we call the characters you can't see—the spaces, tabs and newlines/returns. The XHTML could shown above could also be written like this: 

<html><head><title>Page Title        Goes Here</title></head><body></body></html>

But that is very hard to read. That's why an XHTML file is usually indented to show the structure of the tags. Tags that are inside (between) other tags are indented further.

Open your “test.htm” file in your editor. Paste the XHTML listed above into the file, replacing the previous text, and save the file. Open the file in your browser. If you still have the window open, you may be able to just reload/refresh the page. Does it look any different?

File Structure

The XHTML tags must be in the correct location. Tags that contain the document content (text and pictures that will appear on the page) must be between the <body></body> tags. This content cannot go in the <head> section of the document.

Open the “test.htm” file in an editor. Paste this into the file, replacing the previous text. Save the file then open it in your browser. Color has been added to show the matching tags; the red tags are required. 

<html>
    <head>
        <title>Page Title Goes Here</title>
    </head>
    <body>
        <h1>First Heading</h1>
        <p>
            This is a paragraph.
        </p>
        <p>
            This is another paragraph.
            It is longer than the first paragraph.
            The whitespace between these sentences in XHTML does not show up in the browser.
        </p>
    </body>
</html>

Another thing to notice about the tags is that they can be nested (one pair inside another like nested boxes) but the inside tags must be closed before the outside tags. The tags can't overlap. You can do this: 

        <body>
        <p>
        Text Goes Here
        </p>
        </body>

But not this: 

        <body>
        <p>
        Text Goes Here
        </body>
        </p>

Both of the <p></p> paragraph tags must be inside the <body>, so the <p> must be closed before the <body> is closed. Proper indenting makes this more clear. Note that the closing tags are directly below the matching open tags, to make it easier to read. 

        <body>
            <p>
                Text Goes Here
            </p>
        </body>

Next: XHTML Examples