samedi 5 mai 2012

Fun with HTML and CSS


Hyper Text Markup Language and Cascading Style Sheets are the building blocks for website development.

The layout for a website is done using the HTML table tags or <div> tags.
One important thing that needs to be understood while designing the layout, is the Box-Model and Positioning viz. Relative and Absolute Positioning. To understand the Box Model please refer this link and for understanding positioning refer this link.

Once the above concepts are clear, designing the layout becomes quite simple. One of the problems faced during website design is browser compatibility. It is advised to design the site first in Mozilla instead of IE and the make it compatible to other browsers.

One of the very common compatibility issue that i came across was when i used the margin attribute to make a webpage  horizontally center aligned to the browser window. To achieve horizontal center alignment, the main container <div> has to be given the attribute margin: 0 auto;. This is true for Mozilla. But, the same could not be rendered in Internet Explorer. To make it compatible to IE, the attribute text-align: center; is to be added to the <body> tag of the website.

The fun part of HTML and CSS is that its quick to learn and explore. With the advent of CSS3, very cool feature have been added such as:
  1. border-radius: This gives curved edges to any block.
  2. box-shadow: This gives shadow around the block.
  3. opacity: This gives different levels of opacity to the block.
There are many more feature which can be found at the following link.

Aucun commentaire:

Enregistrer un commentaire