Html: i collegamenti ipertestuali
Come collegare i documenti
I collegamenti ipertestuali sono la base del web. Chiunque navighi sul web si imbatte continuamente nei cosiddetti link che uniscono una pagina html ad un’altra in maniera tale che nessuna di queste resti irraggiungibile.
La caratteristica primaria degli ipertesti è quella di formattare i documenti in forma non sequenziale. Grazie ai collegamenti ipertestuali (link) è possibile leggere i documenti senza seguire necessariamente un ordine sequenziale.
La peculiarità di saltare da un punto all’altro del documento è tipica del WWW, dove spesso seguendo un documento si passa da un sito all’altro senza soluzione di continuità. La maggiora parte dei link vengono individuati nel browser con un testo sottolineato di colore blu.
Passando il puntatore del mouse sul testo evidenziato il cursore assume il simbolo della mano e nella barra di stato della finestra viene mostrato l’url del link che è possibile raggiungere al successivo clic del tasto sinistro.
Link a URL
Ecco la sintassi per creare un link con riferimento a un sito web:
<a href="URL">DESCRIZIONE</a>
Quindi se scriviamo il codice:
<a href="http://www.puntoinformaticofree.it/">Punto Informatico Free</a>
Produciamo:
Il collegamento viene aperto nella stessa finestra del browser, per aprirlo in una nuova finestra bisogna usare l'attributo target.
Link a URL con l'attributo target
Con l’attributo target possiamo far capire al browser su quale finestra dovrà aprire il collegamento:
<a href="URL" target="nome finestra">DESCRIZIONE_LINK_IN_ALTRA_FINESTRA</a>
Questo attributo risulta indispensabile qualora ci si trovasse a lavorare con una pagina strutturata su più frame (più sottofinestre), per aggiornare tramite link solo il contenuto di una finestra.
Con l’uso sempre minore dei frame (che vedremo nelle lezioni successive), l’attributo target viene particolarmente utilizzato per aprire un collegamento in una nuova finestra senza sovrascrivere il contenuto della finestra di partenza (utile per saltare da un sito ad un altro).
In questo caso l’attributo target assume il parametro “_blank”:
Quindi se scriviamo il seguente codice:
<a href="http://www.puntoinformaticofree.it/" target="_blank">Punto Informatico Free</a>
Produciamo:
Ma in questo caso il link viene aperto in una nuova finestra.
Usare una immagine per un link
Le immagini da usare devo essere caricate su internet bisognerà usare il loro percorso url. Le immagini possono essere in formato JPG o formato PNG.
Immaginiamo di aver inserito sul nostro server all'interno della cartella "markdown_tutorial" la cartella "resources", al cui interno abbiamo collocato un file col nome "google.png" con l'immagine del logo del motore di ricerca Google.
Quindi se voglio inserire il link della pagina di google: https://www.google.it
Dovremo inserire il seguente codice HTML:
<a href="url.html"><img src="url_percorso_immagine.png"></a>
Nel nostro caso dovremo digitare il seguente codice HTML:
<a href="https://www.google.it"><img src="http://www.puntoinformaticofree.it/markdown_tutorial/resources/google.png"></a>
Produrremo:
Se non hai inserito un'attributo border ("bordo") vedrai un piccolo bordo intorno all'immagine dopo che è stata trasformata in link. Per eliminare questo bordo, aggiungi semplicemente border="0" al tag <img>.
Creare link a indirizzo email
Per mandare una email si può mettere sulla propria pagina web o documento un link HTML che apre automaticamente il programma di posta elettronica.
Digitare il seguente codice HTML:
<a href="mailto:indirizzo@email">Scrivimi una email</a>
Nel mio caso per raggiungere la mia email:
<a href="mailto:risatascalciante@gmail.com">Scrivimi una email</a>
Si otterrà: