xhtml 2011 - atualizado

1

Profª Letícia Régis Di Maio

[email protected]

XHTML

2


[email protected]

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


[email protected]

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


[email protected]

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


[email protected]


<!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


[email protected]

Explicação da linha 4:


7


[email protected]

Explicação das linhas 5, 6 e 7:


8


[email protected]

Explicação das linhas 8, 9 ,10 e 11:


9


[email protected]

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


[email protected]

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


[email protected]

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


[email protected]

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


[email protected]

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

[email protected]

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


[email protected]

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)


[email protected]

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


[email protected]

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)


[email protected]

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

[email protected]

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.


[email protected]

21

A página no navegador Profª Letícia Régis Di Maio

[email protected]

22

Validação da página XHTML na W3C


[email protected]

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"

http://validator.w3.org/

23

Validação - continuação


[email protected]

24



[email protected]

25



[email protected]

26



[email protected]

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


[email protected]


28

Se o validador encontrar algum erro, gerará um relatório no qual aponta as soluções possíveis.



[email protected]

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.



[email protected]

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.



[email protected]

31


[email protected]

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


[email protected]

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


[email protected]

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


[email protected]

Corpo (tags de conteúdo)Parágrafo <p> ... </p>

35


[email protected]

Corpo (tags de conteúdo)Divisão <div> ... </div>

Utiliza-se a tag <div> ... </div> para inserir um bloco de informações (tabela, imagem)


<title> Divisões </title> </head> <body>

<div> <img alt="por do sol" src="sol.gif" /> </div>

</body></html>

36


[email protected]

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:


[email protected]

Corpo (tags de conteúdo)Cabeçalho (header) <hn> ... </hn>

38


[email protected]

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


[email protected]

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.


[email protected]

Corpo (tags de conteúdo)Pré-formatação <pre> ... </pre>

41


[email protected]


<?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


[email protected]

Corpo (tags de conteúdo)Pré-formatação <pre> ... </pre>

43


[email protected]

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


[email protected]

Corpo (tags de conteúdo)Quebra de linha <br /> - continuação

O código anterior foi modificado para:


<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


[email protected]

Corpo (tags de conteúdo)Quebra de linha <br /> - continuação

46

Comentário em XHTML 


[email protected]


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.


<title>Comentários!</title> </head> <body>

<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>".


<title>Hiperlink</title> </head> <body> <p>

<a href = "http://www.estacio.br" > Universidade Estácio de Sá </a> </p> </body></html>


[email protected]


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>


[email protected]

Observações:



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:[email protected] >Fale conosco</a>


[email protected]

Observações (continuação)



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>


[email protected]




51

Experimente abrir o documento links_internos.html com o auxílio do navegador.


[email protected]




52


[email protected]




53

Este elemento cria uma linha horizontal (horizontal row) na página. Por exemplo:


<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>


[email protected]

Corpo (tags de conteúdo)Linha Horizontal <hr />

54


[email protected]

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


[email protected]

Corpo (tags de conteúdo)Lista de definição <dl> ... </dl>

56


[email protected]

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.


lista_ol.html


[email protected]

Corpo (tags de conteúdo)Lista ordenada <ol> ... </ol>

58


[email protected]

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.


lista_ul.html


[email protected]

Corpo (tags de conteúdo)Lista não ordenada <ul> ... </ul>

60


[email protected]

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" />


[email protected]

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>


[email protected]

Corpo (tags de conteúdo)Imagem <img /> - continuação

63


[email protected]

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.


[email protected]

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


[email protected]

Corpo (tags de conteúdo)Tabela <table> ... </table> - continuação

66


[email protected]


67


[email protected]


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 protected]", 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.


[email protected]

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&amper;prod=123

(observe o uso da entitie "&amper;" 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


[email protected]

Corpo (tags de conteúdo)Formulário <form> ... </form> - continuação

http://www.loja.com/carrinho.asp?categoria=12&amper;prod=123

70


[email protected]


71

Para enviar os dados por email: <form action="mailto: ...>“

<form id="form" action="mailto:[email protected]" method="post" enctype="text/plain" >


[email protected]


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".


[email protected]


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>


[email protected]


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>


[email protected]


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>


[email protected]


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>


[email protected]


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".


[email protected]


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>


[email protected]


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>


[email protected]


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>


[email protected]


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>


[email protected]


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.


[email protected]


83


[email protected]


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">


[email protected]

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%).


[email protected]

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%)


[email protected]


87

Para dividir a janela em duas partes verticais, utiliza-se o atributo "cols":

<frameset cols="50%,50%">

ou:

<frameset cols="*,*">


[email protected]


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 />".


[email protected]


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>


[email protected]


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>


[email protected]


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>


[email protected]


92


[email protected]


xhtml 2011 - atualizado

Documents