On Computers

Building Your Own Personal Web Site

Jack Imsdahl, daWabbit jack@oncomputers.info

Aired 26 January 2003 and 16 February 2003 in Two Parts

When Alaska Joe started offering his special on personal web site hosting for On Computers listeners, we got to thinking that there are probably quite a few of you who would enjoy or benefit from a personal, non-commercial site, but who are put off by the perceived complexity of designing, building and maintaining it. So, we thought we’d address this and see if we can convince you to give it a shot. Many of our listeners are quite accomplished at web site design and execution, but there's always room for more, so we’ll address ourselves to those who possibly have not tried this before.

A personal site could be used for displaying family pictures and news, sharing a hobby such as fishing, writing poetry or short stories or just about anything else. There are certainly at least as many uses for a personal site as there are people and we’re sure that if you give it some thought, you’ll find you already have a good reason for having your own site.

It’s true that the HTML coding you will have to do to build your site is “computer programming” (though only in the loosest of terms) which seems to be what scares folks off. It shouldn’t. ‘HTML’ stands for ‘hyper-text markup language’. Using it, you ‘mark up’ a document to tell a web browser how to display it. It’s fair to think of HTML as crib notes in the margins of the document, though that over-simplifies a bit. HTML code is very nearly plain English and so quite easy to understand. The code itself is instructions to what is called a ‘rendering engine’ in your web browser and nothing at a more basic level of your machine is affected. You won’t crash or disrupt your system if you goof up. Usually, poorly written code simply doesn’t run or doesn’t display as you wish. Occasionally, if you really try, you can bog down your browser with certain things or even crash it. Simply restarting the browser is enough to fix that before you go on to fix the code itself.

And as you are considering building a site, keep in mind that HTML and the web were built to allow anyone and everyone to share information as easily as possible. This is about as easy as it gets and it’s really a lot easier than it looks.

Remember; We’re talking about simple sites, here. Beginner stuff. Later on, you can get into scripts and all sorts of other features, but for now, you can go on learning and have a really nice looking and working site without any risk.

You don’t even have to put out any money to give this a try. Not one cent. We’ll concentrate on freeware to help you start out. Later on, you may wish to go buy some software for this, but remember; you don’t need any of it. You may decide you want it, but you don’t need it. Some of the freeware we’ll be talking about is all Jack uses in his web work. (While not the consummate professional web designer, he does a lot of it using only these free tools.) Even the most complex web site can be programmed in any text editor. In fact, some hard core HTML coders use only Notepad, which comes with every Windows installation. We’ll talk more about software later in the article.

Your experiments in HTML coding can be viewed on your local machine. You don’t even need a place to post them until you feel you are ready for that step. Many HTML editors have preview displays and you can open the files in your browser at any time, allowing you to see exactly how they’ll appear on the web. (This has the added advantage of allowing extremely rapid viewing because you are opening a file on your local machine, rather than downloading it from the web.)

At it’s most basic; HTML coding is really quite simple. At first, it looks intimidating. A few simple exercises from the various tutorials available will go a long ways towards building your confidence. If you persist for just an hour or two, you’ll start to see real results and not just the little starter exercises, either.

If at this point you are interested, we suggest you use the tutorials listed below to check out the actual process of building a web page and, if you think you’d like to give it a try, head on to the rest of the article, where we’ll talk about software to help you do it.

There are so many HTML tutorials and how-tos on the web that it would be impossible to categorize even a significant fraction of the really good ones. Here are some to help you get started:

There are a host of others. Should you not find one of the above to your liking, a bit of searching will reveal many, many more.

Among us; we have also a great many tutorial books on using HTML. A trip to the book store will reveal an amazing array of them. Frankly; most have disappointed as regards being beginning texts, either falling far short of their promises or treating the reader like an idiot, which is why we stress the tutorials on the web. Besides; the web doesn’t cost money for this. You can blow an awful lot on books and still not have a usable tutorial or reference.

There is one, though, that we will recommend. The title is; “HTML for the World Wide Web, Fifth Edition, with XHTML and CSS: Visual Quick Start Guide”, by Elizabeth Castro. Jack uses the Fourth Edition almost constantly and recently ordered the Fifth Edition. Everything you need to get a good running start at web page construction is in this book in an easily accessible form (as in any quality tutorial). What puts this book ahead of the others is the fact that it is laid out to be a reference for later on, after you’ve actually gone to work on your pages. Should you get stuck on something, that topic is easily found in the index and you’ll get the information you need to do what you wish to do quickly.

Ms. Castro has a site at http://www.cookwood.com/ which will show you enough about her books (she has written other tutorials for web work, as well) to allow you deciding whether or not her books might be of use to you.

We’re sure we’re missing a lot of useful tutorial sites in this list. Likewise, there are a great many tutorial books on web site work we have not seen, so it’s certain we’re missing some good ones there, also. Should you know of a good resource, would you please post it to the news group? Alternatively, you can mail it to Jack at the address above and he’ll work it into these lists in short order with credit to you for sending it. The same goes for software recommendations.

We urge you to have a look at the above references and see what building a web site is really about. We’re confident you’ll find it something you can learn to do.

Software for HTML Programming

There is an incredible range of software available for building web pages. At every level between the simplest text editor and the WYSIWYG (What You See Is What You Get) suites there are myriad choices. We’ll start with the most basic stuff designed for the purpose and go upward from there.

We feel, and there are many experienced coders who agree with us, that a WYSIWYG suite is not the best way for an inexperienced person to go about learning to build a web site because such programs insulate the user from the actual code. (In all fairness, we must note that this opinion is just that and is not shared by many other web site builders we know.) Until you learn to manipulate the code itself, it is probably best to stay clear of such programs. That way, if something goes wrong with the code, you’ll know how to recognize what it is and repair or redo it. Later on, you may want a WYSIWYG suite. They are very handy and speed the repetitive aspects of the work, after all. But to start out, we recommend using simpler software and developing a more intimate relationship with the code to increase your understanding.

As we stated earlier; all you really need as far as a programming environment for HTML is Notepad, which comes with every version of Windows. (You will find it under the Accessories menu.) The only real change one has to make is to change the file extension of saved files from .txt to .html and Notepad will serve quite well. In fact, we are unaware of any text editor that runs under Windows in which one cannot do HTML coding.

Notepad has some limitations, though. For one thing, it does not natively save files as .html documents, which means one has always to remember to change the file extension. And Notepad has a 32 kilobyte file size limit. For most web pages, this is entirely sufficient, though some longer or more complex pages will have more code than that. (This is excluding any graphics, which are called from a separate file or location, but includes any scripts, etc; that are located in the document itself and not called from a remote location.)

Should you wish to use a plain text editor and find Notepad less than satisfactory, you can find a large number of replacements on the web. Context http://www.fixedsys.com/context/ is a popular editor under Windows. It has syntax highlighting and support for a number of programming languages – not just HTML – and it runs well under all versions of Windows above Windows 95.

Jack uses The Crimson Editor a lot. You can find it at http://www.crimsoneditor.com/This editor has a relatively small footprint in memory and on hard drive, runs on every version of Windows from 95 up and has never once crashed on him. Though not intended as a dedicated HTML editor and supports a large number of programming languages, it works very well for this purpose.

One jump up from these editors are the dedicated HTML editors. There are several good ones out there. We’ll mention only a few of them, so if after trying them you aren’t particularly fond of these, ask around or go looking because there are plenty of alternatives to be found at places like http://www.webattack.com in the freeware and shareware sections.

1st Page 2000 is a really full featured HTML editor you can find at . http://www.evrsoft.com/ It has different ‘modes’ –‘easy’, ‘normal’, ‘expert’ and ‘hard-core’ depending on your skill level and what you need to do. There is a lot of scripting help built in, as well as an HTML code validator, features designed to ease and speed use of Dynamic HTML, CSS (Cascading Style Sheets) and more. It facilitates the use of code libraries where the user can store snippets of code she or he will need to reuse frequently (such as page templates) and simply paste them in to succeeding documents. There are many scripts and plug-ins included with the original installation and EvrSoft, the developers, have more available for download.

All in all, this is a very useful program. Jack has it installed on every Windows machine in his office and uses it second only to the program mentioned next. This is a rather large application because of all it’s features. Having said that, we must also say that it runs well even on machines with only 64 Megabytes of RAM and other applications open at the same time. Those new to coding my find 1st Page 2000 a bit confusing because of all it’s features, though of course this can be overcome with use over time. The help files are really quite good though and it’s worth getting even if it does not turn out to be your primary editing application.

Late in the day on 30 January, two On Computers listeners notified Jack via e-mail that 1st Page 2000 contains a virus or a file that sets off their anti-virus detectors. After scanning 3 installations of 1st Page 2000 on his local machines and then scanning the entire systems with 3 anti-virus programs per system, Jack was unable to reproduce or verify this. An e-mail to the developers of the program has so far gone unanswered (probably due to the late hour, rather than any lack of diligence on their part).

The most likely explanation for this problem seems to be that 1st Page 2000 contains within it’s library of scripts a file that resembles a virus closely enough to set off some detectors yet which is, in fact, harmless. This theory has been advanced several times by attendees in the #ICUG chat room since this first came up (6 hours ago, as this is written.) Jack’s scans used fully updated copies of the same anti-virus programs cited in the original e-mail to him, yet obtained negative results. The third anti-virus program run also returned negative results.
This indicates that current versions of the program are either clean or different than those before.

Further research has revealed that the button menu in the scripting wizard of 1st Page 2000 contains an entry entitled “Six Buttons from Hell” and which activates the script in question. The actual file name appears to be “SIX BUTTONS FROM HELL.IZS”. I am unable to find this file on my system and suspect it is created when the script is called from the button menu within the program. (The attractive naming of the button script explains why Jack never triggered it until researching this.)

Actually installing and triggering the script will lock and/or crash the browser used to run it, no matter which one it is, according to reports circulating on the web. Evidently this is someone’s idea of a joke on the user. 

Deleting the button from the script wizard will remove this danger. That is the course of action Jack is choosing to take, though with some trepidation, fearing further surprises hidden within. He wishes to continue using the application if at all possible.

Still, in view of this, we must withdraw our recommendation of this product, at least conditionally. Should you choose to use it, exercise great caution. Jack apologizes to one and all for the oversight. It should not have slipped by him.

Gail's note: After being notified by Jack, I installed 1st Page on my computer, and Norton Antivirus detected and removed the script. It was identified as JS.Trojan.WindowBomb.  See more about this script here:

http://securityresponse.symantec.com/avcenter/venc/data/js.trojan.windowbomb.html

MatrixY2K is also a dedicated HTML editor. This one is Jack’s favorite. It’s small on the hard drive and in memory. It also does many tasks semi-automatically. It is extremely stable on all Windows machines from 95a to XP SP1. You can find it at http://www.wtmsoftware.nl/projects.php There is also a new community of HTML coders, ranging from novice to expert at that site which you might find useful and fun to join. Jack is in regular touch with the developer of Matrix and is testing betas for him. As a result of this contact, we can say that even more new features are being added now and development on yet more features is underway. Currently, Matrix supports code libraries, integration with multiple browsers for previewing, and integration with your favorite FTP client for when it comes time to upload to the server.

Jack finds Matrix to be the best combination of features and quickness/ease of use for him and figures you will find the same utility in this application as he does. Matrix is exceptionally easy to use, compared to other editors in this class. If you are only going to try one of these editors, make it this one. You won’t regret it.

Should you wish to ignore our advice about starting with more basic software, there are freeware WYSIWYG editors for you to try. Web Dwarf is one. You can find it at http://www.virtualmechanics.com/products/dwarf/ . Jack used this program for a while. Though just a bit difficult to learn, it runs well on all versions of Windows and turns out good results. Web Dwarf occasionally inserts a bit of extraneous code that one is best off removing before posting to make the page load a wee bit faster, but it doesn’t really clutter things up and should not be faulted for this too heavily. Code output directly from Web Dwarf occasionally does not display on browsers other than Internet Explorer quite as well as one might wish. In every instance where Jack encountered it, this has proven easy to fix. It’s a very decent program, especially at the price.

The World Wide Web Consortium publishes Amaya, which is an exceptionally full-featured browser, WYSIWYG editor and more. It’s an Open Source project, too, with full support for the W3C standards. Find it at http://www.w3.org/Amaya/

We have found Amaya to be a bit confusing, simply because there are so many features offered from which to choose. Some months back, I suggested Deepak check out Web Dwarf and Amaya and his only real comment was on the complexity of Amaya. Amaya runs well on Windows of any flavor. It is a bit slow to load, but if you have a newer system, that pause is not onerously long. Even on our older 350, it’s not too bad. Amaya has never locked up or crashed here and we’ve had very few reports of problems with it.

And you may choose to use Front Page, which may already be installed on your machine as part of your Microsoft Office installation. Just because we don’t think that’s the way to go doesn’t mean it won’t work for you. Front Page has a reputation for adding extraneous code to HTML documents that occasionally makes display in browsers other than Internet Explorer difficult. This can be overcome. In fact, if you drop Jack an e-mail at the address above, he’ll send you a how-to telling you how to permanently remove the adding of this extra code from Front Page. Be warned that this involves a minor registry hack, but it’s not really difficult and can be done by nearly anyone.

Okay; There’s a small, but full-spectrum, list of things you can use to get started. You will likely need other tools, also. See the 5 January, 2003 tips section for free graphics software help, which you will need if you are going to include images of any sort in your site.

You’ll also probably need an application to pick colors for use on your site. Some folks use the tools already included in their graphics software and some prefer a separate application for this. Should you find yourself in the latter group, give CPick a try. You can find it at http://home.hccnet.nl/s.j.francke/software/software.htm Again; should this one not be to your liking, there are literally hundreds of others to choose from if you search just a bit. CPick is what Jack uses. It’s small, runs well and is unobtrusive. It also has the feature of allowing you to store color schemes for later reuse, which is handy.

Another very handy tool is Tidy. Tidy is an HTML validator. (This same service is available at the W3C web site, but if you use Tidy on your local machine, it’s much faster for involving no uploading of code. Find it at http://www.w3.org/People/Raggett/tidy/

Tidy works well now, but is continuously being developed to adhere to the ever-expanding standards of the W3C. It’s small, fast and has proven extraordinarily handy for finding flaws in Jack’s code (of which there seem to be an unusually large number, at times).

A screen capture tool isn’t something you’ll use a lot, but when you need one, it’s an incredibly handy thing to have. There are a lot of these about, too. The one Jack uses is Screen Rip 32. You can find it at http://www.progency.com/ This one runs well on all Windows versions and has proven most satisfactory. Using it saves manipulating the large bitmaps that using the Alt + Print Screen command gives as one only copies the part of the screen one needs to copy, rather than the entire screen.

You will likely need an FTP (File Transfer Protocol) program to help upload your site, should you choose to go all the way with this. (It should be noted that some hosts use a web interface which negates the need for an FTP application.) Jack uses SmartFTP, which is free and can be found at http://www.smartftp.com/ . There are many other applications that do the same thing and, as everyone seems to be comfortable with a different one, looking around at several of them will likely pay off.

Finally, there are browsers in which to view your work to make sure your site will display sufficiently well to everyone who visits. Though the vast majority of surfers use only Internet Explorer, it’s usually a trivial exercise to make sure your work can be seen well in other browsers, too, and that makes it worth the small effort involved. There very often are small changes in the way the pages display in different browsers which are too much trouble to overcome (though this can be done if you are willing to get a bit fancy and do some extra work) but one should make sure the site is at the least usable by those with alternative browsers.

Jack has installed Mozilla 1.2 from http://www.mozilla.org/ . With Mozilla installed, there is not really a need to install Netscape for reviewing your work as they use the same rendering engine and code that shows up well in one will show about the same in the other. Mozilla is a much smaller installation than Netscape, too, which is an added advantage to choosing it. Jack also reviews his pages in Opera from http://www.opera.com/ . Note that the freeware version of Opera, which displays advertisements, is perfectly acceptable for this purpose. You need not buy the ‘full’ version for this purpose. Jack will not post a site until it displays acceptably on these three browsers under Windows and a few more on Linux machines (Netscape, Mozilla, Konqueror and Galleon). And if he’s feeling unsure, he transmits the page(s) to a friend with a Mac and has him view the pages on a couple browsers on the Mac to make sure they display well there, also.

Finally, there is the matter of where to put your site. You may already be entitled to some disk space and hosting as part of your service agreement with your ISP and so not have to put out any additional money. The disadvantage of this is that your ISP’s name will appear in the address. You won’t own the domain.

The offer Alaska Joe has for On Computers listeners is quite inexpensive and includes domain registration, so the site will be titled ‘what you want to call it’ .com, .info or whatever. Besides making the site truly personal in presentation, owning the domain has some great advantages if later you wish to upgrade your services to include commercial activity or a much larger site. You can’t really beat Joe’s price, either. And you’ll love the service. You will be helping to support the On Computers show, too. They won’t be making much at all on this service, but even this minor cash flow will help keep the infrastructure of the show running.

Should you embark on building your own site, there is personal help available, also. You can drop into the #ICUG chat and see if someone there is able to help or you can e-mail Jack at the address above and he’ll try to give you some help or at least point you toward a reference that addresses your problem. Include the code for the entire page in question in the body of the e-mail, please. Jack will get back to you as fast as he can. He reserves the right to stop this at any time, should the work load get too high. But we’re all here to help and he’ll do his best in this.

Enjoy.

 

© 2002 - 2004 by Jack Imsdahl

Back • Home • Up • Next


@ Copyright 2002 - 2004 by On Computers and the Videotex Services Coalition.VSC -- Videotex Services Coaliton