Contact:
FoDOsys Learning Systems
|
|
Contact: |
|
 Tutorial 1: Setting Up A Web Site So you want to set up your own web site? Doesn’t every one? Let’s take a look at just what is involved and, along the way, take a peek at some tools to help you get there. Your Place on the Web In reality, setting up a simple web site isn’t all that difficult or expensive. You can pay anywhere from absolutely nothing to several thousand dollars a month. First, however, check to see what may be already available to you. If you are accessing the web through an Internet Service Provider (ISP), you may already have space on your ISP’s servers for a small web site (or home page). It may already be included with the package. (There are all kinds of ISP’s out there ranging from small ‘Mom and Pop’ operations to multi-national companies. Check here for a sample listing.) If it is, you can skip down to the next section, ‘Setting Up Shop’. If you don’t already have space, you can either get space for free, or buy it. Www.tripod.com is one site that offers free web space. The last time I checked, you could get up to 11 megabytes of disk space for your web. (This whole web site including FoDOsys, Diamond Memories Sportscards and David Oldfield Promotions, but NOT including any software downloads, takes up less than two megabytes.) But nothing is ever really free, is it? Tripod (and others) are able to give you free space because they sell advertising. Your site acts, in fact, as an ‘attractor’ so people visiting your site will get to view the advertising. On Tripod, the advertising is presented in a second browser window. It doesn’t muss up your carefully designed page, but it is probably more distracting than if the advertising were placed at the top or bottom of your page. But, don’t knock a free site! Another source for a free site is www.xoom.com. Xoom places advertising on your page and so is (to me) less obtrusive. Xoom also gives you 11 megabytes of storage - which is enough for most purposes. You may also find free space available at www.GeoCities.com or www.spree.com. One of the disadvantages of using free space is that sometimes the ‘tools’ they provide to help you get started are a big pain to use. One of them, I believe it is Tripod, has a strange method of transferring files from your computer to your website. You can only transfer files to your root folder. After you have transferred all the files, you may then move some to another folder - but this breaks down to a lot of extra work. Still, it’s free! You can buy storage space for $9.95 a month and up. Small ISP’s, like www.nas.net will provide up to 10 megs of space - but no other features. Other sites, largely located in the U.S. will offer space, sometimes unlimited space, for $10 - $20 (US) a month. Check out www.simpleweb.com for one. Often you get a number of useful bonuses such as e-mail addresses, but some features can cost extra (such as support for Microsoft’s FrontPage 98 extensions). There are many steps involved in setting up a web site. First of all, you have to decide what your web site will contain. Will it promote a business? Will it offer electronic data (of some type) or physical goods for sale? Will it merely promote you, either as a professional or as just a person with unique (and hopefully interesting) interests and opinions. Perhaps you want to set up a site to honor someone or something you admire. Be careful here since it is very easy to infringe on copyrights and other ‘intellectual property’ rights. Maybe you’ll just provide a list of other sites you find interesting, amusing or helpful. Once you have decided what your site will contain, you need to establish an overall design for your site and break the contents up into manageable chunks. Don’t forget that a long web page can take a while to download. If your visitor is only interested in one small aspect of your site, he or she may not take kindly to having to download a very long page. On the other hand, try not to force your visitor to download any more pages than absolutely necessary for your visitor to get where he or she wants to be. Part of the design will be the graphics that you use. You will probably be using two types of graphics: First, graphics that compliment and complete the overall design of your site. These include ‘buttons’ or links to other pages, a main ‘logo’ or welcome graphics and other elements such as horizontal lines to break up sections of a page. The other type of graphic is one that serves to illustrate or refine the main content of your site. If you are reviewing a program, a graphic that displays the main screen of the program could be helpful. Some graphics, such as buttons or horizontal lines are readily available from many sources on the web (including a few here). Www.xoom.com not only has many you can download but sells CD-ROM’s with up to 250,000 web-ready graphics. Other graphics, such as the main logo or the program screen-shot you will likely have to create (or at least edit) yourself. To do so, you need a reliable graphics program. You’ll find many possibilities when you explore various shareware sites, or you can opt for full blown commercial programs such as Corel Draw or Photo Shop. However, unless you are (or intend to be) a serious artist, you will probably find those programs are overkill. Even a more modest program, such as Paint Shop Pro has more than enough features to keep you learning for a long time. Paint Shop Pro is relatively easy to get started with, yet has plenty of extra features to try out as you get bolder. Best yet, Paint Shop Pro is shareware. That means you can download a copy and try it out for thirty days or so without charge. If you like it, buy it. It’s under $100 Cdn. and it’s worth every penny. Commercial programs (which admittedly may be somewhat more powerful) will set you back several hundreds of dollars - and there’s usually no free try-out. There are three graphics formats particularly suited for use on the web: J-PEG, GIF and PNG. PNG is the newest format, designed expressly for the web. Unfortunately, not all browsers (or graphics programs) support it and it has not yet really caught on. To play it safe, stick with GIF and JPG (J-PEG) files. You should also note that there are three variations of GIF files (probably more, but three you need to know about): Standard which consists of the object and the background; transparent, which consists of the object without a background (or, actually, a background that lets the underlying color or object show through); and animated. An animated GIF is comprised of several individual graphics which are viewed one after another. Virtually all of the animation on this site is done with animated GIFs. Finally, although this rule like most others is designed to be broken, use a GIF file for an object with ‘solid’ colors, not exceeding 256 distinct hues. For more colors, or more even transformations of colors as well as for photographs, use J-PEG. You should also be aware of one other type of graphic: BMP (bitmap). Many times, you will create your graphic as a BMP file and, when completed, convert it to a GIF or J-PEG as appropriate. Both GIF and J-PEG are compressed file formats. That means they give up some degree of detail in exchange for much smaller file sizes (which download faster). For most purposes, GIF or J-PEG graphics are more than adequate for viewing on a computer monitor. However, you may find that you want to revert to BMP or some other format for printed documents. You can prepare your text in any text editor or word processor. Probably the best idea is to create the text document separately. Then, when it has been polished, combine it with your page layout and graphics for the final effect. To produce the final web page, you can use a word processor or text editor, but many prefer to use an editor specifically designed for web pages. We’ll discuss that in a moment. The Language of the Web Web pages consist of text and various graphic elements. However, the ‘glue’ that binds text and graphics together in a unified and artistic whole is HTML (Hypertext Markup Language). Although it is possible to create a simple web page without any real knowledge of HTML, it isn’t really advisable. Sooner or later, you will need to take a look at and work with the underlying HTML code to get your page to look the way you want it to. Even sophisticated programs such as Microsoft FrontPage 98 requires that you occasionally tweak the HTML. That’s why you’ll find a convenient tab that lets you quickly jump to the HTML coded page. HTML isn’t all that difficult or scary, well at least the most often used elements of it aren’t. You can buy books that explain HTML and you can find information and tutorials on the web. However, if your needs are simple, you can probably create your pages without any real understanding of HTML if you use one of the dedicated web editors. There are two main types of HTML or web editors: Code based and WYSIWYG based. A code based editor works directly with HTML. That doesn’t mean you have to know HTML, just that you have to put up with the HTML commands staring you in the face as you create your pages. Here’s what this paragraph might look like as an HTML page in a code-based editor: <HTML> This was a very basic example. Only five HTML commands were used, and three of them did not need to be modified in any way. Notice that each HTML code is set off with angle brackets (‘Less than ‘ and ‘greater than’ signs). Notice also that, in this example, all commands are in pairs. Each one of the pair is exactly the same as the other, except for a slash ‘/’. The slash before the command word is like a negative or not: it turns that command off. All HTML pages should start and end with the ‘HTML’ command that tells the browser what type of page it is. Each page is divided into two main sections: ‘Head’ and ‘Body’. The ‘Head’ contains information that is not normally visible to the reader. (Actually, the ‘Title’ will appear in the browser’s title bar.) The data that appears in the browser’s main window is located within the ‘Body’ of the document. Many documents contain one more section, the ‘Address’. The ‘Address’ contains information about the author of the page and how to contact him or her. Finally, paragraphs in a document are set off with the ‘P’ command. There are many other commands, including some that do not require a closing pair. That may be a subject for another article. A WYSIWYG type editor looks much like a word processor. You enter your text (or paste it in) in much the same way. However, there are some differences. Instead of choosing a specific font size for an article title, you might choose a ‘header’ size instead. You will also find yourself regularly creating links to other documents or web sites. As you build your document, you will see a close approximation of what its final appearance will be on the screen. (That’s what WYSIWYG - What You See Is What You Get - means.) With a code-based editor, you may have to open a separate screen or even a separate program (a browser) to see what your page will actually look like. Which type of editor is better? Originally, I favored code-based editors. They allowed me more control and they also helped me learn HTML. In addition, early WYSIWYG editors did not give you easy access to the HTML code when you needed it. Now, however, WYSIWYG editors have improved; not only creating the underlying HTML code to produce the page the way you want it better, but also giving you easier access to the code when you still needed to do so. There are many good editors out there, but I will mention only three: Microsoft FrontPage 98: Probably the best WYSIWYG editor, that is really a whole lot more than just an editor (which, in my opinion, is actually a disadvantage unless you are building a complicated site that runs from your own server). Once you learn to use (or ignore) the non-editing features, you will start to appreciate the power of its editor. You also get easy access to the HTML code when you need it (something that FrontPage 97 did not do well). One word of warning: Make sure all the graphics you need for your page are already stored in the correct folder in your ‘website’ folder. If you edit and save a graphic while within the editor, the editor probably won’t be able to find the file. (You can use the FrontPage Explorer to ‘import’ the graphic, but that is slightly more complicated.) For a long time, my favorite code-type editor was Lucknow’s WebEdit Pro. It’s a good editor that has recently been improved. However, I haven’t upgraded to the new version and probably won’t. Still, I recommend it highly. Many times it saved me from disaster when I was using FrontPage 97. With FP 98, I haven’t needed to use WebEdit Pro hardly at all. One of the best known editors is HotDog Pro from Sausage Software. (www.sausage.com) This is another full power editor, but the really neat aspect of this program is all the ‘plug-in’s that are available to increase its functionality. All of these editors are very capable and powerful. Interestingly enough, they all cost about $150 as well. Finally, many of today’s applications can turn their normal document into an HTML document. You will seldom get exactly what you want, but it is the easiest way to get on the web quickly. When you save your HTML document, make sure to use the extension "HTM" or "HTML" so your ISP’s server will know what type of file it is. Going Live Now you’ve got your web pages made up and you’re ready to make your presence felt on the web. Trouble is, your pages are sitting on your computer. They need to be sitting on your ISP’s server computer. Some browsers will allow you to ‘upload’ files. Most ISP’s, however, need user names and passwords before they allow you to upload files and you may find that using your browser just isn’t very convenient. Most HTML editors also have the ability to upload files, but this too may not prove convenient. (Be careful if you are using FrontPage. Some ISP’s aren’t equipped to handle the way FP wants to upload files.) So far, I’ve always (well almost always) used a file transfer program. You’ll find WS_FTP in many shareware sites. It’s good and it’s free! Another good choice which isn’t free is ByteCatcher. ByteCatcher will also let you continue a download or upload from the point you were cut off. Most other programs require you to start over from the beginning. Most FTP (File Transfer Protocol) programs display the drives, folders and files of your computer on the left and the relevant folders and files of your ISP’s server on the right. Your HTML files are usually stored inside the ‘Public’ folder which is inside your username folder. Before you can use an FTP program, you need to supply it with some basic (but not necessarily straight-forward) information. It needs the full address to your ISP’s server and to your folder on the server. It needs your user name and your password. (You can opt to enter your password manually each session.) Finally, it needs to know what Internet connection you are going to use. (For most of us, we have only one connection.) If you are using a free web site, you need to check very carefully how they want you to upload your files. You may find that you can not conveniently use an FTP program. You’re On the Web! Now you’re all set, right? Technically yes, but realistically, there is still much work to do. It is no exaggeration to say that there are millions of sites sitting on servers out there waiting for someone, anyone, to pay a visit. Your site isn’t doing much good if no one visits it. You need to find some way to promote your site. That’s a major topic and one that I am still learning about. But maybe we’ll tackle it a little later. Do be sure to tell your friends and families about your site. Put your site address (your ‘URL’ such as www.nas.net/~oldfield/index.html ) on every piece of literature you distribute. Oh, and if you run radio or TV commercials, include your URL there! (If you really do run commercials, maybe you should hire me to create and maintain your web for you - I could use the money!) Establishing your presence on the web is the first step. However, if you want people to return to your site, you must provide a reason for their return. That usually means, among other things, that the content of your site changes (to some extent) at regular intervals. A static, stale site doesn’t get many return visits. Keep your site and information up to date. We didn’t talk much about links in this article, but we will later. However, it is essential that you keep your links active and working properly. There are two things that really turn off web surfers: bad spelling and broken links. There’s really no excuse for bad spelling with today’s spell checkers, yet it still happens. Keeping links properly maintained isn’t so easy. From time to time people move their sites from one server to another. This usually results in a broken link. Sometimes people revise their sites and change the name of some pages (or just the extension - from ‘htm’ to ‘html’, for example). Result: broken links. Check your links regularly and correct any that no longer work (or remove them). Now, I’ve got to put this through the spell check and check out the links I mentioned above. See you soon. Your comments and questions are always welcome. Oldfield@nas.net |
 Copyright © 1998 by Fred Oldfield is
|
