HTML Para Vendedores do Mercado Livre - Links

Na reta final do Curso Básico de HTML para Vendedores do Mercado Livre. Na aula de hoje veremos um assunto bem interessante e também um tanto quanto polêmico: Links!
Polêmico porque? Bom, pelas regras do próprio site é proibido colocar links externos, acessando páginas fora do Mercado Livre. Um exemplo disso é o vendedor colocar o texto "Acesse nossa loja virtual acessando o link a seguir".  Links com referências internas como "Conheça nosso eShop" são permitidos. Seguindo o padrão das outras aulas veremos conceitos gerais de links em HTML e ao final da aula estará apto a inserir links em seu anúncio em textos e também em imagens, fora alguns macetes interessantes que poderá usar também em outras áreas. Os conceitos abordados nesse curso podem ser aplicados na elaboração de suas próprias páginas em HTML e também nas descrições de sua própria loja virtual. Isso transcende o aprendizado além do Mercado Livre.

Marcador âncora <A>

Ao navegar pela internet, o usuário se depara com palavras geralmente escritas em azul e sublinhadas, sobre as quais o cursor assume formato de uma mãozinha. Clicando neste local levará as informações diferentes, podendo esta se encontrar:

• Em outro local da mesma página;

• Em outra página no mesmo site;

• Em outro site, que pode estar em um lugar totalmente diferente do globo. Obs.: A prática desse item é proibida pelo Mercado Livre.

Esta poderosa capacidade de conexão de ideias através de links é proporcionada pela linguagem HTML através do marcador Âncora de hipertexto, representado por <A></A>.

Dentro deste marcador é preciso colocar a referência do arquivo destino, que se dá através do atributo HREF.

Exemplo:

<A HREF="referência ao arquivo destino"> texto ou imagem origem</A>

Observe que o texto ou imagem que servirá para o link aparecendo em destaque na página deverá vir entre o par de marcadores <A></A>.

Exemplo de link para outra página no mesmo site

Obs: Nos exemplos citados as URLS são apenas exemplos e não irão funcionar se clicados. É bom lembrar também que as URLS estão dentro de aspas (" "). Isso significa que o servidor vai considerar a diferença entre maiúscula e minúscula no momento da localização do arquivo. Se o arquivo outrapagina.html, por exemplo, estivesse gravado no servidor como OutraPagina.html, o documento não seria localizado e o usuário seria notificado com uma mensagem de erro.

<a href="outrapagina.html">Clique aqui</a>

Confira o exemplo na prática:

Exemplo de link a partir de uma imagem

<a href="outrapagina.html"><img src="casa.jpg"></a>

Confira o exemplo na prática:

Repare que a foto fica com uma borda azul. Isso acontece porque quando se usa uma imagem como link esta recebe automaticamente uma borda na cor padrão dos links, neste caso azul. Para tirar a borda é só acrescentar o atributo border="0" no marcador <IMG>

Exemplo de link de download de arquivo

<a href="arquivo.zip">Clique para baixar</a>

Exemplo de link para e-mail

<a href="mailto:seue-mail@seuprovedor.com.br">Fale Conosco </a>

A ação do clique nesse link resulta na abertura do programa padrão de email do sistema, como o Outlook Express.

Exemplo de link para o mesmo diretório

Nem sempre é necessário colocar uma URL completa em um link. É possível indicar apenas o nome do diretório e deixar que o navegador se encarregue de indicar qual a página principal ou index.

Quando um link apontar para uma página armazenada no mesmo diretório, não é necessário colocar o endereço da máquina. Se o documento estiver no mesmo diretório, basta indicar o nome do arquivo. Diretório para quem não sabe são as pastas. Cada pasta é um diretório.

<a href="local.html"> Localização</a>

Se o documento estiver em um subdiretório diferente de onde está o arquivo que contém o link, é preciso indicá-lo.

Exemplo:

<a href="clientes/local.html"> Localização</a>

Se o documento estiver em um diretório fora do atual. Vai ser preciso retroceder a indicação, para isso usa-se o ../ (dois pontos e barra).

Exemplo:

<a href="../local.html"> Localização</a>

Pode se usar o ../ (dois ponto e barra) quantas vezes for necessário. Ficando assim: “../../../arquivo”

BOOKMARKS

Existem situações onde os links podem levar a locais diferentes dentro da mesma página. Neste caso é conhecido como BOOKMARKS. Além de se especificar a referência ao arquivo destino dentro do marcador âncora, é preciso determinar os locais da página que servirão de destino para o link. Isto é feito da seguinte maneira:

• Cada local destino de um link dentro da página recebe um marcador âncora sendo que é atribuído um nome a este marcador;

• O link que irá levar até este marcador precisa referenciá-lo dentro do atributo HREF.

Exemplo:

Âncora dentro da página local.html:

<a id="rodape"></a>

Observe que a âncora acima não aparece no browser. Ela fica invisível. Pode ser usado tanto o atributo ID e NAME para especificar o nome da âncora.

Link da página principal.html

<a href="local.html#rodape">Clique para ver o rodapé da página local.html</a>

É possível criar um BOOKMARK para ir até o topo da página. Só é necessário referenciar o # (jogo da velha).

Exemplo:

<a href="#"> »ir ao topo </a>

Conclusão

Chegamos na reta final desse Curso Básico. Com o que vimos até aqui você já está apto(a) a brincar com suas primeiras páginas HTML e criar descrições de anúncios com embasamento técnico. Na próxima aula veremos SEO, assunto importantíssimo para quem trabalha com vendas online. Se perdeu alguma das aulas anteriores acesse a página do curso CLICANDO AQUI!