You are hereA Website Done The Old-Fashioned Way
A Website Done The Old-Fashioned Way
The Request
"Could you please show, through a demo or something, how all your HTML tutorials work out in practise?"
The remark came from a teenager who is interested in creating a website but does not have the time to finish reading the growing body of tutorials I am maintaining at the Collectanea Informatica. So I decided to create a demo website that summarizes what I have written in my tutorials. It is called My Site so that it can be everyone's. I believe that by creating that one-page demo website, I will be making it easier for web newbies to know how and where in a page a particular HTML tag or javascript can do its magic. I also believe that the best way to learn how to code in HTML is to expose oneself to a lot of websites and study their source code.
Learning HTML: Websites and Source Codes
Back in 1999 when I was still beginning to learn how to create a website, I used to visit a lot of sites at Geocities.Com and look at the source code of websites. It was through these two activities that I gradually came to learn how websites were constructed and what services were available for use on a freehosted website.
In visiting sites, I was guided by the Geocities search engine and later on by the links page of the individual site I am visiting. Most of the websites I saw were created by people who were also learning to create their webpages by programmers who needed a place from which to share their products and by priests and religious who were using the web for "advertising" Church activities or sharing the resources they have on a particular saint or branch of philosophy and theology. It was by visiting these sites that I became aware of several website services: free graphics, free templates, javascripts for enhancing a webpage, CGI services for guestbooks and forums and free-for-all-links pages, etc. There were some webmasters who would inform their visitor where they got their graphics or a particular web service by mentioning it in their links pages. There were some who made extensive use of button links provided by the services they were using. Even now, there are free web services that tell their guests to "Link to us" through a text or graphic link.
There were website's however which had minimal links and almost no link button. These were mostly the personal websites of professionals who make use of the web for displaying their profiles. Through these websites, I came to know about the kind of javascript enhancements used on an entrance page or a photo gallery. By looking at the source codes, I would discover snippets of codes pasted on the head section or just below the <body> tag with the author's name and the website from which it originated. Thus I came to know about JavaFile CutNPaste and other free script providers at the time. It was through these same process that I came to learn about the existence of free templates. These came in two forms: a ready-made website that served as a n "empty husk" for those who'd fill it with content (like the ones at PageKits, or a set of themed graphic files that one can put together on a set of pages.
Today, the manually generated HTML website is becoming a rarity. With all these free PHP hosting sites and the emergence of the free Content Management Systems, it has become difficult to find those old-fashioned websites I was exposed to in those early years on the web, even through a search engine like Google. Besides, the old freehosts like Geocities and Tripod have become so highly sponsored that newbies won't be able to appreciate a work of their own creation without coming face-to-face with the fact that their creativity will be limited by the large advertisements of their hosts. So newbies are driven to bannerless hosting most of which are also testing grounds for "home-brewed" servers that are there for showing off their capacity for handling a large number of websites and their respective content management system (ASP or PHP, please) As a result newbies no longer learn how to be creative; they are served ready-made websites and the promise of a WYSIWYG. The democratization of the web has been such that anyone can now have a website of one's own with or without some knowledge of HTML, the lingua franca of the web.1 Fortunately, there are still some who wish to learn HTML by exposure to it. And so to fill in the need for manually coded websites (these now seem to be limited to programmers' sites dedicated to text editors), I have created a demo website that will serve a three-fold purpose:
- to show that it is still possible to manually create great looking websites;
- to serve as an illustrative guide for the free services that the web offers for people who either don't want a CMS-powered site or who at the moment can't afford one or who have a CMS-powered site but still find the necessity of creating their own webpages; and
- to serve as a "context" for the HTML and Javascript tips I will be offering here.
The Demo Website
The demonstration website I have created is a one-page website. Websites originally had just one page of HTML filled with links to external sites and other pages. Later, multi-paged websites developed as web browser technology improved2. The demo page illustrates the use of the Anchor Name tag (<a name>), link buttons, text links that are enhanced through CSS, how Photobucket and its services are used on a web page, and how the free scripts (for the moment, those coming from DynamicDrive) are used to enhance a webpage in whole or in part. This demo site was created using software that are either found in a Windows installation package or downloadable as freeware. I mention the applications I used in creating the website and supply the links to their respective developers' site when possible.
At the moment, this one-page website consists of four main parts and a welcome section. Except for a few websites, the welcome section3 has been supplanted by the splash screen or a popup advertisement. The four main parts are traditional. They are the "news", the "gallery", the "links" and the "contact". I will be adding one more section later on for "articles" which will consist mainly of links to external articles and a brief description of each.
As it stands, the demo site has no aesthetic value. It is there mainly to give a concrete illustration of how HTML tags are applied. So the best way to approach the site is by the source code which one can view by right clicking on the browser and selecting "View Source". Below is a list of the HTML tags that were used for the site
If you would notice, for the common tags used in the page, the number is a shade below ten. This is to drive the point that there isn't too much memorizing to do in HTML. Only a few tags are needed for coming up with a decently readable webpage.
For the moment, there are only two javascripts invoked on the page and both are identified and described in the page. One of these is the Ajax include script that gives an HTML page the power of PHP and CGI to include external files onto a page being browsed. Previously web designers used the inline frame, but even that is going out of fashion. While IE was king of the web, the inline frame was practical. Now that other browsers have come into the picture, the ajax include script has become more practical. Besides, it gives our demo website a power similar to that of content management systems, a dynamicity that was not possible before.
1Don't get me wrong. I welcome dynamic websites and content management systems. But I began to really appreciate them only after I've learned to create websites "manually".
2I used to admire a one-paged website that had nothing on it except pictures of spiders. It was a resource site for graphic files that had the spider theme. The files were offered for download.
3This welcome section is linked to an external page which would have made the welcome section extraordinarily long. A welcome section normally consists of a welcome message and some brief instructions on how to navigate the site. I used the welcome section for introducing a topic that is particular to this demo site: the applications I used for creating it.
- Login to post comments
