Tempo stimato per la lettura 2 minuti
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.
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,
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.
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.
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.
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.
Nella prossima lezione andremo a vedere come inserire il logo e il menù di navigazione nell’home page di un sito web.
2 commenti
Aggiungi il tuo
2 Pingback
HTML BASE - Lezione 4 - Corsi Formazione Online
[…] prossima lezione torneremo a lavorare sul div container e sui tre div interni header, main e […]
HTML BASE - Lezione 6 - Corsi Formazione Online
[…] con l’ormai ben noto passaggio di duplicare la lezione precedente. Vai quindi nella cartella htdocs di xampp, duplica lezione-5 in lezione-6 e apri Atom in modalità […]