-
Notifications
You must be signed in to change notification settings - Fork 0
/
links.html
110 lines (90 loc) · 8.68 KB
/
links.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
<!DOCTYPE hmtl>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Links</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<a id="inicio"></a>
<h1>Elementos e atributos de links</h1>
<hr>
<h2>Tipos de links</h2>
<h3>Link absoluto</h3><!-- Link absoluto -->
<p>
É aquele tipo de link em que colocamos o endereço (URL) completo na página a ser acessada.
</p>
<!-- Sempre são utilizados para abrir links externos -->
<!-- O atributo href, indica o endereço do link
o atributo target, indica de que maneira o link será aberto. -->
<p>
<!-- Link absoluto -->
Visite o site do <a href="https://www.sp.senac.br/" target="_blank">SENAC.</a>
</p>
<hr>
<h3>Link relativo</h3> <!-- Link relativo -->
<p>É aquele link que abre um arquivo/página a ser acessado no próprio site que estamos trabalhando.</p>
<p>
<a href="./listas.html">Acesse o conteúdo anterior</a>
</p>
<hr>
<h3>E-mail e telefone</h3> <!-- E-mail e telefone -->
<p><b>E-mail:</b> Link que abre um programa de e-mail instalado na máquina do usuário</p>
<!-- MAILTO: -->
<p>Contato de e-mail <a href="mailto:gustavo.almeida.201632@gmail.com">gustavo.almeida.201632@gmail.com</a></p>
<!-- TEL: -->
<p><b>Telefone:</b> Link que abre um programa instalado na máquina do usuário.</p>
<p>Contato por telefone <a href="tel:11930036030">(11) 93003-6030</a></p>
<hr>
<h3>Falso/Vazio</h3> <!-- Falso Vazio -->
<p>Utilizado para simular comportamento de link</p>
<p><a href="#">Nenhum lugar</a></p>
<hr>
<h3>Link vertical</h3> <!-- Link Vertical -->
<p><a href="#inicio">Ir para o início da página</a></p>
<p><a href="#fim">Ir para o final da página</a></p>
<p><b>Usado para navegações por seções/áreas localizada na mesma página</b></p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cum molestias magni. Cupiditate quasi voluptatibus beatae, nisi in magni culpa ab voluptate, nemo perferendis ipsum alias tempore, est repellat quisquam.
</p>
<hr>
<h3>Link para download</h3>
<p>Usado para baixar um arquivo</p>
<p><a href="doc/apostila-web.pdf" download="">Baixe</a> a apostila</p> <!-- Para baixar um arqivo, podendo ser qualquer um
Sempre utilizar a propriedade download -->
<a id="fim"></a>
</body>
</html>