Tutorial HTML Básico Para Iniciantes, Como Criar Um Link
Photo Credit: Elekes Zsolt
Muitas vezes começamos um blog, vamos aprendendo os primeiros passos e com o tempo vamos nos esquecendo que algumas coisas que hoje parecem tão simples, já foram motivo de muita dor de cabeça.
Entre os maiores problemas de quem está começando encontra-se a criação de Links.
Antes de qualquer coisa, vamos entender o que é um link:
Uma hiperligação ou simplesmente ligação (termo em português), mais conhecida por seus correspondentes ingleses (hyperlink e link) é uma referência num documento em hipertexto a outras partes do documento ou a outro documento. (Descrição: Wikipédia)
No popular, sabe as palavras e/ou imagens que você clica para entrar em uma página ou abrir um site? Então, isso é um link!
Quando você começa a escrever um blog, uma das primeiras coisas que você vai aprender é que linkar outros blogs e seus próprios artigos já publicados é fundamental para conseguir visibilidade na rede. E aí você me pergunta: Tá, é fundamental, mas como crio um link? Vamos aprender!
O formato mais simples:
<a href=”endereço”>Texto</a>
Isso é um link!
Perceba que existem duas Tags (isso mesmo, é assim que chamamos), uma de abertura e outra de fechamento do link. Tudo o que estiver entre as duas será linkado. Entende?
<a href=”endereço”> – Tag de abertura
</a> – Tag de fechamento
Agora, onde eu coloco esse código?
Simples! Se você utiliza o WordPress para blogar, vá até o painel de controle e na parte onde você escreve seus textos, clique na aba HTML. Já para quem utiliza o Blogger, na área de edição clique na aba Editar Html.
Para entender melhor, vamos por exemplo, linkar a primeira página do blog (http://ikaro.net.br/). Para tanto, basta seguir a o nosso formato simples, onde:
Endereço = URL do blog
Texto = O que nós queremos linkar.
Exemplo:
<a href=”http://ikaro.net.br/”>IKAROBRASIL</a>
E esse seria o resultado: IKAROBRASIL
Agora, vamos tornar as coisas mais interessantes!
Você já deve ter visto que em alguns links, quando você clica sobre eles a janela continua aberta e uma outra janela é aberta com o resultado do link. Isso acontece graças a um trecho que é adicionado ao código do link, o target=”_blank”.
Fica assim:
<a href=”endereço” target=”_blank”>Texto</a>
Usando o nosso mesmo exemplo:
<a href=”http://ikaro.net.br/” target=”_blank”>IKAROBRASIL</a>
E esse seria o resultado: IKAROBRASIL
Adicionando uma descrição ao link:
Agora, você já deve ter visto que em alguns links, quando colocamos o mouse em repouso por alguns segundos sobre eles, aparece uma espécie de descrição ou uma frase suspensa não é mesmo? Isso acontece graças ao atributo title.
Para usá-lo basta adicioná-lo junto ao código. Exemplo:
<a href=”endereço” title=”descrição do link”>Texto</a>
Mais uma vez, seguindo o nosso exemplo de link para a primeira página do blog:
<a href=”http://ikaro.net.br/” title=”Blogging, social media, web 2.0 … uma vida digital”>IKAROBRASIL</a>
E esse é o resultado: IKAROBRASIL
E juntando tudo o que já aprendemos até agora:
Link: <a href=”endereço”>Texto</a>
Abrir em outra janela: target=”_blank”
Descrição: title=”descrição do link”
Agora que já conhecemos o básico vamos linkar uma imagem!
O princípio é basicamente o mesmo, o que muda na verdade é o código. Vamos ver um código básico:
<img src=”endereço da imagem”/>
Esse é o código básico para que possamos inserir uma imagem em nosso artigo. Agora, para linkar essa imagem, vamos seguir o mesmo raciocínio do texto. Então vamos substituir a parte do texto pelo código da imagem. Assim:
<a href=”endereço”><img src=”endereço da imagem”/></a>
Da mesma forma que o link pode ser incrementado, o código da imagem também pode, fazendo assim alguns efeitos bem interessantes. Por exemplo:
Adicionar uma descrição a imagem:
Para adicionar uma descrição a imagem assim como fizemos como o texto, basta adicionarmos o atributo alt ao código. Assim, se caso a imagem não abrir, você verá a descrição. Veja no exemplo abaixo:
<a href=”endereço”><img src=”endereço da imagem” alt=”Descrição da imagem”/></a>
Essa é uma ideia básica de como se cria um link e seus atributos. Espero que ajude a quem está começando! Um abraço e até o próximo tutorial!
