How did I understand a web page?

That was really fun viewing my own image, using marquee and blink tags with both text and images in a web page, during the early days of college education.

But few years later, in my undergraduate course, I was trying to understand — how we write web pages and — how browsers render them. It seemed I had to learn HTML, CSS and JavaScript — 3 different languages, to create a web page. What? I didn’t know that. So, wanted to figure out why.

When we describe HTML — Hypertext Markup Language, it seemed it can alone define a webpage — including elements, styles and in my opinion — dynamic behavior as well. So, why should we learn three different languages. Finally I found the answer here at Web Standards — And it says They’re simply an evolution of the web.

So, let us see how they evolved.

We have HTML, CSS and JavaScript — the building blocks of the World Wide Web, to create stylish and interactive webpages.

First came HTML, then CSS was born by seperation of layout and style information from the HTML.

JavaScript was born to provide interactivity to the web pages. It is mainly used for DOM manipulations — Changing web page’s content, style and layout based on user’s interaction. It was intended for tasks, for which Java was too heavy. Check out Virtual Machines, JavaScript and Assembler, for some more information on birth of JavaScript. The Birth & Death of JavaScript will give you lot more other details. Wat will introduce you to few bad parts of JavaScript.

I feel CSS and JavaScript are part of HTML but separated for a reason.

How we write

HTML is just like manuscript markup. We take plain text and mark it up with HTML for its styles, layout and dynamic behavior.

When you specify a piece of text to be a Heading, you don’t know how that is implemented. In the same way to make CSS and JavaScript work, just link the code — don’t write in HTML file.

Remember that without a HTML tag, there is no way you can add CSS or JavaScript.

How browsers render

Browsers will be using Document Object Model (DOM), and CSS Object Model (CSSOM) to render the pages. We can change those object models using JavaScript to make the user feel “Owwww….!”.

All topics in Web Fundamentals will help you develop better web applications keeping performance in mind.

Few more resources: W3C Community Wiki, Web Style Sheets, Blink tag, History of CSS