What's the DOCTYPE! tag all about?

Hello all!

From the last "Rounded corner" article we now move upon the one of the most confusing section of web design. This tag is "DOCTYPE".

---

Many year back since today, when internet became famous, there was no CSS as we have today. The pages were meant to only provide information to users without much interactivity.

Later on CSS1 was born, which made pages look systematic and to some extent beautiful. Many websites were written using it.

Similarly, CSS2 came into the picture. New browsers were launched with removing previous bugs. Now, a problem arised that how to display the old sites correctly in the new browsers.

The solution the browser vendors came with was that the browsers operated in two modes:

1. Standard mode
2. Quirks mode (for old sites)

The standard mode was the new sites.

The browsers gets to know in which mode to run through the DOCTYPE tag's presence. If the tag is present, the browser works in the standard mode, else it works in the Quirks mode.

It is strongly recommended to use, and so do I, that you use DOCTYPE in your pages. It should be generally the first statement in your page or it won't work.

That's all folks.
NEXT ON I promise the advanced rounded box article.

Quickly create rounded corners!

Hello all!

Fixed-width rounded-corner boxes are the easiest to create. They require only two images:
one for the top of the box and one for the bottom. For example, say you want to create a
box style like the one in the Figure.

The markup for the box looks something like this:

<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>




In your favorite graphics package you need to create two images like those in Figure below
one for the top of the box and one for the bottom.

You then apply the top image to the heading element and the bottom image to the bottom
of the box div. Because this box style just has a solid fill, you can create the body of
the box by adding a background color to the box div.

.box {
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}
You will not want your content to butt up against the sides of the box, so you also need to
add some padding to the elements inside the div:
.box h2 {
padding: 10px 20px 0 20px;
}
.box p {
padding: 0 20px 10px 20px;
}

This is great for a simple box with a solid color and no borders.

Thanks all. Please leave your comments.

Next I will publish more advanced round corner methods.

My First Blog

Hello all! I will be posting on by blog on the topic Web Technology! as it's name suggests. I am a student in Baroda, studying Computer Engg. I am interested in web designing specially. This is my first post.

I always welcome your posts and suggestions on new technologies buzzing on the web.