Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 1

Transcript

1 Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 1

2 IL LINGUAGGIO HTML Html è il linguaggio con cui le pagine web vengono scritte e progettate, anche se molti progettisti si rifiutano di pensare all'html come ad un linguaggio di layout. In effetti l'html non è nato per essere un linguaggio di progettazione, ma per essere un linguaggio di visualizzazione, che possa essere mostrato in modo diverso a seconda dei diversi computer e dei diversi sistemi operativi. L'Html, però, che ci piaccia o meno, è il linguaggio del web e quindi se si vuole costruire un sito o una pagina web bisogna conoscerlo. Magari non è necessario conoscere tutti i tag e tutti gli attributi, anche perchè oggi disponiamo di editor WYSIWYG molto potenti e precisi, ma conoscere almeno a grandi linee il linguaggio Html è fondamentale e risulta di grande aiuto nella realizzazione di qualunque progetto web. Un file HTML non è altro che un file di testo (definito genericamente "puro testo" o "testo ASCII"), sostanzialmente identico ai file di tipo TXT che si possono scrivere con un comune editor di testo, come il blocco note di windows. Per funzionare come pagina web, questo file di testo deve essere rinominato con il suffisso.html o.htm e deve contenere, oltre al testo vero e proprio, anche le istruzioni che consentono al browser di riconoscerlo e gestirlo correttamente. Queste istruzioni sono chiamate Tag (marcatori). Un tag è un comando racchiuso tra i segni < (minore) e > (maggiore), chiamati anche parentesi angolari. Quando il browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo schermo. Nella maggior parte dei casi i tag funzionano in coppia, richiedono cioè un'istruzione d'apertura ed una di chiusura secondo lo schema: <TAG DI INIZIO>elemento Cui si applica l istruzione</tag DI FINE> È anche possibile includere coppie di tag all'interno d'altre coppie di tag mantenendo una sequenza simmetrica. A titolo d'esempio, il tag identifica il grassetto ed il tag il corsivo. Così per formattare in grassetto e corsivo una parola si deve scrivere: Testo oppure: Testo ma non: Testo I tag in generale possono contenere attributi che ne definiscono determinate proprietà. Ogni attributo può assumere differenti valori. Quasi tutti i tag prevedono attributi che sono specifiche aggiuntive che ne influenzano il risultato. La sintassi è: <TAG ATTRIBUTO="valore">; ad esempio: <IMG SRC="foto.jpg">. Le virgolette che racchiudono il valore di un attributo a volte sono obbligatorie ed a volte no. In ogni caso sono sempre accettabili anche quando non sono necessarie. Come già detto, per creare un file HTML è sufficiente un editor di testo come il blocco note di Windows. Conoscendo bene il linguaggio HTML si può abbozzare una pagina o un intero sito con un editor WYSIWYG e in seguito apportare a mano al codice HTML generato tutti i ritocchi necessari per raffinare e perfezionare ulteriormente i risultati. Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 2

3 I tag essenziali La struttura essenziale di ogni pagina web e costituita da: I tag <HTML> e </HTML> all'inizio ed alla fine del documento; essi indicano al browser che tutto ciò che è compreso nel mezzo è una pagina web. I tag <HEAD> e </HEAD> racchiudono l'intestazione del documento dove si possono inserire informazioni che non vengono visualizzate nella pagina, ma che ne descrivono caratteristiche come titolo, autore e parole-chiave. Quando il browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo schermo. I tag <BODY> e </BODY> racchiudono il corpo del documento dove si inserisce il contenuto da visualizzare nella pagina (testo, collegamenti, immagini e così via). Esempio di pagina web vuota: <HTML> <HEAD> Sezione relativa all intestazione </HEAD> <BODY> Sezione relativa al corpo vero e proprio del documento </BODY> </HTML> <!- commento ->: questo tag consente di commentare alcune parti del codice della pagina e può essere inserito in qualsiasi punto. Quando nel codice HTML si inseriscono questi tag aggiuntivi bisogna fare sempre attenzione a non accrescere esageratamente ed inutilmente le dimensioni della pagina che incidono sensibilmente sui tempi di trasmissione, caricamento e visualizzazione nel browser. I tag di intestazione I tag di intestazione sono:<title> e <META>. Con <TITLE> si definisce il titolo della pagina web. Il titolo appare sulla barra superiore della finestra del browser quando la pagina viene visualizzata durante la navigazione. Questo tag richiede un'istruzione di apertura ed una di chiusura. La sintassi corretta è: <HEAD> <TITLE>Titolo della pagina</title> </HEAD> È buona norma specificare il titolo di ogni pagina web perché una pagina senza titolo è anonima e poco professionale. Non è possibile inserire nella stessa intestazione più di un tag <TITLE>. Mediante il tag <META> si possono inserire nell'intestazione dei dati che non vengono visualizzati nella pagina ma servono al browser e ai motori di ricerca per gestirne i contenuti in modo più efficace. È possibile specificare con il tag <META> informazioni come: il nome dell'autore della pagina, una breve descrizione dei contenuti della pagina ed un elenco schematico di parole-chiave legate ai contenuti. Il tag <META> non richiede chiusura ma l'aggiunta di alcuni attributi e dei rispettivi valori. Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 3

4 La sintassi generica è: <META ATTRIBUTO1= VALORE ATTRIBUTO2= VALORE > dove la voce ATTRIBUTO1 serve ad indicare il tipo di informazione e la voce ATTRIBUTO2 serve a specificare il contenuto concreto della meta-informazione. Per inserire nell'intestazione il nome dell'autore si utilizza: <META NAME=author CONTENT= nome e cognome > Per inserire nell'intestazione una descrizione del documento si utilizza: <META NAME=description CONTENT= breve descrizione della pagina > Per inserire nell'intestazione un elenco di parole-chiave che specificano l'argomento della pagina si utilizza: <META NAME=keywords CONTENT= parola1, parola2, parola3, parola4 > Le parole chiave possono essere separate sia da spazi che da virgole; alcuni motori di ricerca prediligono la prima tecnica, altri la seconda. Il tag BODY La sezione <BODY> è il corpo principale del documento HTML dove vanno inseriti tutti i contenuti che devono apparire nella pagina web. Vedremo adesso alcune caratteristiche generali del corpo del documento, come lo sfondo della pagina, il colore del testo ed il colore dei collegamenti ipertestuali, che possono essere specificate mediante attributi da aggiungere al tag <BODY>. Per impostare un colore come sfondo della pagina web si usa l'attributo BGCOLOR. Se vogliamo realizzare una pagina con lo sfondo nero scriveremo allora: <BODY BGCOLOR= # > dove il codice del colore è in formato esadecimale. Si può indicare il colore mediante il nome in inglese anziché il formato esadecimale: <BODY BGCOLOR= black > Questa però non è una pratica comune perché non tutti i browser sono in grado di interpretare correttamente tale genere di espressione. È possibile impostare come sfondo della pagina web un'immagine in formato GIF o JPEG utilizzando l'attributo BACKGROUND secondo la sintassi: <BODY BACKGROUND= percorso e nome del file > Se l'immagine si trova nella stessa cartella della pagina HTML e si chiama sfondo.gif scriveremo: <BODY BACKGROUND= sfondo.gif > Inserendo un'immagine come sfondo della pagina web, questa viene automaticamente replicata dal browser in modo da coprire l'intero spazio visibile. Allora è opportuno scegliere un'immagine che si presti ad essere replicata e affiancata in un numero indefinito di copie, senza che si vedano le giunture o si creino stacchi poco estetici. Per impostare a priori il colore del testo del testo della pagina si usa l'attributo <TEXT> secondo la sintassi: Se non specificato, il colore di default del testo è il nero. <BODY TEXT= #codice del colore > Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 4

5 Tramite gli attributi del tag <BODY> si possono definire anche i colori dei collegamenti ipertestuali. I colori da definire sono tre: per i collegamenti ipertestuali in condizioni normali si usa l'attributo LINK="codice del colore"; per i collegamenti attivi, nel momento cioè in cui vi si fa clic, si usa l'attributo ALINK="codice del colore"; per i collegamenti già visitati si usa l'attributo VLINK="codice del colore". In pratica per personalizzare il colore dei collegamenti la sintassi è: <BODY LINK= colore1 ALINK= colore2 VLINK= colore3 > Paragrafi (Tag BR, P) Quando si scrive il codice HTML, per mandare a capo il testo che segue non basta premere il tasto Invio. Anche se nel codice una frase sembra andare a capo, ciò non accade una volta che la pagina viene visualizzata nel browser. Per mandare a capo il testo di una pagina web si usano i tag , . Il tag equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag non richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo. Il tag crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e può essere formattato in maniera diversa rispetto al testo precedente. Il tag deve ess er e usato con la rispettiva chiusura . Allineamenti di testo Per impostare gli allineamenti di testo che valgono paragrafo per paragrafo si usa l'attributo ALIGN del tag secondo la sintassi: paragrafo da allineare dove il valore di ALIGN può essere: left per l'allineamento a sinistra, center per l'allineamento al centro, right per l'allineamento a destra, justify per l'allineamento giustificato. L'allineamento a sinistra è quello predefinito, quindi specificare l'attributo ALIGN="left" è superfluo, mentre il valore justify è stato introdotto a partire da Html 4.0 e quindi non tutti i browser sono in grado di interpretarlo correttamente. Formattazione I tag per la formattazione del testo si suddividono in stili fisici e stili logici. Gli stili fisici sono tag definiscono in modo univoco gli attributi grafici dei caratteri. I principali tag fisici sono: ... : testo in grassetto; ... : testo in corsivo; ... : testo sottolineato; ... : testo apice ; ... : testo pedice. <Q> </Q>: citazione breve tra apici; <CITE>.</CITE>: il testo viene visualizzato in corsivo Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 5

6 Usare il tag ... è sconsigliabile perché un testo sottolineato può creare confusione con i collegamenti ipertestuali che solitamente appaiono sottolineati. Scegliere il font del testo Il tipo di carattere (cioè il "font") che il browser visualizza di default è il "Times New Roman". Purtroppo questo carattere (ottimo per la carta stampata) non è adatto a essere visualizzato sul monitor di un computer: è una questione di "grazie" (le grazie sono quegli abbellimenti tipografici delle lettere, che dovrebbero servire per rendere più leggibile il carattere). Dal momento che i caratteri con grazie non ottengono il risultato voluto sul monitor (quello cioè di rendere le lettere maggiormente riconoscibili e di conseguenza il testo più leggibile), ma anzi ottengono l effetto contrario, si preferisce di solito utilizzare dei caratteri senza grazie come il "Verdana", l "Arial" o l "Helvetica". E bene sottolineare da subito che non è possibile far sì che l utente visualizzi un testo in un carattere fantasioso scelto da noi. Allo stato attuale dell arte l utente che naviga in internet può visualizzare solo i caratteri che sono installati nel suo sistema: in Windows si tratta dei caratteri presenti in: Pannello di controllo > Tipi di caratteri. Se ad esempio scarichiamo dal nostro archivio preferito di font il carattere «Hackers» e lo inseriamo nella cartella dei caratteri, saremo poi in grado di visualizzare sul nostro computer il testo in Hackers. Per questo motivo è bene tener conto di due accorgimenti: scegliere caratteri "sicuri", che siano cioè senz altro presenti sul pc dell utente non indicare un solo carattere, ma una serie di caratteri che gradualmente si allontanano dal risultato che vorremmo ottenere, ma non di molto, fino ad indicare la famiglia a cui il nostra carattere appartiene. In questo modo il browser dell utente cercherà di trovare nella propria cartella dei fonts il primo carattere indicato, se non lo trova passerà al secondo, e solo come ultima spiaggia sceglierà si utilizzare il carattere predefinito (il famigerato "Times") Vediamo alcuni esempi di famiglie "sicure" di caratteri: verdana e caratteri simili arial e caratteri simili times e caratteri simili curier e caratteri simili Verdana e caratteri simili Arial e caratteri simili Times e caratteri simili Curier e caratteri simili georgia e caratteri simili Georgia e caratteri simili geneva e caratteri simili Geneva e caratteri simili È vero: l impossibilità di scegliere i caratteri che preferiamo limita terribilmente le nostre possibilità espressive, ma il bello di sviluppare per il web è proprio accettare di creare con delle regole ben definite, e a volte anche molto vincolanti. Per i titoli delle pagine, i menu, e quant altro potremmo poi sempre utilizzare delle immagini con il nostro carattere tipografico preferito (ad esempio delle "gif"). Scegliere il colore del testo Una volta scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, ecco il codice: testo blu oppure: testo blu La scelta del colore può essere effettuata nello stesso momento in cui si sceglie il tipo di carattere (dal momento che "face" e "color" sono entrambi attributi del tag ): testo blu in Verdana Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 6

7 Una volta scelto il colore possiamo sempre decidere di cambiarlo: testo blu in Verdana testo rosso o meglio ancora: testo blu in Verdana testo rosso La seconda codifica è preferibile alla precedente, perché la scelta del tipo di carattere viene effettuata una sola volta, evitando così di scrivere del codice inutile. È importante notare che per evitare la ripetizione i due tag sono annidati l'uno dentro l'altro. Le dimensioni del testo Le dimensioni del testo si attribuisco mediante l'attributo 'size' del tag . Ci sono due modi per dare attribuire le dimensioni al testo tramite il tag : valori interi da 1 a 7 valori relativi alla dimensione di base del tag font (di default "3") Nel caso dei valori interi, ecco la scala di grandezza: Codice Effetto testo di grandezza 1 testo di grandezza 2 testo di grandezza 3 testo di grandezza 4 testo di grandezza 5 testo di grandezza 6 testo di grandezza 7 Nel caso dei valori relativi alla dimensione di base è possibile "spostarsi" nella scala di grandezza utilizzando i segni "+" e "-". Abbiamo detto che la grandezza del font di base di default nel browser è 3. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 7

8 Dunque se utilizziamo un size="+2", vuol dire che la dimensione del font deve essere di 2 misure più grande della dimensione del font di base, quindi avremo un font di grandezza 5. Vediamo l'esempio: Codice Effetto Testo di grandezza +2 rispetto al font di base (3). Cioè font di grandezza 5. Testo di grandezza 5. Come si può vedere le due sintassi sono equivalenti. È importante evitare di cadere nell'errore di pensare che la dimensione relativa faccia riferimento al precedente tag font. La dimensione relativa fa sempre riferimento alla dimensione del font di base: Codice Effetto Testo di grandezza 7 testo di grandezza inferiore di 1 al font di base (che di default è 3), NON al tag precedente Quando state utilizzando il tag sia che utilizziate il size di valori interi, sia che utilizziate i valori relativi al tag di base, in realtà la grandezza del carattere dipende dalle impostazioni del browser dell'utente (come già abbiamo visto per i tag "heading"). Con Internet Explorer ad esempio andando in: Visualizza > Carattere. Se cambiate le dimensioni del carattere, vedrete cambiare le dimensioni dei font. Questo appunto per le grandezze da 1 a 7 sono grandezze anch'esse relative. Questa caratteristica da un lato è positiva (permette di ingrandire testi piccoli), dall'altra può risultare molto fastidiosa per il webmaster. L'unico modo per fissare il carattere è (ancora una volta) quello di utilizzare i fogli di stile, esprimendo le dimensioni in pixel. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 8

9 Titoli, elenchi, righe orizzontali Titoli Mediante l'inserimento di opportuni titoli il testo di una pagina HTML può essere suddivisa in capitoli e sottocapitoli. Per i titoli HTML sono previsti sei livelli gerarchici. Il tag per definire un titolo è <Hn>... </Hn> dove n è un valore che va da 1 a 6. Ciò significa che si possono avere sei livelli di titolazione, da <H1> (livello superiore) a<h6> (livello inferiore). In visualizzazione i titoli appaiono come paragrafi a sé stanti con caratteristiche di formattazione legate al livello di titolazione. L'aspetto dei titoli può essere personalizzato per quanto riguarda l'allineamento e la formattazione. È importante inserire dei titoli nei testi delle pagine web perché questo incrementa notevolmente la leggibilità e perché i motori di ricerca, quando catalogano i siti web, spesso si basano anche sui titoli presenti nella pagina per classificarne gli argomenti. Righe Orizzontali Per tracciare una riga orizzontale, da usare come divisorio, si usa il tag <HR> che significa Horizontal Roules. Questo tag prevede i seguenti attributi: ALIGN= right left o center COLOR=come per gli altri tag NOSHADE la linea non prevede ombreggiatura SIZE= numero indica la dimensione in pixel WIDTH= numero o n% indica la lunghezza della riga in pixel o in misura percentuale rispetto alla pagina Esempio: <HR ALIGN= left COLOR= red SIZE= 2 WIDTH= 100% > Elenchi Puntati, Numerati, Di Definizione Il primo tipo di elenco che vedremo è quello puntato; le voci di questo elenco non hanno un ordine di successione ed ogni voce viene evidenziata da un simbolo. Il tag è <UL> (Unordered List) e funziona con il rispettivo </UL>. Nel mezzo del tag <UL>... </UL> ciascuna voce è identificata dal tag <LI>. Esempio: <UL> <LI> voce a <LI> voce b <LI> voce c </UL> Al tag <UL> si può aggiungere l'attributo TYPE="tipo di simbolo" che permette di scegliere un simbolo personalizzato. I valori previsti sono: disc: punto pieno circle: punto vuoto square: quadrato nero. Esempio: <UL TYPE= square > Un altro tipo di elenco è quello numerato; le voci di questo elenco hanno un preciso ordine di successione ed ogni voce viene evidenziata da un numero oppure opzionalmente, da una lettera. Il tag è <OL> (Ordered List) e funziona con il rispettivo </OL>. Nel mezzo del tag <OL>... </OL> ciascuna voce è identificata dal tag <LI>. Al tag <OL> si può aggiungere l'attributo TYPE="tipo di numerazione" che permette di scegliere numeri o lettere. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 9

10 I valori previsti sono: 1 numeri arabi, I numeri romani maiuscoli, i numeri romani minuscoli, A lettere maiuscole, a lettere minuscole. Si può anche usare l'attributo START="numero" per far iniziare il conteggio da un qualsiasi valore. Elenco di definizione E possibile anche creare degli elenchi di definizione utilizzando i seguenti tag: Il tag e <DL> (Definition List con il rispettivo tag di chiusura </DL> Nel mezzo del tag <DL> ciascuna voce è identificata dal tag <DT> (Definition term) con il rispettivo tag di chiusura </DT>. Nel mezzo del tag >DT> ciascuna definizione della voce è identificata dal tag <DD> (Definition Description) con il tag di chiusura <DD>. Esempio: <DL> <DT>Voce a</dt> <DD>Definizione della voce a</dd> <DT>Voce b</dt> <DD>Definizione della voce a</dd> </DL> Darà come risultato: Voce A Definizione della voce a Voce B Definizione della voce b Immagini Il tag IMG Per inserire un'immagine in una pagina HTML basta inserire il tag: <IMG SRC="nome immagine">; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale percorso. Usando il tag in questo modo l'immagine appare allineata alla base della riga di testo corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni assolute. Adesso vedremo gli attributi del tag <IMG> che ci permettono di personalizzare l'impaginazione dell'immagine. Possiamo definire le dimensioni di visualizzazione di un'immagine specificando gli attributi WIDTH (larghezza in pixel) e HEIGHT (altezza in pixel). Ad esempio <IMG SRC= image.jpg WIDTH= 100 HEIGHT= 50 > Quando si specificano le dimensioni di un'immagine è necessario conoscerne le dimensioni effettive per mantenere inalterato il rapporto larghezza/altezza evitando così di deformare l'immagine. Anche se si vuole visualizzare l'immagine a grandezza naturale è sempre preferibile specificare i valori di WIDTH e HEIGHT perché così il browser ha maggiori informazioni per collocare l'immagine ed il caricamento della pagina risulta molto più rapido. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 10

11 Oltre alle dimensioni di visualizzazione possiamo definire anche l'allineamento dell'immagine rispetto al testo circostante mediante l'attributo ALIGN. Esempio: <IMG SRC= image.jpg ALIGN= bottom > I valori di ALIGN ammessi sono: Bottom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore predefinito); Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il testo si spezza e prosegue sotto l'immagine; Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro; Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro. Nel caso in cui si voglia allontanare l'immagine dal testo si può aumentare lo spazio vuoto che circonda l'immagine attraverso gli attributi VSPACE (spazio verticale, in pixel) e HSPACE (spazio orizzontale, in pixel). Ad esempio scrivendo: <IMG SRC= image.jpg VSPACE= 10 HSPACE= 20 > oltre ad inserire nella pagina web image.jpg si specifica che sopra e sotto l'immagine devono rimanere 10 pixel vuoti, e a destra e sinistra dell'immagine devono rimanere 20 pixel vuoti. Si può anche aggiungere un bordo intorno all'immagine tramite l'attributo BORDER che deve essere espresso in pixel secondo la sintassi: <IMG SRC= image.jpg BORDER= 5 > Attributi fondamentali del tag <IMG> sono: ALT (testo alternativo) e TITLE. Grazie all attributo ALT si può definire un testo descrittivo dell'immagine. L attributo TITLE invece farà visualizzare all'utente cosa succederà in caso di click o, al non vedente, farà ascoltare cosa succederà quando cliccherà. La sintassi corretta è: <IMG SRC= nome immagine ALT= Testo descrittivo dell immagine TITLE= Cosa succede al click? Di cosa si parla qui? > Riassumendo: Con l'alt dovresti fornire una piccola descrizione nel caso manchi l'immagine o, per l'accessibilità, cosa leggerà il software di un non vedente. Col title invece farai visualizzare all'utente cosa succederà in caso di click o, al non vedente, farai ascoltare cosa succederà quando cliccherà. Questa didascalia associata all'immagine appare durante il caricamento della pagina o quando si passa con il mouse sopra l'immagine. I vantaggi principali dell'usare l'attributo ALT sono: i visitatori possono capire prima del caricamento completo il contenuto delle immagini; i browser speciali per non-vendenti sono in grado di interpretare correttamente la pagina; diversi motori di ricerca tengono conto del valore dell'attributo ALT delle immagini di una pagina per catalogarla con precisione. Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag <IMG> all'interno della coppia di tag <A HREF> e </A> secondo la sintassi: <A HREF= index.html ><1MG SRC= index.gif ></A> Associare un collegamento ipertestuale ad un'immagine è molto utile quando si vuole creare ad esempio un menù grafico di navigazione per un sito web. Creando immagini ad hoc come icone o pulsanti il visitatore né intuirà la funzione a colpo d'occhio. Però quando un'immagine è cliccabile, appare generalmente circondata da un bordo di colore blu che risulta anti- estetico. In questo caso basta indicare all'interno del tag <IMG> l'attributo BORDER="0" per fare in modo che il bordo resti invisibile. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 11

12 I collegamenti ipertestuali I collegamenti ipertestuali si creano associando l'indirizzo (percorso/nome file) del nodo di destinazione ad un elemento visualizzato nella pagina corrente che può essere una stringa di testo o un'immagine. Questa associazione è basata sull'utilizzo del tag <A HREF> dove A sta per ancoraggio ed HREF è l'abbreviazione di Hypertext-Reference (riferimento ipertestuale). Per creare un collegamento verso un'altra pagina dello stesso sito la sintassi è: <A HREF= pagina2.html > Vai a pagina 2 </A> Affinché il collegamento funzioni è fondamentale scrivere il nome del file di destinazione correttamente, rispettando maiuscole e minuscole. Nel caso in cui il file di destinazione non si trovi nella stessa directory del file di posizione bisogna specificare anche il percorso completo. Il tag <A HREF> permette di puntare un collegamento anziché ad una pagina web ad un'immagine. La sintassi è: <A HREF= foto.jpg > Vai a foto </A> Anche in questo caso bisogna specificare correttamente il nome dell'immagine e l'eventuale percorso; supponendo che l'immagine si trovi nella cartella images si dovrà scrivere: <A HREF= images/foto.jpg > Vai a foto </A> Se si vuole creare un collegamento ad un file da aprire o da scaricare come ad esempio un filmato o un pacchetto compresso la sintassi è: <A HREF= file.zip > Scarica il file in formato zip </A> dove file.zip è il file che verrà scaricato sul computer di chi naviga. Per creare un collegamento verso un'altro sito web è sufficiente inserire nel tag <A HREF> l'indirizzo completo del sito in questione: <A HREF= Principi di Web Design by GDC </A> Quando una pagina è molto lunga e suddivisa in sezioni distinte si possono creare dei collegamenti all'interno della stessa pagina che permettono al lettore di saltare facilmente da un punto all'altro del testo. Per creare i collegamenti interni bisogna innanzitutto definire le destinazioni (ancore) nei vari punti prescelti mediante il tag <A NAME="nome scelto dal webmaster">. Supponiamo di aver definito due destinazioni all'interno della nostra pagina: <A NAME= sezione1 >Sezione 1 </A> <A NAME= sezione2 >Sezione 2 </A> adesso possiamo creare i collegamenti che ci portano alle due destinazioni secondo la sintassi: <A HREF= #sezione1 > Vai alla sezione 1 </A> <A HREF= #sezione2 > Vai alla sezione 2 </A> Si possono anche combinare collegamenti esterni ed interni, cioè definire un collegamento ipertestuale che punta ad un'ancora specifica all'interno di un'altra pagina web. <A HREF= pagina2.html#sezione1 >Vai alla sezione 1 della pagina 2</A> Naturalmente anche in questo caso bisogna aver definito in precedenza l'ancora di destinazione nella pagina2.html. È consigliabile inserire nelle proprie pagine web un indirizzo di posta elettronica cui i visitatori possano rivolgersi. Allora si può inserire un indirizzo cliccabile, associato cioè alla casella corrispondente, in modo che l'invio del messaggio sia quasi automatizzato. La sintassi è: <A HREF= mailto:info@gdesign.it>scrivimi per informazioni</a> Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 12

13 Sino ad ora abbiamo visto collegamenti associati ad un testo, ma i collegamenti possono essere associati anche ad un'immagine. Quindi è possibile avere un'immagine cliccabile che ci porti ad un'altra pagina web, a un sito, ad una sezione e via dicendo. Per associare un collegamento ad un'immagine si usa il tag <IMG SRC> con l'attributo BORDER="0". Ad esempio: <A HREF= pagina2.html ><IMG SRC= pagina2.gif BORDER= 0 ></A> Se non si specifica l'attributo BORDER="0" l'immagine apparirà contornata da un profilo colorato e ciò è sconsigliabile dal punto di vista estetico. Quando si clicca su un collegamento in una pagina web, viene caricata la nuova destinazione (immagine, pagina o sito) nella stessa finestra del browser. Seguendo i vari collegamenti ipertestuali, il lettore potrebbe non ricordarsi più il punto di destinazione. Per prevenire questo inconveniente si può fare in modo che la destinazione del collegamento venga visualizzata in una nuova finestra del browser che si sovrappone a quella di partenza. Per ottenere questo risultato basta aggiungere al tag <A HREF> di partenza l'attributo TARGET. Ad esempio: <A HREF= pagina2.html TARGET= _blank > Vai a pagina 2 </A> Il valore dell'attributo TARGET (nell'esempio:_blank) è un nome convenzionale e può essere inventato di sana pianta senza alcun vincolo. Il suo effetto è di aprire in ogni caso una finestra a sé stante. Il Linguaggio HTML (Ultima revisione 13/10/2014) Pag. 13