by Paul Cassel To most people, the Internet means the World Wide Web, or just Web. The Web is, to put it simply, the graphical interface to the Internet. When people speak of sites or pages (such as home pages), they're talking about the Web.
Most independent users who sign up with an online service such as AOL, CompuServe, Prodigy, or MSN have contract space for their own Web pages as part of their service. Many ISPs (Internet service providers) such as Netcom, WorldNet, or Route 66 also have, as part of most service agreements, Web space for their subscribers. Corporate users tend not to have similar space but might need or want to create internal Web sites instead of personal ones. In those cases, the users go through their network administrator to get the space. The end effect is the same.
The problem many people have with making their own Web site is simply a lack of understanding about how to do it. This chapter addresses that problem by covering the following:
Three steps to making a Web site are
2. Creating the pages
3. Placing the created pages on the acquired site
Because acquiring a site is a business arrangement (not a computer issue) between a user and his service provider or network administrator, this chapter assumes that a site exists and that it is ready for a Web page post.
Today many different standards for creating Web pages exist, with more appearing at a distressingly rapid rate. This is because we're in the midst of a corporate struggle for de facto control of Web presentation. The players aren't interested in home pages but in other issues relating to their business models.
However, a basic standard underlies all Web work, and because this is a primer for new Web site makers, this book sticks to that standard. It's a simple computer language called Hypertext Markup Language (HTML).
When a browser or other HTML-enabled application, such as the later versions of Word or WordPerfect, encounters HTML, it interprets the language for presentation on a computer's console or monitor. Note that the interpretation is of the browser (Internet Explorer and Netscape Communicator are two browsers) and might vary for different machines.
HTML isn't a page layout program. It is more like a hinting language; it directs by suggestion to the HTML interpreter (usually a browser) how to format a page. It can't force the browser to lay out a page in any particular manner. It also can't supply the fonts needed for an exact layout. A browser finding a call for a font unavailable to it will use the closest match. That match isn't necessarily a close match.
Tags are HTML commands. These tend to be mostly layout commands. Tags are alphanumerics within left and right angle brackets (< and >). HTML uses the slash (/) to end a command. The following line, appearing in an HTML document,
<B>This is bold</B>
will display the words This is bold in boldface, if possible, given the fonts on the client (browser) computer. The <B> starts the boldface and the </B> ends it. HTML tags can be nested. Make sure, when nesting, that you exit the tag commands in the same order you entered them, or be aware of the consequences if you intentionally choose not to; for example,
<tag1> ...some text here <tag2> ...some text here </tag1> ...some text here </tag2>
will, in most cases, have very different results than the following:
<tag1> ...some text here <tag2> ...some text here </tag2> ...some text here </tag1>
HTML text is the display text between these layout commands. There are also some commands that don't directly affect the layout of a page. This is a lot easier to see in action than envision from an abstract explanation, so off to an example.
For more information on HTML, here are other sources: Sams' Teach Yourself Web Publishing with HTML 4 in a Week (Sams Publishing, ISBN 1-57521-336-2) and Special Edition Using HTML 4 (Que Corporation, ISBN 0-7897-1449-3).
In this example, you create a very simple Web page, using Notepad as an HTML editor:
FIGURE 18.1. You can use a simple editor to make Web pages.
This is the text to enter:
<HTML> <HEAD> <TITLE> My First Web Page </TITLE> </HEAD> <BODY> <P>This isn't too hard</P> <p>Microsoft lurks at <a href="http://www.microsoft.com">www.microsoft.com</a></p> </BODY> </HTML>
FIGURE 18.2. Making Web pages without any tools except an editor is possible but very tedious.
The Web page you made in Task 18.1 is a full, if simple, Web page. The Title instruction tells the browser what to put in the title bar; the link to Microsoft's site will work if you're online. The only complex line is
<p>Microsoft lurks at <a href="http://www.microsoft.com">www.microsoft.com</a></p>
That's the link to Microsoft. The <p> and </p> tags are HTML for an explicit start and end to a paragraph. The <a> href...</a> tags are for a link reference. The first text after the tag is the link, and the second is how the link appears on the page.
If you choose to, you can construct an entire Web site by using an editor like Notepad and a reference work on the HTML language. Early Web publishers had nothing else to work with. Naturally, to construct and then include pictures or graphics, you also need a source for those pictures, such as drawing, painting, digitizing, or scanning software and hardware. There is more on this later in the chapter in the section "Pictures and Sound."
Today there are many tools for constructing Web sites using the familiar painting technique first pioneered by programs such as Visual Basic. These programs enable you to visually create your Web pages, and then they take your design specification and create the HTML (or other needed language) in support of your design.
Some of these programs are
Windows 98 has a program called FrontPage Express as part of its standard components. This is an effective Web page designer suitable for those who are starting out or who don't want to incur any marginal costs for making their Web presentations. Just because this is part of Windows 98 doesn't mean it's a weak sister in any way. The FrontPage Express program with Windows 98 is more powerful than many dedicated Web page designers from only a generation back.
FIGURE 18.3. Most, but not all, Windows 98 setups have FrontPage Express installed by default.
FrontPage Express is part of most standard Windows 98 setups, but not all. If you don't see it on the Start menu, open the Add/Remove Programs applet in Control Panel to the Windows Setup tab. FrontPage Express is under the Internet Tools entry, as you see in Figure 18.3.
For Task 18.2, install FrontPage Express, if it's not part of your current setup. You can follow along well enough by reading alone if installing the program turns out to be a problem because of your company's policies.
This Task describes the initial steps for using FrontPage Express to create a personal Web site:
FIGURE 18.4. FrontPage Express has a full selection of wizards to aid your page designs.
FIGURE 18.5. The first part of the Personal Home Page Wizard asks you to select various sections.
FIGURE 18.6. You can usually name your home page anything reasonable, but check with your site administrator if in doubt.
5. This wizard is heavily weighted toward making a personal Web site oriented toward your employment. Figure 18.7 shows the dialog box following Figure 18.6, which clearly indicates that. From here on, the next few dialog boxes ask you to specify options of what to include on each page you chose in step 3 and Figure 18.5.
FIGURE 18.7. Although business- or employment-oriented, the wizard can make a site of any nature.
FIGURE 18.8. After many check boxes, you finally get to fill in some blanks.
FIGURE 18.9. Add your contact information in this dialog box.
FIGURE 18.10. The Finish button ends the wizard and generates the page, based on your chosen options.
8. Click the Finish button or click Next and then the Finish button. That's all there is. The wizard will grind around a while, and when done, your screen will resemble Figure 18.10 (unless you didn't choose the exact same entries as the Task).
FIGURE 18.11. Save often or be ready to lose your work sometimes. Use an extension of .htm or .html when saving Web pages.
If you choose File | New | Personal Home Page Wizard again, the wizard replays with your chosen information already entered. Thus, the wizard acts as an editor for settings, in addition to its role of creating new material.
FIGURE 18.12. At this point, you have a good framework for your Web site. All the links work, but you need to fill in the details.
It's a good idea to save your work at this point. Choose File | Save As, and in the resulting dialog box, choose to save your work as a file. Give the file any name or choose the default one, as shown in Figure 18.11.
After saving your work as a file, locate it by using Windows Explorer and double-click on it. This will load your new page in your browser. Figure 18.12 shows the page loaded in Internet Explorer.
Try clicking the links, and you'll see that you jump to the proper anchor points. The only thing left to finish this simple site is to fill in the missing or placeholder text and then transfer (publish to the Web) the page or pages to your host site. The mechanism for site posting differs, depending on your host. Most public sites use simple FTP transfers. Check with your site administrator if you're unsure how to go about this.
FrontPage Express uses the familiar highlight-then-edit method to change text on a page.
FIGURE 18.13. FrontPage Express edits work similarly to most modern word processors such as Notepad or WordPerfect.
To add text, click at your desired insertion point and start typing. To change the font or font size, use the combo boxes on the toolbar.
If you've used modern word processors, you should be familiar with the method. For example, to edit the Personal Interests section of your page, scroll down to it (in FrontPage Express), highlight the section you want to replace, and type away. Figure 18.13 shows an edited section under Rock Climbing and another section, Volcano Exploration, ready for actual text entry.
Although you can change the font to any typeface or size installed on your computer (or that your computer is capable of), be careful. If the same font or font size isn't available on the client computer (the one with the browser), that computer will use the closest approximation. Often this isn't a close approximation and can result in a very different display of your pages than you intended.
Make sure that you do your layouts using compromise fonts that you have good reason to expect are available on most computers. Exactly which fonts to use depends on the browsers your viewers will use and to what extent you want to accommodate them. For example, Macintosh computers often use different fonts and screen resolutions than IBM-style PCs. If you want to make your pages look good to Macs, you must consider these items.
If only a small or well-known group of computers, such as those on a company intranet, will access your Web page, you can use fonts more creatively.
The Web is severely limited in how many colors it can display, compared to the variety that modern computers regularly display on their screens and printers. Rendering colors and scenes accurately over the Web is both a skill and an art. You'll need a Web-aware tool or painting program to reduce color depth to what the Web can host. This program should also have algorithms to optimize your reduced color images to show the closest color match to the original.
Not all paint programs can render to the Web successfully. Some that can, in the latest versions, are
DeBabelizer is a highly specialized tool for Web graphics. The others are general- purpose image editors.
Of course, if you're not too meticulous, you can just insert your images in the page and let them be. If your color rendering doesn't have to be precise, this works fine. It seriously fails to please only in applications, such as catalogs, where accurate color balance is vital.
Task 18.3 shows the steps for inserting a graphic in the Web document begun in Task 18.2.
This Task inserts a graphic (picture) in the Web document from Task 18.2. You'll need a graphic image of some sort to follow along. Windows 98 comes with several BMP files that you can use. To locate these files, open Windows Explorer, choose Tools | Find, and enter *.BMP in the place for a file specification.
FIGURE 18.14. You can change entered text by highlighting and then changing its font, font size, or font characteristics.
FIGURE 18.15. You can browse for a graphic by using the typical Windows Explorer-type tools or by entering a URL.
FIGURE 18.16. When you find the image you want to insert, select it and then click OK to finish the placement.
3. Click at the end of the text you just entered and press Enter twice to start a new paragraph and give yourself some working room. Choose Insert | Image and then browse for the file you want to insert. When you find the graphic you want to insert, select it and then click OK. Figure 18.15 shows the browsing process, and Figure 18.16 shows the picture inserted.
That's it. You've now populated your Web page with a graphic. The Insert menu also has entries for inserting movies, WebBots, lines, breaks, background sounds, and several other useful or decorative components. Adding any of these is similar or identical to adding an image. Place your cursor where you want the insertion; then browse or specify the file or object you want inserted.
You might be a little confounded by the lack of fine control you have in file insertion and manipulation using FrontPage Express. Remember, this is a lighter duty version of FrontPage--a program that gives you much more control in these operations. Similarly, Microsoft Publisher and the other dedicated Web page composers offer you much more fine-tuned control.
FIGURE 18.17. You can add links as you want, but usually Web designers prefer to have text as the hot spot for a link.
This Task shows you how to add a hot spot link to a Web page object:
The status bar on the lower right side gives you the estimated time to load your page. This area is circled in Figure 18.17. Keep in mind the types of connections your site will have. If people connect through a LAN, you can afford large, complex pages. If people are on modem dial-up, you might want to consider keeping the graphics to a minimum to speed up transmission times. In the example for this chapter, the load time increased dramatically after the large picture was added. When designing your Web pages, keep an eye on this metric to make sure you don't design yourself into an intolerably slow page. The fanciest page in the world isn't any good if people lack the patience to load it. If you have problems running any of your pages on your server, check with your administrator. Some oddball server setups don't fully support standard Web extensions such as active pages.
This chapter paints in broad strokes a description of publishing on the Web using FrontPage Express. Microsoft clearly wants to use FrontPage Express as a teaser application to get people to upgrade to its heavy-duty Web page designer, FrontPage.
This doesn't mean that FrontPage Express isn't capable of doing anything. You can make a serviceable Web page using it, although the fine control and Web site administration available in the full FrontPage isn't possible.
To wrap up the day, you can review terms from the chapter, see the answers to some commonly asked questions, and practice what you've learned. You can find the answers to the exercises in Appendix A, "Answers."
WebBot--A Web robot. An automated routine existing within a Web page.
Web--Short for the World Wide Web, which is a graphical interface for the Internet. The original intent of the Web was to be a way to publish hypertext on the Internet. It soon expanded to full multimedia.
HTML--A language for making pages on the Web.
server--For Web purposes, the physical place where your Web pages reside.
domain--The part of an Internet address to the right of the dot or @ sign. For example, in the address HELP@microsoft.com, the domain is microsoft.com.
FrontPage Express--A truncated version of the FrontPage program. Express comes bundled with Windows 98.
A Yes. You should have no problem with this. However, if you're going to install FrontPage 98 anyway, there's no benefit to having FrontPage Express also installed.
Q How do I get my Web pages on the Web itself?
A You can create a folder structure locally and then FTP the structure to your server, or use your creation program (if it has the capability) to publish to the server directly.
Q How do I get my own domain?
A You need to apply to Network Solutions, Inc. Your ISP can handle this for you. There is a fee involved. You can't have a domain that already exists without buying it from the owner. For example, you can't buy the domains ibm.com or microsoft.com, for the same reason you can't manufacture a car and call it a Mercedes-Benz 300CE.
2. Add links to Microsoft, Yahoo!, AltaVista, and MSNBC in the Hot List portion of your home page.
© Copyright, Macmillan Publishing. All rights reserved.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}