Xhtml   2011 - atualizado
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,259
On Slideshare
2,221
From Embeds
38
Number of Embeds
3

Actions

Shares
Downloads
125
Comments
0
Likes
0

Embeds 38

http://materiais-online.blogspot.com.br 33
http://materiais-online.blogspot.com 4
http://materiais-online.blogspot.jp 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Profª Letícia Régis Di Maio [email_address] XHTML
  • 2. 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
  • 3. 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
  • 4. Profª Letícia Régis Di Maio [email_address] XHTML – código básico comentado Explicação da linha 1 <?xml version=&quot;1.0&quot; informa ao navegador que trata-se de um documento XML encoding=&quot;iso-8859-1&quot; ?> necessário para utilizar caracteres acentuados
  • 5. Profª Letícia Régis Di Maio [email_address] XHTML – código básico comentado
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
            • &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot; >
    • 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:
  • 6. Profª Letícia Régis Di Maio [email_address] Explicação da linha 4: XHTML – código básico comentado
  • 7. Profª Letícia Régis Di Maio [email_address] Explicação das linhas 5, 6 e 7: XHTML – código básico comentado
  • 8. Profª Letícia Régis Di Maio [email_address] Explicação das linhas 8, 9 ,10 e 11: XHTML – código básico comentado
  • 9. 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= &quot;valor 1&quot; atributo 2= &quot;valor 2&quot; atributo 3= &quot;valor 3&quot; > 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 [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
  • 11. Profª Letícia Régis Di Maio [email_address] Essas &quot;tags&quot; 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 &quot;search engines&quot;, 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 [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
  • 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 &quot;Keywords&quot;, 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=&quot;Keywords&quot; name=&quot;Keywords&quot; content=&quot;cereais, carnes, laticínios&quot; /> Palavras-chave Profª Letícia Régis Di Maio [email_address] 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 &quot;Description&quot;, 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=&quot;Description&quot; name=&quot;Description&quot; content=&quot;minimercado, compras pela Internet&quot; /> Descrição Cabeçalho ( tags de informação ) Profª Letícia Régis Di Maio [email_address]
  • 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 &quot;texto/html&quot;, 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=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1252&quot; /> Codificação de caracteres do idioma adotado Cabeçalho ( tags de informação ) Profª Letícia Régis Di Maio [email_address]
  • 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=&quot;Content-language&quot; content=&quot;pt-br, en-US , fr&quot; /> Linguagem natural do(s) idioma(s) Cabeçalho ( tags de informação ) Profª Letícia Régis Di Maio [email_address]
  • 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 &quot;author&quot;, já o atributo content deve receber o nome do autor. <meta name=&quot;author&quot; content=&quot;nome do autor&quot; /> Autor Cabeçalho ( tags de informação ) Profª Letícia Régis Di Maio [email_address]
  • 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 &quot;index,follow&quot;
      • 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 &quot;noindex,nofollow&quot;.
      • noimageindex : utilizado com o Altavista, evita que as imagens da página sejam indexadas, mas o texto pode ser indexado.
    •  
    • <meta name=&quot;robots&quot; content=&quot;all&quot; />
    Tipo de acesso dos mecanismos de busca (robôs) Cabeçalho ( tags de informação ) Profª Letícia Régis Di Maio [email_address]
  • 19. <?xml version=&quot;1.0&quot; encoding=&quot;windows-1252&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title> Primeira página XHTML! </title> <meta http-equiv=&quot;Keywords&quot; name= &quot;Keywords&quot; content=&quot;XHTML, UEZO, web,w3c&quot; /> <meta http-equiv=&quot;Description&quot; name= &quot;Description&quot; content=&quot;Disciplina XHTML. &quot; /> <meta http-equiv=&quot;Content-Type&quot; content= &quot;text/html;charset=windows-1252&quot; /> <meta http-equiv=&quot;Content-language&quot; content=&quot;pt-br&quot; /> <meta name=&quot;author&quot; content=&quot;meu nome&quot; /> <meta name=&quot;robots&quot; content=&quot;all&quot; /> <meta name=&quot;rating&quot; content=&quot;general&quot; /> </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]
  • 20. 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 &quot;Linguagem&quot; 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 &quot;Minha primeira página em XHTML&quot; sobre um fundo branco e com a frase “Primeira página XHTML!&quot; 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]
  • 21. A página no navegador Profª Letícia Régis Di Maio [email_address]
  • 22. 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 &quot; Validate by Direct Input &quot; 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 &quot;Check&quot;
  • 23. Validação - continuação Profª Letícia Régis Di Maio [email_address]
  • 24. Validação - continuação Profª Letícia Régis Di Maio [email_address]
  • 25. Validação - continuação Profª Letícia Régis Di Maio [email_address]
  • 26. Validação - continuação Profª Letícia Régis Di Maio [email_address]
  • 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 [email_address] 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 [email_address]
  • 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 [email_address]
  • 30. Para validar suas páginas, utilize navegadores como &quot; Mozilla Firefox &quot; ou &quot; Opera &quot;, 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]
  • 31. 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>
  • 32. 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
  • 33. 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=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <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 [email_address] Corpo ( tags de conteúdo) Parágrafo <p> ... </p>
  • 35. 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=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title> Divisões </title> </head> <body> <div> <img alt= &quot; por do sol &quot; src= &quot; sol.gif &quot; /> </div> </body> </html>
  • 36. Profª Letícia Régis Di Maio [email_address] 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 &quot;1&quot; a &quot;6&quot;) 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>
  • 38. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Cabeçalho (header) <hn> ... </hn> continuação <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;pt-br&quot; > <head> <title> Cabeçalho hn </title> </head> <body> <h1>Utilizando o header (cabeçalho) &quot;h1&quot;</h1> <h2>Utilizando o header (cabeçalho) &quot;h2&quot;</h2> <h3>Utilizando o header (cabeçalho) &quot;h3&quot;</h3> <h4>Utilizando o header (cabeçalho) &quot;h4&quot;</h4> <h5>Utilizando o header (cabeçalho) &quot;h5&quot;</h5> <h6>Utilizando o header (cabeçalho) &quot;h6&quot;</h6> </body> </html>
  • 39. Profª Letícia Régis Di Maio [email_address] 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 [email_address] Corpo ( tags de conteúdo) Pré-formatação <pre> ... </pre>
  • 41. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Comentários!</title> </head> <body> <p>&lt;p&gt; sem espaço em branco.</p> <p> &lt;p&gt; com espaço em branco.</p> <pre>&lt;pre&gt; sem espaço em branco.</pre> <pre> &lt;pre&gt; com espaço em branco.</pre> </body> </html> Pré-formatação <pre> ... </pre>
  • 42. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Pré-formatação <pre> ... </pre>
  • 43. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Quebra de linha <br /> Utiliza-se o elemento &quot;<br / >&quot; 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 &quot;<br />&quot;.
  • 44. 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=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <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 [email_address] Corpo ( tags de conteúdo) Quebra de linha <br /> - continuação
  • 46. 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=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <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 &quot;href&quot; para indicar que uma outra URL será acessada quando o usuário clicar no(s) elemento(s) que estiver(em) definido(s) entre &quot;<a>&quot; e &quot;</a>&quot;. <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Hiperlink</title> </head> <body> <p> <a href = &quot;http://www.estacio.br&quot; > Universidade Estácio de Sá </a> </p> </body> </html> Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo)
  • 48. Observações: Não incluir &quot;http://www.&quot; no parâmetro do atributo &quot;href&quot; 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 = &quot; uezo.rj.gov.br &quot;> UEZO /a> Errado : <a href = &quot; www.uezo.rj.gov.br &quot;> UEZO </a> Certo : <a href = &quot; http://www.uezo.rj.gov.br &quot;> UEZO </a> Profª Letícia Régis Di Maio [email_address] Âncora <a> ... </a> Corpo ( tags de conteúdo)
  • 49. Observações (continuação) Um elemento âncora pode apontar para um endereço eletrônico (email), fazendo com que um clique no texto ancorado &quot;invoque&quot; o aplicativo padrão de email com o endereço especificado: <a href=&quot;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)
  • 50. 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 &quot;Servidor WEB&quot;: <a href=&quot;#t1&quot;>Servidor WEB</a> Faz com que o navegador vá ao elemento cuja identificação (id) é igual a &quot;t1&quot;, passando a exibir as informações contidas a partir dele: <h5 id=&quot;t1&quot;>Servidor WEB</h5> Já o trecho: <a href=&quot;#topo&quot;>Para retornar ao topo, clique aqui!</a> referencia o elemento cuja identificação (id) é igual a &quot;topo&quot;: <h2 id=&quot;topo&quot;>Programando para Internet com XHTML</h2> Profª Letícia Régis Di Maio [email_address] Âncora <a> ... </a> Corpo ( tags de conteúdo)
  • 51. 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)
  • 52. Observações (continuação) Profª Letícia Régis Di Maio [email_address] Âncora <a> ... </a> Corpo ( tags de conteúdo)
  • 53. Este elemento cria uma linha horizontal ( horizontal row ) na página. Por exemplo: <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <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 />
  • 54. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Linha Horizontal <hr />
  • 55. O elemento <dl>...</dl> cria uma &quot;lista de definição&quot;, 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>
  • 56. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Lista de definição <dl> ... </dl>
  • 57. O elemento <ol>...</ol> define uma &quot;lista ordenada&quot;, 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>
  • 58. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Lista ordenada <ol> ... </ol>
  • 59. Este elemento define uma &quot;lista não ordenada&quot;, 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>
  • 60. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Lista não ordenada <ul> ... </ul>
  • 61. O elemento &quot;<img />&quot; insere uma imagem no documento. É obrigatório o uso de dois atributos: - alt &quot; texto &quot;: 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 &quot; imagem &quot; : 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 &quot; sol_nascente.gif &quot; no diretório onde está hospedada a página, insere-se uma imagem em um documento fazendo:   <img alt= &quot;Sol nascente em Guaratiba - RJ&quot; src= &quot;sol_nascente.gif&quot; /> Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Imagem <img />
  • 62. E o código: <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Imagem</title> </head> <body> <p> <img alt=&quot;alimentos saudáveis&quot; src=&quot;alimentos.jpg&quot; /> </p> </body> </html> Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Imagem <img /> - continuação
  • 63. Profª Letícia Régis Di Maio [email_address] 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 &quot;<tfoot>...</tfoot>&quot; deve ser definido antes de &quot;<tbody>&quot;, 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>
  • 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 [email_address] Corpo ( tags de conteúdo) Tabela <table> ... </table> - continuação
  • 66. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Tabela <table> ... </table> - continuação
  • 67. Profª Letícia Régis Di Maio [email_address] 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 &quot;action&quot; deve ser igual a &quot; mailto:email@provedor.com.br &quot;, onde &quot; email &quot; e &quot; provedor &quot; 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 &quot; submit &quot;, o qual submeterá os dados ao destino especificado. Opcionalmente, pode-se definir, também, um botão do tipo &quot; reset &quot;, 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>
  • 69. Há dois métodos de se enviar dados para o servidor: &quot; get &quot; e &quot; post &quot;. O método &quot;get&quot; envia os dados juntamente com a URI especificada no atributo &quot;action&quot;, 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 &quot;&amper;&quot; para representar o caracter &quot;&&quot;, muito utilizado por programadores, mas desaconselhado pela W3C). Não podem ser muitos dados, pois há limitação de caracteres no envio por &quot;get&quot;. Já o método &quot;post&quot;, 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
  • 70. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação
  • 71. Para enviar os dados por email: <form action=&quot;mailto: ...>“   <form id=&quot;form&quot; action=&quot;mailto:meu_email@meuprovedor.com.br&quot; method=&quot;post&quot; enctype=&quot;text/plain&quot; > Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação
  • 72. Campo de texto de uma única linha: <input type=&quot;text&quot; ... />   É utilizado para entrada de dados como: nome, endereço, e-mail, etc.   <p> <strong>Nome Completo:&nbsp;</strong> <input type=&quot;text&quot; name=&quot;nome&quot; size=&quot;50&quot; /> </p> O atributo &quot; name &quot; associa um nome ao campo. Este nome recebe o conteúdo do campo ao se clicar o botão &quot; submit &quot;. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação
  • 73. Campo de entrada de senha: <input type=&quot;password&quot;... />   Os caracteres digitados neste campo são substituídos por asterisco (*). O atributo &quot;name&quot; associa um nome ao campo. Este nome recebe o conteúdo do campo ao se clicar o botão &quot;submit&quot;.   < p> <strong>Senha:&nbsp;</strong> <input type=&quot;password&quot; name=&quot;passwd&quot; size=&quot;50&quot; /> </p> Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação
  • 74. Botão de opção (exclusivo): <input type=&quot;radio&quot; ... />   O atributo &quot;name&quot; 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 &quot;value&quot; da opção selecionada ao se clicar o botão &quot;submit&quot;.   <p> <strong>Sexo&nbsp;</strong> <input type=&quot;radio&quot; name=&quot;sexo&quot; value=&quot;f&quot; />Feminino <input type=&quot;radio&quot; name=&quot;sexo&quot; value=&quot;m&quot; />Masculino </p> Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação
  • 75. Caixa de seleção: <input type=&quot;checkbox&quot; ... />   O atributo &quot;name&quot; 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 &quot;value&quot; da(s) opção(ões) selecionada(s) ao se clicar o botão &quot;submit&quot;.   <p> <strong>Áreas de interesse</strong> <input type=&quot;checkbox&quot; name=&quot;areaInteresse&quot; value=&quot;i&quot; />Internet <input type=&quot;checkbox&quot; name=&quot;areaInteresse&quot; value=&quot;b&quot; />Banco de Dados <input type=&quot;checkbox&quot; name=&quot;areaInteresse&quot; value=&quot;a&quot; />Análise de Sistemas <input type=&quot;checkbox&quot; name=&quot;areaInteresse&quot; value=&quot;o&quot; />Outras Áreas </p> Profª Letícia Régis Di Maio [email_address] 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 &quot;<option>...</option>&quot; define quais opções comporão a lista. O atributo &quot;name&quot; associa um nome que contém o valor definido no atributo &quot;value&quot; da opção selecionada ao se clicar o botão &quot;submit&quot;.   <p> <strong>Faixa de Idade</strong> <select name=&quot;faixaIdade&quot;> <option value=&quot;16a19&quot;>16 a 19 anos</option> <option value=&quot;20a22&quot;>20 a 22 anos</option> <option value=&quot;23a25&quot;>23 a 25 anos</option> <option value=&quot;26OuMais&quot;>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
  • 77.   Lista de seleção com opções agrupadas: <select>...</select> (com <optgroup>...</optgroup> ) Define uma lista de seleção. O elemento &quot; <optgroup>...</optgroup> &quot; é utilizado para agrupar as opções. O atributo &quot;name&quot; associa um nome que contém o valor definido no atributo &quot;value&quot; da opção selecionada ao se clicar o botão &quot;submit&quot;.   Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação
  • 78. <p> <select name=&quot;livro2&quot; size=&quot;5&quot;> <optgroup label=&quot;Nomes começados por &quot;C&quot;&quot;> <option label=&quot;cdrom&quot;>CD-ROM</option> <option label=&quot;cpp&quot;>C++: programar é fácil</option> <option label=&quot;xhtml&quot;>XHTML</option> <option label=&quot;bd&quot;>Como modelar Banco de Dados</option> </optgroup> <optgroup label=&quot;Nomes começados por &quot;D&quot;&quot;> <option label=&quot;dbdesign&quot;>Database design</option> <option label=&quot;designweb&quot;>WEB-designers</option> <option label=&quot;css&quot;>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
  • 79. Campo de texto de várias linhas: <textarea>...</textarea>   A quantidade de linhas visíveis é definida no atributo &quot;rows&quot;, e a quantidade de colunas no atributo &quot;cols&quot;. O atributo &quot;name&quot; associa um nome que contém o valor do campo ao se clicar o botão &quot;submit&quot;.   <p> Digite sua observação: <br /> <textarea name=&quot;obs&quot; rows=&quot;7&quot; cols=&quot;30&quot;> </textarea> </p> Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação
  • 80. Botão submit: <input type=&quot;submit&quot; … />   Cria um botão que, ao ser clicado, envia os dados do formulário ao destino. <p> <input type=&quot;submit&quot; value=&quot;Enviar os Dados&quot; /> </p> Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação
  • 81. Botão reset: <input type=&quot;reset&quot; ... />   Cria um botão que, ao ser clicado, apaga todos os campos do formulário e os restaura à condição inicial.   <p> <input type=&quot;reset&quot; value=&quot;Limpar Campos&quot; /> </p> Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Formulário <form> ... </form> - continuação
  • 82. Observação: Para utilizar uma imagem como botão &quot;submit &quot; da seguinte forma:   <p> <input type=&quot;image&quot; src=“botão enviar.jpg&quot; alt=&quot;Enviar dados&quot; /> </p>   Neste caso, o tipo (type) é &quot;image&quot;, &quot;src&quot; define onde encontrar o arquivo de imagem e &quot;alt&quot; é 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
  • 83. Profª Letícia Régis Di Maio [email_address] 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 &quot;rolamento&quot; 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 &quot;Strict&quot;, e serão substituídos por XFrames na XHTML 2.0), é preciso utilizar a classificação &quot;Frameset&quot; de XHTML, cujo DOCTYPE é:   <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML; 1.0 Frameset//EN“ &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> Profª Letícia Régis Di Maio [email_address] 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=&quot;50%,50%&quot;> ou:   <frameset rows=&quot;*,*“>   onde o &quot;*&quot; define um tamanho relativo (como o tamanho total é 100%, cada &quot;*&quot; corresponde a 50%). Profª Letícia Régis Di Maio [email_address] 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=&quot;30%,70%&quot;> ou: <frameset rows=&quot;30%,*&quot;>   Neste caso, o &quot;*&quot; corresponde a 70% (100% - 30%) Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação
  • 87. Para dividir a janela em duas partes verticais, utiliza-se o atributo &quot;cols&quot;: <frameset cols=&quot;50%,50%&quot;> ou: <frameset cols=&quot;*,*&quot;> Profª Letícia Régis Di Maio [email_address] 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=&quot;30%,70%&quot;> ou: <frameset cols=&quot;30%,*&quot;>     Uma vez definido o layout da tela, atribui-se um documento a uma linha (ou coluna, se o atributo utilizado for &quot;cols&quot;) por meio do atributo &quot;<frame />&quot;. Profª Letícia Régis Di Maio [email_address] 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=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML; 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>   <head> <title>Frame</title> </head> <frameset rows=&quot;30%,*&quot;> <frame src=&quot; links_internos.html &quot; /> <frame src=&quot;formulario.html&quot; /> </frameset> </html> Profª Letícia Régis Di Maio [email_address] 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=&quot;40% , *&quot;> <frameset rows=&quot;35% , *&quot;> <frame src= &quot; arq1.html&quot; /> <frame src= &quot; arq2.html&quot; /> </frameset> <frameset rows=&quot;35% , 35% , *&quot;> <frame src= &quot;arq3.html&quot; /> <frame src= &quot;arq4.html&quot; /> <frame src= &quot;arq5.html&quot; /> </frameset> </frameset> Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação
  • 91. <?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML; 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>   <head> <title>Frame</title> </head> <frameset cols=&quot;40% , *&quot;> <frameset rows=&quot;35% , *&quot;> <frame src=&quot;lista_ol.html&quot; /> <frame src=&quot;lista_ul.html&quot; /> </frameset> <frameset rows=&quot;35% , 35% , *&quot;> <frame src= &quot; lista_def.html&quot; /> <frame src= &quot; tabela.html&quot; /> <frame src=&quot;formulario.html&quot; /> </frameset> </frameset> </html> Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação
  • 92. Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação