Non appena inizi a creare pagine Web con HTML, inizierai a lavorare con le dimensioni. Per fare in modo che il tuo sito appaia come desideri, probabilmente abbinerà un disegno creato da te o da un altro designer, vorrà cambiare la dimensione del testo su quel sito, così come altri elementi sulla pagina. Per fare questo puoi iniziare a cercare un tag "size" HTML, ma lo troverai rapidamente mancante.
Il tag della dimensione HTML non esiste in HTML. Invece, per impostare la dimensione dei tuoi font, immagini o layout devi usare i Cascading Style Sheets. In effetti, qualsiasi modifica visiva che devi apportare al testo di un sito o a un altro elemento deve essere gestita dai CSS! HTML è solo per la struttura.
Il tag più vicino a un tag di dimensione HTML è il vecchio tag font, che in effetti includeva un attributo di dimensione. Tieni presente che questo tag è stato deprecato nelle versioni correnti di HTML e potrebbe non essere supportato dai browser in futuro! Non vuoi usare il tag del font nel tuo HTML! Invece, dovresti imparare i CSS per ridimensionare i tuoi elementi HTML e modellare di conseguenza la tua pagina web.
Dimensioni del carattere
I caratteri sono probabilmente la cosa più semplice da ridimensionare con i CSS. Più che di ridimensionare quel testo, con i CSS puoi essere più specifico sulla tipografia del tuo sito web. È possibile definire la dimensione del carattere, il colore, l'involucro, il peso, l'interlinea e altro. Con il tag font, puoi solo definire la dimensione e solo come numero relativo alla dimensione del font predefinita del browser che differisce per ogni cliente.
Per impostare il tuo paragrafo in modo che abbia una dimensione del font di 12pt, usa la proprietà di stile font-size:
h3 {font-size = 24px; }
Questo stile imposterà la dimensione del carattere di elementi headiing3 di 24 pixel. Puoi aggiungerlo a un foglio di stile esterno e tutti gli H3 del tuo sito useranno questo stile.
Se vuoi aggiungere altri stili tipografici al tuo testo, puoi aggiungerli a questa regola CSS:
h3 {font-size: 24px; colore: # 000; font-weight: normale; }
Questo non solo imposterebbe la dimensione del font per H3, ma imposterà anche il colore al nero (che è ciò che significa il codice esadecimale di # 000) e imposterà il peso su "normale". Per impostazione predefinita, i browser rendono le intestazioni 1-6 come testo in grassetto, quindi questo stile sovrascrive quello predefinito e in sostanza "non grassetto" il testo.
Dimensioni dell'immagine
Le immagini possono essere complicate per definire le dimensioni perché puoi effettivamente utilizzare il browser per ridimensionare l'immagine. Ovviamente, il ridimensionamento delle immagini con il browser è una cattiva idea perché fa caricare le pagine più lentamente ei browser spesso fanno un lavoro di ridimensionamento, rendendo le immagini brutte. Invece, dovresti usare il software di grafica per ridimensionare le immagini e poi scrivere le loro dimensioni reali nella tua pagina Web HTML.
A differenza dei tipi di carattere, le immagini possono utilizzare HTML o CSS per definire le dimensioni. Si definisce la larghezza dell'immagine e l'altezza. Quando si utilizza l'HTML, è possibile solo definire la dimensione dell'immagine in pixel. Se si utilizza CSS, è possibile utilizzare altre misurazioni tra cui pollici, centimetri e percentuali. Questo ultimo valore, percentuale, è molto utile quando le immagini devono essere fluide, come in un sito Web reattivo.
Per definire la dimensione dell'immagine utilizzando HTML, utilizza gli attributi altezza e larghezza del tag img. Ad esempio, questa immagine sarebbe quadrata di 400x400 pixel:
height = "400" width = "400" alt = "image" />
Per definire la dimensione dell'immagine usando CSS, usa le proprietà di stile altezza e larghezza. Ecco la stessa immagine, usando CSS per definire la dimensione:
style = "height: 400px; width: 400px;" alt = "immagine" />
Dimensioni del layout
La dimensione più comune che definisci in un layout è la larghezza e la prima cosa che devi decidere è se utilizzare un layout a larghezza fissa o un sito web reattivo. In altre parole, definirai la larghezza come un numero esatto di pixel, pollici o punti? O hai intenzione di impostare la larghezza del layout per essere flessibile utilizzando ems o percentuali? Per definire le dimensioni del tuo layout, puoi utilizzare le proprietà CSS di larghezza e altezza proprio come faresti in un'immagine.
Larghezza fissa:
style = "width: 600px;">
Larghezza del liquido:
style = "width: 80%;">
Quando decidi le larghezze del tuo layout, tieni presente le diverse larghezze del browser che i tuoi lettori potrebbero utilizzare e i diversi dispositivi che utilizzeranno. Questo è il motivo per cui i siti Web reattivi, che possono cambiare il loro layout e dimensionamento in base a diversi dispositivi e dimensioni dello schermo, è lo standard di best practice oggi.
