Come creare un collegamento in un documento HTML. Tag A: sintassi e attributi

  1. URL o "indirizzo" di una pagina su Internet
  2. <A> tag e la sua sintassi di base
  3. Riferimento assoluto e relativo
  4. Collegamento relativo alla directory superiore a corrente
  5. Attributi del tag <A>. Come aprire un documento per riferimento in una nuova finestra
  6. Link al titolo. L'attributo title per il tag <A>
  7. Attributo collegamento ipertestuale nofollow. Divieto del trasferimento della "fiducia" del sito per riferimento
  8. Collegamento interno o ancora all'interno del documento
  9. Link Anchor - Immagine
  10. estensione

Riferimenti (o collegamenti ipertestuali) permeano Internet come i vasi sanguigni. Se non ci fossero collegamenti, non ci sarebbe Internet.

Come creare un collegamento in un documento HTML e registrare correttamente i suoi attributi, che cos'è un URL e in che modo i motori di ricerca si riferiscono ai collegamenti - in questa prossima lezione per i principianti per imparare l'HTML.

URL o "indirizzo" di una pagina su Internet

Ogni documento HTML sul Web ha il suo "indirizzo esatto". Si chiama "URL", dall'inglese. URL - Uniform Resource Locator

La struttura dell'URL è spesso visibile nella barra degli indirizzi del browser. Include:

  1. Il nome del protocollo è http: // o https: //
  2. Dominio del sito
  3. la cartella o il percorso della cartella in cui si trova questo documento,
  4. Nome del file (potrebbe non essere sempre).

Grazie a questo "indirizzo esatto" è diventato possibile fare riferimento a questo documento dal testo di un altro documento.

<A> tag e la sua sintassi di base

Spero che la parola "sintassi" non ti spaventi più 🙂

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

Come puoi vedere, dopo l'inizio del tag <A>, deve esserci un attributo href obbligatorio che specifica l'indirizzo del documento a cui vuoi andare.

All'interno del tag contenitore <A> stesso c'è un testo (sebbene possa esserci un'immagine), che è il testo del link. È anche chiamato " Anchor " o semplicemente - Anchor.

Riferimento assoluto e relativo

Negli esempi sopra, sono stati usati riferimenti assoluti . Quelli che contengono l' URL completo del documento.

In alcuni casi, l'attributo href non contiene un URL completo con il nome del protocollo e il dominio del sito. Se il documento a cui il link conduce, si trova sullo stesso sito, è possibile utilizzare il collegamento relativo che proviene dal luogo in cui si trova il documento.

Schema quando viene applicato un riferimento relativo

Esempio: un collegamento dal documento first.html porta al file second.html, che si trova nella cartella delle notizie.

Collegamento relativo alla directory superiore a corrente

codice:

<a href="../first.html"> questo è un collegamento relativo a un file a livello di directory uno </a>

Questo link porta al file first.html nella directory "parent", ad es. un livello in su .

La combinazione ../ indica una cartella di livello superiore rispetto alla posizione specificata del file da cui viene creato il collegamento.

Attributi del tag <A>. Come aprire un documento per riferimento in una nuova finestra

Per poter aprire il documento in una nuova scheda del browser, è necessario utilizzare l'attributo target = "_ blank"

Collegamento attributo target = "_ blank"

Non abusarne. Non è necessario creare collegamenti interni al sito con questo attributo. Gli utenti saranno infastiditi dalla "finestra scintillante".

In generale, con questo attributo target - l'intera storia. Ci sono ancora alcuni dei suoi significati, ma sono tutti usati raramente oggi.

Questo perché sono progettati per funzionare con il sito su frame che non sono più popolari e, con l'avvento di HTML5 , stanno diventando un ricordo del passato.

Link al titolo. L'attributo title per il tag <A>

Un altro utile attributo è title = "Testo che spiega dove porta questo link"

sintassi:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="il suggerimento pop-up"> questo è un link suggerimento </a>

Come puoi vedere, il browser lo mostra come un suggerimento. Eppure, prende in considerazione i motori di ricerca.

Suggerimento di attributo per il titolo del collegamento

Attributo collegamento ipertestuale nofollow. Divieto del trasferimento della "fiducia" del sito per riferimento

C'è un altro attributo ambiguo per i link rel = "nofollow"

Dice ai motori di ricerca che il documento di collegamento potrebbe non essere affidabile. Allo stesso tempo, gli indicatori di fiducia ("fiducia") dal sito di origine non vengono trasmessi al sito per riferimento.

L'argomento "fiducia" e la classifica dei link è ancora avanti, ma se è breve, il "destino" dei siti nei motori di ricerca dipenderà anche dal numero di link che portano a questo sito. Maggiore è il numero di link più autorevoli, maggiore è la credibilità del sito per riferimento.

In alcuni casi, vale la pena "schermare" i collegamenti con questo attributo. Ad esempio, se scrivi una recensione negativa su qualsiasi servizio.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> sito non valido </a>

Collegamento interno o ancora all'interno del documento

Nei testi di grandi dimensioni, è spesso richiesta l'installazione di cosiddetti "ancore" in parti logiche del documento. Quindi, è in questo posto, puoi fare riferimento.

Il modo più semplice per usarlo è creare un sommario locale dai collegamenti ipertestuali che portano a questi ancoraggi. Tali sommari sono di solito collocati all'inizio dell'articolo.

Quando si crea un simile ancoraggio, viene utilizzato l'attributo name al posto dell'attributo href.

La sintassi per la creazione di un'ancora è:

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

Quando crei un link, alla fine dell'URL aggiungi il segno # - il nome dell'ancora:

<p> <a href="#top"> Inizio </a> </ p>

La transizione sarà esattamente in questo posto, ad es. Il browser posizionerà questo luogo nella sua parte superiore visibile.

Spesso, in lunghi documenti, in fondo hanno messo un tale link "Top".

... avendo viaggiato nel mondo di fragranti chicchi, hanno trovato la più alta qualità di quelli per i quali sono famosi l'Africa, l'Asia, l'America Centrale e il Sud America. Pertanto, oggi nei caffè del marchio Chicco di caffè Troverete le migliori varietà di caffè da produttori riconosciuti.

? Verso l'alto ?

Da un altro documento, puoi anche andare in questo posto, se aggiungi alla fine dell'URL il segno # name_accord

<a href="http://domen-saita.ru/dokument.html#top"> il testo del link conduce a un'ancora "top" in questo documento </a>

Link Anchor - Immagine

Qualsiasi immagine può essere un link.

codice:

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

Per impostazione predefinita, i collegamenti sono sottolineati dal browser con una linea blu continua e le immagini dei collegamenti ricevono la cornice blu.

Collegamenti: le immagini ricevono una cornice blu

Per sbarazzartene, una semplice regola viene aggiunta al file CSS per il sito:

a {border: 0px;}

Questa è un'istruzione per rendere lo spessore del bordo zero per tutti i collegamenti immagine.

estensione

Nel prossimo post parlerò dei link email, dei loro attributi e metodi di "protezione" dagli spammer malvagi