CSS: Getting Started with a Simple Web Page

Getting Started with a Simple Web Page

Listing 2.1 shows the text you would type and save to create a simple HTML page. If you opened this file with a web browser such as Internet Explorer, you would see the page shown in Figure 2.1. Every web page you create must include the <html>, <head>, <title>, and <body> tags.

Listing 2.1. The `<html>`, `<head>`, `<title>`, and `<body>` Tags

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>The First Web Page</title>
  </head>

  <body>
    <p>
      In the beginning, Tim created the HyperText Markup Language. The Internet
      was without form and void, and text was upon the face of the monitor and
      the Hands of Tim were moving over the face of the keyboard. And Tim said,
      Let there be links; and there were links. And Tim saw that the links were
      good; and Tim separated the links from the text. Tim called the links
      Anchors, and the text He called Other Stuff. And the whole thing together
      was the first Web Page.
    </p>
  </body>
</html>

Figure 2.1. When you view the web page in Listing 2.1 with a web browser, only the actual title and body text are displayed.

In Listing 2.1, as in every HTML page, the words starting with < and ending with >"tag" pieces of text and tell the web browser what kind of text it is. This allows the web browser to display the text appropriately.

An HTML tag is a coded command used to indicate how part of a web page should be displayed.

technically the web page is an XHTML page. All the pages developed throughout the book are XHTML 1.1 pages. Because XHTML is a more structured version of HTML, it's still okay to generally refer to all the pages in the book as HTML pages. By targeting XHTML 1.1 with your code, you are developing web pages that adhere to the very latest web standards. This is a good thing!

Before you learn what the HTML tags in Listing 2.1 mean, you might want to see exactly how I went about creating and viewing the document itself:

Type all the text in Listing 2.1, including the HTML tags, in Windows Notepad (or Macintosh TextEdit).

Select File, Save As and be sure to select Text Documents as the file type.

Name the file firstpage.html.

Choose the folder on your hard drive where you would like to keep your web pagesand remember which one you choose! Click the Save or OK button to save the file.

Now start your favorite web browser. (Leave Notepad running, too. That way you can easily switch back and forth between viewing and editing your page.)

By the Way

of the time. However, this can be a hassle if you're developing pages locally on your hard drive (offline) and you keep getting errors about a page not being found. If you have a full-time web connection via a LAN, cable modem, or DSL, this is a moot point because the browser will never complain about being offline. Otherwise, the appropriate disciplinary action will depend on your breed of browser:

preferences under the Browser Display set, and click the Use None button in the Home Page cluster.
In Mozilla Firefox, select ToolsTools, Options; click the Use Blank Page button under the General settings.
Other browsers should have a similar setting for changing the default home page so that it doesn't attempt to access the Internet.

This teaches your browser not to run off and fetch a page from the Internet every time it starts. Of course, you'll likely want to restore the default setting after you're finished working locally.

In Internet Explorer, select File, Open and click Browse. If you're using Firefox, select File, followed by Open File. Navigate to the appropriate folder and select the firstpage.html file. You can also drag and drop the firstpage.html file onto the browser window.

Voilà! You should see the page shown in Figure 2.1.

Getting Started with a Simple Web Page

Listing 2.1. The <html>, <head>, <title>, and <body> Tags

Figure 2.1. When you view the web page in Listing 2.1 with a web browser, only the actual title and body text are displayed.

By the Way

Listing 2.1. The `<html>`, `<head>`, `<title>`, and `<body>` Tags