1. Strutturazione del testo
Continuiamo a esplorare l'HTML...
Paragrafi (p)
Il tag <p> viene utilizzato per creare paragrafi
di testo. I paragrafi aiutano a suddividere il testo in blocchi logici,
migliorando la leggibilità e l'interpretazione delle informazioni.
Esempio:
<p>Questo è il primo paragrafo del testo. Contiene una certa quantità di informazioni.</p>
<p>Questo è il secondo paragrafo del testo. È separato dal primo paragrafo.</p>
Testo grassetto (b)
Il tag <b> si usa per evidenziare il testo in grassetto
(bold). Serve per sottolineare l'importanza di alcune
parole o frasi.
<p>Questo è <b>importante</b> testo.</p>
Testo in corsivo (i)
Il tag <i> viene utilizzato per evidenziare il testo in
corsivo (italic). È spesso usato per indicare termini tecnici, titoli di
libri, parole straniere, ecc.
Esempio:
<p>Questo è <i>un termine</i>, evidenziato in corsivo.</p>
2. Titoli (h1 - h6)
I titoli in HTML sono utilizzati per strutturare il contenuto e
creare una gerarchia dei titoli nella pagina. Ci sono sei livelli di titoli,
dove <h1> è il più importante, mentre
<h6> è il meno importante.
-
<h1>— Il titolo più importante e grande. Di solito viene usato come titolo principale della pagina. -
<h2>— Usato per sottotitoli che seguono il<h1>. -
<h3>— Livello di titolo sotto<h2>. -
<h4>— Livello di titolo sotto<h3>. -
<h5>— Livello di titolo sotto<h4>. -
<h6>— Titolo meno importante e più piccolo.
Esempio:
<h1>Titolo principale della pagina</h1>
<h2>Sottotitolo di livello 2</h2>
<h3>Sottotitolo di livello 3,</h3>
3. Tag aggiuntivi nel documento head
Ci sono dei tag che potreste incontrare in futuro negli esempi di HTML, voglio dirvi un paio di parole su di essi:
1. Tag <title>
Il tag <title> definisce
il nome della pagina che viene mostrato sulla scheda del browser. È la prima cosa che vede l'utente quando apre la pagina. È quasi
sempre presente su tutte le pagine. È aggiunto di default dagli editor HTML,
ma per i progetti educativi non ha un grande valore.
2. Tag <meta charset="UTF-8">
Il tag <meta> all'interno
<head> imposta la codifica dei caratteri per il documento.
UTF-8 è la codifica più utilizzata, supporta la maggior parte delle lingue del mondo. Parleremo delle codifiche
un po' più avanti.
3. Tag
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
Questo tag si trova anche all'interno
<head>. Garantisce il
corretto rendering della pagina sui dispositivi mobili. Imposta la larghezza dell'area visibile (viewport) uguale alla larghezza
dello schermo del dispositivo e il livello di zoom iniziale della pagina.
4. Tag <link rel="stylesheet" href="styles.css">
Il tag <link/> connette
il file CSS esterno per lo stile della pagina.
L'attributo rel="stylesheet" indica che si tratta di un foglio di stile e
href="styles.css" specifica il percorso del file di stile.
5. Tag <script src="script.js" defer></script>
Il tag <script> connette
il file JavaScript esterno per aggiungere interattività alla
pagina. L'attributo src specifica il percorso del file script, e
defer dice al browser di eseguire lo script solo dopo che il
documento HTML è stato caricato.
GO TO FULL VERSION