03 h iperlinks

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.html: //
ftp www.istec.pt Web/index.html: //
mailto macribey@istec.pt 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>
O atributo href indica o
destino da hiperliga o.çã

Hiperlink
•ELEMENTO <a>
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 queí
Se trata de uma hiperliga oçã
para dentro do mesmo
Documento 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 ponto
de destino de uma hiperliga o.çã
EXERC CIOÍ

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í

•Definir o campo Assunto da mensagem de e-mail:
<a href=“mailto:destino@correio.pt?subject=nova
%20mensagem”>envia e-mail</a>
Exerc cioí

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

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

•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>
<head>
<meta charset=Latin-1>
</head>
<body>
<p>
</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>
</a>
</p>
<p>
Aceda ao nosso <a href=“formularios/form1.htm”>
Formulário
</a>
</p>
Pasta x
Index
Pasta
Formularios
form1

•Link – Para um e-mail
<p>
<a href=”mailto:vsf@istec.pt?subject=assuntoxpto?body=texto da msg”>
</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 personalizados
2. Definir o tratamento de erros pela primeira vez
em html
3. 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>
N o indica aã
codifica oçã
de caracteres

html 5
3. Definir a codificação de caracteres com um
meta tag:
<!doctype html>
<head>
<meta charset=ISO-8859-1>
</head>
</html>

html 5
4. Definir um título para a página:
<!doctype html>
<head>
<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>

<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>
</body>
</html>
Exemplo

•ATRIBUTO ALIGN
<!DOCTYPE html>
<html lang="pt">
<head>
</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>
Exemplo

•HEADINGS
<!DOCTYPE html> <html lang="pt">
<head>
<title>Headings de HTML</title>
</head>
<body>
<h1>Cabeçalho de nível 1</h1>
<p>Parágrafo</p>
</body>
</html>
Exemplo

•LINHAS HORIZONTAIS
<!DOCTYPE html> <html lang="pt">
<head>
<title>Headings de HTML</title>
</head>
<body>
h1>Cabeçalho de nível 1</h1>
<hr>
<hr width=50%>
<hr size=30>
<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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (18)

Semelhante a 03 h iperlinks

Semelhante a 03 h iperlinks (20)

Mais de Vasco Ferreira

Mais de Vasco Ferreira (8)

Último

Último (20)

03 h iperlinks