You have your tools, a bit of background information, and enough knowledge about HTML to be very dangerous. It's time to build your very first Web page. Granted, it's going to be a short one, but it will be a Web page nonetheless.
A Web Page; Step By Step
There are several steps involved in building even the simplest of Web pages. As you become more familiar with HTML and Web development the majority of these steps become second nature. However, because this is your first Web page, don't be surprised if they take a bit of getting used to. You should follow along and build the simple page as you read through the remainder of the page.
Steps to Success
-
Type the following code into the Notepad window to set up a basic HTML page, which appears in Figure 1-1.
Tip: you can also copy and paste this code into Notepad<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My First Web Page</title>
</head>
<body>
<p>This is my first Web page.</p>
</body>
</html>
Figure 1-1: Adding HTML and text to a text editor - Save the HTML file in your steps folder as index.html,
as shown in Figure 1-2.
note the Save as type box needs to display All Files(*.*), otherwise the file will be saved as a Text Document.
Figure 1-2: Saving an HTML file. - Open the File in a browser by double clicking it in the windows explorer
- The browser will show the Web page. The title of the page, “My
First Web Page” displays in the title bar at the top
of the screen. In the Window browser you see the text “This
is my first Web page.”
Figure 1-3: index.html displayed in a Web browser.
A Few Notes
Viola! That's how you build a very simple Web page. There are a few things you should take note of now that will impact your future Web page building activities:
- Did you notice that you saved the HTML file as index.html, with .html at the end instead of .txt or some other extension? It is very important that you always save your Web pages with an .html extension so that Web browsers know that your documents are Web pages and should be treated as such.
- When you access Web pages saved on your hard drive -- known as local files -- in a Web browser you don't type in a URL as you do when you are accessing files over the Internet. Instead, you have to browse through your local file system, find the file, and then open it with the browser.
- The document title -- My First Web Page -- described with the
<title>
. . . </title> tags,
doesn't show up in the browser window, but instead is displayed
in the browser window
- title bar,
- history,
- bookmarks, and
- back button,
- as well in search engine results.
- You should keep your text editor and Web browser open at the same time so you can easily switch back and forth between the two of them as you edit and review your work.
- Your single Web page is actually open in two different applications -- the text editor and the Web browser -- when you are building Web pages. You make changes to the page in the text editor and view them in the Web browser.