Before you can create your own website, you need some way to edit the files that will be served by your web server. This could be as simple and rudimentary as using the Notepad editor that comes with Windows, or it could be as complex as using a full-fledged web development environment, with all kinds of bells and whistles.
You need to keep in mind a few requirements when creating web pages. Recall that earlier we talked about HTML as the language used to create web pages. HTML defines each page as containing text between a pair of tags. Tags can be thought of as notes to the web server and the browser, letting them know what to do with the text within these tags. A tag pair consists of a beginning tag defined by the bracket pair <> and an ending tag defined by the bracket pair </>. Each HTML document must have at the very least the <html> and <body> tag pairs, along with their associated ending tag pairs, </html> and </body>. You also typically see the <title></title> tag pairs, which define the title of the page that is displayed on web browsers.
While you can certainly install everything you need on the computers of your home network to run a website, there are free or fee-based alternatives. Many sites offer you the ability to create a website for little or no cost. The advantage to you is that your computers are not burdened with the additional overhead of running a web server. The maintenance of the website becomes the responsibility of the company providing web hosting services. You can find these services in a variety of places on the Internet by searching for free websites. One particular site that is free and appears to offer quite a bit is www.freewebs.com.
Free and pay sites alike involve certain restrictions that you can avoid by running your own web server. For example, you will invariably find a restriction on the amount of space you can use on a hosted website. Some of the things offered at the freely available web hosting sites are photo albums, blogging tools, e-commerce capability, and many more features you might want included in your site. You need to sign up for an account before you begin creating your free website. Using one of these sites can be a great way to ease into running your own website with minimal effort. As an example of how easy it is to create your own site with the free hosting solutions, my nine-year-old son has created a site with friends of his, and between them, they have no knowledge of what a web server is, let alone how to run one.
Creating a Web Page by Using Notepad
To see for yourself how easy it is to create a basic web page by using Notepad, follow these steps:
Select Start, Run, type notepad, and then click OK. The Notepad editor appears.
Type the following in Notepad:
<title>My First Web Page</title>
This is my first web page
Select File, Save As. The Save As dialog box appears.
Ensure that the Save as Type field is set to All Files, type myhtmlpage.html for the filename, select c:\inetpub\wwwroot as the location to save the files, and then click Save.
To view the page you just made, open Windows Explorer, navigate to the My Documents folder, and double-click the file myhtmlpage.html. Internet Explorer starts, showing you the contents of the page you just created, without the tags you typed in. (Remember that the tags are used as markup to define how the contents of the page are to be displayed.)
Another way to view the page you just created is to enter http://localhost/myhtmlpage.html in the address field of your web browser.
Creating a Web Page by Using FrontPage
You have seen how you can use a simple application such as Notepad to create web pages. However, many full-featured web page editors are available, including Macromedia's Dreamweaver, Adobe's Go Live, and a number of shareware or freeware utilities you can find by searching the Web. Different editors give you varying degrees of functionality, but in my opinion what you want for a home network if you don't really care to become an expert on web page development is what is commonly referred to as a WYSIWYG (what you see is what you get) editor. With this type of editor, the page you develop looks exactly like the page that will be seen in a web browser, so you can get a feel for the user experience. (Remember that when you use Notepad to create a web page, you type tags and don't really know what the page looks like until you load it in a web browser for the first time.)
Because you have the Windows XP operating system and you likely already have at least some of the Office applications, in this section you'll use FrontPage to develop a web page. FrontPage is a WYSIWYG editor and is available as a trial edition so that you can try it before you decide to purchase. The other nice benefit to using FrontPage is that it provides a wealth of templates from which you can create your own websites.
Entire books have been written about HTML. It is an extensive language that defines not only the tags that are required for a barebones page (such as the one used in this example) but also more complicated, interactive web pages as well. You could spend many hours reading about HTML and all its various nuances and still only scratch the surface of what you can do with it.
The World Wide Web Consortium (W3C) is a good starting point for learning more about HTML. You can visit www.w3c.org for more information. Figure 8.5 shows an example of what you'll find on the W3C website. Look under the section heading W3C A to Z and then click the HTML link, which takes you to various documents describing the language. You can find interesting articles, language specifications, and even tutorials here.
Figure 8.5. The W3C website.
Aside from FrontPage, you have many options when it comes to creating web pages. Adobe offers a product called GoLive, among many other content-creation tools. Macromedia offers a product called Dreamweaver, in addition to other content-creation tools. With these and the other components offered by these companies, you can create a very compelling website. If your web page designs need to go beyond the basics of getting some text and maybe a bit of graphics onscreen, you might want to take a look at these products. You can get very advanced with each of them, as well as with some of the freeware and shareware web editors available. For example, you could integrate dynamic elements in your web pages by using something like Macromedia's Flash in addition to the content you develop with the Web editor itself. This is done on many sites, for example, to achieve animation in the form of online games. When you get started in this area, your interests and the interests of the audience you are targeting with your web pages determine the toolset you end up using.
You could also use Microsoft Word to create web pages. A number of useful templates are available on the Microsoft Office website for Word as well as for FrontPage. FrontPage offers a number of features not available with Word, but if your needs are as simple as typing content into a document and then posting it on the Web, you might want to consider Word as your solution.
You can get the trial version of FrontPage from www.microsoft.com/frontpage. After you install FrontPage, you can open it by selecting Start, All Programs, Microsoft Office, Microsoft Office FrontPage 2003. The interface you see should look like the one shown in Figure 8.6.
Figure 8.6. Microsoft FrontPage.
Among the features built into FrontPage is the ability to create web pages from templates. Templates allow you to easily create pages based on pre-created standard forms. You can customize a template to meet your specific needs. To create a web page by using a template, follow these steps:
In FrontPage, select File, New. The New dialog box appears.
Under New Web Site, click One Page Web Site. The Web Site Templates page appears.
On the General tab, click Personal Web Site. Then, under Options, click the dropdown list and enter C:\inetpub\wwwroot as the location, and then click OK (see Figure 8.7).
Figure 8.7. Website templates.
You are now taken to the main navigation window of FrontPage, which looks as shown in Figure 8.8. From this window you can move between the pages that make up a website and see the relationships among those pages. For example, index.htm is a standard file that is used as a default page for websites. This would be an appropriate place to provide any introductory or high-level information you want any visitor to your site to have.
Figure 8.8. Navigating your website.
To edit the main page for your site, double-click index.htm. A WYSIWYG display of the main page appears. You see the page as it looks to viewers on the right side of the window (see Figure 8.9).
Figure 8.9. Editing your website.
Replace the placeholder text from the template with your choice of content. When you are finished with the page, make sure to save it by selecting File, Save.
FrontPage offers a handy feature called publishing that lets you publish the content you have edited on your local computer to a remote web server. While this topic is beyond the scope of this book, you might want to take a look at FrontPage's online help to get an idea of what you can do with this feature.