sintassi: width: percentuale | misura
La proprietà width consente di specificare le dimensioni di un elemento. Abbiamo già incontrato l'uso di questa proprietà parlando di tabelle, come per esempio in:
La percentuale si riferisce all'elemento che contiene l'elemento corrente: in altre parole, se la tabella si trova dentro un'altra tabella, la percentuale è relativa alle dimensioni della tabella contenitore. Se la tabella si trova nel body, la percentuale si riferisce a tutto il documento.
Oltreché tramite un valore percentuale, width può anche essere specificato con una precisa unità di misura. Le unità di misura normalmente usate sono px (numero di pixel) e em (multipli dell'attuale dimensione dei font: per esempio 2em significa il doppio delle dimensioni dei font. Se non viene indicata nessuna unità di misura, i valori si intendono sempre espressi in pixel.
Qui sotto viene mostrato un esempio di tabella dimensionata in pixel:
La proprietà width non si applica solo alle tabelle, ma a qualsiasi elemento. Per esempio, si consideri il seguente paragrafo
Nel mezzo del cammin di nostra vita, mi ritrovai per una selva oscura
</p>
che viene visualizzato nel seguente modo:
Nel mezzo del cammin di nostra vita, mi ritrovai per una selva oscura
→Per approfondire: W3 School
sintassi: height: percentuale | misura
La proprietà height viene usata per specificare l'altezza di un elemento, con le stesse regole viste sopra per width.
La combinazione di height e width insieme è utile per specificare per esempio le dimensioni di un'immagine:
L'immagine precedente verrà visualizzata con dimensioni 42px di altezza e 50px di larghezza (l'indicazione dell'unità di misura px è opzionale).
Height e width usati insieme forniscono dunque un modo rapido per ridimensionare la visualizzazione di una immagine. Si osservi però che non viene ridimensionato il file immagine, ma solo come l'immagine stessa viene visualizzata. In altre parole, se ho un'immagine 1024x1024 e la visualizzo come 512x512, le dimensioni (in byte) del file immagine che viene scaricato dal browser restano invariate. Perciò in generale è preferibile ridimensionare il file, invece che ridimensionare la visualizzazione dell'immagine.
In assenza di indicazione di dimensioni (senza usare height e width) l'immagine viene visualizzata con le dimensioni specificate nel file. Tuttavia anche in questi casi si raccomanda di usare comunque height e width per informare il browser della dimensione dell'immagine che dovrà scaricare. Se lo scaricamento è lento (oppure se l'immagine non può essere scaricata) e le dimensioni sono state indicate, il browser sarà comunque in grado di impaginare la pagina (lasciando un rettangolo vuoto di dimensioni opportune al posto della immagine).
→Per approfondire: W3 School
In generale una pagina in cui la disposizione dei vari elementi (layout) è rigidamente specificata, viene detta solida. Viceversa una pagina in cui gli elementi vengono specificati in proporzione agli altri, generalmente usando misure percentuali, viene detta liquida.
In una pagina solida, per esempio, le dimensioni delle tabelle non sono specificate in percentuale, ma in pixel. Si consideri dapprima la seguente tabella
<tr>
<td>prima cella </td>
<td>seconda cella </td>
<td>terza cella </td>
</tr>
<tr>
<td>quarta cella </td>
<td>quinta cella </td>
<td>sesta cella </td>
</tr>
</table>
che viene visualizzata nel seguente modo
| prima cella | seconda cella | terza cella |
| quarta cella | quinta cella | sesta cella |
Ora si consideri quest'altra tabella
<tr>
<td>prima cella </td>
<td>seconda cella </td>
<td>terza cella </td>
</tr>
<tr>
<td>quarta cella </td>
<td>quinta cella </td>
<td>sesta cella </td>
</tr>
</table>
che viene visualizzata così:
| prima cella | seconda cella | terza cella |
| quarta cella | quinta cella | sesta cella |
Qual è la differenza sostanziale fra le due tabelle? Nel primo caso l'ampiezza (width) viene indicata come percentuale della pagina, mentre nel secondo caso viene fornita in pixel. Ciò significa che la prima soluzione si adatterà dinamicamente alle dimensioni dello schermo del dispositivo usato, mentre la seconda sarà più rigida, in quanto impone dimensioni fisse. Per esempio sul piccolo schermo di uno smartphone la seconda tabella potrebbe obbligare l'utente a uno scrolling orizzontale per visualizzarne l'intero contenuto (anche se i browser degli smartphone moderni sono spesso così "intelligenti" da convertire prima della visualizzazione le dimensioni fisse in dimensioni percentuali, in modo tale da riuscire a trattare anche questi casi).
I termini solido e liquido sono stati scelti per analogia con gli stati della materia: un layout liquido si adatterà alla forma (dimensioni) del contenitore (schermo), mentre un layout solido imporrà le proprie misure allo schermo che lo visualizza. In generale un layout liquido è più flessibile e si presta maggiormente a una buona accessibilità e usabilità del sito e perciò è da considerarsi preferibile. Viceversa un layour solido offre al web master un maggior controllo sull'aspetto della pagina web, a scapito però della possibilità di visualizzare correttamente la pagina su dispositivi diversi.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
