La possibilità di creare un collegamento in un documento che ti porta a un altro documento, forse su una rete a metà del globo, è probabilmente la ragione più importante che il World Wide Web è stato inventato. Questi collegamenti, chiamati hyperlink, sono la "H" in HTML (HyperText Markup Language). Senza collegamenti ipertestuali, il web non sarebbe molto utile. Non ci sarebbero motori di ricerca, social media o banner pubblicitari (ok, molti di noi potrebbero vederli andare).
Quando si creano le proprie pagine Web, si desidera creare collegamenti ipertestuali e KompoZer dispone di strumenti che semplificano l'aggiunta di collegamenti di qualsiasi tipo. La pagina di esempio illustrata in questo tutorial conterrà collegamenti ad altri siti Web in quattro categorie, ad altre parti della stessa pagina Web e per avviare un messaggio di posta elettronica. Inizierò con una rubrica e quattro
H3 titoli per ogni categoria. Nella pagina successiva aggiungeremo dei collegamenti. 01 del 05
Creazione di un collegamento ipertestuale con KompoZer
Gli strumenti di collegamento ipertestuale di KompoZer sono accessibili facendo clic sul pulsante Link nella barra degli strumenti. Per creare un collegamento ipertestuale:
- Posiziona il cursore sulla pagina in cui desideri visualizzare il collegamento ipertestuale.
- Fai clic sul pulsante Link nella barra degli strumenti. Apparirà la finestra di dialogo Proprietà del collegamento.
- Il primo campo che devi compilare è la casella Testo link. Digitare il testo che si desidera visualizzare nella pagina per il collegamento ipertestuale.
- Il secondo campo che devi compilare è la casella Link Location. Digitare l'URL della pagina che il collegamento ipertestuale prenderà l'utente quando viene fatto clic. È una buona idea copiare e incollare l'URL dalla barra degli indirizzi del tuo browser. È molto meno probabile che tu commetta un errore in questo modo e, almeno al momento della creazione del collegamento, sai che la pagina è viva e che il collegamento non è interrotto.
- Fare clic su OK e la finestra di dialogo Proprietà collegamento verrà chiusa. Il tuo link apparirà ora sulla tua pagina.
Sulla maggior parte dei browser, il collegamento ipertestuale verrà visualizzato nel testo sottolineato in blu per impostazione predefinita. È possibile applicare i propri stili ai collegamenti ipertestuali con KompoZer, ma per ora ci atteniamo al collegamento ipertestuale di base. È consigliabile visualizzare l'anteprima della pagina in un browser Web e fare clic sui collegamenti per accertarsi che funzionino.
02 di 05Creazione di un collegamento di ancoraggio con KompoZer
C'è un altro tipo di collegamento ipertestuale che ti porta in un'altra parte della stessa pagina web quando fai clic. Questo tipo di collegamento ipertestuale è chiamato link di ancoraggio e l'area della pagina a cui sei indirizzato quando fai clic su quel collegamento è denominata ancoraggio. Se hai mai utilizzato il link "Torna all'inizio" nella parte inferiore di una pagina Web, fai clic su un collegamento a un'ancora.
KompoZer ti consente di creare ancore alle quali puoi collegarti utilizzando lo strumento di ancoraggio sulla barra degli strumenti.
- Clicca sull'area della tua pagina dove vuoi un'ancora. Ovvero, dove vuoi che il visualizzatore di pagine sia portato a quando viene cliccato un link di ancoraggio. Per questo esempio, ho fatto clic prima della "F" nell'intestazione della musica preferita.
- Fai clic sul pulsante Ancora sulla barra degli strumenti. Viene visualizzata la finestra di dialogo Proprietà ancoraggio con nome.
- Ogni ancora su una pagina ha bisogno di un nome univoco. Per questa ancora, ho usato il nome "musica".
- Fai clic su OK, e dovresti vedere, e il simbolo di ancoraggio appare nel punto in cui vuoi l'ancoraggio. Questo simbolo non apparirà sulla tua pagina web, è solo il modo in cui KompoZer ti mostra dove sono le tue ancore.
- Ripeti la procedura per tutte le altre aree della pagina in cui desideri che gli utenti possano saltare. Se nella pagina c'è molto testo separato da titoli o qualche altro separatore logico, le ancore sono un modo semplice per navigare in una pagina.
Successivamente, creeremo i link che portano il lettore alle ancore che hai creato.
03 di 05Creare la pagina di navigazione con KompoZer
Ora che disponi di ancore sulla tua pagina, creiamo i collegamenti che verranno utilizzati come scorciatoie per tali ancore. Per questo tutorial, ho creato una tabella di 1 riga, 4 colonne sotto l'intestazione superiore della pagina. Ogni cella di tabella contiene lo stesso testo di una delle intestazioni di categoria utilizzate per separare i collegamenti nella pagina. Creeremo il testo in ognuna di queste celle di tabella un link all'ancora corrispondente.
04 di 05Creazione di collegamenti ipertestuali agli ancoraggi con KompoZer
Ora che abbiamo i nostri ancoraggi sul posto e il testo che useremo per la navigazione della pagina, possiamo trasformare quei blocchi di testo in link. Utilizzeremo di nuovo il pulsante Link, ma questa volta funzionerà in modo leggermente diverso.
- Seleziona il testo che vuoi trasformare in un link. In questo esempio, ho selezionato il testo "Musica preferita" che si trova nella prima cella della tabella nella parte superiore della pagina.
- Fai clic sul pulsante Link nella barra degli strumenti. Si aprirà la finestra di dialogo Proprietà collegamento.
- In questo caso, abbiamo selezionato il testo prima di fare clic sul pulsante Link, quindi la sezione Link Text della finestra è già compilata e non può essere modificata. Fai clic sulla freccia giù nella sezione Posizione link. Verrà visualizzato un elenco di ancore che hai creato nei passaggi precedenti. Per questo esempio, seleziono l'ancora #musica.
- Clicca OK. Il testo "Musica preferita" nella barra di navigazione si trasforma in un collegamento che farà sì che lo spettatore salti a quella sezione sulla pagina quando si fa clic.
Noterai che ogni ancoraggio con nome nel menu a discesa ha un segno "#" davanti ad esso. Questo è come si dovrebbe creare un collegamento ad un ancoraggio in HTML. Il "#" davanti al nome dell'ancora indica al browser che questo collegamento ti porta in un'altra posizione sulla stessa pagina.
05 del 05Creazione di un collegamento ipertestuale da un'immagine con KompoZer
Sapevi che puoi creare un collegamento da immagini e testo? KompoZer ti permette di farlo usando solo pochi clic. Qui ho inserito una piccola icona che mostra una freccia rivolta verso l'alto e il testo "TOP" nella parte inferiore della pagina. Userò questa immagine come collegamento per tornare all'inizio della pagina.
- Fai clic con il pulsante destro del mouse su un'immagine e scegli Proprietà immagine e collegamento dall'etichetta di contesto. Si aprirà la finestra di dialogo Proprietà immagine.
- Nella scheda Posizione, vedrai il nome file dell'immagine e una vista miniatura già compilata. Dovresti inserire del testo nella casella di testo Alternativo. Questo è ciò che appare quando si sposta il mouse sull'immagine, e anche ciò che viene letto da uno screen reader quando una persona ipovedente legge la pagina web.
- Clicca sulla scheda Link. Qui puoi scegliere un'ancora dal menu, proprio come abbiamo fatto con i link di ancoraggio. In realtà, questa immagine viene utilizzata come collegamento di ancoraggio. Ho selezionato l'ancoraggio #Links_Of_Interest che ci riporterà all'inizio.
- Clicca OK. L'immagine ora torna alla parte superiore della pagina quando si fa clic.
