BASI html per esame di informatica I, Dispense di Elementi di Informatica

Scarica BASI html per esame di informatica I e più Dispense in PDF di Elementi di Informatica solo su Docsity!

Claudia Picar di

Tutorial di HTML

basato su HTML 4 .0 e CSS 2

Infor matica II per Scienze e Tur ismo Alpino

Docenti: Viviana Patti e Claudia Picar di

1111 Cos’è HTMLCos’è HTMLCos’è HTMLCos’è HTML

HTML (HyperText Markup Language) è un linguaggio che serve a specificare la formattazione di documenti ipertestuali, che possano essere pubblicati sul World Wide Web e quindi visualizzati da altre persone tramite programmi appositi detti browser_._

1.11.11.11.1 la formattazione del testola formattazione del testola formattazione del testola formattazione del testo

Testo semplice e testo formattato

Partiamo da un assunto: il testo che ci circonda, il testo che leggiamo, che troviamo in libri, giornali, pubblicità, anche in queste dispense, è sempre testo formattato. Solitamente è scritto con un particolare font di caratteri (in questo caso “Verdana”), ha una dimensione ( punti), a volte è in grassetto , a volte in corsivo , a volte colorato (difficile da riprodurre con una stampante in bianco e nero!). Inoltre spesso è organizzato in una o più colonne, che hanno una dimensione ben precisa. Può contenere immagini e tabelle. Tutte queste caratteristiche fanno parte della formattazione del testo. Per definire in modo più formale cosa sia il testo formattato, è più semplice partire dal suo opposto, il testo semplice , che di fatto esiste solo nel mondo astratto del computer. Possiamo definire un testo semplice come una sequenza di caratteri che può contenere lettere maiuscole e minuscole, cifre, punteggiatura, anche simboli, insomma praticamente qualsiasi carattere che sia digitabile su una tastiera, ma che sia spogliato di qualunque attributo relativo alla sua visualizzazione e/o stampa. Perché un testo semplice può esistere solo nella memoria del computer? Perché nel momento in cui noi vediamo il testo, esso deve pur avere qualche attributo di visualizzazione. Non è possibile riprodurre un testo senza per lo meno decidere con che forma e dimensione devono essere visualizzati i caratteri che lo compongono. Perfino se il testo viene letto ci può essere una forma di formattazione: chi legge può alzare la voce, o cambiarne il tono. Con una ragionevole approssimazione possiamo dire che il testo semplice si trova scritto nella memoria del computer così com’è ; se potessimo aprire la memoria e leggervi dentro potremmo vedere i caratteri che compongono il nostro testo^1. In queste dispense quando vorremo mostrare del testo semplice, lo visualizzeremo nel modo seguente:

Questo è testo semplice – non fatevi ingannare dalle apparenze!

Il testo formattato, invece, non può essere scritto nella memoria del computer così com’è. Infatti nella memoria devono esserci scritte insieme al testo anche le informazioni relative alla formattazione, perché il testo possa venire visualizzato opportunamente. In questo caso, se aprissimo la memoria e vi leggessimo dentro, magari vedremmo scritto il nostro testo, ma mescolato ad altre informazioni, non necessariamente comprensibili a noi, ma comprensibilissime per il programma con cui abbiamo creato quel testo. In generale ogni programma sceglie come memorizzare le informazioni relative alla formattazione del testo; il modo in cui queste informazioni vengono memorizzate costituisce il formato del documento. Per creare documenti di testo semplice esistono gli editor di testo semplice (esempio: il Blocco Note di Windows). Le loro caratteristiche principali sono le seguenti:

• memorizzano il testo nel computer come testo semplice.
• quando leggono dalla memoria del computer interpretano ciò che leggono come testo semplice (ossia, sempre con una ragionevole approssimazione, ci fanno vedere ciò che hanno letto dalla memoria così com’è).
• per mostrarci il testo devono visualizzarlo scegliendo un particolare font con una particolare dimensione, ma questi parametri sono identici per tutto il testo, e agli utenti non è permesso specificare nessun tipo di formattazione per il testo.
• alcuni editor più avanzati permettono di specificare delle opzioni di visualizzazione del testo (ad es. il font da usare, la dimensione dei caratteri, il colore) per facilitare la

(^1) In realtà nella memoria di un computer possono essere memorizzati soltanto numeri. Per questa ragione è stata stabilita una codifica convenzionale (detta codice ASCII) che associa a ciascun carattere un numero: al posto del carattere viene scritto nella memoria del computer il numero corrispondente. I programmi che visualizzano il testo effettuano l’operazione inversa, ossia leggono il numero e visualizzano il carattere corrispondente.

• c’è anche molta più libertà nella scelta del programma con cui visualizzare il testo; innanzitutto ciascuno può usare il visualizzatore che preferisce, inoltre se non si dispone di un visualizzatore si può leggere il documento con un editor di testo semplice, ignorando le annotazioni.

1.21.21.21.2 HTML: HyperText Markup LanguageHTML: HyperText Markup LanguageHTML: HyperText Markup LanguageHTML: HyperText Markup Language

Come già detto, HTML significa HyperText Markup Language ed è quindi un linguaggio di annotazione. In base a quanto detto prima questo ci dà già alcune informazioni:

• per chi li scrive, i documenti HTML sono documenti di testo semplice, in cui le informazioni sulla formattazione sono scritte a mano sotto forma di annotazioni. Chi scrive un documento HTML non vede la formattazione che applica al documento, vede solo le annotazioni che egli stesso ha scritto.
• i documenti HTML vengono visualizzati con un programma specifico per la visualizzazione, che in questo caso è il browser. Esso interpreta le annotazioni scritte nel documento e lo visualizza con la formattazione appropriata. Se mentre scriviamo un documento HTML vogliamo vedere come verrà visualizzato, dobbiamo disporre di un browser. Notiamo che in questo caso è fondamentale che i programmi per scrivere e per leggere il documento siano diversi: nessuno vorrebbe pubblicare i propri documenti sul Web e vederseli modificati da qualcun altro! HTML non è però un markup language qualunque. Preciseremo ora le sue caratteristiche a partire dalle parole che compongono il suo nome.

Markup: le annotazioni

HTML è nato con la seguente idea: utilizzare le annotazioni non tanto per specificare le esatte impostazioni di visualizzazione grafica, quanto i contenuti del documento, e demandare al visualizzatore – il browser – la scelta di come visualizzarlo. Tutto questo risulta comprensibile con un esempio: riprendiamo il testo annotato visto precedentemente:

{testo centrato, 20 punti}Relazione trimestrale {testo giustificato, 12 punti}Nel primo trimestre del 2001 il gruppo di ricerca diretto dal prof. Verdi ha {corsivo}raggiunto{fine corsivo} gli obiettivi specificati.

In questo caso le annotazioni specificano esattamente come il testo deve essere visualizzato. Nel caso dell’HTML avremo qualcosa più simile a:

{titolo}Relazione trimestrale{fine titolo} {testo}Nel primo trimestre del 2001 il gruppo di ricerca diretto dal prof. Verdi ha {importante}raggiunto{fine importante} gli obiettivi specificati.

Resta al browser il compito di stabilire come visualizzare un titolo – presumibilmente sarà centrato, e più grande del testo normale – così come il modo di visualizzare le informazioni importanti, che potrebbero essere visualizzate in grassetto così come in corsivo. La potenza di questa idea sta nel fatto che separa la rappresentazione grafica dal suo significato: quando noi scriviamo un testo, e ne ingrandiamo una parte, spesso quello che ci interessa non è il fatto che quel testo sia scritto più in grande, ma sottolineare l’importanza di quella parte. Ecco alcuni esempi in cui questa separazione può tornare utile:

• una persona non vedente potrebbe disporre di un browser audio, che “legga” le informazioni. Un browser del genere potrebbe sfruttare una informazione sul contenuto leggendo in modo diverso, ma per esso una informazione sulla visualizzazione sarebbe del tutto inutile.
• alcune impostazioni di visualizzazione non sono sempre applicabili; ad esempio un testo in rosso non si distingue dal resto su un monitor in bianco e nero. In questo modo si possono evitare queste situazioni.
• un motore di ricerca, che deve scandire i testi per trovare informazioni, potrebbe sfruttare le informazioni sul contenuto; ad esempio per portare avanti la ricerca più rapidamente potrebbe scandire solo i titoli, o le informazioni indicate come importanti. In realtà HTML permette sia di utilizzare le annotazioni per specificare le impostazioni di visualizzazione, sia per specificare i contenuti. Volendo rispettare la filosofia con cui il linguaggio è stato creato bisognerebbe dare la precedenza al secondo tipo di annotazioni, ciò

nonostante in alcuni casi può essere necessario dare delle impostazioni un po’ più precise. Scrivendo documenti con HTML è comunque sempre necessario ricordare che ciascun browser potrebbe visualizzare il testo in modo leggermente diverso, ed eventualmente ignorare impostazioni di visualizzazione che esso non sia in grado di riprodurre. Quando si usano le annotazioni per specificare le impostazioni di visualizzazione (e non per specificare i contenuti) bisogna pertanto fare attenzione al fatto che il loro mancato rispetto non renda la pagina illeggibile. Torneremo comunque su questo discorso quando descriveremo le annotazioni più in dettaglio.

Language: un linguaggio formale

HTML è un linguaggio formale: questo significa che è definito con regole molto precise (che costituiscono la sintassi del linguaggio), che devono essere rigorosamente rispettate. Infatti è fatto per essere interpretato dal browser, che essendo un programma non ha praticamente nessuna flessibilità. Tali regole riguardano:

• quali annotazioni è possibile inserire
• come tali annotazioni devono essere scritte
• in caso di annotazioni combinate, come devono essere combinate tra loro. Dalla nascita dell’HTML ad oggi il linguaggio si è evoluto, e le regole sono in parte cambiate. L’ente che si occupa della definizione e dell’evoluzione dell’HTML è il W^3 C (World Wide Web Consortium), ma di questo parleremo un po’ più diffusamente quando conosceremo meglio l’HTML. Ci limitiamo a sottolineare che esiste uno standard HTML, e che esiste un consorzio che si occupa della sua definizione e del suo aggiornamento. Sebbene il W^3 C specifichi molto precisamente le regole dell’HTML, bisogna tener conto anche delle ditte che producono i browser : non sempre – anzi quasi mai! – questi ultimi vengono aggiornati per tenere conto delle ultime novità introdotte dal W^3 C, pertanto utilizzare nei propri documenti HTML “l’ultimo ritrovato” del W 3 C può non essere una buona idea, in quanto molti browser – sicuramente quelli più vecchi – potrebbero non essere in grado di interpretare le annotazioni da noi inserite nel documento. Quando un browser incontra una annotazione che non conosce (magari perché abbiamo sbagliato a scriverla), ha davanti sostanzialmente due scelte: se è un browser “tollerante” può semplicemente ignorarla, e visualizzare il testo come se essa non esistesse; se è un browser “rigido” invece può decidere di non visualizzare ciò che resta del documento, o addirittura di non visualizzare nulla. Ci sono browser in commercio di entrambe le categorie, quindi è meglio fare attenzione, non solo a non commettere errori, ma anche a non usare annotazioni troppo nuove che i browser potrebbero non conoscere. Viceversa, a volte le ditte produttrici di browser li rendono capaci di interpretare delle annotazioni “inventate” da loro, che non fanno parte dello standard stabilito dal W^3 C. In questo caso ciò che succede è che l’annotazione in questione viene interpretata correttamente solo da un browser, mentre crea problemi in tutti gli altri (diversi, a seconda del grado di “tolleranza”). Anche in questo caso occorre fare molta attenzione: è opportuno evitare di usare queste annotazioni!

HyperText: documenti ipertestuali

I documenti scritti in HTML hanno una particolarità: possono essere documenti ipertestuali. In un documento tradizionale è possibile leggere il testo soltanto in una direzione; i documenti ipertestuali hanno una dimensione in più: da certi punti di essi è possibile “saltare” ad un’altra parte del documento, o addirittura ad un documento diverso. Questo ha una certa analogia con alcune situazioni presentate nei romanzi di fantascienza, dove con un “balzo iperspaziale ” è possibile spostarsi istantaneamente da un luogo all’altro dello spazio, senza dover percorrere la strada che separa i due punti. In HTML questa possibilità è fornita dai link (collegamenti): parole speciali che, se attivate, conducono verso altre parti del testo o altri testi. A chi legge resta la scelta se seguire il link, o proseguire nella direzione tradizionali. I browser più comuni evidenziano i link sottolineando le parole che li compongono, e permettono l’attivazione di un link attraverso il click del mouse su tali parole. Questa però è solo una scelta: sarebbe possibile seguire altre strade; ad esempio un browser audio potrebbe segnalare un link con un campanello, e il link potrebbe essere attivato pronunciandone le parole che lo compongono.

Questa parte del corso si concentra sulla scrittura manuale dei documenti HTML, mentre in una parte successiva si vedrà l’utilizzo di un editor WYSIWYG, Dreamweaver. Si vedrà allora come un editor di questo tipo faciliti grandemente la maggior parte delle operazioni, ma anche come per usarlo al pieno delle sue funzionalità sia necessario aver prima imparato a scrivere documenti HTML “a mano”.

TAG: le annotazioni in HTML

Abbiamo detto che in un documento HTML il testo^2 è corredato di annotazioni che specificano – in modo più o meno diretto – come quel testo deve essere visualizzato. In HTML le annotazioni sono dette tag (che in inglese significa contrassegno ). Per distinguere le annotazioni dal testo esse devono sempre essere racchiuse tra parentesi angolari: ‘<’ e ‘>’. Tutto ciò che non si trova tra parentesi angolari viene interpretato dal browser come testo da visualizzare; tutto ciò che si trova tra parentesi angolari viene interpretato dal browser come una informazione sulla formattazione del testo. Quindi bisogna fare molta attenzione all’uso dei simboli ‘<’ e ‘>’. Ciascun tag ha un nome , solitamente scritto in lettere maiuscole, che identifica univocamente il significato di quel tag. Ad esempio il tag dal nome TITLE denota il titolo di un documento, il tag dal nome EM (da EMphasis ) denota una parte importante del testo, il tag dal nome HR indica una linea orizzontale. Possiamo dividere i tag in due categorie:

• i tag vuoti sono formati semplicemente dal loro nome, racchiuso tra parentesi angolari: . Solitamente servono ad inserire qualcosa (ad esempio, una linea orizzontale) all’interno del testo, e la loro posizione specifica dove inserire la linea.
• i tag contenitori sono formati da un tag iniziale , seguito da una porzione di testo, seguito da un tag finale. Il tag iniziale ha esattamente la forma di un tag vuoto: il nome del tag racchiuso fra parentesi angolari. Il tag finale è invece costituito da una parentesi angolare aperta ‘<’, seguita da una barra ‘/’, seguita dal nome del tag ed infine dalla parentesi angolare chiusa ‘>’. Un esempio di tag contenitore è formato dalla coppia : il primo è il tag iniziale, il secondo è il tag finale. Solitamente questi tag servono a specificare un’informazione relativa al testo che si trova racchiuso fra di essi: ad esempio Prima Pagina ci dice che il testo “Prima Pagina” costituisce il titolo del documento. Quando si usa un tag contenitore bisogna sempre ricordarsi di chiuderlo con l’appropriato tag finale. Ciascun tag utilizzato all’interno del documento definisce un elemento del documento stesso; ad esempio nel caso del tag l’elemento definito è la linea orizzontale, mentre nel caso del tag l’elemento definito è il titolo della pagina.

Un primo esempio di documento HTML

Vediamo un primo esempio di documento HTML:

<HTML> <HEAD> <TITLE>Programma del corso di HTML

Nella prima parte del corso si introdurrà il linguaggio HTML spiegando su che principi esso è basato e quali sono le idee di fondo. Si passerà quindi alla descrizione della struttura di un documento HTML, e in seguito alla descrizione dei tag per la formattazione del testo. Le dispense sono scritte da Claudia Picardi.

Figura 1.1: un semplice documento HTML, file [semplice.html]

Alcune osservazioni iniziali su questo esempio:

(^2) Nel seguito chiameremo documento il testo corredato dai tag che ne specificano la formattazione, ossia tutto ciò che viene scritto con l’editor e salvato in un file. Chiameremo invece testo il contenuto del documento, annotazioni escluse, ossia ciò che il browser visualizzerà.

• si possono notare numerosi tag contenitori: , , , <BODY> 3 , ed un tag vuoto: <HR>.
• se consideriamo il testo racchiuso all’interno del tag <HTML>, vediamo che in esso compaiono altri tag, ad esempio <HEAD> e <BODY>. In questo caso si dice che i tag <HEAD> e <BODY> sono interni rispetto al tag <HTML>. Analogamente il tag <TITLE> è interno rispetto al tag <HEAD>. Più formalmente, un tag contenitore T 1 si dice essere interno rispetto ad un secondo tag contenitore T 2 se: a) il tag iniziale di T 1 viene dopo il tag iniziale di T 2 b) il tag finale di T 1 viene prima del tag finale di T 2 ossia la situazione è questa: <T 2 >…<T 1 >…</T 1 >…</T 2 > Viceversa, T 1 si dice essere esterno rispetto a T 2 se: a) il tag iniziale di T 1 viene prima del tag iniziale di T (^2) b) il tag finale di T 1 viene dopo il tag finale di T 2 ossia: <T 1 >…<T 2 >…</T 2 >…</T 1 > Le situazioni intermedie, come <T 1 >…<T 2 >…</T 1 >…</T 2 >, non sono ammesse: se T 2 viene aperto dentro a T 1 , deve essere anche chiuso dentro a T 1. Naturalmente due tag possono essere completamente indipendenti, ossia avere i tag iniziali e finali disposti nel modo seguente: <T 1 >…</T 1 >…<T 2 >…</T 2 > Esercizio 2. Per ogni coppia T 1 ,T 2 di tag contenitori presenti nell’esempio, indicare se T 1 è interno, esterno o indipendente da T 2.

Cerchiamo ora di capire cosa significano i tag che compaiono nel nostro esempio.

il tag <HTML>

Come già detto, <HTML> è un tag contenitore e il suo scopo è racchiudere l’intero documento HTML ; pertanto qualsiasi documento HTML deve aprirsi con il tag iniziale <HTML> e chiudersi con il tag </HTML>. In questo modo il documento che scriveremo sarà ulteriormente identificato come documento HTML. In generale un browser riconosce un documento HTML dal fatto che il file in cui esso è salvato ha l’estensione “.html” o “.htm”. Tuttavia nulla ci impedirebbe di creare un file che si chiami “pippo.html” e che contenga al suo interno tutt’altro che un documento HTML. La presenza del tag <HTML> fornisce un’ulteriore garanzia sul contenuto del file. Da quanto abbiamo detto precedentemente, segue anche che <HTML> è esterno rispetto a tutti gli altri tag.

il tag <HEAD>:

Il tag contenitore <HEAD> racchiude l’ intestazione del documento HTML. Nell’intestazione, ossia fra il tag iniziale <HEAD> e il tag finale </HEAD>, non può essere inserito direttamente del testo: possono essere inseriti soltanto altri tag. La Tabella 1.1 mostra tutti i tag che possono comparire all'interno di <HEAD>; tuttavia c’è un solo tag che deve comparire nell’intestazione, e si tratta di <TITLE>.

TAG: Descrizione: <BASE> Imposta l’URL di base del documento, utilizzata per risolvere i riferimenti relativi <ISINDEX> deprecato. Visualizza un campo di testo per permettere all’utente di cercare delle informazioni nel documento <LINK> Stabilisce un collegamento fra il documento corrente ed un altro documento nel Web. <META> Serve a fornire informazioni aggiuntive sul documento. <STYLE> Permette di specificare uno stile per definire la formattazione del documento. <SCRIPT> Contiene una o più funzioni definite in un linguaggio di scripting (ad esempio, JavaScript). <TITLE> Tag obbligatorio, definisce il titolo della pagina che comparirà nella barra del titolo del browser.

Tabella 1.1: descrizione sintetica dei tag che possono apparire nell'intestazione

il tag <TITLE>

Il tag contenitore <TITLE> può comparire soltanto nell’intestazione del documento HTML, e non può mancare. Esso identifica il titolo del documento: nel browser tale titolo non comparirà

(^3) Per semplicità indicheremo i tag contenitori soltanto con il tag di apertura.

Programma del corso di HTML

Nella prima parte del corso si introdurrà il linguaggio HTML spiegando su che principi esso è basato e quali sono le idee di fondo. Si passerà quindi alla descrizione della struttura di un documento HTML, e in seguito alla descrizione dei tag per la formattazione del testo. Le dispense sono scritte da Claudia Picardi.

Figura 1.3: versione indentata di [semplice.html]

In questo caso un tag contenitore viene spezzato su più righe così:

• il tag iniziale su una riga a sé;
• il contenuto del tag su una o più righe, indentate rispetto al tag iniziale (ossia spostate a destra di un [TAB]) ;
• il tag finale su una riga a sé, allineato con il tag iniziale. Questa tecnica è praticamente obbligatoria per i programmatori (non utilizzarla equivale a scrivere con una calligrafia incomprensibile), pertanto è consigliabile abituarsi ad usarla – o per lo meno capirne il meccanismo – con l’HTML, che non essendo un linguaggio di programmazione è più semplice. Proprio perché si tratta di una tecnica molto diffusa, gli editor di testo semplice più avanzati ne semplificano l’applicazione allineando automaticamente ciascuna nuova riga con la precedente. In questo modo non è necessario ripetere i caratteri di tabulazione all’inizio di ogni riga, cosa che invece si è costretti a fare ad esempio con il Blocco Note.

Il tag : versioni diverse di HTML

Il linguaggio HTML ha subito nel tempo varie modifiche. In particolare sono state rilasciate quattro versioni di HTML, quella attuale è quindi la versione 4.0. Il W^3 C rilascia nuove versioni di HTML quando ha raccolto un certo numero di modifiche che ritiene opportuno apportare al linguaggio: queste modifiche possono riguardare l’aggiunta o la rimozione di tag ed attributi. In realtà i tag e gli attributi non vengono mai rimossi dal linguaggio, altrimenti tutti i documenti HTML che utilizzano una versione precedente diventerebbero invalidi: i tag e gli attributi vengono semplicemente dichiarati deprecati , ossia si sconsiglia a chi scrive i documenti di utilizzarli, ma si richiede ai browser di continuare a supportarli. Solo tag deprecati ormai da molto tempo, e che si può supporre siano ormai molto poco presenti all’interno delle pagine web, vengono dichiarati obsoleti : i browser possono non riconoscere più i tag obsoleti, pertanto in questo caso si deve proprio evitare di utilizzarli nei documenti HTML. In generale è difficile che i browser siano conformi all’ultima versione di HTML; in particolare è difficile che essi siano in grado di riconoscere i nuovi tag introdotti. In generale conviene:

• evitare di usare i tag deprecati dall’ultima versione
• evitare anche i tag introdotti nell’ultima versione In questo modo il nostro documento sarà visualizzato correttamente dai browser, e continuerà ad esserlo anche quando i tag deprecati diventeranno obsoleti. Naturalmente dovendo scegliere meglio creare un documento che sia visualizzato correttamente adesso, piuttosto che un documento che verrà visualizzato correttamente solo in futuro; quindi in generale è “meno peggio” usare un tag deprecato che uno nuovissimo. Nel seguito eviteremo di descrivere i tag deprecati, mentre specificheremo sempre quando un tag risale solo all’ultima versione. In alcuni casi viene richiesto di specificare all’interno di un documento HTML quale versione si sta usando: questo risulta particolarmente utile agli amministratori di siti Web che contengono molte pagine, create da persone diverse in momenti diversi. In questi casi per l’amministratore è importante poter stabilire velocemente quali pagine sono eventualmente da aggiornare perché create con una versione troppo vecchia.

Per specificare la versione di HTML che si sta usando si può usare il tag : si tratta di un tag vuoto che deve essere posto nella prima riga del documento. A questo punto diremo solo che per specificare che si sta usando la versione HTML 4.0 si deve scrivere:

Come si vede il tag ha una struttura un po’ diversa dagli altri; questo è dovuto anche al fatto che non viene considerato dal browser ma serve solo a fornire informazioni aggiuntive sul documento. La scritta “-//W3C//DTD HTML 4.0//IT” specifica che si sta usando la versione 4.0 della specifica HTML per l’italiano. “http://www.w3.org/TR/REC-html40/frameset.dtd” è invece l’indirizzo Web a cui tale specifica può essere reperita. Eventuali software in grado di verificare automaticamente la correttezza di un documento HTML possono usare tale indirizzo per reperire la specifica e fare riferimento ad essa nel verificare il documento. Anche se abbiamo detto che i browser in circolazione attualmente non si conformano ancora alla versione 4.0 di HTML, possiamo tranquillamente dichiarare di stare usando tale versione all’interno del tag : questo proprio perché non si tratta di un tag utilizzato dal browser. È importante comunque tener presente che dichiarare con che si utilizza una particolare versione di HTML equivale a prendere un impegno che va rispettato: non siamo obbligati ad usare i tag nuovi – anzi abbiamo visto che è meglio non farlo – ma dobbiamo evitare di usare i tag deprecati. Se non possiamo fare a meno di usarli, meglio dichiarare con una versione precedente.

1.41.41.41.4 Gli attributi dei TAGGli attributi dei TAGGli attributi dei TAGGli attributi dei TAG

Cosa sono gli attributi e come si specificano

Ciascun tag di HTML ha degli attributi che è possibile impostare a valori specifici, in modo da controllare meglio il comportamento del tag stesso. Prendiamo ad esempio il tag , che disegna una linea orizzontale. Nell’esempio che abbiamo visto, la riga orizzontale partiva dal lato sinistro della finestra, ed andava fino al lato destro. Il tag ha un’attributo WIDTH ( larghezza ) che serve a specificare la larghezza della riga. Se noi non specifichiamo nessun valore per tale attributo, la riga attraversa tutta la finestra, ossia ha una larghezza del 100%: infatti 100% è il valore predefinito (o valore di default ) per l’attributo WIDTH del tag . Naturalmente è possibile specificare un valore diverso per l’attributo WIDTH, che può essere espresso sia in percentuale (ad esempio se fosse 50% la riga occuperebbe solo metà della larghezza della finestra), sia in numero di pixel (ad esempio se fosse 50 pixel la riga occuperebbe esattamente 50 pixel di larghezza). Nel primo caso la riga cambia larghezza qualora la finestra venga ingrandita rimpicciolita; nel secondo caso ha una larghezza fissa. Per impostare il valore dell’attributo WIDTH, invece che scrivere semplicemente , scriviamo:

Più in generale abbiamo le seguenti regole:

• 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. Il nome dell’attributo può essere sia in lettere maiuscole, sia in lettere minuscole. Molti usano le lettere minuscole per distinguere i nomi degli attributi dai nomi dei tag.

• 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.

2222 Formattare il testo con HTMLFormattare il testo con HTMLFormattare il testo con HTMLFormattare il testo con HTML

2.12.12.12.1 Testo strutturatoTesto strutturatoTesto strutturatoTesto strutturato

Paragrafi

Normalmente un testo è suddiviso in uno o più paragrafi : un paragrafo inizia sempre su una nuova linea e termina con un carattere di “a capo”; i tipografi usano il simbolo ¶ per evidenziare la fine di un paragrafo. Molto spesso quando il testo viene formattato i paragrafi vengono separati visivamente l’uno dall’altro con alcuni accorgimenti: a volte la prima riga viene fatta rientrare leggermente, altre viene lasciato uno spazio maggiore fra l’ultima riga di un paragrafo e la prima del successivo. A volte vengono fatte entrambe le cose, a volte nessuna delle due (ad esempio in questo documento). In quest’ultimo caso l’unico indizio della fine di un paragrafo è il carattere di “a capo”. Ad esempio è ragionevole pensare che questa frase sia in un paragrafo a sé stante. Vediamo adesso cosa succede in HTML. Consideriamo il documento in Figura 2.1.

Paragrafi???

Questo documento deve servire di esempio relativamente ai paragrafi. Abbiamo detto nel testo che un paragrafo finisce quando incontra un "a capo". Quindi qui iniza un nuovo paragrafo. O no?

Figura 2.1: esempio di testo con due paragrafi... o no? [par.html]

Evidentemente l’autore di questo documento si aspetta che dove compare il carattere di “a capo” termini un paragrafo e ne inizi un altro. In Figura 2.2 si può vedere come un browser visualizza il lo stesso documento.

Figura 2.2: visualizzazione in un browser di [par.html]

Il browser visualizza il testo non solo in un unico paragrafo, ma anche senza alcun carattere di “a capo”. La ragione per questo è che la specifica di HTML prevede che i caratteri di “a capo” e tutti gli spazi aggiuntivi fra le parole vengano ignorati. Per specificare l’inizio e la fine dei paragrafi che compongono il testo è necessario usare il tag

il tag

Il tag

è un tag contenitore che serve a specificare i paragrafi che compongono il testo. Ciascun paragrafo deve cominciare con il tag iniziale

e terminare con il tag finale

.

La figura Figura 2.3 mostra una versione corretta del documento precedente, e la sua visualizzazione in un browser.

Paragrafi!!!

Questo documento deve servire di esempio relativamente ai paragrafi. Abbiamo detto nel testo che un paragrafo finisce quando incontra un "a capo".

Quindi qui iniza un nuovo paragrafo. Oh, yes!

Figura 2.3: esempio corretto di testo con due paragrafi [parok.html]

Esercizio 6. Provare a rispondere alle seguenti domande: (1) pensando a quanto abbiamo detto sinora dell’HTML, quale è un buon motivo per richiedere che i paragrafi siano specificati dal tag

? (2) e quale può essere un buon motivo per stabilire la convenzione di ignorare i caratteri di “a capo”? (3) nel primo esempio, non avevamo usato il tag

; cosa ne è in quel caso dei paragrafi?

Ci sono alcuni tag che non possono essere posti internamente al tag

. La ragione è che questi tag introducono necessariamente una interruzione di paragrafo: pertanto se abbiamo aperto il tag

ed intendiamo usare uno di questi tag, dobbiamo prima necessariamente inserire il tag finale

. Se dimentichiamo di inserirlo, possono succedere cose diverse a seconda del browser. Alcuni browser davanti ad un tag che interrompe un paragrafo lo chiudono automaticamente, anche se

non è presente. Altri possono visualizzare erroneamente la pagina. Pertanto è sempre opportuno ricordarsi di chiudere un paragrafo. La Tabella 2.1 elenca i tag che non possono comparire all’interno di

.

Tabella 2.1: tag che non possono essere usati dentro

attributo ALIGN di

Il tag

definisce l’attributo ALIGN, che permette di specificare l’allineamento del paragrafo. L’attributo ALIGN di

può assumere uno dei seguenti valori: “LEFT” per l’allineamento a sinistra, “RIGHT” per l’allineamento a destra, oppure “CENTER” per l’allineamento centrato. Il valore predefinito è “LEFT”.

Esercizio 7. Si osservi il documento HTML in Figura 2.4. Cosa visualizzarà il browser?

numerazione dei titoli (tipo Capitolo 1 , Sezione 1.2 ) ma è previsto di introdurla in una futura versione. La Figura 2.6 mostra come i titoli di diversi livelli vengono visualizzati da un browser.

Figura 2.6: titoli di diversi livelli [titoli.html]

All’interno del tag è possibile usare il tag

: otterremo semplicemente un testo formattato come un titolo ma suddiviso in più paragrafi. È anche possibile utilizzare un tag dentro un altro.

**attributo ALIGN di **

Come il tag

, i tag hanno l’attributo ALIGN che permette di scegliere l’allineamento del titolo (sinistra “LEFT”, centro “CENTER”, destra “RIGHT”).

Esercizio 10. Si provi a modificare il documento [titoli.html] inserendo un tag

all’interno di un tag : cosa succede? E facendo il viceversa? E cosa succede invece utilizzando un tag dentro un altro? Descrivere i tre casi provando a spiegare le differenze e il motivo di esse. Attenzione: queste prove sono significative solo se il testo si trova non solo dentro il tag più interno, ma anche tra il tag esterno e quello interno, sia prima che dopo quest’ultimo.

2.22.22.22.2 ListeListeListeListe

Liste puntate

Un elemento strutturato molto comune nei documenti sono le cosiddette liste puntate ; eccone un esempio:

• voce 1
• voce 2
• voce 3 Naturalmente è possibile creare questo tipo di liste in HTML. Per informare il browser che una certa parte del documento costituisce una lista puntata si usano i due tag e . si osservi che anche questi tag – come tutti quelli visti sinora – servono sempre a specificare il contenuto del documento, e non la sua formattazione. Essi comunicano infatti al browser che una certa parte del documento contiene una lista non ordinata di elementi; sarà il browser a decidere come visualizzarla – tipicamente con un pallino accanto ad ogni voce della lista, ma potrebbe anche usare un quadratino o una stellina.

**il tag ed il tag **

Il tag (da Unordered List ) è un tag contenitore che deve racchiudere l’intera lista. Il tag (da List Item ), è un tag contenitore che deve racchiudere ogni singola voce della lista.

Più formalmente, la sintassi di una lista non ordinata è data dalle seguenti regole:

➠ una lista non ordinata è nella forma: sequenza di voci

➠ una sequenza di voci è nella forma: voce

oppure nella forma: voce sequenza di voci

➠ una voce è nella forma: testo

La Figura 2.7 mostra un documento HTML che utilizza una lista non ordinata, e come esso viene visualizzato dal browser.

Liste non ordinate

Ecco il programma della prima lezione del corso "Realizzazione di pagine Web in HTML"

introduzione ad HTML i tag gli attributi dei tag la struttura di un documento HTML paragrafi e titoli liste altri elementi del testo

Figura 2.7: liste non ordinate [listaul.html]

Il tag definisce tra gli altri un attributo che serve a suggerire al browser come visualizzare la lista: si tratta dell’attributo TYPE. Tale attributo è stato deprecato in HTML 4.0; lo introduciamo ugualmente perché può essere facile incontrarlo in pagine HTML che non usano la versione 4.0. Vedremo più avanti un modo alternativo introdotto da HTML 4.0 per specificare le stesse informazioni.

**attributo TYPE di **

L’attributo TYPE di serve a scegliere tra tre possibili modi di visualizzare il punto elenco. La Tabella 2.2 mostra i possibili valori di tale attributo e come in ciascuno dei tre casi dovrebbe essere visualizzare il punto elenco; si tenga tuttavia presente che la scelta ultima spetta al browser, che potrebbe benissimo stabilire visualizzazioni differenti.

Valore di TYPE: Visualizzazione: “disc” (^) Il punto elenco dovrebbe essere disegnato come un cerchio pieno: • “circle” Il punto elenco dovrebbe essere disegnato come un cerchio vuoto: ○ “square” Il punto elenco dovrebbe essere disegnato come un quadratino: „

**Tabella 2.2: valori possibili per l'attributo TYPE in **

L’attributo TYPE può essere usato anche dentro il tag , invece che nel tag : in tal caso il punto elenco verrà cambiato soltanto per la voce corrente, invece che per l’intera lista.

Liste numerate

Una lista numerata è del tutto simile ad una lista puntata, solo che le sue voci sono numerate:

1. voce 1

Figura 2.8: diversi esempi di liste nidificate.

**i tag , e **

Il tag contenitore ( Definition List ) racchiude l’intera lista di definizioni, un po’ come i tag e . A differenza di questi ultimi però i singoli elementi che compongono la lista sono formate da due parti: termine e definizione. Il termine deve essere racchiuso dal tag contenitore ( Definition Term ), mentre la definizione deve essere racchiusa dal tag contenitore ( Define Definition ). Ecco le regole sintattiche per le liste di definizioni:

➠ una lista di definizioni è nella forma: sequenza di definizioni ➠ una sequenza di definizioni è nella forma: definizione oppure nella forma: definizione sequenza di definizioni ➠ una definizione è nella forma: termine def. Esercizio 12. In base alle regole date, scrivere un documento HTML che contenga una lista di definizioni, in cui i termini definiti siano lista ordinata , lista non ordinata e lista di definizioni_._

2.32.32.32.3 Altri elementi del testoAltri elementi del testoAltri elementi del testoAltri elementi del testo

Stili logici

In questa sezione descriveremo alcuni tag dell’HTML che servono a specificare stili logici per alcune porzioni del testo. Mentre uno stile fisico descrive la formattazione con cui il testo deve essere visualizzato (per esempio, gli stili di Word sono stili fisici), uno stile logico caratterizza il tipo di informazione contenuta nel testo. Per tornare ad un esempio fatto all’inizio, laddove uno stile fisico stabilisce che il testo deve essere visualizzato in grassetto, uno stile logico specfica per esempio che una certa parte del testo è importante.

In HTML quando applichiamo uno stile logico ad una porzione di testo, diamo al browser delle informazioni su di esso, e di conseguenza il browser può decidere come formattarlo appropriatamente. In alcuni casi il browser può scegliere di non applicare nessuna particolare formattazione relativa ad un determinato stile logico. Questo però non è un buon motivo per non usare lo stile: innanzitutto perché comunque un diverso browser potrebbe visualizzarlo; in secondo luogo perché l’informazione che lo stile logico porta con sé potrebbe essere utile ad esempio ad un motore di ricerca, o ad un utente che legge la pagina.

**i tag , , , , , , , , , **

Trattiamo questi tag tutti insieme perché sono molto simili: sono tutti tag contenitori che danno informazioni su porzioni di testo senza interrompere il paragrafo. I browser possono scegliere come visualizzare il testo contenuto in questi tag, ma non possono trasformarlo in un paragrafo a sé (come invece succede ad esempio con i tag Hx). Per questa ragione l’unica formattazione che essi possono usare è quella relativa ai caratteri (ad esempio: grassetto, corsivo, sottolineato, colore) ma non quella relativa ai paragrafi (ad esempio: allineamento, spazio prima/dopo, indentazione).^5 La Tabella 2.4 descrive brevemente il significato di ciascun tag.

TAG: Descrizione: indica enfasi, solitamente viene visualizzato in corsivo. indica un’enfasi maggiore di , solitamente viene visualizzato in grassetto. indica che il termine in esso contenuto è definito in questa parte del documento. indica un frammento di programma per computer. indica un esempio di output di un programma o di uno script. indica del testo che deve essere introdotto dall’utente. indica una variabile od un argomento di un programma. contiene un riferimento bibliografico. indica una forma abbreviata (ad esempio “sec.” invece di “secondi”) indica un acronimo (ad es. “WWW”, o “laser”)

Tabella 2.4: tag di tipo phrase

I tag e vengono comunemente usati nei documenti HTML per indicare porzioni di testo importanti; come già detto solitamente vengono visualizzati in corsivo, ma potrebbe accadere diversamente. Ad esempio all’interno di un testo tutto in corsivo, il tag potrebbe essere visualizzato in formato normale, per mettere il testo in evidenza. Gli altri tag sono pensati per essere usati in documenti tecnici; in particolare e sono stati introdotti solo in HTML 4.0 e pertanto non sono supportati da quasi nessun browser.

Esercizio 13. Si scriva un documento HTML per sperimentare tutti i tag in Tabella 2.4, e si verifichi il risultato su almeno due browser. Quali tag producono un effetto visibile? Il fatto che non lo producano significa automaticamente che non sono supportati?

**i tag e **

I tag e sono entrambi tag contenitori che servono ad indicare una citazione: la differenza è che indica una citazione che occupa un intero paragrafo (pertanto il browser visualizza il testo contenuto in tale tag come un paragrafo a sé stante) mentre indica una citazione in linea, che quindi non porta a nessuna interruzione di paragrafo. Solitamente i browser visualizzano indentando il testo a sinistra e a destra, mentre viene visualizzato anteponendo e posponendo al testo virgolette o apici, a seconda della lingua. Il tag può essere anche utilizzato per indicare un dialogo.

(^5) Nella specifica del W (^3) C questi tag sono detti essere di tipo phrase , che in italiano potremmo tradurre come “locuzione”, proprio ad indicare che essi non contengono necessariamente frasi compiute (che in inglese di direbbero sentences ) ma porzioni di esse.