Writing Your First Web Page

In the previous chapter on How to Begin Building a Personal Web Site you have located the programs you needed to build your own Web site, fixed the file extensions and now you are ready to start.

In this chapter you will build your first Web page.

At the end of this chapter your Web page will look as follows:

As you see, it is still empty (without any content) but it is YOURS!!!

Creating a new folder

Open Windows Explorer .

Windows 9x/ME: Click the Start button, choose Programs, Windows Explorer

Windows 2000/XP: Click the Start button, choose All Programs, Windows Explorer

Or

Press the + E keys together. First press the key (located between Alt and Ctrl) and hold it down, then lightly press the E key (located directly beneath the number keys 3 and 4 at the top of the keyboard). Only then release the key.
- From the menu bar, choose View, Details.
In the left pane of the window (the left side of the window) click once on the C: drive.
In the right pane of the window (the right side of the window), right-click with the mouse (using your right mouse button to click instead of the more commonly used left mouse button), and from the pop-up menu (shortcut menu), choose New, Folder (see figure 2.1).

Figure 2.1: Creating a new folder. Click to Enlarge
In the right pane of the window, if the New Folder is selected (highlighted), type justin and then press Enter.

If the New Folder is NOT selected (highlighted), highlight it, right-click with the mouse. From the pop-up menu (shortcut menu) choose Rename, type justin and then press Enter.
Open the folder justin by double-clicking on the name justin.

Creating a new Web page

In the right pane of the window (which at this stage is now empty), right-click with the mouse. From the pop-up menu, select New, Text Document (see figure 2.2).

Figure 2.2: Creating a new Text Document. Click to Enlarge

Note - The extensions .html and .htm are the same. In this book I decided to use .html as the extension name for a Web page.
Make sure that the new document, which is currently called New Text Document.txt, is selected (highlighted). Type about.html and then press Enter.

If the New Text Document.txt is not selected (highlighted), highlight it, right-click with the mouse. From the pop-up menu choose Rename, type about.html and then press Enter.
Note the change in the name of the file extension from .txt to .html. A message will appear asking if you wish to change the file name extension. Click Yes.

Opening your Web page in the browser

Open about.html by double-clicking on it (double or single clicking depending on the Windows definition you have). The Internet browser will open and so will the file (about.html) within it. You will see nothing in it at this stage because the file about.html is empty.

Viewing the source code of the HTML page

Return to Windows Explorer , highlight the file about.html, right-click with the mouse and choose Open With, and then choose Notepad. Notepad will open, but you will see nothing in it because the file about.html is still empty.

Note - If you do not see Notepad on the Open With list, select Choose Program..., roll down until you see Notepad, highlight it and click OK.

Writing a basic Web page

Type this in Notepad

<html>
 <head>
  <title>About</title>
  <meta http-equiv="content-type"
   content="text/html;charset=iso-8859-1" />
 </head>
<body>

</body>
</html>

From the Notepad menu bar, select File and then select Save to save your work.

This is the basic structure of all Web pages that you will create from now on.

Tags are used to tell the browser how to display the Web page content. They are the most basic commands on which the writing of Web pages is based.

<html> tag

The first tag in an HTML file is <html> and the end tag </html> is the final one. All the other tags are written between these two tags.

<head> tag

The opening <head> tag and the closing </head> tag define the title of the Web page. Text within this definition contains information that is not displayed on the browser content pane.

<title>...</title>	Web page title
<meta />	Contains more information about the Web page

<title> tag

The Web page name will appear in between the <title> and the </title> tags. It is a good idea to give each Web page a name that describes it as well and as clearly as possible.

Tip - The name of each Web page is also the title that will appear at the top of the browser window. It is important to give a lot of thought to the name of the Web page. Remember that when the user adds your Web page to his favorite list, it will be added by the text between <title> and </title>.

<meta /> tag

This tag tells the browser some information about the document you created, including the language it is written in.

<meta http-equiv="Content-Type"
 content="text/html;charset=iso-8859-1" />

Note - There is a space between the quotation mark (") and the slash symbol (/)

Why iso-8859-1?

In order to display a Web page, the browser has to identify the language it was written in: Turkish, Japanese, Korean, Greek, Hebrew or English. If you do not write the <meta /> tag (as shown above), the browser may make a mistake in identification, and display the Web page in a different language, one you did not intend, such as Chinese. To force Internet Explorer to display the Web page in English, you must write iso-8859-1.

Note - The order of the <title> and <meta /> tags does not matter, as long as they come between the <head> and </head> tags. In other words, the following is OK:

<head>
	<title>The Title of Your Page</title>
	<meta http-equiv="Content-Type"
            content="text/html;charset=iso-8859-1" />
</head>

And so is the following:

<head>
	<meta http-equiv="Content-Type"
	 content="text/html;charset=iso-8859-1" />
	</title>The Title of Your Page</title>
</head>

Every HTML tag must have an opening tag and a closing tag. For instance, the tag <body> has the closing tag </body>. Some tags have no closing tags, such as <meta>. In that case the content of the tag ends with 3 characters: space, / and > like this: />

Important Tips:

After an opening tag appears, an appropriate closing tag should also appear. The closing tag is identical to the opening one, except for the addition of the (/) symbol. For instance, the title of the Web page is between the opening tag <title> and the closing tag </title>.
Tags that have no closing tag (like the meta tag) should end with 3 characters: a space, / and > like this: />
There is no need to leave spaces between tags, or when pressing the Enter key (the browser ignores line breaks that you made in Notepad by pressing Enter). Wherever there are several spaces in sequence, the browser treats them as a single space. At this stage you do not yet know how to control spaces, so you should just let the browser do the work for you.

Viewing a Web page in the browser

Use the Taskbar to bring the browser window ( or ) to the front. The Taskbar is at the bottom of the display (screen) and includes buttons - one button for each application that is currently open. At this stage the following applications/programs are open: Windows Explorer, Notepad, and Internet browser.
From the browser standard buttons toolbar, click the Refresh\Reload button to view the changes you made in about.html.

On the browser window heading, you will see the word About, which you wrote as part of the <title> tag (figure 2.3).

The content pane will remain empty (white).

Figure 2.3: This is how the browser displays the about.html file.
Close the browser window where the about.html file is displayed.
Close the Notepad window where the about.html file is displayed.

Part I

Part II