Image: 

After covering the basic principles of the World Wide Web and HTML in the last issue of Servit Tech Newsletter we will have a look this time at two technologies which make all the fancy designs and the fast and interactive websites possible: Cascading Style Sheets and Javascript. Enjoy learning and dive deeper into the mysteries of the web.

Find the complete article as PDF file at the end.

Layout with Cascading Style Sheets (CSS) – Summary

Cascading Style Sheets (CSS) provide a mechanism to style web pages (HTML pages). CSS is a style sheet language describing the presentation of an HTML document.

The advantages over styling trough HTML attributes are:

• extensible styling possible

• separation of content/structure and styling (presentation)

• possibility to have a central stylesheet with rules for all pages of a web site.

This makes maintenance and changes in the design of a web site easy if CSS is used centrally. By exchanging or editing the stylesheet file the changes are immediately applied to all pages.

Zen Garden makes use of this. The web site displays always the same HTML page but with different stylesheets. It just changes the reference to the CSS file. Experience it yourself:
http://www.csszengarden.com (en)
http://www.csszengarden.com/tr/deutsch/ (de)

References

• CSS @ SelfHTML (de)
  http://de.selfhtml.org/css/index.htm

• CSS Reference @ SelfHTML (de)
  http://de.selfhtml.org/navigation/css.htm

• CSS @ Wikipedia (de)
  http://de.wikipedia.org/wiki/Cascading_Style_Sheets

• CSS @ w3schools (en)
  http://w3schools.com/css/default.asp

• CSS Reference @ w3schools (en)
  http://w3schools.com/css/css_reference.asp

• CSS @ Wikipedia (en)
  http://en.wikipedia.org/wiki/Cascading_Style_Sheets

Interaction with Javascript (JS) – Summary

Javascript is a programming language which is executed on the browser. Javascript code is downloaded from the web server along with the web page. The code is human readable and interpreted by the browser.

It brings a fast and smooth user experience by allowing data processing and user interaction with the web site on the users computer. Instead of having all intelligence on the server it is brought closer to the user, to the browser.

Ajax, which is based on Javascript, almost eliminates the need for reloading a web page in order to allow interaction. It brings the user experience with web pages very close to desktop applications.

References

• Ajax Examples
  http://www.ajaxdaddy.com/

• Javascript @ Wikipedia (de)
  http://de.wikipedia.org/wiki/JavaScript

• AJAX @ Wikipedia (de)
  http://de.wikipedia.org/wiki/AJAX

• Javascript @ SelfHTML (de)
  http://de.selfhtml.org/javascript/index.htm

• Javascript @ Wikipedia (en)
  http://en.wikipedia.org/wiki/JavaScript

• AJAX @ Wikipedia (en)
  http://en.wikipedia.org/wiki/AJAX

• Javascript @ w3schools (en)
  http://w3schools.com/js/default.asp

attachments: 

Servit_Tech_Newsletter_002_-_Layout_and_Interaction.pdf