-
Notifications
You must be signed in to change notification settings - Fork 0
/
hiperlinks.html
executable file
·191 lines (180 loc) · 8.55 KB
/
hiperlinks.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="Alexandre Gomes de Lima">
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="estilos/aulas.css">
<title>IFRN/DIATINF/Design Web: Hiperlinks</title>
</head>
<body>
<div id="tudo">
<header id="cabecalho">
<img src="imagens/logo_ifrn.png" alt="IFRN" id="logoifrn">
<h1 class="cabecalho">
Diretoria Acadêmica de Gestão e Tecnologia da Informação
</h1>
<h2 class="cabecalho">
Disciplina de Design Web e Arquitetura da Informação
</h2>
</header>
<article id="conteudo">
<h1>Hiperlinks</h1>
<p>
Os hiperlinks, ou simplesmente links, representam um dos recursos fundamentais da web:
a capacidade de conectar documentos. Nesta aula iremos conhecer a tag <span class="html">a</span>
e aprender como utilizá-la para criar diversos tipos de links. Também veremos os conceitos de
âncoras, caminhos relativos e caminhos absolutos. Estes últimos são particularmente importantes
quando criamos links locais, ou seja, links para documentos do nosso próprio website.
</p>
<section>
<h2>Links Externos</h2>
<p>
Links externos são links para recursos (páginas web ou arquivos de qualquer tipo) que não pertencem ao
nosso website. Estes recursos externos são referenciados através de uma URL (endereço da internet).
Assim, para criar um link externo utilizanos a tag <span class="html">a</span> em conjunto com o
atributo <span class="html">href</span>. Usamos este atributo para informar a URL do recurso
desejado. Veja o exemplo a seguir que cria um link para o portal do IFRN. Repare que a área
clicável do hiperlink fica restrita ao texto utilizado como conteúdo da tag <span class="html">a</span>.
</p>
<pre class="html">
<strong><a href="http://portal.ifrn.edu.br">IFRN</a></strong>
</pre>
<figure>
<img src="hiperlinks/figura01.png"
alt="Página com hiperlink para o portal do IFRN">
</figure>
<p>
Além de texto, também é possível utilizar imagens em conjunto com hiperlinks. Para tal, basta
inserir uma tag <span class="html">img</span> como conteúdo da tag <span class="html">a</span>.
</p>
<pre class="html">
<strong><a href="http://portal.ifrn.edu.br">
<img src="logo_ifrn.png">
</a></strong>
</pre>
</section>
<section>
<h2>Links Locais</h2>
<p>
Dizemos que um link é interno quanto ele faz referência a um recurso do seu próprio website.
Neste caso, utilizamos um nome de arquivo no lugar de uma URL para indicar a página alvo do link.
Vamos começar com um exemplo simples. Considere as duas páginas a seguir, ambas localizadas no
mesmo diretório (pasta).
</p>
<pre class="html">
<!-- pagina1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a href=<strong>"pagina2.html"</strong>>Página 2</a>
</body>
</html>
</pre>
<pre class="html">
<!-- pagina2.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a href=<strong>"pagina1.html"</strong>>Página 1</a>
</body>
</html>
</pre>
<p>
Repare que no exemplo somente foi preciso utilizar o nome do arquivo da página alvo como
valor do atributo <span class="html">href</span>. No entanto, se as páginas se encontrarem em pastas
distintas, teremos que utilizar o nome do arquivo precedido de seu caminho. Para verificar na prática
vamos modificar nosso
exemplo da seguinte forma. Na pasta atual dos arquivos <strong>pagina1.html</strong> e <strong>pagina2.html</strong>,
crie uma pasta chamada <strong>sub</strong> e mova <strong>pagina2.html</strong> para esta nova pasta.
Em seguida, recarregue <strong>pagina1.html</strong>, acesse o link e veja que este ficou quebrado
(a página não é encontrada).
</p>
<p>
Agora, atualize <strong>pagina1.html</strong> da maneira a seguir e confira o resultado das modificações.
</p>
<pre class="html">
<!-- pagina1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a href=<strong>"sub/pagina2.html"</strong>>Página 2</a>
</body>
</html>
</pre>
<p>
Verifique que em <strong>pagina2.html</strong> o link está quebrado pois <strong>pagina1.html</strong>
não está no mesmo diretório que <strong>pagina2.html</strong>. Analisando de forma mais precisa,
verificamos que <strong>pagina2.html</strong> está na pasta <strong>sub</strong> enquanto que
<strong>pagina1.html</strong> está em uma pasta acima. Neste caso, no link de <strong>pagina2.html</strong>
temos que preceder o nome do arquivo alvo com <strong>../</strong> para indicar que o
arquivo alvo está em uma pasta acima da qual <strong>pagina2.html</strong> se encontra. Verifique
como <strong>pagina2.html</strong> deve ser modificada:
</p>
<pre class="html">
<!-- pagina2.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a href=<strong>"../pagina1.html"</strong>>Página 1</a>
</body>
</html>
</pre>
<p>
ATENÇÃO: não utilize caminhos absolutos, ou seja, caminhos que indicam a localização
exata do arquivo no disco rígido como <strong>C:\aluno\documentos\site\pagina1.html</strong>.
Links com caminhos absolutos somente funcionam no próprio computador em
que as páginas foram criadas. Os caminhos de arquivos utilizados no exemplo são chamados de
caminhos relativos, pois são sempre baseados na localização da própria página do hiperlink.
Caminhos relativos garantem que os links do seu website funcionarão corretamente em qualquer
computador.
</p>
</section>
<section>
<h2>Exercícios</h2>
<p>
1) Crie um pequeno site contendo três páginas descritas a seguir:
</p>
<ul class="opcoes_exercicio">
<li>
<strong>index.html</strong>: deve conter um cabeçalho com uma mensagem de boas vindas e
com links para as outras duas páginas do site.
</li>
<li>
<strong>fotos.html</strong>: deve conter um cabeçalho, duas ou mais imagens e um link que permita
ao usuário voltar para <strong>index.html</strong>. Cada imagem deve possuir um link
com uma página da internet relacionada à imagem.
</li>
<li>
<strong>contato.html</strong>: deve conter um cabeçalho e um link que permita
ao usuário voltar para <strong>index.html</strong>.
</li>
</ul>
</section>
<section>
<h2 class="referencias">Referências</h2>
<ul>
<li class="referencia">
W3Schools. <em class="referencia">HTML Links</em>. Disponível em <<a href="https://www.w3schools.com/html/html_attributes.asp">https://www.w3schools.com/html/html_links.asp</a>>.
</li>
<li class="referencia">
BEZERRA, Weskley. <em class="referencia">URL</em>. Notas de aula.
</li>
</ul>
</section>
</article>
</div>
</body>
</html>