Riempiamo le pagine del sito con immagini e link, e rendiamo la lettura piacevole facendo attenzione alla bellezza e all’aspetto estetico della nostra creatura. Perchè il sito è come una persona, più bella è più viene ammirata e frequentata.
Livello: base
L’era dell’immagine
Un sito pieno solo di testi, per quanto interattivi, stancherebbe presto l’utente. Piuttosto, lo sfortunato lettore preferirebbe tornare ai vecchi libri che, pur polverosi, almeno non stancano gli occhi (e non si bloccano all’apertura del terzo programma). No, qualunque sito web ha bisogno di immagini, anche se bisogna prestare attenzione a non appesantire troppo il prodotto finale, viste le linee telefoniche usate oggi in Italia, mediamente lente. Dunque, evitiamo le foto di diversi megabyte che, anche se bellissime, rallentano l’apertura della pagina, e creano quella stanchezza che porta a cambiare sito ( e a non tornare più). Magari sembrano cose scontate e ovvie, ma vale la pena ricordarle: quante volte restiamo in attesa dell’apertura di un sito per tempi infiniti (la cosa vale anche – e soprattutto – per le famigerate animazioni in Flash! Meglio un sito che si apre subito piuttosto che un carrozzone pieno di luci e animazioni belle ma inutili)?
Il nostro obiettivo è creare un sito semplice e massimamente accessibile, e la nostra bussola deve tendere a questo. E’ bene avere sempre a fianco un programma di fotoritocco (di nuovo, Photoshop va benissimo), per intervenire sulle immagini ed eventualmente sottoporle ad una cura dimagrante. Ma, infine, inseriamole queste immagini: il nostro tag è <img src=”immagine.jpg”>, con la sintassi di ricerca img src (search) e la stessa logica della ricerca delle pagine di un link, se è presente all’interno della nostra cartella la inseriamo fra le virgolette con il solo nome, se si trova in un altro sito specifichiamo il percorso completo.
<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p>Il mio sito</p>
<img src=”tastiera.jpg” width=300 height=200>
</body>
</html>
Avete notato che a fianco al nome dell’immagine si possono inserire due parametri importantissimi, la sua larghezza (width) e la sua altezza (height), utili per adattarla adeguatamente agli altri elementi presenti nella pagina. Come regola generale, naturalmente, non bisogna mai eccedere con le dimensioni delle immagini, sia per i soliti motivi di “pesantezza” nel caricamento, sia per esigenze grafiche – la pagina web non è un album fotografico, quindi le immagini devono essere gradevoli e non occupare tutto lo schermo – sia infine per l’inconveniente per cui, se ingrandite troppo, le immagini si sgranano e perdono la nitidezza, risultando brutte e fastidiose.
Vediamo il risultato del codice aggiornato
Il link può essere posizionato su qualunque elemento della pagina, quindi anche sulle immagini. Se ci procuriamo delle miniature o delle immagini simboliche che richiamano la pagina collegata possiamo abbellire il sito con piccoli oggetti, anche dinamici.
Collegamenti e stile
I link su una pagina web vengono formattati per default con il colore del carattere blu e la sottolineatura. Ma, naturalmente, non è un dogma irreversibile. Anzi, la presenza di diversi link nella pagina – cosa frequente, visto che costituiscono l’essenza stessa di Internet – può risultare fastidiosa e sgradevole, con tante parole blu sottolineate, magari una vicina all’altra. Perciò è utile modificare questa impostazione del browser e adattare i colori dei link alle nostre esigenze grafiche. Introduciamo il tag <style>, molto importante per la resa estetica della nostra creatura, che però ci apre un nuovo mondo: i fogli di stile (o Css). Riservandoci di parlarne in una delle prossime puntate (anche se meriterebbero un intero corso), parliamo dello “stile” della pagina web nella sua versione povera, il tag <style> appunto. Perchè la buona regola vuole che tutti i parametri stilistici della pagina (e del sito) vengano racchiusi in un documento separato dalla stessa, un foglio di stile, dal quale intervenire comodamente sull’aspetto grafico dell’intero sito senza dover modificare le singole parti. Ma partiamo da quest’ultimo tipo di intervento, quello locale, unicamente per motivi didattici, propedeutico alla soluzione generale, che consigliamo caldamente per chiarezza ed efficacia.
Il tag <style> è uno dei pochi che va nella “testa” della nostra creatura, proprio perchè influenza tutto il corpo, cioè tutta la pagina. Da qui si può intervenire, tra l’altro, sulla formattazione dei link, di cui parlavamo prima, eliminando il colore blu del carattere (difficilmente la nostra pagina avrà il testo di quel colore) e impostando la sottolineatura solo quando il cursore si trova sopra la parola o l’immagine che contiene il collegamento, soluzione molto più apprezzata e utilizzata. Vediamo l’esempio:
<style>
a:link {text-decoration: none; color: #000000}
a:hover {text-decoration: underline; color: #D1CEF0}
</style>
Noterete che la sintassi è un po’ diversa da quella dell’html, con le parentesi graffe e i due punti (che sostituiscono il segno uguale). Con la prima riga diciamo al browser di non utilizzare le impostazioni standard per i link (a), cioè di non sottolineare (text-decoration: none – nessuna) e di non usare il carattere blu (impostando, con il sistema esadecimale che abbiamo già visto, il colore nero – #000000- ma possiamo inserire quello che ci è più utile); con la seconda, decidiamo noi le impostazioni che vedremo quando il cursore passerà sopra un link (a:hover, questo è il nome del comando), cioè la sottolineatura (text-decoration: underline) e il colore del carattere. Due brevi righe che possono migliorare molto l’aspetto grafico, e dunque il giudizio generale, dello spazio che stiamo costruendo.
