Come inserire un collegamento ipertestuale in HTML? Creazione e utilizzo di collegamenti ipertestuali in HTML. Come creare un'immagine con un collegamento in HTML, Vkontakte, sul forum e utilizzare l'immagine CSS come collegamento ipertestuale per

In questa lezione parleremo di come realizzare un collegamento in HTML. Molto spesso nei siti web vengono utilizzati i link, che permettono di spostarsi da una pagina all'altra di un sito. La particolarità dei collegamenti è che possono portare non solo a una pagina web, ma anche a file, immagini, ecc.

I collegamenti possono essere interni ed esterni. I collegamenti interni portano a pagine e file all'interno di un sito. I collegamenti esterni portano a siti, documenti e file di terze parti. Allo stesso tempo, questi tipi di collegamenti sono impostati in modo quasi identico.

Come creare un collegamento in HTML, esempi

1. HREF - è responsabile di dove dovrebbe portare il collegamento. Un collegamento standard viene specificato come segue: Testo del collegamento.

2. TARGET - è responsabile della finestra in cui verrà aperto il documento. Predefinito nuovo documento si apre nella finestra del browser corrente. L'attributo "target" ti consente di aprire un collegamento in una nuova finestra del browser. Questo attributo ha i seguenti parametri:

• _blank - carica la pagina in una nuova finestra;
• _self - carica la pagina nella finestra corrente;
• _parent: carica la pagina nel frame principale;
• _top - cancella tutti i frame e carica la pagina in una nuova finestra.

3. NOME - utilizzato per navigare in un'area specifica all'interno della pagina. Dopo il simbolo del cancelletto, la parola chiave (segnalibro o tag) è indicata tra virgolette. Per andare a questa etichetta, usa il collegamento in cui è scritta questa etichetta.

Esempio di collegamento esterno

Vai al sito web

Vai al sito Lezioni WordPress gratuite

Esempio 4: immagini come collegamenti.

Immagine di esempio come riferimento

Esempio di collegamento a una posizione specifica su una pagina

Vai al testo

Testo della pagina...

In questo esempio, la pagina è etichettata come "elenco" utilizzando l'attributo "nome". Il collegamento a questa etichetta ti porterà a un'area specifica della pagina.

Scarica file Scrivi una lettera

Puoi impostare il colore dei collegamenti utilizzando gli attributi specificati nel tag "body" come parametri. Considera questi attributi:

• collegamento - collegamento non visitato, per impostazione predefinita viene visualizzato in blu;
• alink: collegamento attivo, rosso per impostazione predefinita;
• vlink: collegamento visitato, viola per impostazione predefinita.

Un esempio di impostazione dei colori per i collegamenti...

Pertanto, abbiamo capito il principio in base al quale vengono creati i collegamenti in HTML. È possibile assegnare stili specifici ai collegamenti. Puoi vederlo nella lezione seguendo il link.

Penso che tu abbia già capito cosa intendo parleremo in questo capitolo... e sai cos'è un collegamento, altrimenti fai clic qui.. Esistono diversi tipi di collegamenti, nonché "meccanismi" per fare clic su di essi. In questo capitolo cercherò di parlare in dettaglio di come registrare i collegamenti, nonché di approfondire la complessità del lavoro con essi.

Digressione lirica:
Una volta nell'esercito il capo di stato maggiore venne da me e diede un ordine, cito:
Portami quel documento, anche se non so dove sia né cosa sia!! Perché stai in piedi? Corriamo!! Sono in ritardo!!!

Quindi, cosa intendo con questo, affinché il browser non cada in uno stato di torpore, come ho fatto io allora, ha bisogno di sapere: il nome esatto del documento, il percorso del documento e il luogo dove portarlo, o meglio, dove aprirlo.

SU questo momento usando il blocco note, abbiamo creato un solo documento HTML, ce l'ho con il nome index.html (perché hai scelto un nome così strano index.html e perché è necessario, vedi) Non so quale, hai trovato tu con il nome tu stesso, ma penso che tu l'abbia usato, ricorda e sappi dov'è, a meno che ovviamente tu non sia il mio capo dello staff :).. In questo documento proveremo a creare un collegamento a un altro documento che non abbiamo ancora .. Quindi prima di collegarlo, devi crearlo, dato che sai già come farlo.

Apri il blocco note.

Scriviamo il codice linguaggio html. ad esempio, una pagina con una serie di fotografie.

Lo salviamo come pagina html nella stessa cartella di lavoro in cui esiste già il primo documento che abbiamo creato. Chiamiamolo primer.html per evitare confusione, e magari rinominare il primo in index.html

Ora so che hai due documenti html index.html e primer.html e che ora hai un set minimo per ulteriore formazione.

Collegamenti testuali.

Incontriamo Tag (dall'ancora), puoi allegare al suo interno del testo o un'immagine, che diventerà un collegamento a determinati documenti. Attributo dell'etichetta href specifica il nome e il percorso del documento a cui punta il collegamento.

Complessivamente è scritto così:

Ecco le mie foto!!

Come probabilmente avrai capito, primer.html è il nome del nostro secondo documento html e la scritta “Ecco le mie foto!!” questo è un pezzo di testo dal file index.html.

Per analogia con le immagini, il tag Il percorso del collegamento al documento da aprire viene specificato utilizzando gli stessi metodi:

Ecco le mie foto!! - Questa voce implica che nella directory in cui si trova il nostro primo documento html c'è una cartella stranica in cui si trova il file primer.html
Ecco le mie foto!! - Ciò significa che il file primer.html si trova un livello più in alto rispetto al documento
Ecco le mie foto!! - il documento si trova sul sito web www.site.ru..

Bene, proviamolo? Di seguito è riportato un esempio di due documenti contenenti collegamenti che puntano l'uno all'altro.

File Index.html:

Creare un collegamento a un pezzo di testo





Dimmi, caro bambino: in quale orecchio ronza?


A destra o a sinistra?



File Primer.html:

Segui il link qui





Ma non avevo indovinato! Ho un ronzio in entrambe le orecchie.


Beh, io non gioco così...

Dall'esempio puoi vedere che i collegamenti sono evidenziati a colori, per impostazione predefinita il blu è un collegamento e il rosso è un collegamento già visitato, questi colori possono essere modificati utilizzando il tag di apertura che ci è già ben noto< body >e i suoi attributi.

collegamento: colore del collegamento.
alink - colore del collegamento attivo cliccato.
vlink - colore del collegamento visitato.

E' scritto così:

Continuando a parlare del colore di un collegamento testuale, vale la pena ricordare che, se necessario, è possibile forzare l'evidenziazione a colori sia dell'intero collegamento che delle sue singole parti (frasi, parole, lettere) utilizzando un tag familiare e il suo colore attributo. Questo però non vale solo per il colore: puoi anche impostare separatamente la dimensione, lo stile e il carattere del testo. Ma ricorda che la manipolazione del colore deve essere eseguita all'interno del tag Qui e non eccessivo, altrimenti il ​​colore del collegamento sarà predefinito o specificato nel tag

File Index.html:

Arcobaleno



Guarda la frase che ti aiuterà a ricordare i luoghi dei colori nell'arcobaleno


R
UN
D
U
G
UN




File Primer.html:

Arcobaleno




Ogni
cacciatore
auguri
Sapere
Dove
è seduto
fagiano



Torna alla pagina principale

Una delle tue pagine sul sito deve essere chiamata index.html. È il file con questo nome che il programma robot cercherà sul tuo sito web quando una persona inserisce il nome del tuo sito web. Poiché la pagina index.html verrà aperta per prima, impostala come pagina principale. Puoi chiamare il resto delle pagine come preferisci... non ci sono più sfumature con i nomi.

A proposito del registro... Quando scrivi il percorso ed i nomi dei documenti, ricorda che, ad esempio: Pagina.html, pagina.html e PAGINA.html sono i nomi di documenti diversi! Lo stesso vale per i nomi dei segnalibri e delle immagini. Considerare sempre il caso quando si scrive il codice; c'è un'alta probabilità che tali nomi non vengano riconosciuti da un browser o da un altro. Stabilisci una regola per scrivere e chiamare tutto piccolo con lettere latine, allora il rischio del fattore umano e delle variazioni del programma sarà ridotto a zero.

La regola dei tre clic...

Prova a formare un "albero di collegamenti" in modo tale che un visitatore del sito possa arrivare da qualsiasi pagina a qualsiasi punto del sito con un numero minimo di clic. Più di tre transizioni nella posizione desiderata sul sito non vanno più bene: il caricamento infinito di pagine non necessarie per una persona può portare a esaurimento nervoso e chiusura prematura del sito. Risparmia tempo, denaro e nervi alle persone.

La caratteristica principale di un documento HTML è la presenza in esso di collegamenti ipertestuali (o semplicemente collegamenti) ad altri documenti, siti, file, immagini, ecc. È la capacità di inserire collegamenti a oggetti esterni alla pagina che ha reso Internet così popolare e comodo da usare. Pertanto, quando crei il tuo sito web, ricorda sempre la “magia” dei link.

In questa lezione parleremo di come creare un collegamento a un sito web, alla sua singola pagina o file. Imparerai come modificare il testo di un collegamento, come aprirlo in una nuova finestra, come creare un collegamento a un'immagine, cosa sono i collegamenti esterni ed interni e molto altro. Inoltre, hai già informazioni su come lavorare con i collegamenti, di cui abbiamo parlato nelle lezioni precedenti (ad esempio, abbiamo parlato di come cambiare il colore di un collegamento).

Nel complesso, questo tutorial renderà la tua comprensione della creazione di collegamenti completa e sufficiente. Capirai come creare un collegamento ipertestuale in HTML e perché. E imparerai a controllarne le proprietà.

Termini § 1. Collegamento al file, collegamento al sito, collegamento alla pagina

Numerose domande su come un collegamento a un file differisce da un collegamento a un sito o alla sua singola pagina mi hanno costretto a inserire la risposta all'inizio di questa lezione. La risposta è: niente. Tutti i collegamenti elencati sono esterni alla pagina originale e vengono creati allo stesso modo.

Per non lasciarmi trasportare dai pensieri, vi mostro tutto con un esempio.

Nel browser vedremo questo:

Nel browser vedremo questo:

Come puoi vedere, tutti i tipi di collegamenti vengono creati esattamente allo stesso modo. L'unica differenza è l'indirizzo dell'oggetto a cui fare riferimento. Passiamo ora alla parte principale della lezione.

§ 2. Creazione di collegamenti esterni

I collegamenti si differenziano tra loro in esterni ed interni, nonché testo e grafica. I collegamenti esterni portano all'esterno della pagina html, i collegamenti interni portano a parti diverse della stessa pagina. I collegamenti di testo sono testo (per impostazione predefinita, è evidenziato in blu e sottolineato) e i collegamenti grafici contengono un'immagine come oggetto su cui devi fare clic per andare. Tutti questi tipi di collegamenti vengono creati in HTML utilizzando un tag (abbreviazione di ancoraggio). Diamo un'occhiata più da vicino.

Per creare un collegamento esterno a un sito, pagina o file, utilizza l'attributo tag href. Questo attributo prende come valore l'URL di un sito, pagina o file (ne abbiamo discusso sopra). Tra i tag c'è la parte visibile del collegamento (link anchor), ovvero ciò che vediamo nella schermata del browser. L'ancoraggio del collegamento può essere testo semplice (collegamento testuale) o immagine grafica(link-immagine). Un collegamento immagine viene creato inserendo un tag familiare tra i tag e . In generale, la sintassi per creare un collegamento è simile alla seguente:

Ad esempio, per creare un collegamento testuale alla home page di questo sito, è necessario scrivere il seguente codice HTML:

http://www.seoded.ru/">Pagina principale del sito web

Nel browser apparirà così:

Come ho scritto all'inizio di questa lezione, il colore del testo del collegamento (ancora) può essere modificato utilizzando . In generale, puoi applicare al testo dei link le stesse regole che valgono per il testo principale della pagina, ovvero evidenziarlo in grassetto, corsivo, utilizzare titoli, ecc.

§ 2.1 Collegamenti grafici (collegamenti alle immagini)

Come ho detto sopra, per creare un collegamento immagine, è necessario utilizzare . Un esempio di tale collegamento è simile al seguente:

E il browser mostrerà:

Per impostazione predefinita, il browser circonda l'immagine in un collegamento grafico con una cornice. Se ciò non è desiderato, l'attributo border del tag IMG dovrebbe essere impostato su 0:

confine="0">

Pagina iniziale

§ 3. Collegamenti interni

I collegamenti interni vengono utilizzati per navigare comodamente attraverso pagine con molti contenuti. È stato con il loro aiuto che ho realizzato i “Contenuti della lezione” (vedi all'inizio di questa pagina). I collegamenti interni vengono creati utilizzando lo stesso principio dei collegamenti esterni. Solo il valore dell'attributo href specifica l'”ancora” del collegamento. L '"ancora" viene creata dall'attributo name:

name="nome dell'ancora">testo

E il nome dell '"ancora" è fissato arbitrariamente. Vale la pena dire qui che non tutti i browser comprendono i nomi russi delle “ancore”, quindi consiglio di utilizzare l’alfabeto latino. Il testo tra i tag per creare un'”ancora” non è richiesto e, molto spesso, non è specificato.

"I am morbillo" si trova in quei punti della pagina in cui l'utente dovrebbe andare dopo aver cliccato sul collegamento.

Come ho detto sopra, nell'attributo href di un collegamento interno, al posto dell'indirizzo, viene indicato il nome dell'“ancora” desiderata preceduto obbligatoriamente dal simbolo cancelletto (#). Vediamolo con un esempio.

Ho creato un "ancoraggio" chiamato zagolovok e l'ho inserito nel codice della pagina accanto al titolo di questa lezione (Collegamenti ipertestuali in HTML). Il codice di ancoraggio è il seguente:

nome="zagolovok">

href="#zagolovok">Al titolo

E nel browser in questo modo:

Se hai notato, dopo aver cliccato sul collegamento interno al titolo, l'URL nella barra degli indirizzi del browser è cambiato:

All'indirizzo originale:

http://www..html

http://www..html#zagolovok

E utilizzando questa funzione, puoi collegarti a una posizione specifica sulla pagina da qualsiasi risorsa su Internet! Cioè, diciamo che hai creato una pagina con un lungo articolo su qualcosa (o hai pubblicato un gran numero di fotografie sulla pagina) e l'hai contrassegnata con collegamenti interni. Mentre in , dovevi collegarti non solo alla pagina con l'articolo (o le fotografie), ma a un punto specifico su di esso (o una fotografia specifica). Utilizzando l'opzione con un collegamento interno nell'indirizzo, puoi facilmente ottenere ciò di cui hai bisogno.

§ 4. Riferimenti assoluti e relativi

Pagina iniziale

Ma con i collegamenti relativi è un po’ più complicato. In tali collegamenti è indicato l'indirizzo o relativo alla cartella principale del sito (quella in cui si trova la pagina principale) oppure relativo alla pagina di origine. Tali collegamenti sono necessari, ad esempio, se il sito si trova su computer di casa. Oppure questo non è un sito, ma una pagina che rimanda ad altri documenti.

Diciamo che dobbiamo fare riferimento alla pagina klienty.html, che si trova nella stessa cartella di pagina iniziale luogo. Quindi il relativo codice di collegamento sarà simile a:

/klienty.html">Clienti

Ora supponiamo che nella stessa cartella della pagina principale ci sia una cartella zakazy e al suo interno sia già presente la pagina klienty.html, quindi il codice del collegamento relativo diventerà così:

/zakazy/klienty.html">Clienti

Ora diamo un'occhiata alla creazione di collegamenti ipertestuali relativi alla pagina di origine. Supponiamo di avere una pagina price.html (pagina sorgente) e da questa dobbiamo collegarci alla pagina klienty.html, ci sono le seguenti opzioni tipiche:

1. Le pagine price.html e klienty.html si trovano nella stessa cartella.

klienty.html">Clienti




2. nella cartella principale del sito, la pagina price.html si trova nella cartella zakazy un livello più in alto).

Il codice sarà simile al seguente:

../klienty.html">Clienti

Due punti indicano che è necessario spostarsi dalla cartella corrente a un livello superiore.




3. La pagina klienty.html e la cartella zakazy si trovano nella cartella root del sito, la cartella mebel è nella cartella zakazy, la pagina price.html è nella cartella mebel (cioè la pagina klienty.html relativa a la pagina price.html originale è due livelli più in alto).

../../klienty.html">Clienti

Cioè, ogni livello è indicato da due punti e una barra “/”.




4. nella cartella principale del sito, la pagina klienty.html si trova nella cartella zakazy (cioè ora la pagina klienty.html relativa alla pagina price.html originale si trova un livello più in basso).

zakazy/klienty.html">Clienti

In questo caso non vengono utilizzati punti e barre.




5. La pagina price.html (pagina originale) e la cartella zakazy si trovano nella cartella principale del sito, la cartella mebel è nella cartella zakazy, la pagina klienty.html è nella cartella mebel (cioè ora la cartella klienty .html è relativa alla pagina originale price.html che si trova due livelli sotto).

zakazy/mebel/klienty.html">Clienti




6. Nella cartella principale del sito ci sono due cartelle: zakazy e oplata. La pagina klienty.html si trova nella cartella zakazy, la pagina price.html originale si trova nella cartella oplata (ovvero, entrambe le pagine si trovano in cartelle diverse un livello sotto la cartella principale del sito).

../zakazy/klienty.html">Clienti

§ 5. Collegamento all'e-mail

Per creare un collegamento alla posta elettronica è necessario sostituire l'URL nel valore dell'attributo href con un indirizzo email che indichi il protocollo (mailto:). E poi quando fai clic su questo collegamento, si aprirà una finestra programma di posta con l'indirizzo email inserito nel campo “A”. Nel codice HTML appare così:

posta: [e-mail protetta]">La mia posta

E nel browser è così.

Ciao, cari lettori del sito blog! Come sapete, per promuovere con successo un sito web e aumentare la sua posizione nei risultati di ricerca, è necessario eseguire un'ottimizzazione SEO di alta qualità del sito web. Il concetto di "", che a sua volta è diviso in interno ed esterno, è indissolubilmente legato a concetti come "link a siti interni ed esterni". Pertanto, è molto importante per noi sapere quanti collegamenti dovrebbero essere presenti sul sito, come controllarne il numero, come rimuovere i collegamenti non necessari dal sito e bloccarne l'indicizzazione, come aumentare la massa dei collegamenti, ecc. Per rispondere a tutte queste e ad altre domande riguardanti i collegamenti interni ed esterni, capiamo innanzitutto cos'è un collegamento (o collegamento ipertestuale) in HTML.

In questo articolo ti spiegherò cos'è un collegamento, come creare un collegamento ipertestuale in HTML su un sito web, come aprire un collegamento in una nuova finestra, come creare un collegamento ad un indirizzo email (e-mail) e come creare un collegamento a un'immagine. Toccheremo anche concetti come tag html e attributi dei collegamenti ipertestuali, ancoraggio del collegamento, ancoraggio html e collegamenti hash. Quindi, cominciamo.

Cos'è un collegamento (collegamento ipertestuale).

Se un collegamento ipertestuale porta a una pagina Web o a un file che non esiste (eliminato, spostato) o il suo indirizzo non è corretto, tale collegamento viene chiamato collegamento interrotto. Non dovrebbero esserci collegamenti interrotti sul sito, poiché fuorviano i visitatori e, dopo aver fatto clic su tale collegamento, è improbabile che una persona ritorni al tuo sito. Parleremo più approfonditamente del motivo per cui compaiono i collegamenti interrotti, di come trovarli e risolverli, in un articolo separato. Ora continuiamo.

Come creare un collegamento (collegamento ipertestuale) in HTML su un sito web.

È molto semplice collegarsi a un'altra pagina del tuo o di un altro sito. Per creare un collegamento ipertestuale è necessario dire al browser qual è il collegamento e indicare l'indirizzo del documento a cui condurrà. Questo viene fatto utilizzando un tag HTML e l'attributo href richiesto:

Qui, l'URL è l'indirizzo del documento a cui accedere. E il testo del collegamento ipertestuale situato tra i tag E, si chiama ancoraggio del collegamento ed è visibile al visitatore della pagina web. Oltre al fatto che il testo del collegamento (ancora) informa il lettore dove verrà effettuato il passaggio, è anche molto importante nell'ottimizzazione dei motori di ricerca (SEO), poiché funge da uno dei fattori determinanti che influenzano il posizionamento del tuo sito per le parole chiave contenute in questo ancoraggio. In genere questo tipo di classificazione è chiamata classificazione dei collegamenti.

Collegamento assoluto

Vengono utilizzati per puntare a un documento su un altro sito (il collegamento è esterno).

È anche possibile creare collegamenti assoluti all'interno di un sito, ma è più corretto utilizzare indirizzi relativi, che sembrano più brevi, per creare collegamenti interni. Ma, analizzando vari siti, ho notato che la stragrande maggioranza dei webmaster realizza collegamenti interni con indirizzi assoluti. Questo ha il suo vantaggio, perché se la tua pagina viene copiata, in questo modo riceverai backlink funzionanti.

Come puoi vedere, con i collegamenti assoluti tutto è semplice. Con quelli relativi è più difficile, perché quando li crei devi capire quale valore dell'attributo href deve essere specificato, poiché dipende dalla posizione originale dei documenti. Come ho già detto, nessuno si preoccupa davvero di questo e rende assoluti tutti i collegamenti sul sito. Tuttavia, se sei interessato a saperne di più su come creare correttamente i collegamenti relativi per un sito web, posso consigliarti un articolo di Dmitry, autore del blog ktonanovenkogo.ru. Non ho mai visto una spiegazione più dettagliata e comprensibile.

Ad esempio, ti mostrerò come apparirà un collegamento che porta a un file relativo alla root del sito (abbiamo semplicemente tagliato tutto a sinistra della terza barra in un collegamento assoluto simile):

Collegamento relativo

Al principale

Testo del collegamento (ancoraggio)

I colori e il design del testo pop-up dipendono solo dalle impostazioni sistema operativo e navigatore.

Come aprire un collegamento in una nuova finestra.

Per impostazione predefinita, quando si fa clic su un collegamento, un nuovo documento verrà aperto nella finestra corrente. Tuttavia, durante la navigazione sui siti Web, questo non è conveniente per me personalmente. Quando leggo un articolo e seguo un collegamento, per me è conveniente che la pagina si apra in una nuova finestra e io possa continuare a leggere l'articolo precedente in qualsiasi momento. Un altro motivo per aprire un collegamento in una nuova finestra è che quando visiti il ​​sito di qualcun altro, c'è un'alta probabilità che il lettore non torni più. Soprattutto se fa diverse transizioni e semplicemente non ricorda dove si trovava qualche minuto fa.

L'attributo target del tag ci aiuterà ad aprire il collegamento in una nuova finestra . Per impostazione predefinita ha il valore _self , che solitamente non è specificato. Per aprire il documento in una nuova finestra, modifica il valore dell'attributo target in _blank :

1	Nuova finestra

Nuova finestra

Cosa dovresti fare se, quando visiti il ​​sito di qualcun altro, dove i collegamenti si aprono nella finestra corrente, desideri aprirli in una nuova? Devi solo fare clic su di essi non con un pulsante, ma con la rotellina del mouse. In questo caso nuova pagina Si apre in una nuova finestra.

Come creare un collegamento a un'e-mail (indirizzo e-mail).

Facendo clic su questo collegamento si aprirà il programma con cui lavorare per e-mail, installato di default, dove il campo “A” sarà già compilato. Affinché l'oggetto della lettera venga compilato automaticamente, è necessario creare un collegamento a un'e-mail di questo tipo:

Dmitry KtoNaNovenkogo consiglia un altro modo per impostare i segnalibri nel testo di una pagina web, senza utilizzare ancore html. Per fare ciò, creiamo un segnalibro da qualsiasi tag HTML disponibile sulla pagina, assegnandogli l'attributo id universale. Ad esempio, aggiungiamo ai segnalibri un tag titolo h3:

Testo del titolo

È importante includere una lettera latina nell'attributo id come primo carattere del nome dell'ancora, dopodiché puoi utilizzare qualsiasi altro carattere consentito.

Torniamo, ad esempio, alla rubrica “ “, e poi proseguiamo.

Puoi utilizzare i collegamenti hash per andare alla posizione desiderata non solo all'interno di una pagina, ma anche per andare a un'altra pagina del sito. Per fare ciò, impostiamo l'ancora html nel posto giusto sulla pagina giusta e nel collegamento hash stesso scriviamo l'indirizzo di questa pagina prima del simbolo hash. Per esempio:

Collega il testo al segnalibro di ancoraggio HTML

Tipi e colori dei collegamenti ipertestuali in HTML.

• Un collegamento non visitato è blu e sottolineato.
• Collegamento attivo: diventa rosso durante il tempo che intercorre tra il clic del mouse sul collegamento e l'inizio del caricamento di una nuova pagina. È chiaro che è in questo stato solo per un breve periodo.
• Link visitato: cambia colore in viola dopo aver fatto clic su di esso.

Puoi modificare il colore dei collegamenti ipertestuali in un documento HTML utilizzando un tag e i suoi seguenti attributi:

• Collegamento: colore dei collegamenti non visitati.
• Alink – colore del collegamento attivo.
• Vlink – colore dei link visitati.

Tutti gli attributi di cui sopra possono essere combinati:

1

Spero che ora sia chiaro come creare un collegamento ipertestuale su una pagina HTML e su una e-mail, come trasformare un'immagine in un collegamento, cosa sono le ancore di testo, i collegamenti hash e le ancore html, cosa sono i tag html e gli attributi dei collegamenti. Ho cercato, come meglio potevo, di raccontare nel dettaglio cosa sono i collegamenti in HTML e cosa sono. Lascia che ti ricordi che l'inserimento di collegamenti ipertestuali nel testo viene effettuato solo in modalità HTML.

Non ho mai scritto articoli così lunghi prima, più di 10.000 caratteri. Ma l'argomento dei link non finisce qui, e continua.

Se questo articolo ti è stato utile clicca sui pulsanti social qui sotto. Ci vediamo di nuovo sulle pagine!

Buona giornata a tutti, miei cari amici e lettori. Spero che tu abbia deciso di partecipare al mio concorso e che tu stia già scrivendo del tuo viaggio nel blogging. Bene, vorrei continuare il nostro studio del linguaggio html e oggi vorrei parlarvi di una delle componenti più importanti, ovvero i collegamenti ipertestuali.

Sì, senza tali collegamenti Internet non sarebbe così conveniente. No, sto mentendo. Non sarebbe affatto facile orientarsi. Riesci a immaginare Internet senza di loro? Personalmente no.

E oggi impareremo come inserire un collegamento ipertestuale in html. Ma prima vorrei chiederti: sai cos'è un collegamento ipertestuale e in cosa si differenzia da un collegamento normale? Qui in realtà tutto è semplice: un collegamento è una semplice informazione che rimanda a un documento. Allo stesso tempo, non puoi fare clic su questo testo (non succederà nulla), ma sai dove cercare le informazioni.

Esempio: puoi scoprire come evidenziare i capelli in Photoshop su //site/adobe-photoshop/kak-vydelit-volosy/

Un collegamento ipertestuale è lo stesso testo, solo la sua essenza è che puoi fare clic su questo testo e accedere alla pagina, al sito o a qualsiasi altro oggetto desiderati. Inoltre, il testo stesso può essere qualsiasi cosa, mentre l'indirizzo è scritto separatamente all'interno e può essere completamente diverso. Comunque sia, nel linguaggio colloquiale vengono ancora chiamati semplicemente collegamenti. Ecco un esempio di collegamento ipertestuale:

Puoi leggere come evidenziare correttamente i capelli in Photoshop in uno dei miei tutorial.

Comunque. Buona teoria. Adesso passiamo alla pratica e vediamo quali sono i responsabili di tutte queste faccende.

Il tag abbinato è responsabile del collegamento ipertestuale, ma da solo non rappresenta nulla. Va sempre insieme a un attributo. E in questo caso dobbiamo scrivere costantemente lo stesso href. Nel valore dell'attributo inseriamo il collegamento alla risorsa stessa desiderata. E nel contenuto stesso scriviamo il testo stesso, che dovrebbe diventare cliccabile (funziona quando viene cliccato). Guarda l'esempio e penso che capirai tutto.

Motore di ricerca Yandex

Come hai capito, in questo esempio ho scritto che quando si fa clic su un pezzo di testo "Motore di ricerca Yandex", una persona verrà indirizzata all'indirizzo scritto nel valore dell'attributo href.

Penso che molti di voi sappiano che esistono collegamenti interni ed esterni. I collegamenti interni vengono eseguiti all'interno di una directory, ovvero il sito, mentre i collegamenti esterni portano ad alcune risorse di terze parti. E ora ti mostrerò come fare entrambe le cose.

Transizioni interne File nella stessa cartella

Ma tale transizione funzionerà a condizione che il file a cui ti stai collegando si trovi nella stessa cartella del file in cui stai inserendo il collegamento. Per le altre opzioni, tutto è leggermente diverso.

File in un'altra cartella

Apri il file pushkin.html in Notepad++

Ora trova la parola foto e avvolgila nei tag.

Ora attenzione! Nel valore dell'attributo specifichiamo il percorso relativo al file in modifica, ovvero pushkin.html stesso. Dovresti ottenere qualcosa del genere:

Foto

Cosa abbiamo fatto adesso? E abbiamo fatto quanto segue: poiché il percorso della foto si trova in una cartella img separata, che si trova nella stessa cartella del file pushkin.html, nel valore dell'attributo dobbiamo prima scrivere il nome della cartella e quindi tramite una barra (/) il nome completo del documento (nel nostro caso le fotografie).

Ora salva ed esegui il file pushkin.html nel tuo browser. Vedrai che la parola "Foto" è stata evidenziata in blu ed è diventata cliccabile, il che significa che cliccando su questo collegamento verremo indirizzati al file fofo.jpg, che si trova nella cartella img.

Così come? Tutto chiaro? Se succede qualcosa, non esitare a chiedere.

Transizioni esterne

E, naturalmente, non possiamo non menzionare i collegamenti esterni, dopo aver cliccato sui quali verremo indirizzati a un sito completamente diverso. Ma non c'è niente di complicato qui. Il punto è che inserisci l'indirizzo completo del sito o della pagina web nel valore href. Ho mostrato un esempio con Yandex sopra. Ma ecco un altro esempio:

Studierò per diventare un maestro di progetti sociali.

Qui arriviamo a una pagina specifica di un sito specifico.

Si apre in una nuova finestra

Per impostazione predefinita, quando fai clic su un collegamento, il documento si apre nella stessa finestra della tua pagina, ad es. la tua pagina si chiuderà di colpo. E questo non va bene. In particolare, per progetti o blog con contenuti promossi, è consigliabile che quando si fa clic su un collegamento, il documento si apra in una nuova finestra o scheda senza chiudere la pagina.

L'attributo target con il valore “_blank” ci aiuterà in questo. Non c'è niente di complicato qui. Dovrai solo inserirlo all'interno del tag di apertura dopo il valore dell'attributo href. Prendiamo l'estratto dal file lukomorye.html, dove abbiamo creato un collegamento alla pagina pushkin.html, solo ora scriveremo proprio questo attributo. Dovrebbe sembrare come questo:

Dal poema Ruslan e Lyudmila (Autore - A.S. Pushkin)

Bene, qui è tutto chiaro. Ora, quando fai clic sul contenuto, la pagina desiderata si aprirà in una nuova finestra. Questa cosa è molto necessaria, perché se non la registri, l'utente lascerà semplicemente la tua pagina. E così, in ogni caso, ci resterà, solo se non lo chiude appositamente. Prova a fare tutto da solo, rendi tutto bello con le tue mani. Non c'è bisogno di copiare e incollare.

In qualche modo così. Sembra che ti abbia detto tutte le cose più importanti, ma se vuoi muoverti in questa direzione e imparare HTML e CSS per creare siti Web, blog e persino negozi online professionali, assicurati di guardare un eccellente corso video su questo argomento. Le lezioni sono davvero ottime e sono pensate davvero per persone che hanno ancora poca dimestichezza con la realizzazione di siti web o non ne hanno affatto dimestichezza.

Bene, questo conclude la nostra lezione di oggi. Spero che il mio articolo ti sia piaciuto e sarò felice se diventerai un mio lettore abituale. Quindi non dimenticare di iscriverti agli aggiornamenti del mio blog per non perdere nulla di interessante. Bene, ti auguro successo in tutti i tuoi sforzi. Ciao ciao!

Cordiali saluti, Dmitry Kostin.