Tutorial Html5
Páginas: 64 (15824 palabras)
Publicado: 20 de febrero de 2013
A tutorial for beginners
The doctype declaration
Take a look at this page's "Source Code". The source code is the HTML that generates a page.
On a PC in Chrome or FireFox right click anywhere on the page (except the ads) and select "View page source", or even easier just click "Ctrl-U". In IE "Ctrl-U" doesn't work; you have to right click the page and select "View Source". Select it all,copy it and paste it into Notepad or some text editor. If you have any problems or are in a different browser search "source code" in help.
At the very top of the page you will see the doctype declaration:
<!DOCTYPE html> *
Like any language, HTML5 has a grammar and a vocabulary.
Grammar
<!DOCTYPE html> goes at the top of every HTML5 page.
VocabularyThe HTML5 word <!DOCTYPE html> means "this page is written in HTML5" as opposed to, say HTML 4.01.
Why, you ask, don't they just write <HTML5> or even a zesty <!HTML5>? I have absolutely no idea. Still it's better than what they had before. Here's an example of one common type of XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Hopefully the doctype declaration in HTML5 won't turn into the crazy mess it did with XHTML and previous versions of HTML. Those in charge of such things say it won't, but time will tell.
So now you learned three things:
1) How to view the source code of a page, an important tool.
2) You know one word in HTML5: <!DOCTYPE html> = "HTML5"
3) and one grammar rule: <!DOCTYPEhtml> goes at the top of every page.
The html tag
Now we go to our first "tag". *
With a couple of important exceptions (which we will get into later) all tags have to be opened and closed. Take a look at the code to the right. The opening tag is:<html>. The closing tag is </html> – the difference being the "/" in the closing tag.
Tags are containers. The htmltag indicates that everything between <html> and</html> is code that conforms to the standards of the type of HTML dictated by the doctype declaration – in this case HTML5.
Everything between the opening tag and closing tag are inside that tag and therefore have the attributes that tag gives them. Those attributes can be modified. For example in this site I have changed the default color (black)for the </html>tag to dark blue.
Inside the <html> tag are two other important tags:
the <head> tag
the <body> tag
First let's take a look at the <head> tag.
The head tag
Web sites have two audiences:
The first is human
The other "spiders", "bots" or "web crawlers"
While the contents of the head tag displays little to human viewers it's importantto the bots. Search engines have crawlers (e.g. Google's is called "Googlebot") that constantly surf the net following links from one site to another collecting and indexing everything they find. Google has an algorithm that then decides which pages are most relevant to search terms.
Web sites that read well to spiders are most likely to appear high in search engine results. This is what iscalled SEO or Search Engine Optimization. Books – big thick books – have been written on SEO. We don't have the time to go into it in great depth, but I will repeatedly touch on it as you proceed through the tutorial.
The single most important thing you can do for SEO is write a good title tag. My title tag for this page is:<title>Head tag - HTML5 tutorial</title>. It doesn't appearon the page itself but does show in the bar across the top of the browser and in the button in the taskbar, usually found at the bottom of the monitor on a PC.
The title also appears in Google's search results. For example:
Try to make it keyword heavy, but don't forget that people will also be reading it. Ideally the title should be less than 64 characters in length.
The second most...
The doctype declaration
Take a look at this page's "Source Code". The source code is the HTML that generates a page.
On a PC in Chrome or FireFox right click anywhere on the page (except the ads) and select "View page source", or even easier just click "Ctrl-U". In IE "Ctrl-U" doesn't work; you have to right click the page and select "View Source". Select it all,copy it and paste it into Notepad or some text editor. If you have any problems or are in a different browser search "source code" in help.
At the very top of the page you will see the doctype declaration:
<!DOCTYPE html> *
Like any language, HTML5 has a grammar and a vocabulary.
Grammar
<!DOCTYPE html> goes at the top of every HTML5 page.
VocabularyThe HTML5 word <!DOCTYPE html> means "this page is written in HTML5" as opposed to, say HTML 4.01.
Why, you ask, don't they just write <HTML5> or even a zesty <!HTML5>? I have absolutely no idea. Still it's better than what they had before. Here's an example of one common type of XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Hopefully the doctype declaration in HTML5 won't turn into the crazy mess it did with XHTML and previous versions of HTML. Those in charge of such things say it won't, but time will tell.
So now you learned three things:
1) How to view the source code of a page, an important tool.
2) You know one word in HTML5: <!DOCTYPE html> = "HTML5"
3) and one grammar rule: <!DOCTYPEhtml> goes at the top of every page.
The html tag
Now we go to our first "tag". *
With a couple of important exceptions (which we will get into later) all tags have to be opened and closed. Take a look at the code to the right. The opening tag is:<html>. The closing tag is </html> – the difference being the "/" in the closing tag.
Tags are containers. The htmltag indicates that everything between <html> and</html> is code that conforms to the standards of the type of HTML dictated by the doctype declaration – in this case HTML5.
Everything between the opening tag and closing tag are inside that tag and therefore have the attributes that tag gives them. Those attributes can be modified. For example in this site I have changed the default color (black)for the </html>tag to dark blue.
Inside the <html> tag are two other important tags:
the <head> tag
the <body> tag
First let's take a look at the <head> tag.
The head tag
Web sites have two audiences:
The first is human
The other "spiders", "bots" or "web crawlers"
While the contents of the head tag displays little to human viewers it's importantto the bots. Search engines have crawlers (e.g. Google's is called "Googlebot") that constantly surf the net following links from one site to another collecting and indexing everything they find. Google has an algorithm that then decides which pages are most relevant to search terms.
Web sites that read well to spiders are most likely to appear high in search engine results. This is what iscalled SEO or Search Engine Optimization. Books – big thick books – have been written on SEO. We don't have the time to go into it in great depth, but I will repeatedly touch on it as you proceed through the tutorial.
The single most important thing you can do for SEO is write a good title tag. My title tag for this page is:<title>Head tag - HTML5 tutorial</title>. It doesn't appearon the page itself but does show in the bar across the top of the browser and in the button in the taskbar, usually found at the bottom of the monitor on a PC.
The title also appears in Google's search results. For example:
Try to make it keyword heavy, but don't forget that people will also be reading it. Ideally the title should be less than 64 characters in length.
The second most...
Leer documento completo
Regístrate para leer el documento completo.