Audio blog on Html more concepts
How the browser works?
A browser has various functions like sending request, getting response, rendering a page and displaying it for users etc... So how does it do these things?
A browser has many sub parts that handles different functionalities. User interface , javascript interpreter, networking module etc...
But the most important component is the one which renders web pages... the browser engine !
Different browsers have their own way of rendering web pages and hence their own engines as well.
Chrome and safari use webkit. Webkit was developed from KHTML by apple and then made open source.
Internet Explorer uses trident which is a microsoft invention.
Firefox uses Gecko which is developed by mozilla. It's also used for thunderbird and other mozilla applications.
Opera uses presto.
What browser engine does?
In short it parses the marked up content(html) and builds DOM tree which is inturn combined with the styles and finally painted in the browser for users to see!!
Parsing involves lexical and syntactic analysis.
Lexical analysis --> tokenizing. Keywords are separated.
Syntactic analysis --> tokens from lex are fed into syntactic analyzer. It will use some sort of context free grammar for understanding the page’s contents and syntax.
After parsing painting job is done !
Page layout:
Page layout determines what elements of the web page are going to be present where.
There are different types of layouts. You can fix the position of an element or make it relative. It all depends on your needs. People view the web page you develop in different devices. The layout should make the page appear good in every browser and in every device. You can read about the layouts in this link here...
http://sixrevisions.com/web_design/a-guide-on-layout-types-in-web-design/
Browser specific contents:
There will be always certain contents that will work correctly on one browser and crash pathetically on some other browser (mostly IE :P ). So browser specific codes are mostly written to give specific instructions to specific browsers.
Conditional comments are used to give browser specific code.
For example,
<!-- if IE> .....
This conditional comment will make IE to use the code following it. Other browsers will ignore the code.
In css @ symbol is used to mention the browser name for which a particular style is written.
@-moz-document
The above modifier like thing will make the style following it apply only to firefox.
Div vs Table:
When contents are arranged in a table it gives a near and structured view. Web developers have been using table to arrange page elements for a long time. But it's not the right way to do it. In other words semantic html doesn’t allow this ! After introduction of CSS and div tags... page layout is done mostly using them.
div is always the better option for page design. There are many reasons for it like it's difficult to parse tables, it's difficult to modify a page designed using tables etc..
My experience: I tried designing the web page i designed yesterday ( look yesterday’s blog images please :) ) using tables. It was definitely not easy. Learning curve of css may be long but once you are comfortable with css you will definitely hate table design. What i feel is that separating styles from html is a great practice . It gives a sense of clarity to your web page !!
See you in next blog !
Trained @ Sourcebits
How the browser works?
A browser has various functions like sending request, getting response, rendering a page and displaying it for users etc... So how does it do these things?
A browser has many sub parts that handles different functionalities. User interface , javascript interpreter, networking module etc...
But the most important component is the one which renders web pages... the browser engine !
Different browsers have their own way of rendering web pages and hence their own engines as well.
Chrome and safari use webkit. Webkit was developed from KHTML by apple and then made open source.
Internet Explorer uses trident which is a microsoft invention.
Firefox uses Gecko which is developed by mozilla. It's also used for thunderbird and other mozilla applications.
Opera uses presto.
What browser engine does?
In short it parses the marked up content(html) and builds DOM tree which is inturn combined with the styles and finally painted in the browser for users to see!!
Parsing involves lexical and syntactic analysis.
Lexical analysis --> tokenizing. Keywords are separated.
Syntactic analysis --> tokens from lex are fed into syntactic analyzer. It will use some sort of context free grammar for understanding the page’s contents and syntax.
After parsing painting job is done !
Page layout:
Page layout determines what elements of the web page are going to be present where.
There are different types of layouts. You can fix the position of an element or make it relative. It all depends on your needs. People view the web page you develop in different devices. The layout should make the page appear good in every browser and in every device. You can read about the layouts in this link here...
http://sixrevisions.com/web_design/a-guide-on-layout-types-in-web-design/
Browser specific contents:
There will be always certain contents that will work correctly on one browser and crash pathetically on some other browser (mostly IE :P ). So browser specific codes are mostly written to give specific instructions to specific browsers.
Conditional comments are used to give browser specific code.
For example,
<!-- if IE> .....
This conditional comment will make IE to use the code following it. Other browsers will ignore the code.
In css @ symbol is used to mention the browser name for which a particular style is written.
@-moz-document
The above modifier like thing will make the style following it apply only to firefox.
Div vs Table:
When contents are arranged in a table it gives a near and structured view. Web developers have been using table to arrange page elements for a long time. But it's not the right way to do it. In other words semantic html doesn’t allow this ! After introduction of CSS and div tags... page layout is done mostly using them.
div is always the better option for page design. There are many reasons for it like it's difficult to parse tables, it's difficult to modify a page designed using tables etc..
 |
| Web page designed using tables |
 |
| The web page |
My experience: I tried designing the web page i designed yesterday ( look yesterday’s blog images please :) ) using tables. It was definitely not easy. Learning curve of css may be long but once you are comfortable with css you will definitely hate table design. What i feel is that separating styles from html is a great practice . It gives a sense of clarity to your web page !!
See you in next blog !
Trained @ Sourcebits
No comments:
Post a Comment