O que são links?
Como vimos em nossa primeira postagem HTML é o acrônimo de (Hyper Text Markup Language), vimos que hipertexto é um texto que se conecta a outros textos. Você pode estar se perguntando, mas como os documentos web se conectam a outros documentos e recursos? A resposta para isso é: links.
Como usar links em HTML?
O html atribui à tag <a></a> a função de lincar documentos e recursos em uma página web. O nome da tag é uma redução de "anchor" (âncora em inglês) e para funcionar devidamente a tag <a></a> deve conter o atributo href (sigla para hyper text reference) que é o caminho (path) absoluto ou relativo para a página ou recurso web que desejamos lincar em nosso documento.
Vamos abrir o nosso exemplo da última aula e adicionar o seguinte código:
<p>Estou aprendendo html no blog Aprendendo Web Design Básico</p>
Vamos abrir o nosso exemplo da última aula e adicionar o seguinte código:
<p>Estou aprendendo html no blog Aprendendo Web Design Básico</p>
Adicione o código após o texto alternativo que aparece para a imagem não carregada.
Após adicionar o parágrafo exatamente igual mostrado acima, insira uma tag <a></a> envolvendo o texto "Aprendendo Web Design Básico" de modo que o resultado seja parecido com:
<p>Estou aprendendo html no blog <a>Aprendendo Web Design Básico</a></p>
Agora insira o atributo href com o seguinte valor: https://webdesign0800.blogspot.com/2024/04/html-o-basico-para-comecar.html
O resultado deve ser:
<p>Estou aprendendo html no blog <a href="https://webdesign0800.blogspot.com/2024/04/html-o-basico-para-comecar.html" >Aprendendo Web Design Básico<a></p>
Salve o documento e abra-o no navegador. Você verá que parte do texto do parágrafo estará destacado em cor azul:
Após adicionar o parágrafo exatamente igual mostrado acima, insira uma tag <a></a> envolvendo o texto "Aprendendo Web Design Básico" de modo que o resultado seja parecido com:
<p>Estou aprendendo html no blog <a>Aprendendo Web Design Básico</a></p>
Agora insira o atributo href com o seguinte valor: https://webdesign0800.blogspot.com/2024/04/html-o-basico-para-comecar.html
O resultado deve ser:
<p>Estou aprendendo html no blog <a href="https://webdesign0800.blogspot.com/2024/04/html-o-basico-para-comecar.html" >Aprendendo Web Design Básico<a></p>
Salve o documento e abra-o no navegador. Você verá que parte do texto do parágrafo estará destacado em cor azul:
Clique no link em azul; A página será atualizada e será aberta a página cujo link que adicionamos em nosso documento está apontando. Observação, você deve ter reparado que ao clicar no link, o documento é aberto na página atual e perdemos a visualização da nossa página de exemplo. Para corrigir isso, acesse novamente o código do nosso exemplo no bloco de notas e insira o seguinte argumento dentro da tag <a> após o argumento href, separado por espaço: target="_blank" .Salve o documento e reabra ou atualize a página, clique no link e verá que o navegador abrirá o link em uma nova janela em branco. Em postagens futuras falaremos mais sobre os valores que o atributo target pode receber. Basicamente target significa alvo, mas neste caso indica onde o link deverá ser aberto.
Onde podemos usar links em nossa página html?
Basicamente podemos transformar quase todos os elementos html em links como: cabeçalhos (heads h1-h6), imagens, videos, listas, botões etc...
Para isso basta envolver o elemento entre as tags <a></a>
Vamos exercitar isso: você se lembra o que fizemos no nosso último exemplo para que a imagem do carro não fosse carregada na página e para que o texto alternativo fosse exibido? Nós deletamos uma das letras da extensão do arquivo que era ".jpg" e deixamos como ".jp" causando a não exibição da imagem. Corrija isso agora, reescrevendo o nome da extensão para .jpg e testando se após salvar e abrir o documento a foto foi reexibida corretamente. Se deu tudo certo, abra o seu bloco de notas e envolva a imagem entre as tags <a></a> e insira um atributo href com o valor para o url do google images para alguma imagem de carro da sua escolha. Salve o documento e reabra-o no navegador. e clique na imagem. Se você fez tudo correto o documento deve ter sido recarregado e aberto a imagem na página atual. Como você faria para que a imagem fosse aberta em uma nova página? Vimos isso há pouco... tente resolver essa questão.
Para isso basta envolver o elemento entre as tags <a></a>
Vamos exercitar isso: você se lembra o que fizemos no nosso último exemplo para que a imagem do carro não fosse carregada na página e para que o texto alternativo fosse exibido? Nós deletamos uma das letras da extensão do arquivo que era ".jpg" e deixamos como ".jp" causando a não exibição da imagem. Corrija isso agora, reescrevendo o nome da extensão para .jpg e testando se após salvar e abrir o documento a foto foi reexibida corretamente. Se deu tudo certo, abra o seu bloco de notas e envolva a imagem entre as tags <a></a> e insira um atributo href com o valor para o url do google images para alguma imagem de carro da sua escolha. Salve o documento e reabra-o no navegador. e clique na imagem. Se você fez tudo correto o documento deve ter sido recarregado e aberto a imagem na página atual. Como você faria para que a imagem fosse aberta em uma nova página? Vimos isso há pouco... tente resolver essa questão.
Conclusão
Aprendemos a importância dos links, afinal, a internet não seria internet sem links interligando documentos e recursos. Em aulas mais avançadas veremos também como utilizar links relativos para navegar entre trechos da própria página. Por agora, treine bastante e não fique com dúvidas. Se teve qualquer dificuldade ou dúvida nos conteúdos explicados aqui no blog, comente. Todos estamos aprendendo a todo momento. Seu feedback ajudará a melhorar o conteúdo do blog.
Um abraço e até a próxima!
Um abraço e até a próxima!
Comentários
Postar um comentário