Il sito per imparare gratuitamente a fare pagine Web

Body in HTML

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



Andrea Bianchi © www.web-link.it  Primi Passi in HTML con Style - Ver. 1.3.6

 

<body>

Nelle lezioni precedenti avete imparato la struttura base di un documento html. Abbiamo spiegato come inserire testo, immagini, links e metatags, adesso aggiungeremo alcuni attributi per il tag <body> in modo da estendere questi attributi a tutto il documento.

Il tag <body>, dichiara l'inizio del corpo del documento e comprende tutto quello che si trova al suo interno fino alla chiusura </body>, praticamente se noi assegniamo degli attributi di style a questo tag, saranno estesi a tutto il documento e non soltanto ad un paragrafo o ad una immagine come abbiamo visto fino ad ora.

Vediamo alcuni degli attributi più utili ed interessanti, intanto gli stessi adoperati fino a questo momento, se infatti si dichiara nel body un font o un colore per il testo o le sue dimensioni, queste saranno estesse ed applicate a tutta l'intera pagina senza doverlo dichiarare ogni volta nel singolo paragrafo, a meno che non si voglia per quel paragrafo uno style diverso dal resto della pagina.

<body style="font-size: 12pt; font-family: arial, verdana, sans-serif; color: #000099;">

Questo il risultato:

Tutta la pagina farà uso di un font ti tipo arial, dimensione 12 punti di colore blu scuro.

E' stato scelto un font con dimensioni 12 punti, notate che non ho usato i pixel questa volta ma i punti, solo per mostrare la versatilità dei css. Ho dichiarato una serie di famiglie di fonts: arial, verdana e sans-serif in modo che venga usato il font arail (dichiarato per primo), nel caso questo non si trovi nel PC del visitatore sarà usato il verdana (dichiarato per secondo) e solo nel caso in cui mancasse anche questo si passerebbe al sans-serif (dichiarato per ultimo). Ho scelto un colore blu corrispondente al codice esadecimale #000099

Con background-color: è possibile impostare un colore a tinta unita su tutta la pagina, per esempio il giallo.

<body style="background-color: #ffff66; font-size: 12pt; font-family: arial, verdana, sans-serif; color: #000099;">

Questo il risultato:

Tutta la pagina farà uso di un font di tipo arial, dimensione 12 punti di colore blu scuro su sfondo giallo.

Per ragioni estetiche voi lo vedete applicato al solo box di esempio ma se lo avessi applicato al body sarebbe stato esteso a tutta la pagina, proprio come ho fatto con il bianco per scrivere questa guida. Se usiamo un colore a tinta unita non potremo usare uno sfondo formato da una immagine grafica e viceversa. Togliamo allora lo sfondo giallo e mettiamo una immagine usando:
background-image: url (immagine.gif)

<body style="background-image: url(weblink.gif); font-size: 12pt; font-family: arial, verdana, sans-serif; color: #000099;">

Questo il risultato:

Tutta la pagina farà uso di un font ti tipo arial, dimensione 12 punti di colore blu scuro su sfondo con immagine grafica.

Concludo la serie degli attributi più importanti con margin e padding che servono rispettivamente per distanziare il documento dai margini della finestra del browser ed il contenuto del documento dai margini del documento stesso.

<body style="padding: 80px; margin: 80px; background-image: url(weblink.gif); font-size: 12px; font-family: arial, verdana, sans-serif; color: #000099;">

Questo il risultato:

Tutta la pagina farà uso di un font ti tipo arial, dimensione 12 punti di colore blu scuro su sfondo con immagine grafica.

Ho impostato un valore esagerato 80Pixel per rendere meglio l'idea, notate infatti come il testo sia distanziato dal margine del suo box che sarebbe da tutta la pagina se applicato a body, e come questo box sia a sua volta distanziato dai suoi quattro lati perimetrali.

Fate ancora un piccolo sforzo, invece di assegnare tutti questi valori in linea per il tag body, è così che si chiama questa tecnica "in linea", metteteli in una dichiarazione di style posizionata ad inizio pagina in <head>, sarà comunque applicata al solo body ma renderà il codice decisamente più pulito ed anche poer voi, se deciderete di apportare modifiche, sarà tutto molto più semplice. Ecco come fare riprendendo lo schema base della nostra pagina.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
<titolo>
<meta comandi ... >


  <style type="text/css">
body {
padding: 80px;
margin: 80px;
background-image: url(weblink.gif);
font-size: 12px;
font-family: arial, verdana, sans-serif;
color: #000099;
}
</style>

  </head>
  <body>
qui immagini, testi, links
  </body>
</html>

Sembra complicato ma non lo è, guardatelo bene, ha la sua logica, ho dichiarato per body tutti gli stessi parametri che avevo dichiarato prima direttamente in linea. La differenza è che adesso si trova nella parte head dell'intera pagina e risulta molto più pulito, se dovete cambiare qualcosa sarà più semplice perchè più ordinato. Vi accorgerete presto che conviene dichiarare i vari stili ad inizio pagina, se si tratta di un sito formato da molte pagine meglio ancora se inserito in un foglio a parte, separato dalle pagine ma richiamato dalle stesse, così da fare una sola modifica a quel foglio esterno per vederla applicata a tutte le pagine che compongono l'intero sito.

Con questa lezione avete imparato a gestire l'estetica delle vostre pagine. Siete finalmente pronti per trasferire il sito sul server, cioè on-line. C'è ancora molto da imparare ma già così le vostre pagine possono avere tutto il necessario per essere gradevoli e soprattutto leggibili: testo, immagini, links e tabelle.

Nella prossima lezione vedremo una struttura, per organizzare al meglio l'impaginazione dei nostri elementi grafici e testuali.

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



Andrea Bianchi