At the beginning of my career, I am not a web designer who can use Photoshop to make web layouts. I came to Saigon to work as a PHP team leader of ASINVN 4 years ago. But now I cant do anything with PHP. Well, time can changes everything. The lesson that I learned from the beginning until now is PHP maybe is one of the best programming language to build the Web, but HTML is the structure of the Web. PHP can be replaced by Python, the young and wide programming language, but nothing can replace HTML. This is the reason why I am in love with HTML.
About HTML (HyperText Markup Language), this is a markup language that using to compose HTML documents, in other word is Web documents. You can compose HTML documents like the way you compose an email to your girlfriend. I am sorry I was wrong, compose HTML document is much more easier than compose an email to your girlfriend. Because if you make some mistake, with HTML document, you can edit it easily, but your girlfriend is gonna kill you (j/k). HTML not only is the most easiest to learn markup language, but also is the very simple but logical programming language. You can use a <p> tag to mark a paragraph, and a <strong> to mark a bold text, what can be simpler?
Because HTML is very simple and clear, today HTML is used as the structure of the Web. No matter what scripting language is used to build Website, the Website always be rendered to HTML format before it’s displayed in browser. To be the structure of the Web, HTML helps CSS present the presentation layer and JavaScript create the behavior layer for the Web.
The relationship of HTML, CSS and JavaScript:
In the image above, HTML is acting as a structure layer, the CSS is acting as the presentation layer, and the JavaScript is acting as the behavior layer. At first, HTML create a structure layer and initiate the DOM tree. Next, CSS present the presentation layer using DOM tree’s Selectors (1). At last, JavaScript is based on DOM tree’s Selectors and CSS’s attributes to add some behaviors (2) to the behavior layer of the website. Sound complex? Don’t worry, this is just the concept to split-out HTML, CSS, JavaScript to three layers. Just remember it.
The DOM tree is one of the good parts of HTML. When you compose a HTML document, you also build the DOM tree. The DOM tree is known as the hierarchy levels of your HTML elements what helps you to know where are your elements.
The Selector is the address of the element that CSS or JavaScript might want to point to. That mean if you want to point to the element tagged div and named box inside the body in the sample above, just use “body.div#box“. There are three kinds of Selector: the element, the element in a class and the element named by an id. In HTML, the id is unique. That’s why id is used in HTML naming convention. HTML naming convention is the standard to helps us to select the Selector in Selectors list of the website.
When we develop the Web, the most important mission we have to done is make our website is searchable to Google. The point is people read our website, but Google don’t. Google crawl our site, and “read” our HTML. Google don’t care about the structure of our website, but care about the meaning of our logical tags. The more logical tags is used, the more semantics HTML your website are. Semantic is look so easy at this point, hah?
The last thing I want to tell you is I am a warrior who fights for the Web Standards in the Browsers Wars. Some wars can be end if someone know how to resolve the problem, some wars never end. Today, the Eleven of CSS Eleven is works everyday to make a standard for the Web. The Eleven are trying to drive the Browsers Wars to an end. Before the Sun set, we still have to fight. The idea that we write something what can survive in a insane world of non-standard is always great to me. I love the challenger to make my HTML more logical, more structural, more flexible, more semantic, more searchable. If I can make it, my HTML can be safe, no matter when the Browsers Wars is end.
So clearly about HTML CSS JS ^_^
Anh ơi, bữa nào làm 1 bài post nói về mấy cái qui luật của CSS đi, mấy cái inline element và block j đó áh. Bữa em đi nhậu với ku Na nó có nói. Nghe cũng ghiền mà chả hiểu mẹ j hết vì e kô có mấy bước cơ bản đó. Đụng vô là làm thui, sai chỗ nào mày mò sửa chỗ đó hà…
Agreed! I love that so called “semantic web” it is because it is very common sense when you create your html document. Every tag should be used as it supposed to be. Why bother use a sets of P tag for a list of item while you can simply use a ul or ol, and Goolge also has a chance to understand that too.
Many designers in Vietnam still misunderstand the XHTML/CSS Layout technique and Semantic Coding. It is not just because you throw a bunch of div tags into your code, remove table so that you can call your document a “semantic HTML”