Aula Quatro de HTML
Como Criar um Link em HTML que Abre em uma Nova Aba?
Vamos abordar os conceitos fundamentais para que você entenda o que está acontecendo em cada parte do código.
1. O básico de um link HTML
Um link em HTML é criado com a tag <a>. A tag <a> tem um atributo chamado href, que é usado para especificar o destino do link (o endereço da página que será aberta quando o link for clicado).
Aqui está um exemplo básico de link:
<a href="https://www.exemplo.com">Visite o Exemplo</a>
Neste caso:
href="https://www.exemplo.com": Este é o endereço para onde o link levará.Visite o Exemplo: Este é o texto visível do link.
Quando o link for clicado, a página de https://www.exemplo.com será aberta na mesma aba do navegador.
2. Como fazer o link abrir em uma nova aba
Para fazer com que o link seja aberto em uma nova aba do navegador, você precisa adicionar o atributo target à tag <a>. O valor do atributo target deve ser _blank. Aqui está como fica:
<a href="https://www.exemplo.com" target="_blank">Visite o Exemplo</a>
O que faz o target="_blank":
target: Este atributo determina onde a nova página será aberta._blank: Esse valor instrui o navegador a abrir o link em uma nova aba (ou nova janela, dependendo do navegador e das configurações).
3. Detalhes adicionais:
Segurança: Quando você usa target="_blank", é uma boa prática adicionar também o atributo rel="noopener noreferrer". Isso ajuda a melhorar a segurança do seu site. O noopener impede que a página que foi aberta tenha acesso ao seu site, e o noreferrer impede que o navegador envie informações sobre a origem da navegação.
Aqui está um exemplo mais seguro:
<a href="https://www.exemplo.com" target="_blank" rel="noopener noreferrer">Visite o Exemplo</a>
4. Como isso funciona
Quando você adiciona o atributo target="_blank", o navegador irá:
- Carregar a página do link em uma nova aba, sem afetar a aba atual.
- Se você clicar em outros links dentro dessa nova aba, eles também abrirão nessa aba, a menos que o link também tenha o atributo
target="_blank".
5. Resumo do código
Aqui está o código completo, com todas as recomendações de boas práticas:
<a href="https://www.exemplo.com" target="_blank" rel="noopener noreferrer">Visite o Exemplo</a>
6. Como testar
Para testar:
- Crie um arquivo HTML (por exemplo,
index.html). - Adicione o código acima.
- Abra o arquivo HTML em um navegador.
- Clique no link e observe que ele abrirá a página em uma nova aba.
Agora você tem um link funcional que abre em uma nova aba de maneira segura! Se precisar de mais ajuda, é só avisar!