Passo 1 de 5
O destino e o texto de um link
Identifique o elemento a, o endereço indicado por href e o texto apresentado ao leitor.
Trilha de aprendizado · Nível 2 · Tutorial 6
Conecte páginas com o elemento a e escreva textos de link que ajudem o leitor a prever o destino ou a finalidade da navegação.
O destino e o texto de um link
Identifique o elemento a, o endereço indicado por href e o texto apresentado ao leitor. 2 min
Conecte duas páginas locais
Insira um link em um parágrafo e teste a navegação entre dois arquivos HTML. 2 min
Crie um link para uma página externa
Use uma URL absoluta em href e reconheça quando o destino abre na mesma aba. 2 min
Escreva textos que indiquem o destino
Troque textos vagos por links que comuniquem o que o leitor encontrará, sem alterar um endereço que já está correto. 3 min
Aplicação final: conecte páginas com clareza
Crie links de ida, volta e acesso externo em duas páginas prontas. Revise os textos e confira os destinos. 3 min
Passo 1 de 5
Identifique o elemento a, o endereço indicado por href e o texto apresentado ao leitor.
O elemento a representa um hiperlink quando possui o atributo href. Observe este link e identifique suas partes:
<a href="contato.html">Contato</a>a é o nome do elemento.href="contato.html" indica o destino: o valor do atributo é contato.html.Contato, entre a abertura <a ...> e o fechamento </a>, é o texto apresentado ao leitor.<a href="contato.html">Contato</a>Associe cada parte do código ao que ela representa.
Toque em um item e depois no par correspondente.
<a href="contato.html">Contato</a>
<a href="contato.html">Fale com a equipe</a>Na segunda linha, apenas o texto entre as tags mudou. Os dois links continuam apontando para contato.html.
São mudanças diferentes:
href.a.Um link tem href="contato.html" e mostra o texto “Contato”. O endereço de destino deve mudar para atendimento.html, mas o leitor deve continuar vendo “Contato”. O que você altera?
Passo 2 de 5
Insira um link em um parágrafo e teste a navegação entre dois arquivos HTML.
Para conectar arquivos da mesma pasta, use o nome do destino em href.
No parágrafo <p>Veja os horários de atendimento.</p>, podemos envolver apenas “horários de atendimento” com o elemento a:
<p>Veja os <a href="horarios.html">horários de atendimento</a>.</p>Dica
Esse link aponta para horarios.html, mas não cria o arquivo. Para a navegação funcionar, a página de destino precisa existir no caminho indicado.
Agora você vai conectar uma página inicial a uma página de contato. Copie os documentos prontos abaixo e salve-os na mesma pasta, com os nomes indicados. Você só vai alterar o parágrafo de index.html.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Início</title>
</head>
<body>
<h1>Início</h1>
<p>Conheça nossa página de contato.</p>
</body>
</html><!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Contato</title>
</head>
<body>
<h1>Contato</h1>
<p>Atendimento: de segunda a sexta, das 9h às 17h.</p>
</body>
</html><p>Conheça nossa ____.</p>Escreva somente o elemento que substitui ____. O destino deve ser contato.html e o texto deve ser página de contato.
Depois de responder, confira com o exemplo: você usou o elemento a, o atributo href, o destino correto, o texto solicitado e a tag de fechamento?
Escreva pelo menos 1 caracteres (0/1).
Em index.html, substitua apenas “página de contato” pelo elemento que você escreveu. Mantenha o restante do parágrafo e salve.
Abra index.html no navegador, ou atualize se já estiver aberto, e clique em “página de contato”.
Confirme o resultado: a página deve mostrar o título “Contato” e a informação “Atendimento: de segunda a sexta, das 9h às 17h.”
Dica
Confira se contato.html foi salvo na mesma pasta de index.html e se o nome e a extensão correspondem ao valor de href. Depois de corrigir, teste novamente.
Passo 3 de 5
Use uma URL absoluta em href e reconheça quando o destino abre na mesma aba.
Para criar um link para uma página de outro site, coloque a URL absoluta em href. A estrutura do elemento a continua a mesma usada nos links locais.
<p>Consulte a <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML">documentação de HTML</a>.</p>Em uma página do seu site, complete o link usando a URL absoluta https://pt.wikipedia.org/. Digite apenas o endereço, sem acrescentar aspas.
<a href="____">Wikipédia em português</a>
Nos links simples deste tutorial, um clique comum abre o destino na mesma aba, substituindo a página que estava sendo exibida.
Isso vale também para destinos externos. Ser uma página de outro site não provoca, por si só, a abertura de uma nova aba.
Aqui, consideramos um clique sem teclas modificadoras e sem comandos do navegador para abrir outra aba.
<a href="https://pt.wikipedia.org/">Wikipédia em português</a>O que acontece ao clicar nesse link normalmente, sem teclas modificadoras nem comandos especiais do navegador?
Passo 4 de 5
Troque textos vagos por links que comuniquem o que o leitor encontrará, sem alterar um endereço que já está correto.
O texto do link deve ajudar o leitor a prever o que encontrará ou poderá fazer no destino. Textos como “clique aqui” e “saiba mais” não comunicam isso por si só.
Exemplo
Para uma página com o cardápio de um café, “Cardápio do café” é claro. “Clique aqui para acessar a página com todas as informações sobre o cardápio do café” é mais longo, mas não orienta melhor. Prefira informação relevante, sem palavras desnecessárias.
A página visita.html informa os dias e horários de visita de um museu. Ela não vende ingressos. Qual texto de link descreve melhor esse destino?
Neste exemplo, o endereço já está correto e leva aos horários de atendimento. Troque o texto vago e ajuste a frase ao redor para que a leitura fique natural.
<p>Para saber quando visitar, <a href="horarios.html">clique aqui</a>.</p><p>Antes da visita, consulte os <a href="horarios.html">horários de atendimento</a>.</p>Dica
O valor de href continua sendo horarios.html. Melhorar o texto visível não exige alterar um endereço correto. Leia a frase inteira para conferir se o novo texto se encaixa.
A página agenda.html lista as datas e os horários das oficinas. Ela não permite fazer inscrições. O endereço do link abaixo já está correto.
<p>Para planejar sua participação nas oficinas, <a href="agenda.html">clique aqui</a>.</p>Reescreva o parágrafo completo em HTML: substitua “clique aqui” por um texto descritivo, ajuste a frase se necessário e preserve o valor de href.
Passo 5 de 5
Crie links de ida, volta e acesso externo em duas páginas prontas. Revise os textos e confira os destinos.
Crie uma nova pasta chamada pratica-links. Copie os documentos completos abaixo e salve-os como index.html e materiais.html nessa mesma pasta.
Esta é uma prática separada: não substitua o index.html do exercício anterior. Os parágrafos sem links serão editados na próxima tela.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Central de estudos</title>
</head>
<body>
<h1>Central de estudos</h1>
<p>Consulte os materiais de estudo.</p>
<p>Use a documentação de HTML da MDN como referência.</p>
</body>
</html><!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Materiais de estudo</title>
</head>
<body>
<h1>Materiais de estudo</h1>
<p>Temas sugeridos: títulos, parágrafos e links.</p>
<p>Retorne à página inicial.</p>
<p>Referência para consulta: <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML">clique aqui</a>.</p>
</body>
</html>Reescreva os três parágrafos abaixo com links. Escolha textos que identifiquem os destinos e mantenha as frases naturais.
Escreva os três parágrafos na ordem indicada. Depois de comparar com o exemplo, substitua os parágrafos correspondentes nos arquivos salvos.
<p>Referência para consulta: <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML">clique aqui</a>.</p>O endereço desse link está correto. Qual alteração ajuda o leitor a prever o destino sem mudar para onde ele vai? Depois, aplique a correção em materiais.html.
Salve os dois arquivos e abra index.html no navegador.
Se algo não corresponder ao esperado, revise o href e o texto separadamente. Confira também as aspas do endereço e o fechamento </a> antes de </p>.
Resumo
Parabéns! Você concluiu: Links entre páginas com textos claros
Tutorial concluído! Você praticou a criação de links locais e externos e a revisão dos textos para orientar quem navega.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
