Preparazione del layout di una pagina web con l’attributo style interno al tag div

In questa lezione andremo a costruire il layout della nostra pagina web formattando gli elementi interni.

Prima di scrivere il codice duplica lezione-4 e rinominala in lezione-5 con gli stessi passaggi che abbiamo visto sia nella lezione 3 che nella lezione 4.

Ora apri il file index.html con Atom lavorando sul nuovo progetto e vai ad aggiornarlo inserendo il seguente codice all’interno del tag body.

Ribadisco che puoi tranquillamente fare “copia” e “incolla”, ma se vuoi imparare bene e memorizzare i passaggi il mio suggerimento è quello di stampare il codice e andare a scriverlo a mano pezzo per pezzo, soprattutto all’inizio aiuta molto.

A video dovresti avere un risultato come l’immagine sotto.

Anteprima pagina web con tre div interni al container

A differenza di prima, stavolta per dare il colore di sfondo ho dato dei valori in lettere RED, GREEN e BLUE. Nel linguaggio HTML o colori posso essere scritti sia in formato esadecimale ad esempio #000000 che corrisponde al nero, sia in formato lettere, sia in formato RGB.

Esempio di tabella colori

Testo Esadecimale RGB
black #000000 rgb(0,0,0)
white #FFFFFF rgb(255,255,255)
red #FF0000 rgb(255,0,0)

Per un corretto uso dei colori sui siti web ti consiglio di leggere l’articolo che parla di Adobe Color.

Andando a modificare la formattazione dei div header, main e footer abbiamo “perso” il container, nel senso che è coperto dai tre elementi interni. Se modifichi l’altezza del container portandola a 620px vedrai che comparirà di nuovo dopo il footer,

container alto 620px

L’attributo style nel tag body

Abbiamo usato l’attributo style nel tag div, ma può essere usato in qualsiasi tag html, ora proviamo a usarlo nel tag body.

La sintassi naturalmente è quella vista fino ad ora.

<body style=” nome1: valore1; nome2: valore2; ” >

contenuti della pagina web

</body >

Proviamo quindi a dare il colore di sfondo #333333 al tag body della nostra pagina web.

A video il risultato sarà come l’immagine sotto.

Pagina con sfondo colorato grazie all’attributo style nel tag body

Allineare il div container al centro della pagina

Supponiamo di volere allineare il nostro div container al centro della pagina web, per farlo dobbiamo lavorare sui margini.

I margini della pagina sono 4:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Sono stati scritti in questo ordine perché è l’ordine con cui devono essere letti, cioè in senso orario.

Ora prova ad aggiungere un margin-top di 100 pixel al div container in questo modo.

A video dovresti vedere la tua pagina web come l’immagine sotto, in quanto il container si è spostato di 100 pixel verso il basso.

Body spostato di 100 pixel verso il basso

Se vogliamo allineare il nostro container al centro della pagina quindi dobbiamo mettere i margini top e bottom a 0 (zero) mentre i margini right e left su auto in questo modo.

Il risultato a video sarà il seguente.

Div container allineato al centro della pagina web

Come sicuramente avrai notato, in alto c’è rimasto un pochino di spazio, questo perché il body di default lascia un pò d’aria (margini) sui quattro lati, come quando apriamo un programma di video scrittura tipo word ad esempio, il testo che andiamo a scrivere è già rientrato sui quattro lati.

Il concetto è lo stesso, e esattamente come su word questa cosa la possiamo andare a gestire personalizzandola.

Per farlo è necessario settare tutti i margini del body a ” 0 ” zero, quindi per le cose che abbiamo visto fino ad ora dovremmo andare a scrivere nell’attributo style del tag body ;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;

Giusto, ma possiamo scriverlo anche in forma abbreviata con

<body style=”margin:0″> contenuto </body>

Scrivere in un modo o nell’altro è esattamente la stessa cosa, ma imparare a usare forme abbreviate ci consente di lasciare il codice più pulito. A video il risultato sarà questo.

Tag body con tutti i marigni a 0

Nella prossima lezione andremo a vedere come inserire il logo e il menù di navigazione nell’home page di un sito web.