Até agora você veio construindo uma página web individual, que é bem legal e divertido, mas o que faz a internet tão especial é que ela está toda interligada – linkada.
O ‘H’ e o ‘T’ em HTML significam ‘hipertexto‘, que é um sistema de texto interligado. Leia mais sobre hipertexto.
Uma tag âncora (a) é usada para definir um link, mas você também precisa adicionar algo mais à tag âncora – o destino do link.
Adicione isso ao seu documento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Minha primeira página web</title> </head> <body> <h1>Minha primeira página web</h1> <h2>O que é isso?</h2> <p>Uma página simples feita usando HTML</p> <h2>Por que isso?</h2> <ul> <li>Para aprender HTML</li> <li>Para exibir <ol> <li>Pro meu chefe</li> <li>Para os meus amigos</li> <li>Pro meu gato</li> <li>Pro pequeno pato falante na minha cabeça</li> </ol> </li> <li>Porque eu me apaixonei pelo meu computador e quero dar um pouco de amor HTML</li> </ul> <h2>Onde encontrar esse tutorial</h2> <p><a href="https://codando.wordpress.com">Codando</a></p> </body> </html>
O destino de um link é definido no atributo href da tag a. O link pode ser absoluto – você indica o endereço completo do destino, como “https://codando.wordpress.com”, ou pode ser relativo à página atual.
Então se, por exemplo, você tivesse um outro arquivo chamado “gramadoverde.html”, aquela linha de código poderia ser simplesmente <a href="gramadoverde.html">O milagre de um gramado verde</a> ou alguma coisa parecida.
Um link não tem que se linkar a um outro arquivo HTML, ele pode se linkar a qualquer arquivo em qualquer lugar da web.
Links também podem enviar o usuário para outra parte da página em que eles estão. Você pode adicionar um atributo id pra qualquer tag, por exemplo <h2 id=”grama”>Grama</h2>, e então criar um link pra ele usando alguma coisa assim: <a href=”#grama”>Vai para a grama</a>. Clicar nesse link vai levar a página direto pro elemento com aquele id.
Usando o atributo “target”, você pode fazer com que o link abra numa nova página, ao invés de substituir a página em que o usuário está.
Isso pode até parecer uma boa idéia, já que não leva o usuário pra fora de seu site. Porém, existem inúmeros razões pelas quais você não deve fazer isso.
Do ponto de vista da usabilidade, esse método quebra a navegação. A ferramenta de navegação mais usada em um navegador é o botão “voltar“. Abrindo uma nova janela desabilita essa função.
De um ponto de vista mais amplo, usuários não querem que novas janelas fiquem aparecendo em todo lugar. Se eles querem abrir um link em uma nova janela eles podem escolher fazer isso no navegador.
Páginas Relacionadas
Exemplos
- Âncoras – linkando partes de uma página
Referência
Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
Codando 
desculpa ñ entendi muito bem essa parte vc teria como postar um exemplo de como abrir uma outra pagina html???
tipo assim tenho dois arquivos html salvo no desktop dai abro o primeiro e desse teria como fazer um comando para abrir o segundo arquivo automaticamente pelo link???
se der vc poderia me mostrar um exemplo desculpa o trabalho sou burro e so aprendo com exemplos mas vlw assim mesmo pelo ótimo trabalho muito bom mesmo.
Olá,
Mostro agora. =D
Digamos que você tem um arquivo html com o código aí de cima, e o outro arquivo no seu desktop tem o nome “segundapagina.html”.
Você vai procurar, no primeiro arquivo, por esse trecho
‘Codando‘
A tag ‘a’ define o link, e o atributo ‘href’ é o endereço pra onde o link vai te levar. Troque o
href=”https://codando.wordpress.com”
desse trecho por
href=”segundapagina.html”
Quando você clicar no link, vai abrir esse outro arquivo.
Pra mudar o texto do link, o texto onde você clica, você muda o que está entre o “” e o ““. Experimente trocar o “Codando” por “Segundo Página”. Ficou melhor, não?
É basicamente isso. Você pode trocar o “href” pra abrir qualquer página – na internet (aí você precisa usar o “http://”) ou no seu computador (nesse caso você usa o endereço do artigo).
Espero que tenha ajudado. E não fique com vergonha de perguntar nada. É normal que alguém começando tenha dúvidas – eu tive muitas – e nenhuma delas é “fácil demais”.
Obrigado pelo apoio!
E continue com o curso!
Brow,
Não entendi a parte q fala do Target…
Abraço!
Olá, Edcarlos
Target é um atributo que permite te dizer aonde você quer que o link abra. Era muito usado nos tempos antigos da Internet pra fazer páginas abrirem em novas janelas – os pop-ups.
Eles são um saco (o porque tá explicado ali no texto), mas se você quiser usar, só pra testar, basta colocar o seguinte código numa página:
pop-up!
Espero ter esclarecido. =D
Quando usei o link para ser aberto na mesma janela, usei o código abaixo e deu certo:
Qual é o melhor site de busca do Brasil?
Google
Depois, mesmo sabendo que não é aconselhado, tentei usar o atributo target só para testar (como aparece abaixo) e não consegui, como conserto o erro?
Qual é o melhor site de busca do Brasil?
Google
Infelizmente, o comentário acima não apareceu da forma que eu queria, pois usei códigos HTML para demonstrar como a maneira que fiz os links no Notepad, e a página usou esses códigos, mostrando apenas o conteúdo…
😦
Não deu pra ver como você fez, mas você pode fazer assim:
na mesma janela:
[a href=”http://google.com”]Google[/a]
em outra janela:
[a href=”http://google.com” target=”_blank”]Google[/a]
ps. Troque os colchetes por ”
[…] Links – Introdução à links (Tutorial Iniciante de HTML) […]
caro amigo .
já nesse passo posso usar o link para me direcionar à uma imagem do meu pc ?
usando essa opção : href=”segundapagina.html” ??
tentei isso mais naum obtive resultado, da aquele erre de q a página naum pode seer exibida ,
COMO VONVERTO UMA IMAGEM P/ HTML PARA USALA NESSE SENTIDO ?
grato ,,,, meito util esse tuto ,,, valeu mesmo