HTML – 3°
Scegliere il font del testo
Trattiamo ora la scelta del colore, delle dimensioni e del tipo di carattere del testo attraverso l’utilizzo del tag “font”. Si tratta di un argomento obsoleto, perché la formattazione del testo in tutti i siti moderni viene attribuita attraverso i fogli di stile.
L’utilizzo del tag <font> inoltre è disapprovato dal W3C, e dunque sta cadendo in disuso. In ogni caso si tratta di un argomento che un buon webmaster non può ignorare: come già detto per studiare i fogli di stile ci sarà tempo, e comunque è un passo che viene dopo la conoscenza dell’HTML.
Il tipo di carattere (cioè il “font”) che il browser visualizza di default è il “Times”.
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” .
Per scegliere il tipo di carattere con cui un font deve essere visualizzato è sufficiente usare la sintassi:
Tuttavia è 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.
Ma quando metteremo il nostro sito nel web gli utenti visualizzeranno un semplicissimo Times. Come nell’esempio sotto indicato:
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 nostro 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:
È 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”).
Una volta scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, ecco il codice:
<font color=”blue”>testo blu</font>
<br/>
ovvero:
<br/>
<font color=”#0000FF”>testo blu</font>
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 <font>):
<font face=”Verdana, Arial, Helvetica, sans-serif” color=”blue”>
testo blu in Verdana
</font>
Una volta scelto il colore possiamo sempre decidere di cambiarlo:
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 attribuiscono mediante l’attributo ‘size’ del tag <font>. Ci sono due modi per dare attribuire le dimensioni al testo tramite il tag <font>:
– 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:
Nel caso dei valori relativi alla dimensione di base è possibile “spostarsi” nella scala di grandezza del &;lt;font&;gt; utilizzando i segni “+” e “–“.
Abbiamo detto che la grandezza del font di base di default nel browser è 3.
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:
Come si può vedere le due sintassi sono equivalenti.
La grandezza del font di base può anche essere cambiata:
Come si può vedere nella pagina esemplificativa.
È 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:
In questo caso, ad esempio, sarebbe sbagliato aspettarsi una dimensione 6 dalla seconda istanza di <font>, perché la dimensione relativa fa sempre riferimento al <basefont>:
Anche se non è corretto farlo, Internet Explorer consente di utilizzare il tag <basefont> per impostare in una sola volta il tipo di carattere del testo e il suo colore, come si può vedere nell’esempio.
Tuttavia questo tipo di trucco non funziona correttamente né con Mozilla (e quindi neanche con Netscape 6 o superiore, dal momento che eredita il motore di rendering di Mozilla), né con Opera.
NOTA BENE
Quando state utilizzando il tag <font> – sia che utilizziate il size i valori interi, sia che utilizziate le 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.
Elenchi puntati e numerati
Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le “liste”, che sono sostanzialmente di tre tipi:
– Elenchi ordinati
– Elenchi non ordinati
– Elenchi di definizioni
Tutti e tre i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell’elenco. La sintassi ha quindi questa forma:
come si può vedere, il tag che individua l’elemento della lista non ha bisogno di chiusura (la sua chiusura, in questo caso, è opzionale). Le liste di definizioni hanno una struttura leggermente diversa che vedremo a breve.
Gli elenchi ordinati
Gli elenchi ordinati sono contraddistinti dall’enumerazione degli elementi che compongono la lista. Avremo quindi una serie progressiva ordinata e individuata da lettere o numeri (se utilizzate un programma di videoscrittura, siete abituati a chiamarli elenchi numerati).
Il tag da utilizzare per aprire un elenco ordinato è <ol> (“ordered list”) e gli elementi sono individuati dal tag <li> (“list item”):
Il tag che individua l’elenco lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda (come avviene per il <p>); fa eccezione però l’inclusione di un nuovo elenco all’interno di un elenco preesistente: in questo caso non viene lasciato spazio, né prima, né dopo.
Gli elementi dell’elenco sono sempre rientrati di uno spazio verso destra: tutto questo serve a individuare in modo inequivocabile l’elenco.
Lo stile di enumerazione visualizzata di default dal browser è quello numerico, ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo type. Ad esempio:
Gli stili consentiti sono:
Gli elenchi non ordinati
Gli elenchi non ordinati sono individuati dal tag <ul> (“unordered list”), e gli elementi dell’elenco sono contraddistinti anch’essi dal tag <li> (in buona sostanza si tratta di quello che i programmi di videoscrittura chiamano elenchi puntati):
il tipo di segno grafico utilizzato per individuare gli elementi dell’elenco di default dipende dal browser, ma di solito è un “pallino pieno”. È possibile comunque scegliere un altro tipo di segno:
Da notare inoltre che il tipo di segno grafico, varia in automatico al variare dell’annidamento della lista. Ad esempio:
Liste di definizione
Gli liste di definizione sono individuati dal tag <dl>. Gli elementi dell’elenco (a differenza delle liste ordinate, e delle liste non ordinate) questa volta sono formati da due parti:
vediamo un esempio:
Approfondimenti
Ovviamente la scelta del tipo di elenco attraverso l’attributo type è deprecato dal W3C, perché si tratta di una caratteristica che riguarda la formattazione, e dunque andrebbe effettuata utilizzando i CSS. Con i fogli di stile c’è anche la possibilità di scegliere un’immagine (ad esempio una GIF) come segno distintivo per l’elenco puntato.
I link e l’ipertestualità
Una delle caratteristiche che ha fatto la fortuna del web è l’essere costituito non da testi ma da ipertesti (un’altra delle caratteristiche che hanno fatto grande il Web è senz’altro la possibilità di interagire, ma questo è un altro discorso).
I link sono “il ponte” che consente di passare da un testo all’altro. In quanto tali, i link sono formati da due componenti:
Di solito per spiegare che cosa sono i link si utilizza la metafora dell’ancora con “la testa” all’interno del documento stesso, e la “coda” in un altro documento (o all’interno di un altro punto del documento stesso).
Link che puntano ad altri documenti
Ecco la sintassi per creare un link con riferimento a un sito web:
Le risorse per webmaster sono su <a href= “https://www.alt.it/” >ALT . it < /a>.
Che dà come risultato:
‘Le risorse per webmaster sono su ALT.it‘.
Come si può intuire la testa della nostra àncora è il testo “ALT.IT“, mentre la coda, cioè la destinazione (specificata dall’attributo href) è il sito web verso cui il link punta, cioè https://www.alt.it.
È indifferente che la destinazione dell’ancora sia una pagina HTML di un sito, un’immagine, un file pdf, un file zip, o un file exe: il meccanismo del link funziona allo stesso modo indipendentemente dal tipo di risorsa; poi il browser si comporterà in modo differente a seconda della risorsa. Ad esempio:
Nota: per motivi di sicurezza non è possibile eseguire un file .exe direttamente dal web; l’utente dovrà sempre prima scaricarlo sul proprio PC.
È anche possibie specificare un indirizzo email come link. In questo caso si aprirà direttamente il client di posta dell’utente con l’indirizzo email pre-impostato. La sintassi è la seguente:
<a href= “mailto : tuaMail @nomeTuoSito.it” >
Invia una email
</a >
che dà come risultato: Invia una e-mail
I percorsi assoluti e relativi
Percorsi assoluti
Fino a quando ci troviamo nella condizione di creare un sito web di dimensioni ridotte (poche pagine) non avremo problemi di complessità, e possiamo anche ipotizzare di lasciare tutti i nostri file in una medesima cartella. È evidente però che – man mano che il nostro sito web cresce – avremo bisogno di un maggior ordine.
Si presenterà allora l’esigenza di inserire le immagini del sito in una cartelle diverse (in modo da averle tutte nella medesima locazione), e magari sarà opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti dello stesso tipo all’interno di un contesto omogeneo.
I siti web sono dunque organizzati in strutture ordinate: non a caso si parla di albero di un sito, per indicare la visualizzazione della struttura alla base del sito.
Poiché l’organizzazione di un sito in directory e sottodirectory è una cosa normalissima, dobbiamo imparare a muoverci tra i vari file che costituiscono il sito stesso, in modo da essere in grado di creare collegamenti verso i documenti più reconditi, destreggiandoci tra le strutture più ramificate.
Per farlo esistono due tecniche:
– indicare un percorso assoluto
– indicare un percorso relativo
Nel caso in cui il documento a cui vogliamo puntare si trovi in una particolare directory del sito di destinazione, con i percorsi assoluti non abbiamo che da indicare il percorso per esteso.
Se esaminiamo:
Leggi le risorse sui <a href=”https://www.almt.it/css/index.almt”>fogli di stile</a>
Possiamo vedere chiaramente che il link indica un percorso assoluto e fa riferimento ad una particolare directory. Nella fattispecie:
Insomma, per creare un collegamento assoluto è sufficiente fare riferimento all’url che normalmente vedete scritto nella barra degli indirizzi. I percorsi assoluti si usano per lo più, quando si ha la necessità di fare riferimento a risorse situate nei siti di terze persone.
Percorsi relativi
Spesso vi troverete tuttavia a fare riferimento a documenti situati nel vostro stesso sito, e – se state sviluppando il sito sul vostro computer di casa (cioè “in locale”) – magari non avete ancora un indirizzo web, e non sapete di conseguenza come impostare i percorsi. È utile allora capire come funzionano i percorsi relativi.
I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento.
Per linkare due pagine che si trovano all’interno della stessa directory è sufficiente scrivere:
<a href=”paginaDaLinkare.html”>collegamento alla pagina da linkare nella stessa directory della pagina presente</a>
Poniamo ora di trovarci in una situazione di questo genere:
Dalla pagina “index.html” vogliamo cioè far riferimento al file “interna.html”, che si trova all’interno della directory “interna”, che a sua volta si trova all’interno della directory “prima”.
La sintassi è la seguente:
<a href=”prima/interna/interna.html”>Visita la pagina interna</a>
Vediamo adesso l’esempio opposto: dalla pagina interna vogliamo far riferimento a una pagina (“index.html”) che si trova più in alto di due livelli:
La sintassi è la seguente:
<a href=”../../index.html”>Visita la pagina interna</a>
Come si vede, con i percorsi relativi valgono le seguenti regole generali:
Grazie a questi accorgimenti potete agevolmente navigare all’interno delle directory del vostro sito: se ce ne fosse bisogno potrete per esempio tornare su di un livello rispetto alla posizione del file, scegliere un’altra cartella, e poi scegliere un altro file:
../altraCartella/nuovoFile.html
Approfondimenti
A volte potrete incontrare la notazione:
Leggi le risorse sui <a href=”/css/index.html”>fogli di stile</a>
Se il vostro sito è all’interno di un server Unix (ma la sintassi funziona anche in sistemi Windows, basta che non siano in locale), questa notazione non deve stupirvi: il carattere ‘/’ indica la directory principale del sito, altrimenti detta “root”. Dunque <a href=”/css/index.html”> è un altro modo di esprimere i percorsi assoluti all’interno del proprio sito.
Un’altra cosa importante da sapere è che quando metterete il vostro sito all’interno dello spazio web, l’indicazione della index all’interno di una directory è facoltativa. Al posto di questo:
https://www.html/css/index.html
è sufficiente indicare la directory:
https://www.html/css/
Verificate solo con il vostro gestore dello spazio web (cioè “hosting”), se le pagine index della directory devono avere forma index.html, index.htm, index.asp, index.php, home.asp, o altro.
Consigli per i nomi dei file
Quando mettere nel web il vostro sito internet, vi accorgerete che esistono due famiglie di sistemi operativi: Windows e Unix. Questi due sistemi operativi utilizzano differenti modi per gestire i file, dunque alcuni accorgimenti sono necessari:
– è consigliabile non lasciare spazi vuoti nei nomi dei file (gli spazi vuoti non sempre vengono interpretati correttamente), meglio ovviare a questa necessità con un “trattino basso” (cioè “_”). Ad esempio: mio_file.html
– maiuscole e minuscole possono fare la differenza (in ambiente Unix spesso la fanno), quindi controllate il modo in cui avete scritto i file
Inoltre quando create un collegamento state attenti a non avere una notazione simile a questa:
<a href=”file:///C|percorsonomeFile.html”>testo</A>
significa che state facendo un riferimento (assoluto) al vostro stesso computer: chiaro che quando metterete i file nel vostro spazio web, le cose non funzioneranno più.
I link interni o ancore
È possibile anche creare un indice interno al documento, utilizzando le àncore. Ciascuna àncora può avere infatti un nome:
<a name=”primo”>Stiamo per esaminare la struttura…. Eccetera…</a>
Da notare che in mancanza dell’attributo che indica il collegamento (href) le àncore non vengono viste come link, ma la loro formattazione è indistinguibile dal “normale” testo.
In un ipotetico indice è allora possibile far riferimento all’àncora presente all’interno del documento attraverso un link che punti ad essa:
<a href=”#primo”>vai al primo paragrafo</a>
il cancelletto indica che il collegamento deve cercare un àncora chiamata “primo” all’interno della pagina stessa.
Se non si specifica il nome dell’àncora a cui si vuol puntare, viene comunque creato un link che punta ad inizio pagina (viene cercata un’àncora il cui nome non è specificato). Questo infatti è un ottimo escamotage per creare link “vuoti” (in alcuni casi vi occorreranno). Ad esempio:
<a href=”#”>link vuoto</a>
Per creare un indice interno alla pagina si procede dunque in due fasi distinte:
– creazione dell’ancora a cui puntare (<a name=”mioNome”>)
– creazione del collegamento all’ancora appena creata e riferimento
– attraverso il cancelletto (<a href=”#mioNome”>)
È bene non confondere le due fasi.
Gli attributi dei link
target
È anche possibile specificare in quale finestra la pagina linkata deve essere aperta: di default infatti la pagina viene aperta all’interno del documento stesso, ma è possibile specificare che la pagina sia aperta in una nuova finestra:
<a target=”_blank” href=”https://html”>visita HTML</a>
title
L’attributo title è molto importante, e serve per specificare un testo esplicativo per l’elemento a cui l’attributo è riferito (il title si può infatti utilizzare anche per elementi differenti dalle ancore). Questa spiegazione addizionale favorisce l’accessibilità del sito anche ai disabili, alle persone per esempio che hanno disturbi alla vista. Se lasciate il cursore del mouse per qualche secondo su un collegamento dotato di title, vedrete comparire una specie di etichetta con il testo specificato nel title:
L’attributo title è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto.
hreflang
Con “hreflang” si indica la lingua del documento: si tratta di un attributo che migliora l’accessibilità del sito, oltre ad essere potenzialmente utile per i motori di ricerca (l’attributo può essere utilizzato ad esempio per specificare la presenza di una sezione del proprio sito in lingua inglese):
Nel sito del <a href=”https://www.w3c.org/” hreflang=”eng” target=”_blank”>World Wide Web Consortium</a> puoi trovare le specifiche dell’HTML in lingua inglese
cioè:
Nel sito del World Wide Web Consortium puoi trovare le specifiche dell’HTML in lingua inglese
accesskey
Le accesskey sono delle scorciatoie “da tastiera” che potete utilizzare nel vostro sito. Si tratta di scegliere delle lettere della tastiera che – quando vengano digitate dall’utente – permettono di andare direttamente a determinate pagine. Per esempio potreste specificare che:
<a href=”https://www.html/” accesskey=”h” target=”_blank” >Torna all’home page di HTML</a>
In questa pagina digitando “ALT + h + invio” con Internet Explorer, oppure direttamente “h + invio” con Mozilla si accede direttamente all’home page di HTML. Si tratta di un’altra tecnica per migliorare l’accessibilità, ma un uso improprio e indiscriminato di questa tecnica può risultare davvero deleterio per la navigazione. Diciamo che le accesskey dovrebbero essere riservate per la navigazione dei menu che portano alle parti principali del sito.
Colorare i link
Abbiamo già visto come colorare i link in tutta la pagina. Possiamo però aver bisogno di colorare alcuni link della pagina in modo diverso. Per farlo è sufficiente annidare il tag <font> all’interno del link:
<a href=”https://www.html/” target=”_blank” ><font color=”red” size=”2″ face=”Verdana, Arial, Helvetica, sans-serif”>Torna all’home page di HTML</font></a>
ovviamente il modo giusto per colorare i link non è quello di utilizzare il tag font, ma quello di utilizzare i fogli di stile.
Il tag <base>
I percorsi relativi fanno di norma riferimento alla directory in cui si trova il file HTML che stiamo scrivendo. Se tuttavia vogliamo far riferimento a un differente percorso per tutti i percorsi relativi, possiamo farlo specificandolo grazie al tag <base>, che va incluso nella head del documento. Ad esempio con:
<base href=”https://www.mioSitoWeb.com/miaCartella”>
specifico che d’ora in poi tutti i percorsi relativi faranno riferimento al percorso indicato. E poi nel documento potrò scrivere:
<a href=”mioFile.html”>collegamento al mio file</a>
sicuro che farà riferimento a:
https://www.mioSitoWeb.com/miaCartella/mioFile.html
Si tratta di una caratteristica particolarmente utile quando bisogna mandare ad esempio delle mailing list in formato HTML: possiamo infatti utilizzare i percorsi relativi per sviluppare la pagina della mailing list in locale, e mantenerli inalterati grazie all’utilizzo di questo tag. Grazie ad esso siamo infatti sicuri che anche l’utente che riceverà la mail potrà visualizzare le immagini e i link con un percorso corretto.
Inserire le immagini
Finora abbiamo visto come inserire e formattare il testo all’interno delle nostre pagine Web. Naturalmente possiamo inserire anche delle immagini: diagrammi e grafici, fotografie, e in genere immagini create con un programma di elaborazione grafica (come GIMP o Photoshop).
Il codice
La sintassi per inserire una immagine è:
<img src=”https://miosito.it/miaImmagine.gif” alt=”testo” />
Esaminiamo il significato delle keyword principali:
Il tag <img /> è un tag senza un contenuto, per questo non ha un elemento </img> di chiusura: lo chiudiamo utilizzando lo slash (“/”) prima della parentesi angolare.
I formati di immagine per il Web
I formati ammessi nel Web sono sostanzialmente tre:
Inutile provare dunque a inserire un file “.psd” (formato nativo di Photoshop) all’interno della vostra pagina HTML: con grande probabilità il browser non caricherà il file (dovete infatti prima convertire il file in uno dei formati sopra-indicati).
È importante ricordare che il codice HTML fornisce delle indicazioni al browser su come visualizzare il testo e le immagini – ed eventualmente i video e i suoni – all’interno della pagina: il testo (come abbiamo visto) è scritto direttamente nel file HTML, le immagini invece sono caricate insieme alla pagina.
Attenzione dunque a non inserire immagini troppo pesanti (ricordatevi di ottimizzare sempre i file); bisogna evitare inoltre di sovraccaricare la pagina con troppe immagini. Un peso eccessivo rende le pagine lente da caricare e questo può diventare un problema sia per gli utenti, sia per i motori di ricerca. Per ottenere un sito web dalla grafica accattivante, spesso è sufficiente giocare con i colori dello sfondo e delle scritte.
Esempi, percorsi relativi e assoluti
Ecco ad esempio come inserire il logo di HTML in una pagina dallo sfondo blu (si presuppone che il logo si trovi nella stessa cartella del file HTML):
Resta valido il discorso sui percorsi relativi ed assoluti visto in precedenza. Avremo ad esempio:
<img src=”../img/logo.gif” />
<img src=”https://www.html.it/img/logo.gif ” />
Dal momento che il browser normalmente non sa quali siano le dimensioni dell’immagine, finché questa non sia caricata completamente, è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine: in questo modo si evita di vedere la pagina costruirsi man mano che viene caricata, poiché stiamo dando al browser un’idea dell’ingombro. Ad esempio:
<img src=”logo.gif” width=”224″ height=”69″ />
L’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto:
L’attributo alt è di estrema utilità per rendere il sito accessibile a tutti gli utenti: i disabili che non sono in grado di vedere nitidamente le immagini sullo schermo potrebbero avere delle difficoltà, nel caso in cui l’attributo alt non sia specificato.
Gli ipo-vedenti e i non-vedenti sono infatti in grado di comprendere il contenuto delle immagini grazie a dei software appositi (gli screen reader) che “leggono” lo schermo tramite un programma di sintesi vocale. Non specificare il testo alternativo significa rendere impossibile la navigazione.
Nel caso in cui la spiegazione dell’immagine sia particolarmente lunga, è possibile espandere la descrizione sintetica – fornita tramite l’attributo “alt” – grazie ad un altro attributo: si tratta di longdesc (long description), che permette di specificare un file con una spiegazione estesa dell’immagine. Ecco la sintassi:
<img src=”logo.gif” alt=”HTML” longdesc=”descrizione.html” width=”224″ height=”69″ />
Nell’esempio allegato è possibile visualizzare il codice di una pagina con la descrizione estesa dell’immagine. Nel caso in cui si utilizzi questo attributo è anche buona norma utilizzare un link esplicito alla pagina della descrizione.
longdesc dovrebbe essere utilizzato soprattutto nel caso in cui si usino delle immagini mappate (argomento che analizzeremo in seguito), in modo da fornirne una spiegazione esauriente in ogni contesto.
In realtà l’attributo alt non serve, come molti credono, a visualizzare un etichetta esplicativa dell’immagine nel caso in cui il cursore del mouse si soffermi sopra essa: questo semmai è un effetto collaterale che si verifica con Internet Explorer. L’attributo corretto per far visualizzare un testo che commenti l’immagine è infatti title:
Immagini con i link
Si noti che i link per default lasciano sempre un bordo di un pixel attorno all’immagine (il colore sarà quello espresso nel body dall’attributo link, oppure quello default – quindi blu – se non specificato altrimenti):
Disporre le immagini in un contesto
Abbiamo tuttavia la possibilità di allineare l’mmagine e il testo come preferiamo, utilizzando l’attributo align. Vediamo di seguito come vengono visualizzati align=”left” e align=”right”:
Esempio di immagine allineata a sinistra
<p><img src=”logo.gif” width=”224″height=”69″border=”1″align=”left”>
HTML </p>
Esempio con immagine allineata a destra
<p> <img src=”logo.gif” width=”224″ height=”69″ border=”1″ align=”right”>
HTML</p>
Altri valori possibili sono:
Da notare che, mentre align=”left” e align=”right”, sono utili per spostare l’immagine a sinistra o a destra, gli altri valori servono piuttosto per disporre le posizioni verticali di testo e immagini.
Infine con hspace (horizontal space, cioè “spazio orizzontale”) e vspace (vertical space, cioè “spazio veritcale”) possiamo impostare lo spazio (in pixel) che deve essere lasciata tra l’immagine e cioè che la circonda.
Nel caso di hspace impostiamo uno spazio orizzontale da ambo i lati, come in questo caso:
<img src=”logo.gif” width=”224″ height=”69″ hspace=”20″>
Un attributo importante – di cui non vedrete nessun effetto “pratico” di formattazione, ma che vi servirà ad esempio per creare un effetto di “scambio immagine” grazie a JavaScript – è quello che permette di specificare il nome dell’immagine:
<img src=”miaImmagine.gif” name=”logo”>
Approfondimenti
Ovviamente sarebbe meglio impostare lo spessore e il colore dei bordi, gli spazi e la disposizione del testo attorno alle immagini attraverso i fogli di stile.
Le mappe di immagine
A volte è necessario far sì che solo una determinata parte di un’immagine sia collegata a un link. È il tipico caso delle Regioni d’Italia: abbiamo una cartina e abbiamo la necessità che alla sagoma di ciascuna regione corrisponda un differente link.
In questo caso possiamo utilizzare le mappe. Ne esistono di due tipi:
le mappe lato client
le mappe lato server (non più utilizzate)
Le mappe lato-client
Questo tipo di mappa è contraddistinto dall’attributo usemap del tag img:
<img src=”miaImmagine.gif” usemap=”nomeMappa”>
come valore dell’attributo usemap bisogna specificare il nome della mappa a cui l’immagine fa riferimento.
A questo punto non ci resta che creare la mappa:
<map name=”nomeMappa”>
…
</map>
All’interno del tag <map> dobbiamo poi specificare le aree sensibili a cui corrisponderanno i nostri link, con relativi forme, coordinate e collegamenti. Per farlo si utilizza il tag <area>, per ogni zona sensibile che vogliamoc reare.
Vediamo un esempio: abbiamo preso la cartina dell’Italia e – a scopo puramente didattico – abbiamo deciso di mappare la Regione Valle D’Aosta con una forma rettangolare, la Sardegna con un cerchio, e la Sicilia con un poligono (per rendervene conto passate il mouse su una di queste regioni).
<img alt=”Esempio di immagine con mappe” src=”italia.gif” width=”220″ height=”235″ border=”1″ usemap=”#regioni”>
<map name=”regioni” id=”regioni”>
<area shape=”rect” coords=”14, 24, 35, 37″ href=”https://www.regione.vda.it/” target=”_blank” alt=”Valle d’Aosta”>
<area shape=”circle” coords=”45, 156, 29″ href=”https://www.regione.sardegna.it/” target=”_blank” alt=”Sardegna”>
<area shape=”poly” coords=”105, 199, 115, 197, 121, 200, 131, 201, 139, 198, 150, 197, 156, 195, 151, 201, 145, 209, 148, 212, 150, 219, 152, 225, 147, 227, 144, 231, 128, 221, 119, 219, 113, 212, 108, 212, 102, 210, 98, 205″ href=”https://www.regione.sicilia.it/” target=”_blank” alt=”Sicilia”>
</map>
le coordinate fanno riferimento all’immagine stessa, e il vertice in alto a sinistra è l’ipotetico punto con coordinate 0,0. Le coordinate dei punti che descrivono le varie forme si riferiscono alla distanza in pixel da quel punto (si tratterà di volta in volta della x o della y).
Come si può vedere per definire un’area è necessario specificare una forma, che può essere di tre tipi:
In ciascun tag <area> è inoltre possibile specificare l’attributo alt per il testo alternativo (ed eventualmente il longdesc).
Per il resto, il tag <area> si comporta esattamente come il tag <a>, con la possibilità di specificare ad esempio il target in cui aprire i link.
In realtà non è difficile disegnare le mappe, perché ci sono già software che lo fanno al posto nostro. Se utilizzate un editor visuale ad (esempio Dreamweaver) potete trovare degli strumenti integrati nell’ambiente di sviluppo che vi consentono di disegnare le mappe in tutta tranquillità.
In alternativa si possono usare programmi appositi, come CoffeCup Image Mapper, CuteMap o MapEdit
Per quel che riguarda il luogo in cui posizionare la mappa così creata, dipende dalle vostre preferenze: è una buona norma però situare la mappa in prossimità dell’immagine, in modo da poterla reperire facilmente.
Approfondimenti
Con Internet Explorer le mappe a volte lasciano un fastidioso tratteggio sull’area che è stata appena cliccata. Per eliminarlo è sufficiente utilizzare la seguente sintassi:
onFocus=’this.blur()’
da applicare al tag <AREA> in questo modo:
<area shape=”circle” coords=”45, 156, 29″ href=”https://www.regione.sardegna.it/” target=”_blank” alt=”Sardegna” onFocus=?this.blur()?>
Le mappe di immagine lato server
In questo caso la mappatura dell’immagine non è visibile all’interno della pagina HTML, ma è presente all’interno di un programma sul server, ad esempio un cgi.
La presenza di una mappa sull’immagine è specificata dall’attributo ismap del tag<img> e l’indicazione della posizione in cui si trova la mappa sul server viene data attraverso un link. Ad esempio:
<a href=”cgi-bin/images/map2″>
<img src=”immagine.gif” ismap>
</a>
(notare che l’attributo ismap non ha alcun valore).
Il link fa riferimento alla locazione della mappa sul server, e quando l’utente cliccherà sul collegamento, sulla barra degli indirizzi comparirà qualcosa di questo genere:
https://www.html/cgi-bin/menu.map?25,55
dal momento che il programma sul server avrà tradotto la mappa in coordinate da passare al mouse.
C’è da dire che le mappe lato server non vengono più usate, perché estremamente scomode (è poco pratico mantenere in differenti file le indicazioni sull’immagine e quelle sulla mappa), dunque non le vedremo nel dettaglio. Venivano utilizzate soprattutto agli albori del web, quando non tutti i browser erano in grado di interpretare le mappe lato-client: con le mappe lato-server si aveva la certezza, allora, che qualsiasi utente potesse leggere correttamente l’immagine (dal momento che il lavoro di mappatura veniva fatto dal server, appunto, e non dal computer dell’utente).
Tabella: struttura di base
Le tabelle sono tra le componenti più importanti dell’HTML: nate agli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i layout grafici, per tornare, nell’epoca dei CSS, ad essere elementi utilissimi per rappresentare informazioni.
Il loro ampio utilizzo all’interno dei documenti ha fatto sì che – nel passaggio dall’HTML 3.2 all’HTML 4 – le specifiche delle tabelle venissero estese con una serie di notazioni destinate a “far ordine” all’interno di un codice che rischiava di diventare troppo vasto.
Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono:
In questi nostri primi esempi presupponiamo che il numero delle celle all’interno di ciascuna riga sia costante: ogni riga avrà cioè lo stesso numero di celle. Ci sono dei metodi per variare il numero delle celle all’interno di una riga, ma li vedremo in seguito.
Stiamo per esaminare alcuni attributi classici dell’HTML, ma è utile ricordare che per una buona formattazione delle tabelle oggi è conveniente utilizzare i CSS.
Gli attributi delle tabelle
L’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle. Ad esempio:
| <table border=”2″> |
Lo useremo in questi esempi, altrimenti non percepiremmo la struttura di quanto stiamo costruendo. Ecco un primo esempio di tabella:
Che viene visualizzato così:
Possiamo specificare la larghezza e l’altezza delle tabelle tramite gli attributi width e height che possono essere riferiti a tutti e tre i tag (<table>, <tr>, <td>). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo “%”): in questo caso la tabella si adatta secondo lo spazio a disposizione.
Oppure:
Di solito la larghezza e l’altezza globali della tabella sono espresse nel tag <table>, mentre la larghezza delle varie celle viene espressa nei <td> della prima riga. L’altezza in percentuale non sempre è visualizzata correttamente da tutti i browser.
Come detto inizialmente le tabelle vanno immaginate come delle griglie, tutto sommato abbastanza rigide: l’eventuale larghezza specificata nelle celle della prima riga avrà effetto dunque anche sulle celle delle righe sottostanti.
Viceversa non è possibile variare arbitrariamente le dimensioni delle celle: le misure specificate nelle righe sottostanti non avranno infatti effetto, come si può vedere nell’esempio allegato, che non è corretto.
Le dimensioni espresse non devono tuttavia essere in contraddizione ma mano che si procede verso l’interno della tabella: in un caso simile infatti “vincerebbe” il valore specificato nel tag genitore, come si può vedere nella pagina di esempio.
Inoltre (come si evince dagli esempi) la visualizzazione dei layout con indicazioni non corrette è a discrezione del browser, quindi si rischia di ottenere risultati diversi da quelli voluti.
Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody>
Come dicevamo, la struttura delle tabelle ha letteralmente invaso le pagine HTML, che si sono riempite di <tr> e di <td>.
Per portare un po’ di ordine in questo caos nelle specifiche sono stati introdotti dei tag (opzionali) che consentono di capire facilmente quali siano le diverse parti della tabella.
Per individuare facilmente i gruppi di righe sono stati introdotti i seguenti tag:
<thead>, <tfoot>, <tbody> sono tag che consentono di individuare gruppi di righe (“row group”).
Da notare che – contrariamente a quello che si potrebbe pensare – il tag <tfoot> che chiude la tabella, è anteposto rispetto al <tbody>. L’idea di base è che il browser nell’eseguire il rendering del codice tenga conto della parte iniziale e della parte finale della tabella, e il corpo vero e proprio sia sviluppato nella sua interezza tra le due estremità.
Un’altra particolarità è che le celle all’interno del tag <thead> possono essere indicate con <th> (“table header”), al posto del consueto <td> (“table data”), in questo caso il contenuto delle celle è automaticamente formattato in grassetto e centrato.
Ecco comunque uno schema che riassume la struttura delle tabelle secondo l’HTML 4:
Raggruppare gli stili delle colonne
Così come è possibile suddividere le righe di una tabella in gruppi ordinati, allo stesso modo è possibile raggruppare gli stili delle colonne. Il tag da usare è il <colgroup> e serve per fornire indicazioni su come le colonne debbano essere visualizzate.
Prima di vedere nel dettaglio questo tag anticipiamo il significato di due attributi che vedremo tornare in seguito quando ci occuperemo più approfonditamente della formattazione delle tabelle e che ora ci servono per meglio comprendere l’uso di <colgroup>.
colgroup
Il tag <colgroup> – la cui chiusura è facoltativa – andrebbe posto subito dopo il tag<caption> e prima di <thead>, ma come vedremo è ben tollerato anche posizionato prima del caption. Permette di impostare un layout unico per le colonne senza avere la necessità di specificare allineamento del testo, o il colore di sfondo per ogni singola cella.
Con l’attributo span (da non confondere con il tag <span>) possiamo impostare il numero di colonne che fanno parte del gruppo.
Per avere un layout di questo genere:
Basterà quindi scrivere:
come illustrato dettagliatamente in questa pagina.
<colgroup> ha l’indubbio vantaggio di poter attribuire in una sola volta la formattazione a un numero elevato di colonne. Ad esempio:
| <colgroup span=”40″ align=”right”> |
col
Se si preferisce attribuire più esplicitamente lo stile ad una colonna si può usare il tag <col> (che non necessita chiusura) all’interno di <colgroup>. In questo caso l’attributo span va riferito a <col> e non a <colgroup>.
Ad esempio:
come mostrato in dettaglio nella pagina di esempio.
Approfondimenti
I tag <colgroup> e <col> in teoria supportano anche la possibilità di creare delle celle larghe proporzionalmente. Ad esempio:
| <colgroup width=”1*”><colgroup width=”2*”> |
questa sintassi dovrebbe dividere lo spazio a disposizione in tre parti e assegnare una parte alla prima cella e due parti alla seconda cella. In realtà questa sintassi non è ancora supportata da nessun browser.
You made a nice description of HTML, I have carefully read and I must admit that you are very good in exposing these. Also in the future I will continue to read you again .Shelly
I think that what you published made a lot of sense. But, think on this, what if you were to write a awesome post title?
I ain’t suggesting your content is not good, but what if you added something to possibly grab folk’s attention? I mean HTML – 3° «
is kinda plain. You might
peek at Yahoo’s front page and note how they write news headlines to grab
viewers to click. You might try adding a video or a picture or two to get readers interested about what you’ve written. Just my opinion, it would make your website a little livelier.
I’m curious to find out what blog system you’re using?
I’m having some small security issues with my latest site and
I’d like to find something more secure. Do you have any suggestions?
Howdy! I cοuld havе sworn I’ve been to your blog before but after going through some of the articles I realized it’s
new to me. Nonetheless, I’m Ԁefiniteⅼy happy І found it and I’ll Ьe book-marking it
and checking back often!
I just want to mention I’m very new to blogs and really loved this website. Most likely I’m going to bookmark your blog post . You actually come with fantastic articles and reviews. Thanks for revealing your blog site.
I think other site proprietors should take this website as an model, very clean and great user genial style and design, let alone the content. You’re an expert in this topic!
_____
TY!
Thanks very interesting blog!
I really like reading a post that can make people think.
Also, thank you for allowing me to comment!
—————-
Mi piace molto leggere un post che può far riflettere la gente.
Inoltre, grazie per avermi permesso di commentare!
Post molto bello. Mi sono appena imbattuto nel tuo blog e volevo dire che mi è davvero piaciuto sfogliare i tuoi post sul blog. In ogni caso mi iscriverò al tuo feed e spero che tu scriva di nuovo presto!
Grazie per i meravigliosi post! Mi è davvero piaciuta la lettura.
Wonderful blog! Great colors.
Spectacular site