First God created HTML.  Man was happy reading his web pages in HTML for a few years. Then came the Garden of Eden, masquerading as better browsers, computers with higher processing power, screens with better resolution, and slick GUIs, and Man started to feel discontent. He complained to God that his HTML pages looked lack-lustre and drab. Then God gave him CSS and Javascript, but told him to never lose his content in them. The three were to co-exist and work together but never to become one. Those websites who listened to Him were rewarded with fame and fruit. Those who didn’t were sent to oblivion in lost-on-the-internet hell.

And this, my friends, is not just a happy internet tale created by yours truly!  The popular web programming wisdom is if you throw in CSS and Javascript with HTML you can create web pages that look and perform much better than plain HTML counterparts. You see, they each complement one another but do very different things:

  • HTML is good for structuring content;
  • CSS, i.e. Cascading Stye Sheets, are great at applying visual style to this content;
  • Javascript is wonderful at creating interactive functionality. 

 

HTML (which stands for Hypertext Markup Language) came into being at the same time as when the world wide web was created. In its simplest form, it is a collection of tags that “markup” the document to tell the browser how to display it.

CSS stands for Cascading Style Sheet. This is a neat way to separate content from its presentation on the web page. CSS is the website owners’ and designers’ friend because it offers:

  • SEO benefits – If you use CSS you do not have to bloat up your HTML page with tons of tags. This will avoid confusing the internet angels, also known as search engines – when they come to index your websites. 
  • Consistency and Control – CSS allows precise control of display criteria such as text alignment, font characteristics, object positioning and audio and speech output etc. In addition they allow you to consistently apply the same criteria across your entire website. That is a boon for website designers!
  • Better accessibility – This is improved in two ways. First, by separating content from presentation the pages become lighter, thereby becoming faster to load and easier to index. Second, with CSS it is easier to customize presentation for different display devices such as cell phones and other mobile devices.
  • Ease of maintenance – It is easier and quicker to update and maintain information in well-organized, clean looking files. 

To feel the zen of working with CSS, check out http://www.csszengarden.com/.  The website demonstrates how different layouts and looks can be easily achieved by using CSS.

Another interesting website to check out is http://www.maxkiesler.com/index.php/weblog/comments/minimalist_website_design_patterns/.  It discusses some beautiful, minimalist, designs created using CSS. If you are curious about fonts in CSS, see http://www.tizag.com/cssT/font.php

Javascript allows scripting of events, objects and actions. It runs on the client side browser and can recognize and respond to user events and actions such as mouse clicks, form input and page navigation. It can be used to check the input from the user before it is sent over the internet to the server.  So if the user has entered the wrong value in a form, it can display a pop-up prompting him to enter a valid one. It can also be made to take action when a user enters or navigates around or away from the page. This allows for more interactive navigation taking into account the user experience on the site.

Javascript is also excellent in creating dynamic effects such as rollover images and scripted slideshows. Since it runs inside the client’s browser it can be used to change the appearance of the users’ screen after the page has been sent by the server.  Some of this can also be accomplished by CSS. Javascript is better at creating dynamic image effects. 

Although Javascript can be incorporated directly into the HTML page, it can bloat up web pages.  So, depending on how much Javascript functionality has been incorporated in a page, it is sometimes better to store the Javascript code in a separate .js file. 

Check out a polished looking project portfolio done using CSS and Javascript: http://webfolio.iwsdev.com/

Ten websites that use Javascript animation effectively – from Dzine blog: http://dzineblog.com/2008/03/10-websites-that-use-javascript-animation-effectively.html