Tutorial Html Sites Prontos - Links e Âncoras
Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro documento. Nestas páginas, temos visto exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links.
Para inserir um link em um documento, utilizamos a Tag <A>, da seguinte forma:
<A HREF = "arq_dest">âncora</A>
onde:
arq_dest
é o URL do documento de destino;
âncora
é o texto ou imagem que servirá de ligação ao hipertexto do documento sendo apresentado para o documento de destino, ou seja, uma parte especifica do documento requisitado.
Caminhos para o documento de destino:
Caminho relativo:
O caminho relativo pode ser usado sempre que queremos fazer referência a um documento que esteja no mesmo servidor do documento atual.
Através do campo Location do browser, vemos que este documento está localizado em um diretório raiz do servidor www.gpsites.net Para escrevermos um link deste documento para o documento tutorial-html-templates-prontos.html no diretório raiz public_html, tudo que precisamos fazer é escrever:
Veja o <A HREF="tutorial-html-templates-prontos.html">Tutorial HTML GPsites.net</A>
que é apresentado como:
Veja o Tutorial HTML GPsites.net
Da mesma forma, se quisermos um link deste documento para um outro que esteja em diretório diferente neste mesmo servidor, escrevemos, por exemplo:
<A HREF="templatesprontos/templatessitesprontos.html"">Templates sites prontos GPsites.net</A>
que produz o link: Templates sites prontos GPsites.net
Para usar links com caminhos relativos é preciso, portanto, conhecer a estrutura do diretório do servidor no qual estamos trabalhando.
Caminho absoluto:
Utilizamos caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo:
<A HREF="http://www.ferramentasweb.com.br/hospedagem.html">Hospedagem de sites</A>
O link ficará assim:
Hospedagem de sites
Com a mesma sintaxe, é possível escrever links para qualquer servidor de informações da Internet.
Tutorial Html Sites Prontos - Âncoras
Ligações para trechos de documentos
Além do atributo href, que indica um documento destino de uma ligação hipertexto, o elemento A possui um atributo NAME que permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto.
Neste documento temos diversos parágrafos marcados como chegada de um link, por exemplo:
<h3><A NAME="links">Links e Âncoras</A></h3>
que faz com que a âncora Caminho relativo seja o destino de um link. Se escrevermos:
<A HREF="#links">Links e Âncoras</A> veja o link abaixo:
Links e Âncoras
teremos uma ligação hipertexto para um trecho deste mesmo documento mais especificamente no começo dessa página do tutorial sobre links:
Da mesma forma, construímos links para trechos determinados de outros documentos, desde que saibamos quais trechos do documento destino estão marcados para ponto de chegada de um link.
Para adicionar uma imagem utilize o seguinte código:
<img src="image.gif">
Este código apenas exibe a imagem desejada.
Tutorial Html Sites Prontos - Atributos da Tag img:
- src
- pasta/nome_da_imagem
Altura e Largura- height and width
- Coloca o tamanho da imagem, height = altura e width = largura..
align - left or right
- Alinhamento left = esquerda e right = direita.
border
- Borda - colocando border=0 não é exibido a borda azul que é colocada automaticamente quando se cria um link na imagem.
alt
- É um texto alternativo que serve para descrever a sua imagem para os motores de busca e serve também para exibir a descrição caso ocorra problemas com a exibição da imagem.
Tutorial Html Sites Prontos - Link na imagem
Para usar uma imagem como link use o código abaixo:
<a href="http://www.gpsites.net"><img src="images/logo2.gif" alt="Templates Prontos" border="0"></a>
|
Tutorial HTML
Como fazer sites com templates prontos
O que é HTML
Introdução
Doctype
Código básico HTML
A tag Body
Cabeçalho
A tag Div
2 Colunas sem tabelas
3 Colunas sem tabelas
Linha Horizontal
Links Html
Bordas HTML
Meta Tags
Estilos em Cascata CSS
Fontes
Paragráfos
Paragragáfos-Imagens
Listas
A tag Pre
Quebra de linha
|
