Como criar um link em uma imagem ou um texto? Você sabe como se faz isso? Bom, provavelmente se você já tem um tempinho de estrada, sua resposta deve ser sim. Mas acredite, mesmo quem acha que já sabe tudo, ainda tem o que aprender (isso vale para qualquer coisa na vida).
É fato que para quem está começando saber como linkar uma imagem ou um texto não é fácil. E mesmo para quem já tem alguma experiência, existem algumas dicas que podem ser preciosas. Então vamos lá!
O Que é Um Link?
Pesquisando na Wikipédia, temos a seguinte definição:
"Uma hiperligação, um liame, ou simplesmente uma ligação (também conhecida em português pelos correspondentes termos ingleses, hyperlink e link), é uma referência num documento em hipertexto a outras partes deste documento ou a outro documento. De certa maneira pode-se vê-la como análoga a uma citação na literatura. Ao contrário desta, no entanto, a hiperligação pode ser combinada com uma rede de dados e um protocolo de acesso adequado e assim ser usada para ter acesso direto ao recurso referenciado. Este pode então ser gravado, visualizado ou mostrado como parte do documento que faz a referência."
Eu acho que mais complicou que ajudou né? 
Em uma definição bem simples:
É o link que torna capaz a ligação entre uma página e outra na Web! (by eu mesmo)
No básico do básico, isso é um link = Novo na Rede
Se você olhar no código da página é isso o que vai ver:
<a href="http://www.novonarede.com.br/blog">Novo na Rede</a>
Vamos entender isso:
<a href="http://www.novonarede.com.br/blog">Novo na Rede</a>
<a href="…">: é a parte inicial do link sendo que o A é de Anchor (âncora) e o href é de Hypertext REFerence (referência de hipertexto) você nem precisaria saber disso para criar um link, mas como aprendi isso lá no século passado, achei legal passar aqui. 
http://www.novonarede.com.br/blog: é a URL (endereço) da página que quero linkar.
Novo na Rede: é descrição do link (o que vai aparecer no resultado final).
</a> Fecha o link (se você não usá-lo, tudo o que estiver depois dele vai ser linkado ou o mais provável, vai causar um erro no código do blog).
Complementos de Um Link
target="_blank": usado para abrir o link em outra janela ao ser clicado.
Exemplo:
<a href="http://www.novonarede.com.br/blog" target="_blank">Clique aqui</a>
title: usado para falar do que se trata o link.
Exemplo:
<a href="http://www.novonarede.com.br/blog" title="Descrição">Clique aqui</a>
Quando você repousar o mouse sobre o link a palavra Descrição vai aparecer (ou qualquer outra palavra ou frase que você coloque no lugar).
Linkando Imagens
Lembra lá do primeiro código? Assim:
<a href="http://www.novonarede.com.br/blog">Novo na Rede</a>
Pois então, para linkar uma imagem, basicamente tudo o que você precisa é trocar a descrição do link que é a parte que aparece na tela no resultado final (no nosso exemplo as palavras "Novo na Rede") por um código que vai se encarregar de mostrar a imagem.
Código da imagem:
<img src="ENDEREÇO DA IMAGEM"/>
Linkando fica assim:
<a href="ENDEREÇO DA PÁGINA"><img src="ENDEREÇO DA IMAGEM"/></a>
Vamos ver um exemplo prático:
<a href="http://www.novonarede.com.br/blog" target="_blank"><img src="http://2.bp.blogspot.com/_NiOrby0FW3k/S1ru8WVcMfI/AAAAAAAAC_8/palte--OmOU/S1600-R/Logotipo.png"/></a>
Este seria o resultado do link acima:
Ao clicar na imagem você será enviado para a primeira página do blog com o link abrindo em outra janela (target="_blank" lembra?).
Complementos de Uma Imagem
Assim como o link a imagem também pode ser complementada com alguns atributos que geram maior "valor". Vamos ver alguns:
alt: mostra um texto quando a imagem não pode ser carregada.
Exemplo:
<a href="http://www.novonarede.com.br/blog" target="_blank"><img src="ENDEREÇO DA IMAGEM" alt="Novo na Rede"></a>
Como você pode ver eu usei o mesmo código da primeira imagem, só que não especifiquei o endereço (url de onde a imagem está) e acrescentei o atributo alt.
style: nos ajuda a adicionar um "estilo" a imagem.
Exemplo:
<a href="ENDEREÇO DA PÁGINA"><img src="ENDEREÇO DA IMAGEM" style="…"/></a>
Dentro do style as coisas mudam um pouco. Você não usa aspas e nem sinal de igual. No lugar do sinal de igual você usa os dois pontos (:) e fecha com ponto e vírgula (;).
Por exemplo para não mostrar bordas na imagem:
border:0;
<a href="ENDEREÇO DA PÁGINA"><img src="ENDEREÇO DA IMAGEM" style="border:0;"/></a>
Então:
border: para controlar se vai aparecer uma borda na imagem ou não.
Se você quiser que apareça um borda, basta adicionar:
border: 1px solid #000000;
Entendo o trecho acima:
1px: significa a largura da borda. Ou seja, quanto maior este número, mais larga a borda vai ser.
solid: significa mostrar uma borda de aparência sólida.
#000000: é o código da cor da borda.
Dica: Dependendo da página você especificar que não quer uma borda apenas adicionando ao código: border="0". Mas o ideal é poder usá-la dentro do style.
Links: Outras Possibilidades
Como vimos é possível criar um link para textos e imagens, mas além disso, você também pode usar a mesma "fórmula" para criar outros tipos de link. Por exemplo:
Link para Email:
<a href="mailto:SeuEmailAqui">Texto ou imagem aqui</a>
Onde está o mailto:seuEmailAqui você deve adicionar seu email da seguinte forma:
mailto:novonarede@novonarede.com.br por exemplo (email fictício )
E aí você pode linká-lo a um texto ou imagem que quando clicados abrem o serviço de email do computador da pessoa já com o seu email no campo enviar.
Link para Download de Arquivos
Assim que você começa a desenvolver páginas para web uma das coisas que mais vai te deixar nervoso é descobrir como colocar um arquivo para que as pessoas possam baixar?
Na verdade isso é muito mais simples do que parece!
Para colocar um arquivo para download você só precisa hospedá-lo em algum lugar e criar o link normal. Por exemplo:
<a href="EndereçoDoSeuArquivoAqui">Download</a>
Como você pode ver o link é exatamente igual aos que já vimos até aqui. Porém, o download vai depender da extensão do arquivo para o qual você está apontando.
Por exemplo: Arquivo.exe
O navegador não reconhece e por isso faz o download do arquivo.
Agora, se você colocar um arquivo para download que a extensão seja .avi ou .mp3 por exemplo, o mais provável é que o navegador do usuário abra o arquivo ao invés de fazer o download do mesmo.
Por isso, a dica mais importante aqui é sempre compactar o arquivo que você quer deixar para download no formato .zip. Isso é a garantia que nenhum navegador vai tentar abrí-lo pois o zip é um arquivo para download.
É isso! Agora você já sabe como criar um link em imagens, textos e tem muitas dicas com as quais pode fazer várias coisas, basta praticar e soltar a imaginação!
Faça bom uso!
Imagem: CDI
Meu caro amigo Tico, como sou novato ainda tenho muito que aprender. Essa vai ser mais uma que irei tentar fazer, só não sei se vou conseguir.Tico deixei um email no contato de seu blog tratanto da construção do meu template.
@Concentrado: Recebi seu email e está tudo certo!
Quanto ao tutorial, consegue sim. Qualquer coisa é só dizer ok?
Um abraço e obrigado pela força de sempre meu amigo!
Pingback: Como Criar Um Link: Imagens, Textos e Dicas | diggBlog
Adorei, sou nova na rede, ajudou muito, sobre o link dowload, entendi so nao sei como faz para campctar o arquivo.
Abraços
Olá gostei dos detalhes muito bem explicado, ate tirei uma duvida sobre links, nem sempre se encontra com clareza na web, só fiquei com uma duvida sobre os links em php.
Judh: Clica com o botão direito sobre a pasta e no menu que se abre, vai em Enviar para e clica em “Pasta compactada (zipada)”.
web: Obrigado pelos elogios! Só faltou deixar a sua dúvida! De qualquer forma, sempre que puder, use html puro. É mais fácil e garantido que qualquer navegador vai interpretar corretamente.
Obrigado pelos comentários e um abraço!
tico parabéns, gostei muito da explição , tu é fera , gostei muito , eu tenho algumas dúvidas ,porém vou ler e reler novamente , eu te pergunto , tudo isso é feito dentro do meu site e meu email ? , que deus te ilumine e te dê mais sabedoria além do que você já tem , para que possa nos oriêntar, obrigado e fica na paz.
Olá Valdo,
Sim! Tudo é feito dentro do seu site e também pode ser feito no seu email!
Um abraço, obrigado por suas palavras e sucesso!
oieeeee entao eu queria fazer um link pra mim mais eu nao seii nada por favor tem como vcs me ajudaremmmm:) por favor pessoal!!!
Olá suellen,
Então, no artigo está explicado como criar um link e para fazer um você precisa de um “espaço” (pode ser um blog, um site, twitter, Orkut ou até mesmo seu próprio email). O link é o meio e não o início ou o fim do processo ok?
Um abraço e sucesso!
TiCO Esteco eu ja tenho um msn e agora o que eu fasso em:) a e muiito obrigaduu por ter me respondiii a primeira perguntaah:)
Suellen,
O msn é muito limitado pra isso, mas vamos:
Para criar um link, basta que você vá até a barra de endereços do seu navegador (onde está escrito o endereço do site
) e copiar ele tá?
Faz assim:
Clica com o botão direito do mouse nele e vai aparecer um menu. Aí você clica em SELECIONAR TUDO nesse menu e aí o endereço vai ficar selecionado. Então, clica no endereço selecionado com o botão direito outra vez e no menu você clica em COPIAR aí é só clicar com o botão direito na janela do msn (onde você escreve) e no menu você clica em COLAR.
Eu acho que é assim, mas pra falar a verdade eu não uso o msn com frequência, então não me lembro, mas acho que dá pra colar direto!
. E não é bem dessa forma de criação de link que o texto trata, mas…
Um abraço e boa sorte!
ém eu ja tenho um orkut e tbm vou fazer um twitter se precisar ne
e tbm tenho um msn mais e agora o q eu faço?
e obrigadaa por me responder a primeira pergunta:)
beijossssssss
‘mais uma pergunta o como assim espaço masum entendiii
Quando eu falei em um espaço, estava me referindo a um site ou blog na internet, seu Orkut e coisas assim!
Um abraço e boa sorte!
ola tico , muito bom mesmo.
ajuda muito.
so tenho 1 duvida sou novato nisto
unde coloca a imagem para juntar ao codigo
isto é como consigo 1 endereço paraq colar no codigo html
obrigado e força ai
Olá Pedro,
Bom, você consegue um endereço da imagem hospedando essa imagem em algum lugar.
Pesquise no Google por “Como hospedar imagem” que você vai encontrar vários tutoriais.
Um abraço e obrigado pelo comentário!
Muito obrigado pelas dicas, me foram muito úteis, uma vez que sou leigo no assunto e mesmo assim consegui fazer aquilo que necessitava a partir dos passos que vc deu aqui.
Valeu
Valeu Adilson!
Fico muito feliz em saber que ajudei!
Um abraço
Obrigado por passar os seus conhecimentos adiante seus artigos ja me ajudaram a criar imagens com links e direcionalas para o site
Olá!/
Tenho uma imagem em jpg, de divulgação de um site.
Como envio esse link “dentro”ada imagem que quero anexar no corpo de um e-mail enviado pelo gmail?!
Aguardo. Obrigado.
Parabéns, muito bem explicado! Parabéns pelo site, e pela forma clara que você transmitiu tudo.
Boa,explicou tudo muito bem gostei gostei vlw mesmo men
Abração…
ola a hum tenpo comecei a criar um site html estou indo bem mas tenho uma duvida o site que estou criando e de donlond de filmes e gostaria de saber como colocar donwlond de filme sinopse e imagem do filme eu sei que o filme tem que estar hospedado mas quero saber como coloco o link
olá, muito bem explicado, mas não estou entendendo uma coisa, onde eu faço esse procedimento, na barra de endereços? ou em algum espaço do orkut ou qualquer outra rede social, como vc disse para no comentário aí em cima.
aguardo resposta.
Adorei o Site!
Tatiana Faria
ola,
gostaria de saber como faço para criar um link com uma programaçao.
exemplo:quero enviar um programa de musica que tem a duraçao de 2 hs.
para um email destinado,ou isso e impossivel,me ajudem..
agradecido
edson pirambu
Tico gostaria de saber como se faz para publicar esses arquivos com movimentos tipo flesh?
Wagner,
Para os arquivos tipo flash você precisa de um código embed, por exemplo:
*embed src=”ENDEREÇODOFLASHEMALGUMLUGAR/arquivo.swf” quality=high pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”LARGURAEMNUMERO” height=”ALTURAEMNUMERO”*
*/embed*
Eu substitui os parenteses por * para que o blog não os interprete ok?
Se ficar na dúvida dá uma pesquisada no google sobre hospedagem de arquivo em flash que você encontra muita coisa!
Depois vou escrever um tutorial ensinando passo a passo como fazer ok?
Grande abraço e obrigado pelo comentário!
Gostei da dica de como colocar link em imagem, hospedo minha foto no blogspot deu certinho ja hospedado no picasa não deu certo. Obrigado pela dica.
Oi Lucio,
Que bom que gostou da dica e não entendo porque não funcionou no picasa (o princípio é o mesmo).
Obrigado pelo comentário!
Isso funciona tbm no perfil do orkut?
Oi Lorrane, Funciona sim!
Olá Tico,
Eu queria que você fizesse um tutorial de como linkar as imagens. Por exemplo, a imagem de cabeçalho de um blog de um amigo meu possui também o MENU. Mas, é necessário colocar links para o menu funcionar! Eu só sei que dá para fazer isso no Flash, mas eu não compreendo nada deste programa e não encontro nenhum video e não encontro nenhum site explicando como resolver isso! Por favor, faça um tutorial de como linkar as imagens! Preciso muito disso. Estou procurando a muito tempo ajuda. Se não souber como fazer, pode mandar algum site que saiba me explicar ou algum video? Agradeço sua compreenção e espero um retorno.
Grato, Leonardo.
Olá Leonardo,
Olha só, eu já publiquei um artigo por aqui que explica como criar um menu para o blog em html mesmo (não precisa de flash pra isso):
http://www.novonarede.com.br/blog/index.php/2010/01/menu-como-criar-um-menu-simples-para-o-blog/
Um abraço e boa sorte!
Tico, não estou conseguindo criar o link para anexar o site que eu quero. :/
Eu preciso tirar as aspas quando eu colocar o que se pede?
Olá Matheus,
Não precisa tirar as aspas, pelo contrário, deve deixá-las. O que você tem que ver é se não apagou nada ou se não tem nada diferente do código que eu passei ok?
Um abraço!
nao consegui criar um link eu criei mas quando vai clicar aparece ”ops este link parece estar corrompido”.
Oi Funny,
Provavelmente essa mensagem indica que o problema está no link e não no processo. Tente outro link!
Um abraço e obrigado pelo comentário!
Por gentileza vc poderia me ajudar, tenho um logotipo 112×25 mas presciso colocar em ambiente seguro https para enviar a operadora de cartôes Cielo, como eu poderia fazer para colocar esse logo em https: e abrir no navegador da WEB.
Grato Ari