Personal websites go up every day. People write for many reasons on innumerable topics. Rarely is this content well thought out, organized and delivered. This is more an exception then the rule. One concept that has captured popularity recently is 'blogging. Weblogs allow their publishers near real-time content delivery to readers. Herein however is the problem that most 'blogs face. The quality of the content on a great many of these sites suffers immensely. There are very few that are worth reading, fewer yet with content that is creative and unique. This is in no way to discourage anyone from putting up a site; but rather to ask the creator to put more thought into the page instead of just throwing up the first thing that comes to mind. Having a well defined reason for creation of a site that is closely followed by the content is bound to make it more pleasurable to read.
When you choose to represent yourself, your views and your work online the viewers would like to see something original, creative and interesting. This tutorial is geared towards building project centric sites rather than 'blogs. Though many points are valid in both scenarios, 'blogs are most often built using off-the-shelf tools, which hide many technical details.
Along side the uninspired content is rampant plagiarism. This goes for content, design and code that people reuse without permission from or credit to the original author. While imitation may be the best form of flattery, it is certainly not always appreciated and is in many cases illegal. Using someone else's work, or making derivatives of it is, on the other hand, a good idea when it is expressly allowed by the creator and is properly credited to him. Should you choose to write something on the topic of quantum mechanics, but are already aware of some published content on about it, it is generally a good idea to link to it, as your readers will appreciate more references. It also saves time, instead of duplicating the material that is readily available, you can concentrate on your specific subject.
There is nothing that degrades the quality of a site quite like poor use of the language that it is written in. It can happen in many ways. Use of words may be inconsistent, that is if the site uses "email" on one page and "e-mail" on another. Foremost however is the lack of proper spelling that says that not enough work has gone into the creation of the website. Please check your spelling before posting the site. This cannot be stressed enough. Not only should you check the spelling, but it is a good idea to have the content proof read by someone else. Lastly, refrain from using "leet" speak it's just dumb.
Very often, the first thing that your visitors will see is the page title in the title bar of the browser. So, it is important to make this subject fairly short but descriptive. Keep in mind that it is not possible to add style information to the page title. Adding non-alphanumeric characters to the title for the purposes of aesthetics often takes away from its usefulness. Also important is to check the title of each page before publishing it to make sure that it is indeed the page title rather than the template placeholder for it.
Take time to consider content organization and grouping. A well-organized site is easy to navigate, it has an intuitive interface, one that users do not have to struggle with to extract the information they are looking for.
Frequently, users come across sites with just a graphic slash page and no other content. This image is generally a link that contains a reference to an email address. Clicking on it spawns the user's email client and populates the email with information from the link. Not only is this practice useless, it is also very annoying to the visitor. Rarely do people check the link destination in the browser status bar. When they follow the link, they expect to see content, not their email client. On many machines this operation will also slow the computer down. The reason this link is pointless, is that there is no justification for soliciting user communication since there is nothing to talk about as far as site content goes. So if you must have a splash page up while you are developing your site, don't link it to your email.
Related to the above practice is the use of a mailto link on the contact page. An inherently more convenient and professional method is to provide the user with a form that would submit to a script running on the server, which in turn would send his memo to the site's operator. This is marginally harder to set up, but it is worth the extra effort. The script can add a string of characters to the subject of every email you receive from the site. This way it is possible to build an email filter inside your email client to automatically file website communications. Additionally, and perhaps more importantly, not including your email address directly in the page will significantly cut down the chances of you receiving spam on that account. One of the main ways that spammers get email addresses, is by harvesting them from contact pages of sites all over the web. Providing the reader with a form not only improves the user experience, but also gives the site author more control over email. While setting this up does require some technical prowess, there are plenty of places to look for help. There is freely available software written in many programming languages ready for your use.
It is important to use tools you are comfortable with. Personal preference extends to jEdit for source editing and SmartFTP for file transfer. jEdit is a free and open-source program written in Java. It does require more system resources, but it is a great text editor. There are numerous plugins to make code creation and validation easier not only in HTML, but a slew of other languages as well. SmartFTP is free for personal use and is a very good FTP client.
When creating content, avoid using spaces in file names. If you really want a space in the filename, use an underscore instead. Spaces make things harder in many ways. These difficulties may not be readily apparent to novice web publishers. URLs cannot contain spaces, so if a page has a space in its name, it will be converted to "%20", the code equivalent to the space character. This makes for hard to remember URLs and without the "%20", the page will not be accessible.
Another consideration for linking is the use of relative paths rather than absolute paths. A relative path orients itself from the current location, rather than from the root of the website as an absolute path does.
Understanding file permissions that should be used for difference parts of the site only helps. Keep in mind that anything you put on a website, unless you take significant security precautions, should be assumed to be public knowledge. If you want to keep something a secret, don't post it.
Using standards when writing your code is paramount. It requires more work than just throwing together some pages, but it is the only proper way to develop content. I would suggest use of either HTML 4.01 Transitional or XHTML 1.0 Strict document types for your html. This will ensure predictable output across a wide range of browsers. For an introduction to standards-compliant page composition, reference simple website templates article on this site.
Testing your site is also important. Take time to browse it not only in Internet Explorer (version 6 or higher for Windows), but also in the latest version of Mozilla. IE is notorious for its rendering modes that make incorrect assumptions when trying to fix incorrect code. Mozilla does not do that, and it has an integrated JavaScript debugger, which is the only way to find problems in your source. In addition, the Mozilla presentation of your site is the closest thing you can get to cross-platform testing without actually doing it (if you are a Windows user). The reasoning for testing the content in IE is simple, with the broad market reach of the Windows OS, it is the most used browser in the world.
Finding a good host for your creation is a difficult task. There is a myriad of hosting companies in existence with prices and levels of service ranging from non-existent to exuberant. One very desirable feature that is offered at the high end of the range is phone support. Short response time on customer questions is priceless. In lower price brackets companies offer support via email, some of them guarantee a response time of some hours or a day. I've dealt with a number of hosting providers spanning the whole range. In most cases, there is an expected correlation between monthly fees and the quality of offered services. One place that may be instrumental in helping you find a host is WebHosting Talk. It is a forum generally geared to the budget conscious user and contains customer impressions of their providers.
Slightly more pleasant than chewing aluminum foil, are websites that automatically resize windows that they are opened in. It usually is employed by designers who want more control over the size of the content, despite the fact that it is be rather annoying to the visitors. Resizing the window to full screen resolution without using the window control of the browser changes preferences for newly opened windows. In other words, after a site resized the window it was loaded in, all subsequent windows will be the size of the screen but will not be maximized. One of the ways of dealing with this problem is to open the site in a new custom window with the content using the window.open() function of JavaScript. Many sites do this and it is a much more pleasant way of controlling window size from the user perspective. Keep in mind however that opening a profuse amount of new windows is not a good practice. Always name your new windows and reuse them. For example should you choose to open all external links in a new window, name that window "external_link" and set all external link targets to that name. This way if the user clicks on such a link for the first time the new windows will be opened, but all sequential clicks will reuse this window rather than creating a new one.
Graphic navigation elements that change when the visitor puts the mouse pointer over them is an old and common trick. There are many ways of getting this accomplished. By far the most comfortable option for both the user and the site operator is to use JavaScript image replacement. This does not stop some people from insisting on using Java applets or Flash to do it. This seems as a rather innocuous practice until you consider the extra resources required on the part of the user to accommodate this functionality. In short, for fun mouse-overs use JavaScript, there are copious examples of this particular technique.
Heavy-handed as this article may be, it is just an introduction to a series on publishing content on the web. The next step is Simple website templates. That section covers template creation using the HTML and CSS standards.