Introduzione a HTML5: Fondamenti e Storia del Linguaggio
Benvenuti al corso di HTML5 base! Questo percorso formativo è progettato per chi desidera apprendere le fondamenta di HTML, il linguaggio di markup che costituisce la struttura delle pagine web. Iniziamo con una panoramica di ciò che HTML è e cosa non è, per poi approfondire le sue versioni e le sue caratteristiche principali.
Cos'è HTML?
HTML, acronimo di HyperText Markup Language, è il linguaggio di markup
utilizzato per disporre gli elementi all'interno di una pagina web. Si tratta
di file di testo con estensione .html, contenenti tutti gli elementi che
desideriamo visualizzare in una pagina. La caratteristica principale di HTML è
la capacità di creare collegamenti ipertestuali tra i documenti.
Un esempio semplice di codice HTML è il seguente:
<!DOCTYPE html>
<html>
<head>
<title>La mia prima pagina</title>
</head>
<body>
<h1>La mia prima pagina</h1>
<p>Testo della mia prima pagina</p>
</body>
</html>
Cosa Non è HTML
Molto spesso, chi è alle prime armi con lo sviluppo web tende a confondere HTML con un linguaggio di programmazione. Tuttavia, è fondamentale chiarire che HTML non è progettato per svolgere le stesse funzioni di un linguaggio di programmazione. Questa distinzione è cruciale per comprendere correttamente il ruolo e i limiti di HTML.
Ecco alcuni punti chiave che lo distinguono da un linguaggio di programmazione:
- Non è un linguaggio di programmazione: HTML non supporta costrutti condizionali né iterativi.
- Non può eseguire logiche di controllo o iterazioni: non essendo un linguaggio di programmazione, non può gestire flussi logici come cicli o condizioni.
- Non è dinamico: HTML è un linguaggio statico, il che significa che i contenuti delle pagine HTML non cambiano senza l'intervento di altri linguaggi (come JavaScript).
- Non gestisce operazioni aritmetiche o logiche: mentre i linguaggi di programmazione possono eseguire calcoli e operazioni logiche, HTML non ha questa capacità.
- Non interagisce direttamente con il server: HTML si limita a definire la struttura della pagina web; non può inviare o ricevere dati dal server senza l'ausilio di altri linguaggi come JavaScript o server-side scripting come Python o PHP.
- Non manipola dati: HTML non è progettato per manipolare dati. Tutte le operazioni di manipolazione dei dati devono essere gestite da linguaggi di programmazione come JavaScript.
Con queste considerazioni in mente, è più facile capire come HTML si inserisca nel contesto dello sviluppo web e perché sia spesso usato in combinazione con altri linguaggi e tecnologie per creare applicazioni web complete e funzionali.
Storia di HTML
Il linguaggio HTML ha subito diverse evoluzioni sin dalla sua nascita nel 1991. Questi cambiamenti hanno risposto alle crescenti esigenze del web, migliorando le funzionalità e le capacità di HTML per stare al passo con la tecnologia in continua evoluzione. Di seguito, una cronologia delle principali versioni che hanno segnato il percorso di HTML.
1991: La Prima Versione di HTML
La prima versione di HTML è stata sviluppata da Tim Berners-Lee nel 1991. Questa versione iniziale conteneva un insieme limitato di elementi e attributi, progettati per creare e collegare documenti ipertestuali. Anche se molto semplice rispetto agli standard odierni, questa versione ha gettato le basi per la struttura e la funzionalità di base delle pagine web.
2000: Introduzione di HTML 4.01 e XHTML
Con l'avvento del nuovo millennio, è stata introdotta la versione HTML 4.01. Questa versione ha rappresentato un passo significativo avanti, offrendo un set più ricco di elementi e attributi, migliorando l'accessibilità e la compatibilità con i diversi browser. HTML 4.01 ha permesso una maggiore separazione tra contenuto e presentazione, favorendo l'uso di CSS per la gestione dello stile delle pagine web.
Parallelamente, è stato sviluppato XHTML (eXtensible HyperText Markup Language), una versione di HTML conforme alle regole più rigorose di XML (eXtensible Markup Language). XHTML vedeva il documento HTML come un'applicazione XML, imponendo una sintassi più rigorosa e ben formata. Questa versione è stata creata per migliorare la robustezza e la portabilità dei documenti web, ma ha incontrato alcune difficoltà di adozione a causa della sua rigidità.
2011: Introduzione di HTML5
Nel 2011, è stata introdotta HTML5, una versione rivoluzionaria che ha superato XHTML. HTML5 è stato progettato per rispondere alle esigenze moderne del web, facilitando lo sviluppo di applicazioni web ricche e interattive sia per dispositivi desktop che mobile.
Tra le principali innovazioni di HTML5 troviamo:
- Nuovi elementi semantici: come
<header>,<footer>,<article>, e<section>, che migliorano la struttura e la semantica del contenuto. - Gestione migliorata di multimedia: grazie ai tag
<audio>e<video>, che permettono l'incorporazione diretta di contenuti multimediali senza necessità di plugin esterni. - API avanzate: per la gestione di funzionalità complesse come grafica 2D e 3D, storage locale, e comunicazioni in tempo reale.
- Attributi
data-: per facilitare l'uso di dati personalizzati associati agli elementi HTML.
HTML5 ha semplificato la sintassi rispetto a XHTML, mantenendo comunque la possibilità di creare documenti ben formati e semantici. Ha anche introdotto nuove API per supportare funzionalità avanzate, come il drag-and-drop, la geolocalizzazione, e le WebSockets per comunicazioni bidirezionali.
Tag Essenziali di una Pagina HTML5
Una pagina HTML è composta da una serie di tag essenziali:
<!DOCTYPE html>: definisce la versione del documento HTML5<html>: contiene l'intero documento HTML<head>: include informazioni meta, il titolo della pagina e collegamenti a fogli di stile<body>: contiene tutti gli elementi visualizzati dal browser.
Tag DOCTYPE
Consente di specificare la versione della sintassi HTML da utilizzare. Il seguente frammento di codice specifica come sintassi da usare quella HTML5.
<!DOCTYPE html>
Tag <html>
Il tag <html> racchiude tutto il contenuto della pagina HTML e consente di
specificare il linguaggio utilizzato tramite l'attributo lang:
<html lang='it'></html>
Tag <head>
Il tag <head> contiene meta-informazioni utili per la gestione della pagina,
come il titolo e i collegamenti ai fogli di stile:
<head>
<meta charset="utf-8">
<title>Il titolo della pagina</title>
</head>
Tag <body>
Il tag <body> contiene tutti gli elementi che vengono visualizzati nella
pagina web:
<body>
<h1>Titolo della Pagina</h1>
<p>Contenuto della pagina.</p>
</body>
Strumenti per la Scrittura di Pagine HTML
Per scrivere e visualizzare le pagine HTML, puoi utilizzare:
- Editor di testo: VIM, Notepad++, Sublime Text, o Visual Studio Code
- Browser: per visualizzare le pagine HTML
Esempio
Per concludere questa lezione, proviamo a creare una semplice pagina HTML che
visualizzi Hello, World!. Per fare ciò, apri l'editor di testo e scrivi:
<!DOCTYPE html>
<html>
<head>
<title>Titolo pagina Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Adesso, apri il file con un browser senza utilizzare alcun un server web. Puoi
notare che la pagina mostra Hello World!, poiché incluso nel body, e come
titolo in alto sul tab del browser Titolo pagina Hello World!, poiché
specificato all'interno del tag title.
Conclusioni
Speriamo che questa prima lezione ti abbia dato una buona introduzione a HTML e le sue basi. Nella prossima lezione, esploreremo in dettaglio la sintassi HTML.
