Crea un semplice collegamento ipertestuale nel blocco note. Che cos'è un collegamento e come creare un collegamento ipertestuale in HTML

<а href="http://www.mysite.com/doc2.htm/anch3">

Cioè, combiniamo l'uso dell'URL completo del documento e allo stesso tempo indichiamo un suo frammento, contrassegnato come "anch3".

Riso. 1.16. Finestra del browser che mostra il risultato della visualizzazione del file mostrato nel listato 1.16

Si noti che se il testo del collegamento ipertestuale è già visualizzato nel viewport, come è accaduto nel nostro ultimo esempio, non si verificherà alcuna modifica. Ma tutto ciò che devi fare è ridimensionare verticalmente il viewport del browser per nascondere l'ultima riga di contenuto a cui punta il collegamento ipertestuale e puoi dimostrare visivamente il risultato della sua azione.

Naturalmente, tutti i nomi di tali marcatori di segnalibri, determinati utilizzando il valore del parametro name, devono essere univoci. Tieni presente che l'HTML non distingue tra caratteri maiuscoli e minuscoli. Pertanto, se nel nostro documento HTML sono definiti due segnalibri, a cui in seguito si farà riferimento con collegamenti ipertestuali che differiscono solo nel caso, quindi per il parser HTML integrato nel browser, questi identificatori saranno considerati uguali e non elaborerà neanche di loro.

Tuttavia, sappiamo già che qualsiasi elemento di un documento HTML può essere identificato anche utilizzando il parametro id, che può essere utilizzato come parte di qualsiasi tag. Allo stesso tempo, anche i collegamenti ipertestuali che puntano a frammenti di documenti possono utilizzare questi parametri, ovvero, per impostare un segnalibro su qualsiasi tag, non è necessario utilizzare il tag<а>con il parametro name, basta usare il parametro id.

I valori del parametro name e del parametro id sono identificatori univoci per gli elementi del documento HTML. Pertanto, nessun valore del parametro name deve corrispondere a nessun valore del parametro id.

Ma quale opzione dovresti scegliere per le tue pagine Web, quale opzione dovresti usare? A questo punto, tieni presente che mentre il parametro id può essere utilizzato per eseguire diverse operazioni, come l'identificazione di un segnalibro, la creazione di identificatori univoci per l'esecuzione di script DHTML e lo styling, alcuni browser meno recenti potrebbero non accettare questi identificatori per il targeting dei collegamenti ipertestuali.

Condiviso con tag<а>il parametro title può essere utilizzato per identificare il collegamento ipertestuale per l'utente remoto. Il valore di questo parametro è una stringa di testo che verrà visualizzata come piccolo suggerimento quando l'utente sposta il cursore del mouse sul collegamento ipertestuale desiderato. La dichiarazione di tale collegamento ipertestuale è simile a questa:

<а href="www.site.com" title="Sito molto carino">

Utilizzando il parametro hreflang, possiamo specificare la lingua in cui è scritto il contenuto testuale della risorsa Internet, a cui punta questo collegamento ipertestuale. Il valore del parametro è una delle notazioni del linguaggio standard che abbiamo discusso poco prima in questo capitolo.
Ma limitarsi a specificare la lingua in cui è scritto il contenuto testuale di una pagina Web non è sufficiente. È inoltre necessario specificare la codifica utilizzata. E qui ci può aiutare il già familiare parametro charset, il cui valore è la designazione standard della codifica utilizzata per visualizzare il contenuto testuale della risorsa Internet a cui punta il collegamento ipertestuale desiderato.

Con l'aiuto del parametro gel, possiamo indicare lo scopo del documento a cui punta il collegamento ipertestuale, ovvero il valore di questo parametro indica esplicitamente la relazione tra il documento di origine e il documento a cui ci stiamo collegando. L'utilizzo di questa opzione non influisce sulla modalità di visualizzazione del collegamento ipertestuale o sul modo in cui la risorsa viene recuperata, ma può essere utile. Se le pagine Web sono destinate non solo ad essere visualizzate utilizzando un browser, ma anche ad essere elaborate da alcune applicazioni specializzate. Come, ad esempio, motori di ricerca avanzati in grado di riconoscere ed elaborare correttamente tali relazioni tra documenti, indicate da collegamenti ipertestuali.

Il valore del parametro rel è una delle parole chiave predefinite che esamineremo tra un momento.

• Alternato. Il valore indica che il documento è una rappresentazione alternativa del documento originale. Se il parametro lang viene utilizzato nel collegamento ipertestuale con un valore diverso dalla lingua del documento di origine, tale collegamento ipertestuale viene generalmente considerato un collegamento a una copia del documento di origine in un'altra lingua.
• foglio di stile. Indica che il documento con collegamento ipertestuale è un foglio di stile. Il meccanismo per l'applicazione dei fogli di stile è descritto in dettaglio nel secondo capitolo.
• inizio.È usato per designare il documento iniziale, iniziale di un certo insieme di documenti. Per un sito Web, questa sarebbe ovviamente la home page.
• prossimo. Il valore viene utilizzato se il documento iniziale e il documento con collegamento ipertestuale si trovano in una sequenza ordinata lineare di documenti e quest'ultimo è successivo in sequenza alla pagina Web originale.
• Prec. Il valore viene utilizzato nello stesso caso del precedente, ma ora indica che il documento nella catena non è il successivo, ma il precedente, rispetto al documento iniziale.
• indice. Utilizzato nei collegamenti ipertestuali che puntano a un documento che è il contenuto indicizzato della pagina Web originale.
• Glossario. Il valore indica che il documento contiene un dizionario di termini utilizzati nel documento di origine.
• diritto d'autore. Utilizzato quando il documento con collegamento ipertestuale contiene un avviso di copyright sui contenuti del documento di origine.
• capitolo. Utilizzato nei collegamenti ipertestuali che puntano a documenti che sono capitoli separati in una serie di documenti.
• sezione. Collegamento ipertestuale con questo valore di parametro rel indica un documento, che è una sezione nell'insieme totale dei documenti che formano un unico contenuto.
• sottosezione. Il valore è una continuazione del concetto indicato dal precedente valore da noi considerato. Significa che il documento è già sottosezione.
• appendice. Il valore indica che il documento con collegamento ipertestuale è un allegato al documento originale.
• Aiuto. Utilizzato per riferimenti a documenti che forniscono ulteriori informazioni di riferimento in relazione al contenuto del documento originale.
• segnalibro. Viene utilizzato per collegamenti a documenti HTML contenenti collegamenti ad alcuni frammenti chiave selezionati del documento di origine.

Quando si utilizzano questi valori, tenere presente che in questo caso i parser HTML faranno distinzione tra maiuscole e minuscole, quindi è necessario attenersi completamente all'ortografia fornita nel nostro elenco.

L'HTML ha infatti la capacità di creare i propri valori per l'attributo che stiamo considerando, ma poiché per utilizzare al meglio questo parametro è necessario utilizzare strumenti specializzati per la descrizione di questi nuovi valori e software finalizzati al riconoscimento questi tipi di collegamenti. Poiché siamo interessati ai browser, non abbiamo bisogno di creare nuovi tipi di collegamenti.

Questa tecnologia è in realtà un palliativo, progettato per fornire almeno una parte delle capacità fornite dal nuovo linguaggio per descrivere i documenti su Internet - XML ​​​​(extensible Markup Language), che dovrebbe essere il successore e il "killer" dell'HTML, ma finora non esistono browser e applicazioni XML comuni che elaborino documenti XML. E per molto tempo questa tecnologia non sarà generalmente accettata, il che significa che la tecnologia HTML ha ancora il pieno diritto alla vita e sarà utilizzata come base per le pagine Web per un periodo piuttosto lungo.

Ma torniamo agli attributi dei tag.<а>. L'attributo rev è l'opposto dell'attributo rel. Se l'attributo rel specifica il tipo di documento a cui punta il collegamento ipertestuale, l'attributo rev specifica il tipo di documento di origine che contiene il collegamento ipertestuale. Lo stesso insieme di parole chiave utilizzato per l'attributo rel viene utilizzato come valori per questo attributo.

Utilizzando il parametro target, specifichiamo in quale frame vogliamo visualizzare il documento puntato dal collegamento ipertestuale. Il fatto è che di solito un documento viene visualizzato in una finestra del browser. Ma in HTML è possibile dividere il viewport in diverse aree, chiamate frames, ciascuna delle quali visualizzerà il proprio documento HTML. Prenderemo in considerazione la tecnologia di utilizzo dei frame in una delle sezioni successive di questo capitolo, ma per ora noteremo solo che il parametro target consente di specificare esplicitamente in quale frame si desidera visualizzare la pagina Web. L'impostazione di un collegamento ipertestuale utilizzando questa opzione sarebbe simile a questa:

<а href="http://www.mysite.com/docl.html" target="_top">

Tale collegamento ipertestuale farà sì che il browser carichi la pagina Web il cui URL è specificato come valore del parametro href nel frame superiore il cui nome è specificato nel parametro target. Le parole chiave definite nella specifica HTML vengono utilizzate come valore dell'ultimo parametro. Li tratteremo nella sezione sui telai.

Alcuni elementi di input e collegamenti ipertestuali consentono di spostare il focus di input tra di loro utilizzando il tasto di tabulazione, ovvero una pressione di questo tasto attiva l'elemento di input successivo incluso nella sequenza generale. E l'ordine di movimento tra i controlli inclusi nella sequenza generale viene impostato utilizzando il parametro tabindex. Il valore di questo parametro è un numero intero positivo ordinario e maggiore è questo numero per qualsiasi organo di immissione dati o collegamento ipertestuale, più tardi la coda lo raggiungerà quando viene spostato il focus di input. Naturalmente, nessuna coppia di elementi di design della pagina Web dovrebbe avere lo stesso valore di questo parametro, altrimenti il ​​browser semplicemente non li includerà nella sequenza di elementi con il focus di input in movimento.

Tuttavia, oltre all'accesso tramite successive pressioni del tasto tab, possiamo utilizzare il parametro della chiave di accesso, il cui valore è un carattere. Quando l'utente preme il tasto responsabile dell'inserimento di questo carattere, il focus di Input viene automaticamente trasferito al collegamento ipertestuale desiderato, nella cui dichiarazione è incorporato il parametro della chiave di accesso, e l'utente può attivarlo senza utilizzare il mouse, con solo un clic sulla chiave . Considera un piccolo esempio:

<а href="http://www.mysite.com/docl.html" tabindex="2" accesskey="U">

Il vettore di un collegamento ipertestuale può essere non solo testo, ma anche un'immagine grafica. Per fare ciò, è necessario inserire un tag che dichiari l'inserimento di elementi grafici nel contenuto della pagina Web tra i tag<а>e. Ma il fatto è che possiamo "appendere" non uno, ma diversi collegamenti ipertestuali su un'immagine grafica, ovvero diverse aree attive sono assegnate all'interno dell'immagine, facendo clic su ciascuna di esse si attiva il collegamento ipertestuale corrispondente. Tale tecnologia è chiamata grafica segmentata.

Per creare tali elementi grafici associati a più collegamenti ipertestuali, vengono utilizzati tag specializzati. Innanzitutto, vengono dichiarati gli hotspot nel disegno, chiamati anche segmenti. Tutti costituiscono una mappa di segmenti attivi dell'immagine, a cui viene assegnato un certo nome. E poi questo nome della mappa è associato all'immagine stessa, dichiarata usando il tag . Consideriamo un tipico esempio.

Listato 1.17

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/htm!4/strict.dtd">




<р>Questo è testo normale.

In questo esempio, puoi vederlo quando dichiari un'immagine, nel tag inseriamo il parametro usemap, il cui valore è il nome della mappa dei segmenti ipertestuali attivi dell'immagine. Viene inserito un simbolo di cancelletto prima del nome della mappa del segmento attivo in uso. La descrizione di questa carta è inserita tra i tag . Allo stesso tempo, il tag di apertura

La mappa consiste in una descrizione dei segmenti. Ogni segmento è descritto con un tag<агеа>. Possiamo applicare segmenti attivi in ​​tre diverse forme: rettangoli, cerchi e poligoni. La forma viene specificata utilizzando il parametro shape obbligatorio. Come valore di questo parametro, possiamo utilizzare uno dei tre valori preimpostati.

• Senso retto utilizzato per creare hotspot rettangolari.
• Senso cerchio utilizzato per creare un segmento circolare.
• Senso poli consente di creare segmenti attivi sotto forma di poligoni convessi.

Dopo aver impostato il tipo di modulo, dovremmo determinarne accuratamente le dimensioni e la posizione sulla nostra immagine grafica. Per questo viene utilizzato il parametro coords, il cui valore è l'elenco delle coordinate che definiscono il segmento attivo. Nel Listato 1.17, possiamo vedere che le coordinate nell'elenco generale sono separate da una normale virgola. Le coordinate vengono contate dall'angolo in alto a sinistra della figura, che ha le coordinate (0;0).

Per i segmenti rettangolari, vengono specificate le coordinate degli angoli superiore sinistro e inferiore destro. E per i poligoni, le coordinate di tutti i punti sono elencate in sequenza, nell'ordine in cui sono collegate da linee. Naturalmente la prima e l'ultima coppia di coordinate devono coincidere, altrimenti il ​​poligono non verrà chiuso e il segmento attivo non verrà elaborato.

Taggare<аrеа>è incluso anche il parametro href, il cui valore è l'URL della risorsa puntata dal collegamento ipertestuale di questo segmento.
Ma questo parametro, sorprendentemente, non è richiesto. Nel caso in cui un segmento venga creato ma non debba essere collegato a un collegamento ipertestuale, dovrebbe essere utilizzato il parametro nohref, che non ha significato.
Ma il parametro richiesto per il tag<аrеа>tutto è proprio così. Questo è un parametro alt il cui valore è una stringa di testo che è una rappresentazione alternativa dell'immagine. Come sappiamo, questa stringa viene visualizzata come suggerimento quando l'utente passa sopra un oggetto con il mouse. Nel nostro caso, tale oggetto è un segmento attivo incorporato in un'immagine grafica.

Anche nel cartellino<агеа>, come nei tag dei collegamenti ipertestuali ordinari, vengono utilizzati i parametri tabindex e access key, che consentono di attivare il collegamento ipertestuale senza utilizzare il mouse, utilizzando solo la tastiera. Abbiamo discusso poco prima della struttura dei valori di questi parametri. Come nota a margine, va notato che qualsiasi vero Webmaster dovrebbe assolutamente utilizzare queste opzioni, poiché solo il loro utilizzo può garantire che i collegamenti ipertestuali si attivino senza l'ausilio del mouse.

Quindi, abbiamo scoperto l'uso della tecnologia grafica segmentata. Ma non sapevamo tutto sui link. La specifica HTML definisce il tag , che non crea un collegamento ipertestuale a noi familiare, ma una sorta di connessione tra il documento visualizzato e un file aggiuntivo. tag può essere inserito solo nella sezione head di un documento HTML, tra i tag e Come esempio dell'applicazione del tag che stiamo considerando puoi utilizzare il seguente frammento di codice:

Listato 1.18

"http://www.w3.org/TR/html4/strict.dtd">

Con questo frammento, indichiamo che questa pagina Web contiene il secondo capitolo di un ampio documento, e con l'aiuto di tag specificare collegamenti a pagine Web che contengono un sommario, nonché i capitoli precedenti e successivi. Il tipo di documento a cui punta il collegamento è determinato utilizzando il familiare parametro rel Un normale browser, ovviamente, non sarà in grado di elaborare e visualizzare tali collegamenti in alcun modo. Sono stati introdotti in HTML per creare documenti che sarebbero stati elaborati utilizzando alcune applicazioni specializzate che consentono di creare sistemi di flusso di lavoro basati su questo formato. Ma le scarse funzionalità integrate dell'HTML chiaramente non erano sufficienti per creare sistemi di flusso di lavoro a tutti gli effetti e quando è stato sviluppato lo standard XML, gli sviluppatori hanno cambiato felicemente il preferito.

Quindi, risulta che nelle normali pagine Web il tag assolutamente inutile? Non proprio. Questo tag è l'unico modo in cui possiamo collegare le pagine Web a fogli di stile esterni, il modo più potente per controllare come un documento viene visualizzato in un browser. Ma impareremo a conoscere i fogli di stile poco dopo, nel secondo capitolo. Nello stesso punto considereremo un esempio di applicazione del tag . Nel frattempo non ci resta che elencare i parametri di questo tag. Tutte queste opzioni si applicano anche ai tag.<а>con gli stessi valori possibili, quindi non entreremo nel dettaglio di ogni parametro, ma li elencheremo brevemente:

• set di caratteri- indica la codifica del documento a cui punta il link;
• href- viene utilizzato come valore l'URL del documento a cui punta il link;
• hreflang- il valore è la designazione del codice della lingua in cui è scritto il documento collegato;
• genere- imposta il tipo di documento a cui punta il link;
• rel- imposta lo stato del documento puntato dal link rispetto al documento sorgente;
• riv- imposta lo stato del documento sorgente rispetto a quello a cui punta questo link;
• media- indica il tipo di dispositivo su cui verrà visualizzato il documento richiamato dal link.

Attualmente sono supportati i documenti visualizzati su monitor normali, monitor braille progettati per persone ipovedenti, per stampanti e per dispositivi di sintesi vocale. E, naturalmente, oltre a questi parametri, viene utilizzato un insieme di parametri di identificazione aggiuntivi comuni a tutti i tag.

Resta da considerare solo un tag utilizzato per servire i collegamenti ipertestuali. Come sappiamo, potremmo non fornire l'URL completo per i documenti con collegamento ipertestuale se il documento si trova sullo stesso sito Web della pagina Web originale. Ma si scopre che possiamo fare lo stesso con i collegamenti ipertestuali a pagine Web che fanno parte di altri siti.

Con un cartellino impostiamo la base per i collegamenti ipertestuali con valori abbreviati del parametro href. Proviamo a dimostrare il funzionamento di questo meccanismo su un esempio semplice ed illustrativo:

"http://www.w3.org/TR/html4/strict.dtd">



<Р>Testo<А href="/pages/birds.gif">Collegamento

Come valore del parametro href obbligatorio del tag definiamo un documento che è la base per il contenuto delle pagine Web del nostro sito. E ora, se nel corpo del nostro documento HTML utilizziamo un collegamento ipertestuale con un URL abbreviato, il nome di dominio per questo URL non sarà il nome del sito originale, ma quello specificato nel tag . Pertanto, nell'esempio, il collegamento ipertestuale punta al documento

c URL www.mysite.com/pages/birds.gif.

Va chiarito che il tag inserito nel titolo del documento tra i tag e .

E questo è tutto ciò che possiamo dire sull'uso dei collegamenti ipertestuali in HTML.

La caratteristica principale di un documento HTML è che contiene collegamenti ipertestuali(o solo link) ad altri documenti, siti web, file, immagini, ecc. È la capacità di inserire collegamenti nelle pagine a 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à.

§ 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 interno, 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 di un'immagine grafica (link di 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 frontiera 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 viene specificato l'ancora del collegamento. L'ancora è creata dall'attributo nome:

name="nome ancora">testo

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

Il core si trova in quei punti della pagina a cui l'utente dovrebbe accedere 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 denominata intestazione e l'ho posizionato accanto al titolo di questa lezione ("Collegamenti ipertestuali in HTML"). Il codice di ancoraggio è 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 link 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 un 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 la pagina principale del sito. 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, la finestra del programma di posta si aprirà con l'indirizzo e-mail inserito nel campo "A". Nel codice HTML è simile a questo:

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

E nel browser in questo modo:

title="(!LANG:Vai alla pagina principale">!} Pagina principale

§ 7. Conclusione

Queste sono le informazioni di base su creazione di collegamenti in HTML. Su questo, questa lezione può essere considerata completata. E questo fatto suggerisce che hai già imparato la maggior parte delle basi dell'HTML.

Ti consiglio di ripassare ora le sezioni precedenti e quindi creare una pagina HTML completa dedicata, ad esempio, alla persona amata. Secondo il tuo design e secondo i tuoi desideri. Quindi mettilo su alcuni (ovviamente, se ce l'hai, allora su di esso) e ammira già completamente il tuo primo sito.

Puoi mostrarlo ai tuoi amici o a chiunque altro. In generale, sentiti come il proprietario di un sito. E poi, dopo un po' di baldoria in occasione di un evento del genere, passa alla sezione successiva, in cui ti parlerò della creazione di tabelle in HTML.

E questo sarà già il primo passo per trasformare la tua pagina personale in una risorsa seria.

Ciao, cari lettori del sito del blog. Oggi voglio parlare più in dettaglio di cos'è un collegamento ipertestuale in linguaggio Html, come inserirli nel testo del sito, come trasformare un collegamento in un'immagine, come utilizzare correttamente il tag "A" e la sua " Attributi Href" e "Target vuoto" (apri in una nuova finestra).

In generale, il collegamento ipertestuale è l'elemento chiave. Inoltre, i collegamenti sono ora uno dei tre principali fattori che influenzano il successo della promozione del sito. La loro corretta applicazione e comprensione, ad esempio, come influisce sulla loro contabilità da parte dei motori di ricerca, può influire in modo significativo sulla presenza della tua risorsa.

Cos'è un collegamento ipertestuale e un'ancora (ancora)

Quindi, abbiamo già familiarizzato con tag obsoleti e sconsigliati per l'uso quotidiano. Continuiamo la nostra conoscenza.

Per creare un collegamento ipertestuale nel codice Html, dobbiamo anche utilizzare il tag A. Per questo, sarà possibile utilizzare vari attributi che specificano, ad esempio, l'indirizzo URL del target per spostarsi attraverso questo collegamento (href ) o indicando di aprirlo in una nuova finestra (target= _blank). Ma parliamo di tutto con ordine.

Come accennato poco sopra, i collegamenti ipertestuali sono un elemento chiave del linguaggio Html e consentono di collegarsi sia a pagine interne del proprio sito che ad altre risorse Internet. Dirò una banalità: il passaggio al collegamento viene effettuato facendo clic su di esso (e cosa hai pensato?).

Oltre al fatto che possono essere suddivisi in interni o esterni, lo sono anche potrebbe essere ufficiale ed essere utilizzati esclusivamente per le esigenze del browser con il quale verranno aperte le pagine del tuo sito.

In questo caso, non saranno visibili sulla pagina, perché sono scritti nell'area Head del codice sorgente del documento, i cui contenuti non vengono visualizzati nella pagina (ho citato la struttura del codice del linguaggio di markup ipertestuale nell'articolo su).

I collegamenti ipertestuali al servizio non vengono creati utilizzando il tag "A" (come al solito), ma utilizzando il tag Collegamento. Ci sono parecchie attività che svolgono, ad esempio, con l'aiuto di loro, file esterni con fogli di stile a cascata CSS o, ad esempio, file .

Ma oggi non considereremo come possono essere creati (il tempo verrà da loro), ma ci soffermeremo link visibili, che possono essere creati all'interno dell'area Corpo e, di conseguenza, verranno visualizzati nella pagina web.

Tuttavia, tutti i collegamenti ipertestuali (sia visibili che di servizio) hanno una cosa in comune: contengono tutti un attributo obbligatorio Href. In esso, come valore, viene scritto un punto specifico del documento (se precedentemente era contrassegnato da un'ancora) o l'indirizzo del documento stesso su Internet (o, in altre parole, il percorso della pagina o qualche altro il file è scritto in Href).

I collegamenti ipertestuali sono elementi di navigazione progettati per portarti ad altri documenti sul Web o per spostarti attraverso il contenuto di una pagina Web che stai già visualizzando utilizzando segni precedentemente inseriti nel corpo del documento, che sono anche chiamati Html ancore(ancore).

Potrebbe esserci un po' di confusione qui, perché. in SEO, sotto la parola, ma nel linguaggio Html, “anchor” indica proprio l'ancora (traduzione della parola ancora) o un'etichetta nel testo, a cui poi si può fare riferimento.

Perché le ancore vengono utilizzate in Html? Questo è abbastanza utile quando si crea la navigazione per una pagina web abbastanza lunga. Probabilmente vi siete conosciuti in rete quando nella pagina che avete aperto, subito sotto il suo titolo, sono riportati i nomi delle sezioni dell'articolo pubblicato su questa pagina.

Pertanto, il lettore può andare immediatamente nel punto della pagina in cui si trovano le informazioni di interesse e non preoccuparsi di scorrere il testo e cercare visivamente il posto giusto. Confortevole e migliora.

Come vengono creati gli ancoraggi e i collegamenti hash

Quindi, il nostro compito in questo caso sarà installare gli ancoraggi nei punti giusti della pagina (documento), che nel caso generale sarà simile a questo:

Quelli. per creare un'ancora, è necessario registrare un singolo attributo "Nome" nel tag del collegamento ipertestuale vuoto "A", il cui valore è utilizzare un'etichetta univoca che non deve contenere spazi e in cui è possibile utilizzare caratteri latini, numeri, trattini e caratteri di sottolineatura (in completa analogia con le regole con cui è possibile creare URL - ,,,[_],[-]).

In questo caso, l'ancora non sarà visibile sulla pagina stessa, perché. non abbiamo scritto alcun testo all'interno degli elementi "A". Tuttavia, gli ancoraggi creati in questo modo inquineranno il codice Html, e quindi ora sono usati molto più spesso degli ancoraggi un altro modo per creare un'etichetta.

In questo caso non è necessario creare un tag "A" vuoto, ma è possibile utilizzare uno qualsiasi degli elementi già disponibili al posto giusto nel testo. Ad esempio, potrebbe essere.

Quelli. per creare un analogo di un'ancora, è sufficiente aggiungere un attributo ID universale a qualsiasi tag (può essere utilizzato per tutti i tag e, a proposito, funzionano in base ad esso), ad esempio, in questo modo:

Testo del titolo

Quindi, ora invece di creare il numero richiesto di ancore che inquinano il codice e che al momento non sono valide (sconsigliato dal consorzio W3C, che sviluppa il linguaggio Html), aggiungiamo semplicemente un Id.

Si scopre che per questo sarà necessario, come di consueto, inserire l'attributo obbligatorio "Href" all'interno del collegamento ipertestuale "A", ma il cui valore sarà formato dal nome dell'etichetta desiderata (ancora) preceduto da cancelletto "#", che ha anche il nome hash (quindi, tra l'altro, le gambe del nome usato di frequente crescono: link hash):

salterà al punto della pagina contrassegnata con l'ancora

Si noti che quando si fa clic su tale collegamento ipertestuale, non si aprirà un nuovo documento. Il browser scorrerà la pagina già aperta in una posizione tale che il punto nel testo in cui hai inserito l'ancora si trovi nella parte superiore dello schermo. Sarebbe logico supporre che i valori di tutte le etichette (ancore) su una pagina debbano essere univoci per evitare confusione per il browser.

Se crei un'ancora utilizzando l'attributo ID in un tag posizionato opportunamente per questo, devi tenere conto del fatto che oltre alla restrizione sul tipo di caratteri utilizzati (,,,[_],[-]), il Il valore dell'ID è obbligatorio deve iniziare con un carattere latino.

Quindi tutti i caratteri validi possono essere individuati in qualsiasi quantità, ma il primo carattere dell'etichetta di ancoraggio nel valore dell'attributo ID deve essere una lettera (latina, ovviamente). Altrimenti, un tale ancoraggio inserito nel codice Html non funzionerà (nella maggior parte dei browser).

Se non si scrive alcun nome di etichetta di ancoraggio (href="#") dopo il cancelletto "#", allora tale collegamento ipertestuale scorre la pagina verso l'alto. È così che puoi creare il pulsante "Torna all'inizio" più semplice creando un collegamento dall'immagine (ne parleremo un po 'più tardi) e inserendolo nel modello del tuo sito, ad esempio, in questo modo:

Href è un attributo obbligatorio di qualsiasi tag di collegamento ipertestuale.

Passiamo ora dalla navigazione all'interno del documento (utilizzando gli ancoraggi) alla navigazione esterna, ad es. dovremo creare collegamenti che portino ad altri documenti sul nostro o su un altro sito. Ora, nell'attributo Href, non abbiamo più bisogno di scrivere segni di ancoraggio, ma il percorso del file che si sta aprendo (la pagina, per sua progettazione, è un file che viene caricato nel browser per la successiva visualizzazione).

ancora

Qui dovremmo andare oltre, ma ne ho già scritto in modo più che dettagliato nel materiale citato, quindi probabilmente non ha senso ripeterlo. Ma devi sapere come puoi impostare il percorso del file nell'attributo Href del collegamento ipertestuale che hai creato. Pertanto, non applicare per familiarizzare con il materiale presentato.

Tuttavia, lascia che ti ricordi che durante la creazione di URL è preferibile utilizzare solo i seguenti caratteri: (,,,[_],[-]) e non utilizzare spazi. Se consideriamo il contenuto dell'attributo Href per i collegamenti assoluti, allora può essere rappresentato schematicamente come segue:

Se scartiamo ciò che userai raramente, puoi presentare lo stesso in una forma un po 'semplificata:

Protocollo (di solito http)://domain_name (es. sito web)/path_to_file (pagine web)

Oltre al semplice protocollo http su Internet, puoi trovare collegamenti con il protocollo https, che differisce in quanto utilizza la crittografia. Quest'ultimo viene utilizzato nei siti in cui vi è la necessità di proteggere il canale di scambio dati tra il server e il browser del client. Ad esempio, viene utilizzato sui servizi di moneta elettronica WebMoney.

Su Internet, puoi trovare varie varianti del contenuto Href, ad esempio questo:

https://sitoweb/videokursy

O così (con estensione file):

https://site/seo/kak-raskrutit-sajt.html

Questo non cambia l'essenza, ma se c'è una barra alla fine del contenuto dell'attributo Href all'interno del collegamento ipertestuale, significa che l'accesso non è più al file, ma alla cartella in cui verrà inserito l'oggetto indice corrispondente essere cercato (leggi di più su questo nell'articolo sugli indirizzi url di cui sopra).

Scarica qualcosa dal link

Come puoi vedere, questo collegamento ipertestuale non è diverso dal solito, il browser capisce semplicemente che deve scaricare il file con l'estensione zip e non provare ad aprirlo per la visualizzazione, come, ad esempio, i file di documento con l'estensione estensione html. Tuttavia, puoi configurare tutto questo in modo puramente individuale nel tuo browser in base alle tue esigenze personali.

Scarica dal server ftp

Puoi anche, ad esempio, creare (mail) aggiungendo l'URL corrispondente all'Href:

Scrivere una lettera

Quando fai clic su tale collegamento, il tuo programma di posta predefinito si aprirà sul tuo computer (puoi configurare il tuo browser in modo che i collegamenti con mailto in Href si aprano in Gmail, ecc.) e apparirà una finestra di dialogo per la creazione di una nuova lettera, in cui nel campo "A" » inserirà l'indirizzo postale indicato in Href.

In effetti, puoi creare collegamenti di posta piuttosto complessi che riempiranno altri campi nella finestra di dialogo di invio di posta elettronica, ma questo viene utilizzato abbastanza raramente.

Ad ogni modo, ultimamente i webmaster hanno praticamente smesso di usare i collegamenti ipertestuali con mailto in Href a causa del fatto che vengono analizzati dagli spammer con tutte le conseguenze che ne derivano. È meglio creare sul sito, anche se ho ancora tutto presentato nel classico modulo nella pagina dei contatti. Bisognerebbe cambiarsi a proprio piacimento (o no...credo).

Come aprire un collegamento in una nuova finestra (target vuoto)

Quando creiamo collegamenti nel codice Html, spesso ci troviamo di fronte alla domanda: in quale finestra del browser aprire il documento a cui conduce? Per impostazione predefinita, si aprirà in una finestra esistente, sovrapponendosi alla pagina da cui è stato inserito questo collegamento ipertestuale.

Personalmente, sono un grande sostenitore l'attributo Target con il valore vuoto, che consente di aprire la pagina in una nuova finestra, lasciando aperto il documento in cui è stato inserito questo collegamento. Non so come questo influisca sull'usabilità del mio blog, ma questa opzione mi piace di più e la uso in quasi tutti i casi.

Nei motori di ricerca mi piace anche personalizzare l'apertura dei link in una nuova finestra in modo che il problema sia sempre a portata di mano e tu possa sempre tornarci. Per questi scopi, come già accennato, Html utilizza uno speciale attributo Target, che di default ha valore Self:

Apre il documento nella stessa finestra

Sebbene, ovviamente, nessuno scriva target="_self" nel tag "A", poiché questo valore è utilizzato per impostazione predefinita, ma se devi aprire la pagina in una nuova finestra, dovrai scrivere target="_blank ":

Si apre in una nuova finestra

Si noti che vengono scritti i valori dell'attributo Target con un trattino basso all'inizio(_blank), perché è così stipulato nel validatore Wc3, che contiene buchi nel linguaggio di markup ipertestuale. Sorprendentemente, Html offre la possibilità di modificare l'opzione di apertura del collegamento predefinita.

Ad esempio, se desideri che tutti i collegamenti ipertestuali del tuo sito si aprano in una nuova finestra, dovrai scrivere nell'area Testa del modello che utilizzi Etichetta di base con l'attributo target="_blank":

qualcos'altro lì

E ora, se vuoi aprire uno qualsiasi dei collegamenti nella stessa finestra, dovrai già aggiungere target="_self" al suo tag "A", perché _blank è ora utilizzato per impostazione predefinita. Oh come.

A proposito, ho utilizzato l'elemento Base nel modo descritto sopra, ma ho anche racchiuso in esso un'area di codice con diversi collegamenti ipertestuali che dovevano essere aperti in una nuova finestra. Quelli. Ho anche utilizzato il tag Base di chiusura all'interno dell'area Corpo e tutto ha funzionato. Sebbene tale codice, ovviamente, non sia valido.

Colori dei collegamenti ipertestuali al passaggio del mouse e alla transizione: come modificarli

Nel linguaggio Html, era concepito in modo tale che fosse facile per l'utente navigare quale collegamento aveva già aperto e quale rimaneva intatto.

A tale scopo, viene utilizzato un colore che cambierà quando l'utente fa clic sul collegamento ipertestuale e il documento appeso su di esso si apre correttamente. Tornando alla pagina originale, l'utente scoprirà che il collegamento che ha visitato ha cambiato colore. Tutti i browser possono fare questo trucco.

Per impostazione predefinita, in Html puro (senza utilizzare le proprietà CSS), i collegamenti sono sottolineati e possono avere tre opzioni di colore:

1. Il blu è il colore dei collegamenti interrotti su cui l'utente non ha ancora fatto clic
2. Rosso: viene accettato dal collegamento ipertestuale subito dopo aver fatto clic su di esso e fino a quando il documento richiesto non viene scaricato nel browser dell'utente tramite la rete (nelle condizioni moderne non è affatto facile cogliere questo momento e la colpa è di tutto ovunque)
3. Viola: il colore dei collegamenti utilizzati che l'utente ha già seguito

In Html 4.01, questi colori di collegamento sono l'impostazione predefinita, ma possono essere modificati utilizzando attributi speciali che sono scritti nel tag Body, che puoi trovare in uno dei file del template che usi. Per cambiare tutti e tre i colori, vengono utilizzati rispettivamente tre attributi:

1. Collegamento: imposta il colore di un collegamento non visitato
2. Alink: il colore di quello attualmente attivo, che viene elaborato dal browser
3. Vlink - il colore del collegamento ipertestuale già visitato dall'utente

Ricorda, ho già scritto su come . Di conseguenza, gli attributi citati potrebbero apparire così:

Naturalmente, ciò che si intendeva qui è la pura opzione Html, quando per qualche motivo non è conveniente o impossibile utilizzare lo stile, altrimenti tutti questi colori possono essere facilmente impostati e modificati utilizzando .

Come trasformare un'immagine in un collegamento - in due modi

Bene, tutto è abbastanza semplice qui. Perché è un elemento in linea, quindi in generale qualsiasi immagine può essere considerata solo una lettera, tranne forse una più grande.

Nel caso di puro Html attorno all'immagine che hai creato un link, avrai bordo largo tre pixel. Inoltre, il colore di questa cornice corrisponderà pienamente ai colori dei collegamenti accettati per il tuo sito (ne abbiamo parlato poco più in alto nel testo).

Per rimuovere l'aggiunta di un bordo a un'immagine che hai creato come collegamento ipertestuale, devi aggiungere un attributo Border con un valore pari a zero al tag Img:

Questo è un modo molto semplice per trasformare un'immagine in un collegamento, ma esiste anche un'opzione più sofisticata chiamata mappa immagine. In questo caso, grazie all'utilizzo di un numero piuttosto elevato di tag e attributi Html, è possibile creare un'intera mappa di collegamenti con aree attive (cliccabili e di varie forme - un rettangolo, un cerchio, un poligono) da un'immagine.

Ad esempio, puoi posizionare una foto grande sulla tua pagina e fare in modo che quando fai clic su parti diverse di essa, pagine diverse si aprano con collegamenti ipertestuali diversi. In effetti, ci vuole molto tempo per descrivere la mappa dell'immagine, ed è improbabile che qualcuno la usi, quindi non lo farò, perché "il gioco non vale la candela".

Buona fortuna a te! A presto sul sito delle pagine del blog

Puoi guardare altri video andando su

Potresti essere interessato

Select, Option, Textarea, Label, Fieldset, Legend - Tag Html del modulo di elenco a discesa e del campo di testo
Come inserire un collegamento e un'immagine (foto) in HTML - tag IMG e A
Iframe e Frame: cosa sono e come utilizzare al meglio i frame in Html
Caratteri degli spazi bianchi e loro formattazione del codice in Html, nonché caratteri speciali dello spazio unificatore e altri mnemonici
Come vengono impostati i colori nel codice Html e CSS, selezione delle sfumature RGB nelle tabelle, risultati Yandex e altri programmi

(Troverete altri esempi in fondo a questa pagina)

Collegamenti ipertestuali HTML (collegamenti)