03 h iperlinks
•Transferir como PPT, PDF•
0 gostou•324 visualizações
1. O documento descreve elementos HTML como hiperlinks, URLs e atributos como href e name que definem hiperlinks dentro e fora de documentos. 2. São explicados hiperlinks para e-mail, ordenação de tabulação com tabindex, e destino de link com target. 3. São apresentados exemplos do elemento <a> para definir hiperlinks para documentos, URLs e e-mail.
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (18)
Semelhante a 03 h iperlinks
Semelhante a 03 h iperlinks (20)
Mais de Vasco Ferreira
Último
Último (20)
03 h iperlinks
- 3. Hiperlink • Destino de um link Outro recurso URL endere oç
- 4. Hiperlink • Endereço protocolo Localiza o doçã server Localiza oçã do recurso no server: // http www.istec.pt Web/index.html: // ftp www.istec.pt Web/index.html: // mailto macribey@istec.pt Subject=assunto: ? file computador caminho/index.html: //
- 5. Hipertexto Links e URLs • Link - Origem de uma ligação que pode conter: – Apontador para novo recurso: • Novo Documento html ou de outro tipo. • Novo Endereço URL • Endereço de E-Mail
- 6. Hiperlink •ELEMENTO <a> Define uma hiperligação que pode ser utilizada para aceder a outra página. Exemplo: <a href=“http://www.istec.pt”> Ir para o ISTEC </a>
- 7. Hiperlink •ELEMENTO <a> Define uma hiperligação que pode ser utilizada para aceder a outra página. Exemplo: <a href=“http://www.istec.pt”> O atributo href indica o destino da hiperliga o.çã
- 8. Hiperlink •ELEMENTO <a> Define uma hiperligação que pode ser utilizada para aceder a outra página. Exemplo: <a href=“http://www.istec.pt”> Quando se tratar de aceder a um novo URL o endere o deç destino deve ser sempre precedido de http:// Exerc cioí
- 9. Hiperlink •ELEMENTO <a> Define uma hiperligação que pode ser utilizada para aceder a um recurso do mesmo site: … <BODY> …texto… <P>Poderá encontrar mais conteúdo em <A href=“cap2.html”>Capítulo 2</A>. Veja também <A href=“../imgs/floresta.gif”>mapa da floresta encantada</A>. </BODY> Pressionando o rato sobre estes links os utilizadores podem aceder a estes recursos – uma imagem, uma p gina html.á
- 10. Hiperlink •ELEMENTO <a> Define uma hiperligação que pode ser utilizada para aceder a um recurso do mesmo site: … <BODY> …texto… <P>Poderá encontrar mais conteúdo em <A href=“cap2.html”>Capítulo 2</A>. Veja também <A href=“../imgs/floresta.gif”>mapa da floresta encantada</A>. </BODY> Quando se trata de recursos locais, basta indicar o nome e as pastas que cont mê os recursos. Exerc cioí
- 11. Hiperlinks •ELEMENTO <a> Links dentro do mesmo documento: O Destino final de uma hiperligação pode ser um local assinalado dentro do mesmo documento HTML, esse local designado por âncora, é identificado também com o elemento <a> mas com o atributo name.
- 12. Hiperlinks •ELEMENTO <a> Links dentro do mesmo documento: Exemplo: Criar uma tabela de conteúdos para um livro. Cada link acede a um novo capítulo do livro.
- 13. •ELEMENTO <a> … <h4><a href="#canto1">Canto I</a></h4> <h4><a href="#canto2">Canto II</a></h4> <h4><a href="#canto3">Canto III</a></h4> <h2><a name="canto1">Canto I</a></h2> <div>1<br/> As armas e os barões assinalados,<br/> Que da ocidental praia Lusitana,<br/> Por mares nunca de antes navegados,<br/> Passaram ainda além da Taprobana,<br/> Em perigos e guerras esforçados,<br/> Mais do que prometia a força humana,<br/> E entre gente remota edificaram<br/> Novo Reino, que tanto sublimaram;<br/> </div><br/> … <h2><a name="canto2">Canto II</a></h2> <div>2<br/> <a href=“#canto1> Canto1 </a> O s mbolo # indica queí Se trata de uma hiperliga oçã para dentro do mesmo Documento html.
- 14. •ELEMENTO <a> … <h4><a href="#canto1">Canto I</a></h4> <h4><a href="#canto2">Canto II</a></h4> <h4><a href="#canto3">Canto III</a></h4> <h2><a name="canto1">Canto I</a></h2> <div>1<br/> As armas e os barões assinalados,<br/> Que da ocidental praia Lusitana,<br/> Por mares nunca de antes navegados,<br/> Passaram ainda além da Taprobana,<br/> Em perigos e guerras esforçados,<br/> Mais do que prometia a força humana,<br/> E entre gente remota edificaram<br/> Novo Reino, que tanto sublimaram;<br/> </div><br/> … <h2><a name="canto2">Canto II</a></h2> <div>2<br/> <a name=“canto1> Canto I </a> Identifica um potencial ponto de destino de uma hiperliga o.çã EXERC CIOÍ
- 15. Hiperlink para e-mail •Definir uma hiperligação que permite enviar um e-mail <a href=“mailto:destino@correio.pt”> envia e-mail </a> Exerc cioí
- 16. Hiperlink para e-mail •Definir o campo Assunto da mensagem de e-mail: <a href=“mailto:destino@correio.pt?subject=nova %20mensagem”>envia e-mail</a> Exerc cioí
- 17. Hiperlink para e-mail •Definir o conteúdo do Corpo da mensagem de e-mail: <a href=“mailto:destino@correio.pt?subject=nova %20mensagem?body=por favor envie uma cópia do novo contrato”>envia e-mail</a> Exerc cioí
- 18. TabIndex •Ordem de tabulação <p>Experimente os nossos <a href=“bolos.html” tabindex=“3”>deliciosos bolos</a>.</p> Exerc cioí
- 19. Target • Utilizado quando se usavam frames – “_blank” – carrega o conteúdo numa nova janela – “nome frame” – carrega conteúdo na frame definida com este nome Exerc cioí
- 20. Hiperlink • Endereço protocolo Localiza o do servidorçã Localiza o do recurso no servidorçã: // http www.istec.pt Web/index.html: // ftp www.istec.pt Web/index.html: // mailto macribey@istec.pt Subject=assunto: ? file computador caminho/index.html: //
- 21. Hipertexto Links e URLs •Link – Para endereço externo: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <P> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </P> </body> </html>
- 22. Hipertexto Links e URLs •Link – Para documento externo na mesma pasta: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <p> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </p> <p>Aceda ao nosso <a href=“form.htm”>formulário</a> </p> …
- 23. Hipertexto Links e URLs Link – Para documento externo numa pasta dentro do local de origem- ficheiro index.html <p> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </p> <p> Aceda ao nosso <a href=“formularios/form1.htm”> Formulário </a> </p> Pasta x Index Pasta Formularios form1
- 24. Hipertexto Links e URLs •Link – Para um e-mail <p> Para obter mais informações sobre este produto consulte o site da <a href=”mailto:vsf@istec.pt?subject=assuntoxpto?body=texto da msg”> Microsoft Corporation. </a> </p> <p> Aceda ao nosso <a href=“formularios/form1.htm”>formulário</a>
- 25. Base • Define o URL base do documento, a partir do qual são formados todos os URL relativos que fazem parte do documento. <!DOCTYPE html> <html> <head> <base href=http://abc.com/def/> <!--Em alguns casos a referência aos url ou ficheiros pode precisar de “”-“http://abc.com/def/”--> </head> <body> <p>Para obter mais informações consulte <a href=ghi/pagina1.html>página1.</a><p> </body> </html>
- 26. Base • Define o URL base do documento, a partir do qual são formados todos os URL relativos que fazem parte do documento. <!DOCTYPE html> <head> <base href=http://abc.com/def/> <!--Em alguns casos a referência aos url ou ficheiros pode precisar de “”-“http://abc.com/def/”--> </head> <body> <p>Para obter mais informações consulte <a href=ghi/pagina1.html>página1.</a><p> </body> </html> O URL definido neste exemplo :é http://abc.com/def/ghi/pagina1.html
- 27. html 5 • 3 Objectivos Principais da na Especificação: 1. Definir alguns comportamentos do browser que podem ser personalizados 2. Definir o tratamento de erros pela primeira vez em html 3. Desenvolvimento da linguagem para facilitar a criação de web applications.
- 28. html 5 1. Criar uma nova página de início definindo o tipo de documento como html 5 <!doctype html> </html>
- 29. html 5 2. Definir o idioma da página utilizado o Atributo lang do Elemento <html> <!doctype html> <html lang=“pt”> </html> N o indica aã codifica oçã de caracteres
- 30. html 5 3. Definir a codificação de caracteres com um meta tag: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> </head> </html>
- 31. html 5 4. Definir um título para a página: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> </html>
- 32. Exemplos •O ELEMENTO TITLE <!DOCTYPE html> <html lang="pt"> <head> <title>Meu documento HTML</title> </head> <body> </body> </html> Exemplo - O elemento TITLE
- 33. Exemplos •ESCRERVER DIRECTAMENTE NO BROWSER <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> Escrever Directamente no browser sem elemento </body> </html> EXEMPLO
- 34. •PARÁGRAFOS E COMENTÁRIOS <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> <!--Estrofe 1, Canto I --> <p>As armas e os barões assinalados,</p> <p>Que da ocidental praia Lusitana,</p> <p>Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> </body> </html> Exemplo
- 35. •ATRIBUTO TITLE <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> <!--Estrofe 1, Canto I --> <p title="E1V1">As armas e os barões assinalados,</p> <p title="E1V2">Que da ocidental praia Lusitana,</p> <p title="E1V13">Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> </body> </html> Exemplo
- 36. •ATRIBUTO ALIGN <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> <!--Estrofe 1, Canto I --> <p align="justify">É pouco o que se sabe de Luís Vaz de Camões, e esse pouco é, ainda assim e na maioria dos casos, duvidoso. (…)</p> <p title="E1V1" align="center">As armas e os barões assinalados,</p> <p title="E1V2" align="right">Que da ocidental praia Lusitana,</p> <p title="E1V13" align="left">Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> Exemplo
- 37. •HEADINGS <!DOCTYPE html> <html lang="pt"> <head> <meta charset=ISO-8859-1> <title>Headings de HTML</title> </head> <body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3> <h4>Cabeçalho de nível 4</h4> <p>Parágrafo</p> <h5>Cabeçalho de nível 5</h5> <h6>Cabeçalho de nível 6</h6> </body> </html> Exemplo
- 38. •LINHAS HORIZONTAIS <!DOCTYPE html> <html lang="pt"> <head> <meta charset=ISO-8859-1> <title>Headings de HTML</title> </head> <body> h1>Cabeçalho de nível 1</h1> <hr> <h2>Cabeçalho de nível 2</h2> <hr width=50%> <h3>Cabeçalho de nível 3</h3> <hr size=30> <h4>Cabeçalho de nível 4</h4> <hr noshade> <p>Parágrafo</p> <hr width=50% align=right> (…) Exemplo
- 39. Exemplos • Bold, Itálico e Sublinhado • Quebras de linha • Exemplo com vários elementos • Texto semântico • O elemento <em> • O elemento <strong>