HTML, una necessità
L’Hyper Text Markup Language è un linguaggio informatico strettamente legato alle pagine web.
Essendo un codice di dominio pubblico, la sua sintassi è stabilita dal Consorzio della Rete.
Deriva da un metalinguaggio, il cui scopo è definire i codici utilizzati per la creazione di documenti (destinati al formato elettronico). L’ultima versione è stata rilasciata nel 2014: l’HTML5.
Inoltre è anche un linguaggio di formattazione e utilizza le modalità di impaginazione o visualizzazione grafica.
Non è possibile considerarlo come un linguaggio di programmazione in quanto il suo codice è in grado esclusivamente di strutturare e decorare dati testuali.
Anche se non è il principale oggetto di questo articolo, è importante essere a conoscenza che per lavorare con HTML bisogna conoscere tutte le tecnologie fondamentali per la realizzazione di un sito o di una applicazione.
In passato venivano usati alcuni tag HTML per definire le dimensioni, i colori e i font, ma oggi molte di quelle funzionalità sono utilizzate da altri strumenti.
Mentre, come vedremo fra poco, l’HTML stabilisce i link tra le pagine, e l’importanza che hanno i testi, fissa titoli, crea form per gli utenti o carica immagini, video, etc, per il resto, invece entrano in gioco due tecnologie:
- CSS o “fogli di stile” hanno come oggetto la definizione dello stile, o aspetto, che devono avere gli elementi sulla pagina. Ogni caratteristica visuale – colori, dimensioni, animazioni – può essere manipolata.
- JavaScript è un linguaggio di programmazione che permette la manipolazione di qualunque cosa nella pagina HTML, in particolare l’interazione con l’utente. Consente di sfruttare le API messe a disposizione del browser e di creare la logica dell’interfaccia utente: dalla manipolazione delle immagini, allagestione del mouse al touch, alla gestione dei dati in locale.
Queste altre due tecnologie sono legate a doppio filo con l’HTML.
Ritornando ad occuparci del nostro linguaggio di markup, occorre subito dire che nella pagina web da realizzare vengono utilizzati tag diversi, ognuno con ruoli diversi.
La formattazione, invece, consiste nell’ inserimento di marcatori ed etichette all’ interno del testo (i tag), che descrivono alcune caratteristiche (come il colore, le dimensioni, etc…)
L’estensione del file , quando viene salvato, è “.htm”.
Quando si scrive un codice HTML, è necessario iniziare dicendo che tipo di file si sta andando ad eseguire. Serve perché il browser possa identificare tutte le regole da cui è formato il documento.
Nella quinta edizione, comunque, non vi è alcuna definizione del tipo di documento. Infatti, il file inizia semplicemente con la dicitura “HTML”.
Il tag utilizzato per utilizzare il documento HTML5 é il seguente: <!DOCTYPE html>
In seguito il documento è costituiti da una serie di tag concatenati tra loro. La struttura più esterna, dopo l’incipit, che racchiude completamente il file è: <html> (all’inizio del documento), </html> (alla fine del file).
All’interno di questo tag ci sono due sezioni ben definiti che rappresentano la testa e il corpo del documento:
– tag <head> e </head> contengono informazioni di controllo (la maggior parte delle volte non vengono visualizzate dal browser);
– tag <body> e </body> contiene tutte le informazioni che riguardano testo, immagini, collegamenti, etc… (Questi vengono visualizzati tutti dal navigatore).
La struttura e l’organizzazione del file sono libere. C’è un unica regola, ovvero che le sottosezioni non si devono sovrapporre (ognuna deve essere chiusa prima di iniziare a lavorare con l’altra).
Ecco una piccola lista dei tag più importanti e utilizzati nel codice
– tag <p> e </p>, indica il paragrafo;
– tag <h1> e </h1>, indica il titolo all’interno della pagina web;
– tag <h2> e </h2>, tag <h3> e </h3>, etc.., indicano i vari sottotitoli;
– tag <strong> e </strong>, danno più importanza ad alcune parti del testo (funzione grassetto);
– tag <em> e </em>, mettono in risalto alcune parti del testo (funzione corsivo);
– tag <a> e </a>, vengono utilizzati per “incollare” i link di altre pagine.
Per quanto riguarda l’ultimo tag, possiamo dividere i collegamenti in tre tipi:
– i link assoluti, l’indirizzo è completo e spesso si tratta di un link esterno alla pagina;
– i link relativi, puntano a pagine che vengono cercate proprio dove risiede il sito, quindi, sono proprio dei link interni alla nostra pagina web;
– Àncore, si rifà ad un altro tag che possiede la dicitura <div> e si conclude con </div>.
Esempio codice HTML
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title> Hello World!! </title>
5. </head>
6. <body>
7. This is an example page
8. </body>
