Creare un sito con XHTML e CSS. Claudio Canavese (CoD),

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Creare un sito con XHTML e CSS. Claudio Canavese (CoD), "

Transcript

1 Creare un sito con XHTML e CSS Claudio Canavese (CoD),

2 Copyright (C) 2009 Claudio Canavese. È garantito il permesso di copiare, distribuire e/o modificare questo documento seguendo i termini della Licenza per Documentazione Libera GNU, Versione 1.2 o ogni versione successiva pubblicata dalla Free Software Foundation; con le Sezioni Non Modificabili Chi siamo, Come contattarci e Serate a tema, con i Testi Copertina Creare un sito con XHTML e CSS, e nessun Testo di Retro Copertina. Una copia della licenza è acclusa nella sezione intitolata "Licenza per Documentazione Libera GNU". Tutti i codici XHTML e CSS presenti in questo documento sono distribuiti come Pubblico Domino. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with the Invariant Sections being Chi siamo, Come contattarci and Serate a tema, with the Front-Cover Texts being Creare un sito con XHTML e CSS, and no Back-Cover Texts. A copy of the license is included in the section entitled "Licenza per Documentazione Libera GNU". All XHTML and CSS code in this document are released under Public Domain.

3 Chi siamo A.L.I.D. è un'associazione di volontariato, senza scopo di lucro, che persegue i seguenti fini: 1. Diffondere e promuovere il software libero 2. Favorire la diffusione degli strumenti informatici mediante una corretta alfabetizzazione 3. Contrastare l'adozione di standard chiusi per la gestione elettronica dei documenti, favorendo l'adozione di standard pubblici e liberamente accessibili 4. Favorire l'adozione di licenze di tipo libero anche nella pubblicazione di documentazione tecnica, nei testi scolastici e in tutta la produzione culturale e artistica in genere 5. Favorire il recupero di hardware in disuso attraverso l'utilizzo di software libero 6. Favorire l'accessibilità del software libero, lo sviluppo di un nuovo software libero, la manutenzione di quello esistente e la traduzione in italiano della documentazione e del software stesso 7. Favorire l'adozione del software libero all'interno del mondo degli enti pubblici e privati, delle imprese, dell'associazionismo, della pubblica amministrazione, dell'educazione, della ricerca L'Associazione collabora con altre associazioni affini che perseguano obiettivi analoghi, sia in ambito locale che nazionale o internazionale. Come contattarci Inviando una a o visitando il nostro sito Associazione per le Libertà Informatiche e Digitali Via giovanni Torti Genova C.F

4 SERATE A TEMA Le Serate a tema di ALID sono una serie di incontri aperti a tutti e pensati per avvicinare il grande pubblico ad alcuni argomenti del panorama informatico e digitale. Tutte le serate sono assolutamente gratuite ed i partecipanti, se lo desiderano, possono ricevere copia dei software presentati ed utilizzati durante la serata. Le serate si svolgono sempre il lunedì sera, alle 21, nella sede di ALID in via Giovanni Torti 35 a Genova. Per i laboratori è consigliato prenotare una postazione pc sul sito

5 Indice generale 1 Codice vs. Grafica Il WEB Come funziona La storia In principio c'era l'html La guerra dei browser Il W3C Il linguaggio XHTML Concetti e stili Sintassi fondamentale La nostra prima pagina XHTML La sezione BODY I paragrafi Grassetti e corsivi Tag di blocco e tag in linea Le immagini I link Qualcosa di più complicato CSS: i fogli di stile Sintassi fondamentale Legare il CSS al XHTML Il primo stile Qualcosa di più complicato ID e classi: il CSS alla massima potenza Gli ID Le classi Padri e figli Mischiare le cose La cascata Progettare un layout I div Unità di misura Posizionamento Il layout a due colonne ed intestazione Conclusioni Licenza per Documentazione Libera GNU PREAMBLE APPLICABILITY AND DEFINITIONS VERBATIM COPYING COPYING IN QUANTITY MODIFICATIONS COMBINING DOCUMENTS COLLECTIONS OF DOCUMENTS AGGREGATION WITH INDEPENDENT WORKS TRANSLATION TERMINATION FUTURE REVISIONS OF THIS LICENSE...43

6 1 Codice vs. Grafica Molti si chiedono perché dovrei imparare a scrivere del codice HTML quando ci sono molti programmi che lo fanno per me mentre disegno col mouse? In realtà creare un sito web scrivendo direttamente il codice assicura alcuni importati vantaggi. I vantaggi principali sono: maggior controllo su ogni aspetto della pagina e del sito maggiore compatibilità con i browser, anche con quelli vecchi o con quelli speciali come i programmi usati dai telefonini o dai disabili file più piccoli rispetto a quelli generati con gli editor grafici che spesso inseriscono cose inutili che appesantiscono il codice accessibilità Per accessibilità si intende la possibilità per un disabile di accedere al contenuto ed ai servizi offerti da un sito. Creare un sito accessibile (ad esempio utilizzabile con un browser speciale che trasforma il testo in voce oppure in braille) può davvero fare la differenza per alcune persone tra essere un handicappato e poter interagire col mondo, informarsi, studiare, persino lavorare.

7 2 Il WEB 2.0 Come funziona Sapere come funziona una comunicazione tra un client (il computer del nostro utente) ed un server (su cui è ospitato il sito che abbiamo creato) può essere molto utile per capire cosa possiamo e cosa non possiamo fare. La comunicazione di base tra client e server avviene in tre passi: Passo 1: Il client contatta il server e richiede un file Passo 2: Il server risponde inviando il file richiesto oppure comunicando che il file non esiste Passo 3: La comunicazione viene interrotta Questo ultimo passo è molto importante: tra client e server non si instaura una comunicazione fissa, come quella telefonica, ma ogni volta che una pagina è stata ricevuta il nostro server si dimentica completamente del client fino alla richiesta successiva. Questa procedura viene ripetuta per ogni immagine contenuta in una pagina web, per ogni foglio di stile e per ogni oggetto esterno che abbiamo incluso.

8 2.1 La storia In principio c'era l'html La prima idea di web nasce nel 1989, a marzo, quando sir Tim Berners-Lee scrive una proposta di sistema per comunicare informazioni attraverso internet, intitolata Information Management: A Proposal 1. La prima idea di ipertesto, cioè di un testo in grado di trasportare l'utente verso un altro testo attraverso i link, nasce nel 1990 con il documento WorldWideWeb: Proposal for a HyperText Project 2 ad opera sempre di Tim Berners-Lee assieme a Robert Cailliau e ad altri. Sempre nel 1990, a Natale, nasce il primo server web della storia, basato su un computer NeXT. L'HTML, cioè il linguaggio pensato per creare ipertesti e trasmettere documenti attraverso internet, era in origine molto semplice. Ecco un esempio tratto dalla prima pagina web della storia3: <TITLE>The World Wide Web project</title>... <H1>World Wide Web</H1>... <P> Everything there is online about W3 is linked directly or indirectly to this document, including an... </P>

9 Come si può facilmente vedere l'html si basa sul concetto di tag, cioè di etichetta. Se vogliamo definire il titolo di un documento non facciamo altro che appiccicare l'etichetta TITLE prima e dopo la frase che costituisce il titolo, avendo cura di chiudere l'etichetta aggiungendo un carattere slash (il carattere / ) prima del secondo TITLE. La stessa cosa si può fare per un titolo di primo livello, usando il tag H1 (cioè heading 1) oppure con il paragrafi usando il tag P. I tag sono sempre scritti tra i segno minore e maggiore La guerra dei browser L'HTML era un sistema semplice e allo stesso tempo molto potente ed ebbe un incredibile successo sin dalle sue prime applicazioni. Presto iniziarono a diffondersi i primi web browser, programmi in grado di interpretare questo linguaggio e (successivamente) differenziare graficamente titoli, paragrafi, elenchi, eccetera, permettendo anche la navigazione attraverso i link. Nel 1994 compare sulla scena internazionale il browser Netscape Navigator, un programma a pagamento che contiene parecchie innovazioni rispetto ai prodotti della concorrenza, l'anno dopo Microsoft crea Internet Explorer 1. Inizia così la Prima Guerra dei Browser, una sanguinosa battaglia per ottenere il predominio sul mercato dei browser, principalmente combattuta da Netscape e Microsoft. Per vincere sull'avversario entrambe le ditte inventano nuovi tag, brevettati e non copiabili, che possono essere interpretati solo dal loro prodotto; sono i tag proprietari, che si diffondono velocemente tra i creatori di siti web. Microsoft, ad esempio, crea il tag MARQUEE che permette di far scorrere il testo in maniera animata, Netscape risponde con il tag BLINK, che fa lampeggiare il testo. Microsoft crea il tag BGSOUND che perette di inserire un suono automatico di sottofondo, Netscape rilancia con il tag EMBED in grado di incorporare nelle pagine web non solo suoni ma anche filmati e altri oggetti dinamici. I creatori di siti web iniziano ad apporre speciali loghi sulle loro pagine con scritto sito visibile solo con Internet Explorer oppure sito ottimizzato per Netscape Navigator, diventando quindi parte attiva nella guerra tra i browser e spingendo i loro visitatori ad acquistare l'uno o l'altro prodotto. Quando Netscape inventa il tag FONT, che permette di cambiare il tipo di carattere, la dimensione e altri attributi del testo, le pagine web diventano rapidamente incomprensibili: il codice si riempie di tag che possono essere visti solo da un prodotto specifico e una semplice azione come navigare in internet diventa ogni giorno più difficile, dovendo districarsi nella rete delle compatibilità.

10 2.2 Il W3C La situazione si fa presto talmente insostenibile che una persona, che fino ad allora era stata in silenzio, decide di dire basta. Non si tratta di una persona qualunque, ma proprio di Tim Berners-Lee: l'uomo che ha inventato il web. Nasce così il W3C o World Wide Web Consortium, un organizzazione libera con il compito di definire gli standard internazionali per la comunicazione attraverso internet ed evitare quindi che le singole ditte possano imporre tag proprietari e brevetti. Il W3C inizia un'opera di disinfezione del codice HTML, ripulendolo dai tag proprietari ed iniziando la campagna Viewable With Any Browser, cioè Visibile con tutti i browser. La Prima Guerra dei Browser finisce ufficialmente quando Microsoft, con una mossa inaspettata, decide di fornire Internet Explorer assieme al sistema operativo Windows, scoraggiando così completamente l'acquisto di qualunque altro browser sul mercato: la gente è convinta che Internet Explorer sia fornito gratuitamente con il sistema operativo e quindi non è motivata ad acquistarne altri. Netscape subisce un brusco calo di vendite e dopo poco fallisce, ma prima di chiudere decide di rilasciare il codice sorgente di Netscape Navigator liberamente. Questo codice verrà preso dalla comunità del software libero, migliorato e aggiornato e darà vita prima al browser Mozilla e poi al più noto Mozilla Firefox e al motore di rendering Gecko (usato dai browser Netscape, SeaMonkey, Beonex, Camino, Galeon, Epiphany e da molti altri) Nel 1990 il W3C rilascia un nuovo standard chiamato XHTML, un sorta di HTML migliorato, anzi: ripensato da zero per essere più potente, più compatibile e più accessibile dei suoi predecessori.

11 3 Il linguaggio XHTML 3.0 Concetti e stili XHTML è un linguaggio completamente orientato alla marcatura dei concetti: non ha alcun tag per definire lo stile. Tutta la parte di presentazione di una pagina web è lasciata al nuovo linguaggio CSS, separando così nettamente la parte di informazione da quella di presentazione. Dall'unione di XHTML e CSS nasce la pagina web finale, contenente i concetti contenuti nel XHTML formattati secondo le regole specificate nel CSS Comprendere la separazione dei concetti dallo stile è fondamentale per creare siti web professionali e accessibili. Ad esempio: nel vecchio HTML esisteva il tag B il cui compito era quello di rendere in grassetto (B come bold) alcune parole. Nel XHTML questo tag è stato sostituito con strong, il cui significato è parte di testo con una forza maggiore rispetto al resto. Graficamente anche strong viene reso con il grassetto, ma concettualmente c'è una bella differenza: un lettore di schermo può leggere le parti di testo marcate come strong usando una voce più marcata e dando così una vera idea del concetto che chi può vedere associa inconsciamente al grassetto. Allo stesso modo il vecchio tag I per il corsivo è stato sostituito con em che significa enfasi.

12 Utilizzando i fogli di stile possiamo non solo specificare la resa grafica di tag come strong ed em, ma anche la resa vocale (coi fogli di stile speciali per i lettori di schermo) o per la stampa, le proiezioni ed altro. Possiamo addirittura avere più stili per una stessa pagina e permettere all'utente di navigare nel nostro sito con i colori e l'impaginazione che preferisce. 3.1 Sintassi fondamentale Vediamo ora la sintassi fondamentale dell'xhtml. L'XHTML usa i tag come il vecchio HTML, ma scritti esclusivamente minuscoli. Via via che proseguiremo con gli esempi vedremo alcuni esempi di tag. La struttura di una pagina XHTML è simile a questa: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> </head> <body> </body> </html> Possiamo identificare tre sezioni fondamentali: la DOCTYPE, cioè la dichiarazione di che linguaggio abbiamo usato per scrivere la pagina web. Nei nostri esempi utilizzeremo la DOCTYPE XHTML versione 1.0 strict, dove strict sta a significare completa aderenza allo standard w3c. La DOCTYPE è l'unica parte di una pagina XHTML che non è compresa nel tag HTML. la sezione head che contiene informazioni di supporto alla pagina. Qui inseriremo l'autore della pagina, il titolo da mostrare nella barra del titolo del browser, le parole chiave, eccetera. Qui è dove specificheremo anche il foglio di stile da utilizzare. La sezione body che contiene il testo vero e proprio della pagina La DOCTYPE è molto complicata, ma per fortuna è sempre uguale ed è sufficiente fare copia e incolla da una pagina già scritta senza porsi tante domande.

13 3.2 La nostra prima pagina XHTML Iniziamo ora con un semplice esercizio: creeremo la nostra prima pagina XHTML specificando un testo come titolo del documento. Apriamo quindi un editor di testo ed inseriamo la struttura base della pagina mostrata nel paragrafo precedente, poi, nella sezione head, inseriamo un tag title contenente il testo La mia prima pagina web. Il codice finale dovrebbe apparire come questa: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia prima pagina web</title> </head> <body> </body> </html> Aprendo questa pagina in un browser possiamo notare che in alto, nella barra del titolo della finestra, è comparso il testo che abbiamo specificato, mentre la pagina vera e propria è completamente vuota. Questo accade perché, come già detto, la sezione head contiene solo informazioni di supporto alla pagina. 3.3 La sezione BODY Ora spostiamoci nella sezione body ed inseriamo un tag h1 contenente il testo Ciao mondo!. Il nostro codice dovrebbe apparire così: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia prima pagina web</title> </head> <body> <h1>ciao mondo!</h1> </body> </html>

14 h1 significa intestazione di primo livello ed è il tag utilizzato per i titoli principali delle pagina web. Se carichiamo il file appena creato nel nostro browser noteremo che finalmente è comparso qualcosa nella finestra: il testo che abbiamo inserito è stato formattato come un titolo. Anche se non stiamo ancora specificando uno stile con il CSS (che impareremo dopo) il nostro browser cerca lo stesso di dare una resa grafica differente ai vari elementi della pagina. Questo accade perché tutti i browser utilizzano, in caso non ne trovino uno, un loro foglio di stile interno. 3.4 I paragrafi Inseriamo ora un tag p con alcune linee di testo al suo interno. Proviamo anche ad andare a capo all'interno di questo tag, come mostrato di seguito: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia prima pagina web</title> </head> <body> <h1>ciao mondo!</h1> Ciao mondo, questa è la mia prima pagina web. Accipicchia... sono emozionato! </body> </html> Salviamo e ricarichiamo la pagina nel browser: il testo è comparso ed è stato formattato come un paragrafo ma... è scritto tutto di seguito e non va a capo. Ogni browser, infatti, ignora i ritorni a capo e gli spazi (escluso il primo) in modo da permetterci di formattare il codice in maniera facilmente leggibile senza che questo si ripercuota sulla presentazione finale della pagina.

15 Se volessimo dire al browser di andare a capo dopo il punto dovremmo utilizzare un nuovo tag che significa appunto ritorno a capo. Il codice diventerà: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia prima pagina web</title> </head> <body> <h1>ciao mondo!</h1> Ciao mondo, questa è la mia prima pagina web.<br /> Accipicchia... sono emozionato! </body> </html> notate la strana sintassi del tag br: non viene aperto e poi chiuso ma viene scritto tutto compreso tra i segni minore e maggiore e addirittura con uno spazio prima del carattere slash. In effetti non avrebbe molto senso aprire e chiudere un tag come br, visto che non deve circondare alcun testo ma semplicemente sostituire un carattere singolo, il carattere, appunto, di ritorno a capo. Alcuni tag, quindi, non si aprono e chiudono normalmente ma vengono scritti con questa sintassi speciale. Lo spazio prima dello slash è fortemente consigliato anche se alcuni browser moderni sono in grado di interpretare correttamente il tag anche senza di esso. Programmi più datati, infatti, hanno difficoltà ad adattarsi a questa nuova sintassi (tipica del XHTML e che in HTML normale non esisteva) e lo spazio permette loro di comprendere il tag. Ecco alcuni esempi di tag che non si aprono e chiudono: TAG Significato <br /> vai a capo <hr /> linea orizzontale <img /> immagine

16 3.5 Grassetti e corsivi Abbiamo etto che l'xhtml non ha i tag per grassetto e corsivo, ma dispone dei tag corrispondenti per i concetti di forza e di enfasi. Proviamo quindi ora ad inserire un tag strong su una parola all'interno del nostro paragrafo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia prima pagina web</title> </head> <body> <h1>ciao mondo!</h1> Ciao mondo, questa è la mia <strong>prima</strong> pagina web.<br /> Accipicchia... sono emozionato! </body> </html> come possiamo notare nel browser la parola prima viene resa con il grassetto. Se volessimo renderla in corsivo useremmo il tag em e se volessimo entrambe le cose potremmo scrivere: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia prima pagina web</title> </head> <body> <h1>ciao mondo!</h1> Ciao mondo, questa è la mia <em><strong>prima</strong></em> pagina web.<br /> Accipicchia... sono emozionato! </body> </html>

17 Notate l'ordine in cui abbiamo aperto e chiuso i tag: potevamo specificare anche prima strong e poi em, ma dobbiamo sempre tenere a mente che i tag vanno chiusi in ordine inverso rispetto a come li abbiamo aperti, quindi: <em><strong>prima</strong></em> è corretto <strong><em>prima</em></strong> anche <em><strong>prima</em></strong> è sbagliato e potrebbe portare ad effetti imprevedibili. Per semplificare potremmo dire che i tag si aprono e si chiudono come le parentesi in matematica.

18 3.6 Tag di blocco e tag in linea Proviamo ad inserire del testo subito dopo la chiusura del tag h1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia prima pagina web</title> </head> <body> <h1>ciao mondo!</h1>ciao ciao ciao Ciao mondo, questa è la mia <strong>prima</strong> pagina web.<br /> Accipicchia... sono emozionato! </body> </html> nel browser il testo appena aggiunto viene visualizzato sotto al titolo, non di seguito, anche se non abbiamo specificato alcun ritorno a capo. Questo accade perché il tag h1 appartiene ai tag di blocco ( block level in inglese). Scrivendo invece qualcosa subito sopo la chiusura di strong il testo verrà messo sulla stessa riga, perché strong è un tag in linea ( inline in inglese). Esistono quindi due tipi di tag: quelli che definiscono un blocco di testo (un paragrafo, un titolo, una tabella, un elenco, ecc) e che sono sempre seguiti dall'a-capo e quelli che invece definiscono concetti che possono essere applicati persino a singoli caratteri all'interno di una parola e sono detti tag in linea. Ad esempio: un paragrafo è un TAG a blocco un titolo è un TAG a blocco un grassetto o un corsivo sono TAG in linea un'immagine è un TAG in linea Questo comportamento può comunque essere cambiato utilizzando i fogli di stile.

19 3.7 Le immagini Il web non sarebbe certo così interessante se non potessimo utilizzare le immagini, proviamo quindi ad inserire una immagine nella nostra pagina di esempio. Per inserire una immagine dobbiamo conoscerne il nome (completo di estensione) ed il percorso. Nell'esempio qui sotto abbiamo utilizzato il logo di alid, il cui file si chiama logo.png e risiede nella stessa cartella della nostra pagina di esempio. Tutto quello che dovremo scrivere sarà qualcosa come: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia prima pagina web</title> </head> <body> <h1>ciao mondo!</h1> Ciao mondo, questa è la mia <strong>prima</strong> pagina web.<br /> Accipicchia... sono emozionato! Sono contento di imparare l'xhtml grazie ad <img src="alid.png" alt="alid" /> </body> </html> Se l'immagine non viene visualizzata nel browser abbiamo sbagliato qualcosa. Ad esempio potremmo avere sbagliato il nome, oppure l'immagine potrebbe non essere nella stessa cartella del nostro file XHTML ma in una sotto cartella chiamata magari immagini, in questo caso potremmo scrivere: <img src="immagini/alid.png" alt="alid" /> Notate la strana sintassi del tag img.

20 È un tag che si chiude nello stesso momento i cui si apre, come il tag br, ma contiene al suo interno alcuni parametri aggiuntivi chiamati attributi. L' attributo src stabilisce il percorso in cui andare a prendere l'immagine, mentre l'attributo alt (obbligatorio in XHTML) stabilisce un testo alternativo da mostrare nel caso in cui l'immagine non sia disponibile o non sia possibile visualizzarla (ad esempio perché stiamo usando un lettore di schermo oppure stiamo navigando con un cellulare) Se sbagliamo volutamente il nome dell'immagine, infatti, noteremo che essa viene rimpiazzata dal testo alid, permettendo così anche a chi non può vedere di capire il significato della nostra frase. 3.8 I link L'idea di ipertesto si basa sulla possibilità di collegare più pagine attraverso lo strumento del link. Per provare ad inserire un link abbiamo bisogno di creare una nuova pagina web che collegheremo alla prima. Creiamo quindi la seconda pagina web e scriviamo qualcosa come: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia seconda pagina web</title> </head> <body> <h1>benvenuti nella seconda pagina</h1> Se siete arrivati qui significa che ho imparato a fare i link! </body> </html>

21 salviamola con il nome di pagina2.html e scriviamo nella prima pagina: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia prima pagina web</title> </head> <body> <h1>ciao mondo!</h1> Ciao mondo, questa è la mia <strong>prima</strong> pagina web.<br /> Accipicchia... sono emozionato! Sono contento di imparare l'xhtml grazie ad <img src="alid.png" alt="alid" /> <a href="pagina2.html" title="link a pagina 2">pagina 2</a> </body> </html> notate anche qui la stessa sintassi del tag img, almeno per quanto riguarda l'uso geli attributi, il tag a (a sta per àncora ), però, si apre e si chiude e racchiude al suo interno il testo pagina 2 che diventerà il testo cliccabile del nostro link. L'attributo href indica quale documento stiamo collegando, mentre title ci permette di inserire una descrizione avanzata che comparirà da sola se lasceremo il mouse sul link per alcuni secondi. L'attributo title è sempre obbligatorio in XHTML per motivi di accessibilità, però a volte è inutile specificare ulteriormente del testo quando il link di per sé ha già significato. In questi casi possiamo lasciare title vuoto, scrivendo: <a href="pagina2.html" title="">pagina 2</a> In XHTML vige la regola che tutti gli attributi vadano sempre scritti con il valore tra virgolette, anche se sono vuoti. Possiamo usare sia le virgolette doppie che quelle singole (gli apici). Se tutto va bene dovremmo essere in grado di saltare dalla nostra prima pagina alla seconda.

22 3.9 Qualcosa di più complicato Provate a creare tre pagine web collegate tra loro seguendo questo schema: Pagina 1: una pagina di benvenuto Pagina 2: una breve descrizione del sito Pagina 3: una galleria di immagini (almeno 3) Assicuratevi di inserire i link in tutte le pagine, in modo che ci si possa spostare agevolmente da una all'altra.

23 4 CSS: i fogli di stile 4.0 Sintassi fondamentale Passiamo ora al linguaggio dei fogli di stile, il CSS (sigla che significa Cascading Style Sheets cioè Fogli di stile a cascata) La comodità dei fogli di stile è che possiamo specificare lo stile di ogni tag i un unico file separato e poi inserire un link speciale in tute le pagine a cui vogliamo applicare quello stile. Pensate di dover gestire un sito con 100, 1000 o anche pagine (e non è difficile trovarne in giro per la rete) e di aver avuto l'incarico di cambiare tutti i titoli in modo che siano scritti in rosso, centrati nella pagina e magari con un carattere diverso da quello che usate adesso. Cambiare ogni pagina una per una (come si doveva fare quando veniva usato il tag proprietario FONT) è praticamente impensabile. Con i fogli di stile dovrete solo modificare una riga i un unico file e automaticamente tutte le pagine collegate a quello stile si adatteranno immediatamente. 4.1 Legare il CSS al XHTML Per legare un pagina XHTML ad un foglio di stile è sufficiente aggiunger un tag speciale all'interno della sezione head. Ad esempio se il nostro foglio di stile si chiama stile.css scriveremo: <link rel="stylesheet" href="stile.css" type="text/css" />

24 4.2 Il primo stile Iniziamo ora a definire uno stile per il nostro sito. Riprendiamo la nostra prima pagina di esempio ed assicuriamoci che sia collegata al file stile.css che stiamo per creare: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>la mia prima pagina web</title> <link rel="stylesheet" href="stile.css" type="text/css" /> </head> <body> <h1>ciao mondo!</h1> Ciao mondo, questa è la mia <strong>prima</strong> pagina web.<br /> Accipicchia... sono emozionato! Sono contento di imparare l'xhtml grazie ad <img src="alid.png" alt="alid" /> <a href="pagina2.html" title="link a pagina 2">pagina 2</a> </body> </html> Apriamo ora un nuovo documento e scriviamo: body h1 { background-color: blue; color: white; } { text-align: center; font-size: 30pt; } salviamolo come stile.css e ricarichiamo la pagina nel browser... abbiamo appena inventato i colori! Come potete leggere dal foglio di stile abbiamo specificato uno stile per il tag body (cioè per tutta la pagina web) e per il tag h1 (il titolo) Per body abbiamo inserito le proprietà background-color che definisce il colore di sfondo e color che definisce il colore del testo. Per h1 abbiamo specificato un allineamento al centro della pagina e una dimensione della scritta pari a 30 punti (fate attenzione a non mettere lo spazio tra il valore e l'unita di misura pt ).

25 Noterete che il CSS è un linguaggio molto semplice: basta ricordarsi di chiudere le parentesi graffe e di mettere sempre il punto e virgola dopo ogni proprietà. Possiamo specificare qualunque colore, non solo quelli che hanno un nome inglese (come white, black o yellow) ma in questo caso dovremmo utilizzare una notazione speciale indicando i valori di rosso, verde e blu del colore specificato. Per scrivere un titolo in rosso, ad esempio, potremo scrivere sia: h1 { color: red; } h1 { color: #ff0000; } che: oppure ancora: h1 { color: rgb(255,0,0); } i valori di rosso verde e blu variano da 0 (niente) a 255 (il massimo) e posso essere scritti sia in numeri arabi che in notazione esadecimale (dove ff è 255) Per fortuna non serve essere dei geni o sapere fare calcoli esadecimali a mente per capire come specificare un colore: la maggior parte dei programmi di grafica offre la possibilità di visualizzare questo codice per il colore che abbiamo scelto. Per Firefox, inoltre, è disponibile l'estensione Colorzilla che oltre a fornire la scelta dei colori da una tavolozza permette anche di campionare un colore direttamente da una pagina web. 4.3 Qualcosa di più complicato Provate ora a cambiare il vostro foglio di stile in modo da: avere una pagina sfondo bianco e testo nero avere i titoli centrati e color blu avere i link gialli e in grassetto avere i tag strong in grassetto rosso La proprietà per definire un grassetto è: font-weight: bold;

Guida Operatore. NSE Internet Point. Revisione 0.06 Faber Libertatis

Guida Operatore. NSE Internet Point. Revisione 0.06 Faber Libertatis Guida Operatore NSE Internet Point Revisione 0.06 Faber Libertatis Copyright c 2006 Faber Libertatis. È garantito il permesso di copiare, distribuire e/o modificare questo documento seguendo i termini

Dettagli

Riferimento rapido per l'installazione

Riferimento rapido per l'installazione Riferimento rapido per l'installazione SUSE Seguire le procedure riportate di seguito per installare una nuova versione di SUSE Linux Enterprise Server 11 SP2. Nel presente documento viene fornita una

Dettagli

Riferimento rapido per l'installazione

Riferimento rapido per l'installazione Riferimento rapido per l'installazione SUSE Linux Enterprise Server 11 SP3 Giugno 14, 2013 www.suse.com Seguire le procedure riportate di seguito per installare una nuova versione di SUSE Linux Enterprise

Dettagli

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language HTML 05/04/2012 1 Introduzione Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language L'ipertesto è semplicemente un testo che funziona

Dettagli

Ragioniamo nel dominio del problema, non nel dominio della soluzione. impariamo a ragionare

Ragioniamo nel dominio del problema, non nel dominio della soluzione. impariamo a ragionare Ragioniamo nel dominio del problema, non nel dominio della soluzione in altre parole impariamo a ragionare Mariano Spadaccini spadacciniweb {at} yahoo.it 30 aprile 2007 I pubblicazione 29 novembre 2005

Dettagli

Riferimento rapido per l'installazione

Riferimento rapido per l'installazione Riferimento rapido per l'installazione SUSE Linux Enterprise Server 12 Elenca i requisiti di sistema e guida passo dopo passo all'installazione di SUSE Linux Enterprise Server da DVD o da un'immagine ISO.

Dettagli

Guida A Guida A Mozilla

Guida A Guida A Mozilla Guida A Guida A Mozilla Titolo: Guida a Mozilla Versione: 1.0 Copyright 2003 Riccardo Nigi, YACME S.r.l. 1a Edizione: Agosto 2003 GNU Free Documentation License Notice Il documento è distribuito sotto

Dettagli

OctoMon. Guida Utente. Versione 20080228. Pagina 1 di 28. http://www.truelite.it

OctoMon. Guida Utente. Versione 20080228. Pagina 1 di 28. http://www.truelite.it OctoMon Guida Utente Versione 20080228 Pagina 1 di 28 Author:Christopher R. Gabriel Copyright (C) 2008 Truelite Srl Permission is granted to copy, distribute and/or modify this document

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)

Dettagli

MANUALE IMMEDIATO DI HTML

MANUALE IMMEDIATO DI HTML MANUALE IMMEDIATO DI HTML Realizzato da NiktorTheNat Iniziato il giorno 9 aprile 2010 - terminato il giorno 22 aprile 2010 email autore: niktorthenat@tiscali.it canale youtube: http://www.youtube.com/user/niktorthenat

Dettagli

Il linguaggio HTML - Nozioni di base

Il linguaggio HTML - Nozioni di base Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base Dott. Chiara Braghin braghin@dti.unimi.it What is HTML? HTML (HyperText Markup Language)

Dettagli

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare

Dettagli

HTML HyperText Markup Language:

HTML HyperText Markup Language: HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web 421 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto

Dettagli

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA

Dettagli

Il linguaggio HTML - Nozioni di base (2)

Il linguaggio HTML - Nozioni di base (2) Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghin braghin@dti.unimi.it TAG strutturali visti fino ad ora -

Dettagli

Linux/Unix: i Sistemi Operativi non vulnerabili al classico concetto di virus

Linux/Unix: i Sistemi Operativi non vulnerabili al classico concetto di virus Linux/Unix: i Sistemi Operativi non vulnerabili al classico concetto di virus Marco Pratesi pratesi@telug.it 1 Linux/Unix: i Sistemi Operativi non vulnerabili al classico concetto di virus 2 Indice 1 Che

Dettagli

WEBMASTER. Strategie per programmare siti web e portali. Corso pratico per Webmaster di Daniele Venditti. Manuale di informatica per il web

WEBMASTER. Strategie per programmare siti web e portali. Corso pratico per Webmaster di Daniele Venditti. Manuale di informatica per il web WEBMASTER Strategie per programmare siti web e portali Corso pratico per Webmaster di Daniele Venditti Manuale di informatica per il web www.progettimultimediali.com www.corsi-online.it Questo Ebook è

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

Esercitazioni di HTML

Esercitazioni di HTML Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: Dietro una pagina web Alcuni esempi:

Dettagli

Modulo 1: Fondamenti per scrivere una pagina web

Modulo 1: Fondamenti per scrivere una pagina web Modulo 1: Fondamenti per scrivere una pagina web Indice del modulo Introduzione al linguaggio di marcatura Contenuto, struttura, presentazione Elementi e attributi Proviamo a scrivere una pagina HTML Aggiungere

Dettagli

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat www.dimi.uniud.it/burigat File HTML e tag Un file HTML non è nient'altro che un puro file di testo al cui interno sono presenti delle

Dettagli

Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte.

Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte. Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte. Continuiamo la parte che completerà la trattazione dei link, andando ad operare direttamente

Dettagli

Licenze OpenSource Libertà Digitali. by Stefano (zeno), Donato (scorpio2002) Antonio (Hawkeye)

Licenze OpenSource Libertà Digitali. by Stefano (zeno), Donato (scorpio2002) Antonio (Hawkeye) Licenze OpenSource Libertà Digitali by Stefano (zeno), Donato (scorpio2002) Antonio (Hawkeye) Licenze e Modello OpenSource Compreresti mai una macchina col cofano sigillato?!? Codice Sorgente Linguaggio

Dettagli

Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali?

Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali? Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali? Riprendiamo il discorso, introducendo la tag Body e iniziando

Dettagli

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla! HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!) CENNI SULL'HTML L'html è il linguaggio di base per lo sviluppo di pagine

Dettagli

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013 Corso di HTML Modulo L3 1-Concetti generali 1 Prerequisiti Browser Rete Internet Client e server 2 1 Introduzione In questa Unità introduciamo alcuni semplici elementi del linguaggio HTML, con il quale

Dettagli

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Comandi principali del linguaggio HTML (Hyper Text Markup Language) Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per

Dettagli

HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language) E un linguaggio di scrittura di pagine per Internet (pagine web) nato nel 1992. E un linguaggio di marcatura ipertestuale Non è un linguaggio di programmazione, in quanto

Dettagli

OmegaT per Principianti CAT. di Susan Welsh & Marc Prior

OmegaT per Principianti CAT. di Susan Welsh & Marc Prior OmegaT per Principianti CAT di Susan Welsh & Marc Prior 1 Copyright Copyright 2009-2011 Susan Welsh and Marc Prior Copyright 2013 for this translation Carmelo Serraino & Valter Mura. È concesso il permesso

Dettagli

HTML, XHTML, CSS. cosa c è dietro al web. Informatica Applicata Prof.Emanuela Zilio

HTML, XHTML, CSS. cosa c è dietro al web. Informatica Applicata Prof.Emanuela Zilio HTML, XHTML, CSS cosa c è dietro al web 1 HTML cos è NON è un linguaggio di programmazione ma un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno

Dettagli

GUIDA HTML 4.01 andreavasini@libero.it HTML.IT

GUIDA HTML 4.01 andreavasini@libero.it HTML.IT Tutti i diritti sono riservati. Per pubblicazioni od utilizzo di questo materiale pregasi contattare l autore al seguente indirizzo: andreavasini@libero.it Andrea Vasini HTML.IT HTML.IT - Andrea Vasini

Dettagli

Scrivere una applicazione html, css e javascript per Android

Scrivere una applicazione html, css e javascript per Android Scrivere una applicazione html, css e javascript per Android Prima di tuffarsi dentro, vorrei stabilire rapidamente il campo di gioco. In questo capitolo, definisco termini chiave, confrontare i pro e

Dettagli

Michele Tuttafesta. Appunti di Fisica. (Ultimo aggiornamento: 25 Luglio 2004)

Michele Tuttafesta. Appunti di Fisica. (Ultimo aggiornamento: 25 Luglio 2004) Michele Tuttafesta Appunti di Fisica (Ultimo aggiornamento: 25 Luglio 2004) Copyright Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation

Dettagli

ECDL Libre. La patente europea del computer, libera. Modulo 1: Concetti di base della Information Technology

ECDL Libre. La patente europea del computer, libera. Modulo 1: Concetti di base della Information Technology ECDL Libre ovvero La patente europea del computer, libera Modulo 1: Concetti di base della Information Technology Fabio Spelta 18 Gennaio 2003 Copyright c 2002 FABIO SPELTA. Permission is granted to copy,

Dettagli

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui

Dettagli

INTRODUZIONE ALL HTML

INTRODUZIONE ALL HTML INTRODUZIONE ALL HTML LE REGOLE GENERALI Di seguito, sono raccolti i tag html (comandi) di uso più frequente per la formattazione dei testi e la gestione di una pagina web all interno del nostro sistema

Dettagli

dal laboratorio libri in presenza alla collaborazione online

dal laboratorio libri in presenza alla collaborazione online Centro Sovrazonale di Comunicazione Aumentativa Centro Sovrazonale di Comunicazione Aumentativa dal laboratorio libri in presenza alla collaborazione online a cura di Antonio Bianchi sommario L'impostazione

Dettagli

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas Fogli di stile CSS Il foglio CSS (Cascading Style Sheet, foglio di stile a cascata) è un documento in formato testuale che definisce il controllo sulla visualizzazione della pagina HTML e sul suo layout,

Dettagli

Università degli Studi di Milano

Università degli Studi di Milano Università degli Studi di Milano Corso di Laurea in Sicurezza dei Sistemi e delle Reti Informatiche Lezioni 17 e 18 Creazione di File HTML FABIO SCOTTI Laboratorio di programmazione per la sicurezza Indice

Dettagli

Introduzione al Linguaggio HTML

Introduzione al Linguaggio HTML Introduzione al Linguaggio HTML 2 Cosa e l HTML HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Utilizza un insieme predefinito di marcatori (TAG) per definire la

Dettagli

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità Maria Grazia Ottaviani informatica, comunicazione e multimedialità Unità digitale 1 Ambiente HTML Introduzione Oltre ai linguaggi di programmazione esistono anche linguaggi detti markup. Sono linguaggi

Dettagli

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile CSS Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html CSS: Cascading Style Sheet! Tecnologia W3C per la definizione dello stile di una pagina web! Contenuto e

Dettagli

LEZIONE NO. 1: INTRODUZIONE, ELEMENTI BASE, DI ATTILIO ABBIEZZI

LEZIONE NO. 1: INTRODUZIONE, ELEMENTI BASE, <HEAD> DI ATTILIO ABBIEZZI HTML BASE LEZIONE NO. 1: INTRODUZIONE, ELEMENTI BASE, DI ATTILIO ABBIEZZI FONTI: HTML.IT 1 Breve Introduzione Che cosa significa linguaggio HTML? HTML = HyperText Markup Language Il primo concetto

Dettagli

DISPENSA CORSO WEB DESIGNER

DISPENSA CORSO WEB DESIGNER DISPENSA CORSO WEB DESIGNER Già da qualche anno internet è entrato a far parte della nostra vita quotidiana. Tutti i giorni apriamo il browser (il programma che utilizziamo per navigare in internet) e

Dettagli

Corso html 5. Di Roberto Abutzu. `***********` Tredicesima parte: Le immagini. `**********`

Corso html 5. Di Roberto Abutzu. `***********` Tredicesima parte: Le immagini. `**********` Corso html 5. Di Roberto Abutzu. `***********` Tredicesima parte: Le immagini. `**********` Dopo l'introduzione al linguaggio Css, riprendiamo l'apprendimento del linguaggio Html 5 introducendo le immagini.

Dettagli

Richiami sugli elementi del linguaggio HTML

Richiami sugli elementi del linguaggio HTML Richiami sugli elementi del linguaggio HTML Un documento in formato Web può essere aperto con un browser, attraverso un collegamento a Internet oppure caricandolo dal disco del proprio computer senza connettersi

Dettagli

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 Copyright 2010 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

Primi passi con HTML. Il documento HTML

Primi passi con HTML. Il documento HTML Primi passi con HTML. Il documento HTML La mia prima pagina in HTML Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga.

Dettagli

Protocolli di Sessione TCP/IP: una panoramica

Protocolli di Sessione TCP/IP: una panoramica Protocolli di Sessione TCP/IP: una panoramica Carlo Perassi carlo@linux.it Un breve documento, utile per la presentazione dei principali protocolli di livello Sessione dello stack TCP/IP e dei principali

Dettagli

Guida html e css base

Guida html e css base Sommario Guida html e css base...1 Introduzione...1 Formattare il testo...4 Organizzare il testo in paragrafi...5 Creare le sezioni come in un libro...6 Creare gli elenchi...8 Inserire immagini e collegamenti...11

Dettagli

Parte I - Struttura. Adotta un template. Parte 1 struttura pag. - 1

Parte I - Struttura. Adotta un template. Parte 1 struttura pag. - 1 Tutorial per siti scolastici accessibili con editor web open source Parte I - Struttura Adotta un template Parte 1 struttura pag. - 1 Autore Questa guida è stata realizzata da Gianfranco Bilotti e fa parte

Dettagli

Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. **********

Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. ********** Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. ********** Prime nozioni: Tag e prima pagina, continuazione. Nota bene, al fine di avere anche

Dettagli

Bozza Guida ufficiale vs 1.0

Bozza Guida ufficiale vs 1.0 Bozza Guida ufficiale vs 1.0 Caratteristiche del software Videocopen è un software open source di videoconferenza. Sviluppato in php per la parte web e macromedia flash per la videoconferenza, sfrutta

Dettagli

Creare un Web di FrontPage con un modello

Creare un Web di FrontPage con un modello P RO G E T TO 1 Creare un Web di FrontPage con un modello OBIETTIVI In questo progetto imparerete a: Descrivere FrontPage e spiegare le sue funzioni principali Definire HTML e spiegare l uso dei tag HTML

Dettagli

HTML SITI WEB. FEQUENZA OBBLIGATORIA 80% ESERCITAZIONI (laboratorio) RICONOSCIMENTO 3 CFU. infolab@uniroma3.it host.uniroma3.it/laboratori/infolab

HTML SITI WEB. FEQUENZA OBBLIGATORIA 80% ESERCITAZIONI (laboratorio) RICONOSCIMENTO 3 CFU. infolab@uniroma3.it host.uniroma3.it/laboratori/infolab HTML SITI WEB FEQUENZA OBBLIGATORIA 80% ESERCITAZIONI (laboratorio) RICONOSCIMENTO 3 CFU infolab@uniroma3.it host.uniroma3.it/laboratori/infolab INTERNET Generalmente Internet è definita la rete delle

Dettagli

Gestione dei contenuti web Ultimi eventi

Gestione dei contenuti web Ultimi eventi Gestione dei contenuti web Ultimi eventi Questo manuale illustra le operazioni più comuni per la manutenzione e aggiornamento del sito web http://terremoti.ingv.it/ultimi eventi/ tramite l interfaccia

Dettagli

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup)

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup) HTML Olga Scotti Cos è HTML Hypertext Markup Language non è un linguaggio di programmazione non ha meccanismi che consentono di prendere delle decisioni non è in grado di compiere delle iterazioni linguaggio

Dettagli

Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Immagini Dott. Stefano Burigat www.dimi.uniud.it/burigat Aggiungere immagini E' possibile inserire immagini all'interno delle pagine web in due modi: come contenuto

Dettagli

MixMeister per comuni mortali Antonio Roberto Bellarmino

MixMeister per comuni mortali Antonio Roberto Bellarmino MixMeister per comuni mortali Antonio Roberto Bellarmino Sommario Copyright (C) Antonio Roberto Bellarmino. Permission is granted to copy, distribute and/or modify this document under the terms of the

Dettagli

Language. info@settingweb.it. www.settingweb.it

Language. info@settingweb.it. www.settingweb.it HTML HyperText Markup Language Documenti ipertestuali Sono formati da documenti multimediali: testo, immagini, suoni, video, ecc Comprendono le seguenti parti: contenuto struttura presentazione Che cos

Dettagli

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW 1 INTRODUZIONE AL LINGUAGGIO HTML Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML 3 Architettura

Dettagli

Informatica di Base. Programma Lezioni

Informatica di Base. Programma Lezioni Informatica di Base Lezione III Il linguaggio HTML Hyper Text Markup Language 1 Informatica di Base Programma Lezioni 1 26 ottobre Introduzione Sistema binario e formato dei dati 2 2 novembre Numeri negativi

Dettagli

Le sezioni logiche di una pagina web

Le sezioni logiche di una pagina web Le sezioni logiche di una pagina web Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti. Strutturare logicamente i contenuti di una pagina, creare un template (modello)

Dettagli

I PRINCIPALI TAG DEL LINGUAGGIO HTML

I PRINCIPALI TAG DEL LINGUAGGIO HTML Struttura generica di una pagina Web: I PRINCIPALI TAG DEL LINGUAGGIO HTML Titolo

Dettagli

Gabbia? No Problem! Guida per Sprovveduti e non

Gabbia? No Problem! Guida per Sprovveduti e non Gabbia? No Problem! Guida per Sprovveduti e non Copyright (c) 2008 Haides. è garantito il permesso di copiare, distribuire e/o modificare questo documento seguendo i termini della Licenza per Documentazione

Dettagli

Clicca sulle immagini di preview qui sotto per aprire e visualizzare alcuni esempi di presentazioni dinamiche create con Focusky:

Clicca sulle immagini di preview qui sotto per aprire e visualizzare alcuni esempi di presentazioni dinamiche create con Focusky: Focusky Focusky è l innovativo e professionale software progettato per creare resentazioni interattive ad alto impatto visivo e ricco di effetti speciali (zoom, transizioni, flash, ecc..). A differenza

Dettagli

I principali tag nella realizzazione di pagine web

I principali tag nella realizzazione di pagine web Ministero della Pubblica Istruzione Ufficio Scolastico Regionale per il Veneto Ufficio Scolastico Provinciale di Padova Area della comunicazione e web I principali tag nella realizzazione di pagine web

Dettagli

Introduzione. In questo capitolo

Introduzione. In questo capitolo Introduzione I CSS ( Cascading Style Sheets, fogli di stile a cascata) sono la tecnologia elaborata dal W3C (World Wide Web Consortium; http://www.w3.org/) per definire l aspetto (caratteri, colori e impaginazione)

Dettagli

Ipertesto, navigazione e cenni HTML. Lezione Informatica I CLAWEB

Ipertesto, navigazione e cenni HTML. Lezione Informatica I CLAWEB Ipertesto, navigazione e cenni HTML Lezione Informatica I CLAWEB 1 Il concetto di Ipertesto (1/2) Definizione: Modello testuale in cui le diverse unità di contenuti non sono articolate secondo un ordine

Dettagli

CAPITOLO 6 - LINGUAGGIO HTML INTRODUZIONE

CAPITOLO 6 - LINGUAGGIO HTML INTRODUZIONE INTRODUZIONE Le pagine web sono scritte in HTML, un semplice linguaggio di scrittura. In pratica, un documento HTML non è nient'altro che un file di testo. L'HTML permette di scrivere un documento come

Dettagli

Disegnare il Layout. www.vincenzocalabro.it 1

Disegnare il Layout. www.vincenzocalabro.it 1 Disegnare il Layout www.vincenzocalabro.it 1 Il problema dell interfaccia Una buona interfaccia deve assolvere a diverse funzioni: far percepire i contenuti permettere di individuare le principali aree

Dettagli

Cimini Simonelli - Testa

Cimini Simonelli - Testa WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire

Dettagli

INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E OGGETTI FLASH

INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E OGGETTI FLASH INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E OGGETTI FLASH IMPOSTAZIONE DI UNA IMMAGINE ALL INTERNO DI UNA PAGINA WEB: In questo capitolo è spiegata la procedura di inserimento e modifica di una immagine

Dettagli

Wikijunior Gli animali del bosco

Wikijunior Gli animali del bosco Benvenuto nel wikibook: Wikijunior Gli animali del bosco Edizione: 0.1 04/09/2007 Versione attuale del libro>> Copyright 2007, utenti di Wikibooks. Questo libro è stato pubblicato dagli utenti di Wikibooks.

Dettagli

I link e l'ipertestualità

I link e l'ipertestualità I link e l'ipertestualità I link sono "il ponte" che consente di passare da un documento all altro. In quanto tali, i link sono formati da due componenti: il contenuto che "nasconde" il collegamento (può

Dettagli

Creare un Ipertesto. www.vincenzocalabro.it 1

Creare un Ipertesto. www.vincenzocalabro.it 1 Creare un Ipertesto www.vincenzocalabro.it 1 Obiettivi Il corso si prefigge di fornire: Le nozioni tecniche di base per creare un Ipertesto I consigli utili per predisporre il layout dei documenti L illustrazione

Dettagli

Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********`

Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********` Corso html 5. Di Roberto Abutzu. `***********` Sedicesima parte: Evidenziare il testo e le date. `**********` Nota importante: Questa lezione e la successiva vanno considerate come un'unica lezione. Affronteremo

Dettagli

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori HTML e XML Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi

Dettagli

INTRODUZIONE AD HTML

INTRODUZIONE AD HTML INTRODUZIONE AD HTML I Frames ovvero Le cornici. Nelle lezioni precedenti abbiamo imparato a creare il nostro sito facendo uso di testo, immagini, links e meta comandi. Pochi e semplici ingredienti per

Dettagli

Manuali.net. Nevio Martini

Manuali.net. Nevio Martini Manuali.net Corso base per la gestione di Siti Web Nevio Martini 2009 Il Linguaggio HTML 1 parte Introduzione Internet è un fenomeno in continua espansione e non accenna a rallentare, anzi è in permanente

Dettagli

Sezione 1 / Section 1. Elementi d identità: il marchio Elements of identity: the logo

Sezione 1 / Section 1. Elementi d identità: il marchio Elements of identity: the logo Sezione 1 / Section 1 2 Elementi d identità: il marchio Elements of identity: the logo Elements of identity: the logo Indice 2.01 Elementi d identità 2.02 Versioni declinabili 2.03 Versioni A e A1, a colori

Dettagli

Corso html 5. Di Roberto Abutzu. `***********` Decima parte: il linguaggio Css, introduzione. `**********` Il linguaggio Css, introduzione.

Corso html 5. Di Roberto Abutzu. `***********` Decima parte: il linguaggio Css, introduzione. `**********` Il linguaggio Css, introduzione. Corso html 5. Di Roberto Abutzu. `***********` Decima parte: il linguaggio Css, introduzione. `**********` Il linguaggio Css, introduzione. Col passare del tempo e l'evoluzione del linguaggio html, ma

Dettagli

Come creare pagine WEB

Come creare pagine WEB Come creare pagine WEB E' possibile creare pagine WEB secondo diverse modalità: in modo classico, per cui sara' necessario agire su ogni singola marcatura di ognuna delle x pagine; questa soluzione poco

Dettagli

HTML. giovedì 22 settembre 11

HTML. giovedì 22 settembre 11 HTML Webmaster con strumenti Open Source AGENDA HTML/XHTML Introduzione Html Struttura di una pagina Html Fogli di stile (CSS) HTML/XHTML L'organizzazione che si occupa di standardizzare la sintassi del

Dettagli

Esploriamo Javascript! 1 di Ivan Venuti

Esploriamo Javascript! 1 di Ivan Venuti Esploriamo Javascript! 1 di Ivan Venuti L Html è stato pensato (e creato) per presentare contenuti statici che, visualizzati da utenti diversi, diano sempre lo stesso risultato. Per sopperire a questa

Dettagli

Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online.

Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online. www.icoarena.com Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online. Ico Arena 01. PREMESSA Sviluppare un sito web è costoso Per

Dettagli

HTML 1. HyperText Markup Language

HTML 1. HyperText Markup Language HTML 1 HyperText Markup Language Introduzione ad HTML Documenti HTML Tag di markup Formattazione del testo Collegamenti ipertestuali Immagini Tabelle Form in linea (moduli) Tecnologie di Sviluppo per il

Dettagli

La posta elettronica. ICT per la terza età Le video lezioni della Fondazione Mondo Digitale

La posta elettronica. ICT per la terza età Le video lezioni della Fondazione Mondo Digitale La posta elettronica ICT per la terza età Le video lezioni della Fondazione Mondo Digitale Diapositiva Introduzione Posta elettronica E mail Elettronica Posta In questo argomento del nostro corso impareremo

Dettagli

, utilizzando il tasto destro

, utilizzando il tasto destro HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione (sono linguaggi di programmazione il C, il C++, il Pascal, il Java,

Dettagli

HTML. http://www.w3schools.com/html/default.asp

HTML. http://www.w3schools.com/html/default.asp HTML http://www.w3schools.com/html/default.asp HTML Cosa è l'html? HTML è un linguaggio per descrivere le pagine web. HTML è l'acronimo di H yper T ext M arkup L anguage HTML è un markup language Un linguaggio

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 3 Immagini in documenti HTML 3.1 Rappresentazione delle

Dettagli

APPUNTI DI HTML (TERZA LEZIONE)

APPUNTI DI HTML (TERZA LEZIONE) Il web è costituito non da testi ma da ipertesti. APPUNTI DI HTML (TERZA LEZIONE) I link ci permettono di passare da un testo all altro. I link sono formati da due componenti: IL CONTENUTO "nasconde" il

Dettagli

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE.

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE. Cos'è l'html HTML è una sigla che viene da una frase inglese che vuol dire: " Linguaggio di contrassegno di ipertesti" (Hyper Text Markup Language) L'Html non è un vero e proprio linguaggio di programmazione,

Dettagli

Verifica di Accessibilità del sito www.aots.sanita.fvg.it

Verifica di Accessibilità del sito www.aots.sanita.fvg.it Verifica di Accessibilità del sito www.aots.sanita.fvg.it NOTE: Verifica effettuata in base ai requisiti descritti nell allegato A del Decreto Ministeriale 8 luglio 2005, ai sensi della legge n.4 del 9

Dettagli

UTILIZZO DEL TEMPLATE Parte 1 - struttura

UTILIZZO DEL TEMPLATE Parte 1 - struttura UTILIZZO DEL TEMPLATE Parte 1 - struttura PROGRAMMI UTILIZZATI: gestione del codice HTML - HTML-Kit è un Editor Web non di tipo visuale, che consente la costruzione ex-novo di pagine web o la loro modifica,

Dettagli

Grafica: creare pulsanti con i css.

Grafica: creare pulsanti con i css. Grafica: creare pulsanti con i css. L'articolo originale in lingua inglese Graphics: making buttons with css proviene dal sito eosdev.com ed è stato tradotto e riprodotto per gentile concessione dell'autore.

Dettagli

Registrazione. Scelta del nome

Registrazione. Scelta del nome Introduzione Altervista (www.altervista.org) mette a disposizione le più moderne tecnologie web 2.0 per creare un proprio sito web. In questo tutorial vogliamo guidarvi nella registrazione al sito e nella

Dettagli

Guida Al Linux Desktop KDE

Guida Al Linux Desktop KDE Guida Al Linux Desktop KDE Titolo: Versione: 1.0 Copyright 2003 Diego Ercolani, YACME S.r.l. 1a Edizione: Agosto 2003 GNU Free Documentation License Notice Il documento è distribuito sotto i termini della

Dettagli

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML Reti Linguaggio HTML 1 HTML = Hypertext Markup Language E il linguaggio usato per descrivere documenti ipertestuali Ipertesto = Testo + elementi di collegamento ad altri testi (link) Linguaggio di markup:

Dettagli

L interfaccia di P.P.07

L interfaccia di P.P.07 1 L interfaccia di P.P.07 Barra Multifunzione Anteprima delle slide Corpo della Slide Qui sotto vediamo la barra multifunzione della scheda Home. Ogni barra è divisa in sezioni: la barra Home ha le sezioni

Dettagli