View
1.722
Download
5
Category
Preview:
DESCRIPTION
Citation preview
1
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
XHTML
2
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
XHTML é uma linguagem de marcação usada para transformar documentos de texto em páginas web. A sigla vem de EXtensible HyperText Markup Language e sua tradução significa "Linguagem Extensível para Marcação de Hipertexto". Ela surgiu a partir do XML (EXtensible Markup Language), com as características (tags e atributos) do HTML 4.01.
HTML é uma sigla inglesa para HyperText Markup Language. Sua tradução é "Linguagem de Marcação de Hipertexto" e é utilizada na produção de páginas web através de tags que são comandos com sintaxe própria.
A principal vantagem em adotar o XHTML é a validação pela W3C - World Wide Web Consortium – consórcio organizado sob forma de uma comunidade internacional que desenvolve padrões com o objetivo de garantir o crescimento da web e normatizar suas regras.
Toda página XHTML possui 2 partes principais:
•Cabeçalho da página (tags de informação – visíveis apenas para os mecanismos de busca)
•Corpo da página (tags de conteúdo - informações visíveis para o usuário)
XHTML
3
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
XHTML
O código abaixo foi feito em XHTML, dentro do Notepad ++
Ao selecionar a opção HTML no menu superior "Linguagem", as cores serão geradas automaticamente, facilitando a visualização das tags.
O deslocamento (recuo), que pode ser visto no código, chama-se identação e objetiva facilitar o reconhecimento da hierarquia entre as tags.
Apresentação do código
4
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
XHTML – código básico comentado
Explicação da linha 1
<?xml version="1.0"informa ao navegador que trata-se de um documento XML
encoding="iso-8859-1" ?>necessário para utilizar caracteres acentuados
5
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
XHTML – código básico comentado
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
Estas linhas informam a versão do XHTML e a classificação utilizada (neste exemplo a versão é 1.0 e a classificação é Strict)
OBS: Existem três tipos de classificações possíveis para o XHTML, também chamados de documentos de especificação (Document Type Definition ou DTDs):
• XHTML Strict (Restrito): Não utiliza os elementos da HTML 4.01. Esta versão elimina todos os elementos e atributos que foram desaprovados (tais como font e align) para reforçar a separação entre estrutura e apresentação (estilo) do documento.
• XHTML Transitional (Transitório): Utiliza os elementos da HTML 4.01 já obsoletos, mantendo a compatibilidade com navegadores mais antigos;
• XHTML Frameset (Quadro): Utiliza os mesmos elementos que o Transitional, mas adiciona elementos para páginas web com frames (frameset, frame, noframe). O frameset substitui o body. Ele é responsável por páginas independentes dentro da mesma página.
Explicação das linhas 2 e 3:
6
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Explicação da linha 4:
XHTML – código básico comentado
7
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Explicação das linhas 5, 6 e 7:
XHTML – código básico comentado
8
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Explicação das linhas 8, 9 ,10 e 11:
XHTML – código básico comentado
9
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
tagTag, na língua inglesa, significa etiqueta, rótulo. As tags são marcações que definem a forma como o texto e outros elementos da página vão se apresentar.
Toda tag XHTML começa com um sinal de menor < e acaba com um sinal de maior > e sempre é escrita com letras minúsculas. Existem tags de abertura e tags de fechamento. Todas as tags devem ser fechadas, ou seja, devem incluir uma tag de fechamento ao final
Para reconhecer uma tag de fechamento, localize a barra / após o sinal de menor <Exemplo: <p> ... </p>
Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado pelo navegador de acordo com a finalidade da tag. Tags também podem conter atributos e valores, e sua ordem de leitura é sempre:
<tag atributo 1= "valor 1" atributo 2= "valor 2" atributo 3= "valor 3" >
Algumas tags, entretanto, não têm fechamento. São conhecidas como tags vazias, e devem terminar com um espaço em branco e uma barra inclinada à direita /, como, por exemplo: <br />. Este espaço depois da barra torna a tag compatível com versões mais antigas dos navegadores.
10
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Cabeçalho <head> ... </head>
O cabeçalho é a primeira parte do código e possui todas as informações que, apesar da maioria não ser visível para o usuário, facilitam a localização do site, bem como suas características.
O cabeçalho é delimitado pelas tags <head> ... </head>
Dentro do cabeçalho encontram-se diversas tags de informação, como:
•Título •Palavras-chave •Descrição•Codificação de caracteres do idioma adotado•Linguagem natural do idioma•Autor•Tipo de acesso dos mecanismos de busca (robôs)•Classificação etária
11
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Essas "tags" contêm o cabeçalho de um arquivo XHTML, onde podem ser definidos o título (title) da janela, além de outras informações para facilitar a ação de busca dos robôs.
Robôs ou "search engines", são programas utilizados por sites de busca – como o Google, com o seu programa Googlebot – que varrem a internet em busca de páginas para compor seu banco de dados de pesquisa.
Cabeçalho <head> ... </head>(continuação)
12
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
O título é gerado dentro das tags <title> ... </title> delimitando seu início e seu fim.
Esta informação aparecerá para o usuário na barra de títulos do navegador (canto superior esquerdo da página), auxiliando o usuário na identificação dos sites pelos quais navega.
<title> Aula de XHTML – 1ª página! </title>
Cabeçalho (tags de informação)
Título
13
Palavras-chave são explicitadas por meio da tag <meta />
Ao inserir palavras-chave no cabeçalho do código fonte, os robôs de busca encontrarão com facilidade as informações pertinentes ao site. Isto permitirá que os acessos ao site aumentem gradativamente.
Para definir palavras-chave para uma página, o atributo http-equiv da tag <meta /> deve receber o valor "Keywords", o mesmo ocorre para o atributo name.
Já as palavras-chave vinculadas à página devem estar declaradas dentro do atributo content. Por exemplo, a página de um minimercado que define as palavras-chave: cereais, carnes e laticínios, teria uma tag <meta /> como a descrita abaixo:
<meta http-equiv="Keywords" name="Keywords" content="cereais, carnes, laticínios" />
Palavras-chave
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Cabeçalho (tags de informação)
14
A descrição do site também é inserida a partir da tag <meta />
Ao inserir a descrição no cabeçalho do código fonte, os robôs de busca encontrarão com mais facilidade as informações que descrevem características do site.
Para definir descrição para uma página, o atributo http-equiv da tag <meta /> deve receber o valor "Description", o mesmo ocorre para o atributo name.
Já a descrição vinculada à página deve estar declarada dentro do atributo content.
Por exemplo, a mesma página do minimercado, teria uma tag <meta /> como a descrita abaixo:
<meta http-equiv="Description" name="Description" content="minimercado, compras pela Internet" />
Descrição
Cabeçalho (tags de informação) Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
15
A codificação dos caracteres também é inserida a partir da tag <meta />
Esta tag indica o tipo de dado que será enviado ao navegador, declarando a linguagem natural do documento.
Por exemplo, se o documento é do tipo "texto/html", com acentuações da língua portuguesa, o conjunto de caracteres Windows-1252 é o que melhor se aplica, como no exemplo abaixo:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
Codificação de caracteres do idioma adotado
Cabeçalho (tags de informação) Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
16
A linguagem natural do(s) idioma(s) adotado(s) também é inserida a partir da tag <meta />
Para informar a um motor de busca que se trata de um documento que utiliza os idiomas português (Brasil), inglês (americano) e francês, deve-se inserir a linha abaixo:
<meta http-equiv="Content-language" content="pt-br, en-US , fr" />
Linguagem natural do(s) idioma(s)
Cabeçalho (tags de informação) Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
17
O nome do autor do documento XHTML também é inserido por meio da tag <meta />
Ao inserir o nome do autor no cabeçalho do código-fonte, assegura ao autor receber os créditos pela criação da página; se necessário for, esta tag facilita aos mecanismos de busca encontrar referências ao nome do designer responsável. É uma boa estratégia de marketing definir esta tag utilizando seu nome.
Para definir o nome do autor de uma página, o atributo name da tag <meta /> deve receber o valor "author", já o atributo content deve receber o nome do autor.
<meta name="author" content="nome do autor" />
Autor
Cabeçalho (tags de informação) Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
18
O conteúdo desta meta tag informa o tipo de acesso que os mecanismos de busca (robôs) podem ter em relação à sua página:
• index,follow: indexe a página e siga todos os links da página
• all: o mesmo que "index,follow"
• noindex,follow: não indexe a página; siga os links da página.
• index,nofollow: indexe a página; não siga os links da página.
• noindex,nofollow: não indexe a página, nem siga os seus links.
• none: o mesmo que "noindex,nofollow".
• noimageindex: utilizado com o Altavista, evita que as imagens da página sejam indexadas, mas o texto pode ser indexado.
<meta name="robots" content="all" />
Tipo de acesso dos mecanismos de busca (robôs)
Cabeçalho (tags de informação) Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
19
<?xml version="1.0" encoding="windows-1252" ?><!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> Primeira página XHTML! </title> <meta http-equiv="Keywords" name= "Keywords" content="XHTML, UEZO, web,w3c" /> <meta http-equiv="Description" name= "Description" content="Disciplina XHTML. " /> <meta http-equiv="Content-Type" content= "text/html;charset=windows-1252" /> <meta http-equiv="Content-language" content="pt-br" /> <meta name="author" content="meu nome" /> <meta name="robots" content="all" /> <meta name="rating" content="general" /> </head> <body>
<p> Minha primeira página em XHTML</p> </body></html>
Exercitando o código XHTML Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
20
Como fazer a 1ª página XHTML
Passo a passo:
1.Abra o programa Notepad++2.Copie o código do slide anterior e cole no Notepad++3.No menu superior "Linguagem" selecione a letra H e a opção HTML4.Verifique se o código ficou colorido, com as tags e seus respectivos atributos e valores5.Salve com o nome de teste_1.html6.Certifique-se de que esteja salvando na extensão html, pois ela atende ao XHTML7.Vá até o diretório aonde foi salvo o arquivo8.Dê um clique neste arquivo e veja a página ser executada pelo navegador9.Na página aparecerá a frase "Minha primeira página em XHTML" sobre um fundo branco e com a frase “Primeira página XHTML!" na barra de títulos10.As tags que serão aprendidas nas próximas aulas irão, gradativamente, melhorar a página.
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
21
A página no navegador Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
22
Validação da página XHTML na W3C
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Para validar sua página XHTML, acesse o site de validação da W3C, através do endereço: http://validator.w3.org
Clique em "Validate by Direct Input" e, no campo de texto cole o código da sua página (tente a partir do código gerado na aula anterior).
Clique no botão "Check"
23
Validação - continuação
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
24
Validação - continuação
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
25
Validação - continuação
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
26
Validação - continuação
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
27
Ao final da página, o validador exibirá o código com o ícone que demonstra que sua página segue os padrões da W3C (é um selo de qualidade). Copie esta parte do código e cole no body para executar a imagem do seu selo W3C
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Validação - continuação
28
Se o validador encontrar algum erro, gerará um relatório no qual aponta as soluções possíveis.
Validação - continuação
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
29
Ao baixar a barra de rolagem, ao final da página, estarão descritos os erros e suas localizações (linhas e colunas). Assim que forem corrigidas, será possível revalidar o código no botão revalidate.
Validação - continuação
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
30
Para validar suas páginas, utilize navegadores como "Mozilla Firefox" ou "Opera", pois, como a própria página de validação da W3C observa, esta operação pode não funcionar com o Internet Explorer.
Validação - continuação
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
31
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
O body é a principal parte do código para uma página web. Nele estão as tags de conteúdo, que são totalmente visíveis para o usuário, com exceção apenas para a tag comentário.
As tags de conteúdo ficam entre as tags <body> ... </body>
Esta parte do código possui:-tags de bloco (block elements), as quais delimitam um conteúdo colocado dentro do bloco.
Toda tag de bloco envia uma quebra de linha após o fechamento
-tags em linha (inline elements), após seu fechamento, não há quebra de linha.
OBS: Para efeito de validação, toda tag em linha precisa estar delimitada por uma tag de bloco.
Corpo <body> ... </body>
32
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)
Tags de bloco Resultado
<p> ... </p> Parágrafo
<div> ... </div> Divisão
<hn> ... </hn> Cabeçalho
<pre> ... </pre> Pré-formatação
<br /> Quebra de linha
<hr /> Linha horizontal
Dentro do body encontram-se várias tags de conteúdo, veja alguns exemplos:
Tags em linha Resultado
<em> ... </em> Itálico
<sub> ... </sub> Subscrito
<a> ... </a> Link
<ol> ... </ol> Lista ordenada
<img /> Imagem
<form> ... </form> Formulário
<strong> ... </strong> Negrito
<sup> ... </sup> Sobrescrito
<table> ... </table> Tabela
33
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Parágrafo <p> ... </p>
Utiliza-se a tag <p> ... </p> para inserir um bloco de texto como um parágrafo:
<?xml version="1.0" encoding="iso-8859-1" ?><!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>Parágrafos!</title> </head> <body>
<p>Esta linha é um parágrafo.</p><p>Estas outras linhas
também formam um parágrafo.</p> </body></html>
34
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Parágrafo <p> ... </p>
35
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Divisão <div> ... </div>
Utiliza-se a tag <div> ... </div> para inserir um bloco de informações (tabela, imagem)
<?xml version="1.0" encoding="iso-8859-1" ?><!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> Divisões </title> </head> <body>
<div> <img alt="por do sol" src="sol.gif" /> </div>
</body></html>
36
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Divisão <div> ... </div> - continuação
37
Pode-se utilizar o elemento <hn >...</hn> (onde a letra n corresponde a um número de "1" a "6") para inserir título no corpo do documento.
Quanto maior o número, menor será o tamanho do cabeçalho, ou título do texto.
Veja o código no slide seguinte:
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Cabeçalho (header) <hn> ... </hn>
38
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Cabeçalho (header) <hn> ... </hn> continuação
<?xml version="1.0" encoding="iso-8859-1" ?><!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" lang="pt-br" >
<head><title> Cabeçalho hn </title>
</head><body>
<h1>Utilizando o header (cabeçalho) "h1"</h1><h2>Utilizando o header (cabeçalho) "h2"</h2><h3>Utilizando o header (cabeçalho) "h3"</h3><h4>Utilizando o header (cabeçalho) "h4"</h4><h5>Utilizando o header (cabeçalho) "h5"</h5><h6>Utilizando o header (cabeçalho) "h6"</h6>
</body></html>
39
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Cabeçalho (header) <hn> ... </hn> - continuação
40
Este elemento indica que todo espaço em branco delimitado por <pre> ... </pre> tem relevância semântica e deve ser considerado. Por exemplo, em um documento XHTML escrever:
<p>Esta linha é um parágrafo</p>
ou escrever:
<p> Esta linha é um parágrafo</p>
faz com que a impressão do texto se dê a partir da coluna mais à esquerda do navegador, ou seja, não importando como se escreva, os espaços em branco são desconsiderados. Porém, delimitar o texto com <pre> ... </pre> faz com que a impressão passe a considerar os espaços em branco.
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Pré-formatação <pre> ... </pre>
41
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)
<?xml version="1.0" encoding="iso-8859-1" ?><!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>Comentários!</title></head><body> <p><p> sem espaço em branco.</p> <p> <p> com espaço em branco.</p> <pre><pre> sem espaço em branco.</pre> <pre> <pre> com espaço em branco.</pre></body></html>
Pré-formatação <pre> ... </pre>
42
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Pré-formatação <pre> ... </pre>
43
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Quebra de linha <br />
Utiliza-se o elemento "<br / >" para causar uma quebra de linha.
No exemplo anterior, as frases do segundo parágrafo são escritas numa mesma linha, apesar de estarem dispostas em linhas diferentes.
Para que o navegador produza exatamente o que vemos no documento, é preciso alterar o trecho do parágrafo com mais de uma linha, inserindo, ao final da primeira linha, o elemento "<br />".
44
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Quebra de linha <br /> - continuação
O código anterior foi modificado para:
<?xml version="1.0" encoding="iso-8859-1" ?><!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>Parágrafos!</title> </head> <body>
<p>Esta linha é um parágrafo.</p><p>Estas outras linhas <br />
também formam um parágrafo.</p> </body></html>
Faz com que o navegador efetue uma quebra de linha ao final da segunda frase, fazendo com que cada frase do parágrafo seja visualizada em linhas diferentes.
45
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Quebra de linha <br /> - continuação
46
Comentário em XHTML <!-- ... -->
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)
Utiliza-se o elemento <!-- ... --> para definir um comentário. O que estiver escrito dentro de <!-- ... --> será ignorado pelo navegador, não causando efeito algum na construção da página.
<?xml version="1.0" encoding="iso-8859-1" ?><!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>Comentários!</title> </head> <body>
<!-- Esta linha é um comentário. Não aparece no navegador. --><p>Esta linha aparece no navegador.</p>
</body></html>
47
Âncora <a> ... </a>
O elemento âncora permite a utilização do atributo "href" para indicar que uma outra URL será acessada quando o usuário clicar no(s) elemento(s) que estiver(em) definido(s) entre "<a>" e "</a>".
<?xml version="1.0" encoding="iso-8859-1" ?><!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>Hiperlink</title> </head> <body> <p>
<a href = "http://www.estacio.br" > Universidade Estácio de Sá </a> </p> </body></html>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)
48
Não incluir "http://www." no parâmetro do atributo "href" pode causar um erro no acesso ao endereço (o que não acontece quando você digita o endereço de forma incompleta na barra de endereços; neste caso, o navegador completa o endereço automaticamente, mas não o faz quando o endereçamento parte do seu código):
Errado: <a href = "uezo.rj.gov.br"> UEZO /a>
Errado: <a href = "www.uezo.rj.gov.br"> UEZO </a>
Certo: <a href = "http://www.uezo.rj.gov.br"> UEZO </a>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Observações:
Âncora <a> ... </a>
Corpo (tags de conteúdo)
49
Um elemento âncora pode apontar para um endereço eletrônico (email), fazendo com que um clique no texto ancorado "invoque" o aplicativo padrão de email com o endereço especificado:
<a href="mailto:nome@dominio.com.br >Fale conosco</a>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Observações (continuação)
Âncora <a> ... </a>
Corpo (tags de conteúdo)
50
Todo elemento em XHTML pode conter uma identificação (atributo ID), que deve ser único no documento. O uso deste atributo permite a uma âncora referenciar um trecho do documento. No exemplo abaixo, clicar no trecho "Servidor WEB":
<a href="#t1">Servidor WEB</a>
Faz com que o navegador vá ao elemento cuja identificação (id) é igual a "t1", passando a exibir as informações contidas a partir dele:
<h5 id="t1">Servidor WEB</h5>
Já o trecho:
<a href="#topo">Para retornar ao topo, clique aqui!</a>
referencia o elemento cuja identificação (id) é igual a "topo":
<h2 id="topo">Programando para Internet com XHTML</h2>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Observações (continuação)
Âncora <a> ... </a>
Corpo (tags de conteúdo)
51
Experimente abrir o documento links_internos.html com o auxílio do navegador.
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Observações (continuação)
Âncora <a> ... </a>
Corpo (tags de conteúdo)
52
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Observações (continuação)
Âncora <a> ... </a>
Corpo (tags de conteúdo)
53
Este elemento cria uma linha horizontal (horizontal row) na página. Por exemplo:
<?xml version="1.0" encoding="iso-8859-1" ?><!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>Sobrescrito!</title> </head> <body> <p>A temperatura de ebulição da água pura é: 100<sup >o</sup>C.</p> <hr /> <p>A temperatura de congelamento da água pura é: 4<sup >o</sup>C.</p> </body></html>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Linha Horizontal <hr />
54
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Linha Horizontal <hr />
55
O elemento <dl>...</dl> cria uma "lista de definição", composta de duas partes: um termo (<dt> ... </dt>) e uma descrição (<dd> ... </dd>).
Veja o exemplo no arquivo:
listadef.html
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Lista de definição <dl> ... </dl>
56
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Lista de definição <dl> ... </dl>
57
O elemento <ol>...</ol> define uma "lista ordenada", ou seja, lista cujos itens são apresentados contendo uma ordem.
Veja o exemplo no arquivo:
lista_ol.html
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Lista ordenada <ol> ... </ol>
58
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Lista ordenada <ol> ... </ol>
59
Este elemento define uma "lista não ordenada", ou seja, na qual seus itens apenas são visualizados, sem haver uma ordem especificada.
Veja o exemplo no arquivo:
lista_ul.html
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Lista não ordenada <ul> ... </ul>
60
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Lista não ordenada <ul> ... </ul>
61
O elemento "<img />" insere uma imagem no documento. É obrigatório o uso de dois atributos: - alt "texto": texto alternativo; aparece no lugar da imagem, caso a mesma não possa ser carregada, ou não exista; também aparece quando a imagem é carregada normalmente, e você posiciona o cursor do mouse sobre a imagem (este efeito não ocorre em todos os navegadores);
- src "imagem" : especifica o nome da imagem (e onde localizá-la, caso seja em local diferente de onde a página está hospedada).
Supondo que exista a imagem "sol_nascente.gif" no diretório onde está hospedada a página, insere-se uma imagem em um documento fazendo:
<img alt="Sol nascente em Guaratiba - RJ" src= "sol_nascente.gif" />
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Imagem <img />
62
E o código:
<?xml version="1.0" encoding="iso-8859-1" ?><!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>Imagem</title>
</head><body> <p>
<img alt="alimentos saudáveis" src="alimentos.jpg" /></p></body>
</html>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Imagem <img /> - continuação
63
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Imagem <img /> - continuação
64
Este elemento define uma tabela no documento.
Uma tabela é uma estrutura que contém um corpo <tbody>...</tbody>, o qual possui linhas <tr>...</tr>, (ou table row) e colunas de dados <td>...</td>, (ou table data), formando uma célula.
Cada coluna pode conter uma célula de cabeçalho <th>...</th>. Opcionalmente, pode especificar, também, uma legenda <caption>...</caption>, um cabeçalho da tabela <thead>...</thead> e um rodapé <tfoot>...</tfoot>.
Observação: O elemento "<tfoot>...</tfoot>" deve ser definido antes de "<tbody>", para permitir ao navegador imprimir o rodapé antes das células, que podem ser muitas.
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Tabela <table> ... </table>
65
Por exemplo, para criar uma legenda, um cabeçalho e um rodapé faz-se: - Legenda: <caption>Relatório de atividades profissionais</caption>
- Cabeçalho: <thead><tr><td>Atividades de 2010</td></tr></thead>
- Rodapé: <tfoot><tr><td>Fonte: empresa </td></tr></tfoot>
Veja o exemplo no arquivo: tabela.html
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Tabela <table> ... </table> - continuação
66
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Tabela <table> ... </table> - continuação
67
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Tabela <table> ... </table> - continuação
68
Este elemento define um formulário no documento. Por meio de seus campos, o usuário pode efetuar entrada de dados, enviando-os por e-mail para o destinatário especificado (o atributo "action" deve ser igual a "mailto:email@provedor.com.br", onde "email" e "provedor" devem ser substituídos pelos seus dados).
Há outra forma de se tratar esses dados (utilizando linguagens de script, como PHP ou ASP), onde os valores dos campos podem será atribuídos a variáveis.
O formulário deve definir um botão do tipo "submit", o qual submeterá os dados ao destino especificado. Opcionalmente, pode-se definir, também, um botão do tipo "reset", o qual apaga todos os campos por ventura preenchidos.
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form>
69
Há dois métodos de se enviar dados para o servidor: "get" e "post".
O método "get" envia os dados juntamente com a URI especificada no atributo "action", utilizando o caracter ponto de interrogação como separador, por exemplo:
http://www.loja.com/carrinho.asp?categoria=12&er;prod=123
(observe o uso da entitie "&er;" para representar o caracter "&", muito utilizado por programadores, mas desaconselhado pela W3C).
Não podem ser muitos dados, pois há limitação de caracteres no envio por "get".
Já o método "post", envia os dados no corpo do formulário. Veja o exemplo no arquivo:
formulario.html
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
70
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
71
Para enviar os dados por email: <form action="mailto: ...>“
<form id="form" action="mailto:meu_email@meuprovedor.com.br" method="post" enctype="text/plain" >
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
72
Campo de texto de uma única linha: <input type="text" ... />
É utilizado para entrada de dados como: nome, endereço, e-mail, etc.
<p> <strong>Nome Completo: </strong> <input type="text" name="nome" size="50" /></p>
O atributo "name" associa um nome ao campo. Este nome recebe o conteúdo do campo ao se clicar o botão "submit".
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
73
Campo de entrada de senha: <input type="password"... />
Os caracteres digitados neste campo são substituídos por asterisco (*). O atributo "name" associa um nome ao campo. Este nome recebe o conteúdo do campo ao se clicar o botão "submit".
<p> <strong>Senha: </strong> <input type="password" name="passwd" size="50" /></p>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
74
Botão de opção (exclusivo): <input type="radio" ... />
O atributo "name" de todos os elementos de um mesmo grupo de botões de rádio (ou botões de opção) deve ser o mesmo, para que o clique num campo desmarque o outro campo. Este atributo associa um nome que contém o valor definido no atributo "value" da opção selecionada ao se clicar o botão "submit".
<p> <strong>Sexo </strong> <input type="radio" name="sexo" value="f" />Feminino <input type="radio" name="sexo" value="m" />Masculino</p>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
75
Caixa de seleção: <input type="checkbox" ... /> O atributo "name" de todos os elementos de um mesmo grupo de botões de rádio (ou botões de opção) deve ser o mesmo. Este atributo associa um nome que contém o(s) valor(es) definido(s) no atributo "value" da(s) opção(ões) selecionada(s) ao se clicar o botão "submit".
<p> <strong>Áreas de interesse</strong> <input type="checkbox" name="areaInteresse" value="i" />Internet <input type="checkbox" name="areaInteresse" value="b" />Banco de Dados <input type="checkbox" name="areaInteresse" value="a" />Análise de Sistemas <input type="checkbox" name="areaInteresse" value="o" />Outras Áreas</p>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
76
Lista de seleção: <select>...</select> (com <option>...</option> ) Define uma lista de seleção. O elemento "<option>...</option>" define quais opções comporão a lista. O atributo "name" associa um nome que contém o valor definido no atributo "value" da opção selecionada ao se clicar o botão "submit".
<p> <strong>Faixa de Idade</strong> <select name="faixaIdade"> <option value="16a19">16 a 19 anos</option> <option value="20a22">20 a 22 anos</option> <option value="23a25">23 a 25 anos</option> <option value="26OuMais">26 ou mais</option> </select></p>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
77
Lista de seleção com opções agrupadas:
<select>...</select> (com <optgroup>...</optgroup>)
Define uma lista de seleção. O elemento "<optgroup>...</optgroup>" é utilizado para agrupar as opções. O atributo "name" associa um nome que contém o valor definido no atributo "value" da opção selecionada ao se clicar o botão "submit".
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
78
<p> <select name="livro2" size="5"> <optgroup label="Nomes começados por "C""> <option label="cdrom">CD-ROM</option> <option label="cpp">C++: programar é fácil</option> <option label="xhtml">XHTML</option> <option label="bd">Como modelar Banco de Dados</option> </optgroup> <optgroup label="Nomes começados por "D""> <option label="dbdesign">Database design</option> <option label="designweb">WEB-designers</option> <option label="css">Descobrindo o CSS</option> </optgroup> </select></p>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
79
Campo de texto de várias linhas: <textarea>...</textarea> A quantidade de linhas visíveis é definida no atributo "rows", e a quantidade de colunas no atributo "cols". O atributo "name" associa um nome que contém o valor do campo ao se clicar o botão "submit". <p>
Digite sua observação: <br />
<textarea name="obs" rows="7" cols="30">
</textarea>
</p>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
80
Botão submit: <input type="submit" … />
Cria um botão que, ao ser clicado, envia os dados do formulário ao destino.
<p>
<input type="submit" value="Enviar os Dados" />
</p>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
81
Botão reset: <input type="reset"... />
Cria um botão que, ao ser clicado, apaga todos os campos do formulário e os restaura à condição inicial.
<p>
<input type="reset" value="Limpar Campos" /></p>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
82
Observação: Para utilizar uma imagem como botão "submit " da seguinte forma: <p>
<input type="image" src=“botão enviar.jpg" alt="Enviar dados" />
</p>
Neste caso, o tipo (type) é "image", "src" define onde encontrar o arquivo de imagem e "alt" é um texto alternativo; aparece no lugar da imagem, caso a mesma não possa ser carregada, ou não exista.
Ao clicar na imagem, as coordenadas são passadas ao destinatário da mensagem.
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
83
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação
84
Frames substituem o elemento <body> e dividem a janela do navegador em duas ou mais partes, sendo a cada uma conferida uma página diferente da outra, ou seja, pode-se visualizar várias páginas em uma mesma janela, cada página atuando de forma independente da outra. Isto permite o "rolamento" de uma parte da janela, enquanto a(s) outra(s) parte(s) fica(m) estática(s).
Porém, como frames estão em DESUSO (não são suportados pela XHTML 1.1, que é baseada na classificação "Strict", e serão substituídos por XFrames na XHTML 2.0), é preciso utilizar a classificação "Frameset" de XHTML, cujo DOCTYPE é:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Frameset//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Frameset <frameset> ... </frameset>
85
Para dividir uma janela em duas partes horizontais (rows) iguais, deve-se escrever, no documento, o seguinte: <frameset rows="50%,50%">
ou: <frameset rows="*,*“> onde o "*" define um tamanho relativo (como o tamanho total é 100%, cada "*" corresponde a 50%).
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Frameset <frameset> ... </frameset> - continuação
86
Para dividir a janela em duas partes horizontais, uma abrangendo 30% do tamanho total e a outra parte abrangendo 70%, deve-se escrever, no documento, o seguinte:
<frameset rows="30%,70%">
ou:
<frameset rows="30%,*">
Neste caso, o "*" corresponde a 70% (100% - 30%)
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Frameset <frameset> ... </frameset> - continuação
87
Para dividir a janela em duas partes verticais, utiliza-se o atributo "cols":
<frameset cols="50%,50%">
ou:
<frameset cols="*,*">
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Frameset <frameset> ... </frameset> - continuação
88
Da mesma forma, para dividir a janela em duas colunas, na proporção de 30% e 70%, deve-se escrever, no documento, o seguinte:
<frameset cols="30%,70%">
ou:
<frameset cols="30%,*"> Uma vez definido o layout da tela, atribui-se um documento a uma linha (ou coluna, se o atributo utilizado for "cols") por meio do atributo "<frame />".
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Frameset <frameset> ... </frameset> - continuação
89
Aproveitando os documentos já criados anteriormente (links_internos.html e formulario.html) e dividindo a janela em duas linhas (rows):
<?xml version="1.0" encoding="iso-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Frame</title></head> <frameset rows="30%,*">
<frame src="links_internos.html" /><frame src="formulario.html" />
</frameset></html>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Frameset <frameset> ... </frameset> - continuação
90
Dividindo um frame em dois ou mais frames:
A quantidade de frames utilizados deve ser igual à quantidade de redivisões que você efetuar num dado frame. Por exemplo, se você quiser redividir o primeiro frame em duas partes e o segundo frame em três partes:
arq2.html
arq1.html arq3.html
arq4.html
arq5.html
<frameset cols="40% , *"><frameset rows="35% , *">
<frame src= "arq1.html" /><frame src= "arq2.html" />
</frameset><frameset rows="35% , 35% , *">
<frame src= "arq3.html" /><frame src= "arq4.html" /><frame src= "arq5.html" />
</frameset> </frameset>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Frameset <frameset> ... </frameset> - continuação
91
<?xml version="1.0" encoding="iso-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Frame</title></head> <frameset cols="40% , *">
<frameset rows="35% , *"><frame src="lista_ol.html" /><frame src="lista_ul.html" />
</frameset><frameset rows="35% , 35% , *">
<frame src="lista_def.html" /><frame src="tabela.html" /><frame src="formulario.html" />
</frameset> </frameset> </html>
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Frameset <frameset> ... </frameset> - continuação
92
Profª Letícia Régis Di Maio
leticiaregisdimaio@gmail.com
Corpo (tags de conteúdo)Frameset <frameset> ... </frameset> - continuação
Recommended