View Source:
appendixA.html
<HTML>
<HEAD>
<TITLE>Creating Cool HTML 4 Web Pages: Appendix A</TITLE>
<META NAME="keyword" CONTENT="www,html,web page,html 4,javascript,java,page,page design,front page,homepage,taylor,dave taylor,cool web,cool web pages,hypertext,markup">
<META NAME="description" CONTENT="Central site for the best-selling book 'Creating Cool HTML 4 Web Pages', including sample chapters, software, FAQs, and a discussion area!">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (parseInt(navigator.appVersion.substring(0,1))>=3) { // 3.0 or greater.
viewsource_on = new Image(); // each image has an 'on' and 'off' version
viewsource_off = new Image();
viewsource_on.src = 'Graphics/viewsource-on.gif'; // all of these image
viewsource_off.src = 'Graphics/viewsource-off.gif'; // source files are
}
function activate(image) {
if (parseInt(navigator.appVersion.substring(0,1))>=3) { // 3.0 or greater.
imagesrc = eval(image + '_on.src');
document[image].src = imagesrc;
}
}
function deactivate(image) {
if (parseInt(navigator.appVersion.substring(0,1))>=3) { // 3.0 or greater.
imagesrc = eval(image + "_off.src");
document[image].src = imagesrc;
}
}
// end of script -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF XXBACKGROUND=Graphics/spiral-background.gif
LINK=#000000 VLINK=#000000>
<BLOCKQUOTE>
<CENTER>
<IMG WIDTH=527 HEIGHT=80 SRC=Graphics/ccwp-title.gif
ALT="Creating Cool HTML 4 Web Pages">
<P>
<font size=6 face="Courier">Appendix A</font><br>
<font size=5 face="Courier">Building Your First Page - A Primer</font>
</CENTER>
<P>
<UL>
<LI><a href="#s1">Entering and editing HTML with Notepad</a>
<LI><a href="#s2">Downloading a copy of Paint Shop Pro or Graphic Converter</a>
<LI><a href="#s3">Building graphics with Paint Shop Pro</a>
<LI><a href="#s4">Testing your page with Internet Explorer</a>
<LI><a href="#s5">Uploading with FTP Explorer</a>
<LI><a href="#s6">A final check</a>
</UL>
<P>
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.
<P>
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.
<a name="s1"></a>
<h2><font face=Courier>Entering and Editing HTML with Notepad</font></h2>
<BLOCKQUOTE>
<font size=2>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</font>
</BLOCKQUOTE>
<P>
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.
<P>
<CENTER>
<IMG WIDTH=367 HEIGHT=224 SRC=Screenshots/CWPA-1.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-1: Notepad shows my three favorite Web design tips.</font>
</CENTER>
<P>
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.
<P>
<CENTER>
<IMG WIDTH=367 HEIGHT=224 SRC=Screenshots/CWPA-2.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-2: Design tips with HTML tags</font>
</CENTER>
<P>
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.
<P>
<CENTER>
<IMG WIDTH=283 HEIGHT=160 SRC=Screenshots/CWPA-3.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-3: Save the working file as <tt>tips.html</tt></font>
</CENTER>
<P>
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.
<P>
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.
<a name="s2"></a>
<h2><font face=Courier>Downloading a Copy of Paint Shop Pro</font></h2>
To grab a copy of Paint Shop Pro, launch your Web browser. Then go to the JASC Software Web site at <a href=http://www.jasc.com/><font color=#000000>http://www.jasc.com/</font></a>.
<P>
<CENTER>
<IMG WIDTH=371 HEIGHT=249 SRC=Screenshots/CWPA-5.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-4: The JASC web page in Internet Explorer.</font>
</CENTER>
<P>
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.
<P>
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.
<P>
Next thing you know, you've got a terrific new shareware application from the Net on your computer. Pretty darn easy, eh?
<P>
<CENTER>
<HR NOSHADE SIZE=1 WIDTH=90%>
<TABLE BORDER=0 WIDTH=90% CELLSPACING=8>
<TR><TD><IMG WIDTH=119 HEIGHT=39 SRC=Graphics/tip-icon.gif ALT="TIP!"></TD>
<TD>If you like Paint Shop Pro please don't forget to register your shareware!</TD>
</TR>
</TABLE>
<HR NOSHADE SIZE=1 WIDTH=90%>
</CENTER>
<P>
<h2><font face=Courier>Or... Downloading GraphicConverter</font></h2>
<P>
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 <a href=http://www.lemkesoft.de><font color=#000000>http://www.lemkesoft.de/</font></a>, as shown in Figure A-5.
<P>
<CENTER>
<IMG WIDTH=340 HEIGHT=259 SRC=Screenshots/CWPA-6.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-5: The Lemke Software Web site</font>
</CENTER>
<P>
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.
<P>
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.
<a name="s3"></a>
<h2><font face=Courier>Building Graphics with Paint Shop Pro</font></h2>
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.
<P>
<CENTER>
<IMG WIDTH=323 HEIGHT=231 SRC=Screenshots/CWPA-7.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-6: Paint Shop Pro with a blank page</font>
</CENTER>
<P>
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.
<P>
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.
<P>
<CENTER>
<IMG WIDTH=301 HEIGHT=247 SRC=Screenshots/CWPA-8.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-7: Specifying the text for a graphic title</font>
</CENTER>
<P>
Click OK, and now it's just about done and looks pretty slick, as you can see in Figure A-8.
<P>
<CENTER>
<IMG WIDTH=323 HEIGHT=231 SRC=Screenshots/CWPA-9.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-8: The graphic title for my new Web page</font>
</CENTER>
<P>
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.
<P>
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.
<P>
<CENTER>
<IMG WIDTH=323 HEIGHT=231 SRC=Screenshots/CWPA-10.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-9: Selecting the region of the
graphic to save</font>
</CENTER>
<P>
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!
<P>
Now use the Save As option on the File menu to save this graphic as a GIF file, as shown in Figure A-10.
<P>
<CENTER>
<IMG WIDTH=283 HEIGHT=197 SRC=Screenshots/CWPA-11.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-10: Save the graphic as a GIF file
on the desktop</font>
</CENTER>
<P>
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:
<BLOCKQUOTE><TT>
<CENTER><br>
<IMG SRC=spiffo.gif><br>
</CENTER><br>
</tt></blockquote>
<P>
Now you can preview the document in a Web browser. (Don't forget to save the modifications!)
<a name="s4"></a>
<h2><font face=Courier>Testing Your Page with Internet Explorer</font></h2>
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.
<P>
The page should look just like Figure A-11:. a nice, simple, attractive Web page.
<P>
<CENTER>
<IMG WIDTH=428 HEIGHT=255 SRC=Screenshots/CWPA-13.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-13: Web Design Tips, finally,
in a browser</font>
</CENTER>
<P>
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?
<a name="s5"></a>
<h2><font face=Courier>Uploading with FTP Explorer</font></h2>
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!
<P>
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.
<P>
<CENTER>
<HR NOSHADE SIZE=1 WIDTH=90%>
<TABLE WIDTH=90% BORDER=0 CELLSPACING=5>
<TR><TD><IMG WIDTH=86 HEIGHT=36 SRC=Graphics/getit-icon.gif ALT="Get It!"></TD>
<TD>
If you don't have the CD-ROM, get a copy of FTP Explorer at <A HREF="http://www.ftpx.com/"><font color=#000000>http://www.ftpx.com/</font></A>. My favorite Macintosh FTP alternative is the classic Fetch application from Dartmouth, which you can get at <A HREF="http://www.dartmouth.edu/pages/softdev/fetch.html"><font color=#000000>http://www.dartmouth.edu/pages/softdev/fetch.html</font></A>
</TD></TR>
</TABLE>
<HR NOSHADE SIZE=1 WIDTH=90%>
</CENTER>
<P>
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).
<P>
<CENTER>
<IMG WIDTH=345 HEIGHT=146 SRC=Screenshots/CWPA-12.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-12: Specifying the information to
connect to Best</font>
</CENTER>
<P>
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.
<P>
<CENTER>
<HR NOSHADE SIZE=1 WIDTH=90%>
<TABLE BORDER=0 WIDTH=90% CELLSPACING=5>
<TR><TD><IMG WIDTH=74 HEIGHT=42 SRC=Graphics/note-icon.gif ALT="NOTE!"></TD>
<TD>
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.
</TD></TR>
</TABLE>
<HR NOSHADE SIZE=1 WIDTH=90%>
</CENTER>
<P>
Figure A-13 shows how things look when I connect to my account. You can see lots of directories and files already there.
<P>
<CENTER>
<IMG WIDTH=369 HEIGHT=233 SRC=Screenshots/CWPA-14.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-13: Lots of files in FTP Explorer</font>
</CENTER>
<P>
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.
<P>
<CENTER>
<HR NOSHADE SIZE=1 WIDTH=90%>
<TABLE BORDER=0 WIDTH=90% CELLSPACING=5>
<TR><TD><IMG WIDTH=119 HEIGHT=39 SRC=Graphics/tip-icon.gif ALT="Note!"></TD>
<TD>
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.
</TD></TR>
</TABLE>
<HR NOSHADE SIZE=1 WIDTH=90%>
</CENTER>
<P>
<CENTER>
<IMG WIDTH=331 HEIGHT=177 SRC=Screenshots/CWPA-15.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-14: Sending files up to the server</font>
</CENTER>
<P>
That's all you need to send the completed Web page to the server and have it available to the general public.
<a name="s6"></a>
<h2><font face=Courier>One Last Check</font></h2>
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
<A HREF="http://www.intuitive.com/coolweb/tips.html"><font color=#000000>http://www.intuitive.com/coolweb/tips.html</font></A>
<P>
Sure enough, I go to that URL and see the Web page shown here as Figure A-15.
<P>
<CENTER>
<IMG WIDTH=351 HEIGHT=249 SRC=Screenshots/CWPA-17.gif ALT="[screen shot]">
<BR>
<font size=2>Figure A-15: The final public Web page</font>
</CENTER>
<P>
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.
<P>
</BLOCKQUOTE>
<CENTER>
<IMG WIDTH=480 HEIGHT=22 SRC=Graphics/rough-rule.gif ALT="---">
<P>
<IMG WIDTH=475 HEIGHT=98 SRC=Graphics/navbar.gif ALT="navigational options"
USEMAP="#navbar-map" BORDER=0>
</CENTER>
<MAP NAME="navbar-map">
<AREA SHAPE="rect" COORDS="22,64,401,97" HREF="http://www.askdavetaylor.com/">
<AREA SHAPE="rect" COORDS="240,33,359,66" HREF="software.html">
<AREA SHAPE="rect" COORDS="180,33,241,63" HREF="FAQ">
<AREA SHAPE="rect" COORDS="60,34,180,62"
HREF="http://www.intuitive.com/taylor/">
<AREA SHAPE="rect" COORDS="358,-5,471,41" HREF="http://www.amazon.com/exec/obidos/ASIN/076453484X/ref=nosim/davetaylor/">
<AREA SHAPE="rect" COORDS="244,0,355,35" HREF="samples.html">
<AREA SHAPE="rect" COORDS="178,1,245,33" HREF="toc.html">
<AREA SHAPE="rect" COORDS="74,1,178,35" HREF="reviews.html">
<AREA SHAPE="rect" COORDS="-13,-6,75,36" HREF="index.shtml">
</MAP>
<P ALIGN=right>
<a href="viewsource.cgi?appendixA.html"
onMouseOver="activate('viewsource');return true;"
onMouseOut="deactivate('viewsource');return true;"><img
WIDTH=92 HEIGHT=35 src=Graphics/viewsource-off.gif name=viewsource
ALt="View Source" border=0></a>
</P>
</BODY>
</HTML>
