Audio blog about HTML
If you are expecting html syntax, tags and stuffs. This is not going to be the place. I will discuss some basic concepts relating to html,browsers and stuff.
HTML:
It stands for hypertext markup language.
Hypertext --> responding text ( links !! )
markup --> annotating a text (tags !! )
So HTML is a language in which you have annotated and responding texts . The annotation is for browsers to understand and render the web page. Simple right?
Markup :
There are three main types of markup. They are,
HTML is a standard markup language. There are also large number of unstandardized markup languages like the one wikipedia uses for allowing users to edit wikis.
The meta tag !
It's one common tag in html. But many users don’t get it fully.Meta tag is used to give information about data in web page. Content of meta tag are not actually visible to humans viewing the web page. Let me try explaining. This tag has 4 attributes. They are,
http-equiv is for specifying the HTTP headers that should be sent before sending the content.scheme attribute is just optional.
name and content are the two most commonly used attributes.
<meta name=”xxx” content=”yyy”>
Search engines used to see the contents of meta tag for ranking pages once. Now the situation has changed because website owners can give wrong information about a page in meta tag and get undeserved traffic to their page. Description of web page or keywords in web page can be specified in meta tag. This may be used by machines inturn ( crawlers, RSS feed generators etc.. )
<meta name=”keywords” content=”c c++ java programming”>
That’s pretty much everything about meta tags.
Browser modes:
There are two main modes in which a browser operates. They are quirks
Semantic HTML:
It's nothing but HTML page written according to the correct semantics. That is, usage of proper tags in proper place. For example, a line break can be given using <br> as well as <p></p>. The correct procedure is to use <br>. This is called as following the semantics. Usage of semantics has many advantages as well.
For example,
An important text can be made bold by the use of <b> as well as <strong> tag. The semantic is to use <strong>. Normal users won’t find any difference in the implementation. However when the page is processed using an aural browser(for deaf people). The text to speech system reads <b>(bold) text as normal text only. But <strong> text is read in a different way stressing the importance of the text. That’s the importance of using semantics !
Not only aural browsers, crawlers of search engines also give importance to the <strong> tag !
Always keep in mind that humans are not only the readers of your web page. Machines read them too !!
It's a part of semantic html to separate the text/data from styles. Now let me explain what happens if you don’t follow the semantics.
You have page A and B having the word ‘java’ 5 times.
Page A has separated the styles and the html content is just 10 KB.
Whereas page B has both styles and data in same html page and its size is 30 KB.
Now can you guess which page will have higher priority or rank when searched for the keyword ‘java’.
Obviously it's page A. Because it has higher percentage of occurrence of the word ‘java’ in its page !!
Understood how semantic HTML can be so important.
DOM:
It stands for document object model. It's just a convention for representing elements. It's language independent.In html document is an element , a form within a document is a child object. Hope you get the point.
Page layout and CSS:
If you are expecting html syntax, tags and stuffs. This is not going to be the place. I will discuss some basic concepts relating to html,browsers and stuff.
HTML:
It stands for hypertext markup language.
Hypertext --> responding text ( links !! )
markup --> annotating a text (tags !! )
So HTML is a language in which you have annotated and responding texts . The annotation is for browsers to understand and render the web page. Simple right?
Markup :
There are three main types of markup. They are,
- Presentational markup : The one you see in text editors. It's based on what you see is what you get (wysiwyg). The markup is hidden from the humans so that they can see only the output.
- Procedural markup : Those who worked on LaTex would know how a descriptive markup would look like. The text processor reads your LaTex file from top to bottom and manipulates your markups to produce the desired output.
- Descriptive markup : Rather than giving instructions on how to process, this kind of markup just gives label to stuff.
HTML is a standard markup language. There are also large number of unstandardized markup languages like the one wikipedia uses for allowing users to edit wikis.
The meta tag !
It's one common tag in html. But many users don’t get it fully.Meta tag is used to give information about data in web page. Content of meta tag are not actually visible to humans viewing the web page. Let me try explaining. This tag has 4 attributes. They are,
- content
- http-equiv
- name
- scheme
http-equiv is for specifying the HTTP headers that should be sent before sending the content.scheme attribute is just optional.
name and content are the two most commonly used attributes.
<meta name=”xxx” content=”yyy”>
Search engines used to see the contents of meta tag for ranking pages once. Now the situation has changed because website owners can give wrong information about a page in meta tag and get undeserved traffic to their page. Description of web page or keywords in web page can be specified in meta tag. This may be used by machines inturn ( crawlers, RSS feed generators etc.. )
<meta name=”keywords” content=”c c++ java programming”>
That’s pretty much everything about meta tags.
Browser modes:
There are two main modes in which a browser operates. They are quirks
- quirks mode and
- standard mode
In earlier days during the introduction of java script and more functionality each browser had its own methods and ways of implementation. Web pages were written that time using those functions. Now after standardization we have a universal standard. But old pages should also work fine now. So web browsers use a mode called quirks mode which enable them to render old pages correctly.
In standard mode only web elements that comply to the present standard alone will be rendered correctly.
There is also a mode called almost standard mode in some browsers which neglect accepts nonstandard methods as well.
DOCTYPE is used to tell the browser what version of html we are using.
for html 5 , the latest standard <!DOCTYPE html> is given and it tells the browser to run in standard mode.
for html 5 , the latest standard <!DOCTYPE html> is given and it tells the browser to run in standard mode.
Semantic HTML:
It's nothing but HTML page written according to the correct semantics. That is, usage of proper tags in proper place. For example, a line break can be given using <br> as well as <p></p>. The correct procedure is to use <br>. This is called as following the semantics. Usage of semantics has many advantages as well.
For example,
An important text can be made bold by the use of <b> as well as <strong> tag. The semantic is to use <strong>. Normal users won’t find any difference in the implementation. However when the page is processed using an aural browser(for deaf people). The text to speech system reads <b>(bold) text as normal text only. But <strong> text is read in a different way stressing the importance of the text. That’s the importance of using semantics !
Not only aural browsers, crawlers of search engines also give importance to the <strong> tag !
Always keep in mind that humans are not only the readers of your web page. Machines read them too !!
It's a part of semantic html to separate the text/data from styles. Now let me explain what happens if you don’t follow the semantics.
You have page A and B having the word ‘java’ 5 times.
Page A has separated the styles and the html content is just 10 KB.
Whereas page B has both styles and data in same html page and its size is 30 KB.
Now can you guess which page will have higher priority or rank when searched for the keyword ‘java’.
Obviously it's page A. Because it has higher percentage of occurrence of the word ‘java’ in its page !!
Understood how semantic HTML can be so important.
DOM:
It stands for document object model. It's just a convention for representing elements. It's language independent.In html document is an element , a form within a document is a child object. Hope you get the point.
Page layout and CSS:
As part of practicing i wrote a sample page that will make clear basics of html and css. Take a look
See you in next blog!
Trained @ Sourcebits
 |
| HTML file |
 |
| CSS file |
 |
| Output in browser |
Trained @ Sourcebits
No comments:
Post a Comment