Come creare un collegamento ipertestuale in Yandex. Che cos'è un collegamento e come creare un collegamento ipertestuale in HTML. Collegamenti ipertestuali relativi e creazione di indirizzi relativi

I collegamenti possono essere suddivisi in due categorie:
collegamenti a risorse esterne - vengono creati utilizzando un tag e vengono utilizzati per espandere le capacità del documento corrente quando elaborato dal browser;
collegamenti ipertestuali - collegamenti ad altre risorse che l'utente può visitare o scaricare.

Come creare collegamenti ipertestuali sul sito

1. Struttura dei collegamenti

I collegamenti ipertestuali vengono creati utilizzando un tag accoppiato. Il testo viene inserito all'interno del tag, che verrà visualizzato sulla pagina web. Il testo del collegamento viene visualizzato nel browser con una sottolineatura, il colore del carattere è blu; quando si passa con il mouse sul collegamento, il cursore del mouse cambia aspetto.

Parametro tag obbligatorio è l'attributo href che specifica l'URL della pagina web.

puntatore di collegamento

Il collegamento ha due parti: puntatore e parte dell'indirizzo. Puntatore di collegamento è un pezzo di testo o un'immagine visibile all'utente. Parte indirizzo il collegamento non è visibile all'utente, rappresenta l'indirizzo della risorsa a cui è necessario recarsi.

La parte dell'indirizzo del collegamento è costituita da URl. URl (Uniform Resource Locator): un localizzatore di risorse uniforme. Quando si creano indirizzi per separare le parole l'una dall'altra, si consiglia di utilizzare un trattino anziché un trattino basso. In generale, URl ha il seguente formato:

Metodo di accesso: // nome server: porta / percorso

Metodo di accesso, o protocollo, scambia dati tra workstation su reti diverse. I protocolli di trasferimento dati più comuni:

file legge il file dal disco locale:

File: /gallery/pictures/summer.html

http fornisce l'accesso a una pagina Web utilizzando il protocollo HTTP:

Http://site.ru/

https è un'implementazione speciale del protocollo HTTP che utilizza la crittografia (solitamente SSL o TLS)

Https://site.ru/

ftp fa una richiesta al server FTP per un file:

Ftp: // pgu / directory / library

mailto avvia una sessione di posta con il destinatario e l'host specificati:

Mailto: [email protected]

Nome del server descrive il nome completo di una macchina sulla rete, ad esempio, site.ru. Se il nome del server non è specificato, il collegamento è considerato locale, ad es. si riferisce alla stessa macchina del documento HTML contenente il collegamento.

Numero di porta TCPdove è in esecuzione il server web. Questo è un numero che deve essere specificato se il metodo richiede un numero di porta (i singoli server possono avere il proprio numero di porta distinto). Se non viene specificata alcuna porta, l'impostazione predefinita è la porta 80. Le porte standard sono:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP

Modo contiene il nome della cartella in cui si trova il file.

2. Percorso assoluto e relativo

Quando nel collegamento viene specificato solo il nome del file, il browser presume che il file si trovi nella stessa cartella del documento contenente il collegamento ipertestuale. In pratica, i siti web contengono centinaia di documenti che vengono inseriti in cartelle separate per facilitarne la gestione. Per collegarsi a un file al di fuori della cartella contenente il documento corrente, è necessario specificare la posizione o il percorso del file. L'HTML supporta due tipi di percorsi: assoluto e relativo.

Figura: 1. Esempio di struttura di cartelle

2.1. Percorso assoluto

Percorso assoluto specifica la posizione esatta del file all'interno dell'intera struttura di cartelle sul computer (server). Il percorso assoluto del file dà accesso al file da risorse di terze parti e contiene i seguenti componenti:
1) protocollo, ad esempio http (opzionale);
2) dominio (nome di dominio o indirizzo IP del computer);
3) cartella (il nome della cartella che indica il percorso del file);
4) file (nome file).

Esistono due tipi di registrazione di un percorso assoluto, con e senza protocollo:

Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Se il file si trova nella cartella principale, il percorso del file sarà il seguente:

Http://site.ru/index.html

Se manca il nome del file, verrà caricata la pagina web, che è impostata di default nelle impostazioni del server web (il cosiddetto file indice).

Http://site.ru/

In genere, il file di indice è un documento denominato index.html. La presenza della barra finale / significa che l'indirizzo va alla cartella, se non ce n'è, direttamente al file.

2.2. Percorso relativo

Percorso relativo descrive il percorso del documento specificato rispetto a quello corrente. Il percorso viene determinato in base alla posizione della pagina Web in cui si trova il collegamento. I collegamenti relativi vengono utilizzati per creare collegamenti ad altri documenti sullo stesso sito. Quando il browser non trova il protocollo http: // nel collegamento, cerca il documento specificato sullo stesso server.

Un percorso relativo contiene i seguenti componenti:
1) cartella (il nome della cartella che indica il percorso del file);
2) file (nome file).

Il percorso del collegamento relativo ha tre convenzioni speciali:
/ punta alla directory principale e dice che è necessario avviare il percorso dalla directory principale dei documenti e andare alla cartella successiva
./ indica la cartella corrente
../ vai su una cartella (directory)

La principale differenza tra un percorso relativo e un percorso assoluto è che il percorso relativo non contiene il nome della cartella principale e delle cartelle principali, il che rende l'indirizzo più breve e se ci si sposta da un dominio a un altro, non è necessario registrare un nuovo indirizzo assoluto. Ma se una risorsa di terze parti si collega, ad esempio, alle tue immagini con i relativi indirizzi, non verranno visualizzate su un altro sito.

3. Ancore

Ancoreo collegamenti interni, creano collegamenti a diverse sezioni della pagina Web corrente, consentendo di navigare rapidamente tra le sezioni. Questo è utile quando c'è troppo testo sulla pagina. Anche i collegamenti interni vengono creati utilizzando il tag con la differenza che l'attributo href contiene il nome del puntatore, il cosiddetto ancora, non un indirizzo URl. Il segno # è sempre posizionato prima del nome del puntatore.

Come creare collegamenti in un documento HTML

(Troverai altri esempi in fondo a questa pagina)

Collegamenti ipertestuali HTML (collegamenti)

Etichetta può essere utilizzato in due modi:

1. Per collegarsi a un altro documento, utilizzando l'attributo href
2. Per aggiungere un segnalibro all'interno di un documento - utilizzando l'attributo name

Collegamenti alla sintassi HTML

Esempio

Visita il sito

questo verrà visualizzato dal browser in questo modo:

Collegamenti HTML - Attributo di destinazione

L'attributo target (destinazione) specifica dove aprire il documento collegato (quello a cui si riferisce il collegamento).

L'esempio seguente aprirà il documento collegato in una nuova finestra o scheda del browser:

Collegamenti HTML - Attributo nome

L'attributo name viene utilizzato per creare un segnalibro ("anchor" / "anchor") all'interno di un documento HTML.

Commento:
L'imminente standard HTML5 suggerisce di utilizzare l'attributo id invece dell'attributo name per specificare il nome del collegamento.
L'utilizzo dell'attributo id funziona effettivamente in HTML4 in tutti i browser moderni.

I segnalibri non vengono visualizzati in modo speciale. Non sono visibili al lettore.

Commento: Aggiungi sempre barre finali ai collegamenti delle sottodirectory. Se crei un collegamento come questo: href \u003d "http: // site / html", vengono generate due richieste al server, prima il server aggiunge una barra all'indirizzo, quindi crea una nuova richiesta: href \u003d "http: // site / html /" ...

Consigli: I collegamenti con nome vengono spesso utilizzati per creare un "sommario" all'inizio di un documento di grandi dimensioni. A ogni capitolo all'interno del documento viene assegnato un collegamento con nome e i collegamenti a ciascuno di questi ancoraggi con nome vengono inseriti all'inizio del documento.

Consigli: Se il browser non trova il collegamento denominato specificato, va all'inizio del documento. Non sorgono errori.

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

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

In generale, questo tutorial renderà la tua comprensione del link building 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 sulla differenza tra un collegamento a un file e un collegamento a un sito o alla sua pagina separata mi hanno fatto mettere la risposta all'inizio di questa lezione. La risposta è: niente. Tutti i collegamenti elencati sono esterni a l'originale pagina e vengono creati allo stesso modo.

Per non diffondere il pensiero lungo l'albero, mostrerò il tutto con un esempio.

Nel browser, vedremo questo:

Nel browser, vedremo questo:

Come puoi vedere, tutti i tipi di link vengono creati esattamente allo stesso modo. L'unica differenza è indirizzo l'oggetto a cui fare riferimento. Ora passiamo alla parte principale del tutorial.

§ 2. Creazione di link esterni

I riferimenti differiscono l'uno dall'altro per esterno e internocosì come su testo e grafico... I collegamenti esterni portano all'esterno della pagina html, interni a parti diverse lo stesso pagine. I collegamenti di testo sono testo (per impostazione predefinita, è evidenziato in blu e sottolineato), mentre i collegamenti grafici contengono un'immagine come un oggetto su cui fare clic per navigare. Tutti questi tipi di collegamenti vengono creati in HTML utilizzando un tag (abbreviazione di anchor). Consideriamolo più in dettaglio.

Per creare un collegamento esterno a un sito, una pagina o un file, utilizza l'attributo tag: href... Questo attributo prende come valore Url sito, pagina o file (ne abbiamo parlato sopra). Tra i tag e c'è la parte visibile del collegamento (l'ancoraggio del collegamento), cioè ciò che vediamo sullo schermo del browser. L'ancoraggio del collegamento può essere testo semplice (collegamento testuale) o immagine grafica (immagine collegamento). Un collegamento immagine viene creato inserendo un tag familiare tra i tag e. In generale, la sintassi per creare un collegamento è simile a questa:

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

http://www.seoded.ru/ "\u003e Home page del sito

Nel browser apparirà così:

Come ho scritto all'inizio di questo tutorial, il colore del testo dei collegamenti (ancora) può essere modificato utilizzando. In generale, puoi applicare tutto al testo dei link come al testo principale della pagina, cioè evidenziarlo in grassetto, corsivo, usare intestazioni, ecc.

§ 2.1 Link grafici (link immagine)

Come ho detto sopra, per creare un'immagine di collegamento, è necessario utilizzare al posto del testo. Un esempio di tale collegamento è simile a questo:

E il browser mostrerà:

Per impostazione predefinita, il browser circonda l'immagine nel collegamento grafico con una cornice. Se ciò non è desiderabile, l'attributo confine etichetta IMG devi assegnare il valore 0:

border \u003d "0"\u003e

Pagina iniziale

§ 3. Collegamenti interni

I collegamenti interni vengono utilizzati per una comoda navigazione su pagine con molti contenuti. È stato con il loro aiuto che ho realizzato il "Contenuto della lezione" (vedi all'inizio di questa pagina). I collegamenti interni vengono creati allo stesso modo dei collegamenti esterni. Solo nel valore dell'attributo href viene indicato "l'ancora" del collegamento. L'ancoraggio viene creato dall'attributo nome:

name \u003d "anchor name"\u003e testo

E il nome dell '"ancora" è impostato arbitrariamente. Va detto qui che non tutti i browser capiscono i nomi russi di "ancore", quindi consiglio di utilizzare l'alfabeto latino. Il testo tra i tag per creare un "ancoraggio" è facoltativo e, il più delle volte, non è specificato.

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

Come ho detto sopra, nell'attributo href del link interno, al posto dell'indirizzo, il nome dell '"ancora" desiderato è indicato con il simbolo cancelletto obbligatorio ( # ) di fronte a lui. Facciamo un esempio.

Ho creato un "ancoraggio" denominato zagolovok e inserito nel codice della pagina accanto al titolo di questo tutorial ("Collegamenti ipertestuali in HTML"). Il codice di ancoraggio è il seguente:

name \u003d "zagolovok"\u003e

href \u003d "# zagolovok"\u003e Vai all'intestazione

E nel browser in questo modo:

Se hai notato, dopo aver seguito il collegamento interno all'intestazione, 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 un punto specifico della pagina da qualsiasi risorsa su Internet! Cioè, diciamo che hai creato una pagina con un articolo voluminoso su qualcosa (o hai pubblicato un gran numero di foto sulla pagina) e lo hai contrassegnato con collegamenti interni. Mentre sei entrato, dovevi fare riferimento non solo alla pagina con l'articolo (o le foto), ma a un punto specifico su di esso (o una foto specifica). Utilizzando l'opzione con un collegamento interno nell'indirizzo, puoi facilmente ottenere ciò che desideri.

§ 4. Riferimenti assoluti e relativi

Pagina iniziale

I collegamenti relativi sono un po 'più complicati. In tali collegamenti è indicato anche l'indirizzo relativamente la cartella principale del sito (quella che contiene la pagina principale), oppure relativa alla pagina originale. Tali collegamenti sono necessari, ad esempio, se il sito si trova sul computer di casa. Oppure questo non è un sito web, ma una pagina che collega ad altri documenti.

Omettiamo che dobbiamo collegarci alla pagina klienty.htmlche mente in una cartella con la pagina principale del sito. Quindi il codice del relativo link diventerà:

/klienty.html"\u003eClients

E ora supponiamo che nella stessa cartella con la pagina principale ci sia cartella zakazy e già dentro è la pagina klienty.html Quindi il codice del relativo collegamento diventa così:

/zakazy/klienty.html "\u003e Client

Ora diamo un'occhiata alla creazione di collegamenti ipertestuali rispetto alla pagina originale... Diciamo che abbiamo una pagina price.html (pagina originale) e da essa è necessario collegarsi alla pagina klienty.html Sono disponibili le seguenti opzioni tipiche:

1. Si trovano le pagine price.html e klienty.html in una cartella.

klienty.html "\u003e Clienti




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

Il codice diventerà così:

../klienty.html"\u003eClients

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




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

../../ klienty.html "\u003e Clienti

Cioè, ogni livello è indicato da due punti e una barra " / ».




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

zakazy / klienty.html "\u003e Clienti

In questo caso, i punti e le barre non vengono utilizzati.




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

zakazy / mebel / klienty.html "\u003e Client




6. Nella cartella principale del sito ci sono due cartelle: zakazy e oplata. Pagina Klienty.html si trova nella cartella zakazy, pagina originale price.html si trova nella cartella oplata (cioè entrambe le pagine mentono in cartelle diverse un livello sotto dalla cartella principale del sito).

../ zakazy / klienty.html "\u003e Clienti

§ 5. Collegamento all'e-mail

Per creare collegamento e-mail, necessario al posto dell'URL nel valore dell'attributo href scrivi un indirizzo email che indichi il protocollo ( mailto:). Quindi, quando si fa clic su tale collegamento, si aprirà una finestra del programma di posta con un indirizzo e-mail inserito nel campo "A". Sembra questo nel codice HTML:

mailto: [email protected]"\u003e La mia posta

E nel browser così.

L'ipertesto è un testo che contiene collegamenti ad altro testo. Un esempio sono le note dell'autore su definizioni complesse o le note a piè di pagina dei traduttori in fondo alla pagina di un libro se contiene testo in una lingua straniera. I siti Internet sono un complesso sistema di transizioni ipertestuali da una pagina all'altra, all'interno della pagina stessa, nonché tra risorse che non sono legate a un singolo argomento. Questa struttura è pratica, fa risparmiare molto tempo, permette al visitatore di trovare velocemente le informazioni necessarie e di non perdersi in un gran numero di transizioni.

Inserisci un collegamento ipertestuale

In HTML, un descrittore (tag) viene utilizzato per inserire un collegamento ipertestuale che viene inserito nella posizione desiderata. Di solito viene inserito nel testo, poiché il collegamento ipertestuale stesso è una struttura di testo. Ma i collegamenti sono anche grafici (icone, pulsanti, immagini); saranno discussi ulteriormente. La loro posizione su una pagina web non è limitata al testo, ma dipende dalla decisione di progettazione del creatore del sito.

home page di Google

Questo è un esempio di come inserire un collegamento ipertestuale in un documento HTML utilizzando il tag ... Il visitatore del sito vedrà il testo sottolineato, che differisce dal colore del testo circostante (il colore del link HTML può essere qualsiasi), la "home page di Google", cliccando sulla quale, sarà portato alla pagina principale del motore di ricerca Google. Va notato che il testo del collegamento ipertestuale deve contenere informazioni su dove verrà eseguita la transizione. Questo principio dovrebbe essere seguito e accettato di regola!

Struttura dei tag ...

Potresti notare che il tag - accoppiato: tag di fine obbligatorio.

href: attributo tag specifica lo scopo del collegamento.

https://google.com/ - valore dell'attributoche contiene l'URL della risorsa a cui navigare. È racchiuso tra virgolette doppie o singole. Dipende dalla struttura di nidificazione dei tag secondo le regole HTML.

home page di Google

si chiama tutta questa costruzione elementodocumento web.

Secondo le regole HTML, alcuni elementi possono contenere altri elementi. Etichetta non un'eccezione. Se un programmatore ha bisogno di evidenziare la parola Google in grassetto, allora questo viene fatto utilizzando un tag secondo le regole generali di formattazione del testo, osservando la sequenza dei tag di nidificazione. Il webmaster deve sapere come creare un collegamento ipertestuale in HTML senza errori, altrimenti non funzioneranno. I collegamenti interrotti nel gergo informatico sono chiamati "rotti".

home page Google

Qui: elemento

home page Google

contiene un elemento nidificato

Google

Collegamenti ipertestuali assoluti

protocollo: // nome dominio / percorso file

Un esempio dell'indirizzo di un motore di ricerca comune in America: https://aol.com - assoluto, poiché contiene il nome di dominio.com.

I collegamenti ipertestuali assoluti vengono utilizzati per navigare in pagine su altri siti o per accedere a risorse situate su un altro server. La transizione viene eseguita utilizzando i protocolli Internet. I protocolli non sono l'argomento di questo articolo, ma poiché sono coinvolti nella creazione di collegamenti ipertestuali, dovresti almeno menzionarli brevemente:

• httpe https -il più comune; servono per navigare tra le pagine Internet di siti diversi;
• ftp -protocollo per caricare file su un server o scaricare da un utente da un sito;
• mailto -protocollo postale con il quale la posta elettronica viene inviata direttamente dal sito, senza entrare nella posta personale.

Esistono molti altri protocolli speciali (gopher, telnet), che sono piuttosto rari, il cui utilizzo richiede una conoscenza speciale nella programmazione o nell'amministrazione del sistema.

Collegamenti ipertestuali relativi

Con l'indirizzamento relativo, l'uso di collegamenti ipertestuali in HTML serve per navigare all'interno della risorsa e non porta al di fuori di essa. Se la pagina è talmente grande che la barra di scorrimento verticale funziona, a volte molto lunga, come, ad esempio, nei dizionari, allora è molto comodo e consigliabile utilizzare i relativi link per passare velocemente alla lettera desiderata.

Quando si crea un dizionario Internet, il programmatore posiziona l'alfabeto all'inizio della pagina e, se non per l'uso dei collegamenti, l'utente dovrebbe girare la rotellina del mouse per un tempo molto lungo per arrivare alla lettera "I".

Vai alla lettera I

dove yachiamato un'ancora,e Vai alla lettera I- destinazione dell'ancora. Per la corretta visualizzazione delle ancore, si consiglia di utilizzare lettere e numeri latini, quindi non si dovrebbe scrivere "I", anche se sarebbe più chiaro.

Ora, affinché si possa effettuare il passaggio dall'alfabeto all'inizio della pagina alla lettera "I", è necessario ancorare l'ancora al posto del documento HTML in cui iniziano le parole con la lettera "I":

lettera I

c'è un segno cancelletto davanti all'ancora, senza il quale la transizione alla lettera non funzionerà.

Indirizzamento relativo durante la creazione di un sito

Algoritmo conveniente e più generalmente accettato per la creazione di un sito Web da un programmatore:

• creare una cartella sul computer e posizionarla in una posizione di accesso rapido per comodità;
• creare la cartella principale in questa cartella;
• creazione di pagine web secondarie (index.html / page2);
• e posizionamento di file grafici in esso;
• creare una cartella e inserirvi altri oggetti (file da scaricare, ad esempio);
• riempire il sito di contenuti;
• posizionamento dei file del sito sull'hosting.

Dovrai sicuramente utilizzare i link per collegare gli elementi del sito, e sarà molto utile sapere come inserire un hyperlink in HTML su un'altra pagina dello stesso sito. Se i file del sito si trovano nella stessa directory, sullo stesso server, non è necessario utilizzare l'indirizzamento assoluto. Quando si trasferiscono i file del sito all'hosting, la connessione tra gli oggetti verrà preservata, perché anch'essi si troveranno nella stessa directory sull'hosting.

Supponiamo che un programmatore abbia creato la pagina principale del sito index.html, che ha un collegamento a un'altra pagina, page2.html, decorata con un'immagine img.png. Quindi il percorso relativo a questa immagine sarà simile a questo:

immagine

Suggerimento: quando si studia questo argomento, è meglio usare un semplice editor di testo, poiché è necessario acquisire un talento nell'ortografia corretta degli indirizzi di riferimento e per imparare a capire il codice di qualcun altro. In questa fase, un collegamento ipertestuale scritto in un blocco note sarà un buon risultato senza errori,L'HTML non li perdona e genera errori.

Modi per seguire i collegamenti ipertestuali

Per impostazione predefinita, una nuova pagina si apre nella finestra del browser corrente quando l'utente fa clic su un collegamento ipertestuale. Ma un programmatore web può modificare l'impostazione predefinita e forzare l'apertura della pagina, ad esempio, in una nuova finestra. Per questo c'è un attributo bersaglio con un certo valore. Questo può essere espresso più chiaramente in una tabella.

Sintassi degli attributi bersaglio:

home page di Google

La home page di Google si aprirà in una nuova finestra.

Nota: per aprire le pagine in una nuova scheda, non ci sono valori per questo attributo, ma è impostato dall'utente nelle impostazioni del browser.

Colore collegamento ipertestuale

Un utente di Internet esperto dovrebbe aver notato nel tempo che i collegamenti ipertestuali differiscono nel colore dal testo circostante e sono generalmente blu. I collegamenti che ha seguito e poi restituito alla pagina precedente diventano viola. L'utilizzo di collegamenti ipertestuali in HTML in una combinazione di colori non standard è un po ', ma fa risaltare il sito dal resto.

Imposta i colori dei collegamenti nel tag con l'aiuto degli attributi e dei loro valori, in cui appare il colore HTML nel sistema rgb (# 00FF00) o con un'indicazione diretta del nome del colore ("verde"). Esistono tre tipi di attributi di collegamento:

• collegamento: imposta il colore di un collegamento non visitato;
• vlink - imposta il colore del collegamento che l'utente ha già seguito;
• alink: imposta il colore del collegamento al momento della transizione a un'altra pagina. Ciò avviene rapidamente, quindi non è sempre possibile cogliere questo effetto.

Markup di esempio:

Se applichi questi attributi nel tag , i collegamenti per questo documento Web saranno blu scuro, i collegamenti visitati saranno viola e i collegamenti attivi saranno rosso-arancio.

Collegamenti ipertestuali grafici

Il progresso e lo sviluppo del web design rendono indispensabile sapere come inserire un collegamento ipertestuale in HTML come immagine. È chiaro che l'immagine deve corrispondere al contenuto della pagina di destinazione. Ad esempio, la pagina principale di un sito sulle piante medicinali può essere presentata sotto forma di foto di piante, facendo clic su di esse, l'utente accederà a una pagina che descrive le proprietà medicinali della pianta.

Il metodo di sostituzione dei pulsanti statici ( ) alla splendida grafica creata da un web designer in editor di grafica (GIMP, Photoshop).

Per inserire elementi grafici come collegamenti ipertestuali nelle pagine del sito, viene utilizzata la stessa sintassi, solo che al posto del testo, viene utilizzato un tag di inserimento immagine secondo le regole HTML:

Gli attributi per l'impostazione di testo alternativo, larghezza, altezza e altri sono ugualmente applicabili.

Chiamate dal sito

Lo standard html5 ha ampliato le funzionalità di utilizzo di Internet e ora puoi effettuare chiamate non solo dal tuo telefono, ma direttamente dal sito. È inoltre possibile utilizzare collegamenti ipertestuali in un documento HTML per questo scopo e hanno la seguente sintassi:

...abbonato...

Al posto della parola "abbonato", un contatto è comprensibile per il chiamante, come nella rubrica. Puoi anche inserire un file grafico (foto dell'abbonato).

Affinché le chiamate vengano effettuate dal sito, è necessario disporre non solo di un collegamento al numero di telefono dell'abbonato, ma anche di una cuffia (microfono, cuffie) installata sul programma VoIP del computer, la velocità di Internet deve superare 0,5 Mb / s. Le chiamate vengono pagate dal consumo di traffico. Pertanto, se Internet è illimitato, le chiamate sono gratuite.

Etica della creazione di collegamenti ipertestuali

Quando si inserisce un sito Web su Internet, un webmaster deve sapere quali tipi di collegamenti ipertestuali esistono in HTML e non solo applicarli correttamente e professionalmente, ma anche rispettare le seguenti disposizioni:

• Il collegamento ipertestuale deve essere chiaramente visibile e distinto dal testo circostante. L'utente dovrebbe sapere che si tratta di un collegamento ipertestuale.
• Dovrebbe essere chiaro all'utente dove andrà facendo clic sul collegamento. Per questo, è consigliabile utilizzare un altro attributo titolo, che descrive sinteticamente la pagina di transizione. La sintassi per applicare l'attributo è la seguente:

Yandex

• L'utente deve ricevere informazioni veritiere sul file che verrà scaricato facendo clic sul collegamento.

Arrivato alla pagina sbagliata o scaricato il file sbagliato, l'utente nel 99% dei casi abbandonerà immediatamente il sito e in futuro non vi accederà mai.

Anti-SEO durante la creazione di collegamenti ipertestuali

Oltre al lato tecnico della questione di come inserire un collegamento ipertestuale in HTML, c'è anche un aspetto morale da trattare. Ci sono molti siti a cui gli utenti sono bloccati da software di sicurezza (antivirus) o persino dal governo. Questi sono i siti che sono stati creati da programmatori web disonesti.

Uno dei trucchi che usano è inserire collegamenti ipertestuali "invisibili" in una pagina web. I truffatori sanno come creare un collegamento ipertestuale in HTML e utilizzare gli attributi per rimuovere la sottolineatura del collegamento e assegnargli il colore del testo circostante in modo che l'utente medio non lo veda. E con l'aiuto di altri strumenti di tecnologia web (CSS, JavaScript, PHP), puoi programmare il loro comportamento. Ad esempio, l'evento JavaScript OnMouseOver attiva un'azione su un elemento di una pagina web. Quando un utente passa il mouse su un collegamento invisibile, viene indirizzato a una pagina pubblicitaria su un altro sito. O peggio ancora, quando c'è un collegamento invisibile a un file e il software non necessario inizia a scaricarsi e installarsi sul suo computer. Di solito si tratta di virus che modificano la home page del browser, ingombrano il disco rigido con molti programmi e così via.

Presto tali siti saranno inclusi nella "lista nera" dei database dei virus, dei sistemi di sicurezza e tra gli stessi utenti di Internet. Tali siti non vivono a lungo e devono cambiare nome, migrare all'infinito su Internet, cambiando provider host. Ciò non contribuisce alla promozione del sito, per cui il suo creatore si impegna sempre, non lo renderà mai un megaportale, come, ad esempio, i social network. Tra le altre cose, questi trucchi causano molte emozioni negative nelle persone colpite da queste azioni.

In questa lezione parleremo come collegare in HTML... I link sono molto spesso utilizzati sui siti, consentono di passare da una pagina all'altra del sito. Una caratteristica dei collegamenti è che possono portare non solo a una pagina Web, ma anche a file, immagini, ecc.

I collegamenti possono essere interni o esterni. I collegamenti interni navigano 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 praticamente allo stesso modo.

Come collegare in HTML, esempi

1. Href - è responsabile di dove deve portare il collegamento. Il collegamento standard è impostato come segue: Testo del collegamento.

2. BERSAGLIO - è responsabile della finestra in cui si aprirà il documento. Per impostazione predefinita, un nuovo documento si apre nella finestra del browser corrente. L'attributo target 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 di una pagina. Una parola chiave (segnalibro o etichetta) è indicata tra virgolette dopo il simbolo cancelletto. Per andare a questa etichetta, utilizzare il collegamento in cui è scritta questa etichetta.

Vai al sito web

Vai al sito web

Tutorial WordPress gratuiti

Esempio 4. Immagini come collegamenti.

Vai al testo

Testo pagina ...

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

Download file

Scrivere una lettera

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

• link - link non visitato, per impostazione predefinita è visualizzato in blu;
• alink - collegamento attivo, rosso per impostazione predefinita;
• vlink è il collegamento visitato, ha il colore viola per impostazione predefinita.

...

Quindi, abbiamo capito come vengono creati i collegamenti in HTML. I collegamenti possono essere stilizzati. Puoi vederlo nella lezione cliccando sul link.