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 > are actually coded commands. These coded commands are called HTML tags because they "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.

The first few lines of code in the web page serve as standard boilerplate code that you will include in all of your pages. This code actually identifies the page as an XHTML 1.1 document, which means that 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:

1.

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

2.

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

3.

Name the file firstpage.html.

4.

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.

5.

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

You don't need to be connected to the Internet to view a web page stored on your own computer. By default, your web browser tries to connect to the Internet every time you start it, which makes sense most 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:

  • In Microsoft Internet Explorer for Windows, select Tools, Internet Options; click the General tab and click Use Blank under Home Page. In Internet Explorer under Macintosh OS X, look in the application 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.


6.

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.




SAMS Teach Yourself HTML and CSS in 24 Hours
Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)
ISBN: 0672328410
EAN: 2147483647
Year: 2005
Pages: 345

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net