Il linguaggio HTML è un linguaggio per la scrittura di pagine web, oggi arrivato alla versione 5 da quando è stato inventato, che ha introdotto numerose novità.
Infatti le novità più importanti sono: la compatibilità con browser di qualunque tipo di dispositivo, l’introduzione di tag semantici che conferiscono al documento HTML una ben precisa struttura logica conferme alle specifiche del Web 2.0.
Inoltre sono stati introdotti nuovi tag per la parte multimediale che hanno eliminato il problema della compatibilità di tali contenuti con i vari Browser che nelle versioni precedenti obbligavano l’utente a installare plugin e helper aggiuntivi per tali contenuti.
E’ stata introdotta un’unico formato di tipo documento ovvero un’unica “DOCTYPE” che ha introdotto un unico standard per le pagine in formato HTML 5.
Infatti per definire un documento in formato HTML 5 basta dichiarare all’inizio del documento <!DOCTYPE html> e tutti i browser compatibili con la versione 5, acquisiscono tale informazioni come l’inizio di un documento HTML 5.
Altre nuove funzionalità saranno viste nei prossimi articoli.
Quali strumenti software per scrivere codice HTML ?
Per scrivere un documento HTML 5 esistono varie soluzioni software freeware e open source, occorre decidere se utilizzare uno strumento WYSWYG ovvero “What yoo see what you get” ovvero software che assistono l’utente nella scrittura di codice e visualizza in tempo reale il risultato, senza necessariamente testare la pagina nel browser come Bluefish compatibile con HTML5 tanto per citare un prodotto open source..
Altri software prevedono l’uso di editor veri e propri con Visual Studio Code con degli strumenti specifici per HTML 5, Javascript e CSS. Altri software pronti all’uso come Notepad++, Sublime e Atom alcuni sono sotto licenza freeware altri no.
Per utilizzare Visual Studio Code, conviene installare alcune estensioni quali:
- Estensione HTML 5 Support
- HTML 5 Previuw
- Intellisense for CSS class names in HTML
Queste estensioni da installare in Visual Studio Code sono utili per assistere l’utente nella scrittura di codice HTML, CSS, Javascript
Creazione della prima pagina html
Per la creazione di una prima pagina web in Visual Studio Code dobbiamo decidere quale cartella è la Web Root ovvero la carella principale ove andare a depositare i files html, css, javascript.
E’ possibile creare preventivamente la cartella Web Root sul nostro computer, l’importante che poi in Visual Studio Code tale cartella deve essere aggiunta allo spazio di lavoro Workspace di Visual Studio Code.
Scrivere la prima pagina web è semplice e come primo esempio è mostrata una pagina web con i titoli di livello 1,2,3 e con due paragrafi, e con l’uso del tag semantico main.
La pagina web ha come sorgente:
<!DOCTYPE html>
<html>
<head>
<title>Pagina 1</title>
<meta charset="utf-8">
</head>
<body>
<main>
<h1>Titolo 1</h1>
<p> Paragrafo di prova</p>
<h2>Titolo 2</h2>
<p> Paragrafo di prova</p>
<h3>Titolo 3</h3>
<p> Paragrafo di prova</p>
<hr>
<h4>Titolo livello 4</h4>
<p> Paragrafo di prova</p>
</main>
</body>
</html>il tag <p> è il paragrafo ogni tag ha la chiusura con l’opzione </tag> quindi il tag di paragrafo ad esempio ha la chiusura con </p>. Una regola fondamentale è chiudere i tag nell’ordine in cui sono stati aperti. Il tag <h1>, <h2>,<h3> definisco dei titoli che costituiscono un paragrafo a sé e quindi non hanno bisogno di interruzioni di riga o paragrafo.
Il tag <p> in modo predefinito allinea il blocco di testo a sinistra se non è specificato nessun allineamento. L’allineamento può essere specificato con l’attributo align nel seguente modo:
<p align=”left | center | right | justify”> testo paragrafo … </p>
Esempio :
Paragrafo di prova della prima pagina web in formato HTML 5
E’ possibile specificare altri attributi nel tag, è importante poi nel seguito delegare formattazione di paragrafo, pagina, carattere, sfondo, formato immagini ai fogli di stile CSS esterni che sono esaminati nei prossimi articoli.
E’ stato introdotto il primo tag senza chiusura che <hr> che disegna una linea orizzontale nel documento HTML: Per completare il discorso la struttura di un documento HTML è formato sempre dai tag <html>, <head>, <body> che rappresentano rispettivamente, l’inizio di codice HTML, l’intestazione del documento non intestazione di pagina o paragrafo ma della pagina web che contiene informazioni generali quali il titolo della pagina con il tag <title>, e il tag <meta> che non prevede chiusura che contiene informazioni supplementari nel documento web quali ad esempio la codifica dei caratteri, informazioni supplementari sul documento.
Ad esempio il meta tag <meta charset=”utf-8″> indica che la codifica dei caratteri deve essere Unicode ovvero codifica ASCII a 16 bit che supporta tutti gli idiomi e gli alfabeti internazionali. Per provare la pagina HTML è sufficiente lanciare da Visual Studio Code “Run” e scegliere il Browser da lanciare per l’esecuzione, è possibile utilizzare anche il test con più Browser per verificare se la pagina HTML è visualizzata sempre nello stesso modo.