HTML
Hiperlinks
Multimédia e Hipermédia
Hiperlink
Palavra
Frase
Imagem
Outro
recurso
Hiperlink
Hiperlink
• Destino de um link
Outro
recurso
URL
endere oç
Hiperlink
• Endereço
protocolo Localiza o doçã server Localiza oçã do recurso no server: //
http www.istec.pt Web/index.ht...
Hipertexto Links e URLs
• Link - Origem de uma ligação que pode
conter:
– Apontador para novo recurso:
• Novo Documento ht...
Hiperlink
•ELEMENTO <a>
Define uma hiperligação que pode ser utilizada
para aceder a outra página. Exemplo:
<a href=“http:...
Hiperlink
•ELEMENTO <a>
Define uma hiperligação que pode ser utilizada
para aceder a outra página. Exemplo:
<a href=“http:...
Hiperlink
•ELEMENTO <a>
Define uma hiperligação que pode ser utilizada
para aceder a outra página. Exemplo:
<a href=“http:...
Hiperlink
•ELEMENTO <a>
Define uma hiperligação que pode ser utilizada para aceder a um recurso do
mesmo site:
…
<BODY>
…t...
Hiperlink
•ELEMENTO <a>
Define uma hiperligação que pode ser utilizada para aceder a um recurso do
mesmo site:
…
<BODY>
…t...
Hiperlinks
•ELEMENTO <a>
Links dentro do mesmo documento:
O Destino final de uma hiperligação pode ser um local assinalado...
Hiperlinks
•ELEMENTO <a>
Links dentro do mesmo documento:
Exemplo:
Criar uma tabela de conteúdos para um livro. Cada link ...
•ELEMENTO <a>
…
<h4><a href="#canto1">Canto I</a></h4>
<h4><a href="#canto2">Canto II</a></h4>
<h4><a href="#canto3">Canto...
•ELEMENTO <a>
…
<h4><a href="#canto1">Canto I</a></h4>
<h4><a href="#canto2">Canto II</a></h4>
<h4><a href="#canto3">Canto...
Hiperlink para e-mail
•Definir uma hiperligação que permite enviar um e-mail
<a href=“mailto:destino@correio.pt”>
envia e-...
Hiperlink para e-mail
•Definir o campo Assunto da mensagem de e-mail:
<a href=“mailto:destino@correio.pt?subject=nova
%20m...
Hiperlink para e-mail
•Definir o conteúdo do Corpo da mensagem de e-mail:
<a href=“mailto:destino@correio.pt?subject=nova
...
TabIndex
•Ordem de tabulação
<p>Experimente os nossos <a
href=“bolos.html” tabindex=“3”>deliciosos
bolos</a>.</p>
Exerc ci...
Target
• Utilizado quando se usavam frames
– “_blank” – carrega o conteúdo numa nova janela
– “nome frame” – carrega conte...
Hiperlink
• Endereço
protocolo Localiza o do servidorçã Localiza o do recurso no servidorçã: //
http www.istec.pt Web/inde...
Hipertexto Links e URLs
•Link – Para endereço externo:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</he...
Hipertexto Links e URLs
•Link – Para documento externo na mesma pasta:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta chars...
Hipertexto Links e URLs
Link – Para documento externo numa pasta dentro do local de origem- ficheiro index.html
<p>
Para o...
Hipertexto Links e URLs
•Link – Para um e-mail
<p>
Para obter mais informações sobre este produto consulte o site da
<a hr...
Base
• Define o URL base do documento, a partir do qual são
formados todos os URL relativos que fazem parte do
documento.
...
Base
• Define o URL base do documento, a partir do qual
são formados todos os URL relativos que fazem parte
do documento.
...
html 5
• 3 Objectivos Principais da na Especificação:
1. Definir alguns comportamentos do browser que
podem ser personaliz...
html 5
1. Criar uma nova página de início definindo o
tipo de documento como html 5
<!doctype html>
</html>
html 5
2. Definir o idioma da página utilizado o Atributo
lang do Elemento <html>
<!doctype html>
<html lang=“pt”>
</html>...
html 5
3. Definir a codificação de caracteres com um
meta tag:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8...
html 5
4. Definir um título para a página:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
<title>Benvin...
Exemplos
•O ELEMENTO TITLE
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Meu documento HTML</title>
</head>
<body>
</body...
Exemplos
•ESCRERVER DIRECTAMENTE NO BROWSER
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codifi...
•PARÁGRAFOS E COMENTÁRIOS
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caractere...
•ATRIBUTO TITLE
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres -->
<hea...
•ATRIBUTO ALIGN
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres -->
<hea...
•HEADINGS
<!DOCTYPE html> <html lang="pt">
<head>
<meta charset=ISO-8859-1>
<title>Headings de HTML</title>
</head>
<body>...
•LINHAS HORIZONTAIS
<!DOCTYPE html> <html lang="pt">
<head>
<meta charset=ISO-8859-1>
<title>Headings de HTML</title>
</he...
Exemplos
• Bold, Itálico e Sublinhado
• Quebras de linha
• Exemplo com vários elementos
• Texto semântico
• O elemento <em...
Próximos SlideShares
Carregando em…5
×

03 h iperlinks

221 visualizações

Publicada em

HTML Hiperlinks

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

03 h iperlinks

  1. 1. HTML Hiperlinks Multimédia e Hipermédia
  2. 2. Hiperlink Palavra Frase Imagem Outro recurso Hiperlink
  3. 3. Hiperlink • Destino de um link Outro recurso URL endere oç
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. TabIndex •Ordem de tabulação <p>Experimente os nossos <a href=“bolos.html” tabindex=“3”>deliciosos bolos</a>.</p> Exerc cioí
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 28. html 5 1. Criar uma nova página de início definindo o tipo de documento como html 5 <!doctype html> </html>
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 39. Exemplos • Bold, Itálico e Sublinhado • Quebras de linha • Exemplo com vários elementos • Texto semântico • O elemento <em> • O elemento <strong>

×