Il codice HTML e la struttura delle pagina web.
Il codice HTML ovvero Hyper-Text Markup Language (letteralmente, linguaggio a marcatori per ipertesti). Molte vole utilizzano per strutturare l’architettura del vostro sito web, landing page e email.
Detto più semplicemente, l’HTML rappresenta l’ossatura delle pagine web, mentre il CSS ne è l’abbigliamento: se il CSS (Cascading Style Sheets) definisce lo stile (colori, aspetto, ecc.), l’HTML stabilisce la struttura, dal titolo e sottotitolo, passando per l’elenco puntato, giù fino al piè di pagina (footer).
Questo tipo di linguaggio si esprime mediante una serie di elementi, chiamati tag (etichette di identificazione) racchiuse tra due caporali. Una delle regole basiche è che ogni elemento, generalmente, deve avere una tag di apertura e una di chiusura. Questo perché la struttura sia appropriatamente disposta nel suo complesso e, più importante, il browser sia in grado di interpretare il linguaggio e sapere in che formato mostrare i contenuti.
I fondamentali
Come mostrato nell’esempio qui sotto, la struttura inizia sempre con <!DOCTYPE html>, in modo che il browser capisca che ciò che sta leggendo è in codice HTML:
<!DOCTYPE html> <html> <body> <h1>Il nostro titolo</h1> <p>Il nostro primo paragrafo</p> </body> </html>
La tag <body> segna l’inizio del corpo della pagina, dove inseriremo i nostri contenuti. Questi potranno essere organizzati in diverse sezioni mediante l’uso della tag header, disponibile in sei misure: dal titolo più grande <h1> al sottotitolo più minuto <h6>.
Proviamo a riprendere il nostro esempio e aggiungiamo un’altra parte al documento: l’intestazione:
<!DOCTYPE html> <html> <head> <title> Il titolo della nostra pagina </title> </head> <body> <h1>Il nostro titolo principale</h1> <p>Il nostro <strong>primo</strong> paragrafo</p> <h3>Il nostro sottotitolo</h3> <p>Altri punti esposti</p> </body> </html>
Nella continuazione dell’esempio precedente si nota subito quanto rapidamente possa evolversi la struttura di una pagina. Alla base è stata aggiunta una sezione <head>, grazie alla quale è stato possibile dare un nome alla pagina; inoltre, la tag <strong> aggiunge l’effetto grassetto alla parola “primo”.
