Introdução à Tecnologia Web
HTML HyperText Markup Language
XHTML – eXtensible HyperText Markup Language
Declaração DOCTYPE e Tag Raiz html
Profª MSc. Elizabete Munzlinger www.elizabete.com.br
1
Declaração DOCTYPE e Tag Raiz html
Índice
1 – Estrutura do documento... 2
2 - Declaração DOCTYPE: <!DOCTYPE> ... 2
Tipos de conteúdo:... 2
Strict: estrito/rigoroso... 2
Transitional: transitório ... 2
Frameset: frames/quadros ... 2
Doctypes disponíveis nas Recomendações do W3C:... 2
HTML 4.01: Strict ... 2 HTML 4.01: Transitional ... 3 HTML 4.01: Frameset ... 3 XHTML 1.0: Strict ... 3 XHTML 1.0: Transitional... 3 XHTML 1.0: Frameset ... 3 Validação de código... 4 Validador: HTML... 4 Validador: CSS ... 4
3 – Elemento raiz de definição do documento: <html> ... 4
Atributo: lang ... 4
Atributo: xml:lang... 4
Atributo: xmlns... 4
Diferenças entre HTML 4.01 e XHTML 1.0 deste capítulo... 5
2
1 – Estrutura do documento
Todo documento HTML/XHTML deve conter os elementos que definem a sua estrutura básica. Estrutura mínima de um documento bem formado:
1 <!DOCTYPE ...> <- não é tag do HTML, mas faz parte do ducumento bem formado (W3C) 2 <html>
3 <head>
4 <title> Título do documento</title> Informações lógicas sobre o documento </head>
5 <body>
Aqui entra todo o conteúdo que será exposto pelo browser... </body>
</html>
O documento atual aborda os itens 1 e 2 da estrutura básica, e são apresentados a seguir:
2 Declaração DOCTYPE: <!DOCTYPE>
A declaração DOCTYPE deve ser o primeiro código em um documento HTML/XHTML, antes da tag <html>. A declaração DOCTYPE não é uma tag de HTML, é uma instrução para o navegador sobre qual versão da linguagem de marcação a página está escrita.
A declaração DOCTYPE refere-se a um DTD (Document Type Definition – Definição de Tipo de Documento). O DTD especifica as regras para a linguagem de marcação, para que os navegadores possam processar o conteúdo corretamente, e para que a página possa ser validada por ferramentas da W3C.
A declaração <!DOCTYPE ...> contém informações sobre a versão da linguagem de marcação utilizada (HTML ou XHTML) e o endereço do arquivo DTD no sistema online da W3C.
Tipos de conteúdo:
Strict: estrito/rigoroso
Recomendado pela W3C. Significa que o desenvolvedor está seguindo a risca todas as regras e convenções das linguagens utilizadas para escrever o documento HTML. São excluídos todos elementos/tags/atributos de apresentação ou em desuso. Frames não são permitidos.
Transitional: transitório
Significa que o desenvolvedor pode estar seguindo apenas algumas regras e convenções e também utilizando elementos/tags/atributos que já estão em desuso. Normalmente ocorre quando o documento está em fase de transição para as regras restritas. Pode conter elementos/tags/atributos de apresentação ou em desuso. Frames não são permitidos.
Frameset: frames/quadros
Não recomendado pela W3C. Usado quando a estrutura do site é composta por frames/quadros, que são divisões provocadas na janela do browser, onde mais de um documento HTML é apresentado ao mesmo tempo. Pode conter elementos/tags/atributos de apresentação ou em desuso.
Doctypes disponíveis nas Recomendações do W3C: HTML 4.01: Strict
Esta DTD contém todos os elementos e atributos HTML, excluindo elementos/tags/atributos de apresentação ou em desuso (como <font>). Frames não são permitidos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3
HTML 4.01: Transitional
Esta DTD contém todos os elementos e atributos HTML, incluindo elementos/tags/atributos de apresentação ou em desuso (como <font>). Frames não são permitidos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01: Frameset
Igual a DTD HTML 4.01 Transitional, mas permite o uso de conteúdo de frames.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0: Strict
Esta DTD contém todos os elementos e atributos HTML, excluindo elementos de apresentação ou em desuso (como <font>). Frames não são permitidos. A marcação deve também ser escrito como XML bem formado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0: Transitional
Esta DTD contém todos os elementos e atributos HTML, incluindo elementos de apresentação ou em desuso (como <font>). Frames não são permitidos. A marcação deve também ser escrito como XML bem formado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0: Frameset
Igual a DTD XHTML 1.0 Transitional, mas permite o uso de conteúdo de frames.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >
OBS: Todas as tags/atributos da grade deste curso são aceitos nos 3 tipos de
Doctype (strict, transitional e frameset). Assim, tags/atributos que são aceitos somente no
conteúdo Transitional ou Frameset não serão vistos por já estarem obsoletos segundo a
W3C.
Seguindo todas as tags e atributos visto neste curso use o DOCTYPE para HTML que segue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title> Título do documento</title> Informações lógicas sobre o documento </head>
<body>
Aqui entra todo o conteúdo que será exposto pelo browser... </body>
</html>
Seguindo todas as tags e atributos visto neste curso use o DOCTYPE para XHTML que segue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head>
<title> Título do documento</title> Informações lógicas sobre o documento </head>
<body>
Aqui entra todo o conteúdo que será exposto pelo browser... </body>
4
Validação de código
É um serviço gratuito desenvolvido pela W3C (desenvolvedores voluntários) para auxiliar desenvolvedores a corrigir possíveis erros de grafia ou uso impróprio de elementos no código das páginas. Essa ferramenta é uma poderosa aliada, capaz de checar o documento HTML/XHTML de acordo com as regras descrita em um documento DTD. O DTD deve estar definido no documento HTM através do DOCTYPE como visto acima.
Um código válido fornece maiores garantias de usabilidade e acessibilidade do site por dispositivos diversos e usuários Portadores de Necessidades Especiais. Um site validado implica em um código bem escrito e oferece status de bom desenvolvedor, que vem a reforçar o currículo, pois significa qualidade de desenvolvimento e engajamento com questões tecnológicas e sociais.
A W3C fornece validador para código HTML e CSS, que podem ser acessados online (acessando o link, basta informar o endereço da página/URI ou fazer o upload do arquivo a partir da máquina local.). Também pode ser instalados no computador, ou digitado direto na página. Para entender melhor acesse os links abaixo e experimente:
Validador: HTML
Acesso online: http://validator.w3.org/
Endereço para download: http://validator.w3.org/docs/install.html
Validador: CSS
Acesso online: http://jigsaw.w3.org/css-validator/
Endereço para download: http://jigsaw.w3.org/css-validator/DOWNLOAD.html
3 – Elemento raiz de definição do documento: <html>
É necessário definir onde inicia e onde termina o documento HTML/XHTML. A tag <html> é o elemento raiz dos documentos.
Atributo: lang
Código da linguagem (opcional em HTML).
Atributo: xml:lang
Código da linguagem (opcional em XHTML).
Atributo: xmlns
Especifica o espaço a ser usado (obrigatório em XHTML, não use em HTML).
Exemplo tag <html> em documentos HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
todas as outras tags
</html>
ou
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="PT-BR">
todas as outras tags
</html>
Exemplo tag <html> em documentos XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
todas as outras tags
</html>
ou
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="PT-BR" >
5 </html>
Diferenças entre HTML 4.01 e XHTML 1.0 deste capítulo
1 – O uso da instrução DOCTYPE é recomendada nos documentos HTML e obrigatória nos documentos XHTML. 2 ‐ Escolha o tipo de documento (strict, transitional, frameset) e copie a linha do DOCTYPE específica vista anteriormente nas recomendações da W3C. O ideal seria usar sempre o strict, o que significa que o desenvolvedor está seguindo todas as recomendações da W3C. Em HTML (Strict):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Em XHTML (Strict):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 – Em HTML na tag html, o atributo lang é opcional. 4 – Em XHTML na tag html, o atributo xml:lang é opcional. 5 – Em XHTML na tag html, o atributo xmlns é obrigatório, e não é usado em HTML. Abandone 1 – Documentos HTML escritos sem a especificação DOCTYPE.