Appendix A
Building Your First Page - A Primer

• Entering and editing HTML with Notepad
• Downloading a copy of Paint Shop Pro or Graphic Converter
• Building graphics with Paint Shop Pro
• Testing your page with Internet Explorer
• Uploading with FTP Explorer
• A final check

Now that your knowledge and understanding of the HTML language and the capabilities of various Web browsers put you into the top one percent of the Internet community, you're ready to rock and roll, right? Hopefully, you've already been experimenting with some of the ideas in the book, but to make sure you get off to a good start, this appendix will show you, step by step, exactly how I create a simple Web page and upload it to a remote Web server for everyone to enjoy.

If you have an HTML editor or a Web-compatible graphics editor already, you may want to skip those sections. You might, however, find reading along with what I'm doing quite helpful.

Entering and Editing HTML with Notepad

Note: if you're a Macintosh person, substitute 'SimpleText' for 'NotePad' each time you see it in this section; they're functionally the same program, just Mac versus PC

Recently, I was asked by a magazine for my top three tips for people interested in creating slick Web sites, and in this appendix I'm going to lead you through all the steps I took to translate the simple text file for these tips into a cool Web page. Figure A-1 shows the basic text in Notepad, a simple and useful editor included with Windows 95.

Figure A-1: Notepad shows my three favorite Web design tips.

As you can see, the text is there, but the presentation isn't very exciting. The first step, therefore, is to add some HTML tags to spice up the final presentation. You can do this with some relatively simple additions: <BLOCKQUOTE> indents the explanations, <HR HEIGHT=1 NOSHADE WIDTH=50%> adds a fine rule between the title and the first tip, and the <FONT> tag emphasizes the tips themselves. The results are shown in Figure A-2.

Figure A-2: Design tips with HTML tags

Before I go any further, you should save this file as an HTML document. Choose Save As from the File menu, which displays the dialog box shown in Figure A-3.

Figure A-3: Save the working file as tips.html

By default, Notepad wants to save files as .txt files, which isn't good for a Web page. Use your mouse to click the File name box, then replace txt with html, as shown in Figure 16-3.

Having safely saved this file, leave the HTML document alone for a minute and try adding a nice opening graphic with Paint Shop Pro if you're on a PC, or with GraphicConverter if you're a Macintosh user.

Downloading a Copy of Paint Shop Pro

To grab a copy of Paint Shop Pro, launch your Web browser. Then go to the JASC Software Web site at http://www.jasc.com/.

Figure A-4: The JASC web page in Internet Explorer.

Depending on what type of computer you have, you'll want to choose either the Windows95/Windows NT version or the older Windows 3.1 version of the program. Once you've made your choice, click the "Download Paint Shop Pro shareware" link.

Choose one of the different download links. When you start the file transfer (it's a URL to an FTP site, actually), your browser may askyou if you want to download a file that might be infected by a virus or otherwise dangerous and unknown. If so,click Yes with the understanding that you should run a virus check on all outside files you transfer to your computer. Then specify where you want the file saved and relax for a few minutes while the file downloads to your computer.

Next thing you know, you've got a terrific new shareware application from the Net on your computer. Pretty darn easy, eh?

---

If you like Paint Shop Pro please don't forget to register your shareware!

---

Or... Downloading GraphicConverter

If you're a Macintosh user, there's a terrific Mac alternative to Paint Shop Pro, which is a Windows-only application. Graphic Converter is a great shareware application written by the talented team at Lemke Software in Germany. To download your own copy, start by going to the Lemke Web site at http://www.lemkesoft.de/, as shown in Figure A-5.

Figure A-5: The Lemke Software Web site

Once you're there, choose the "Download" option, and then choose whether you need a PowerPC or 680x0-based system. Choose the right option and let the software download onto your computer. A few minutes of data transfer later, and you'll have a terrific new application on your Macintosh.

One quick note: the examples later in this appendix are done with Paint Shop Pro, but the basics of using "New" to create a new graphic, ensuring that you save the image in GIF or JPEG format, and then referencing it on your Web page are exactly identical in Graphic Converter. Also, if you like Graphic Converter, don't forget to register it and support the author of the program.

Building Graphics with Paint Shop Pro

Armed with your new graphics editor, you launch it and specify that you want a new blank document with which to work. It looks like Figure A-6.

Figure A-6: Paint Shop Pro with a blank page

From here you first need to pick a few colors, which can be done by double-clicking the two overlapping boxes on the right. The left box, which slightly overlaps the other, is the foreground color, and clicking it presents you with a palette of 256 colors from which to choose. I opted for a bright red foreground in this example. Click the other box, the background, and choose white.

Now to enter the text. Choose the text edit tool (the "A" button on the toolbar), which brings up a complex dialog box offering a choice of typeface, style, size, special effects, and more. You can type the text you want to see in the Enter text here box at the bottom of the dialog box, which you can see I've done in Figure A-7.

Figure A-7: Specifying the text for a graphic title

Click OK, and now it's just about done and looks pretty slick, as you can see in Figure A-8.

Figure A-8: The graphic title for my new Web page

All that's left is to crop the graphics file to the minimum size that contains the material desired and save it as a GIF-format graphic so that Web browsers can read it.

You accomplish the first by choosing the dashed rectangular box tool on the toolbar and drawing a box that just barely surrounds the text. You can see that in Figure A-9.

Figure A-9: Selecting the region of the graphic to save

With that selected, go to the Image menu and choose Crop. Instantly, the big graphics space will be chopped down to a small window that just contains the graphic. Perfect!

Now use the Save As option on the File menu to save this graphic as a GIF file, as shown in Figure A-10.

Figure A-10: Save the graphic as a GIF file on the desktop

Fabulous! You've created a nice graphic and saved it in a format that works perfectly on the Web. Now take a quick pop back to the HTML document in Notepad to add a couple of lines of HTML at the very top of the document:

<CENTER>
<IMG SRC=spiffo.gif>
</CENTER>

Now you can preview the document in a Web browser. (Don't forget to save the modifications!)

Testing Your Page with Internet Explorer

The new page and graphic must be in the same folder for this to work -- because the URL specified with the <IMG> tag above doesn't have any directory information -- so just drop them both onto the desktop itself. You can open the page from your hard drive as you would a URL; just type in the path to tips.html.

The page should look just like Figure A-11:. a nice, simple, attractive Web page.

Figure A-13: Web Design Tips, finally, in a browser

Here's where you can really spend hours going back and forth, fine-tuning your graphics and layout, and generally exploring different ways to present information to the user. For this particular example, however, I'll fight my natural urges and leave this as is. Okay with you?

Uploading with FTP Explorer

Because my PC isn't a live Internet Web server, but I want to be able to offer this page to the Web traveling public at large, I need to have an account on a server somewhere on the Net. Fortunately, I do! My base Web account is on Best Internet Communications, Inc., of Mountain View, California (http://www.best.com), on a machine called commerce.best.com. My account name is dtaylor, and my password is, well, wait a second. You don't really want to know my password, do you? Anyway, suffice it to say I have a password!

I want to upload both the HTML file tips.html and the graphics file spiffo.gif to the server. To do this, I use a great utility called FTP Explorer, included on the CD-ROM in this book.

---

If you don't have the CD-ROM, get a copy of FTP Explorer at http://www.ftpx.com/. My favorite Macintosh FTP alternative is the classic Fetch application from Dartmouth, which you can get at http://www.dartmouth.edu/pages/softdev/fetch.html

---

After the program starts, I choose Connect from the Tools menu and enter the information shown in Figure A-12. (note that I used FTP Explorer frequently, so some of the entries on the left side of the screen shot will differ from what you'll see on your screen).

Figure A-12: Specifying the information to connect to Best

Within a few seconds, FTP Explorer connects to the remote site via the file transfer protocol and shows me the files and folders on the remote machine in a form that's quite familiar; it looks just like the Windows 95 Explorer file management program.

---

You'll need to substitute information as appropriate for your account -- and if you don't have one, check out Appendix C, which lists a variety of ways you can find a good Web space provider for your pages.

---

Figure A-13 shows how things look when I connect to my account. You can see lots of directories and files already there.

Figure A-13: Lots of files in FTP Explorer

From this point, I simply click the up arrow on the toolbar to choose the HTML and graphic files I want to upload to the Web server.

---

A little trick: Click on a file, then shift-click on a second file, and FTP Explorer can send both files with a single transaction, as you can see is ready to go in Figure A-14.

---

Figure A-14: Sending files up to the server

That's all you need to send the completed Web page to the server and have it available to the general public.

One Last Check

The files are on the server, and I already know that my domain name on the Best server is www.intuitive.com, so I can put it all together and find that the URL of the new page I've just created is http://www.intuitive.com/coolweb/tips.html

Sure enough, I go to that URL and see the Web page shown here as Figure A-15.

Figure A-15: The final public Web page

As you can see, creating a Web page, adding some graphics, and uploading it to a Web server are straightforward with some good tools, and I'm sure that with a bit of practice you can quickly create some fabulous Web sites of your own.