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

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

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

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

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

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

(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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Educazione didattica per la E-Navigation

Educazione didattica per la E-Navigation Educazione didattica per la E-Navigation Guida utente per l utilizzo della piattaforma WIKI Rev. 3.0 23 febbraio 2012 Guida EDEN rev. 3.0 P. 1 di 24 23/02/2012 Indice Come registrarsi... 3 Utilizzo della

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

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

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

Il foglio elettronico

Il foglio elettronico Il foglio elettronico Foglio di calcolo, Spreadsheet in inglese, Permette di elaborare DATI NUMERICI. E una TABELLA che contiene numeri che possono essere elaborati con FUNZIONI matematiche e statistiche.

Dettagli

MODULO 3. Microsoft Excel. TEST ED ESERCIZI SU: http://www.informarsi.net/ecdl/excel/index.php

MODULO 3. Microsoft Excel. TEST ED ESERCIZI SU: http://www.informarsi.net/ecdl/excel/index.php MODULO 3 Microsoft Excel TEST ED ESERCIZI SU: http:///ecdl/excel/index.php Foglio Elettronico - SpreadSheet Un foglio elettronico (in inglese spreadsheet) è un programma applicativo usato per memorizzare

Dettagli

Uso del browser, posta elettronica e motori di ricerca Gmail e Google

Uso del browser, posta elettronica e motori di ricerca Gmail e Google Facoltà di Lettere e Filosofia Cdl in Scienze dell Educazione A.A. 2010/2011 Informatica (Laboratorio) Uso del browser, posta elettronica e motori di ricerca Gmail e Google Author Kristian Reale Rev. 2011

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

WEB MARKETING CODE by scamurra.it

WEB MARKETING CODE by scamurra.it WEB MARKETING CODE by scamurra.it www.scamurra.it info@scamurra.it Livello: principiante CAPITOLO 1 INTRODUZIONE CAPITOLO 2 L IMPORTANZA DEI CONTENUTI CAPITOLO 3 UN PO DI CAPITOLO 4 PULIZIA DEL

Dettagli

Internet Terminologia essenziale

Internet Terminologia essenziale Internet Terminologia essenziale Che cos è Internet? Internet = grande insieme di reti di computer collegate tra loro. Rete di calcolatori = insieme di computer collegati tra loro, tramite cavo UTP cavo

Dettagli

Siti web e Dreamweaver. La schermata iniziale

Siti web e Dreamweaver. La schermata iniziale Siti web e Dreamweaver Dreamweaver è la soluzione ideale per progettare, sviluppare e gestire siti web professionali e applicazioni efficaci e conformi agli standard e offre tutti gli strumenti di progettazione

Dettagli

Guida alla composizione di modelli OpenOffice

Guida alla composizione di modelli OpenOffice Tekne Informatica & Comunicazione Guida alla composizione di modelli OpenOffice guida rapida per creare e modificare modelli OpenOffice per XDent 01 aprile 2011 Sommario Premessa... 2 Ottenere ed Installare

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

Navigare in Internet

Navigare in Internet Navigare in Internet ICT per la terza età Le video lezioni della Fondazione Mondo Digitale Diapositiva Introduzione Word Wide Web = WWW = Ragnatela estesa a tutto il mondo In questo argomento del nostro

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

Word Elaborazione testi

Word Elaborazione testi I seguenti appunti sono tratti da : Consiglio Nazionale delle ricerche ECDL Test Center modulo 3 Syllabus 5.0 Roberto Albiero Dispense di MS Word 2003 a cura di Paolo PAVAN - pavan@netlink.it Word Elaborazione

Dettagli

Olga Scotti. Esercizi. Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file)

Olga Scotti. Esercizi. Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file) Esercizi Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file) Esercizi 12biz htdocs img Index.html Canzoni.html Galleria.htm guestbook

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

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

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

Corso WEB. Scuola Media Statale Ferentino. Aprile 2011. relatore: ing. Gianluca VENTURI. Corso WEB - lezione 3 1. www.ergonotec.it

Corso WEB. Scuola Media Statale Ferentino. Aprile 2011. relatore: ing. Gianluca VENTURI. Corso WEB - lezione 3 1. www.ergonotec.it Corso WEB Scuola Media Statale Ferentino Aprile 2011 relatore: ing. Gianluca VENTURI Corso WEB - lezione 3 1 UN PO' DI RIPASSO... Corso WEB - lezione 3 2 ESERCITAZIONE Verifichiamo se abbiamo acquisito

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

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

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

LUdeS Informatica 2 EXCEL. Prima parte AA 2013/2014

LUdeS Informatica 2 EXCEL. Prima parte AA 2013/2014 LUdeS Informatica 2 EXCEL Prima parte AA 2013/2014 COS E EXCEL? Microsoft Excel è uno dei fogli elettronici più potenti e completi operanti nell'ambiente Windows. Un foglio elettronico è un programma che

Dettagli

Corso Creare Siti WEB

Corso Creare Siti WEB Corso Creare Siti WEB INTERNET e IL WEB Funzionamento Servizi di base HTML CMS JOOMLA Installazione Aspetto Grafico Template Contenuto Articoli Immagini Menu Estensioni Sito di esempio: Associazione LaMiassociazione

Dettagli

IMPARIAMO WORD. Nella prima lezione abbiamo digitato un breve testo e abbiamo imparato i comandi base per formattarlo, salvarlo e stamparlo.

IMPARIAMO WORD. Nella prima lezione abbiamo digitato un breve testo e abbiamo imparato i comandi base per formattarlo, salvarlo e stamparlo. II^ lezione IMPARIAMO WORD Nella prima lezione abbiamo digitato un breve testo e abbiamo imparato i comandi base per formattarlo, salvarlo e stamparlo. Oggi prendiamo in esame, uno per uno, i comandi della

Dettagli

01. Conoscere l area di lavoro

01. Conoscere l area di lavoro 01. Conoscere l area di lavoro Caratteristiche dell interfaccia Cambiare vista e dividere le viste Gestire i pannelli Scegliere un area di lavoro Sistemare le barre degli strumenti Personalizzare le preferenze

Dettagli

[Dimensionare la pagina-creare le tabelle-formattare le tabelle-formattare la pagina

[Dimensionare la pagina-creare le tabelle-formattare le tabelle-formattare la pagina [Dimensionare la pagina-creare le tabelle-formattare le tabelle-formattare la pagina Creare cartelle per salvare il lavoro] Per iniziare dobbiamo imparare a gestire quello spazio bianco che diverrà la

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

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

IL MIO PRIMO SITO: NEWS

IL MIO PRIMO SITO: NEWS Pagina 1 IL MIO PRIMO SITO: NEWS Sommario IL MIO PRIMO SITO: NEWS...1 Introduzione...2 I Contenitori...2 Creo un Contenitore...3 I Tracciati...4 Creo le Notizie...6 Inserisco il Testo...6 Inserisco un

Dettagli

Coder Dojo Tutorial 3

Coder Dojo Tutorial 3 Coder Dojo Tutorial 3 Complimenti ancora, son certo che hai già imparato molte più cose di quel che pensi! Tempo per fare qualcosa di un po più divertente, come mettere insieme un foglio dedicato a definire

Dettagli

Concetti di base della Tecnologia dell'informazione e della Comunicazione. Studio Elfra sas Via F.lli Ruffini 9 17031 Albenga SV 0182596058

Concetti di base della Tecnologia dell'informazione e della Comunicazione. Studio Elfra sas Via F.lli Ruffini 9 17031 Albenga SV 0182596058 by Studio Elfra sas Concetti di base della Tecnologia dell'informazione e della Comunicazione Aggiornato a Aprile 2009 Informatica di base 1 Elaborazione testi I word processor, o programmi per l'elaborazione

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

Guida Joomla. di: Alessandro Rossi, Flavio Copes

Guida Joomla. di: Alessandro Rossi, Flavio Copes Guida Joomla di: Alessandro Rossi, Flavio Copes Grafica e template 1. 15. La grafica e i template Personalizzare l'aspetto del sito aggiungendo nuovi template e customizzandoli 2. 16. Personalizzare il

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

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

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

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

Foglio di calcolo. Il foglio di calcolo: Excel. Selezione delle celle

Foglio di calcolo. Il foglio di calcolo: Excel. Selezione delle celle Foglio di calcolo Il foglio di calcolo: Excel I dati inseriti in Excel sono organizzati in Cartelle di lavoro a loro volta suddivise in Fogli elettronici. I fogli sono formati da celle disposte per righe

Dettagli

HTML INFORMATICA PER LE APPLICAZIONI ECONOMICHE PROF.SSA BICE CAVALLO

HTML INFORMATICA PER LE APPLICAZIONI ECONOMICHE PROF.SSA BICE CAVALLO HTML INFORMATICA PER LE APPLICAZIONI ECONOMICHE PROF.SSA BICE CAVALLO Introduzione 2 HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio

Dettagli

www.filoweb.it STAMPA UNIONE DI WORD

www.filoweb.it STAMPA UNIONE DI WORD STAMPA UNIONE DI WORD Molte volte abbiamo bisogno di stampare più volte lo stesso documento cambiando solo alcuni dati. Potremmo farlo manualmente e perdere un sacco di tempo, oppure possiamo ricorrere

Dettagli

Creare tabelle con Word

Creare tabelle con Word Creare tabelle con Word Premessa In questa breve guida userò spesso il termine "selezionare". "Selezionare", riferito ad un documento informatico, vuol dire evidenziare con il mouse, o con altre combinazioni

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

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

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti EUROPEAN COMPUTER DRIVING LICENCE WEBSTARTER - Versione 1.5 Copyright 2009 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

Introduzione al linguaggio HTML. A. Lorenzi - Università di Bergamo - Facoltà di Economia 1

Introduzione al linguaggio HTML. A. Lorenzi - Università di Bergamo - Facoltà di Economia 1 Introduzione al linguaggio HTML A. Lorenzi - Università di Bergamo - Facoltà di Economia 1 Richiami introduttivi (1) sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno

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

Introduzione all'uso di

Introduzione all'uso di Introduzione all'uso di Microsoft Outlook Express 6 Outlook Express 6 è un programma, incluso nel browser di Microsoft Internet Explorer, che ci permette di inviare e ricevere messaggi di posta elettronica.

Dettagli

Il linguaggio HTML - Parte 4

Il linguaggio HTML - Parte 4 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 4 Dott. Chiara Braghin braghin@dti.unimi.it HTML - I Riferimenti Ipertestuali Il piatto forte di tutto

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

HTML+XML= XHTML. Che cos è l XHTML

HTML+XML= XHTML. Che cos è l XHTML HTML+XML= XHTML Il ritorno al futuro del WEB A cura di Barbara Lotti Che cos è l XHTML Nel gennaio del 2000 il W3C ha rilasciato, anziché una nuova versione, una riformulazione dell HTML come applicazione

Dettagli

Esercizi. Introduzione all HTML. Il WWW

Esercizi. Introduzione all HTML. Il WWW Politecnico di Milano Esercizi Introduzione all HTML Il WWW Il World Wide Web: una rete di pagine connesse tra loro e distribuite su diverse macchine Il server Web contiene le pagine Web da visualizzare

Dettagli

Guida al sito del CSV

Guida al sito del CSV www.csv.vda.it Guida al sito del CSV Come è strutturato, come si aggiorna Il CSV, da sempre attento alle opportunità offerte dalle nuove tecnologie, ha ritenuto necessario dotarsi di un nuovo sito internet.

Dettagli

ISTRUZIONI PASSO PASSO PER CREARE UN SITO CON JOOMLA SU ALTERVISTA

ISTRUZIONI PASSO PASSO PER CREARE UN SITO CON JOOMLA SU ALTERVISTA ISTRUZIONI PASSO PASSO PER CREARE UN SITO CON JOOMLA SU ALTERVISTA REGISTRARSI AL SITO ALTERVISTA, PER OTTENERE SPAZIO WEB GRATUITO o Andare sul sito it.altervista.org o Nel riquadro al centro, scrivere

Dettagli

Il linguaggio HTML - Parte 2

Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza

Dettagli

Rete Internet ALFABETIZZAZIONE INFORMATICA. Prof. Patti Giuseppe

Rete Internet ALFABETIZZAZIONE INFORMATICA. Prof. Patti Giuseppe Rete Internet ALFABETIZZAZIONE INFORMATICA Prof. Patti Giuseppe SERVIZI OFFERTI DA INTERNET INTERNET POSTA ELETTRONICA INTERNET Internet in pratica è una rete vastissima, costituita dall interconnessione

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

I PROGRAMMI PER L ELABORAZIONE DEL TESTO

I PROGRAMMI PER L ELABORAZIONE DEL TESTO I PROGRAMMI PER L ELABORAZIONE DEL TESTO Modulo 3 dell ECDL Terza Parte pag. 1 di 10 CopyLeft Multazzu Salvatore I programmi per elaborazione del testo: Terza Parte SOMMARIO Stili... 3 Inserire il numero

Dettagli

Word Processor: WORD (livello base) Classificazione

Word Processor: WORD (livello base) Classificazione Parte 5 Word Processor: WORD (livello base) Elementi di Informatica - AA 2008/2009 - MS Word 1 di 60 Classificazione Esistono diversi strumenti per la realizzazione di documenti testuali: Editor di testo

Dettagli

paragrafo. Testo Incorniciato Con bordo completo Testo Incorniciato Con bordo incompleto

paragrafo. Testo Incorniciato Con bordo completo Testo Incorniciato Con bordo incompleto Applicare bordi e sfondi ai paragrafi Word permette di creare un bordo attorno ad un intera pagina o solo attorno a paragrafi selezionati. Il testo risulta incorniciato in un rettangolo completo dei quattro

Dettagli

Germano Pettarin E-book per la preparazione all ECDL ECDL Modulo 3 Elaborazione testi Word Argomenti del Syllabus 5.0

Germano Pettarin E-book per la preparazione all ECDL ECDL Modulo 3 Elaborazione testi Word Argomenti del Syllabus 5.0 Germano Pettarin E-book per la preparazione all ECDL ECDL Modulo 3 Elaborazione testi Word Argomenti del Syllabus 5.0 G. Pettarin ECDL Modulo 3: Word 2 Modulo 3 Elaborazione testi Word G. Pettarin ECDL

Dettagli

qui possiamo scegliere se creare un nuovo Database oppure aprire un Database già esistente. Fatto ciò avremo questa seconda schermata:

qui possiamo scegliere se creare un nuovo Database oppure aprire un Database già esistente. Fatto ciò avremo questa seconda schermata: Creare un Database completo per la gestione del magazzino. Vedremo di seguito una guida pratica su come creare un Database per la gestione del magazzino e la rispettiva spiegazione analitica: Innanzitutto

Dettagli