1. URL ou "endereço" de uma página na Internet
2. Tag <A> e sua sintaxe básica
3. Referência absoluta e relativa
4. Link relativo ao diretório maior que o atual
5. Atributos da tag <A>. Como abrir um documento por referência em uma nova janela
6. Link do título. O atributo title da tag <A>
7. Nofollow de hiperlink de atributo. Proibir a transferência da "confiança" do site por referência
8. Link interno ou âncora dentro do documento
9. Link Anchor - Imagem
10. Continuação

Referências (ou hyperlinks) permeiam a Internet como vasos sanguíneos. Se não houvesse links, não haveria Internet.

Como criar um link em um documento HTML e registrar corretamente seus atributos, o que é um URL e como os mecanismos de pesquisa se relacionam com os links - nesta próxima lição, para os iniciantes aprenderem HTML.

URL ou "endereço" de uma página na Internet

Todo documento HTML na Web tem seu próprio "endereço exato". É chamado "URL", do inglês. URL - Localizador Uniforme de Recursos

A estrutura da URL é geralmente visível na barra de endereços do navegador. Inclui:

1. O nome do protocolo é http: // ou https: //
2. Domínio do site
3. a pasta ou caminho para a pasta onde este documento está localizado,
4. Nome do arquivo (nem sempre pode ser).

Graças a este "endereço exato", tornou-se possível consultar este documento a partir do texto de outro documento.

Tag <A> e sua sintaxe básica

Espero que a palavra "sintaxe" não te assuste 🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> texto do link </a>

Como você pode ver, após o início da tag <A>, deve haver um atributo href obrigatório que especifica o endereço do documento para o qual você deseja ir.

Dentro da tag de container <A>, há um texto (embora possa haver uma imagem), que é o texto do link. É também chamado de " âncora " ou simplesmente - âncora.

Referência absoluta e relativa

Nos exemplos acima, referências absolutas foram usadas. Aqueles que contêm o URL completo do documento.

Em alguns casos, o atributo href não contém um URL completo com o nome do protocolo e o domínio do site. Se o documento ao qual o link leva, estiver no mesmo site, você poderá usar o link relativo que leva a partir do local em que o documento está localizado.

Esquema quando a referência relativa é aplicada

Exemplo: um link do documento first.html leva ao arquivo second.html, localizado na pasta de notícias.

Link relativo ao diretório maior que o atual

Código:

<a href="../first.html"> este é um link relativo para um arquivo em um nível de diretório </a>

Esse link leva ao arquivo first.html no diretório "pai", ou seja, um nível acima .

A combinação ../ indica uma pasta um nível acima da posição determinada do arquivo do qual o link está sendo feito.

Atributos da tag <A>. Como abrir um documento por referência em uma nova janela

Para que o documento seja aberto em uma nova guia do navegador, você precisa usar o atributo target = "_ blank"

Atributo de link de atributo = "_ em branco"

Não abuse disso. Não há necessidade de fazer links internos para o site com este atributo. Os usuários ficarão incomodados com a "janela de faíscas".

Em geral, com este atributo alvo - toda a história. Ainda há vários de seus significados, mas todos eles raramente são usados ​​hoje.

Isso ocorre porque eles são projetados para trabalhar com o site em quadros que não são mais populares e, com o advento do HTML5 , estão se tornando uma coisa do passado.

Link do título. O atributo title da tag <A>

Outro atributo útil é title = "Texto explicando onde esse link leva"

Sintaxe:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="dica pop-up"> este é um link de dica </a>

Como você pode ver, o navegador exibe como uma dica de ferramenta. E ainda, leva em conta os motores de busca.

Sugestão de atributo para o título do link

Nofollow de hiperlink de atributo. Proibir a transferência da "confiança" do site por referência

Há mais um atributo ambíguo para os links rel = "nofollow"

Ele diz ao Search Engines que o documento do link pode não ser confiável. Ao mesmo tempo, os indicadores de confiança (“confiança”) do site de origem não são transmitidos para o site por referência.

O tópico de “confiança” e rankings de links ainda está à frente, mas se for curto, o “destino” dos sites nos mecanismos de busca também dependerá do número de links que levam a este site. Quanto mais deles, os sites com mais autoridade vinculam - mais credibilidade do site por referência.

Em alguns casos, vale a pena "rastrear" links com esse atributo. Por exemplo, se você escrever uma resenha negativa sobre qualquer serviço.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> site ruim </a>

Link interno ou âncora dentro do documento

Em textos grandes, a instalação das chamadas “âncoras” em partes lógicas do documento é frequentemente necessária. Então, é neste lugar, você pode se referir.

A maneira mais fácil de usá-lo é criar um índice local a partir de hiperlinks que levam a essas âncoras. Tais índices são geralmente colocados no início do artigo.

Ao criar essa âncora, o atributo name é usado no lugar do atributo href.

A sintaxe para criar uma âncora é:

<a name="top"> </a>

Ao criar um link, no final do URL, adicione o sinal # - o nome da "âncora"

<p> <a href="#top"> Início </a> </ p>

A transição será exatamente para este lugar, ou seja O navegador colocará esse lugar na parte visível superior.

Muitas vezes, em documentos longos, na parte inferior, eles colocam esse link “Top”.

... tendo viajado pelo mundo dos grãos perfumados, eles encontraram a mais alta qualidade daquelas para as quais a África, Ásia, América Central e do Sul são famosas. Portanto, hoje nos cafés da marca Grãos de café Você encontrará as melhores variedades de café de fabricantes reconhecidos.

? Para o topo ?

De outro documento, você também pode ir para este lugar, se você adicionar no final da URL através do sinal # name_accord

<a href="http://domen-saita.ru/dokument.html#top"> o texto do link leva a uma âncora "top" neste documento </a>

Link Anchor - Imagem

Qualquer foto pode ser um link.

Código:

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "largura =" 100 "altura =" 131 "/> </a>

Por padrão, os links são sublinhados pelo navegador com uma linha azul sólida e as imagens de link recebem o quadro azul.

Links-fotos obter um quadro azul

Para se livrar dele, uma regra simples é adicionada ao arquivo CSS do site:

a {border: 0px;}

Esta é uma instrução para tornar a espessura da borda zero para todos os links da imagem.

Continuação

No próximo post, vou falar sobre links de e-mail, seus atributos e métodos de "proteção" de spammers malvados