- Criar links entre páginas
- Links entre sites
- Links para e-mail
Escrevendo links
Links são criados usando o elemento <a> que tem o atributo chamado href que recebe a página para onde o usuário será mandado ao clicar no link.
<a href=“https://www.estudoemserie.com”>Estudo em Série</a>O texto entre a tag de abertura <a> e a tag de fechamento </a> é o texto do link que o usuário irá clicar para acessar o site dado como referencia pelo atributo href. O ideal é que o texto diga para o que o usuário irá acessar ao clicar no link ao invés de apenas “clique aqui”.
Quando criamos um link para um site diferente, o valor do atributo href será sempre o endereço completo do site, o qual é conhecido como URL absoluto.
Os navegadores mostram os links em azul e o texto sublinhado por padrão.
URL (Uniform Resource Locator) cada página da web possui uma. Uma URL absoluta começa com o nome do dominio do site, e pode ser seguido por um caminho para uma página especifica.
Links para outras páginas no mesmo site
Quando estamos criando links para outras páginas no nosso site não precisamos especificar o dominio no URL. Podemos usar um atalho conhecido como URL relativa que são uma versão simplificada das URL’s absolutas pois não precisam ter o dominio especificado.
Se todas as páginas do site estão na mesma página, o valor do href é apenas o nome do arquivo. Se tivermos pastas diferentes, usamos uma sintaxe um pouco diferente para indicar onde a página está em relação a página atual. Veremos isso adiante.
<p>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“sobre.html”>Sobre</a></li>
<li><a href=“filmes.html”>Filmes</a></li>
<li><a href=“contato.html”>Contato</a></li>
</ul>
</p>Links para páginas em pastas diferentes
Na mesma pasta usamos apenas o nome o arquivo:
<a href=”reviews.htlm”>Reviews</a>Numa pasta filha:
<a href=”music/listings.html”>Listings</a>Numa pasta neta:
<a href=”movies/dvd/reviews.html”>Reviews</a>Numa pasta mãe:
<a href=”../index.html”>Home</a>Numa pasta avó:
<a href=”../../index.html”><Home</a>Links de e-mail
<a href=”mailto:jon@example.com”>Email Jon </a>Dessa forma criamos um link que quando clicado abre o aplicativo de e-mail padrão do usuário.
Como abrir links em uma nova janela
Basta usar o atributo target com o valor _blank.
<a href=”https://www.estudoemserie.com” target=”_blank”> Estudo em Série</a>Dever ser usado quando o link aponta para outro website. É bom alertar o usuário de que o link abre para uma nova página.
Como criar um link para uma parte específica da página
No topo da página criamos uma lista contendo os links que irão levar até as respectivas seções. Ou criar um link que leva ao topo da página sem ter que fazer os usuários rolarem até em cima.
Antes de linkar uma parte específica da página precisamos identificar os pontos na página que queremos que o link vá. Fazemos isso usando o atributo id (que pode ser usado em qualquer elemento HTML). Pode ver que os títulos <h1> e <h2> receberam atributos id que identificam essas seções na página.
Um id deve sempre começar com uma letra ou um underline e em uma mesma página não pode haver dois atributos com o mesmo id.
Note que os valores dos atributos href começam com um #, seguido do valor do atributo id do elemento que você quer que o link leve.
<h1 id=”topo”> todo da lista de termos </h1>
<a href=”#arc_shot”> Arc Shot</a><br />
<a href=”#interlude”> Interlude</a><br />
<a href=”#prologue”> Prologue</a><br />
<h2 id=”arc_shot”>Arc Shot</h2>
<p> A hote in </p>
<h2 id=”interlude”> interlude</h2>
<p> A brief, intervening film… </p>
<h2 id=”prologue”> Prologue</h2>
<p> A speech, preface... </p>
<p><a href=”#top”>Top</a></p>É possível criar um link para outra página ou até mesmo para um outro site desde que as seções tenham atributos id para serem referenciados no seu link.
<a href=”https://www.estudoemserie.com/#bottom>Referências:
Duckett, J. (2011). “HTML and CSS: Design and Build Websites.” Hoboken, NJ: Wiley.
VISUAL QUICKSTART GUIDE HTML 5 and CSS3 Seventh Edition, Elizabeth Castro, Bruce Hyslop
Was this helpful?
0 / 0