PW000 - Estruturas de Documentos XHTML

PROGRAMAÇÃO WEB
(Estrutura de documentos XHTML)
Prof Silvano Oliveira

prof.silvano.oliveira@gmail.com
Quem valida o documento?
http://validator.w3.org/
Prof Silvano Oliveira 2

Quem valida o documento?

No DOCTYPE found!

Tipos de documentos
•Declaração do tipo é parecido com
• <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01

Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
• <!DOCTYPE HTML SYSTEM>

Tipos de documentos

Tipo de documentos
• HTML 4.01
• Strict
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
• Transitional
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
• Frameset
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Tipo de documentos
• XHTML 1.0 (HTML + regras XML)
• Strict
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• Transitional
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• Frameset
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Linguagens de marcação
•SGML (Standard Generalized Markup Language)
•XML (eXtensible Markup Language)
•HTML (HyperText Markup Language)
•XHTML (eXtensible HTML)
• Todas as linguagens para web são padronizadas pelo W3C (World
Wide Web Consortium), que especifica todas as suas características
XML XHTML
SGML 1.0
HTML
HTML
4.01

Tags do XHTML
•O conjunto de tags do XHTML e seus significados veremos
durante o curso, mas temos de ter em mente algumas regras
que dever ser obedecidas.

Regras do XHTML
•Tags em letras minúsculas
• Errado: Aqui é um texto de parágrafo
• Certo: Aqui é um texto de parágrafo
•Elementos corretamente aninhados

• Errado: Paragrafo em itálico
• Certo: Paragrafo em itálico

Regras do XHTML
•Todas as tags devem ser fechadas
• Errado:
• Aqui é um texto de parágrafo.
• Este é outro paragrafo de texto.
• Certo:
• Aqui é um texto de parágrafo.
• Este é outro paragrafo de texto.
• Em HTML é permitido para determinados elementos, omitir a tag de fechamento. Em XML não se
permite omissão de qualquer tag de fechamento.

Regras do XHTML
•Mesmo as tags vazias devem ser fechadas
•Elementos vazios devem ter uma tag de fechamento ou a tag de
abertura deve terminar com “/>”. Como exemplo, ou .
Errado:
• 
• <hr>
• <img src=”imagem.gif” alt=”minha imagem”>
Certo:
• 
• <hr />
• <img src=”imagem.gif” alt=”minha imagem” />

Regras do XHTML
•Definição de atributos (em minúsculas)
• Errado: <img SRC=“imagem.gif” ALT=“minha imagem”>
• Certo: <img src=“imagem.gif” alt=“minha imagem” />
•Sempre entre aspas duplas (“ ”)

• Errado: <img src=imagem.gif alt=minha imagem>
• Certo: <img src=“imagem.gif” alt=“minha imagem” />

Regras do XHTML
•Sempre devem ter valores
• Errado: <input checked />
• Certo: <input checked=“checked” />
•Atributo xmlns obrigatório

• Errado: <html>...</html>
• Certo: <html xmlns="http://www.w3.org/1999/xhtml">...</html>

Documentos bem formados
• Um documento é dito bem formado quando está estruturado de acordo
com as regras definidas nas recomendações do W3C.
• Todos os elementos XHTML devem estar corretamente aninhados dentro

do elemento raiz <html>
• A estrutura básica do documento deve estar conforme as figuras do
próximo slide.
• Meta, style e script não são obrigatórios, servem para informações

adicionais sobre o próprio documento, incluindo para mecanismos de
buscas (meta), definição de estilos dentro do próprio documento (style),
uso de folhas de estilos definidos em arquivos externo (link) e também
JavaScript (script).

Documentos bem formados
<!DOCTYPE ... >
<html xmlns=”...”>
<head>
<title>...</title>
...
</head>
<body>
...
</body>
</html>
Modelo mínimo de documento
<!DOCTYPE ...>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título do documento</title>
</head>
<body>
Conteúdo do documento
</body>
</html>
•<html> ... </html> - marca o início e o final da página
•<head> ... </head> - marca início e fim de cabeçalho
•<title> ... </title> - delimita o texto que irá ser visualizado na
barra de título do navegador.
•<body> ... </body> - delimita o corpo da página.
•Obs.: o par <title> ... </title> deve vir entre as tags <head> ...
</head>. Só poderá haver um título e este deve ser o
primeiro elemento dentro de <head> ... </head>.

<!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">
<head>
<title>Livraria Virtual</title>
</head>
<body>
Esta é a sua livraria virtual...
</body>
</html>

Referência para estudos
● http://pt-br.html.net/tutorials/html/
● http://htmldog.com
● http://www.google.com.br/search?q=html

PW000 - Estruturas de Documentos XHTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

PW000 - Estruturas de Documentos XHTML

Enviado por

Direitos autorais:

Formatos disponíveis

PROGRAMAÇÃO WEB

(Estrutura de documentos XHTML)

Prof Silvano Oliveira

Prof Silvano Oliveira 2

Prof Silvano Oliveira 3

Prof Silvano Oliveira 4

• <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01

• <!DOCTYPE HTML SYSTEM>

Prof Silvano Oliveira 5

Prof Silvano Oliveira 6

Prof Silvano Oliveira 7

Prof Silvano Oliveira 8

Prof Silvano Oliveira 9

Prof Silvano Oliveira 10

• Certo: <p>Aqui é um texto de parágrafo</p>

•Elementos corretamente aninhados

• Certo: <em><p>Paragrafo em itálico</p></em>

Prof Silvano Oliveira 11

Prof Silvano Oliveira 12

Prof Silvano Oliveira 13

• Certo: <img src=“imagem.gif” alt=“minha imagem” />

•Sempre entre aspas duplas (“ ”)

• Certo: <img src=“imagem.gif” alt=“minha imagem” />

Prof Silvano Oliveira 14

• Certo: <input checked=“checked” />

•Atributo xmlns obrigatório

• Certo: <html xmlns="http://www.w3.org/1999/xhtml">...</html>

Prof Silvano Oliveira 15

• Todos os elementos XHTML devem estar corretamente aninhados dentro

• Meta, style e script não são obrigatórios, servem para informações

Prof Silvano Oliveira 16

Prof Silvano Oliveira 19

Prof Silvano Oliveira 20

Prof Silvano Oliveira 21

Você também pode gostar