Creazione dell’home page di un sito

In questa lezione andremo ad inserire una serie di tag per creare la pagina principale di un sito più ricca di contenuti rispetto a quanto abbiamo visto fino ad ora. Questo ci permetterà di conoscere molti dei tag HTML.

Organizzare il layout con il tag div

Per organizzare il layout, cioè l’impaginazione e la struttura di una pagina web, ovviamente c’è bisogno di un tag. Il tag in questione con il quale andremo a lavorare è <div></div>, una sorta di “divisore” e organizzatore dei contenuti appunto.

Solitamente una pagina web è organizzata da 4 div:

  • il div contenitore
  • il div di intestazione
  • il div dei contenuti
  • il div del piè di pagina

Questi div sono annidati tra loro all’interno del contenitore, prima di andare a scrivere il codice duplica lezione-3 e rinominala in lezione-4 con gli stessi passaggi che abbiamo visto nella lezione precedente.

Ora apri il file index.html con Atom e digita il codice che vedi nell’immagine sotto.

Codice base home page

Rispetto a quanto visto fino ad ora ci sono molte cosè in più. In primis il tag <title></title> all’interno del tag head.

Visualizzando la pagina web all’indirizzo locale http://127.0.0.1/sitiweb/html-base/lezione-4/ vedrai che quanto scritto nel tag title compare come “titoletto” nel nome della scheda del browser.
Mentre quanto contenuto nei tag div viene distribuito nella pagina.

Il tag div è un tag divisore, se non diversamente specificato si distribuisce in larghezza al 100% rispetto a dove è posizionato (in questo caso la pagina web), mentre in altezza si adatta su una o più righe in base ai contenuti (numero di righe).

Analisi del tag body

Andiamo a vedere nello specifico quello che c’è scritto nel codice.

Per fare l’esercizio potresti anche fare “copia e incolla” di quello che c’è scritto sopra, se vuoi imparare il linguaggio html ti consiglio di scrivere a mano quanto riportato così da memorizzare i passaggi e i nomi dei tag.

<!– inizio div contenitore –>

Quello sopra è un commento, una sorta di nota che è possibile scrivere all’interno del codice senza influenzarlo, solitamente viene usato per andare ad indicare l’inizio e la fine di un elemento contenitore.

La sintassi è molto simile a quella di un tag, solo che ha la chiusura è “integrata” nell’apertura, nel senso che non c’è il simbolo ” / ” finale.

< ! – – testo – – >

Simbolo minore, punto esclamativo, meno, meno, contenuti, meno, meno, simbolomaggiore
(tutto senza spazi)

In questo file ne abbiamo messi quattro, uno per ogni tag div che vanno ad indicare la sua apertura e al sua chiusura.

Lo stile interno del tag div

Vediamo come andare a visualizzare graficamente ogni singolo elemento attraverso uno stile. Ogni tag html può essere formattato nel colore di sfondo, colore del testo, bordi, ombre ecc…

Tale formattazione può essere applicata grazie a quello che viene definito attributo di un tag html.

Gli attributi dei tag sono anch’essi diversi tra loro e hanno ruoli diversi in base al loro utilizzo.

Prima di andare a modificare lo stile di ogni elemento, assegneremo un attributo di identificazione che ci permetterà di riconoscere i singoli div, tale elemento è l’attributo id.

L’attributo id

L’attributo id in un tag serve a “identificare” in maniera univoca un un elemento all’interno della pagina, la sintassi è la seguente.

<div attributo=”valore”> cotenuto </div>

Dove per attributo si intende il suo nome che ne indica anche la tipologia necessaria per il ruolo seguito dal simbolo ” = ” uguale e tra i doppi apici il suo valore che cambia in base al ruolo.

Se al nostro div contenitore volessimo dare come valore di attributo id “container” ad esempio, la sintassi da scrivere sarà la seguente.

<div id=”container”> cotenuto </div>

Nell’esercizio che stiamo facendo, contenuto corrisponde ad altri 3 div annidati all’interno di container.

Ora andiamo a scrivere il codice inserendo l’attributo id ad ogni tag div

A livello grafico sulla nostra pagina web non è cambiato nulla in quanto ci siamo limitati a dare semplicemente un valore all’attributo id. Per modificarli a livello grafico dobbiamo usare un’altro attributo, lo style.

Attributo style interno ad div

L’attributo style ci serve per formattare un elemento e può contenere (come ogni altro attributo” più valori.

Nello specifico andremo a modificare il div id container per vederlo a video facendolo largo 700px (pixel), alto 600px (pixel) e con colore di sfondo grigio.

La sintassi è la seguente:

<div id=”container” style=”width:700px; height:600px; background-color:#CCCCCC;” >

All’interno del div id container quindi abbiamo aggiunto l’attributo style al quale abbiamo dato 3 valori. Una larghezza di 700 pixel, un’altezza di 600 pixel e un colore di sfondo grigio.

Ogni valore deve essere indicato con il suo nome, ad esempio width, seguito dai ” : ” due punti e dopo i due punti il valore in questo caso numero. Per passare il valore successivo dobbiamo chiudere la sintassi del precedente con il ” ; ” punto e virgola.

Il codice della nostra pagina web aggiornato con l’attributo style sarà cosi.

Esempio di codice

Nella nostra pagina web possiamo quindi andare a scrivere.

Per avere a video un risultato come questo.

Quella forma grigia è il nostro div container.

Nella prossima lezione torneremo a lavorare sul div container e sui tre div interni header, main e footer.