Come inserire un collegamento ipertestuale in HTML? Creazione e utilizzo di collegamenti ipertestuali in HTML. Come trasformare un'immagine in un collegamento in HTML, VKontakte, sul forum e utilizzando CSS Image come collegamento ipertestuale per
In questa lezione parleremo di come collegare in html. I link sono molto spesso utilizzati nei siti web, permettono di navigare 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 link possono essere interni o esterni. I collegamenti interni consentono di accedere a pagine e file all'interno dello stesso 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 creare un collegamento in HTML, esempi
1. HRIF— è responsabile di dove dovrebbe portare il collegamento. Un collegamento standard è definito come segue: Testo del collegamento.
2. BERSAGLIO— è responsabile della finestra in cui verrà aperto il documento. Predefinito nuovo documento si apre nella finestra del browser corrente. L'attributo "target" consente di aprire il 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. Il cancelletto è seguito da una parola chiave (segnalibro o etichetta) tra virgolette. Per andare a questa etichetta, utilizzare il collegamento in cui è scritta questa etichetta.
Esempio di collegamento esterno Vai al sito
Vai al sito
Lezioni WordPress gratuite
Esempio 4: immagini come link.
Immagine di esempio come collegamento
Un esempio di collegamento a un punto specifico di una pagina Passa al testo
Testo della pagina...
In questo esempio, la pagina è etichettata come "lista" utilizzando l'attributo "nome". Il collegamento a questa etichetta consentirà di navigare in 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:
- collegamento - collegamento non visitato, per impostazione predefinita viene visualizzato in blu;
- alink - collegamento attivo, rosso per impostazione predefinita;
- vlink è un collegamento visitato, viola per impostazione predefinita.
Esempio di colore del collegamento ...
Pertanto, abbiamo capito come vengono creati i collegamenti in HTML. I collegamenti possono essere stilizzati. Puoi vederlo nella lezione cliccando sul link.
Penso che tu abbia già capito cosa sarà discusso in questo capitolo.. e sai cos'è un link, se no, allora clicca qui.. Ci sono diversi tipi di link, così come "meccanismi" per seguirli. In questo capitolo cercherò di raccontarti in dettaglio come registrare i collegamenti, oltre a dedicare 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 e cosa sia!! Cosa stai in piedi? Corriamo!! Sono in ritardo!!!
Allora, perché sono così che il browser, come me allora, non cada in uno stato di torpore, ha bisogno di sapere: il nome esatto del documento, il percorso del documento e il luogo dove portarlo, o meglio dove per aprirlo.
SU questo momento usando il blocco note, abbiamo creato un solo documento HTML, ce l'ho con il nome index.html (perché ho scelto un nome così strano index.html e perché devo guardare) non so con cosa, tu stesso ha inventato il nome, ma penso che tu ricordi e sappia dove si trova, 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 fare riferimento ad esso, devi crearlo, grazie lo conosci già.
- Apri il blocco note.
- Scriviamo codice per linguaggio html. Ad esempio, una pagina con un numero di foto.
- Lo salviamo come pagina html nella stessa cartella di lavoro in cui esiste già il primo documento che abbiamo creato. Diciamo, per non essere confusi, chiamiamolo primer.html, e magari rinominiamo anche 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 apprendimento.
Collegamenti testuali.
Fai conoscenza tag (da anchor - anchor), puoi racchiudere un testo o un'immagine al suo interno, che diventerà un collegamento a determinati documenti. Attributo tag href specifica il nome e il percorso del documento a cui punta il collegamento.
Tutto insieme si scrive così:
Ecco le mie foto!!Come probabilmente avrai capito primer.html è il nome del nostro secondo documento html, e la scritta "Here are my photos!!" questo è un pezzo di testo dal file index.html.
Per analogia con il tag delle immagini
il percorso del collegamento al documento che si sta aprendo è scritto nello stesso modo:
Ecco le mie foto!!- E questo significa che il file primer.html è posizionato un livello più in alto rispetto al documento
Ecco le mie foto!!- il documento si trova sul sito web www.site.ru..
Bene, proviamo? Di seguito è riportato un esempio di due documenti contemporaneamente in cui sono registrati collegamenti che puntano l'uno verso l'altro.
file index.html:
Dimmi, figlia cara: in quale orecchio ronza?
IN legge O Sinistra?
file primer.html:
L'esempio mostra 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 già ben noto a noi < body > e i suoi attributi.
collegamento- colore del collegamento.un collegamento- il colore del link attivo cliccato.
link- il colore del link visitato.
È scritto così:
>Continuando a parlare del colore di un link testuale, vale la pena ricordare che, se necessario, è possibile forzare il colore evidenziando sia l'intero link che le sue singole parti (frasi, parole, lettere) con un tag familiare e il suo attributo colore. Tuttavia, questo vale non solo per il colore, ma anche separatamente puoi impostare 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 esagerare, altrimenti il colore del collegamento sarà quello predefinito o quello scritto nel tag
file index.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Cerca una frase che ti aiuti a ricordare i luoghi dei colori nell'arcobaleno.
R
UN
D
A
G
UN
file primer.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Ogni
cacciatore
auguri
Sapere
Dove
è seduto
fagiano
Torna alla pagina principale
Una delle tue pagine sul sito Necessariamente dovrebbe essere chiamato indice.htmlÈ il file con questo nome sul tuo sito che il programma robot cercherà quando una persona inserisce il nome del tuo sito. Dalla pagina indice.html si aprirà per primo, rendilo quello principale. Puoi chiamare il resto delle pagine come preferisci ... non ci sono più sfumature con i nomi.
A proposito del caso Quando scrivi il percorso e i nomi dei documenti, ricorda che, ad esempio: Page.html, page.html e PAGE.html sono i nomi di diversi documenti! Lo stesso vale per i nomi e i disegni dei segnalibri. Fai sempre distinzione tra maiuscole e minuscole quando scrivi il codice, c'è un'alta probabilità che tali nomi non vengano riconosciuti da un particolare browser. Stabilisci una regola per scrivere tutto e chiamarlo piccolo con lettere latine, quindi il rischio del fattore umano e i capricci dei programmi saranno ridotti a zero.
Regola dei tre clic.
Prova a formare un "albero di collegamenti" in modo tale che un visitatore del sito possa passare da una qualsiasi delle sue pagine a qualsiasi punto del sito per il numero minimo di clic sui collegamenti. Più di tre transizioni nel posto giusto sul sito non vanno più bene. Il caricamento infinito di pagine di cui una persona non ha bisogno può portare a un esaurimento nervoso e alla chiusura prematura del sito. Risparmia tempo, denaro e nervi alle persone.
La caratteristica principale di un documento HTML è che contiene collegamenti ipertestuali(o semplicemente collegamenti) ad altri documenti, siti, file, immagini, ecc. È stata la capacità di inserire collegamenti nelle pagine ad oggetti al di fuori di essa che ha reso Internet così popolare e comodo da usare. Pertanto, quando crei il tuo sito, ricorda sempre la "magia" dei link.
In questa lezione parleremo di 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. Inoltre, hai già informazioni su come lavorare con i collegamenti, che abbiamo toccato nelle lezioni precedenti (ad esempio, abbiamo parlato di come puoi cambiare il colore di un collegamento in ).
In generale, questa lezione renderà completa e sufficiente la tua idea di link building. Capirai come creare un collegamento ipertestuale in HTML e perché. E impara a gestirne le proprietà.
Termini
§ 1. Collegamento a un file, collegamento a un sito, collegamento a una pagina
Numerose domande sulla differenza tra un collegamento a un file e un collegamento a un sito o alla sua singola pagina mi hanno costretto a rispondere proprio all'inizio di questa lezione. La risposta è: niente. Tutti i collegamenti elencati sono esterni a iniziale pagina e vengono creati allo stesso modo.
Per non diffondere il pensiero lungo l'albero, mostrerò 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 della lezione.
§ 2. Creazione di collegamenti esterni
I collegamenti differiscono l'uno dall'altro per esterno E domestico, così come su testo E grafico. I link esterni portano al di fuori dei "limiti" della pagina html, i link interni a parti diverse lo stesso pagine. I collegamenti di testo sono testo (per impostazione predefinita, è evidenziato in blu e sottolineato) e i collegamenti grafici, come oggetto su cui è necessario fare clic per andare, contengono un qualche tipo di immagine. Tutti questi tipi di collegamenti vengono creati in HTML utilizzando un tag (un'abbreviazione per l'ancora inglese - ancora). Consideriamolo in modo più dettagliato.
Per creare un collegamento esterno a un sito, una pagina o un file, viene utilizzato 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 link (link anchor), cioè quello che vediamo sullo schermo del browser. L'ancoraggio del collegamento può essere di testo normale (link di testo) o immagine grafica(link-immagine). Un collegamento immagine viene creato inserendo un tag familiare tra i tag e. In generale, la sintassi per la creazione di un collegamento è simile a questa:
Ad esempio, per creare un collegamento testuale alla home page di questo sito, dovresti scrivere il seguente codice HTML:
http://www.seoded.ru/"> Pagina iniziale del sito
Nel browser apparirà così:
Come ho scritto all'inizio di questo tutorial, il colore del testo del collegamento (ancora) può essere modificato utilizzando . In generale, puoi applicare lo stesso al testo dei collegamenti come al testo principale della pagina, ad es. grassetto, corsivo, usa intestazioni, ecc.
§ 2.1 Link grafici (link immagine)
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 nel collegamento immagine con una cornice. Se questo non è desiderato, allora l'attributo confine etichetta imm dovrebbe essere impostato su 0:
bordo="0">
Pagina principale
§ 3. Collegamenti interni
Per una comoda navigazione attraverso pagine con molti contenuti, vengono utilizzati collegamenti interni. È 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è indicata l'"ancora" del collegamento. L'ancora è creata dall'attributo nome:
name="nome ancora">testo
E il nome dell '"ancora" è impostato arbitrariamente. Qui vale la pena dire che non tutti i browser comprendono i nomi russi di "ancore", quindi consiglio di utilizzare l'alfabeto latino. Il testo tra i tag per creare un "ancoraggio" è facoltativo e, molto spesso, non specificato.
"Sono un morbillo" si trova in quei punti della pagina a cui l'utente dovrebbe andare dopo aver fatto clic sul collegamento.
Come ho detto sopra, nell'attributo href link interno al posto dell'indirizzo, viene indicato il nome dell'"ancora" desiderata con il cancelletto obbligatorio ( # ) di fronte a lui. Facciamo un esempio.
Ho creato un "ancora" chiamato intestazione e l'ho inserito nel codice della pagina accanto al titolo di questa lezione ("Collegamenti ipertestuali in HTML"). Il codice "ancora" è il seguente:
nome="titolo">
href="#zagolovok">Vai al titolo
E nel browser in questo modo:
Se noti, dopo aver cliccato sul link interno al titolo, l'URL nella barra degli indirizzi del browser è cambiato:
All'indirizzo originale:
http://www.html
http://www..html#intestazione
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 lungo articolo su qualcosa (o hai pubblicato un gran numero di foto sulla pagina) e l'hai contrassegnata con collegamenti interni. Essendo in , dovevi fare riferimento non solo a una pagina con un articolo (o foto), ma a un certo punto (o una certa foto). Utilizzando l'opzione con un collegamento interno nell'indirizzo, puoi ottenere facilmente ciò di cui hai bisogno.
§ 4. Riferimenti assoluti e relativi
Pagina principale
Ma con i collegamenti relativi, è un po' più complicato. In tali collegamenti, è indicato anche l'indirizzo relativamente la cartella principale del sito (quella in cui si trova la pagina principale), o relativa alla pagina originale. Tali collegamenti sono necessari, ad esempio, se il sito si trova su computer di casa. Oppure non è un sito Web, ma un puntatore di pagina ad altri documenti.
Diciamo che dobbiamo collegarci a una pagina cliente.html, che mente in una cartella Con pagina principale luogo. Quindi il codice del collegamento relativo sarà simile a questo:
/clienty.html">Clienti
Supponiamo ora che nella stessa cartella con la pagina principale sia ordine delle cartelle e già dentro si trova la pagina klienty.html, quindi il relativo codice del link diventerà così:
/zakazy/clienty.html">Clienti
Ora diamo un'occhiata alla creazione di collegamenti ipertestuali rispetto alla pagina originale. Diciamo che abbiamo una pagina prezzo.html(pagina di origine) e da essa è necessario collegarsi alla pagina cliente.html Ecco le seguenti opzioni tipiche:
1. Le pagine price.html e clienty.html lo sono in una cartella.
clientty.html">Clienti
2. nella cartella principale del sito, pagina prezzo.html è nella cartella dell'ordine un livello superiore).
Il codice diventerà così:
../clienty.html">Clienti
Due punti indicano che è necessario uscire dalla cartella corrente a un livello superiore.
3. La pagina klienty.html e la cartella zakazy lo sono nella cartella principale del sito, cartella mobili è nella cartella dell'ordine, pagina prezzo.html è nella cartella mebel(ovvero la pagina klienty.html relativa alla pagina price.html originale si trova due livelli più in alto).
../../clienty.html">Clienti
Cioè, ogni livello è indicato da due punti e una barra " / ».
4. nella cartella principale del sito, pagina clienty.html è nella cartella dell'ordine(ovvero ora la pagina klienty.html è relativa alla pagina price.html originale un livello in basso).
zakazy/clienty.html">Clienti
In questo caso, i punti e le barre non vengono inseriti.
5. La pagina price.html (pagina originale) e la cartella zakazy sono nella cartella principale del sito, cartella mobili è nella cartella dell'ordine, pagina clienty.html è nella cartella mebel(ovvero ora la pagina klienty.html è relativa alla pagina price.html originale si trova due livelli sotto).
zakazy/furniture/clienty.html">Clienti
6. Nella cartella principale del sito ci sono due cartelle: zakazy e oplata. clienty.html è nella cartella dell'ordine, la pagina price.html originale si trova nella cartella oplata(cioè entrambe le pagine mentono in diverse cartelle di un livello inferiore dalla cartella principale del sito).
../zakazy/clienty.html">Clienti
§ 5. Collegamento alla posta elettronica
In modo da creare collegamento e-mail, è necessario invece dell'URL nel valore dell'attributo href scrivi un indirizzo email con il protocollo ( mailto:). E poi quando fai clic su tale collegamento, si aprirà una finestra programma di posta con un indirizzo email inserito nel campo "A". Nel codice HTML è simile a questo:
mailto: [e-mail protetta]">La mia posta
E così è nel browser.
Ciao, cari lettori del sito del blog! Come sapete, per promuovere con successo un sito e aumentare la sua posizione nei risultati di ricerca, è necessario eseguire un'ottimizzazione SEO di alta qualità del sito. Il concetto di "", che a sua volta è diviso in interno ed esterno, è indissolubilmente legato a concetti come "link interni ed esterni". Pertanto, è molto importante per noi sapere quanti collegamenti dovrebbero essere sul sito, come controllarne il numero, come rimuovere i collegamenti non necessari dal sito e chiuderli dall'indicizzazione, come aumentare la massa dei collegamenti, ecc. Per rispondere a tutte queste domande e altre ancora sui collegamenti interni ed esterni, cerchiamo prima di capire cos'è un collegamento (o collegamento ipertestuale) in HTML.
In questo articolo 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 a un indirizzo di posta elettronica (e-mail) e come per trasformare un collegamento in un'immagine. Toccheremo anche concetti come tag html e attributi di collegamento ipertestuale, ancoraggio di collegamento, ancoraggio html (ancoraggio) e collegamenti hash. Quindi, cominciamo.
Cos'è un collegamento (collegamento ipertestuale).
Se un collegamento ipertestuale porta a una pagina Web oa un file che non esiste (cancellato, spostato) o il suo indirizzo non è corretto, tale collegamento viene definito interrotto. Non dovrebbero esserci collegamenti interrotti sul sito, poiché fuorviano i visitatori e, facendo clic su tale collegamento, è improbabile che una persona torni al tuo sito. Parleremo in modo più dettagliato del motivo per cui vengono visualizzati i collegamenti interrotti, come trovarli e risolverli, in un articolo separato. E ora continuiamo.
Come creare un collegamento (collegamento ipertestuale) in HTML su un sito web.
Il collegamento a un'altra pagina del tuo sito o di un altro sito è molto semplice. Per creare un collegamento ipertestuale, è necessario comunicare al browser qual è il collegamento e indicare l'indirizzo del documento a cui porterà. Questo viene fatto utilizzando il tag HTML. e l'attributo href richiesto:
Qui URL è l'indirizzo del documento a cui andare. E il testo del collegamento ipertestuale situato tra i tag E, è chiamato link anchor ed è visibile al visitatore della pagina web. Oltre al fatto che il testo del collegamento (anchor) informa il lettore su dove verrà effettuata la transizione, è anche molto importante nell'ottimizzazione per i motori di ricerca (SEO), in quanto è uno dei fattori determinanti che influenzano il posizionamento del tuo sito per le parole chiave contenute in questo ancoraggio. Tipicamente, questo tipo di classificazione è chiamato referenziale.
Legame assoluto
Sono utilizzati per puntare a un documento su un altro sito (link esterno).
È consentito fare collegamenti assoluti all'interno dello stesso sito, tuttavia è più corretto utilizzare indirizzi relativi per creare un collegamento interno, che sembri più breve. Ma, analizzando vari siti, ho notato che la stragrande maggioranza dei webmaster crea link interni con indirizzi assoluti. C'è un vantaggio qui, perché se la tua pagina viene copiata, in questo modo ripristinerai i collegamenti esterni.
Come puoi vedere, con riferimenti assoluti, tutto è semplice. È più difficile con quelli relativi, perché quando li crei, devi capire quale valore dell'attributo href devi specificare, poiché dipende dalla posizione originale dei documenti. Come ho 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 collegamenti relativi per un sito, posso consigliare un articolo di Dmitry, l'autore del blog ktonanovenkogo.ru. Non ho ancora visto una spiegazione più dettagliata e comprensibile.
Ad esempio, mostrerò come apparirà il collegamento che porta al file relativo alla radice del sito (basta tagliare tutto a sinistra della terza barra in un collegamento assoluto simile):
Legame relativo
Al principale
Testo del collegamento (ancora)
I colori e l'aspetto del testo popup 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, verrà aperto un nuovo documento nella finestra corrente. Tuttavia, quando si visualizzano personalmente i siti, questo non è conveniente per me. Quando leggo un articolo e seguo un collegamento, è conveniente per me che la pagina si apra in una nuova finestra e posso continuare a leggere l'articolo precedente in qualsiasi momento. Un altro motivo per aprire un collegamento in una nuova finestra è che quando vai sul sito di qualcun altro, c'è un'alta probabilità che il lettore non torni. Soprattutto se fa diverse transizioni e semplicemente non ricorda dov'era pochi minuti fa.
L'attributo target tag ci aiuterà ad aprire il collegamento in una nuova finestra. . Il valore predefinito è _self , che di solito non è scritto. Per aprire il documento in una nuova finestra, modifica il valore dell'attributo target in _blank :
| 1 | <a href = "http://site" target = "_blank" > Nuova finestra</a> |
Nuova finestra
Cosa succede se quando visiti il sito di qualcun altro, in cui 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 aprirà in una nuova finestra.
Come creare un collegamento a un'e-mail (indirizzo e-mail).
Facendo clic su questo collegamento si aprirà un programma con cui lavorare e-mail, installato da te per impostazione predefinita, dove il campo "A" sarà già compilato. Per compilare automaticamente l'oggetto della lettera, è necessario creare un collegamento all'e-mail del seguente modulo:
Invece delle parole "oggetto_della lettera", devi scrivere l'argomento desiderato e, ovviamente, in lettere latine. Lo facciamo perché molti browser e programmi di posta elettronica non funzionano bene con il cirillico e c'è la possibilità di vedere ogni sorta di incomprensibile nella riga dell'oggetto. Usando questo consiglio non complicato, sarai in grado di creare un collegamento a un'e-mail senza timore di sorprese inutili.
Come trasformare un'immagine in un collegamento.
Qui, l'attributo title è un tooltip e il testo scritto nell'attributo alt (fonte alternativa di informazioni) apparirà sulla pagina se le immagini sono disabilitate nel browser. Se l'attributo title serve, prima di tutto, per comodità dei lettori, i motori di ricerca cercano di capire cosa viene mostrato nell'immagine dall'attributo alt. Si consiglia di scrivere parole chiave in questi tag, che saranno di grande importanza nell'ottimizzazione dei motori di ricerca. Dopotutto, nessuno ha annullato la ricerca per immagini.
Come creare un collegamento ipertestuale (ancoraggio html) su una pagina html.
Sopra, abbiamo già considerato come creare un collegamento a una pagina del sito Web, non importa se interno o esterno. Ma a volte, devi creare collegamenti ipertestuali all'interno della stessa pagina web. Per quello? Bene, ad esempio, in modo che durante la lettura di un testo molto lungo, abbiamo la possibilità di saltare rapidamente a qualsiasi parte di esso. Oppure tornerà utile quando all'inizio dell'articolo ne pubblicherai il contenuto punto per punto. Quindi, cliccando sull'elemento desiderato, andrai immediatamente al materiale che ti interessa. Tali transizioni vengono effettuate utilizzando segnalibri preinstallati nel corpo dell'articolo, chiamati ancoraggi html (ancora, da non confondere con un ancoraggio di testo) e speciali collegamenti hash.
Per creare un'ancora, crea prima un segnalibro con un nome qualsiasi (vengono utilizzate solo lettere latine, numeri, trattini e caratteri di sottolineatura) specificato utilizzando l'attributo name del tag :
Su
| 1 | <a href = "javascript:scroll(0,0);" > |
Dmitry KtoNaNovenkogo consiglia un altro modo per impostare i segnalibri nel testo di una pagina Web, senza utilizzare gli ancoraggi html. Per fare ciò, creiamo un segnalibro da qualsiasi tag HTML disponibile sulla pagina, prescrivendogli un attributo id universale. Ad esempio, creiamo un segnalibro dal tag di intestazione h3:
Testo del titolo
È importante scrivere una lettera latina nell'attributo id come primo carattere del nome dell'ancora, quindi puoi utilizzare qualsiasi altro carattere consentito.
Torniamo, ad esempio, all'intestazione “ “, e poi continuiamo.
Puoi utilizzare i collegamenti hash per andare nel posto giusto 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 nello stesso link hash, prima del simbolo hash, scriviamo l'indirizzo di questa pagina. Per esempio:
Collega il testo all'ancora del segnalibro html
Tipi e colori dei collegamenti ipertestuali in HTML.
- Un collegamento non visitato è blu e sottolineato.
- Collegamento attivo: diventa rosso nel tempo che intercorre tra il clic sul collegamento e l'inizio del caricamento della nuova pagina. Certo, non è stata in questo stato per molto tempo.
- Collegamento visitato: cambia colore in viola dopo aver fatto clic su di esso.
Puoi cambiare il colore dei collegamenti ipertestuali in un documento html usando il tag
e i seguenti attributi:- Link - il colore dei link non visitati.
- Alink - colore del collegamento attivo.
- Vlink è il colore dei link visitati.
Tutti gli attributi di cui sopra possono essere combinati:
| 1 | <body link = "#1122cc" vlink = "#6611cc" alink = "#d14836" > |
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 gli ancoraggi di testo, i collegamenti hash e gli ancoraggi html, cosa sono i tag html e gli attributi di collegamento. Ho fatto del mio meglio per descrivere in dettaglio cosa sono i collegamenti in HTML e cosa sono. Lascia che ti ricordi che l'inserimento di collegamenti ipertestuali nel testo viene eseguito solo in modalità HTML.
Non ho mai dovuto scrivere articoli così lunghi, più di 10.000 caratteri. Ma questo argomento di collegamenti non è esaurito, da continuare.
Se questo articolo ti è stato utile, fai clic sui pulsanti dei social network qui sotto. Ci vediamo sulle pagine!
Buona giornata a tutti, miei cari amici e lettori. Spero che tu abbia deciso di partecipare al mio contest e scrivere del tuo percorso di blogging. Bene, vorrei continuare il nostro studio del linguaggio html e oggi vorrei parlarvi di uno dei componenti più importanti, ovvero i collegamenti ipertestuali.
Sì, senza tali collegamenti ipertestuali, Internet non sarebbe così conveniente. No, sto mentendo. Non sarebbe affatto conveniente in termini di navigazione. 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 differisce da un normale collegamento? Tutto è davvero semplice qui: un collegamento è una semplice scrittura di informazioni che fanno riferimento a un documento. Allo stesso tempo, non puoi fare clic su questo testo (non succederà nulla), ma sai dove cercare informazioni.
Esempio: puoi imparare a selezionare i capelli in Photoshop su //website/adobe-photoshop/kak-vydelit-volosy/
Un collegamento ipertestuale è lo stesso testo, solo la sua essenza sta nel fatto che puoi fare clic su questo testo e raggiungere la pagina, il sito o qualsiasi altro oggetto desiderati. Inoltre, il testo stesso può essere qualsiasi, mentre l'indirizzo è già scritto all'interno separatamente e può essere completamente diverso. Comunque sia, comunque, nel discorso colloquiale sono semplicemente chiamati collegamenti. Ecco un esempio di collegamento ipertestuale:
Puoi leggere come selezionare correttamente i capelli in Photoshop in uno dei miei.
Comunque. Buona teoria. Ora passiamo alla pratica e vediamo quali sono i responsabili di tutte queste cose.
Il tag pair è responsabile del collegamento ipertestuale, ma di per sé non rappresenta nulla. Va sempre insieme a un attributo. E in questo caso, dobbiamo prescrivere costantemente proprio questo href. Nel valore dell'attributo, inseriamo il collegamento stesso alla risorsa desiderata. E nel contenuto stesso, scriviamo il testo stesso, che dovrebbe diventare cliccabile (lavoro su clic). Guarda l'esempio e penso che capirai tutto.
Motore di ricerca Yandex
Come capisci, in questo esempio, ho scritto che quando fai 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 ci sono collegamenti interni ed esterni. I collegamenti interni vengono eseguiti all'interno di una directory, ovvero il sito, e i collegamenti esterni portano a risorse di terze parti. E ora ti mostrerò come fare entrambe le cose.
Transizioni interne
File nella stessa cartella
Ma una tale transizione funzionerà a condizione che il file a cui ti stai collegando si trovi nella stessa cartella del file in cui hai inserito il collegamento. Per 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<href> .
- E ora attenzione! Nel valore dell'attributo scriviamo il percorso relativo al file in modifica, cioè pushkin.html stesso. Dovresti avere qualcosa del genere:
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 poi attraverso la barra (/) il nome completo del documento (nel nostro caso foto).
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 facendo clic su questo collegamento verremo indirizzati al file fofo.jpg, che si trova nella cartella img.
Bene, come? Tutto chiaro? Sentiti libero di chiedere se hai bisogno di qualcosa.
Transizioni esterne
E, naturalmente, non possiamo fare a meno di menzionare i collegamenti esterni, dopo aver fatto clic sui quali arriveremo a un sito completamente diverso. Ma non c'è niente di complicato qui. Il punto è che inserisci nel valore href l'indirizzo completo del sito o della pagina web. Ho mostrato un esempio con Yandex sopra. Ma ecco un altro esempio per te:
Studierò per il master di progetti sociali.Qui arriviamo a una pagina specifica di un sito specifico.
Apertura 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 andrà in crash. E questo non va bene. In particolare, per progetti di contenuti promossi o blog, si consiglia 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. Devi solo incollarlo all'interno del tag di apertura dopo il valore dell'attributo href. Prendiamo quell'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 rimarrà sopra, solo se non lo chiuderà espressamente. 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 abbia raccontato 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 dare un'occhiata ottimo videocorso su questo tema. Le lezioni sono davvero eccellenti e sono davvero rivolte a persone che hanno ancora poca familiarità con la creazione di siti Web o non hanno alcuna familiarità.
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 perderti qualcosa di interessante. Bene, ti auguro successo in tutti i tuoi sforzi. Ciao ciao!
Cordiali saluti, Dmitry Kostin.
