Xhtml 2011 - atualizado

Profª Letícia Régis Di Maio [email_address] XHTML

Profª Letícia Régis Di Maio [email_address] XHTML é uma linguagem de marcação usada para transformar documentos de texto em páginas web. A sigla vem de E X tensible H yper T ext M arkup L anguage e sua tradução significa "Linguagem Extensível para Marcação de Hipertexto". Ela surgiu a partir do XML ( E X tensible M arkup L anguage), com as características (tags e atributos) do HTML 4.01. HTML é uma sigla inglesa para H yper T ext M arkup L anguage . 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 - W orld W ide W eb C onsortium – 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

Profª Letícia Régis Di Maio [email_address] 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

Profª Letícia Régis Di Maio [email_address] 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

Profª Letícia Régis Di Maio [email_address] 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 ( D ocument T ype D efinition ou DTD s) : 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:

Profª Letícia Régis Di Maio [email_address] Explicação da linha 4: XHTML – código básico comentado

Profª Letícia Régis Di Maio [email_address] Explicação das linhas 5, 6 e 7: XHTML – código básico comentado

Profª Letícia Régis Di Maio [email_address] Explicação das linhas 8, 9 ,10 e 11: XHTML – código básico comentado

Profª Letícia Régis Di Maio [email_address] tag Tag, 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.

Profª Letícia Régis Di Maio [email_address] 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

Profª Letícia Régis Di Maio [email_address] 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)

Profª Letícia Régis Di Maio [email_address] 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

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 [email_address] Cabeçalho ( tags de informação )

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

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 [email_address]

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 [email_address]

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 [email_address]

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 [email_address]

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

Como fazer a 1ª página XHTML Passo a passo: Abra o programa Notepad++ Copie o código do slide anterior e cole no Notepad++ No menu superior "Linguagem" selecione a letra H e a opção HTML Verifique se o código ficou colorido, com as tags e seus respectivos atributos e valores Salve com o nome de teste_1.html Certifique-se de que esteja salvando na extensão html, pois ela atende ao XHTML Vá até o diretório aonde foi salvo o arquivo Dê um clique neste arquivo e veja a página ser executada pelo navegador 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ítulos As tags que serão aprendidas nas próximas aulas irão, gradativamente, melhorar a página. Profª Letícia Régis Di Maio [email_address]

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

Validação da página XHTML na W3C Profª Letícia Régis Di Maio [email_address] 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"

Validação - continuação Profª Letícia Régis Di Maio [email_address]

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 [email_address] Validação - continuação

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 [email_address]

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 [email_address]

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 [email_address]

Profª Letícia Régis Di Maio [email_address] 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>

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Dentro do body encontram-se várias tags de conteúdo, veja alguns exemplos: 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 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

Profª Letícia Régis Di Maio [email_address] 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>

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Parágrafo <p> ... </p>

Profª Letícia Régis Di Maio [email_address] 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>

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Divisão <div> ... </div> - continuação

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 [email_address] Corpo ( tags de conteúdo) Cabeçalho (header) <hn> ... </hn>

Profª Letícia Régis Di Maio [email_address] 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>

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Cabeçalho (header) <hn> ... </hn> - continuação

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 [email_address] Corpo ( tags de conteúdo) Pré-formatação <pre> ... </pre>

Profª Letícia Régis Di Maio [email_address] 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>

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Pré-formatação <pre> ... </pre>

Profª Letícia Régis Di Maio [email_address] 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 />".

Profª Letícia Régis Di Maio [email_address] 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.

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Quebra de linha <br /> - continuação

Comentário em XHTML  Profª Letícia Régis Di Maio [email_address] 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>  <p>Esta linha aparece no navegador.</p> </body> </html>

Â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 [email_address] Corpo ( tags de conteúdo)

Observações: 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 [email_address] Âncora <a> ... </a> Corpo ( tags de conteúdo)

Observações (continuação) 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 [email_address] Âncora <a> ... </a> Corpo ( tags de conteúdo)

Observações (continuação) 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 [email_address] Âncora <a> ... </a> Corpo ( tags de conteúdo)

Observações (continuação) Experimente abrir o documento links_internos.html com o auxílio do navegador. Profª Letícia Régis Di Maio [email_address] Âncora <a> ... </a> Corpo ( tags de conteúdo)

Observações (continuação) Profª Letícia Régis Di Maio [email_address] Âncora <a> ... </a> Corpo ( tags de conteúdo)

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 [email_address] Corpo ( tags de conteúdo) Linha Horizontal <hr />

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Linha Horizontal <hr />

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 [email_address] Corpo ( tags de conteúdo) Lista de definição <dl> ... </dl>

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Lista de definição <dl> ... </dl>

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 [email_address] Corpo ( tags de conteúdo) Lista ordenada <ol> ... </ol>

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Lista ordenada <ol> ... </ol>

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 [email_address] Corpo ( tags de conteúdo) Lista não ordenada <ul> ... </ul>

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Lista não ordenada <ul> ... </ul>

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 [email_address] Corpo ( tags de conteúdo) Imagem <img />

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 [email_address] Corpo ( tags de conteúdo) Imagem <img /> - continuação

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Imagem <img /> - continuação

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 [email_address] Corpo ( tags de conteúdo) Tabela <table> ... </table>

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 [email_address] Corpo ( tags de conteúdo) Tabela <table> ... </table> - continuação

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Tabela <table> ... </table> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form>

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 Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

<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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação

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 [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset>

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 [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação

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 [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação

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 [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação

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 [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação

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 [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação

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 [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação

<?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 [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação

Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação

Xhtml 2011 - atualizado

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Xhtml 2011 - atualizado

Mais de Sergio Finamore

Xhtml 2011 - atualizado