Corso HTML e CSS (Lezione 5)

Impariamo a costruire un sito Web

Lezione 5: I tag del <body> : Tag base.

Nell’ultima lezione abbiamo definito lo scheletro base delle nostre pagine web. Basterà salvarlo con un nome generico e poi  usarne una copia per ogni nuova pagina che vogliamo scrivere.

Adesso affrontiamo il corposo argomento della costruzione del corpo della pagina, vale a dire ciò che andremo ad inserire all’interno dei tag <body> e </body> e che ospiterà i contenuti della nostra pagina, ciò che il browser mostrerà al visitatore.

I tag utilizzati per definire gli elementi del body sono numerosissimi e quindi per comodità e chiarezza di esposizione li suddivideremo per funzione. Elencheremo progressivamente tutti gli elementi del body suddivisi come detto con esempi che ne chiariscano l’uso e la funzione, ma solo in un secondo tempo li riprenderemo per andare nei dettagli di tutti gli attributi di ciascun elemento, perché questo andrà fatto introducendo e spiegando l’uso dei fogli di stile CSS (Cascading Style Sheets).

Le categorie nelle quali abbiamo suddiviso i tag sono:

Raggruppamento logico dei Tags

Base Tag di pubblicazione testo e commenti
Formattazione Formattazione del testo e dei paragrafi
Moduli Tag per la gestione dei moduli
Frames Tag per la gestione dei frames
Immagini Trattamento delle immagini
Links Tag per l’inserimento di un link
Liste Definizione di liste
Tabelle Definizione di tabelle
Stili Definizione di elementi di stile
Programmazione Definizione di script e oggetti

Cominciamo quindi a descrivere i tag base ed il loro uso.

L’elenco dei tag che abbiamo incluso in questo raggruppamento sono:

<h1> fino a <h6> Definiscono le intestazioni dei contenuti testuali
<p> Delimita un paragrafo di testo
<br /> Inserisce un’interruzione di riga (a capo)
<hr /> Inserisce una riga orizzontale
<!–…–> Commento (non viene preso in considerazione dal browser)

1) <h1> fino a <h6>

Esistono 6 differenti tipi di intestazioni:

<h1>Intestazione H1</h1>
<h2>Intestazione H2</h2>
<h3>Intestazione H3</h3>
<h4>Intestazione H4</h4>
<h5>Intestazione H5</h5>
<h6>Intestazione H6</h6>

Per ciascuno di questi tag si possono specificare diversi attributi per personalizzare le intestazioni, come vedremo in seguito.

Se inseriti invece semplicemente come riportato sopra, tra il tag <body> e la chiusura </body> di una pagina si avrà il risultato che vedete sotto:

Intestazione H1

Intestazione H2

Intestazione H3

Intestazione H4

Intestazione H5
Intestazione H6

 

2) <p>  </p>

Il tag <p> specifica l’inizio di un paragrafo che andrà chiuso col tag di chiusura </p>. All’interno di un paragrafo è possibile inserire non solo testo, ma anche immagini ed altri elementi che volessimo inserire nella nostra pagina. Al tag <p>si possono assegnare diversi attributi che ne specificano la formattazione ed alcune caratteristiche del linguaggio. Questa parte come detto prima fa parte di lezioni di approfondimento che saranno presentate una volta terminata la panoramica di tutti i tag del <body>.

L’uso di questo tag è semplicissimo. Tutto ciò che si scrive tra <p> e </p> verrà visualizzato dal browser così com’è (fatta salva la formattazione che vedremo in seguito). Quindi se scriviamo:

<p> Questo è un paragrafo di solo testo</p>

a video apparirà nel punto dove abbiamo inserito questo tag:

Questo è un paragrafo di solo testo

 

3) <br />

Questo tag è usato per andare a nuova riga, altrimenti il browser continuerà a visualizzare tutto sulla stessa riga fino al termine dello spazio usabile (larghezza definita per il <body> o larghezza della finestra o del blocco se ne abbiamo definito uno. Vedremo in seguito questa parte).

Come si può vedere non esiste un tag di chiusura, ma è uno di quei tag auto-chiudenti (terminati con />). Si tratta cioè di notazione unica da inserire in mezzo al nostro testo nel punto in cui vogliamo andare a capo.

Se scriviamo, quindi:

<p>Prima riga del mio testo.<br />Questa parte è meglio su nuova riga</p>

dal browser verrà visualizzato:

Prima riga del mio testo.
Questa parte è meglio su nuova riga

 

4) <hr />

Questo tag è usato per inserire una riga orizzontale. Può essere usato per separare visivamente il contenuto.

Come si può vedere non esiste un tag di chiusura, ma è uno di quei tag auto-chiudenti (terminati con />). Si tratta cioè di notazione unica da inserire in mezzo al nostrocontenuto nel punto in cui vogliamo inserire la riga.

Vediamo un esempio:

<p>&nbsp;Questo viene mostrato prima della riga<hr />Questo viene mostrato dopo la riga</p>

Il browser mostrerà:

 Questo viene mostrato prima della riga


Questo viene mostrato dopo la riga

 

5) <!–    –>

Con questi tag si possono inserire dei commenti all’interno della nostra pagina. Ovviamente essendo commenti tutto ciò che si trova tra <!– e –> non verrà visualizzato dal browser anche se si trovasse all’interno di un paragrafo.

Esempio:

<p>Questa è la mia prima riga di testo
 <!-- Questo è un commento e non verrà visualizzato -->
 Questa è la mia seconda riga di testo</p>

verrà visualizzato dal browser così:

Questa è la mia prima riga di testo

Questa è la mia seconda riga di testo

Nella prossima lezione del corso HTML  e CSS inizieremo a parlare dei tag utilizzati per la formattazione del contenuto.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.