Immagini e Testo

Abbiamo visto nella lezione precedente, come inserire immagini nella nostra pagina web, avevamo la lezione 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 in seguito.

Le immagini sono in linea col testo i Fogli di Style permettono di cambiare questo allineamento tramite l'attributo vertical-align che accetta i seguenti parametri: baseline, top, middle, bottom, sub, super, text-top e text-bottom. Personalmente non trovo che il risultato sia soddisfacente ma essendo un mio parere non va preso in considerazione. Trovo invece decisamente utili display: block; che serve per avere il testo sopra e sotto all'immagine o 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. Inseriamo una definizione display: blok per il tag img che sarà adoperato da tutte le immagini presenti nella nostra pagina.

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

Mentre con 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.

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.

Così facendo abbiamo adesso due identificativi id con nomi: destro e sinistro applicati entrambi al tag img per le immagini.

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

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

Notate la disposizione del testo, l'immagine anche se apparentemente rotonda ha una forma rettangolare o quadrata, non è possibile infatti creare immagini rotonde, se inseriamo il bordo si vedrà meglio:



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

Ottenendo un risultato decisamente più 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 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

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 dal margine superiore e si prosegue in senso orario quindi 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 da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.