Get cached
annuncio pubblicitario
Creazione di pagine Web strutture complesse Silvio Peroni [email protected] 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"/> ecco il trucco per ottenere quella visualizzazione! </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> • • 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 <a href="città di arrivo">cartello stradale</a> esempio <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 oppure <h2 id=”Storia”>Storia</h2> <h2> <a name=”Storia”>Storia</a> </h2> Esempi La cartella “La mia cartella” contiene un file HTML e la cartella “Documenti”. All’interno di “Documenti” è contenuto un altro file HTML • • • Link che va da “miapaginaweb.html” alla pagina Web sul Medioevo di Wikipedia • Link che va da “miapaginaweb.html” all’àncora “Bibliografia” della 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> <a href=”http://it.wikipedia.org/wiki/Medioevo#Bibliografia”> Vai alla bibliografia dell’articolo sul Medioevo</a> 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 • All’interno degli elementi tr posso specificare due tipologie diversi di cella: td (cella dati) o th (cella di intestazione) Siccome la scrittura di una tabella in HTML procede per righe, tutti gli elementi contenuti in table sono tr (table row, appunto) <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> Sul browser: tabella Tabella table Sul browser: tabella Prima riga tr Seconda riga tr 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
