Este documento apresenta os conceitos de links HTML, descrevendo como eles permitem vincular páginas da web e como são definidos usando a tag <a>. Os principais atributos da tag <a> são href, que especifica o endereço de destino, e target, que controla como o link é aberto. Links internos podem ser usados para navegar dentro de uma mesma página usando IDs.
2. Objetivo da Aula
Apresentar o conceito de links e a tag disponível
em HTML para incluir esse tipo de conteúdo nas
páginas.
3. O que são links HTML?
Elemento presente em uma página HTML que permite
vincular o documento atual a qualquer outro
documento ou recurso.
Esse conceito de ligação entre um documento e outro
é que define a base do funcionamento da web.
São chamados de links ou hiperlinks e podem estar
associados a textos ou imagens.
Precisa apontar para uma URL existente no site, caso
contrário, será fornecida uma mensagem de erro ao
usuário.
4. Tag de Hiperlink
Em HTML os links são definidos usando-se a tag
<a>.
Atributos importantes da tag <a>:
href
target
title
download
mailto
5. Atributo href
Indica o endereço de destino de um link.
Exemplo:
<a href="https://www.google.com">
Google
</a>
6. Links Internos
Alguns links apontam para sessões dentro da
própria página, os chamados links internos.
Ao serem clicados, forçam a rolagem da página
até o início da sessão para onde apontam.
Para criar uma sessão dentro de uma página,
usamos o atributo id em um elemento, como
título de cabeçalho ou parágrafo.
7. Links Internos - Exemplo
<h1>Cursos Subsequentes do IFBA – Campus Jacobina</h1>
<h2>Escolha um curso:</h2>
<a href="#informatica">Informática</a>
<a href="#eletro">Eletromecânica</a>
<a href="#meioamb">Meio Ambiente</a>
<a href="#mineracao">Mineração</a>
<h3 id="informatica">Curso Técnico Subsequente em Informática</h3>
<h3 id="eletro">Curso Técnico Subsequente em Eletromecânica</h3>
<h3 id="meioamb">Curso Técnico Subsequente em Meio Ambiente</h3>
<h3 id="mineracao">Curso Técnico Subsequente em Mineração</h3>
9. Atributo target
Informa ao navegador como o redirecionamento da página deve
ocorrer.
Principais valores possíveis:
_self: abre a página na página atual (opção padrão).
_blank: abre a página em uma nova guia, mas os usuários podem
configurar os navegadores para abrir em uma nova página.
Outros valores, usados quando a página possui mais de um
frame: _top e _parent.
Exemplo:
<a href="https://www.google.com" target="_blank">
Google
</a>
10. Atributo title
Inclui um texto exibido quando se passa o mouse
sobre o link.
Contém informações úteis suplementares sobre o link.
Exemplo:
<a href="https://www.google.com" title= "Pesquise no Google">
Google
</a>
11. Atributo download
Expressa um link com função de download ao invés de um
link para navegação.
Exemplo:
Clique <a href="Texto.txt" download>aqui</a> para fazer o download
do texto.
12. Atributo mailto
Cria um link para um email.
Exemplo:
<a href="mailto: gbrlamota@gmail.com">Sugestões</a>
Você pode acrescentar um assunto ao email:
<a href="mailto:
gbrlamota@gmail.com?subject=Sugestões">Sugestões</a>
Você pode também acrescentar um conteúdo ao corpo do email:
<a href="mailto:
gbrlamota@gmail.com?subject=Sugestões&body=Escreva suas
sugestões.">Sugestões</a>
O atributo funciona apenas nos computadores que tenham uma
ferramenta de email configurada.
13. Atributo mailto
Cria um link para um email.
Exemplo:
<a href="mailto:gbrlamota@gmail.com">Sugestões</a>
15. Exercício
Faça uma página HTML contendo
seu nome
um link para sua página pessoal que abre em uma
nova aba
um link para enviar um email para você