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!

Comments

comments