Aula Três de HTML

Como Adicionar um Link em uma Página HTML?

O que é um link em HTML?

Em HTML, um link é criado utilizando a tag <a>, que significa "âncora" (anchor, em inglês). O atributo principal que você vai usar é o href, que define para onde o link vai levar quando clicado.

Passo 1: Estrutura básica de um documento HTML

Antes de falarmos sobre o link, é importante saber como criar um documento HTML básico. Aqui está a estrutura mínima:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Exemplo de Link</title>
    </head>
    <body>
        <!-- Aqui vai o conteúdo da página -->
    </body>
</html>

Explicação da estrutura:

<!DOCTYPE html>: Define que estamos criando um documento HTML5.
<html>: Marca o início de um documento HTML.
<head>: Contém metadados sobre o documento, como o título da página e informações de codificação.
<body>: Contém o conteúdo visível da página.

Passo 2: Criando o link

Agora que temos a estrutura básica, podemos adicionar o link.

Como criar o link?
Dentro da tag <body>, você vai usar a tag <a> para criar o link. O atributo href é utilizado para definir o destino do link. No caso do Google, o endereço é https://www.google.com.

<a href="https://www.google.com">Ir para o Google</a>

Aqui está o que cada parte faz:

<a>: Começa a tag de link.
href="https://www.google.com": Define o destino do link. O atributo href é onde você coloca o endereço (URL) para o qual o link vai levar.
Ir para o Google: É o texto que aparecerá na página. Quando alguém clicar nesse texto, será redirecionado para o Google.
</a>: Fecha a tag do link.

Passo 3: Abrindo o link em uma nova aba

Se você quiser que o link abra em uma nova aba ou janela, pode adicionar o atributo target="_blank":

<a href="https://www.google.com" target="_blank">Ir para o Google</a>

Passo 4: Código completo

Agora, juntando tudo, o código final do documento HTML que cria um link para o Google, abrindo em uma nova aba, seria:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Link</title>
</head>
<body>
    <p>Clique no link abaixo para ir ao Google:</p>
    <a href="https://www.google.com" target="_blank">Ir para o Google</a>
</body>
</html>

Explicação do que acontece no código:

O título da página será "Exemplo de Link" (definido pela tag <title>).
A página terá uma frase "Clique no link abaixo para ir ao Google:" e um link com o texto "Ir para o Google".
Quando alguém clicar nesse link, a página do Google será aberta em uma nova aba devido ao target="_blank".

Conclusão

Agora você sabe como criar um link básico em HTML e pode personalizá-lo com outros atributos, como target="_blank" para abrir em uma nova aba.

Se precisar de mais alguma coisa ou quiser aprender mais sobre HTML, estou à disposição!

Voltar à página inicial

Voltar à Tecnologia

Aula 2 de HTML

Aula 4 de HTML

Aula 3 de HTML