HTML primi passi - lezione 2 - tag p, div e le loro differenze. Tag br
Nella lezione precedente abbiamo creato il nostro primo documento HTML, il che significa che ormai sapete che scriviamo il codice HTML in un editor di testo e visualizziamo tutte le modifiche tramite il browser aggiornando la pagina (solitamente con il tasto F5).
In questa lezione continueremo a lavorare con il testo e utilizzeremo i tag per racchiudere il testo: span, p e div. Inoltre, vedremo il tag br.
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
</body>
</html>
Questo è il nostro codice di partenza con cui continueremo a lavorare.
Aggiungiamo ora alcune righe di testo.
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<p>Prima riga nel tag P</p>
<p>Seconda riga nel tag P</p>
<div>Prima riga nel tag DIV</div>
<div>Seconda riga nel tag DIV</div>
</body>
</html>
Se aprite il documento nel browser, vedrete che i tag <p> mostrano le frasi su righe diverse, ma c’è una differenza. Il browser imposta di default per il tag <p> un margine superiore e inferiore, mentre per il tag <div> le righe risultano attaccate tra loro. Questo accade perché <p> è un tag di paragrafo, mentre <div> è un tag di blocco o contenitore. Quindi, se ci serve un tag per il testo, usiamo <p>, ma se vogliamo delimitare un’area specifica — ad esempio per darle uno sfondo colorato o un bordo — allora usiamo <div>.
Se in un sito è presente del testo, esso DEVE essere racchiuso in un tag <p> o in un titolo <h1>-<h6>, a meno che non si tratti di testo tecnico o decorativo, ovvero che non serva solo alla formattazione della pagina. Quindi, il testo dovrebbe apparire così:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<div>
<p>Prima riga nel tag P</p>
<p>Seconda riga nel tag P</p>
</div>
</body>
</html>
In questo modo abbiamo la seguente struttura: body>div>p. Ricordate: non deve mai esserci un tag <div> all’interno di un tag <p>. La struttura body>p>div è sbagliata.
Vediamo ora come andare a capo nel testo. A volte un paragrafo può essere molto lungo, e in tal caso possiamo scegliere se suddividerlo in più paragrafi o aggiungere un tag di interruzione di riga <br />. Il tag <br /> è un tag singolo, quindi si chiude con la barra prima del segno di maggiore.
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<div>
<p>Il linguaggio HTML è stato sviluppato dallo scienziato britannico Tim Berners-Lee tra il 1989 e il 1991 presso il Consiglio Europeo per la Ricerca Nucleare di Ginevra (Svizzera). HTML è stato creato come linguaggio per lo scambio di documentazione scientifica e tecnica, accessibile anche a persone non esperte di impaginazione. HTML risolveva con successo la complessità di SGML definendo un piccolo insieme di elementi strutturali e semantici — i descrittori, spesso chiamati “tag”. Con HTML è possibile creare facilmente un documento semplice ma ben formattato. Oltre a semplificare la struttura, HTML introdusse il supporto per l’ipertesto. Le capacità multimediali furono aggiunte in seguito. In origine, HTML fu pensato come mezzo per strutturare e formattare documenti senza legarli a un particolare dispositivo di visualizzazione. Idealmente, un testo con markup HTML doveva essere visualizzato senza distorsioni stilistiche o strutturali su dispositivi con caratteristiche tecniche diverse (schermo a colori di un computer moderno, schermo monocromatico di un palmare, piccolo display di un telefono o programmi di lettura vocale). Tuttavia, l’uso moderno di HTML è molto lontano dal suo scopo originario. Ad esempio, il tag <TABLE>, utilizzato più volte per formattare la pagina che state leggendo, è stato pensato per creare semplici tabelle nei documenti, ma come potete notare qui non c’è nessuna tabella. Col passare del tempo, l’idea originale di indipendenza dalla piattaforma di HTML è stata in qualche modo sacrificata alle moderne esigenze di presentazione multimediale e grafica.</p>
</div>
</body>
</html>
La riga è diventata troppo lunga. Anche se la dividiamo nel file di testo, nel browser non cambierà nulla:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<div>
<p>Il linguaggio HTML è stato sviluppato dallo scienziato britannico Tim Berners-Lee tra il 1989 e il 1991 presso il Consiglio Europeo per la Ricerca Nucleare di Ginevra (Svizzera).
HTML è stato creato come linguaggio per lo scambio di documentazione scientifica e tecnica, accessibile anche a persone non esperte di impaginazione. HTML risolveva con successo la complessità di SGML definendo un piccolo insieme di elementi strutturali e semantici — i descrittori.
I descrittori sono spesso chiamati “tag”. Con HTML è possibile creare facilmente un documento semplice ma ben formattato. Oltre a semplificare la struttura, HTML introdusse il supporto per l’ipertesto. Le capacità multimediali furono aggiunte in seguito. In origine, HTML fu pensato come mezzo per strutturare e formattare documenti senza legarli a un particolare dispositivo di visualizzazione.
Idealmente, un testo con markup HTML doveva essere visualizzato senza distorsioni stilistiche o strutturali su dispositivi con caratteristiche tecniche diverse (schermo a colori di un computer moderno, schermo monocromatico di un palmare, piccolo display di un telefono o programmi di lettura vocale). Tuttavia, l’uso moderno di HTML è molto lontano dal suo scopo originario. Ad esempio, il tag <TABLE>, utilizzato più volte per formattare la pagina che state leggendo, è stato pensato per creare semplici tabelle nei documenti, ma come potete notare qui non c’è nessuna tabella.
Col passare del tempo, l’idea originale di indipendenza dalla piattaforma di HTML è stata sacrificata alle moderne esigenze di presentazione multimediale e grafica.</p>
</div>
</body>
</html>
Questo non cambia nulla nel browser. È qui che entra in gioco il tag <br />. Aggiungiamolo alla fine di ogni riga.
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<div>
<p>Il linguaggio HTML è stato sviluppato dallo scienziato britannico Tim Berners-Lee tra il 1989 e il 1991 presso il Consiglio Europeo per la Ricerca Nucleare di Ginevra (Svizzera).<br />
HTML è stato creato come linguaggio per lo scambio di documentazione scientifica e tecnica, accessibile anche a persone non esperte di impaginazione.<br />
HTML risolveva con successo la complessità di SGML definendo un piccolo insieme di elementi strutturali e semantici — i descrittori.<br />
I descrittori sono spesso chiamati “tag”. Con HTML è possibile creare facilmente un documento semplice ma ben formattato.<br />
Oltre a semplificare la struttura, HTML introdusse il supporto per l’ipertesto.<br />
Le capacità multimediali furono aggiunte in seguito.<br />
In origine, HTML fu pensato come mezzo per strutturare e formattare documenti senza legarli a un particolare dispositivo di visualizzazione.<br />
Idealmente, un testo con markup HTML doveva essere visualizzato senza distorsioni stilistiche o strutturali su dispositivi con caratteristiche tecniche diverse (schermo a colori di un computer moderno, schermo monocromatico di un palmare, piccolo display di un telefono o programmi di lettura vocale).<br />
Tuttavia, l’uso moderno di HTML è molto lontano dal suo scopo originario. Ad esempio, il tag <TABLE>, utilizzato più volte per formattare la pagina che state leggendo, è stato pensato per creare semplici tabelle nei documenti, ma come potete notare qui non c’è nessuna tabella.<br />
Col passare del tempo, l’idea originale di indipendenza dalla piattaforma di HTML è stata sacrificata alle moderne esigenze di presentazione multimediale e grafica.</p>
</div>
</body>
</html>
Ora il browser capisce che deve andare a capo, grazie al tag <br />.
Possiamo anche suddividere il testo in più paragrafi usando i tag <p>.
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<div>
<p>Il linguaggio HTML è stato sviluppato dallo scienziato britannico Tim Berners-Lee tra il 1989 e il 1991 presso il Consiglio Europeo per la Ricerca Nucleare di Ginevra (Svizzera).<br />
HTML è stato creato come linguaggio per lo scambio di documentazione scientifica e tecnica, accessibile anche a persone non esperte di impaginazione.<br />
HTML risolveva con successo la complessità di SGML definendo un piccolo insieme di elementi strutturali e semantici — i descrittori.<br />
I descrittori sono spesso chiamati “tag”. Con HTML è possibile creare facilmente un documento semplice ma ben formattato.<br />
Oltre a semplificare la struttura, HTML introdusse il supporto per l’ipertesto.<br />
Le capacità multimediali furono aggiunte in seguito.<br />
</p>
<p>
In origine, HTML fu pensato come mezzo per strutturare e formattare documenti senza legarli a un particolare dispositivo di visualizzazione.<br />
Idealmente, un testo con markup HTML doveva essere visualizzato senza distorsioni stilistiche o strutturali su dispositivi con caratteristiche tecniche diverse (schermo a colori di un computer moderno, schermo monocromatico di un palmare, piccolo display di un telefono o programmi di lettura vocale).<br />
Tuttavia, l’uso moderno di HTML è molto lontano dal suo scopo originario. Ad esempio, il tag <TABLE>, utilizzato più volte per formattare la pagina che state leggendo, è stato pensato per creare semplici tabelle nei documenti, ma come potete notare qui non c’è nessuna tabella.<br />
Col passare del tempo, l’idea originale di indipendenza dalla piattaforma di HTML è stata sacrificata alle moderne esigenze di presentazione multimediale e grafica.</p>
</div>
</body>
</html>
Aggiornando la pagina nel browser, vedrete che il testo sarà ora diviso in due paragrafi.