Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat

Transcript

1 Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat

2 File HTML e tag Un file HTML non è nient'altro che un puro file di testo al cui interno sono presenti delle istruzioni speciali (chiamate tag) che informano il browser su come il contenuto dovrebbe essere visualizzato. Da questo punto di vista un file HTML è molto diverso da un file binario, come potrebbe essere ad esempio un documento Word. Se ad esempio apriamo un file Word con un editor di testo come Notepad, il risultato visualizzato è un insieme di caratteri senza senso. Illustrazione 1: Un file Word aperto con Notepad

3 Se invece apriamo un file HTML con un editor di testo come Notepad, il risultato è leggibile anche ad un essere umano. Illustrazione 2: Un file HTML aperto con Notepad Per poter vedere il codice HTML di una pagina web, normalmente è sufficiente aprire la pagina con un browser, cliccare con il tasto destro sulla pagina e selezionare sul menu contestuale l'opzione appropriata per visualizzare il codice sorgente (ad esempio, "Visualizza codice sorgente" in Chrome). Provate a farlo con la homepage del sito dell'università, Ciò che si nota subito (anche grazie all'utilizzo del colore che viene fatto automaticamente dal browser) è la presenza dei cosiddetti

4 tag html, gli elementi costituiti da parole chiave racchiuse tra parentesi angolari. Senza tag, un browser non è in grado di capire come interpretare una pagina html. Proviamo ad esempio a creare un file di testo in cui inseriamo un titolo e un paragrafo di testo. Nell'editor di testo riusciamo a separare chiaramente i due elementi, strutturando quindi il nostro contenuto, ma se salviamo il file come html e lo visualizziamo in un browser, il risultato che otteniamo è un unico blocco di testo, abbiamo perso la struttura. Illustrazione 3: Esempio di file di testo Illustrazione 4: Lo stesso file aperto in un browser web Proviamo adesso ad aggiungere dei tag html per ottenere la

5 stessa struttura del file di testo originale. Il codice è il seguente (non preoccupatevi per il momento del significato dei tag): titolo paragrafo di testo Salvate il file con estensione html e visualizzatelo con il browser. Il risultato che dovreste ottenere è che avete mantenuto la struttura del file originale. Notate che i tag non vengono visualizzati. Illustrazione 5: Pagina web con la struttura del file di testo originale NOTA: Sebbene la pagina web venga visualizzata correttamente, tenete presente che questo frammento di codice html non è ben strutturato, mancando di alcuni elementi fondamentali che vedremo in seguito. Ritornando al frammento di codice visto sopra, notiamo la presenza dei tag e che racchiudono le due righe di

6 contenuto che vogliamo mostrare. Il primo è un tag di apertura ed attiva una certa funzionalità, il secondo tag di chiusura, identificato dalla barra inclinata, e disattiva l'effetto del tag di apertura. Strettamente parlando l'insieme di tag di apertura, tag di chiusura e ciò che sta nel mezzo viene identificato con il termine "elemento". In pratica ogni elemento è una specie di contenitore. I caratteri interni alle parentesi angolari determinano lo scopo del tag ed indicano al browser cosa fare a ciò che c'è nel contenitore. In questo caso, il carattere p indica che ciò che sta in mezzo ai due tag di apertura e chiusura è un paragrafo di testo e deve essere mostrato come tale. Che cosa succede se togliamo i tag di chiusura dal codice del nostro esempio? In questo caso nulla, il browser è sufficientemente intelligente da capire quando termina l'effetto di un certo tag (in questo caso, quando incontra il tag di apertura successivo). In generale però è sempre bene ricordarsi di inserire esplicitamente i tag di chiusura e non fare affidamento esclusivamente sul browser, altrimenti potrebbero generarsi situazioni in cui il contenuto viene visualizzato scorrettamente. Adesso che abbiamo appena menzionato la regola dei tag di apertura e chiusura, introduciamo una classe di elementi che non ne fa uso, i cosiddetti elementi vuoti ("empty elements"). Tali elementi consistono in un tag unico che ha tipicamente come scopo inserire qualcosa in una pagina piuttosto che dare indicazioni su come gestire un particolare contenuto. Un esempio è l'elemento che aggiunge

7 un'interruzione di riga in una pagina. In XHTML era obbligatorio inserire tale elemento con una barra inclinata prima della parentesi angolare chiusa, cioè . In HTML5, tale obbligo è scomparso. Il frammento seguente utilizza l'elemento titolo testo normale con interruzione di riga. E' possibile innestare un elemento html all'interno di un altro elemento, come nel seguente frammento di codice titolo testo normale. testo evidenziato. Testo normale. Il tag indica al browser di mettere in evidenza il testo fino al corrispondente tag di chiusura. Normalmente i browser interpretano tale tag mettendo il testo in grassetto (e fino ad HTML5 questo tag voleva in effetti dire bold). Laddove ci siano tag innestati come in questo caso, è buona norma chiudere i tag nell'ordine inverso rispetto a quello con cui sono stati aperti, evitando ad esempio combinazioni come . Sebbene normalmente i browser siano in grado di interpretare correttamente la vostra intenzione, potrebbero generarsi problemi se non seguite questa regola. E' anche possibile innestare un elemento direttamente all'interno di un altro elemento come nel seguente esempio:

8 titolo testo normale. testo in grassetto e corsivo. Testo normale. Nell'esempio abbiamo racchiuso l'elemento all'interno dell'elemento che visualizza il contenuto in corsivo (In HTML5, questo elemento indica che il testo è in una voce diversa rispetto al resto, ad esempio un termine tecnico o latino). Il risultato è che il testo è sia grassetto che corsivo. Un aspetto importante degli elementi è che essi possono essere di tipo blocco, come , o di tipo inline, come . I browser interpretano gli elementi di tipo blocco come se fossero dei box rettangolari posizionati uno sopra l'altro sulla pagina. Ogni elemento inizia su una nuova riga ed il browser normalmente aggiunge dello spazio prima e dopo l'elemento. Gli elementi inline vengono invece inseriti all'interno del flusso del testo, non iniziano su una nuova riga e non hanno spazio aggiuntivo intorno ad essi. La distinzione tra i due tipi di elementi è importante perchè porta a delle differenze di comportamento, ad esempio nell'applicazione del CSS. Dovrebbe anche non essere possibile inserire un elemento blocco all'interno di un elemento inline ma a quanto pare i browser riescono comunque ad interpretare il codice. Un altro aspetto importante dei tag è che essi possono contenere degli attributi che forniscono informazioni addizionali relative al contenuto di un elemento. Gli attributi vengono inseriti all'interno del tag di apertura di un elemento e sono costituiti da due parti, un nome ed un

9 valore, separate da un segno di uguale. Un esempio è il seguente: titolo testo in Italiano. Il nome dell'attributo indica il tipo di informazione extra che stiamo fornendo ed è preferibile sia scritto in minuscolo. Il valore dell'attributo è l'informazione o parametro associato all'attributo ed è preferibile sia inserito tra doppie virgolette. In questo esempio, l'attributo specifica il linguaggio utilizzato nell'elemento. E' possibile inserire più di un attibuto per elemento, separati da uno spazio. Alcuni elementi richiedono obbligatoriamente l'inserimento di attributi. La maggior parte degli attributi possono essere utilizzati solo per alcuni elementi specifici e possono assumere solo un certo insieme di valori (o un certo formato). NOTA: e se volessi visualizzare una parentesi angolare (simbolo di maggiore o minore) nel testo? In tal caso, è necessario utilizzare dei simboli speciali, in particolare < per il minore e > per il maggiore. Che cosa viene ignorato dai browser I browser ignorano alcune delle informazioni che inserite all'interno delle pagine html. In particolare, vengono ignorate le interruzioni di riga create andando a capo, le

10 tabulazioni e gli spazi bianchi multipli (viene considerato sempre un solo spazio bianco), markup non riconosciuto (il risultato può essere variabile), commenti. In html i commenti vengono inseriti utilizzando i tag speciali . Un commento può anche coprire più righe di codice. Normalmente, un commento viene utilizzato per documentare un pezzo di codice. Struttura di un documento HTML Tutti gli esempi che abbiamo visto finora erano solo frammenti di codice html. Anche se il browser riusciva a visualizzarli correttamente, non contengono gli elementi che tradizionalmente costituiscono un documento html di base. Il primo elemento che un browser si aspetta di trovare in un documento html è il cosiddetto doctype (document type definition) ossia un codice che identifica il tipo di markup (in pratica, le versione di HTML) che è stato utilizzato per scrivere il documento. In presenza di doctype, il browser entra in modo standard e cerca di visualizzare la pagina nel modo più coerente e standardizzato possibile, mentre se il doctype non è definito può succedere qualunque cosa. Alcuni browser ad esempio entrano in una modalità compatibilità che cerca di comportarsi come i browser di anni fa, in modo da supportare vecchio codice che sfruttava funzionalità ora non più presenti o modificate.

11 La maggior parte degli sviluppatori usa oggi il doctype HTML5 che è definito nel modo seguente: <!DOCTYPE html> In confronto, il seguente è il doctype per XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Tenete presente che potete specificare il doctype HTML5 anche se non usate alcuna delle nuove funzionalità del linguaggio. Per un browser, l'importante è che ci sia un doctype non quale sia. Successivamente al doctype, un documento html tipicamente contiene tre elementi di tipo contenitore: <html>, <head> e <body>. L'elemento <html> viene utilizzato per specificare che tutto ciò che c'è al suo interno è codice html e tipicamente racchiude tutto il codice, tranne il doctype. L'elemento <head> viene utilizzato per specificare alcune informazioni opzionali relative alla pagina web, come titolo, parole chiave, fogli di stile, etc. L'elemento <body> racchiude tutto il contenuto che deve essere mostrato sulla finestra del browser. C'è un solo modo per combinare questi elementi in una pagina web:

12 <!DOCTYPE html> <html> <head>... </head> <body>... </body> </html> All'interno dell'elemento <head> viene tipicamente inserito un elemento <title> che serve a specificare il titolo della pagina. I browser visualizzano il titolo sulla barra del titolo oppure sulle tab. Il titolo è ciò che viene utilizzato quando viene salvato un bookmark di una pagina. Inoltre, il titolo è ciò che viene mostrato, assieme ad un pezzo di contenuto, quando la pagina web viene inserita all'interno dei risultati di un motore di ricerca. <!DOCTYPE html> <html> <head> <title> Titolo della pagina </title> </head> <body> Contenuto della pagina </body> </html> Tenete presente che gli elementi sopra descritti sono opzionali per HTML5 anche se è fortemente consigliato inserirli in ciascuna pagina. Se prendiamo uno dei frammenti di codice precedenti e lo ispezioniamo con il

13 browser (ogni browser ha un meccanismo per ispezionare la struttura effettiva della pagina web), notiamo come siano comunque presenti questi elementi.