03 h iperlinks
Post on 05-Aug-2015
22 Views
Preview:
TRANSCRIPT
Hiperlink
• Destino de um link
Outro recurs
o
URL endereço
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 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>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
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
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
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
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 macribey@istec.pt Subject=assunto: ?
file computador caminho/index.html: //
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>
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>
…
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
IndexPasta
Formularios
form1
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>
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>
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
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"> <!-- 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
•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
•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
•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
•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
top related