HTML Tools Presentation

1. An Overview of the HTML Design Process
2. A look at HTML Tools available today
3. An example of HTML Tool use for document design
4. Questions & Answers

An Overview of the HTML Design Process

1. Set up the software needed for the rest of these steps.
2. Browse the Web for ideas.
3. Inspect the source code to see how the thing you like are done.
4. Determine what resources you will have available to you.
5. Decide what your page will do.
6. Use an HTML Editor to build the text of your page.
7. Use graphic tools to add pictures to your page, if needed.
8. Preview the page locally before uploading it.
9. Upload your page to your Web server.
10. Browse your page, making corrections until it looks OK in both a graphic- and text-based browser (such as Netscape and Lynx, respectively).
11. Check to see that your page meets the local quality assurance standards.
12. Ensure that the completed page(s) are located in the correct place.
13. Browse your page in its new location.
14. Let the world know your page is up and running.

A look at HTML Tools available today

An example of HTML Tool use for document design

1. Set up the software needed for the rest of these steps. - We decide to use Netscape, which we loaded a few months ago, with help from the FortNet helper team. With their help, we downloaded the latest set of FortNet starter disks for Windows machines. We then downloaded the newest Netscape for Windows 3.1.

2. Browse the Web for ideas. - We browse the WWW, starting at a favorite spot, Global Network Navigator (GNN), since a friend told us about the Netizens list there. We quickly find the Home Page Construction Kit.

3. Inspect the source code to see how the thing we like are done. - We use the View Source feature of Netscape. We see how the IMG tag uses some Netscape extensions (HEIGHT, WIDTH, ALIGN=LEFT) to wrap the text around the graphic. Cool! As long as Lynx doesn't break when it sees this, we can use it. We copy the fancier IMG statement to the clipboard, so we don't have to type it in manually later. Besides, our HTML editor may not support this neat Netscape extension.

4. Determine what resources we will have available to us. - We recap what we have used, and decide we should check to see that we have the latest version of a powerful HTML editor. We look over Hot Dog, Kenn Nesbitt's WebEdit, and a few others. On the advise of a webmaster, we also get a copy of LView Pro for fine tuning our graphics. We also verify that we still have a recent version of John Junod's delightful WinSock FTP (WS_FTP) on our Windows machine. Using WS_FTP, we download the most recent version of the FortNet HTML skeleton.

5. Decide what our page will do. - We want to start simple and revise the page later. Once our friends check out our page, we are sure to get flamed for what we left out. Or maybe not. We'll see. For now, we decide to use:
   • A digitized photo, in GIF format
   • An HREF to our mailbox, so people can give feedback inline.
   • The "Return to FortNet Home Page" image and link.
   • Netscape extensions to wrap text around the photo.
   • A few kinds of lists, just to test our prowess with these.

6. Use an HTML Editor to build the text of our page. - we edit the HTML skeleton template we obtained earlier, leaving the original intact for another day. We build the basic text, some formatting (like bold and italicized text for a little emphasis), and a few lists. We also add the image at the top of our document, using the built-in image tool.

7. Use graphic tools to add pictures to our page, if needed. - we use LView to increase the contrast on the photo just a little bit. What a great cure for one bad picture in a batch of otherwise flawless shots!

8. Preview the page locally before uploading it - We check out the page by starting up Trumpet WinSock (but NOT dialing FortNet, since we will be working locally), then firing up Netscape. We use the Open File function, locate our page, and check it out. So far, so good.

9. Upload our page to our Web server. - we go back into Trumpet Winsock's TCP Manager (TCPMAN) and connect for real. It take a few tries, but we -do- get onto the terminal server. We start up WS_FTP and sign onto linden.fortnet.org, where our login account is. Upload our home page, index.htm as index.html on the FortNet machine. We shut down WS_FTP, but leave Trumpet WinSock running.

10. Browse our page, making corrections until it looks OK in both a graphic- and text-based browser (such as Netscape and Lynx, respectively). - To see how our page looks in Lynx, we do the following: After viewing the document, we make minor adjustments --- we brave vi --- and try again. Better! We look at the document with Netscape (still running from earlier) by accessing URL http://www.fortnet.org/~myname, which looks great.

11. Check to see that our page meets the local quality assurance standards. - We run the Graphical WebLint Page, just to get into the habit of it early in our HTML career. If we were doing a page for an information provider, this step would be required. We 'dare' WebLint to break our beautiful home page by choosing the 'Strict' setting. Our reward: we gets lots of error messages. We (again) brave vi, fix the errors, and get a clean run of WebLint after just one try. Good thing we used that skeleton document!

12. Ensure that the completed page(s) are located in the correct place. - send email to htmlqa@fortnet.org and waited for a QA team member to verify our work. The QA person would, in turn, email to webmaster@fortnet.org to let the "Websters" know the file was ready (and where to put the file).

13. Browse our page in its new location. - We look at the home page, just to be REALLY sure it is OK (which it is).

14. Let the world know our page is up and running. - We email all our pals to let them know our page is 'out there.' We also ask the webmasters to add an entry to the collection at the appropriate place. at The submit URL page The webmasters also add an entry on the What's New page.

Questions & Answers

1. How do I ...

2. What if I want to ...

3. What's the best way ...

4. Where do I find more information on ...