Consideriamo l'uso di collegamenti ipertestuali nell'esempio n. 1.

Visualizza le specifiche HTML 5 può essere qui.
La pagina si aprirà in una nuova finestra.

E puoi scaricare tabelle di elementi e attributi qui.

Esempio 1. Utilizzo di collegamenti ipertestuali

Utilizzo di collegamenti ipertestuali per creare ancore su una pagina

L'elemento "a" può essere utilizzato anche come collegamento ipertestuale per navigare all'interno di una pagina. Per fare questo, nel posto giusto nel documento, devi creare ancora(dall'inglese. ancora), cioè segnalibro e specificarlo come destinazione nel collegamento ipertestuale. Un'ancora viene creata utilizzando un elemento "a" vuoto con un attributo specificato nel tag di apertura. Puoi anche utilizzare l'elemento di markup richiesto come ancoraggio, a cui un collegamento ipertestuale interno porterà in futuro. Per fare ciò, devi solo specificare un attributo al suo interno. Inoltre, nell'attributo href del collegamento ipertestuale stesso, il simbolo del cancelletto "#" e il valore dell'attributo anchor sono specificati come valore. Per renderlo più chiaro, consideriamo tutto sull'esempio n. 2.

Sono il primo paragrafo.

Visualizza tabella attributi HTML 5 può
sul sito ufficiale qui.
La pagina si aprirà in una nuova finestra e sarà
scorrere fino a una tabella con attributi.

Puoi andare al primo paragrafo qui.

Esempio n. 2. Utilizzo di collegamenti ipertestuali interni

Notare la presenza di un'ancora nell'indirizzo assoluto specificato come valore dell'attributo href nel secondo paragrafo dell'esempio. Quando si utilizza tale collegamento ipertestuale, il browser andrà prima all'indirizzo specificato e quindi farà scorrere la pagina fino alla posizione dell'ancora specificata. Se non ci sono ancoraggi sulla pagina, la pagina verrà mostrata dall'inizio.

Collegamenti ipertestuali relativi e costruzione di indirizzi relativi

In conclusione del paragrafo, si consideri il principio di costruzione indirizzi relativi... Lascia che il nostro collegamento ipertestuale sia in un documento situato su server locale per l'indirizzo http: // localhost / site / doc_1 / doc_2 / ... / doc_n / web_page.html, dove doc_n è l'ennesimo livello di nidificazione della cartella. In questo caso, viene automaticamente presa come base la cartella doc_n, in cui si trova il nostro documento con un collegamento ipertestuale, su cui viene costruito tutto l'indirizzamento. Così:

• Se vuoi che il link punti al documento di destinazione new_page.html situato nella stessa cartella doc_n del nostro documento con collegamento ipertestuale originale, devi solo impostare il nome del documento di destinazione come valore dell'attributo href del link: href = "nuova_pagina.html".
• Per navigare al documento di destinazione new_page.html situato nella cartella http: // host locale / sito / doc_1 / doc_2 / ... / doc_n / doc_n_1 / ... doc_n_k /, il valore dell'attributo href del collegamento dovrebbe includere solo le cartelle annidate in doc_n e ovviamente il nome del documento di destinazione: href = "doc_n_1 / ... doc_n_k / nuova_pagina.html"... Pertanto, diciamo al browser che dovrebbe andare nella cartella doc_n_1 situata nella cartella doc_n con documento originale, in cui è registrato il collegamento ipertestuale, quindi alla cartella doc_n_2 e così via, finché non entra nella cartella doc_n_k con il documento di destinazione situato lì, che dovrebbe aprire.
• Per arrivare alla cartella di un livello superiore a quello originale, viene utilizzata una speciale combinazione di simboli "../". Per salire di n livelli, scrivi la combinazione "../" n volte di seguito. Quindi nel nostro caso, per seguire il collegamento al documento di destinazione http: // localhost / site / doc_1 / doc_2 / ... / doc_n-3 / new_page.html l'attributo href del collegamento deve avere il valore "../../../new_page.html". Pertanto, informiamo il browser che dovrebbe andare nella cartella doc_n-1, quindi doc_n-2 e doc_n-3, e quindi aprire il documento di destinazione new_page.html che si trova lì.
• Se è necessario non solo salire su più livelli, ma anche andare lì in una cartella (o più sottocartelle) per accedere al documento di destinazione, allora nel valore dell'attributo href del collegamento, per prima cosa, è necessario scrivere il numero richiesto di livelli di sollevamento utilizzando i simboli ". ./ ", quindi aggiungere il percorso dalla cartella risultante al documento di destinazione. Ad esempio, se il documento di destinazione si trova nella cartella new_doc e il percorso dell'indirizzo è simile a http: // localhost / site / doc_1 / doc_2 / ... / doc_n-3 / new_doc / new_page.html, allora l'attributo href del collegamento deve essere "../../../nuovo_doc/nuova_pagina.html"... quelli. diciamo al browser di salire di tre livelli rispetto alla cartella di origine doc_n, che contiene il documento con il collegamento ipertestuale, quindi di andare nella cartella new_doc e aprire il documento di destinazione new_page.html

Ad esempio, è possibile scaricare un minisito tutorial interamente costruito sulla base dell'indirizzamento relativo. Dopo la navigazione, sperimenta modificando e creando nuovi collegamenti, cartelle e pagine.

Collegamenti ipertestuali relativi molto comodo quando si sviluppano applicazioni browser offline, ad esempio manuali di riferimento. Tuttavia, ricorda che quando sposti un documento dalla cartella corrente a un'altra, tutti i relativi collegamenti smetteranno di funzionare. Pertanto, dovranno essere riscritti. Se i collegamenti relativi puntano a file che si trovano anche all'interno della cartella corrente o in sottocartelle, dopo aver spostato questa cartella in un'altra posizione, tutti i collegamenti nel documento continueranno a funzionare.

Se devi iniziare a contare un percorso relativo dalla radice del sito, aggiungi una barra "/" all'inizio del percorso. Ad esempio, il collegamento " Casa"indica un documento che si trova nella cartella principale del sito (non quella attuale!). Nota che il conteggio dalla radice del sito funziona solo sotto il controllo di un server web reale. Su un server locale, ad esempio, Xampp, devi iniziare a contare dal nome della cartella principale.

Ciao cari visitatori!

In questo articolo, ti mostrerò come aggiungere un collegamento al sito sotto forma di un semplice collegamento ipertestuale, un'immagine e un pulsante con cui puoi impostare il tuo design usando i CSS stili. Tutte e 3 le opzioni vengono utilizzate molto spesso e hanno un buon effetto se utilizzate dai visitatori.

Cominciamo con il più semplice e arriviamo al più difficile.

Collegamento regolare e collegamento ipertestuale

http: //site/poleznoe/kak-sdelat-ssylku-na-sait.html

http: //site/poleznoe/kak-sdelat-ssylku-na-sait.html

Questa opzione ha luogo, ma c'è un inconveniente significativo se stiamo parlando dell'efficacia di un tale collegamento. Non è cliccabile, cioè non ci si può accedere con un semplice clic del mouse. Questa opzione è piuttosto difficile da percepire per i visitatori.

Un'altra cosa è un collegamento ipertestuale, che, se cliccato, reindirizza a un altro documento su Internet, sia interno (all'interno dello stesso sito) che esterno (un altro sito). Di seguito puoi vedere un esempio di tale collegamento. Prova a cliccare sul link.

Dovrebbe aprirsi una nuova scheda home page la mia risorsa. Per implementare questa opzione, devi utilizzare i mezzi del tuo motore o scrivere la seguente riga nel codice HTML.

Clicca qui

Il collegamento viene creato con un semplice tag , all'interno del quale è presente l'indirizzo stesso dove l'utente deve essere reindirizzato, nonché l'ancora del collegamento (nell'esempio sopra, l'ancora è la frase "clicca qui"), che indica il testo del collegamento che spiega cosa si otterrai quando vai a questo indirizzo.

Se hai un semplice sito web realizzato in HTML, allora nell'editor di pagina dovresti scrivere solo un codice simile, cambiare il mio indirizzo con il tuo e indicare il tuo ancoraggio. Sembrerà questo.

All'interno del tag link c'è anche un attributo per aprire la pagina in una nuova scheda.

obiettivo = "_vuoto"

Anche questo è molto importante, quindi è consigliabile non allontanare il visitatore dalla risorsa, ma lasciarlo. Utilizzando questo attributo, ti assicurerai che il visitatore che clicca su molti link in una pagina non lasci quella corrente, ma allo stesso tempo apra molte altre pagine. Questo è importante se stai promuovendo un sito web.

Puoi aggiungere l'attributo title al link, che è un tag di intestazione e far sapere ai motori di ricerca dove sta andando il link. Inoltre, questo tag viene visualizzato (se registrato) quando passiamo il mouse sul collegamento sotto forma di suggerimento.

È consigliabile aggiungere un tag del titolo in modo che i visitatori possano vedere questo suggerimento al passaggio del mouse e capire dove stanno andando. Questo è fatto semplicemente, all'interno del tag di apertura come nell'esempio sotto.

Quando si utilizza un motore come WordPress, aggiungere un collegamento a un sito è molto semplice senza alcuna modifica in modalità html. L'editor dei post ha un'icona speciale con un'icona di connessione.

Nell'immagine, ho mostrato l'intero processo di aggiunta di un collegamento tra il testo e un'altra pagina.

1. Per prima cosa, seleziona la frase che vuoi creare un collegamento;
2. Fare clic sull'icona Aggiungi collegamento;
3. Impostiamo i parametri del collegamento (l'indirizzo della pagina in cui l'utente deve essere trasferito, nonché il titolo del collegamento, ovvero l'ancora, se necessario).

Non è necessario inserire il titolo del collegamento, poiché sarà il testo evidenziato nel primo passaggio. Nell'immagine ho mostrato l'aggiunta di collegamenti da pagine esistenti del sito. Puoi farlo, quindi facendo clic su una delle voci dall'elenco degli URL e il titolo verrà inserito automaticamente.

L'URL può essere inserito anche su un sito esterno. In tal caso, inserisci l'indirizzo completo (assoluto) della pagina. Per aprire la pagina in una nuova scheda, non è necessario scrivere manualmente l'attributo. Il motore prevede tale possibilità utilizzando un'unica check-box (vedi immagine sopra).

Un po' più in alto, ho detto dell'indirizzo assoluto. Ciò significa che all'interno del link viene inserito l'indirizzo completo della pagina a cui devi reindirizzare, indipendentemente dal fatto che si tratti di una nostra risorsa o di un'altra.

C'è anche un indirizzo relativo quando non è necessario scrivere l'indirizzo completo. Devi solo registrare il percorso di qualche directory o pagina del sito, senza specificare il nome del dominio. Tali collegamenti funzionano solo per una pagina all'interno di una singola risorsa. Non farai riferimento a un progetto esterno come quello.

Se vuoi approfondire il processo di creazione di indirizzi relativi, ti consiglio vivamente leggi questo articolo su un'altra risorsa. Tutto è molto bello lì.

Link immagine

Anche i collegamenti alle immagini sono molto diffusi, sebbene dovrebbero essere utilizzati solo per lo scopo previsto. Se siamo semplici link ad altre pagine all'interno del nostro sito, allora è meglio non farne immagini, poiché non è sempre chiaro che è necessario cliccare sull'immagine per arrivare a qualche pagina.

È consigliabile farlo quando si desidera pubblicizzare qualcuno, ad esempio il videocorso di qualcuno. In questo caso, fornisci un normale collegamento ipertestuale, seguito da un'immagine del collegamento. In questo caso sarà più chiaro che l'immagine porta al sito del corso dove può essere acquistata.

Se prendiamo la modalità html, il principio di costruzione della struttura del collegamento è esattamente lo stesso, inclusi tutti gli attributi. L'unica differenza è l'ancora del collegamento, che assomiglia al codice dell'immagine stessa. Nel caso precedente, c'era un testo semplice.

In pratica, sarà simile a questo.

Come puoi vedere, all'interno dei tag link di apertura e chiusura c'è un codice immagine, che ha anche le sue caratteristiche. In esso, è necessario registrare lo stesso tag title, specificare il percorso dell'immagine sull'hosting o su un'altra risorsa. Dovresti anche specificare le dimensioni dell'immagine (larghezza - larghezza, altezza - altezza). E dovresti assolutamente prescrivere l'attributo alt, che funge da descrizione per l'immagine. Se scrivi tutto, l'ottimizzazione dell'immagine sarà al livello.

Ecco come appare in modalità html. Ho diviso il codice in 3 parti per rendere più comprensibile la struttura del collegamento (l'immagine è cliccabile).

La difficoltà qui è solo quella di scrivere correttamente il codice dell'immagine, che viene utilizzata come ancora.

Pulsante di collegamento utilizzando gli stili CSS

Se vuoi fare qualcosa in modo diverso, anche questa opzione ha luogo. Inoltre, ti consente di cambiare gli stili in modo che quando passi con il mouse sul pulsante, cambieranno sia il pulsante stesso che il colore dell'etichetta che sarà al suo interno. Se scatti una foto, non è sempre possibile implementarla. Con gli stili, tutto è possibile.

Inoltre, un ottimo vantaggio è che possiamo posizionare il pulsante rigorosamente al centro e sarà cliccabile solo nell'area del pulsante. Se prendiamo un'immagine, quando la posizioniamo al centro, sarà cliccabile l'intera area della parte del contenuto in larghezza nell'area dell'immagine. A volte un tale difetto porta a un clic accidentale sull'immagine e, francamente, fastidioso.

Ad esempio, ho creato un pulsante così semplice che porta alla pagina principale del sito. Puoi verificarne le prestazioni.

Se guardi il codice sorgente del pulsante, sei tutto molto semplice. L'unica differenza rispetto a un normale collegamento ipertestuale è la presenza di un id, che viene aggiunto all'interno del tag di apertura e ad esso, a loro volta, gli stili di disegno sono registrati nel file style.css.

Ecco la struttura del pulsante stesso.

Lo vediamo subito dopo aver aperto il tag link id = "pulsante" è registrato, che ha i suoi stili di design. Il resto della struttura è identico al collegamento ipertestuale.

Il principio è chiaro, quindi fornisco gli stili che ho aggiunto a questo pulsante di collegamento.

/ * stili del pulsante in modalità normale * / #pulsante (display: blocco; larghezza: 550 px; / * larghezza del pulsante * / altezza: 60 px; / * altezza * / colore di sfondo: # ff4343; / * colore di sfondo * / testo- shadow: 1px 1px #800909; / * text shadow * / color: #fff; / * text color * / border-style: solid; / * tipo di linea del bordo del pulsante * / border-width: 1px; / * spessore del bordo del pulsante ( border) linee * / border-color: # db3a3a; / * button border (border) line color * / font-size: 18px; / * text size * / line-height: 60px; / * text line height * / font- peso: normale; / * peso del testo * / famiglia di caratteri: arial; / * tipo di carattere * / allineamento del testo: centro; / * allineamento del testo * / decorazione del testo: nessuno; / * sottolineatura del testo * / margine: 40px auto ; / * riempimento del pulsante da altri elementi della pagina * / text-transform: maiuscolo; / * in modo che tutte le lettere siano maiuscole. Se non è necessario, elimina la riga * /) / * stili del pulsante al passaggio del mouse * / pulsante # : hover (colore di sfondo: # f23333; dimensione del carattere: 19px;)

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

Sì, senza tali collegamenti Internet non sarebbe così conveniente. No, sto mentendo. Non sarebbe affatto conveniente in termini di navigazione. Riesci a immaginare Internet senza di loro? Io 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 collegamento normale? Qui tutto è davvero semplice: un link è una semplice scrittura di informazioni che rimandano a un documento. Allo stesso tempo, non puoi fare clic su questo testo (non succederà nulla), ma sai dove cercare informazioni.

Esempio: puoi imparare come selezionare i capelli in Photoshop su // site / 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 desiderato. Inoltre, il testo stesso può essere qualsiasi, mentre l'indirizzo è già scritto all'interno separatamente e può essere completamente diverso. Ma comunque sia, lo stesso nel discorso colloquiale sono chiamati semplicemente 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 questioni.

Un tag accoppiato è responsabile del collegamento ipertestuale, ma di per sé non è nulla. Va sempre con un attributo. E in questo caso, dobbiamo prescrivere costantemente questo stesso href. Nel valore dell'attributo, mettiamo il collegamento stesso alla risorsa desiderata. E nel contenuto stesso, scriviamo il testo stesso, che dovrebbe diventare cliccabile (lavoro sul 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 " Sistema di ricerca Yandex ", la 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 un sito, e i collegamenti esterni portano a una risorsa di terze parti. E ora ti mostrerò come fare entrambe le cose.

Transizioni interne

File nella stessa cartella

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

File in un'altra cartella

1. Apri il file pushkin.html nel Blocco note ++
2. Ora trova la parola foto e avvolgila nei tag<a href> .
3. Adesso attenzione! Nel valore dell'attributo scriviamo il percorso relativo al file in modifica, ovvero il pushkin.html stesso. Dovresti avere qualcosa del genere:

Foto

Cosa abbiamo fatto adesso? E abbiamo fatto quanto segue: poiché il percorso verso la fotografia sta in cartella separata img, che si trova nella stessa cartella del file pushkin.html, quindi nel valore dell'attributo dobbiamo prima scrivere il nome della cartella, e poi dopo una barra (/) il nome completo del documento (nel nostro caso , la 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 cliccando su questo link arriveremo al file fofo.jpg, che si trova nella cartella img.

Come è? Tutto chiaro? Se succede qualcosa, chiedi, non esitare.

Transizioni esterne

E, naturalmente, non si può non menzionare i collegamenti esterni, dopo aver cliccato su cui arriveremo a un sito completamente diverso. Ma qui non c'è niente di complicato. 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 diventare un maestro di progetti sociali.

Qui andiamo 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 verrà chiusa. E questo non va bene. In particolare, per progetti di contenuto promosso o blog, si consiglia di fare in modo che quando si fa clic su un collegamento, il documento si apra in una nuova finestra o scheda senza chiudere la pagina.

L'attributo di destinazione con il valore "_blank" ci aiuterà in questo. Non c'è niente di complicato qui. Devi solo inserirlo 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 registreremo proprio questo attributo. Dovrebbe sembrare come questo:

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

Bene, 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, rimarrà su di esso, solo se non lo chiuderà specificamente da solo. Prova a fare tutto da solo, fai tutto con le tue bellissime penne. Non c'è bisogno di copiare e incollare.

Qualcosa del genere. Sembra che abbia detto tutto il più importante, ma se vuoi muoverti in questa direzione e imparare HTML e CSS per creare siti Web professionali, blog e persino negozi online, assicurati di guardare ottimo video corso su questo tema. Le lezioni sono davvero eccellenti e sono davvero rivolte a persone che non hanno ancora familiarità con la costruzione di siti o non la conoscono completamente.

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. Pertanto, non dimenticare di iscriverti agli aggiornamenti sul mio blog, per non perdere qualcosa di interessante. Bene, ti auguro successo in tutti i tuoi sforzi. Ciao ciao!

Cordiali saluti, Dmitry Kostin.

collegamento ipertestualeè un'indicazione al browser a quale oggetto, all'interno o all'esterno del documento HTML, deve fare riferimento. Utilizzando i collegamenti ipertestuali, gli utenti possono navigare da una pagina all'altra, caricare file, ecc. Come decorare un collegamento ipertestuale con un pezzo di testo o un'immagine ( file grafico). Quando una pagina Web viene visualizzata in una finestra del browser, il collegamento di testo è generalmente evidenziato in blu e sottolineato. Tuttavia, questo non è sempre il caso. Per andare al punto a cui punta il collegamento, l'utente deve solo fare clic sul suo testo.

Per creare un collegamento ipertestuale, devi utilizzare i tag e definendo per il tag attributo Href... Il suo valore deve essere l'URL a cui punta il collegamento. Il testo del collegamento è posizionato tra i tag e.

Se la pagina web a cui punta il collegamento si trova su un altro sito, allora il valore dell'attributo Href deve essere un URL completo con il nome del protocollo incluso; tali collegamenti sono chiamati collegamenti esterni. Se il collegamento ipertestuale punta a un'altra pagina dello stesso sito, per cercare il documento è sufficiente specificare solo il percorso relativo; tale collegamento è chiamato interno.

Un collegamento ipertestuale può puntare a un punto specifico all'interno di una pagina, se prima incorpori un tag di ancoraggio lì. I tag sono usati anche per definire le ancore e, ma invece dell'attributo Href imposta l'attributo NOME il cui valore deve essere il nome dell'ancora. Può essere sia lettere che numeri, ma non deve contenere spazi. Se nella pagina sono presenti diversi tag, dovrebbero avere tutti nomi diversi.

Per creare un collegamento all'ancora installata, è necessario nel tag inserisci il suo nome alla fine dell'URL dopo il nome del documento, separandolo con # ... Simbolo # significa che il nome del tag è scritto dopo di esso, non il nome del file.

Testo del collegamento

Se l'attributo Href imposta indirizzo E-mail con la parola mailto: davanti ad essa, quindi dopo aver selezionato tale collegamento, puoi inviare un messaggio, dove nel campo "A cui" questo indirizzo verrà registrato.

L'esempio seguente mostra l'uso di vari tipi di collegamenti ipertestuali.

Documento HTML che utilizza collegamenti ipertestuali e ancoraggi:

Nuove versioni dei programmi standard per sistema operativo Windows e i driver sono disponibili sul sito Web dell'azienda Microsoft.

E ora puoi andare alla pagina principale del sito.

Puoi scoprire come metterti in contatto con me alla fine di questa pagina.

in questo documento di testo.

[e-mail protetta]

Ecco come apparirà il documento HTML dopo che è stato reso dal browser:

Nuove versioni dei programmi standard per la sala operatoria Sistemi Windows e i driver sono disponibili sul sito Web di Microsoft.

È possibile utilizzare i materiali pubblicati in questo documento di testo.

In questo esempio, la parola "Microsoft" è contenuta nel tag del collegamento ipertestuale esterno e il testo "Pagina iniziale del sito"- nel tag del link interno. Testo "Alla fine di questa pagina" inserito nel tag di collegamento di ancoraggio, e "In questo documento di testo"- in un tag di collegamento ipertestuale con un attributo Href, in cui abbiamo impostato il collegamento non con la pagina web, ma con documento di testo che viene salvato nella stessa cartella del documento HTML corrente. Il testo " [e-mail protetta] "Si trovano nel tag che descrive l'etichetta dell'ancora e nell'attributo Href l'indirizzo e-mail è specificato.

Se un visitatore della pagina utilizza link esterno Microsoft, la pagina si aprirà all'indirizzo: http://www.microsoft.com/... Dopo aver cliccato sul collegamento ipertestuale "Pagina iniziale del sito" si aprirà la pagina principale del sito. Dopo aver cliccato sul link interno nel documento di testo, si aprirà una finestra con il documento di testo testo.doc contenuto nella cartella corrente. Se utilizzi il link di ancoraggio alla fine di questa pagina, l'immagine della pagina corrente verrà spostata in modo che il testo dell'etichetta " [e-mail protetta] ", A cui è associata l'ancora, verrà posizionato nella parte del documento visibile sullo schermo.

Luogo del testo" [e-mail protetta] "È un collegamento ipertestuale, tramite il quale l'utente sarà in grado di inviare una lettera utilizzando l'e-mail configurata sul computer all'indirizzo specificato nell'attributo Href indirizzo - [e-mail protetta] .

Diamo un'occhiata a un altro esempio di creazione di collegamenti ipertestuali di testo. Supponiamo che ci siano due documenti HTML archiviati in una cartella specifica che descrivono due aree del lavoro dell'azienda - 1.html e 2.html.

Creiamo un elenco di collegamenti ipertestuali, ognuno dei quali illustra una delle direzioni del lavoro dell'azienda:

La nostra produzione

I nostri clienti

Risultato:

La nostra produzione

I nostri clienti

In questo esempio, i tag del collegamento ipertestuale sono contenuti nei tag di intestazione di primo livello. I testi dei collegamenti ipertestuali verranno posizionati su righe separate e stilizzati come intestazioni di primo livello.

Per impostazione predefinita, i collegamenti ipertestuali di testo vengono visualizzati in blu e sottolineati o in rosso scuro se sono già stati utilizzati. Per cambiare questi colori, aggiungi gli attributi corrispondenti nel tag : ... Ciò significa che dopo il caricamento della prima pagina, tutti i collegamenti ipertestuali saranno viola e se un visitatore ne utilizza uno, il testo diventerà giallo. Ciò è utile quando nella pagina sono presenti molti link e il visitatore vuole visualizzarli uno per uno: quindi la sostituzione di un colore diverso ai collegamenti ipertestuali visitati consente di organizzare tale visualizzazione.

Un collegamento ipertestuale è l'elemento principale dell'ipertesto, un segno distintivo dei documenti HTML che collega tra loro pagine web e altri file. Per molte persone, la parola "Link" è ragionevolmente associata alla parola "Internet".

Link semplici

HTML utilizza il tag per creare collegamenti. e i suoi attributi.

Passiamo dal semplice al complesso e prima impariamo come aggiungere collegamenti elementari a un documento HTML. Abbiamo bisogno dei seguenti elementi linguistici:

href- attributo tag , il cui valore sarà l'indirizzo del collegamento. Che tu stia collegando a un sito, una pagina web o un file, non importa, solo il valore di questo attributo sarà diverso.

Ora diamo un'occhiata a una riga di codice HTML:

Ora diamo un'occhiata a ciascun elemento della stringa.

è un tag responsabile della creazione di un collegamento.

- cartellino di chiusura.

Tra i caratteri > e < il testo Link si trova. Verrà visto dall'utente che ha aperto la pagina, farà clic su di esso per andare all'indirizzo specificato in esso.

Ad esempio, nella parte inferiore di un documento HTML, si desidera inserire un collegamento "Su", che porterà al suo inizio, l'intestazione "Inizio pagina". Per fare ciò, è necessario inserire un'ancora all'inizio della pagina e un collegamento ad essa nella parte inferiore della pagina.

Lascia che l'ancora sia chiamata iniziare. Quindi nel tag, al cui contenuto porterà il link, è necessario aggiungere l'attributo id con il significato inizio.

Inizio pagina

L'ancora è impostata e ora non resta che aggiungere un collegamento che lo conduca. Nel nostro caso, sarà simile a questo:

Su

Nota: c'è un reticolo davanti al nome dell'ancora - questo è caratteristica distintiva collegamenti interni.

Link grafici

Con l'avvento del tag HTML 5 trasformato in un contenitore in grado di contenere elementi di blocco, così che un collegamento possa ora essere non solo testo o immagine, ma anche una tabella, un elenco o un'intera pagina.

Collegamenti a e-mail e Skype

Per comodità dei visitatori del sito, puoi non solo indicare le tue informazioni di contatto sulla pagina, ma anche renderle attive, in modo che quando l'utente clicca sull'indirizzo e-mail, l'utente si apra immediatamente client di posta e quando fai clic su Accesso Skype il programma ha immediatamente richiesto il permesso di chiamare.

Scrivi alla posta!

Chiamami su Skype