Abbiamo visto nella lezione precedente, come inserire le immagini nella nostra pagina web, avevamo già visto come inserire il testo, adesso vediamo come si possono combinare testo ed immagini.
La prima difficoltà che si incontra quando si inserisce una immagine è posizionarla in un punto preciso della pagina che sia diverso dal margine sinistro, se nella pagina c’è del testo diventa difficile disporre al meglio i due elementi (immagini e testo). Per nostra fortuna esistono gli attributi di allineamento ed il box model, per quest’ultimo vi rimando alla guida sui CSS ma solo dopo aver familiarizzato con tutto il resto.
Le immagini sono in linea col testo, grazie ai fogli di style è possibile cambiare questo allineamento con display: block; che serve per avere il testo sopra e sotto all’immagine o float: left; e float: right; che permette al testo di disporsi intorno all’immagine da sinistra e da destra.
Vediamoli in pratica, aprite il vostro editor, qualunque esso sia, richiamate la pagina che avevate precedentemente salvato, quella della lezione precedente per intenderci. Posizionate il cursore nel punto in cui avevate inserito l’elemento img ed inserite una definizione di style 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
Senza display: block, avrebbe seguito il flusso naturale di immagine inserita nel testo:
questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini senza l’uso di display: block questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini senza l’uso di display: block
Mentre con float: left il testo si dispone intorno all’immagine che viene allineata a sinistra (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 : leftquesto 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 inserito nello style è possibile distanziare l’immagine dal testo agendo su ognuno dei quattro lati perimetrali dell’immagine stessa.
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 ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati.questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati.
Lo stesso esempio ma con float right, ovvero il testo si dispone intorno all’immagine che viene allineata a destra (right).
Questo il risultato:
questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati.questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati.
Non lasciatevi ingannare dal fatto che il margine in basso sembra diverso, come se ci fosse più spazio vuoto. Si tratta di illusione ottica dovuta al fatto che il testo va a capo lasciando un rigo vuoto.
Attenzione, 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
Se adesso al paragrafo del testo impostiamo come allineamento: justify, cioè la spaziatura che permette di avere un allineamento su entrambi i margini, si ottiene un risultato decisamente più preciso ed elegante.
<p style=”text-align: justify;“> …..testo…..
….. testo …. </p>
Questo il risultato, immagine a sinistra:
questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati.questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left.
<p style=”text-align: justify;“> …..testo…..
….. testo …. </p>
Questo il risultato, immagine a destra:
questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati.questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right ed un margin di 15px su i 4 lati. questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso
Nell’esempio è 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 di quel rigo di testo che va a capo, il margine inferiore è stato ridotto a 5 pixel anziché 15 come negli altri lati, come si può vedere l’impressione è che lo spazio sia adesso distribuito in parti uguali: margin: 15px 15px 5px 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.