Embed Size (px)
DESCRIPTION
Aula de XHTML - IFBA - Desenvolvimento Web
Citation preview
XHTML
XHTML
HTML
XML
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
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>
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>
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>
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>
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” />
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”>
Sintaxe para atributos
Errado <input checked />
Certo: <input checked=“checked” />
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">
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.
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">
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>
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” />
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.” />
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” />
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>
CODIFICAÇÃO DE CARACTERES
Iso-8859-1
Utf-8
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
PRIMEIRO CASO
SEGUNDO CASO
TERCEIRO CASO
VALIDANDO SEU TEMPLATE W3C
http://validator.w3.org/#validate_by_upload+with_options
![[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://img.document.onl/doc/110x75/5590b0b41a28abef058b45fd/frontinbh-quero-ser-um-ninja-em-xhtml-html5-e-css3-bernard-de-luna.jpg)
