Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desenvolvimento para a Internet - Aula 04

849 views

Published on

  • Be the first to comment

Desenvolvimento para a Internet - Aula 04

  1. 1. Aula 4 – HTML / XHTML HyperLinks e Âncoras Prof. Leandro Rezende Carneiro de Mendonça, MSc.
  2. 2. HyperLinks <ul><li>Texto ou imagem que quando clicada conduz o navegador a um local diferente no mesmo documento ou em um documento diferente. </li></ul><ul><ul><li>Links Relativos : O caminho é construído a partir do diretório corrente do documento que contém o link. </li></ul></ul><ul><ul><li>Link Absoluto : O caminho é construído a partir do diretório raíz da estrutura do site. </li></ul></ul>
  3. 3. HyperLinks <ul><li><a href=” [endereço] # [nome da âncora] ”> Descrição do Link </a> </li></ul><ul><li><a name=” nome da âncora ”> Descrição do Link </a> </li></ul>
  4. 4. HyperLinks <ul><li>Exemplo de 2 páginas HTML que contém hyperlinks: </li></ul><ul><ul><li>2 páginas na mesmo diretório utilizando links relativos. </li></ul></ul>pag1.htm pag2.htm
  5. 5. Atividade <ul><li>Solução: </li></ul><ul><ul><li>Exemplo_Link_pag1.html </li></ul></ul><ul><ul><li>Exemplo_Link_pag2.html </li></ul></ul>pag1.htm pag2.htm
  6. 6. HyperLinks - Âncoras <ul><li>Criando uma âncora: </li></ul><ul><ul><li><a id=&quot; ancora1 &quot; name=&quot; ancora1 &quot;> Âncora 1 </a> </li></ul></ul>
  7. 7. HyperLinks - Âncoras <ul><li><a href=” [endereço do documento] # [nome da âncora] ”> Texto </a> </li></ul><ul><li><a href=”# [nome da âncora]” > Texto </a> </li></ul><ul><ul><li>Caso o link de destino seja o mesmo documento. </li></ul></ul>
  8. 8. HyperLinks - Âncoras <ul><li>Exemplo: </li></ul><ul><ul><li>Exemplo_Ancora.html </li></ul></ul>
  9. 9. HyperLinks <ul><li><a href=“ destino ”><img src=“ arquivo de imagem ”> Texto Descritivo </a> </li></ul><ul><li><a href=“mailto: endereço@dominio ”> Texto Descritivo </a> </li></ul>
  10. 10. HyperLinks <ul><li>Exemplo de Link em imagens e mailto: </li></ul><ul><ul><li>Exemplo_Link_imagem_mailto.html </li></ul></ul>
  11. 11. Informações <ul><li>W3C </li></ul><ul><ul><li>http://www.w3c.org </li></ul></ul><ul><li>Macromedia Dreamweaver </li></ul><ul><ul><li>http://www.macromedia.com </li></ul></ul><ul><li>Microsoft FrontPage </li></ul><ul><ul><li>http://www.microsoft.com </li></ul></ul><ul><li>NVU / N-View </li></ul><ul><ul><li>http:// www.nvu.com </li></ul></ul>
  12. 12. Perguntas? <ul><li>boolean duvida; </li></ul><ul><li>String pergunta=“”, resposta=“”; </li></ul><ul><li>Read (duvida); </li></ul><ul><li>while (duvida){ </li></ul><ul><li>Read (pergunta, resposta); </li></ul><ul><li>System.out.println (pegunta+resposta); </li></ul><ul><li>Read (duvida); </li></ul><ul><li>} </li></ul><ul><li>System.out.println (“Congratulações”); </li></ul><ul><li>System.exit (0); </li></ul>
  13. 13. Atividade <ul><li>Elaborar páginas HTML contendo o seu currículo vitae , para ser divulgado na Internet. </li></ul><ul><ul><li>OBS : Utilizar os recursos vistos anteriormente. </li></ul></ul>

×