Links HTML: saiba o que são e como utilizar no seu site
Neste artigo, vamos entender o que são os links HTML, como surgiram, sua sintaxe e algumas formas de aplicação. Além disso, veremos diversos exemplos práticos, para você praticar e utilizar em suas páginas HTML.
O que são os links HTML
Desde a origem da internet, o que torna a web o que ela é hoje é justamente a possibilidade de vincular um documento a qualquer outro documento ou recurso. Essa função é chamada de hiperlink ou link. Mas afinal de contas, o que são os links HTML?
O link HTML, nada mais é que uma função do HTML que permite inserir os hiperlinks em diversos elementos, como textos e imagens. Um link precisa sempre apontar para uma URL (endereço) existente em seu site. Caso contrário, você poderá obter uma mensagem de erro 404.
O surgimento dos links HTML
Em 1980 o Fisico Britâncio Tim Berners-Lee iniciou um projeto baseado no conceito de hipertexto denominado Enquire, desenvolvido inicialmente em linguagem Pascal. Anos mais tarde, Tim Berners-Lee e Robert Cailliau conseguiram implementar a primeira comunicação entre um cliente e um servidor através da internet, o protocolo HTTP. Em 1989, surgia então a World Wide Web (www).
Em conjunto à implementação da World Wide Web, Tim Berners-Lee lançou a linguagem HTML (HyperText Markup Language). A versão inicial do HTML foi baseada na SGML, uma linguagem de estruturação de documentos. Foi dele que o HTML herdou diversas tags como as de tÃtulo (
), de parágrafos () e a de cabeçalho (). A maior diferença entre essas duas linguagens de marcação é que o HTML implementava a tag , surgindo então o link HTML, que permitia a ligação de uma página a outra.
a
), de parágrafos () e a de cabeçalho (). A maior diferença entre essas duas linguagens de marcação é que o HTML implementava a tag , surgindo então o link HTML, que permitia a ligação de uma página a outra.
Certamente esse conceito de ligação entre um documento a outro é o grande diferencial e principal conceito que define a base do funcionamento da web.
Como fazer um link em HTML
No HTML, os links são definidos pela tag . Dentro dessa tag incluÃmos o atributo href (Hypertext Reference), que é o endereço de destino do link. Dentro do conteúdo da tag , incluÃmos então o texto ou elemento que servirá como redirecionador, ou seja, que ao ser clicado, executará a função de redirecionar para o endereço dentro do atributo href.
Dessa forma, a sintaxe básica do HTML link é:
Como resultado, teremos:
Seja redirecionado a página da Jonson Jb Tutorial
Estilizando o link
Também poderÃamos atribuir um estilo único para o elemento , fazendo com que, independente da condição, ele receberia o mesmo estilo. Veja o exemplo a seguir:
Meu link personalizado
Com o código acima, aplicamos uma borda azul, um fundo na cor amarela e a cor vermelha para o texto. Aplicamos também um padding (espaçamento). Portanto, perceba que poderÃamos aplicar qualquer propriedade para a tag . Isso acontece pois o mesmo tem como padrão de display bloco. Portanto, vejamos resultado do código acima:
O atributo href
Através do atributo principal da tag , o href=””, podemos redirecionar o usuário a outro documento ou recurso. Existem três diferentes tipos de links utilizados para redirecionamento dentro do href. Um link pode ser:
- interno: redireciona para um elemento existente dentro da mesma página;
- local: utilizados para páginas contendo o mesmo domÃnio, ou seja, entre páginas do mesmo site;
- global: utilizados para páginas de outros domÃnios, ou seja, fora do site.
Veja abaixo alguns exemplos de como podem ser utilizados:
O atributo target
Além do atributo href, também podemos incluir o atributo target dentro da tag . Esse atributo informa ao navegador como o redirecionamento deverá ocorrer, abrindo a página na mesma janela/aba do navegador ou abrindo uma nova janela/aba.
Os atributos target são:
- _blank: abre a página em uma nova janela/aba;
- _self: abre a página na mesma janela;
- _parent: abre a página na mesma janela do link;
- _top: cancela todos os demais frames e abre a nova página no mesmo navegador.
Com isso, veja o exemplo a seguir onde ao clicar no link, abrirá uma nova aba do navegador com a página inicial da HomeHost:
Nesse exemplo temos o resultado:
Página inicial da Jonson Jb Tutorial
O atributo title
O atributo title permite escrever um texto que aparecerá apenas quando passarmos o mouse por cima do link. Portanto, é um atributo importante que nos permite digitar informações úteis suplementares sobre o link, como o tipo de informação que a página contém ou avisos.
Veja um exemplo de como podemos utilizar esse atributo.
Com esse código, nosso resultado será:
Criando âncoras com os links HTML
Conforme o que foi explicado no tópico “O atributo href”, uma das possibilidades de utilizar o link HTML é através do redirecionamento interno, processo que também é conhecido como âncora. Para isso, utilizamos a tag para linkar duas seções da mesma página. Além disso, podemos nomear a seção ou atribuir um ID a um determinado elemento, e assim, através da âncora, acontecerá o redirecionamento ao elemento.
Um ótimo exemplo de utilização desse processo, se encontra no inicio desse artigo: ao clicar nos links de qualquer um dos tópicos, você é redirecionado para essa posição! Este recurso também é muito utilizado dentro de menus de páginas únicas e landing pages.
Confira o exemplo a seguir, utilizando como base o seguinte código:
Agora vamos criar os links que ao serem clicados realizarão o redirecionamento para a posição do text1, do text2 e do text3:
Confira os exemplos que deixamos para você testar essa funcionalidade:
Redirecionar para o topo do artigo
Link HTML de e-mail
Atualmente, o HTML é capaz de criar um link que redireciona para o envio de e-mail. Para criar essa função, basta colocar dentro do atributo href o “mailto:” e separados por uma interrogação “?”, o “subject=”. O “mailto” deve conter o endereço ao qual será enviado o e-mail, o “subject=” nada mais é que o assunto. Vejamos então o exemplo abaixo:
O resultado dessa linha de código é:
Clique aqui para enviar um e-mail.
Posteriormente, ainda podemos acrescentar um texto pré-estabelecido para o corpo do e-mail. Para isso acrescentamos ao código o “body=”
Dessa forma, o resultado fica da seguinte forma:
Clique aqui para enviar um e-mail.
No exemplo utilizado anteriormente, incluÃmos a função de link em texto, porém, essa função é muito bem aproveitada quando inserida em imagens ou Ãcones. Atenção, para que essa forma de link funcione, é necessário ter um software de e-mail configurado em seu PC ou celular.
Link HTML e o atributo download
Anteriormente, vimos que é possÃvel utilizar dentro do href uma url global, e com isso temos diversas possibilidades de utilizar os hiperlinks. Uma dessas possibilidades é utilizar uma url que redirecione para o download de um arquivo. Apenas com o atributo href, o download irá abrir normalmente, porém é muito recomendável utilizar o atributo download. Com esse atributo, podemos definir um nome padrão para o arquivo que será baixado.
Vejamos o exemplo a seguir:
Separamos o seguinte exemplo para vocês, o nome do download está como padrão exemplo.zip:
Base link
Caso algum link utilizado possua um destino que não existe mais ou não funcione, podemos utilizar um base link para redirecionar o usuário a um endereço especÃfico. Com este objetivo, acrescente a tag
Vejamos o exemplo a seguir de como inserir um base link no seu código HTML:
Assim, caso haja algum link que não funcione no site, o mesmo será redirecionado para a página inicial da Jonson Jb Tutorial.
Certamente, esse elemento é um grande diferencial ao site, pois evita que o usuário tenha uma má experiência ao clicar num link defeituoso.
Links HTML em imagens
Já ficou claro que o a tag permite sua utilização de diversas formas. Uma das formais mais exploradas atualmente é a de links em blocos. Ou seja: uma vez que o elemento não possui nenhum impedimento com a inserção de blocos dentro dele, podemos inserir um link numa imagem, para toda uma
Portanto, vejamos o exemplo a seguir, onde vamos inserir uma imagem para um link:
Teremos como resultado o seguinte:
Perceba que no exemplo anterior, utilizamos os atributos para alterar o tamanho da imagem normalmente. Portanto, a utilização da tag link não impede a estilização do elemento. A mesma regra vale para elementos de blocos, como no exemplo a seguir:
Da mesma forma que utilizamos atributos de estilo inline normalmente, estamos agora aplicando um link para uma div inteira. Portanto, teste abaixo clicar em qualquer parte do bloco azul:
Meu link em uma Div
Pratique você mesmo
Após a leitura e estudo do conteúdo desse artigo, recomenda-se praticar! Por isso, faça testes com seus códigos, utilizando links externos, internos, locais e globais. Siga as sugestões abaixo e certamente você estará apto a utilizar as funcionalidades do link HTML em qualquer situação.
Então, seguem algumas sugestões para treinamento:
- Comece fazendo o básico, aplicando link a algumas partes do texto;
- Estilize o elemento link, tente deixá-lo com diversos estilos diferentes;
- Crie um link que tenha o formato de um botão, com cores de fundo, e cor de fonte diferente da padrão;
- Criem uma lista
- inclua um link, como um menu;
- Façam um menu que levem a determinada parte do site;
- Utilize links dentro de imagens;
- Utilize link de um download com um nome padrão do arquivo;
- Experimente utilizar link dentro de uma div completa, estilize e brinque com essadiv, aproveite para treinar seu CSS.
- e para cada
HTML Tutorial - Links de Texto, cirando-os e usando-os
O atributo "href" nomeia a concção com outra página de web. Na verdade é o lugar para onde serão enviados os usuários que clicarem no link.
Links podem ser:
- Internos - para lugares especÃficos da página (ancoras)
- Locais - para páginas do mesmo domÃnio
- Globais - para outros domÃnios, fora do site
HTMLInterno - href="#anchorname"
Local - href="../img/foto.jpg"
Global - href="http://www.jbtutorial.com/"
HTML - Links de Texto
Para marcar o inÃcio e do fim de uma âncora pode ser usado . Escolha o tipo de atributo que você precisa e coloque dentro da tag.
Exemplo:
HTML<a href="http://www.Jbtutorialehtml.com" target="_blank" title="sobre HTML Tutorial">HTML Tutorial</a>
Demo
HTML - Link Targets
O atributo "target" diz ao navegador se ele precisa abrir outra página na mesma janela ou em outra.
| target=" | _blank" | Abrir uma nova janela |
| _self" | Abrir a página na mesma janela | |
| _parent" | Abrir nova página na mesma janela do link | |
| _top" | Abre a nova página no mesmo navegador cancelando todos os demais frames |
O exmplo mostra como uma página pode ser aberta em uma janela do navegador. Desta forma podemos permanecer na página do tutorial e abrir uma nova página de navegação.
HTML<a href="http://www.google.com/" target="_blank" >Google </a>
Demo
HTML - Âncora
É usada para lincar duas seções da mesma página. Desta forma temos que nomear essas seções. Para isso é indicado dar uma olhadano próximo exemplo.
HTML<h1>HTML - Hipertexto de Referência / href<a name="top"></a></h1>
<h2>HTML - Links de Texto<a name="text"></a></h2>
<h2>HTML - Texto de E-mail<a name="email"></a> </h2>
Depois temos que fazer um código para o link, colocando primeiro o nome da âncora.
HTML<a href="#top">Ir para cima</a>
<a href="#text">Aprender sobre links de texto</a>
<a href="#email">Aprender sobre endereços de e-mail</a>
Demo
Ir para cimaAprender sobre links de textoAprender sobre endereços de e-mail
HTML - Link de E-mail
Fazer um link de e-mail é bem simples. Se você quer que alguém te escreva um e-mail, a melhor maneira seria colocar a disposição um link com o seu e-mail e pre-estabelecer os assuntos.
HTML<a href="Suporte.jbtutorial@gmail.com?subject=Questions " >Perguntas aqui</a>
Demo
No caso de o assunto não ser suficiente e você quer adicionar algo ao conteúdo do e-mail, pode fazê-lo com a ajuda do próximo código:
HTML<a href="Suporte.jbtutorial@gmail.com?subject=Questions&body=Write here if you have questions " >Perguntas aqui</a>
Demo
HTML - Links de Download
Os links de download se parecem com um link normal de texto. O problema é quando você quer adicionar uma foto. A melhor solução é usar uma miniatura como link, mas falaremos mais disso na próxima lição.
HTML<a href="http://www.Jbtutorial.com/htmlT/text.zip">Documento de Texto</a>
HTML - Default link/Base link
use a tag no interior do elemento
HTML<head>
<base href="http://www.jbtutorial.com/"></head>
TAGS :
Um navegador lê absolutamente tudo que você escreve em um documento HTML. Tags tem três partes, como foi dito anteriormente, a abertura, o fechamento e o conteúdo.
Como você ira aprendr existem milhões de tags HTML. Absolutamente todos os elementos que aparecem no navegador possuem uma tag ou duas.
HTML<openingtag>Conteúdo</closingtag>
<p>Parágrafo</p>
Tags são escritas em letras pequenas. Esse é o padrão para escrever em XHTML e HTML Dinâmico.
Abaixo estão alguns exemplos de tags em HTML.
HTML<body>
<p>parágrafo</p>
<h2>TÃtulo (cabeçalho)</h2>
<i>italico</i>
<b>negrito</b>
</body>
Exceções ; tags que não exigem tag de fechamento.
Há algumas tahs que não se encontram no modelo apresentado. A razão é que essas tags não tem conteúdo. Devido esse fato, nós usaremos uma maneira modificada de escrever essas tags.
O exemplo mais simples é a "Quebra de linha"
HTML<br/>
Essa tah é uma combinação de duas tags, abrir e fechar. Esse é o jeito mais eficiente de usar. Quebras de linha sçao usadas para dizer ao navegador que você quer descer uma linha, mas não quer fechar o parágrafo.
Seguindo esse exemplo, outras tags foram modificadas para escrever de uma maneira mais simples e rápida.
HTML<img src="../img/image.jpg" /> -- Tag de Imagem --
<br /> -- Tag de Quebra de Linha --
<input type="text" size="12" /> -- Acrescimo de Arquivo --
Como você pode ver, o navegador é capaz de reproduzir imagens caso forneçamos a localização usando o atributo "scr". Mais sobre isso no próximo tutorial.