03 h iperlinks

HTML

HiperlinksMultimédia e Hipermédia

Hiperlink

Palavra

Frase

Imagem

Outro recurs

oHiperlink

Hiperlink

• Destino de um link

Outro recurs

o

URL endereço

http://images.google.pt/imgres?imgurl=http://www.es-sjoaotalha.edu.pt/20072008/EFA1site/media/servidor.jpg&imgrefurl=http://www.es-sjoaotalha.edu.pt/20072008/EFA1site/hardware-servidores.html&h=293&w=269&sz=18&hl=pt-PT&start=5&usg=__Epau6bcrxIDyBWQSUKf21162tQQ=&tbnid=Ucha66BXp44N-M:&tbnh=115&tbnw=106&prev=/images?q=servidor&gbv=2&ndsp=18&hl=pt-PT&sa=N

Hiperlink

• Endereçoprotocol

oLocalização do

serverLocalização do recurso no

server: //

http www.istec.pt Web/index.html: //

ftp www.istec.pt Web/index.html: //

mailto [email protected] Subject=assunto: ?

file computador caminho/index.html: //

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

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>

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.

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

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.

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

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.

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.

•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 queSe trata de uma hiperligaçãopara dentro do mesmoDocumento html.

•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 pontode destino de uma hiperligação.

EXERCÍCIO

mailto:[email protected]

Hiperlink para e-mail

•Definir uma hiperligação que permite enviar um e-mail

<a href=“mailto:[email protected]”>envia e-mail</a>

Exercício




•Definir o campo Assunto da mensagem de e-mail:

<a href=“mailto:[email protected]?subject=nova %20mensagem”>envia e-mail</a>

Exercício



•Definir o conteúdo do Corpo da mensagem de e-mail:

<a href=“mailto:[email protected]?subject=nova %20mensagem?body=por favor envie uma cópia do novo contrato”>envia e-mail</a>

Exercício


TabIndex

•Ordem de tabulação

<p>Experimente os nossos <a href=“bolos.html” tabindex=“3”>deliciosos bolos</a>.</p>

Exercício

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

Hiperlink

• Endereçoprotocolo 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 [email protected] Subject=assunto: ?

file computador caminho/index.html: //


•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>


•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>

…


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

IndexPasta

Formularios

form1


•Link – Para um e-mail

<p>Para obter mais informações sobre este produto consulte o site da <a href=”mailto:[email protected]?subject=assuntoxpto?body=texto da msg”> Microsoft Corporation. </a></p><p>Aceda ao nosso <a href=“formularios/form1.htm”>formulário</a>

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/></head><body>

<p>Para obter mais informações consulte <a href=ghi/pagina1.html>página1.</a><p></body>

</html>

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/></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

html 5

• 3 Objectivos Principais da na Especificação:1. Definir alguns comportamentos do browser que

podem ser personalizados2. Definir o tratamento de erros pela primeira vez

em html3. Desenvolvimento da linguagem para facilitar a

criação de web applications.

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>

Não indica a codificação

de caracteres

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>

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>

Exemplos

•O ELEMENTO TITLE

<!DOCTYPE html><html lang="pt">

<head><title>Meu documento HTML</title>

</head><body>

</body></html>

Exemplo - O elemento TITLE

Exemplos

•ESCRERVER DIRECTAMENTE NO BROWSER

<!DOCTYPE html><html lang="pt">  <head>

<meta charset=ISO-8859-1><title>Benvindo ao HTML</title>

</head><body>

Escrever Directamente no browser sem elemento</body>

</html>

EXEMPLO

•PARÁGRAFOS E COMENTÁRIOS<!DOCTYPE html><html lang="pt">

<head>


</head><body>

<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

•ATRIBUTO TITLE<!DOCTYPE html><html lang="pt">

<head>


</head><body>

<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

•ATRIBUTO ALIGN<!DOCTYPE html><html lang="pt"><head> <meta charset=ISO-8859-1>  <title>Benvindo ao HTML</title></head><body>  <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

http://05.Headings.html/

•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

•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

Exemplos

• Bold, Itálico e Sublinhado• Quebras de linha• Exemplo com vários elementos• Texto semântico• O elemento <em>• O elemento <strong>

03 h iperlinks

Education

Transcript of 03 h iperlinks