aula de xhtml
DESCRIPTION
Aula de XHTML - IFBA - Desenvolvimento WebTRANSCRIPT
![Page 1: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/1.jpg)
XHTML
![Page 2: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/2.jpg)
XHTML
HTML
XML
![Page 3: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/3.jpg)
DIFERENÇAS ENTRE XHTML E HTML
Documentos devem ser bem formados
Todas as Tags devem ser escritas com letras minúsculas
Tags devem estar convenientemente aninhadas
Uso de Tags de fechamento é obrigatório
Elementos vazios devem ser fechados
Diferença na sintaxe dos atributos
![Page 4: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/4.jpg)
DOCUMENTOS DEVEM SER BEM FORMADOS
HTML navegadores interpretam e resolvem erros de marcação.
Em XHTML não são admitidos erros na marcação
Estrutura Básica – elemento raiz <html> <html> <head> … </head> <body> … </body> </html>
![Page 5: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/5.jpg)
TODAS AS TAGS DEVEM SER ESCRITAS COM LETRAS MINÚSCULAS
XML é sensível ao tamanho da caixa de fonte, logo XHTML também é.
Uso obrigatório de letras minúsculas
Errado: <DIV><P> Aqui um texto</P></DIV>
Certo: <div><p>Aqui um texto</p></div>
![Page 6: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/6.jpg)
TAGS DEVEM SER CONVENIENTEMENTE ANINHADAS
A primeira tag a ser aberta é a última a ser fechada, a segunda é a penúltima e assim por diante.
Certo: <div><p><em>Aqui um texto
enfatizado</em></p></div>
Errado: <div><em><p>Aqui um texto
enfatizado</em></p></div>
![Page 7: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/7.jpg)
USO DE TAGS DE FECHAMENTO É OBRIGATORIO
Em HTML é possível omitir a tag de fechamento de determinados elementos, tais como para as tags <p><li>. XML não permite omissão de qualquer tag de fechamento. Todo elemento tem que ter tag de fechamento.
Errado: <p>Um paragráfo. <li>Um item de lista.
Certo: <p>Um paragráfo.</p> <li>Um item de lista</li>
![Page 8: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/8.jpg)
ELEMENTOS VAZIOS DEVEM SER FECHADOS
Elementos vazios devem ter uma tag de fechamento, ou a tag de abertura deve terminar com />
Errado: <br> <hr> <img src=“imagem.jpg” alt=“minha imagem”>
Certo: (Opção 1 – usar tag de fechamento) <br></br> <hr></hr> <img src=“imagem.jpg” alt=“minha imagem”></img>
Certo: (Opção 2 – usar tag de fechamento) <br /> <hr /> <img src=“imagem.jpg” alt=“minha imagem” />
![Page 9: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/9.jpg)
DIFERENÇA NA SINTAXE DOS ATRIBUTOS
Nomes de Atributos
Errado: <td ROWSPAN=“3”>
Certo: <td rowspan=“3”>
Valores dos atributos Errado: <td rowspan=3>
Certo: <td rowspan=“3”>
![Page 10: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/10.jpg)
Sintaxe para atributos
Errado <input checked />
Certo: <input checked=“checked” />
![Page 11: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/11.jpg)
ELEMENTOS OBRIGATÓRIOS EM UM DOCUMENTO XHTML
É obrigatória a declaração do DOCTYPE, assim como das tags <html><head><title><body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
![Page 12: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/12.jpg)
PARA QUE SERVE O DOCTYPE?
Serve para indicar a entidade normativa da linguagem, o caminho para o navegador encontrar as diretrizes que regulamentam a sintaxe e as entidades válidas no documento e baseado nelas, renderizar o documento.
![Page 13: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/13.jpg)
TIPOS DE DOCTYPE São três tipos de DOCTYPE para XHTML: Strict,
Transitional e Frameset.
Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/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 HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
![Page 14: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/14.jpg)
MODELO DE DOCUMENTO XHTML <?xml version=“1.0” encoding=“UTF-8” ? <XHTML; 1.0 Transitional <!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML; 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=“pt-br” lang=“pt-br”>
<head><title>Viação São José | horários de
ônibus</title>…metatags,estilos,scripts
</head><body>
… Conteúdo da página</body>
</html>
![Page 15: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/15.jpg)
ELEMENTO META
Este elemento destina-se a fornecer informações adicionais sobre o documento.
A sintaxe para escrever um elemento meta, consiste em duas partes. A primeira define um nome para o metadado e a segunda para seu conteúdo. O nome é definido pelo seu atributo name ou http-equiv e o conteúdo pelo atributo content.
<meta name=“author” content=“Fulano da Silva” />
![Page 16: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/16.jpg)
EXEMPLOS DE ELEMENTOS META
Informar o tipo de conteúdo do documento é texto HTML e a codificação é UTF-8:
<meta http-equiv=“Content-Type” content=“text/html” charset=“UTF-8” />
Para informar que o idioma principal do documento é o português:
<meta name=“language” content=“pt-br” />
Para descrever o conteúdo de suas páginas usa-se:
<meta name=“description” content=“Tutoriais sobre CSS, XHTML, HTML, acessibilidade e padões web.” />
![Page 17: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/17.jpg)
EXEMPLOS DE ELEMENTOS META
Para relacionar as palavras-chave do conteúdo do documento usa-se:
<meta name=“keywords” content=“css, html, xhtml, webstandards, xml.” />
Para informar aos robôs de busca que os conteúdos da página podem ser indexados e os links devem ser seguidose examinados use:
<meta name=“robots” content=“all” />
![Page 18: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/18.jpg)
CARACTERES E ENTIDADES <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=“pt-br” lang=“pt-br”>
<head><title>Titulo do Template</title>
<meta name=“description” content=“Meu template para XHTML 1.0 Transitional.” />
<meta name=“keywords” content=“relação de palavras chave” />
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<meta name=“language” content=“pt-br” /><meta name=“author” content=“Meu nome” />
</head><body>
… Conteúdo da página</body>
</html>
![Page 19: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/19.jpg)
CODIFICAÇÃO DE CARACTERES
Iso-8859-1
Utf-8
![Page 20: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/20.jpg)
CODIFICAÇÃO DE CARACTERES
Primeiro caso: Bloco de Notas UTF-8 na tag meta ANSI
Segundo caso: Bloco de Notas Iso-8859-1 na tag meta UTF-8
Terceiro caso: Bloco de Notas UTF-8 na tag meta UTF-8
![Page 21: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/21.jpg)
PRIMEIRO CASO
![Page 22: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/22.jpg)
SEGUNDO CASO
![Page 23: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/23.jpg)
TERCEIRO CASO
![Page 24: Aula de XHTML](https://reader036.vdocuments.mx/reader036/viewer/2022062312/555e25bfd8b42a6a4c8b4ebb/html5/thumbnails/24.jpg)
VALIDANDO SEU TEMPLATE W3C
http://validator.w3.org/#validate_by_upload+with_options