Web Authoring Basics
Dr. Wes Leggett
If there's one thing I've learned that makes my life so much easier in creating websites, it is to develop the site on one disk - either floppy, Zip, CD-RW, or Portable USB. When I first started creating web pages back in 1995 in raw HTML code, I learned a valuable lesson in making sure that all the files associated with my web page were copied to the host web server so that everything I had created was loadable and viewable! The other thing I ran into was having my links, for pages, pictures, and other websites, looking at the wrong spot after I uploaded the pages to the host server. The easiest way to keep these frustrating events in check is to develop your website on a new, single disk. From 1995 to 1997, I developed all my websites on floppies. From 1997 to just recently, I developed my websites on Zips. I now develop solely on Portable USB Flash Memory Drives (brand names include Pen Drive, JumpDrive, and TinyDisk).
The key to using one disk is that you can actually have all the main files and folders all in the root directory. This is essential when uploading pages to the host server. No imbedded directories or paths to throw off page, picture, or site links!
When HTML code was first developed, it was designed to be case-sensitive (it made a difference whether you used upper- or lower-case letters) and space-sensitive (in other words, NO spaces) with filenames. With the development of advanced versions, including SHTML and XML, these conventions are not necessarily true anymore. However, I've found that it works best if I continue to follow the original parameters of HTML by using lowercase filenames and if I want to separate words in a filename, to use the _ underscore character. For example, this web page is named webauthorbasics.htm but if I wanted to separate the words, I could name it web_authoring_basics.htm.
One thing that will drive you crazy about web pages are the extensions .htm and .html. The file index.htm is different from index.html. This all started because the Macintosh, like it was when desktop publishing was introduced, was the platform of choice by early web page developers (yours truly included) when web authoring was in its infancy. The Mac is not limited to three (3) character filename extensions, so web authors who developed on the Mac always used the extension .html. Early Windows web developers, however, were limited, so they HAD to use .htm. In the early days of the web, you could easily tell which web pages were created on a Mac and which were created on a Windows computer, just by looking at the filename extension. Even though Mac users could save their files as .htm, it was a badge of honor and a rub in the Windows developers' faces to save in .html (sound like children?). Today, Windows no longer has the filename extension constraint, but there are all kinds of .htm and .html files running around and to make it confusing, as I noted before, they are NOT the same files. Fortunately, the browsers we use are adaptable in recognizing either. Proprietary online delivery systems, like Jones e-Education for example, require pages to be .html.
When you see a picture on a web page, that picture is not included as part of the web page. Rather, a link (HTML code) to a picture file is all that is included in the page. That's why the text always loads first on a web page and then the pictures come in one at a time. This is confusing to folks who have always inserted and copied pictures, especially clipart, into their Microsoft Word documents and PowerPoint presentations. The important thing to know is that pictures must be an independent file on the disk. When the picture file is missing, your web page will show the spot where the picture is supposed to be, but it will be an empty frame with a red "x" or broken picture icon graphic in the top left corner.
As for the format of the picture files, they need to be in .gif or .jpg (also .jpeg) format. This means that regular picture formats (like .pic, .tif, .bmp) and clipart formats (like .wmf, .bmp) won't work on your web pages. If you want to use any picture that is not in .gif or .jpg format, you'll have to use a photo-imaging program (like Adobe PhotoDeluxe or PhotoShop) to convert the picture to the .gif or .jpg format. Most digital cameras save in .jpg format and all scanners can save in .jpg format, so this is not usually an issue with original photos.
The best way to guarantee that pictures you use on your web page will work is to use pictures from the web! It's an easy process to save images to your disk...simply position your mouse pointer in the middle of the picture you want to save, click your RIGHT mouse button (Mac users simply push and HOLD your mouse button), select "Save Picture As..." (Mac users have "Save Image As") from the pop-up menu that appears, then find and select your disk in the "Save As" dialog box that appears (you can change the filename to something you want at this point), and click "OK" to save. That's it! Make sure all the pictures you use on your web page are on your floppy or Zip disk and that you've created the link for display directly to them.
At the top of this page, the bulleted items represent what FrontPage and DreamWeaver call bookmarks. When you click on them, the page jumps down to that particular section, much like having a bookmark (or bookmarks) in a book so you can immediately go to a particular section. In the early days of web development, we called these anchor links while bookmarks were what FrontPage and DreamWeaver now call hyperlinks (sound confusing?). The best use of bookmarks are on pages like this in which you want to give the user the option to jump to a particular section.
Hyperlinks are to other web pages or files (like .pdf, .ppt) on your website, or to external web pages or websites. You may have noticed that any external web page or website link I've provided opens in a new window. This allows my visitors to view new screens without losing track of their original starting point. On any page I have that loads in the existing window, I always provide navigation links at the top and bottom of the page so users can easily move to the other main pages in my site.
One trick you can use in creating links to other websites is to use the keyboard shortcuts of Ctrl+c (hold down the Control key while pressing the c key) and Ctrl+v (hold down the Control key while pressing the v key). Ctrl+c is the shortcut for copy and Ctrl+v is the shortcut for paste. Here's how you would use them...
When I'm making links on my web pages to other websites, I have both my web authoring program (either FrontPage or DreamWeaver) open and my browser (usually Explorer) open. When I find a site or web page I want to link to, I simply position my mouse pointer inside the address location window and click my LEFT mouse button. This highlights the entire web address of the web page I'm currently viewing. I then do a Ctrl+c to copy the address to the clipboard (nothing happens, you just have to trust that it did...if it didn't, you'll find out soon enough!). I then make my web authoring program active and position the cursor where I want to include the new link. I then type in the descriptive name I want to use or simply do a Ctrl+v if I want to paste the full address as the descriptor. If I've typed in the descriptive name, after I highlight it and select Insert Hyperlink, when the dialog box comes up I click inside the URL box, delete anything already there, and then do a Ctrl+v to paste the address I just copied (if it doesn't show up, then I know I need to go back to my browser and do another Ctrl+c in the address line). If I've used the full address as the descriptor, when I highlight it and select Insert Hyperlink, when the dialog box comes up, the address is already inside the URL box, so the only thing I need to do is to select the target window as new (blank) and click OK. I use the keyboard shortcuts all the time so I don't have to write down web addresses and then type them in later, which eliminates any misspellings. If I happen to be on a computer that doesn't have my web authoring programs, I can still do the same thing by copying and pasting the web addresses into an email message that I send to myself. When I'm back on my regular computer, I copy and paste the addresses out of the email message. Cool, huh?!
There are free Web hosting servers available like www.freeservers.com, www.20fr.com, and www.50megs.com. While there are others out there, I can recommend these since I have used each of them at one point or another (I used www.freeservers.com for over 5 years). These companies are able to provide web hosting free because they make their money by sticking ad banners at the top of each page and selling the space to advertisers. Signing up for them is easy and fast. While you could use the web authoring tool that each provides to create your web pages, you have much more control and flexibility in using FrontPage or DreamWeaver.
Once you have your web pages done on your single disk, you're ready to upload the files to your web server. I recommend doing this though the web interface provided by the services (usually called File Builder or File Manager) or by using FTP (File Transfer Protocol) software. WS_FTP95LE is the FTP program I've used for what seems like forever. It's FREE and you can find the latest version (which includes user instructions) and a download site by just typing "ftp download" in a search engine.
Once you've uploaded your files (don't forget your picture files!), you'll want to thoroughly check your website to make sure EVERYTHING works!
Copyright © 2000-2004 Dr. Wes Leggett
Last updated 08.14.04