Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

Immagini e Testo

Abbiamo visto nella lezione precedente, come inserire immagini nella nostra pagina web, avevamo visto in quella ancora precedente come inserire il testo, adesso vedremo come si possono combinare testo ed immagini.

La prima difficoltà che si incontra quando si inserisce una immagine è posizionarla in un punto preciso che sia diverso dal margine sinistro, se nella pagina c'è del testo diventa difficile amalgamare al meglio i due elementi (immagini e testo). Per nostra fortuna esistono gli attributi di allineamento ed il box model che vedremo più avanti.

Le immagini sono in linea col testo, i Fogli di Style permettono di cambiare questo allineamento tramite la proprietà vertical-align che accetta i seguenti parametri: baseline, top, middle, bottom, sub, super, text-top e text-bottom. Personalmente trovo che il risultato non sia soddisfacente ma essendo un mio parere non va preso troppo in considerazione. Trovo invece decisamente utili display: block; che serve per avere il testo sopra e sotto all'immagine e float: left; che permette al testo di disporsi intorno all'immagine.

Vediamoli in pratica, aprite il vostro editor e richiamate il foglio di style creato in precedenza. Inserite una definizione display: block per il tag img che sarà adoperato da tutte le immagini presenti nella nostra pagina.

img {
display: block;
}

Questo il risultato:




questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di display: block questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di display: block questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di display: block questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di display: block



Mentre con float: left

img {
float: left;
}

Questo il risultato:




questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left n serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left



Con l'attributo margin è possibile distanziare l'immagine dal testo agendo su ognuno dei quattro lati perimetrali.

img {
float : left;
margin: 15px 15px 15px 15px;
}

Questo il risultato:




questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left n serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left



E' stato ridefinito il tag img ma così facendo tutte le immagini della pagina seguirebbero le stesse direttive, per poter creare definizioni diverse da applicare ad ogni singola immagine si usa l'attributo id (identificativo) che richiama il selettore specificato.

img#sinistro {
float: left;
margin: 15px 15px 15px 15px;
}

img#destro {
float: right;
margin: 15px;
}

Così facendo abbiamo adesso due identificativi id con nomi: destro e sinistro applicati entrambi al tag img per le immagini, uno imposta float: left e l'altro float: right, entrambi usano 15 px come margine perimetrale nei 4 lati.

Nel codice html saranno richiamati inserendo l'attributo id corrispondente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title> Titolo della mia pagina Web</title>
<link rel="stylesheet" type="text/css" href="foglio.css" />
</head>
<body>

<p>tutto il testo che serve <img id="sinistro" src="web-link.gif" alt="descrizione" />tutto il testo che serve </p>

<p>tutto il testo che serve <img id="destro" src="web-link.gif" alt="descrizione" />tutto il testo che serve </p>

<img src="web-link.gif" />
</body>
</html>

Questo il risultato:




questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left n serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left



Sopra esempio id sinistro.     Sotto esempio id destro




questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left n serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left



L'effetto float potrebbe proseguire oltre il blocco definito, per mettere fine a questa impostazione è conveniente usare clear nel blocco o immagine successivo. clear accetta come valori: left, right e both dove con both si annullano entrambi. clear: both

Notate la disposizione del testo, l'immagine anche se apparentemente rotonda ha in realtà una forma rettangolare, non è possibile infatti creare immagini rotonde si riesce però a dare l'illusione giocando sulle trasparenze degli angoli. Se inseriamo il bordo all'imagine si vedrà meglio quello che intendo dire:

immagine con bordo impostato a 1

A questo punto cambieremo nel nostro foglio di style l'allineamento al testo, impostando il giustificato nel tag p

p { font-size: 10 pt;
font-family: Arial,Verdana,sans-serif;
color: #000000;
text-align: justify; }

Ottenendo un risultato decisamente più preciso ed elegante:




questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left n serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left testo giustificato e immagine con bordo a 1questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l'effetto con testo e immagini facendo uso di float : left



Nell'immagine è stato impostato un valore leggermente diverso per il margine inferiore, è infatti possibile dichiarare i bordi nel foglio di style usando quattro dichiarazioni distinte, una per ogni margine, si inizia col primo valore che corrisponde al margine superiore e si prosegue in senso orario: margine laterale destro, margine inferiore e margine laterale sinistro. A causa dell'ombra grafica sotto l'immagine il suo margine inferiore è stato ridotto a 3 pixel anziché 15 come negli altri casi, per dare l'impressione che lo spazio sia distribuito in parti uguali: margin: 15px 15px 3px 15px;

Anche per questa lezione credo possa bastare... Abbiamo imparato ad introdurre testi ed immagini, nella prossima lezione conosceremo i links, la vera forza delle pagine web.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi