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