Scopri milioni di ebook, audiolibri, riviste e altro ancora

Solo $11.99/mese al termine del periodo di prova. Cancella quando vuoi.

Lezioni di Programmazione Web: con riferimento ai linguaggi HTML, CSS, Javascript e PHP

Lezioni di Programmazione Web: con riferimento ai linguaggi HTML, CSS, Javascript e PHP

Leggi anteprima

Lezioni di Programmazione Web: con riferimento ai linguaggi HTML, CSS, Javascript e PHP

Lunghezza:
720 pagine
9 ore
Pubblicato:
26 ago 2013
ISBN:
9788874886258
Formato:
Libro

Descrizione

Il linguaggio HTML è oggi concepito per definire il contenuto logico e non l'aspetto delle pagine Web. Infatti, questo dipende dal tipo di terminale in cui la pagina viene presentata, e per garantire la massima diffusione dei contenuti è opportuno evitare che questi siano destinati solo a classi ristrette di terminali, dotati di adeguate capacità grafiche. Terminali mobili, o adoperati da persone diversamente abili, o semplicemente obsoleti, possono anzi averne di limitate o non averne affatto; o magari sono dispositivi pensati per estrarre informazioni dal documento senza visualizzarlo (ad esempio, per creare indici nei motori di ricerca, o per importare documenti HTML in un formato proprietario). Tutto ciò impone che lo stesso contenuto sia utilizzabile secondo modalità diverse, e che le specifiche relative allo stile col quale avviene la presentazione siano stabilite da un documento complementare, scritto in un linguaggio apposito (CSS).

MARCO AVVENUTI è Professore Associato presso il Dipartimento di Ingegneria dell'Informazione, Elettronica, Informatica, Telecomunicazione della Facoltà di Ingegneria - Università degli studi di Pisa

GABRIELE CECCHETTI è Ricercatore alla Scuola Superiore S. Anna di Pisa

MARIO GIOVANNI C. CIMINO è Ricercatore presso il Dipartimento di Ingegneria dell'Informazione della Facoltà di Ingegneria - Università degli Studi di Pisa
Pubblicato:
26 ago 2013
ISBN:
9788874886258
Formato:
Libro

Informazioni sull'autore


Correlato a Lezioni di Programmazione Web

Libri correlati

Articoli correlati

Anteprima del libro

Lezioni di Programmazione Web - Marco Avvenuti

ANALITICO

1II Linguaggio HTML

1.1 Introduzione al WWW

Il World Wide Web (WWW) è una rete di risorse informative disponibili via Internet. Le unità di informazione prendono il nome di documenti o pagine, e possono contenere collegamenti ad altri documenti contenenti informazioni correlate. Per questa loro caratteristica, i documenti sono chiamati ipertesti o, quando sono costituiti anche da immagini, registrazioni di suoni o altri tipi di media, ipermedia. Gli utenti possono accedere ai documenti, indipendentemente dalla loro locazione, tramite programmi interattivi detti browser e altri programmi multimediali. Tali programmi permettono di trasferire i documenti, presentarne il contenuto, e navigare attraverso la rete di collegamenti ipertestuali.

Come la maggior parte delle applicazioni di rete, anche il World Wide Web segue il paradigma client-server. Il browser svolge il ruolo di client, iniziando la conversazione con un programma server in esecuzione sul calcolatore dove è memorizzato il documento richiesto dall’utente. Il funzionamento del Web si basa sui seguenti tre meccanismi:

1. uno schema di naming per localizzare in modo uniforme e univoco i documenti nelle rete (es.: gli URL);

2. un protocollo applicativo per il trasferimento delle informazioni fra client e server (es.: HTTP);

3. un linguaggio per descrivere il modo in cui il contenuto informativo dei documenti deve essere presentato, e per definire i collegamenti ipertestuali tra documenti correlati (es.: HTML).

Ogni risorsa disponibile sul Web ha un indirizzo che può essere codificato per mezzo di un Uniform (o Universal) Resource Locator (URL)¹. Gli URL si compongono tipicamente di tre parti:

1. Il protocollo utilizzato per accedere alla risorsa., seguito da :// ,

2. L’indirizzo del calcolatore che ospita la risorsa,

3. Il nome della risorsa stessa, dato come un percorso.

Esempio:

http://www.ing.unipi.it/TIA

Questo URL viene interpretato come l’identificatore univoco di un documento disponibile attraverso il protocollo HTTP (http), residente sul server avente indirizzo mnemonico www.ing.unipi.it, accessibile attraverso il percorso /TIA. Altri possibili protocolli sono:

ftp per accedere a file pubblicati da server FTP,

news per accedere alle notizie pubblicate nei newsgroup ,

mailto per spedire posta elettronica all’indirizzo specificato.

Gli URL possono essere assoluti (o completi), come quelli mostrati precedentemente, oppure relativi. Questi ultimi fanno riferimento a documenti residenti sullo stesso calcolatore del documento corrente, e generalmente hanno riferimenti relativi nella componente percorso. Gli URL relativi sono risolti in URL completi usando un URL di base.

La comunicazione tra il processo client e il processo server segue il protocollo HTTP (HyperText Transfer Protocol). Il protocollo definisce una semplice conversazione di tipo request-response in due fasi:

1) il client stabilisce una connessione con il server e invia la richiesta di un documento;

2) il server risponde alla richiesta utilizzando la connessione aperta dal client.

Trattandosi di un protocollo stateless (il server non riconosce i client e non ne ricorda le richieste), non vi è modo di rispondere al client se la connessione cade, e la richiesta deve essere ripetuta.

I documenti Web sono descritti in HTML (Hyper Text Markup Language), un linguaggio di marcatori la cui funzione è descrivere come devono essere presentati i contenuti dei documenti. Esso permette di:

–pubblicare documenti con intestazioni, testo, tabelle, elenchi, foto, ecc.;

–recuperare informazioni per mezzo di collegamenti ipertestuali;

–progettare moduli per effettuare transazioni con servizi remoti, da utilizzare nella ricerca di informazioni, nel fare prenotazioni, nell’ordinare prodotti, ecc.;

–includere fogli elettronici, video, brani audio e altri oggetti direttamente nei documenti.

I browser interpretano HTML con un ampia tolleranza sintattica, in modo da rappresentare anche documenti contenenti errori o scritti in versioni diverse del linguaggio. Nonostante questa tolleranza, è importante che gli sviluppatori Web si sforzino di seguire gli standard sintattici (definiti dal W3 Consortium), curando anche di separare la struttura di un documento dalla sua presentazione, utilizzando per questa altri meccanismi più adatti allo scopo, come i fogli di stile. L’esperienza ha dimostrato che separare la struttura di un documento dai suoi aspetti di presentazione riduce i costi necessari per servire un’ampia gamma di piattaforme, e facilita la manutenzione dei documenti².

1.2 Il documento HTML

Un esempio di documento HTML è il seguente:

-//W3C//DTD HTML 4.01//EN

http://www.w3.org/TR/html4/strict.dtd>

Il mio primo documento HTML

Ciao mondo!

Un documento HTML si divide in una sezione d’intestazione (qui tra e ) e in un corpo (qui tra e ). Il titolo del documento, insieme ad altre eventuali informazioni, appare nell’intestazione, mentre il contenuto del documento appare nel corpo.

Il corpo in questo esempio contiene un unico paragrafo, marcato con

.

1.2.1 Elementi

L’HTML include tipi di elemento che rappresentano paragrafi, collegamenti ipertestuali, elenchi, tabelle, immagini, ecc.

Ogni dichiarazione del tipo di elemento descrive in genere tre parti: un marcatore iniziale, il contenuto e un marcatore finale.

Il nome dell’elemento compare all’interno del marcatore iniziale (scritto ) e del marcatore finale (scritto )³.

Ad esempio, i marcatori iniziale e finale del tipo di elemento UL delimitano le voci di un elenco:

  • ...voce 1 dell’elenco...

  • ...voce 2 dell’elenco...

    Alcuni tipi di elemento HTML consentono di omettere il marcatore finale (ad esempio i tipi di elemento P e LI), altri permettono che sia omesso anche quello iniziale (ad esempio HEAD e BODY); altri ancora non hanno contenuto (ad esempio l’elemento interruzione di linea BR non ha contenuto visto che la sua unica funzione è quella di concludere una riga di testo). Simili elementi vuoti non hanno mai il marcatore finale. I nomi di elemento sono sempre maiuscoloindifferenti.

    Per esempio il seguente paragrafo:

    Questo è il primo paragrafo.

    ...un elemento a livello di blocco...

    può essere riscritto senza il suo marcatore finale:

    Questo è il primo paragrafo.

    ...un elemento a livello di blocco...

    dal momento che il marcatore iniziale

    è chiuso dall’elemento seguente a livello di blocco. In modo analogo, se un paragrafo è racchiuso da un elemento a livello di blocco, come in:

    Questo è un paragrafo.

    il marcatore finale dell’elemento a livello di blocco che circonda (qui, ) sottintende il marcatore finale corrispondente al marcatore iniziale

    aperto.

    Elementi e marcatori (i cosiddetti tag) non sono la stessa cosa. Alcuni si riferiscono agli elementi chiamandoli tag (ad esempio: il tag P). Si ricordi che l’elemento è una cosa, il marcatore (sia esso iniziale o finale) un’altra. Si consideri il caso dell’elemento HEAD che è sempre presente, anche se entrambi i marcatori HEAD iniziale e finale possono essere omessi nel codice di marcatura.

    1.2.2 Attributi

    Gli elementi possono essere associati a proprietà, chiamate attributi, che possono avere dei valori (predefiniti o impostati dagli sviluppatori o da script). Le coppie attributo/valore appaiono prima del > di chiusura del marcatore iniziale di un elemento. Un qualsiasi numero di coppie attributo/valore, separate da spazi, può apparire, in un qualsiasi ordine, all’interno del marcatore iniziale di un elemento. In questo esempio l’attributo id è impostato per un elemento H1:

    sezione1>

    Questa è un'intestazione riconoscibile grazie all'attributo id

    I valori di attributo devono essere delimitati usando apici doppi o singoli. Gli apici singoli possono essere inclusi all’interno del valore di un attributo quando il valore è delimitato da apici doppi, e viceversa⁴. In taluni casi è possibile specificare il valore di un attributo senza usare gli apici, anche se non è raccomandato. Il valore di un attributo può contenere soltanto lettere (a-z e A-Z), cifre (0-9), trattini d’unione, punti, trattini di sottolineatura e i due punti. I nomi di attributo sono sempre maiuscolo-indifferenti e generalmente lo sono anche i valori di attributo.

    1.2.3 Riferimenti a caratteri

    I riferimenti a caratteri sono nomi numerici o simbolici che possono essere utilizzati in sostituzione ai caratteri che possono essere inclusi in un documento HTML, e sono particolarmente utili come rimandi a caratteri usati raramente o a caratteri che gli strumenti di authoring rendono difficile o impossibile inserire. Essi cominciano con il simbolo & e terminano con un punto e virgola ;. Alcuni esempi comuni comprendono:

    < rappresenta il simbolo <;

    > rappresenta il simbolo >;

    " rappresenta il segno d’interpunzione " ;

    å (in decimale) rappresenta la lettera Å ;

    И (in decimale) rappresenta la lettera maiuscola I in cirillico.

    (in esadecimale) rappresenta il carattere cinese che simboleggia l’acqua.

    1.2.4 Commenti

    I commenti in HTML hanno la seguente sintassi:

    che occupa più di una riga -->

    Non sono permessi spazi bianchi tra il delimitatore di apertura della dichiarazione di marcatura () e il delimitatore di apertura del commento (--), ma sono permessi tra il delimitatore di chiusura del commento (--) e il delimitatore di chiusura della dichiarazione di marcatura (>)⁵.

    1.3 Struttura globale di un documento HTML

    Un documento HTML si compone di tre parti:

    1. una sezione costituita da una riga contenente informazioni sulla versione di HTML,

    2. una sezione esplicativa di intestazione (delimitata dall’elemento HEAD ),

    3. una sezione contenente il corpo, ossia il contenuto effettivo del documento. Il corpo può essere implementato per mezzo dell’elemento BODY o dell’elemento FRAMESET .

    Ciascuna sezione può essere preceduta o seguita da spazio bianco (spazi, a capo, tabulazioni e commenti). Le sezioni 2 e 3 dovrebbero essere delimitate dall’elemento HTML.

    Ecco qui un esempio di un semplice documento HTML:

    -//W3C//DTD HTML 4.01//EN

    http://www.w3.org/TR/html4/strict.dtd>

    Il mio primo documento HTML

    Ciao mondo!

    1.3.1 Informazioni sulla versione di HTML

    Un documento HTML valido dichiara quale versione di HTML è usata nel documento. La dichiarazione del tipo di documento menziona la definizione del tipo di documento (DTD Document Type Definition) in uso per il documento.

    L’HTML 4.01 specifica tre DTD, così è possibile includere nei documenti una delle seguenti dichiarazioni del tipo di documento. Le DTD differiscono negli elementi che esse supportano. Ad esempio la DTD transitoria completa comprendente anche il supporto ai frame è la seguente:

    -//W3C//DTD HTML 4.01 Frameset//EN

    http://www.w3.org/TR/html4/frameset.dtd>

    1.3.2 L’elemento HTML

    Dopo la dichiarazione del tipo di documento, la parte rimanente di un documento HTML è contenuta all’interno dell’elemento HTML. Pertanto un tipico documento HTML ha questa struttura:

    -//W3C//DTD HTML 4.01//EN

    http://www.w3.org/TR/html4/strict.dtd>

    ...L’intestazione, il corpo, ecc. vanno qui...

    1.3.3 L’intestazione del documento

    1.3.3.1 L’elemento HEAD

    L’elemento HEAD contiene informazioni circa il documento corrente, quali il suo titolo, le parole chiave che possono essere utili ai motori di ricerca, e altri dati che non sono considerati come contenuto del documento. I browser generalmente non riproducono gli elementi che appaiono in HEAD come contenuto, tuttavia, essi possono rendere disponibili agli utenti attraverso altri meccanismi le informazioni presenti in HEAD.

    1.3.3.2 L’elemento TITLE

    Ogni documento HTML deve avere un elemento TITLE nella sezione HEAD. L’elemento TITLE dovrebbe essere usato per identificare i contenuti di un documento⁶.

    I titoli possono contenere entità carattere (per i caratteri accentati, i caratteri speciali, ecc.), ma non possono contenere altro codice di marcatura (compresi i commenti). Ecco qui un esempio tipico di titolo di documento:

    -//W3C//DTD HTML 4.01//EN

    http://www.w3.org/TR/html4/strict.dtd>

    Uno studio sulla dinamica della popolazione

    ... altri elementi d’intestazione...

    ... corpo del documento...

    1.3.3.3 L’elemento META

    L’HTML lascia la possibilità di specificare dei metadati informazioni su un documento piuttosto che il contenuto di un documento in una varietà di modi.

    L’elemento META specifica una proprietà e le assegna un valore.

    Definizioni di attributo:

    name = nome_proprietà

    Questo attributo identifica un nome di proprietà.

    http-equiv = nome_proprietà

    Questo attributo può essere usato al posto dell’attributo name. I server HTTP usano questo attributo per raccogliere informazioni per le intestazioni dei messaggi di risposta HTTP.

    content = valore_proprietà

    Questo attributo specifica un valore di proprietà.

    L’elemento META può essere usato per identificare delle proprietà di un documento (ad esempio, autore, data di scadenza, un elenco di parole chiave, la codifica di caratteri, l’intervallo di un documento, la sua classificazione ecc.) e assegnare valori a quelle proprietà.

    Ogni elemento META specifica una coppia proprietà/valore. L’attributo name identifica la proprietà e l’attributo content specifica il valore della proprietà.

    Per esempio, la seguente dichiarazione imposta un valore per la proprietà Author:

    Author content=Dave Raggett>

    1.3.3.3.1 META e intestazioni HTTP

    L’attributo http-equiv può essere usato al posto dell’attributo name ed ha un’importanza particolare quando i documenti sono recuperati attraverso il protocollo HTTP. I server HTTP possono usare il nome della proprietà specificata dall’attributo http-equiv per creare un’intestazione basata sulla specifica RFC822 nella risposta HTTP⁷.

    La seguente dichiarazione META di esempio:

    Expires content=Thu, 01 Jan 2004 14:25:27 GMT>

    avrà come risultato l’intestazione HTTP:

    Expires: Thu, 01 Jan 2004 14:25:27 GMT

    Questa informazione può essere usata dalle memorie cache per determinare quando andare a prelevare una copia aggiornata del documento associato⁸.

    Un altro esempio di utilizzo della dichiarazione META è quello per specificare che dopo un determinato intervallo di tempo la pagina venga automaticamente aggiornata nel browser:

    Refresh content=10>

    oppure venga caricata una pagina diversa)

    Refresh

    content=10;URL=http://localhost/pag2.html>

    1.3.3.3.2 META e motori di ricerca

    Un uso comune di META è di specificare le parole chiave che un motore di ricerca può adoperare per accrescere la qualità dei risultati della ricerca. Quando una serie di elementi META fornisce informazioni dipendenti dalla lingua su un documento, i motori di ricerca possono attivare un filtro sull’attributo lang per visualizzare i risultati della ricerca in base alle preferenze linguistiche dell’utente. Ad esempio,

    keywords lang=en

    content=holiday, Greece, sunshine>

    keywords lang=fr

    content=vacances, Grèce, soleil>

    1.3.3.3.3 META e informazioni predefinite

    L’elemento META può essere usato per specificare le informazioni predefinite per un documento nei seguenti casi:

    –Il linguaggio di scripting predefinito.

    –Il linguaggio di fogli di stile predefinito.

    –La codifica dei caratteri del documento.

    L’esempio seguente specifica la codifica dei caratteri per un documento come ISO-8859-15:

    Content-Type

    content=text/html; charset=ISO-8859-15>

    1.3.4 Il corpo del documento

    1.3.4.1 L’elemento BODY

    Il corpo di un documento racchiude il contenuto del documento. Il contenuto può essere presentato da un browser in una varietà di modi. Ad esempio, per quanto riguarda i browser visuali, si può pensare al corpo come a una sorta di tela in cui il contenuto appare: testo, immagini, colori, grafici, ecc.

    I documenti che contengono insiemi di frame sostituiscono l’elemento BODY con l’elemento FRAMESET.

    Dal momento che i fogli di stile sono ora il sistema privilegiato per specificare la presentazione di un documento, gli attributi di presentazione dell’elemento BODY sono stati disapprovati.

    Alcuni attributi di presentazione (per browser visuali) ormai disapprovati:

    1.3.4.2 Elementi a livello di blocco e in riga

    Certi elementi HTML che appaiono nel BODY sono detti a "livello di blocco mentre altri in riga".

    In generale, gli elementi a livello di blocco possono contenere elementi in riga e altri elementi a livello di blocco, mentre gli elementi in riga possono contenere solo dati e altri elementi in riga. Dal punto di vista della formattazione gli elementi a livello di blocco cominciano su nuove righe, diversamente dagli elementi di riga.

    1.3.4.3 Intestazioni: gli elementi H1, H2, H3, H4, H5, H6

    Un elemento di intestazione descrive brevemente l’argomento della sezione che esso introduce. Le informazioni di intestazione possono essere usate dai browser, ad esempio, per costruire automaticamente un sommario per un documento.

    Vi sono in HTML sei livelli di intestazione, con H1 come il più importante ed H6 come il meno importante. I browser di tipo visuale riproducono di solito le intestazioni più importanti con caratteri più grandi di quelli usati per le meno importanti.

    1.3.4.4 Raggruppare gli elementi: gli elementi DIV e SPAN

    Gli elementi DIV e SPAN, insieme con gli attributi id e class, offrono un meccanismo generico per aggiungere struttura ai documenti. Questi elementi definiscono il contenuto o come in riga (SPAN) o come a livello di blocco (DIV), ma non impongono alcun altro idioma presentazionale sul contenuto.

    1.4 Il Testo

    Questa sezione discute l’organizzazione del testo.

    1.4.1 Spazio bianco

    In HTML i seguenti caratteri sono definiti come caratteri spazio bianco:

    •spazio ASCII ( )

    •tabulatore ASCII ( )

    •avanzamento di riga ASCII ( )

    •spazio di larghezza zero ( ​ )

    Anche le interruzioni di riga sono caratteri spazio bianco.

    Per tutti gli elementi HTML, ad eccezione di PRE, le sequenze di spazio bianco separano le parole (il termine parola è usato qui con il significato di sequenza di caratteri non-spazio bianco). L’elemento PRE è usato per il testo preformattato, dove lo spazio bianco è significativo.

    1.4.2 Testo strutturato

    1.4.2.1 Elementi della frase: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR e ACRONYM

    Gli elementi della frase aggiungono informazioni strutturali ai frammenti di testo. I significati usuali degli elementi della frase sono i seguenti:

    EM e STRONG sono usati per denotare enfasi. Gli altri elementi della frase hanno un rilievo particolare nei documenti tecnici. Questi esempi illustrano alcuni degli elementi della frase:

    Maggiori informazioni possono essere reperite in

    [ISO-0000].

    Siete pregati cortesemente di far riferimento, nella futura

    corrispondenza,

    al seguente numero: 1-234-55

    La presentazione degli elementi della frase dipende dal browser. In genere i browser visuali presentano il testo EM in corsivo e il testo STRONG in grassetto.

    1.4.2.2 Citazioni: gli elementi BLOCKQUOTE e Q

    Questi due elementi designano testo citato. BLOCKQUOTE è usato per citazioni lunghe (contenuto a livello di blocco) mentre Q è destinato a citazioni brevi (contenuto in riga) che non richiedono interruzioni di paragrafo.

    Definizioni di attributo

    cite = url

    Il valore di questo attributo è un URL che designa un documento o un messaggio d’origine. Questo attributo ha lo scopo di fornire informazioni circa la fonte da cui la citazione è stata ricavata.

    Questo esempio formatta un estratto da Le due torri, di J.R.R. Tolkien, come una citazione a livello di blocco.

    http://www.mycom.com/tolkien/twotowers.html>

    They went in single file, running like hounds on a strong

    scent,

    and an eager light was in their eyes. Nearly due west the broad

    swath of the marching Orcs tramped its ugly slot; the sweet

    grass

    of Rohan had been bruised and blackened as they passed.

    I browser di tipo visuale generalmente riproducono BLOCKQUOTE come un blocco rientrato¹⁰, e devono garantire che il contenuto dell’elemento Q sia riprodotto racchiuso tra virgolette: non si dovrebbero pertanto mettere le virgolette all’inizio e alla fine del contenuto dell’elemento Q.

    Il seguente esempio illustra citazioni annidate per mezzo dell’elemento Q.

    John said, en-us>I saw Lucy at lunch, she told me

    en-us>Mary wants you

    to get some ice cream on your way home. I think I will get

    some at Ben and Jerry’s, on Gloucester Road.

    1.4.2.3 Pedici e apici: gli elementi SUB e SUP

    Per descrivere pedici e apici si usano rispettivamente gli elementi SUB e SUP. Per esempio:

    H2O

    E = mc2

    1.4.3 Righe e paragrafi

    La marcatura HTML per definire un paragrafo è elementare: l’elemento P definisce un paragrafo.

    1.4.3.1 Paragrafi: l’elemento P

    L’elemento P rappresenta un paragrafo. Esso non può contenere elementi a livello di blocco (incluso lo stesso P)¹¹.

    1.4.3.2 Controllare le interruzioni di riga

    1.4.3.2.1 Forzare un’interruzione di riga: l’elemento BR

    L’elemento BR interrompe forzatamente (termina) la riga di testo corrente.

    Nei browser visuali l’attributo clear può essere usato per determinare se ciò che segue l’elemento BR scorre intorno alle immagini e agli altri oggetti fluttuanti verso il margine sinistro o destro oppure se comincia dopo il limite inferiore di tali oggetti¹² (ulteriori dettagli sono dati nella sezione 1.9.4).

    1.4.3.2.2 Impedire un’interruzione di riga

    Può capitare talvolta di dover impedire che si verifichi un’interruzione di riga tra due parole. L’entità   agisce come uno spazio: ivi i browser non provocano un’interruzione di riga.

    1.4.3.3 Testo preformattato: l’elemento PRE

    L’elemento PRE dice ai browser di tipo visuale che il testo da esso delimitato è "preformattato". Nel trattare testo preformattato i browser visuali:

    –possono lasciare gli spazi bianchi intatti;

    –possono riprodurre il testo con un carattere a spaziatura fissa;

    –possono disabilitare lo scorrimento automatico del testo.

    Gli altri elementi HTML contenuti all’interno dell’elemento PRE non vengono ignorati, ma resi normalmente, pertanto per visualizzare i tags HTML in un blocco di testo preformattato, occorre usare le entità per i simboli ‘<’ (<) e ‘>’(>); inoltre all’interno di questo elemento non dovrebbero essere contenuti elementi che distruggono spaziatura fissa di questo elemento (es. APPLET, FONT, IMG, SUB, SUP, ecc.)

    L’esempio seguente mostra una strofa preformattata, tratta dalla poesia di Shelly To a Skylark:

     

    Higher still and higher

    From the earth thou springest

    Like a cloud of fire;

    The blue deep thou wingest,

    And singing still dost soar, and soaring ever singest.

    Ecco come essa viene tipicamente riprodotta:

    Higher still and higher

    From the earth thou springest

    Like a cloud of fire;

    The blue deep thou wingest,

    And singing still dost soar, and soaring ever singest.

    1.5 Elenchi

    L’HTML offre svariati meccanismi per specificare elenchi di informazioni. Tutti gli elenchi devono contenere uno o più voci di elenco. Gli elenchi possono contenere:

    –informazioni non ordinate;

    –informazioni ordinate;

    –definizioni.

    L’elenco precedente, ad esempio, è un elenco non ordinato, creato per mezzo dell’elemento UL:

  • Informazioni non ordinate.

  • Informazioni ordinate.

  • Definizioni.

    Un elenco ordinato, creato usando l’elemento OL, dovrebbe contenere informazioni per le quali l’ordine dovrebbe essere posto in risalto, come in una ricetta:

    1. Mescolare accuratamente gli ingredienti secchi.

    2. Versare gli ingredienti liquidi.

    3. Mescolare per 10 minuti.

    4. Cuocere in forno per un’ora a 300 gradi.

    Gli elenchi di definizioni, creati usando l’elemento DL, consistono generalmente di una serie di coppie termine/definizione (sebbene gli elenchi di definizioni possano avere altre applicazioni). Così, nel pubblicizzare un prodotto, si potrebbe usare un elenco di definizioni:

    Prezzo più basso

    La nuova versione di questo prodotto costa significativamente meno della precedente!

    Più facile da adoperare

    Abbiamo modificato il prodotto in modo che sia più facile da usare!

    Sicuro per i bambini

    Potete lasciare i vostri bambini da soli in una stanza con questo prodotto ed essi non si faranno male (non è una garanzia).

    definito in HTML come:

    Prezzo più basso

    La nuova versione di questo prodotto costa significativamente

    meno della precedente!

    Più facile da adoperare

    Abbiamo modificato il prodotto in modo che sia più facile da

    usare!

    Sicuro per i bambini

    Potete lasciare i vostri bambini da soli in una stanza con

    questo

    prodotto ed essi non si faranno male (non è una garanzia).

    Gli elenchi possono anche essere annidati e differenti tipi di elenco possono essere usati insieme, come nell’esempio seguente, che è un elenco di definizioni che contiene un elenco non ordinato (gli ingredienti) e un elenco ordinato (la procedura)¹³:

    Gli ingredienti:

    •100 g. di farina

    •10 g. di zucchero

    •1 tazza d’acqua

    •2 uova

    •sale, pepe

    La procedura:

    1. Mescolare accuratamente gli ingredienti secchi.

    2. Versare gli ingredienti liquidi.

    3. Mescolare per 10 minuti.

    4. Cuocere in forno per un’ora a 300 gradi.

    Note:

    La ricetta può essere perfezionata con l’aggiunta di uva passa.

    1.5.1 Elenchi non ordinati ( UL ), elenchi ordinati ( OL ) e voci di elenco ( LI )

    Definizioni di attributo:

    type = style-information

    Disapprovato. Questo attributo imposta lo stile di una voce di elenco. I valori possibili sono descritti sotto (insieme con le informazioni sulla forma maiuscola/minuscola).

    start = number

    Disapprovato. Solo per OL. Questo attributo specifica il numero intero iniziale della prima voce in un elenco ordinato. Il numero iniziale predefinito è 1. L’etichetta corrispondente può essere non numerica: pertanto quando lo stile della voce di elenco è lettere latine maiuscole (A, B, C, ...), start=3 equivale a C, quando lo stile è numerali romani minuscoli, start=3 equivale a iii, ecc.

    value = number

    Disapprovato. Solo per LI. Questo attributo imposta il numero intero della voce di elenco corrente. L’etichetta corrispondente può essere non numerica (si veda l’attributo start).

    Gli elenchi ordinati e non ordinati sono riprodotti in modo identico eccetto per il fatto che i browser di tipo visuale numerano le voci appartenenti ad elenchi ordinati. Le voci di elenchi non ordinati non sono numerate. Entrambi i tipi di elenco sono costituiti da sequenze di voci di elenco definite per mezzo dell’elemento LI (il cui marcatore finale può essere omesso). Questo esempio illustra la struttura fondamentale di un elenco.

  • ... prima voce di elenco...

  • ... seconda voce di elenco...

    ...

    Gli elenchi possono anche essere annidati. Per esempio:

  • ... Livello uno, numero uno...

  • ... Livello due, numero uno...

  • ... Livello due, numero due...

  • ... Livello tre, numero uno...

  • ... Livello due, numero tre...

  • ... Livello uno, numero due...

    Negli elenchi ordinati non è possibile continuare automaticamente la numerazione da un elenco precedente o nascondere la numerazione di alcune voci di elenco. Tuttavia è possibile reimpostare il numero di una voce di elenco definendo il suo attributo value. La numerazione delle successive voci di elenco continua a partire dal nuovo valore. Per esempio:

    30> imposta a 30 il numero di questa voce di elenco.

    40> imposta a 40 il numero di questa voce di elenco.

  • attribuisce a questa voce di elenco il numero 41.

    1.5.2 Elenchi di definizioni gli elementi DL, DT e DD

    Gli elenchi di definizioni si differenziano solo leggermente dagli altri tipi di elenchi per il fatto che le voci di elenco consistono di due parti: un

    Hai raggiunto la fine di questa anteprima. Registrati per continuare a leggere!
    Pagina 1 di 1

    Recensioni

    Cosa pensano gli utenti di Lezioni di Programmazione Web

    0
    0 valutazioni / 0 Recensioni
    Cosa ne pensi?
    Valutazione: 0 su 5 stelle

    Recensioni dei lettori