gototopgototop
 
Sei in: Home Page HTML 5 Introduzione all'HTML 5

Introduzione all'HTML 5

Innanzitutto occorre fare una premessa, accompagnata ad un pò di chiarezza. L' HTML sarà ancora presente nei documenti a venire e quello che in queste pagine viene introdotto non sarà un nuovo linguaggio completamente diverso da quello che fino ad ora viene utilizzato per costruire pagine web. Infatti troveremo, ed implementeremo, molti tag quali div, span, p che attualmente utilizziamo. Accanto a questi  adotteremo e conosceremo nuovi elementi; per esempio: header, section, nav, ed altri ancora, per quanto concerne la struttura della pagina.

Gli articoli a seguire, oltre al presente, illustrano come scrivere documenti HTML 5 in maniera semplice, corredati, quando è necessario, anche da esempi e pagine costruite appositamente.

Essendo l'argomento oggetto di frequenti aggiornamenti, in quanto le specifiche non hanno raggiunto lo stato di ufficialità del W3C, si consiglia di controllare sempre la fonte ufficiale: W3C technical reports index.

Il formato più comune, oltre al più conosciuto, per la pubblicazione di documenti nel web e la creazione di applicazioni è l' HTML.  Dalla sua comparsa esso è stato definito come un linguaggio relativamente semplice, concepito principalmente per la descrizione di documenti. Esso è poi cresciuto ed è stato adattato ad una vasta gamma differente che va dalla pubblicazione di notizie ai blog, fino ad arrivare alle  applicazioni per e-mail, mappe, elaborazione di testi e fogli di lavoro.

Man mano che l'utilizzo dell' HTML aumentava, parallelamente aumentavano anche le esigenze e le richieste degli sviluppatori, facendo emergere sempre più i limiti di questo linguaggio. Si è pensato di cominciare a sviluppare l' HTML 5, vedendolo come il prossimo passo per lo sviluppo dell' HTML, introducendo una serie di nuove funzionalità. Chi "mastica" l' HTML non si troverà dinanzi a difficoltà insormontabili ma, per quanto possa valere un mio consiglio, potrebbe rappresentare un invito a familiarizzare con tali nuove specifiche.

La prima pagina in HTML 5

Come primo approccio con l' HTML 5, verrà creato un documento HTML di base; potrebbe essere adottato come "modello" per le future pagine HTML. Questo documento contiene semplicemente un titolo ed un breve paragrafo. Come avviene con le pagine web attuali, possiamo utilizzare anche il semplice "Notepad" per scrivere HTML. Si scriva, al primo rigo, il seguente codice:

<!DOCTYPE html>

Tutti i documenti HTML devono cominciare con il DOCTYPE. Il DOCTYPE, come sappiamo perfettamente, indica al browser quale tipo di documento deve "parsare", affinchè lo interpreti in maniera corretta, piuttosto che adottare una modalità di compatibilità progettata per riprodurre il comportamento dei browser più datati.

Un documento HTML è diviso in due sezioni principali:

<head>, nella quale sono contenuti i metadati quali titolo, fogli di stile e script;

<body>, al cui interno troviamo i contenuti della pagina.

Tornando al nostro primo documento HTML 5 aggiungiamo, dopo il DOCTYPE, un titolo  ed un paragrafo. La struttura completa sarà simile alla seguente:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Prima Pagina in HTML 5</title>
    </head>
    <body>
        <h1>Prima Pagina in HTML 5</h1>
        <p>La presente pagina è scritta in HTML 5. Viene interpretata correttamente dal browser.</p>
    </body>
</html>

Richiamando la pagina di esempio attraverso il browser, possiamo renderci conto di come questa viene visualizzata correttamente.

Comprendere la semantica di una pagina web

In genere, lo scopo della scrittura e della pubblicazione di un documento è quello di trasmettere informazioni ai lettori. Questo può contenere qualsiasi tipo di informazione, quale il racconto di un evento, notizie di attualità o la descrizione dei prodotti e dei servizi disponibili in un sito. Qualunque sia l'informazione, essa deve essere trasmessa al lettore in modo da essere facilmente comprensibile. Un tipico documento HTML, come ad esempio un libro, news, blog ecc, sono raggruppati in diverse sezioni contenenti una varietà di titoli, paragrafi, liste, tabelle, citazioni, oltre ad altre strutture tipografiche.

Tutte queste strutture sono importanti per la trasmissione delle informazioni. L' HTML fornisce i mezzi per identificare chiaramente ciascuna di queste strutture in modo tale da essere facilmente presentate all'utente. In altri termini questo è lo scopo del linguaggio di markup e dell' HTML in particolare.

Il markup è un linguaggio interpretato da una "macchina", il quale descrive tutti gli aspetti di un documento quali la sua struttura, la semantica e lo stile. Alcuni linguaggi di marcatura sono stati progettati esclusivamente con lo scopo di descrivere la presentazione del documento, come RTF (Rich Text Format). Altri, come l' HTML, sono più generici e, piuttosto che concentrarsi sulla descrizione della presentazione, sono concepiti sulla descrizione del significato con lo scopo di mantenere il contenuto e la presentazione in maniera separata.

L' HTML è provvisto di una vasta gamma di elementi semantici, utilizzati per marcare varie strutture tipografiche. Elementi per contrassegnare differenti livelli dei titoli, paragrafi, liste, tabelle. È importante distinguere tra la struttura e la semantica del contenuto, che dovrebbe essere descritto in formato HTML, e la sua presentazione. In un documento, un titolo può essere presentato visivamente in grassetto con ampi margini al di sopra e al di sotto di esso, separato dal testo circostante. In un altro documento, un titolo può essere presentato con un colore differente, in corsivo, con un font diverso ecc... Ma a prescindere dalla presentazione, esso rimane sempre un titolo. Lo stesso concetto espresso per i titoli, vale anche per i paragrafi, le liste le citazioni ecc...

Per il momento possiamo fermarci qui, dopo aver dato una semplicissima infarinatura dell' HTML 5. Negli articoli a seguire vedremo meglio in cosa si differenzia dall'attuale struttura adottata per costruire pagine web.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati