In HTML ci sono sei diversi livelli di intestazione. Questi sono definiti dagli elementi h1 a h6.
<h1>Livello intestazione 1</h1> <h2>Livello intestazione 2</h2> <h3>Livello intestazione 3</h3> <h4>Livello intestazione 4</h4> <h5>Livello intestazione 5</h5> <h6>Livello intestazione 6</h6>
In questo contesto, h1 rappresenta il livello di intestazione più grande, h6 il più piccolo. Con HTML5 sono state introdotte ulteriori possibilità di definire le intestazioni, che verranno mostrate in seguito.
I diversi livelli di intestazione vi aiuteranno nella strutturazione dei testi. Ad esempio, potete ispirarvi ai libri. Ci sono il titolo del libro, che è simile al contenuto dell'elemento h1. Pertanto, su ciascuna pagina HTML dovrebbe essere inserito solo un elemento h1. Il testo rimanente sarà quindi suddiviso attraverso gli altri livelli. Dopo la testa principale segue h2. Sottocapitoli di h2 sono a loro volta contrassegnati dall'elemento h3.
Inoltre: Le dimensioni dei livelli di intestazione sono inizialmente definite dai browser. Tuttavia, è possibile determinarle esplicitamente utilizzando CSS. Ne parleremo più avanti.
I livelli di intestazione sono facili da utilizzare. Basta inserire una h seguita dal numero del livello desiderato.
<h1>PSD-Tutorials.de</h1>
Dopo un'intestazione definita in questo modo, verrà automaticamente inserito un interruzione di riga e uno spazio tra gli elementi successivi.
Assicuratevi che i numeri nei tag iniziali e di chiusura siano identici.
Definire i paragrafi
Oltre alle intestazioni, i testi sono naturalmente composti anche da paragrafi. Tali paragrafi possono essere facilmente realizzati in HTML utilizzando l'elemento p. Un paragrafo contrassegnato in questo modo ha di default una certa distanza dagli elementi successivi. È possibile controllare la dimensione di questo paragrafo utilizzando CSS.
Ecco un esempio di due definizioni di paragrafi:
<p>Questo è un paragrafo</p> <p>Questo è un altro paragrafo</p>
Un'occhiata al browser mostra quanto segue:
In HTML5 non è obbligatorio che i tag di apertura dei paragrafi vengano chiusi tramite </p>. Tuttavia, a fini di chiarezza, consiglierei di utilizzare effettivamente il tag di chiusura </p>.
Interruzioni di linea manuali
I testi all'interno di paragrafi, liste, ecc. vengono automaticamente spezzati dal browser se ad esempio superano la larghezza della finestra del browser. Questo è pratico, poiché evita lo scorrimento orizzontale non necessario. Tuttavia, è possibile spezzare il testo anche in qualsiasi punto. A tale scopo viene utilizzato l'elemento <br />. Notate che si tratta di un cosiddetto tag autonomo, che quindi non ha un tag di chiusura, ma si chiude da solo.
<p>Yeh, this one's for the workers who toil night and day<br /> By hand and by brain to earn your pay<br /> Who for centuries long past for no more than your bread<br /> Have bled for your countries and counted your dead</p>
Quando si utilizza <br />, non importa se si trova alla fine di una riga o in una riga separata. Il risultato sarà lo stesso in entrambi i casi:
Ritornando agli spazi automatici inseriti dai browser, spesso sono problematici perché non si può controllare dove effettivamente avvenga il cambio di riga. Ciò può causare risultati indesiderati. Un esempio tipico sono i numeri di versione.
iPhone 5
Questo dovrebbe essere normalmente su una sola riga. Il cambio di riga non dovrebbe avvenire tra iPhone e il 5 qui.
iPhone 5
Per evitare ciò, si possono utilizzare spazi protetti. Ecco un esempio:
Questa sequenza di caratteri definisce un tale spazio protetto. Nel browser viene visualizzato come uno spazio normale: 
Per ottenere l'effetto desiderato, non inserite spazi nel testo sorgente. Qualcosa del genere non funzionerebbe:
Testo preformattato
Potrebbero esserci situazioni in cui si desidera visualizzare il testo esattamente come è organizzato nel codice sorgente. Un esempio tipico sono le liste di programmi, come spesso si trovano anche su PSD-Tutorials.de.
Per tali scopi, HTML permette la definizione di sezioni di testo preformattato. Le indentazioni nel codice sorgente saranno quindi considerate dal browser come sono scritte nel codice. L'esempio seguente mostra come questo viene implementato:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>"Ciao, Mondo!" in PHP</h1> <pre> <?php echo "Ciao, Mondo\\n"; ?> </pre> </body> </html>
Il passaggio da visualizzare come testo preformattato è definito all'interno dell'elemento pre. Inserisci le indentazioni, ecc., esattamente come desideri che vengano visualizzate dal browser alla fine.
Osservando il codice di esempio, noterete i caratteri strani <?php e ?>. Nel browser, verranno visualizzati come <?php e ?>. La variante utilizzata nel codice sorgente si chiama "mascheramento dei caratteri". È necessario se si desidera evitare che il browser interpreti i caratteri specifici di HTML. Se si inserisce direttamente nel codice sorgente <?php, il browser penserà che si tratti di un'apertura di un'area PHP. Di conseguenza, si mascherano i caratteri.
<pre> Destinazione Partenza Arrivo Binario ---------------------------------------------------------------- Berlino 10:23 14:30 2 Amburgo 11:09 13:20 13 Monaco 12:04 15:45 1a </pre>
Il risultato nel browser appare come segue:
I browser infatti considerano gli spazi vuoti definiti nel codice sorgente. La variante di tabella mostrata funziona piuttosto bene. La trovo decisamente pratica per tabelle più piccole. Tuttavia, non appena il set di dati diventa più ampio, è consigliabile ricorrere alle classiche tabelle HTML. Come definirle, lo scoprirete ovviamente anche in questa serie.
