L’HTML è il "linguaggio" usato per creare documenti World Wide Web. È stato realizzato nel 1990 da Tim Bernes-Lee, ricercatore del CERN di Ginevra. Non è un vero e proprio linguaggio di programmazione ( non ha meccanismi che consentono di prendere delle decisioni - "in questa situazione fai questo, in quest'altra fai quest'altro"- e non è in grado di compiere delle iterazioni - "ripeti questa cosa, finché non succede questo"-, né ha altri costrutti propri della programmazione). si può definire un "sistema di contrassegno - linguaggio di markup"- i cui comandi sono dei TAG di formattazione del documento (che consentono anche di inserire informazioni multimediali quali immagini, filmati, suoni, musica,etc.) interpretati ed eseguiti dai vari browser (…)

Per costruire una pagina web ci sono piattaforme evolute di web editing appartenenti alla categoria WYSIWYG, cioè… (FrontPage, Dreamweaver…) Il risultato è comunque un file HTML Un documento HTML può essere scritto usando qualsiasi editor di testo ( si suggerisce comunque l’installazione di Notepad++ ); l’importante è che quando si salva il documento si indichi come estensione.HTM o.HTML Che differenza c’è tra CONTENUTO E FORMATTAZIONE??

Un documento in formato web può essere aperto con un browser  Attraverso un collegamento a Internet (……….)  Caricandolo dal disco del proprio computer senza connettersi alla rete (………………) Sullo schermo viene visualizzata una pagina in formato grafico che è il risultato di un’elaborazione del browser che interpreta i codici contenuti nel file e li trasforma in comandi per la costruzione della pagina.

I TAG L’HTML 5 in generale non è CASE SENSITIVE (cioè?) anche se nella consuetudine i tag sono scritti in minuscolo (ad eccezione della parola chiave DOCTYPE) Tutte le istruzioni HTML (dette anche tag) sono delimitate da parentesi angolari : In HTML5 ci sono tre tipologie di tag:

GLI ELEMENTI Ogni tag definisce un elemento (element) del documento HTML Esistono vari tipi di elementi in base alla funzione:  Elementi visibili che definiscono componenti semantiche del testo (titoli, intestazioni, piè di pagina, paragrafi, ecc.)  Elementi visibili che definiscono componenti che consentono l'interazione con l'utente (link, campi che consentono l'immissione di testo, bottoni, ecc.)  Elementi visibili che servono a formattare parti di testo (grassetto, corsivo, ecc.)  Elementi visibili e non visibili che consentono l'inserimento di risorse multimediali (immagini, audio, video, ecc.)  Elementi non visibili che servono a caricare risorse funzionali necessarie alla pagina web (script, fogli di stile)  Elementi non visibili che racchiudono codice eseguibile o istruzioni di stile.

I PARAMETRI Ogni tag può avere dei parametri (o attributi) nel tag di apertura, il cui numero varia in base al tag ed anche in base al contesto: N.B: Nel file HTML gli spazi multipli e gli “a capo” vengono ignorati (si dovranno usare opportuni TAG)

Regole generali sugli attributi dei tag Per impostare il valore di un attributo, si scrive ATTRIBUTO=“valore”: immediatamente a sinistra del simbolo = (meglio senza spazi) si mette il nome dell’attributo; immediatamente a destra si mette il valore da assegnare all’attributo, incluso tra virgolette. l’impostazione degli attributi di un tag deve essere messa all’interno delle parentesi angolari, dopo il nome del tag. se si devono impostare più attributi per uno stesso tag, le impostazioni sono messe una in fila all’altra, separate da spazi, quindi con la seguente struttura: nei tag contenitori, gli attributi devono essere impostati dentro il tag iniziale.

TAG ANNIDATI In un documento HTML i tag possono essere annidati L’annidamento deve essere corretto!

INDENTAZIONE È buona norma usare i caratteri di tabulazione (tasto TAB) per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento, in modo che apertura e chiusura del tag si trovino allo stesso livello, mentre il contenuto viene spostato verso destra di un tab  procedura che si chiama INDENTAZIONE: grazie ad essa il documento risulta più leggibile. Confrontate queste due scritture che per i browser sono equivalenti:

IL W3C L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: World Wide Web Consortium  ).  Ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0….);  Allo stato attuale abbiamo a che fare con 3 versioni:  HTML4: versione consolidata e compatibile con tutti i browser  HTML 5: risponde alla necessità delle applicazioni che utilizzano la banda larga e il web 2.0 e aggiunge nuove funzionalità che possono agevolare la consultazione anche da dispositivi mobili (tablet e smartphone).  XHTML: le regole per la scrittura degli elementi sono ferree: gli elementi vuoti devono comunque avere un tag di chiusura e determinati elementi devono avere necessariamente alcuni attributi di default.

!DOCTYPE Si consiglia d'indicare nella pagina HTML il PROLOGO del tipo di documento, cioè il linguaggio utilizzato e la versione, utilizzando il tag. Il codice di base è: che specifica che la pagina è scritta in HTML. Si possono aggiungere altre informazioni riguardanti il codice, come per esempio: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional //EN” “ >  PUBLIC indica che il documento è pubblico  W3C indica che vengono utilizzate le specifiche rilasciate dal W3C  DTD HTML 4.01 Transitional (Document Type Definition) significa che il documento segue le specifiche della versione 4.01 Transitional.  EN indica che il documento è stato scritto in inglese.  Segue poi l’URL dove si trova il documento DTD con le specifiche N.B: oltre la versione 4.01 viene specificato anche il termine transitional; la versione 4.01 ammette tre specifiche differenti: Strict (versione più pura, con solo tag e attributi ufficiali e senza frame. Non ci può essere nessuna descrizione del layout), Transitional (versione più elastica in cui si può descrivere il layout della pagina e usare anche i tag «deprecated»), Frameset (indica la presenza di frame). In HTML4 il prologo è facoltativo, mentre in HTML5 è obbligatorio ed è:

I FRAME Il termine frame indica una porzione di pagina dove viene visualizzata una pagina web differente. Per esempio in una zona laterale della finestra viene visualizzato un menù e nella parte centrale i contenuti situati in altre pagine web. Questo metodo è stato superato dall’utilizzo dei fogli di stile CSS e dall’uso di Javascript, ma alcuni siti ne fanno ancora uso.

La codifica della pagina Se non si specifica la codifica corretta, può accadere che alcuni caratteri non standard, come le lettere accentate, non vengano visualizzate correttamente. Per specificare la codifica UTF-8, che contiene tutti i caratteri occidentali, si utilizza il codice: Nella versione HTML5 la dichiarazione è più concisa:

LA STRUTTURA MINIMA DI UN DOCUMENTO HTML5 Il modello di base di una pagina html è il seguente: Provate a scriverlo usando il Notepad++, poi validatelo e guardate il risultato.

Alcuni siti di riferimento: Per validare:

TITOLO Il titolo deve descrivere la pagina web e viene riportato nella barra del titolo della finestra del browser. Compare all’interno della sezione e viene racchiuso tra la coppia di tag e

META TAG Nella sezione di intestazione della pagina HTML sono inseriti anche i meta tag identificati dal tag (non ha un tag di chiusura): essi contengono i metadati della pagina, cioè informazioni sul contenuto della pagina, le parole chiave e l’autore. La struttura generale della frase è: L’attributo name raccoglie informazioni sul documento, mentre l’attributo content determina il valore da attibuire alla proprietà che lo precede. I valori più usati per l’attributo name sono:  description per la descrizione  keywords per le parole chiave (utile all’indicizzazione sui motori)  author per l’autore

Esempio La pagina di un sito Web scolastico può contenere metadati come i seguenti:

Le sequenze di escape Sono delle stringhe particolari che all’atto dell’interpretazione da parte del browser vengono tradotte con i caratteri desiderati. Una prima categoria di caratteri riguarda quelli che il linguaggio HTML utilizza per la rappresentazione dei tag, quali & o le virgolette, che verrebbero considerati come facenti parte del codice del linguaggio e perciò ignorati. Perciò si usano le sequenze: N.B: gt=….., lt=….., amp=ampersand, quote=……

Altre sequenze di escape

PER CASA ORA PROVATE A METTERE ALLA PROVA TUTTO CIÒ CHE AVETE IMPARATO!

Sitografia e bibliografia Appunti di HTML - Prof. Claudio Maccherani - Perugia [revisione 2012] Libro di testo «INFORMATICA AZIENDALE – Sistemi informativi e programmi applicativi d’ufficio per la gestione d’impresa» di Antonio De Rosa e Valerio Teta «Informatica per sistemi informativi aziendali»Agostino Lorenzi, Vittorio Moriggia. [Ilaria Baigueri] [Corso di Creazione pagine Web – Basi di programmazione HTML]