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

Xhtml 2011 - atualizado

on

  • 2,160 views

 

Statistics

Views

Total Views
2,160
Views on SlideShare
2,123
Embed Views
37

Actions

Likes
0
Downloads
122
Comments
0

3 Embeds 37

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Xhtml   2011 - atualizado Xhtml 2011 - atualizado Presentation Transcript

  • 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=&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
  • 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:
  • 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= &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.
  • 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 &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)
  • 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 &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 )
  • 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]
  • 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]
  • 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]
  • 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]
    • 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]
  • <?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]
  • 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]
  • 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 &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;
  • Validação - continuação Profª Letícia Régis Di Maio [email_address]
  • Validação - continuação Profª Letícia Régis Di Maio [email_address]
  • Validação - continuação Profª Letícia Régis Di Maio [email_address]
  • 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 &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]
  • 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=&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>
  • 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=&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>
  • 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 &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>
  • 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>
  • 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=&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>
  • 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 &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;.
  • 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.
  • 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=&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>
  • Â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)
  • 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)
  • 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)
  • 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)
  • 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=&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 />
  • Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Linha Horizontal <hr />
  • 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>
  • 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 &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>
  • Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Lista ordenada <ol> ... </ol>
  • 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>
  • Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Lista não ordenada <ul> ... </ul>
  • 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 />
  • 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
  • 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 &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>
  • 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
  • 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 &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>
  • 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
  • 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=&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
  • 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
  • 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
  • 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
  • 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
  • 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
  •   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
  • <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
  • 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
  • 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
  • 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
  • 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
  • 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 &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>
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • <?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
  • Profª Letícia Régis Di Maio [email_address] Corpo ( tags de conteúdo) Frameset <frameset> ... </frameset> - continuação