Introduzione al linguaggio HTML – le basi

Se hai deciso di imparare a creare siti Web da zero, troverai particolarmente interessante questa introduzione al linguaggio HTML che va rimuovere tutti quegli ostacoli legati alla curva di apprendimento. HTML acronimo di (Hyper Text Markup Language); è lo standard che definisce la struttura del linguaggio di ipertesti per la creazione di pagine Web.

Struttura di un file HTML

La creazione di un file HTML avviene tramite marcatori e Tag; i primi ne strutturano la pagina, mentre i Tag ne compongono gli elementi. I Tag sono fondamentali perché delineano il contenuto di una pagina così come: l’intestazione, un paragrafo, una tabella o un’immagine.

Introduzione al linguaggio HTML

Creare una pagina Web richiede di aver assimilato la sintassi del linguaggio HTML; almeno che ciò non sia svolto da un interprete (un programma che consente di farlo tramite la compilazione di moduli). La specifica di un file HTML prevede l’ apertura e la chiusura di marcatori che si differiscono da una barra laterale ( / ) anteposta; tradotta in inglese (Forwardslash) e che vedremo tra poco. Oltre a quanto detto finora, bisogna tener conto di alcune eccezioni come illustrato di seguito che non prevedono la chiusura: 

  • La dichiarazione <!DOCTYPE html> specifica un documento HTML5 (non necessita di chiusura).
  • Il marcatore <html> è l’elemento di apertura di un file .html.
  • L’ elemento <head> racchiude tutte le informazioni del documento non visibili a schermo.
  • Il titolo del documento <title>.
  • L’elemento <body> che contiene la parte visibile a schermo di una pagina.
  • L’intestazione (titolo) dei contenuti di una pagina <h1>.
  • La definizione di un paragrafo <p>.
  • Il separatore <hr> (non necessita di chiusura) e nemmeno per andare a capo <br>

In questa introduzione al linguaggio HTML ho già presentato tutti gli elementi principali; mancano solo le tabelle e le liste quindi adesso siamo pronti per un esempio pratico di base.

Creazione di un paragrafo

Un paragrafo va aperto in questo modo <p> e chiuso  in quest’altro </p>. I Tag possono sia incapsulare che essere incapsulati in altri Tag; un po come le scatole cinesi ma per una migliore interpretazione del Browser e dei motori di riceca è meglio attenersi alle best practices HTML.

Introduzione al linguaggio html
Struttura base di un documento HTML

Come si visualizza una pagina Web

Per visualizzare una pagina Web ce bisogno di un software; “il Browser”! In passato la creazione di un sito richiedeva uno sforzo maggiore per gli sviluppatori; prima del Responsive Web Design erano obbligati a creare stili diversi per Browser e display differenti integrando anche molto codice JavaScript.

Introduzione al linguaggio HTML5: Responsive web design

Con la versione l’HTML5 ed il CSS3 è possibile fare cose che in precedenza erano possibili solo con l’uso del JavaScript; questo ha dato vita al Responsive Web Design il quale rende possibile sviluppare griglie dinamiche che si adattano allo schermo del dispositivo. L’approccio allo sviluppo di siti con tecniche responsive, risolve tutte quelle problematiche legate alla diversità dei dispositivi mobile; nonché sempre più compatibili (Cross Browser) anche con Browser che non sono:

  • Google Chrome,
  • Edge,
  • Mozilla Firefox,
  • Safari,
  • Opera.
  • Internet Explorer,

La lettura del codice HTML da parte del Browser nascosto agli utenti in gergo tecnico si definisce (Parsing); il processo è pressoché istantaneo.

Pagina Web HTML
Una semplice pagina Web di esempio

La specifica di un documento HTML

Per far capire al browser che tipo di file html sta interpretando; lo si dichiara nel primo tag di apertura; la versione più recente di HTML e la 5. Da quando è nato il World Wide Web (WWW); sono state rilasciate le seguenti versioni del linguaggio HTML.

Versioni HTML
Introduzione al linguaggio HTML

La dichiarazione di un documento HTML5 è <!DOCTYPE html>, ciome già detto ciò aiuta il Browser a visualizzare la pagina nel modo corretto. La specifica deve essere inserita una sola volta e prima di ogni altro Tag. Questo tipo di dichiarazione non usa un controllo stretto sulla sintassi ed indica un documento HTML5.