Ricardo Terra rterrabh [at] gmail.com - DCC

Transcrição

XHTML
Ricardo Terra
rterrabh [at] gmail.com
Ricardo Terra (rterrabh [at] gmail.com)
XHTML
Outubro, 2008
1
CV
Nome: Ricardo Terra
Email: rterrabh [at] gmail.com
www: ricardoterra.com.br
Twitter: rterrabh
Lattes: lattes.cnpq.br/ 0162081093970868
Ph.D. (UFMG/UWaterloo),
Post-Ph.D. (INRIA/Université Lille 1)
Background
Acadêmico: UFLA (desde 2014), UFSJ (1 ano), FUMEC (3 anos), UNIPAC (1 ano), FAMINAS (3 anos)
Profissional: DBA Eng. (1 ano), Synos (2 anos), Stefanini (1 ano)
XHTML
Outubro, 2008
2
Introdução ao XHTML
n 
O que é?
q 
q 
q 
q 
q 
q 
XHTML significa EXtensible HyperText Markup Language
XHTML objetiva substituir HTML
XHTML é quase idêntico ao HTML 4.01
XHTML é uma versão mais restrita e limpa do HTML
XHTML é HTML definido como um XML
XHTML é uma recomendação W3C
n 
n 
Se tornou uma recomendação em Janeiro de 2000
Em síntese, XHTML é uma combinação de HTML e XML
q 
isto é, todos os elementos no HTML 4.01 com a sintaxe do XML
XHTML
Outubro, 2008
3
Introdução ao XHTML
n 
XHTML é definido como a última versão do HTML
q 
n 
Todos os navegadores suportam XHTML
q 
n 
Irá gradualmente substituir o HTML
XHTML é compatível com HTML 4.01
Até mesmo o site do W3Schools foi convertido para XHTML
XHTML
Outubro, 2008
4
Motivação
n 
Muitas páginas na Internet contêm HTML "ruim"
n 
O seguinte código HTML funciona bem se você visualizá-lo em um
navegador, mesmo pelo fato de ele não seguir as regras HTML:
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>
XHTML
Outubro, 2008
5
Motivação
n 
XML é uma linguagem de marcação em que tudo tem que ser
marcado corretamente, o que resulta em documentos bem
formados
n 
XML foi desenvolvida para descrever dados e a HTML foi
desenvolvida para apresentar dados
n 
Atualmente, existem diversas tecnologias de navegadores, alguns
deles funcionam em computadores, mas alguns em celulares,
palms e hand helds. Alguns equipamentos não tem recursos ou
poder de interpretar uma linguagem de marcação "ruim"
XHTML
Outubro, 2008
6
Motivação
n 
Entretanto, combinar HTML e XML, e suas forças, nós conseguimos
uma linguagem de marcação que é útil agora e futuramente:
XHTML
n 
Páginas XHTML podem ser lidas por todos os dispositivos
habilitados para XML
n 
Enquanto toda a Internet atualiza para navegadores com suporte à
XML, XHTML concede a oportunidade de escrever documentos
bem formados agora, que funcionam em todos os navegadores e
que serão sempre compatíveis com os anteriores
XHTML
Outubro, 2008
7
Diferenças entre HTML e XHTML
n 
XHTML não é muito diferente do HTML
q 
n 
a partir de agora, você deve começar a escrever as marcações (tags)
sempre em minúsculas e sempre fechar toda marcação aberta
Diferenças mais importantes:
q 
q 
q 
q 
Elementos XHTML devem sempre ser propriamente aninhados
Elementos XHTML devem sempre ser fechados
Elementos XHTML devem sempre estar em minúsculo
Documentos XHTML devem possuir somente um elemento raiz
n 
Estrutura básica de um documento XHTML:
<html>
<head> ... </head>
<body> ... </body>
</html>
XHTML
Outubro, 2008
8
Erros comuns: aninhamento
n 
Errado:
<b><i>This text is bold and italic</b></i>
n 
Certo:
<b><i>This text is bold and italic</i></b>
XHTML
Outubro, 2008
9
Erros comuns: fechamento
n 
Errado:
n 
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
Certo:
XHTML
Outubro, 2008
10
n 
Errado:
<p>This is a paragraph
<p>This is another paragraph
n 
Certo:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
XHTML
Outubro, 2008
11
n 
Errado:
Quebra de linha: <br>
Linha horizontal: <hr>
Imagem: <img src="happy.gif" alt="Happy face">
n 
Certo:
Quebra de linha : <br />
Linha horizontal : <hr />
Imagem: <img src="happy.gif" alt="Happy face" />
XHTML
Outubro, 2008
12
Erros comuns: escrita dos elementos
n 
Errado:
<BODY>
<P>This is a paragraph</P>
</BODY>
n 
Certo:
<body>
<p>This is a paragraph</p>
</body>
XHTML
Outubro, 2008
13
Erros comuns: escrita dos atributos
n 
Errado:
<table WIDTH="100%">
n 
Certo:
<table width="100%">
XHTML
Outubro, 2008
14
Erros comuns: uso de aspas
n 
Errado:
<table width=100%>
n 
Certo:
<table width="100%">
XHTML
Outubro, 2008
15
Erros comuns: minimização de atrib.
n 
Errado:
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
n 
Certo:
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
XHTML
Outubro, 2008
16
Erros comuns: minimização de atrib.
n 
A lista abaixo refere-se aos atributos minimizados em HTML e como
devem ser corretamente escritos em XHTML:
XHTML
Outubro, 2008
17
Uso de id ao invés de name
n 
HTML 4.01 define um atributo name para os elementos a, applet,
frame, iframe, img e map. Em XHTML o atributo name está
descontinuado. Deve ser usado o atributo id
n 
Errado:
q 
n 
<img src="picture.gif" name="picture1" />
Certo:
q 
<img src="picture.gif" id="picture1" />
XHTML
Outubro, 2008
18
Compatibilidade
n 
Para funcionar com navegadores antigos por um tempo, deve-se
utilizar tanto name quanto id com valores idênticos. Observe:
q 
n 
<img src="picture.gif" id="picture1" name="picture1" />
Para fazer seu XHTML compatível com os navegadores atuais,
deve-se adicionar um espaço extra antes do fechamento da
marcação "/>". Observe:
q 
<a href="terra.html"/>
para
q 
<a href="terra.html" />
XHTML
Outubro, 2008
19
Elementos XHTML obrigatórios
n 
Todos os documentos XHTML devem ter uma declaração
DOCTYPE. Os elementos html, head e body devem estar
presentes e o elemento title deve estar presente dentro no
elemento head
q 
<!DOCTYPE tipo do documento vem aqui>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título vem aqui</title>
</head>
<body>
</body>
</html>
XHTML
Outubro, 2008
20
XHTML DTD
n 
O padrão XHTML define três DTDs
q 
O mais comum é o XHTML Transitional
n 
O XHTML é vinculado ao DTD pela declaração DOCTYPE e esta
deve estar na primeira linha do XHTML
n 
A declaração DOCTYPE define o tipo do documento, por exemplo:
q 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML
Outubro, 2008
21
XHTML DTD
n 
Os três DTDs:
q 
q 
q 
q 
n 
DTD especifica a sintaxe de uma página web em SGML
DTD é utilizado por aplicações SGML, tal como HTML, para especificar
regras a serem aplicadas nas marcações de documentos de um tipo
particular, incluindo o conjunto de elementos e declarações de entidade
XHTML é especificado em um DTD
Um XHTML DTD descreve de forma precisa, em uma linguagem lida
pelo computador (computer-readable), a gramática e sintaxe permitida
de marcações XHTML
Atualmente, existem 3 XHTML DTDs:
q 
STRICT, TRANSITIONAL e FRAMESET
XHTML
Outubro, 2008
22
XHTML DTD
n 
XHTML 1.0 Strict
q 
q 
q 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Inclui elementos e atributos que não estão descontinuados ou que não
aparecem em framesets
Use quando realmente quiser marcações limpas, livre de desordem de
apresentação. Use ela em conjunto com CSS (Cascading Style Sheets)
XHTML
Outubro, 2008
23
XHTML DTD
n 
XHTML 1.0 Transitional
q 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
q 
q 
Inclui tudo do Strict, mais elementos e atributos descontinuados
Use quando necessitar tirar vantagens de características de
apresentação do HTML e quando você quiser suportar navegadores que
não entendam CSS
XHTML
Outubro, 2008
24
XHTML DTD
n 
XHTML 1.0 Frameset
q 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
q 
q 
Inclui tudo do Transitional, mais frames
Use quanto quiser usar frames HTML para particionar a janela do
navegador em dois ou mais frames
XHTML
Outubro, 2008
25
Referência XHTML 1.0
n 
Para tirar qualquer dúvida sobre marcações (sintaxe, utilização, etc)
e para saber quais marcações estão disponíveis em qual DTD, a
W3CSchools disponibiliza uma página de referência do XHTML 1.0:
q 
n 
http://www.w3schools.com/tags/default.asp
Realmente muito útil
XHTML
Outubro, 2008
26
XHTML Como validar?
n 
Para converter um web site de HTML para XHTML, você deve estar
familiarizado com as regras de sintaxe XHTML vistas. Convém
salientar que os seguintes passos são indispensáveis:
q 
Adicionar a definição DOCTYPE
n 
Strict é mesmo restrita, talvez Transitional seja uma boa solução
q 
Sempre utilizar marcações e nomes de atributos em minúsculas
q 
Sempre utilizar aspas nos atributos
q 
Marcações vazias devem ser fechadas
n 
Exemplo:
<br>
à
<br />
XHTML
Outubro, 2008
27
XHTML Como validar?
n 
Página de validação W3C
q 
n 
Nesta página você pode validar:
q 
q 
q 
n 
http://validator.w3.org/
uma URL existente
um código XHTML diretamente
submeter um XHTML para validação
Caso use Firefox, pode baixar o add-on chamado Web Developer
q 
http://chrispederick.com/work/web-developer/
q 
Assim, basta ir em Tools ! Validate HTML
XHTML
Outubro, 2008
28
XHTML Modular
n 
Para alguns propósitos, o XHTML é enorme e complexo, contudo,
para outros propósitos, ele é muito simples
n 
Por separar o XHTML em módulos, o W3C cria um conjunto
pequeno e bem definido de elementos XHTML que podem ser
usados separadamente por pequenos dispositivos ou combinados
com outros padrões XML em aplicações de grande porte e de maior
complexidade
XHTML
Outubro, 2008
29
XHTML Modular
n 
Com XHTML modular, desenvolvedores podem:
q 
q 
q 
q 
q 
Escolher os elementos que serão suportados por um dispositivo usando
padronizados blocos de construção XHTML
Adicionar extensão ao XHTML, utilizando XML, sem desviar do padrão
XHTML
Simplificar o XHTML para dispositivos como palmtops, telefones
celulares, TV e, até mesmo, eletrodomésticos
Estender o XHTML para aplicações complexas adicionando novas
funcionalidades XML (como MathML, SVG, Voice and Multimedia)
Definir perfis XHTML como XHTML Basic (um subconjunto de XHTML
para dispositivos móveis)
XHTML
Outubro, 2008
30
XHTML Modular
n 
W3C separou a definição do XHTML em 28 módulos:
XHTML
Outubro, 2008
31
XHTML Atributos padronizados
n 
Marcações XHTML têm atributos. Os atributos especiais de cada
marcação podem ser encontrados em:
q 
http://www.w3schools.com/tags/default.asp
n 
Os atributos a seguir são os atributos core, language e keyboard
que são comuns à todas as marcações (com poucas exceções)
n 
Atributos core
q 
Inválidos para os seguintes elementos: base, head, html, meta, param,
script, style e title
XHTML
Outubro, 2008
32
n 
Atributos language
q 
n 
Inválidos para os seguintes elementos: base, br, frame, frameset, hr,
iframe, param e script
Atributos keyboard
q 
Sem exceção
XHTML
Outubro, 2008
33
XHTML Atributos de eventos
n 
Os atributos a seguir podem ser inseridos em marcações HTML
para definir ações de eventos
n 
Eventos de janela
q 
Somente válidos nos elementos body e frameset
XHTML
Outubro, 2008
34
n 
Eventos de formulário
q 
n 
Somente válidos em elementos de formulário
Eventos de teclado
q 
Inválido para os seguinte elementos: base, bdo, br, frame, frameset,
head, html, iframe, meta, param, script, style e title
XHTML
Outubro, 2008
35
n 
Eventos de mouse
q 
Inválido para os mesmos elementos que não aceitam eventos de
teclado
XHTML
Outubro, 2008
36
Referência Bibliográfica
n 
SILVA, M. S. Tutorial XHTML. Disponível em: <http://www.maujor.com/
tutorial/xhtml.php>. Acesso em: 03 set. 2008.
n 
W3Schools. XHTML Tutorial. Disponível em: <http://www.w3schools.com/
xhtml/default.asp>. Acesso em: 03 set. 2008.
XHTML
Outubro, 2008
37

Ricardo Terra rterrabh [at] gmail.com - DCC

Transcrição

Documentos relacionados

Aula Nº 4 – XHTML+CSS

Aula Nº 1 – Introdução

Celular Sony Ericsson Z250

html

Currículo - Alantiel Freire Marins

asemic

Linhas de Pesquisa

Folhas de Estilo em Cascata Vantagens e Desvantagens das CSS – 1

Introdução ao desenvolvimento Web usando HTML, CSS e PHP

Ricardo da Silva Belo