Creazione di pagine Web strutture complesse Silvio Peroni speroni@cs.unibo.it http://creativecommons.org/licenses/by-sa/3.0
Prima di iniziare: avete fatto l esercizio? Il mio tentativo
Completamente sbagliato? <html> <head> <title>philip K. Dick</title> <link type="text/css" rel="stylesheet" href="dick.css"/> </head> <body> <h1>philip K. Dick</h1> <p><strong>philip Kindred Dick</strong> (Chicago, 16 dicembre 1928 Santa Ana, 2 marzo 1982) è stato uno scrittore statunitense.</p> <p>fu famoso in vita solo nell'ambito della <em>fantascienza</em> statunitense, sia in patria che in Europa (divenne già negli anni ottanta autore di culto in Italia e in Francia). Dopo la sua morte si è avuta la riscoperta della sua narrativa realistica, che è stata pubblicata tutta postuma, con l'eccezione del romanzo <cite>confessioni di un artista di merda</cite> (1959) <q>the hell with the newspapers. Nobody reads the letters to the editor column except the nuts. It's enough to get you down.</q></p> <h2>l'opera</h2> <p>dick è oggi considerato uno dei più importanti autori di fantascienza e della narrativa americana dal secondo dopoguerra; le sue opere sono caratterizzate da un'irrequieta indagine sui temi della realtà (con riprese originalissime delle riflessioni filosofiche sull'ontologia), della simulazione e del falso, della teologia cristiana (in special modo la meditazione paolina e luterana, ma soprattutto di origine gnostica), della storia e della società degli Stati Uniti, e più in generale su quel nodo di idee e problemi noto come postmoderno o tardo capitalismo.</p> <h2>citazioni celebri</h2> <p>da <cite>ma gli androidi sognano pecore elettriche</cite>:</p> <blockquote>dovunque tu vada, ti sarà richiesto di fare cose che ritieni sbagliate. È una condizione costante della vita quella di essere costretti a violare la propria identità. Una volta o l'altra, ogni creatura vivente si trova costretta ad agire così. È l'ultima ombra, la disfatta della creazione. Questa è una maledizione che alimenta tutta la vita. Dappertutto nell'universo.</blockquote> <blockquote>cosa si prova ad avere un bambino? Cosa si prova a nascere? Noi non nasciamo, noi non cresciamo. Invece di morire per una malattia, o di vecchiaia, noi ci esauriamo, come le formiche. Ecco, come le formiche. Ecco cosa siamo.</blockquote> </body> </html> ecco il trucco per ottenere quella visualizzazione! Il sorgente HTML è giusto, ma viene visualizzato scorretto! Esame non superato? No, superato! Infatti non è importante come il browser visualizza il vostro documento, ma come usate i vari elementi di markup
Sommario Link Strutture! immagine! lista! tabella
Link
Cartine stradali Obiettivo: raggiungere una determinata città partendo da dove ci si trova in un particolare momento Collegamenti: le strade Muoversi: un mezzo di trasporto (macchina)
Più percorsi Posso usare differenti percorsi per raggiungere un punto di arrivo in base a differenti esigenze (risparmiare tempo, andare a trovare qualcuno durante il viaggio, ecc.)
Cartine della città Obiettivo: raggiungere determinati indirizzi di una particolare città Collegamenti: le strade Muoversi: un mezzo di trasporto (piedi, macchina)
Indirizzi di una città Raggiungere, a partire da una particolare posizione della città, una determinato indirizzo passando anche per diversi percorsi a seconda delle esigenze (a piedi, in macchina, ecc.)
Come raggiungo una città o un indirizzo specifico Seguiamo i cartelli che indicano quale strada percorrere per arrivare:! alla città di arrivo! ad uno specifico indirizzo di una particolare città
Specificare una strada da seguire Per specificare una particolare strada per raggiungere una città o un indirizzo specifico si usano semplici stringhe prive di spazi. Ad esempio:! Bologna viene usata per indicare di voler raggiungere la città di Bologna! #ViaIndipendenza13 viene usata per indicare di voler raggiungere l indirizzo via Indipendenza 13 della città corrente, qualunque essa sia (nb: il # è fondamentale prima del nome quando si vuole specificare un indirizzo di arrivo)! Bologna#ViaIndipendenza13 viene usata per indicare di voler raggiungere l indirizzo via Indipendenza 13 nella città di Bologna
Link ipertestuali Città = Risorse URL Pagine Web Indirizzo città = Attributo id di un elemento di una pagina Web Strada = Link ipertestuale Cartello stradale = Nome associato al link ipertestuale Mezzo = Browser
Costruire un link ipertestuale Serve per creare un collegamento monodirezionale tra due risorse: quella di partenza (la pagina corrente, in cui il link viene inserito) e quella di arrivo (specificata mediante un opportuno attributo) Per creare un link ipertestuale dentro una pagina Web (la risorsa di partenza) bisogna conoscere dove si vuole arrivare e il testo da associare al link in questione (di solito verrà visualizzato dal browser come sottolineato e blu) Si usa l elemento a con l attributo href <a href="url_risorsa_di_arrivo">testo del link</a> metafora stradale esempio <a href="città di arrivo">cartello stradale</a> <a href="http://www.unibo.it">unibo</a>
Tipologie di URL usate per la creazione di link (ovvero, come spostarsi verso altre pagine o aree) Schema generale URL: [protocollo]://[host]/[risorsa] URL assoluto: voglio creare un link per spostarmi da una pagina Web di un certo host verso un altra pagina Web di un altro host! Cosa si deve conoscere: l intero URL della pagina Web a cui si vuole arrivare URL relativo: voglio creare un link per spostarmi da una pagina Web verso un altra pagina Web raggiungibile senza cambiare host! Cosa si deve conoscere: la risorsa della pagina Web a cui si vuole arrivare Àncora: voglio creare un link per spostarmi da una certa pagina Web verso una specifica posizione (identificata da un àncora) della stessa pagina Web o di un altra pagina Web! Cosa si deve conoscere: se si ci vuole spostare sulla stessa pagina Web, il nome dell àncora a cui si vuole arrivare (definita dall attributo id specificato sull elemento HTML di arrivo); nel caso in cui si voglia far riferimento ad un àncora di un altra pagina Web, è necessario conoscere l URL della pagina Web in cui l àncora è contenuta
Esempio link: URL assoluto http:// + host + risorsa <a href= http://stable.toolserver.org/ geohack/geohack.php?pagename=bologna > 44 29 38 N 11 20 34 E</a>
Risultato del click: URL assoluto
Esempio link: URL relativo risorsa considerando la posizione corrente, ovvero http://it.wikipedia.org/wiki/ <a href= Medioevo >Medioevo</a>
Risultato del link: URL relativo http://it.wikipedia.org/wiki/medioevo
Esempio link: àncora (http:// + host + risorsa) sono opzionali + # + id <a href= #Storia >2 Storia</a>
Risultato del link: àncora <h2 id= Storia >Storia</h2> oppure <h2> <a name= Storia >Storia</a> </h2>
Esempi Link che va da miapaginaweb.html alla pagina Web sul Medioevo di Wikipedia <a href= http://it.wikipedia.org/wiki/medioevo >Il medioevo</a> Link che va da miapaginaweb.html a altrapagina.html <a href= Documenti/altrapagina.html >Un altra pagina</a> Link che va da miapaginaweb.html ad un àncora interna definita su un paragrafo <a href= #lamiaancora >Vai ad un altro paragrafo</a>... <p id= lamiaancora >Il paragrafo dove è definito il punto d arrivo</p> Link che va da miapaginaweb.html all àncora Bibliografia della pagina Web sul Medioevo di Wikipedia <a href= http://it.wikipedia.org/wiki/medioevo#bibliografia > Vai alla bibliografia dell articolo sul Medioevo</a> La cartella La mia cartella contiene un file HTML e la cartella Documenti. All interno di Documenti è contenuto un altro file HTML
Strutture complesse: immagine, lista e tabella
Immagine In HTML un immagine è descritta da un elemento vuoto chiamato img L elemento ha (quasi) sempre due attributi specificati! src, contiene l URL della risorsa vera e propria in cui l immagine è definita " assoluto protocollo + host + risorsa (es: http://www.google.it/images/logo.gif) " relativo (alla posizione in cui il documento si trova) risorsa (es: immagine.jpg)! alt, in cui viene specificato il testo alternativo visualizzato dal browser nel caso in cui sia impossibile caricare l immagine <body> <p>esempio di immagine con URL assoluto.</p> <img src="http://www.google.it/images/logo.gif" alt="logo di Google"></img> <p>esempio di immagine con URL relativo.</p> <img src="immagine.jpg" alt="un altro testo alternativo"></img> </body>
Sul browser: immagine URL assoluto http://www.google.it/images/logo.gif URL relativo immagine.jpg http://a3.unibo.it/lezioni/ + immagine.jpg http://a3.unibo.it/lezioni/immagini.html (nb: questa pagina Web non esiste)
Lista Le liste sono un elenco di oggetti organizzati solitamente in uno o più paragrafi Sono definite dagli elementi ul, se la si vuole puntata, o ol, se la si vuole ordinata Ogni oggetto di una lista è definito dall elemento li, il quale solitamente contiene testo o uno o più paragrafi <body> <ul> <li>questa è una lista puntata con un solo paragrafo, chiaramente sottinteso.</li> <li><p>ovviamente, posso anche specificarlo esplicitamente il paragrafo.</p></li> </ul> <ol> <li> <p>con questa lista ordinata si vuole mettere in evidenza come sia necessario l'elemento "p" nel caso in cui si voglia specificare più di un paragrafo per "oggetto lista".</p> <p>infatti, questo e il precedente paragrafo appartengono allo stesso oggetto.</p> </li> </ol> </body>
Sul browser: lista Contenuto della lista puntata (o non ordinata) Contenuto della lista ordinata
Tabella Le tabelle consentono di impaginare dati aggregati, organizzati in una struttura a griglia formata da righe e colonne L elemento per la creazione di una tabella è table Siccome la scrittura di una tabella in HTML procede per righe, tutti gli elementi contenuti in table sono tr (table row, appunto) All interno degli elementi tr posso specificare due tipologie diversi di cella: td (cella dati) o th (cella di intestazione) <body> <table border= 1 > <tr> <th>prima cella di intestazione</th> <th>seconda cella di intestazione</th></tr> <tr> <td>questa è una cella dati, il cui paragrafo è sottinteso.</td> <td><p>come per le liste, anche le tabelle possono contenere espliciti uno o più paragrafi.</p></td> </tr> </table> </body>
Tabella table Sul browser: tabella
Prima riga tr Seconda riga tr Sul browser: tabella
Sul browser: tabella Celle di intestazione th Celle dati td Le colonne vengono definite automaticamente a seconda del numero di celle presenti nelle varie righe
Consigli per l esame
Regole d oro L esame è semplice se vi esercitate a casa Venire alla prova pratica senza aver provato nemmeno una volta a fare un documento HTML è completamente inutile (leggasi: difficilmente supererete l esame) Quindi provate, provate, provate