Apresentação do PowerPoint

Propaganda
UNIBRATEC – Ensino Superior e Técnico em Informática
Ferramentas para Web I
1
Micheline Carvalho Barroso
Sexta-feira, 3 de Fevereiro de 2006
UNIBRATEC – Ensino Superior e Técnico em Informática
Ferramentas para Web I
XHTML
Profa. Micheline Carvalho Barroso
[email protected]
2
Capítulo 2 – XHTML
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 De onde veio o XHTML?
 Razões para usar XHTML:
• XHTML é o padrão de marcação atual, substituindo a
HTML;
• utilização de regras de sintaxe mais precisas e rigorosas;
• criação de documentos mais consistentes;
• facilidade de manutenção;
• extensão do cliente Web além do navegador: PDAs,
celulares e outros dispositivos móveis;
• iniciação dos desenvolvedores Web no ambiente XML.
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Elementos obrigatórios em um documento XHTML
<!DOCTYPE tipo_do_documento>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título do documento</title>
</head>
<body>
Conteúdo do documento
</body>
</html>
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Para que serve o DOCTYPE ?
• A XHTML permite que desenvolvedores criem diversos tipos diferentes
de documentos, cada um definido por regras diferentes.
• As regras de cada tipo são detalhadas na Definição do Tipo de
Documento (Document Type Definitions - DTD).
• Sua declaração DOCTYPE informa aos serviços de validação e aos
navegadores modernos qual DTD foi utilizada para elaborar a
marcação.
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Para que serve o DOCTYPE ?
• As declarações DOCTYPE são componentes-chave de páginas Web
compatíveis.
• Sua marcação e CSS não serão validadas a menos que seu código
XHTML comece com uma declaração DOCTYPE apropriada.
• Esta deve ser sempre a primeira declaração em um documento Web.
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Os tipos de DOCTYPE
• STRICT
• TRANSITIONAL
• FRAMESET
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Os tipos de DOCTYPE
• XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 A declaração namespace
• A declaração DOCTYPE é imediatamente seguida por uma declaração
de namespace em XHTML, associada ao elemento raiz html.
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
• Um namespace em XML é uma coleção de tipos de elementos e nomes
de atributos associados a um DTD específico.
• A declaração namespace indica a sua localização.
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Declarando o tipo do conteúdo
• Para serem interpretados corretamente por navegadores e aprovados
nos testes de validação de marcação, todos os documentos XHTML
devem declarar o tipo de codificação de caractere que foi usado em sua
criação (Unicode, ISO-8859-1, etc).
• Existem duas formas de fazer isso:
<?xml> version="1.0" encoding="iso-8859-1">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• todas as tags devem ser escritas em letras minúsculas;
• o tratamento dos atributos;
• o uso de tags de fechamento é obrigatório;
• as tags vazias devem ser fechadas;
• as tags devem estar convenientemente aninhadas;
• o tratamento dos comentários.
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• Todas as tags devem ser escritas em letras minúsculas.
Errado:
<DIV><P>Aqui um texto</P></DIV>
Certo:
<div><p>Aqui um texto</p></div>
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• O tratamento dos atributos: nomes de atributos.
Errado:
<td ROWSPAN="3">...</td>
Certo:
<td rowspan="3">...</td>
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• O tratamento dos atributos: valores de atributos.
Errado:
<td rowspan=3>...</td>
Certo:
<td rowspan="3">...</td>
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• O tratamento dos atributos: sintaxe dos atributos.
Errado:
<input checked />
Certo:
<input checked="checked" />
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• O tratamento dos atributos: os atributos id e name.
Errado:
<img src="imagem.gif" name="minha_imagem" />
Certo:
<img src="imagem.gif" id="minha_imagem" />
Ou:
<img src="imagem.gif" id="minha_imagem“
name="minha_imagem" />
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• O tratamento dos atributos: o atributo alt para imagens.
Certo:
<img src="imagem.gif" alt ="minha_imagem" />
Ou:
<img src="imagem.gif" alt = “ “ />
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• O uso de tags de fechamento é obrigatório.
Errado:
<p>Um parágrafo.<p>Outro parágrafo.
Certo:
<p>Um parágrafo.</p><p>Outro parágrafo.</p>
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• As tags vazias devem ser fechadas.
Errado: Elementos vazios sem terminação
<br>
<hr>
<img src="imagem.gif" alt="minha imagem">
Certo: Elementos vazios com terminação
<br />
<hr />
<img src="imagem.gif" alt="minha imagem" />
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• As tags devem estar convenientemente aninhadas.
Errado:
<div><em><p>
Aqui um texto itálico
</em></p></div>
Certo:
<div><em><p>
Aqui um texto itálico
</p></em></div>
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Diferenças entre XHTML e HTML
• O tratamento dos comentários.
Errado:
<!-- Aqui
começa o menu -->
<!-- ------------------- -->
código XHTML do menu
Certo:
<!-- Aqui começa o menu -->
<!-- xxxxxxxxxxxxxxxxxx -->
código XHTML do menu
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Códigos gerados por editores
• Cuidado com os códigos gerados por editores!
Errado:
onMouseOver=function()
Certo:
onmouseover=function()
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 XHTML Básico
Elemento
‹#›
Documento
Tag/Atributos
<html>..</html>
Cabeçalho
<head>..</head>
Título
<title>..</title>
Corpo
<body>..</body>
Parágrafo
<p>..</p>
Nova linha
<br />
Texto pré-formatado
<pre>..</pre>
Cabeçalho de texto
<h1>..</h1> (<h1> ,.., <h6>)
Seção
<div>..</div>
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 XHTML Básico
Elemento
Texto enfatizado
‹#›
Tag/Atributos
<em>..</em>
Texto fortemente
enfatizado
<strong>..</strong>
Citação
<cite>..</cite>
Código de programa
<code>..</code>
Entrada de programa
<kbd>..</kbd>
Saída de programa
<samp>..</samp>
Variável/Argumento de
programa
<var>..</var>
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 XHTML Básico
Elemento
‹#›
Texto subscrito
Tag/Atributos
<sub>..</sub>
Texto sobrescrito
<sup>..</sup>
Abreviação
<abbr>..</abbr>
Atributo: title
Referência em linha
<q>..</q>
Atributo: cite
Referência em bloco
<blockquote>..</blockquote>
Lista não-ordenada
<ul>..</ul>
Lista ordenada
<ol>..</ol>
Elemento da lista
<li>..</li>
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 XHTML Básico
Elemento
Âncora
‹#›
Tag/Atributos
<a>..</a>
Atributos: href, name/id
Imagem
<img />
Atributos: src, alt
Barra horizontal
<hr />
Comentários
<!-- .. -->
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Tabelas
Elemento
‹#›
Corpo da tabela
Tag/Atributos
<table>..</table>
Linha da tabela
<tr>..</tr>
Célula de cabeçalho
<th>..</th>
Atributos: colspan, rowspan
Célula de dado
<td>..</td>
Atributos: colspan, rowspan
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Formulários
Elemento
Corpo do formulário
‹#›
Tag/Atributos
<form>..</form>
Atributos: method, action,
name/id
Campo de formulário
<input />
Atributos: type, name/id, size,
maxlength, value, checked
Campo de texto de
linha única
type=“text”
Atributos: size, maxlength,
value
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Formulários
Elemento
Campo de senha
‹#›
Tag/Atributos
type=“password”
Atributos: size, maxlength,
value
Campos radio button
type=“radio”
Atributos: name, value, checked
Campos checkbox
type=“checkbox”
Atributos: name, value, checked
Campo oculto
type=“hidden”
Atributos: name, value
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Formulários
Elemento
‹#›
Botão para enviar
dados
Tag/Atributos
type=“submit”
Atributos: name/id, value.
Botão para limpar
dados
type=“reset”
Atributos: name/id, value.
Área de texto
<textarea>..</textarea>
Atributos: name/id, cols, rows
Caixa de seleção
<select>..</select>
Atributos: name/id, size,
multiple
Opção da caixa de
seleção
<option>..</option>
Atributo: selected, value
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Frames em série
Elemento
Frame
‹#›
Tag/Atributos
<iframe>..</iframe>
Atributos: name/id, src,
frameborder, scrolling
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Codificação de caracteres
• Existem métodos de codificação apropriados para acrescentar
caracteres especiais e letras acentuadas em um documento.
• Estes métodos são: referência de caracter e referência de entidade.
• a codificação começa com um "&" (e comercial) e termina com ";". A
diferença é a seguinte: na referência de caracter, é utilizado um código
numérico para o caracter; na referência de entidade, é utilizado um
código literal (mais fácil de lembrar).
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
XHTML
 Codificação de caracteres
 Relações de códigos podem ser encontradas em:
• http://www.w3.org/TR/1999/REC-html40119991224/sgml/entities
• http://www.miswebdesign.com/resources/articles/xhtmllatin-1-character-references.html
• http://www.miswebdesign.com/resources/articles/xhtmlspecial-character-references.html
• http://www.miswebdesign.com/resources/articles/xhtmlsymbol-character-references.html
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
Bibliografia
• http://w3c.org
Site do Consórcio W3C (World Wide Web Consortium)
 ZELDMAN, Jeffrey. "Projetando Web Sites Compatíveis". Rio de Janeiro:
Editora Campus, 2003.
 http://www.maujor.com
Site de Maurício Samy Silva. Tutoriais, Recomendações, Dicas: XHTML
e CSS.
 HOLZSCHLAG, Molly E.. "XHTML: XML on the client side". XML Journal,
Abril/2001. Disponível online em:
http://molly.com/articles/markupandcss/2001-04-xmlclientside.php.
Acessado em: 30/03/2005.
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
INC – Introdução a Sistemas de Computação
Bibliografia
 PECK, Nigel. "XHTML Web Design for Beginners". SitePoint,
Junho/2003. Disponível online em:
http://www.accessify.com/tutorials/xhtml-web-design-for-beginnerspart-1.asp. Acessado em: 03/04/2005.
 "Recomendação XHTML 1.0 do W3C". Disponível online em:
http://www.maujor.com/w3c/xhtml10_2ed.html. Acessado em:
06/04/2005.
‹#›
Capítulo 1 – Conceitos Básicos
Sexta-feira, 3 de Fevereiro de 2006
Download