O primeiro contato, HTML
Voltar
Intrudução ao HTML5
A estrutura básica do HTML5 continua sendo a mesma das versões anteriores da linguagem, há apenas uma excessão na escrita do Doctype.
Vamos lá...
O Doctype!
O Doctype deve ser a primeira linha de código do documento antes da tag HTML.
O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar.
O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.
O elemento HTML!
O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML.
O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.
Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.
HEAD!
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado.
Metatag Charset
No nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres a página está utilizando.
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:
Tag LINK!
Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.
No nosso exemplo há uma tag LINK que importa o CSS para nossa página:
O atributo rel="stylesheet" indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo.
Há outros valores para o atributo REL, como por exemplo o ALTERNATE:
Neste caso, indicamos aos user-agents que o conteúdo 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 referência a uma coleção de material histórico da página. Por exemplo, a página de histórico de um blog pode ser referenciada nesta tag.
Vamos lá...
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
</body>
</html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
</body>
</html>
O Doctype!
O Doctype deve ser a primeira linha de código do documento antes da tag HTML.
<!DOCTYPE html>
O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar.
O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.
O elemento HTML!
O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML.
<html lang="pt-br">
O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.
Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.
HEAD!
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado.
Metatag Charset
No nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres a página está utilizando.
<meta charset="utf-8">
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Tag LINK!
Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.
No nosso exemplo há uma tag LINK que importa o CSS para nossa página:
<link rel="stylesheet" type="text/css" href="estilo.css">
O atributo rel="stylesheet" indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo.
Há outros valores para o atributo REL, como por exemplo o ALTERNATE:
<link rel="alternate" type="application/atom+xml" title="feed" href="/feed/">
Neste caso, indicamos aos user-agents que o conteúdo 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 referência a uma coleção de material histórico da página. Por exemplo, a página de histórico de um blog pode ser referenciada nesta tag.
Fonte: http://tableless.com.br/html5/
Postado 13/08/2010 21:45 por Henrique R. Pohl
© 2002-2012 Newsmade - Quase todos os direitos reservados.