HTML5

Estrutura Bsica, DOCTYPE e Charsets

05/04/2013

Fagner Silva de Lima

Objetivos
Estrutura Bsica, DOCTYPE e Charsets O DOCTYPE O elemento HTML HEAD Metatag Charset Tag LINK

05/04/2013

Estrutura Bsica, DOCTYPE e Charsets

Estrutura Bsica, DOCTYPE e Charsets

A estrutura bsica do HTML5 continua sendo a mesma das verses anteriores da linguagem, h apenas uma exceo na escrita do DOCTYPE. Segue abaixo como a estrutura bsica pode ser seguida:

05/04/2013

Estrutura Bsica, DOCTYPE e Charsets

O DOCTYPE
O DOCTYPE deve ser a primeira linha de cdigo do documento antes da tag HTML.

O DOCTYPE indica para o navegador e para outros meios qual a especificao de cdigo utilizar. Em verses anteriores, era necessrio referenciar o DTD diretamente no cdigo do DOCTYPE. Com o HTML5, a referncia por qual DTD utilizar responsabilidade do Browser. O DOCTYPE no uma tag do HTML, mas uma instruo para que o browser tenha informaes sobre qual verso de cdigo a marcao foi escrita.

05/04/2013

Estrutura Bsica, DOCTYPE e Charsets

O DOCTYPE
O cdigo HTML uma srie de elementos em rvore onde alguns elementos so filhos de outros e assim por diante. O elemento principal dessa grande rvore sempre a tag HTML.

O atributo LANG necessrio para que os user-agents saibam qual a linguagem principal do documento. Lembre-se que o atributo LANG no restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado. Para encontrar a listagem de cdigos das linguagens, acesse: http://www.w3.org/International/questions/qa-choosing-language-tags.

05/04/2013

Estrutura Bsica, DOCTYPE e Charsets

HEAD
A Tag HEAD onde fica toda a parte inteligente da pgina. No HEAD ficam os metadados. Metadados so informaes sobre a pgina e o contedo ali publicado.

05/04/2013

Estrutura Bsica, DOCTYPE e Charsets

Metatag Charset
No nosso exemplo h uma metatag responsvel por chavear qual tabela de caracteres a pgina est utilizando.

Nas verses anteriores ao HTML5, essa tag era escrita da forma abaixo:

Essa forma antiga ser tambm suportada no HTML5. Contudo, melhor que voc utilize a nova forma.

05/04/2013

Estrutura Bsica, DOCTYPE e Charsets

Metatag Charset
A Web acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros pases algo que vai contra a tradio e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milho de caracteres. Ao invs de cada regio ter sua tabela de caracteres, muito mais sensato haver uma tabela padro com o maior nmero de caracteres possvel. Atualmente a maioria dos sistemas e browsers utilizados por usurios suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode voc garante que ele ser bem visualizado aqui, na China ou em qualquer outro lugar do mundo. O que o Unicode faz fornecer um nico nmero para cada caractere, no importa a plataforma, nem o programa, nem a lngua.

05/04/2013

Estrutura Bsica, DOCTYPE e Charsets

Tag LINK
H dois tipos de links no HTML: a tag A, que so links que levam o usurio para outros documentos e a tag LINK, que so links para fontes externas que sero usadas no documento. No nosso exemplo h uma tag LINK que importa o CSS de nossa pgina:

O atributo rel="stylesheet" indica que aquele link relativo a importao de um arquivo referente a folhas de estilo. H outros valores para o atributo REL, como por exemplo o ALTERNATE:

05/04/2013

Estrutura Bsica, DOCTYPE e Charsets

Tag LINK
Neste caso, indicamos aos user-agents que o contedo do site poder ser encontrado em um caminho alternativo via Atom FEED. No HTML5 h outros links relativos que voc pode inserir como o rel="archives" que indica uma referncia a uma coleo de material histrico da pgina. Por exemplo, a pgina de histrico de um blog pode ser referenciada nesta tag.

05/04/2013

Estrutura Bsica, DOCTYPE e Charsets

10

HTML5
Concluso

05/04/2013

Fagner Silva de Lima

11

Referncias
Microsoft W3C

05/04/2013

Estrutura Bsica, DOCTYPE e Charsets

12