Laboratorio di XHTML e CSS

Slides:



Advertisements
Presentazioni simili
CSS (Cscading Style Sheet Fogli di stile a cascata)
Advertisements

Introduzione all’HTML
Il linguaggio HTML I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura. ……………………………… …………………………… ……………….
Introduzione ad XML Mario Arrigoni Neri.
Corso FSE II – html a.a Lezione 5. corso fse dinformatica – a.a html html (hypertext markup language) è un linguaggio di markup.
Lezione 1 Primi passi in HtML SCRIVERE TESTI di Sergio Capone
HtML Premessa introduttiva al laboratorio Sergio Capone.
HYPER TEXT MARK-UP LANGUAGE
HTML Hyper Text Mark-Up Language. HTML Hyper Text Mark-Up Language Linguaggio di marcatura per ipertesti E un linguaggio di formattazione usato per descrivere.
A. FERRARI Alberto Ferrari. L'HyperText Markup Language (HTML) (traduzione letterale: linguaggio di marcatura per ipertesti) è un linguaggio usato per.
1 Introduzione ad XML. 2 Problemi con SGML Complesso da comprendere ed utilizzare Non è pensato per la rete: mancano link ipertestuali e specifiche grafiche.
Introduzione ai CSS. Cosa è successo allHTML Perché usare i CSS Introduzione ai CSS Fondamenti.
HTML LE PAGINE WEB COME SI SA, INTERNET E UN SISTEMA MONDIALE DI RETI DI COMPUTER CHE PERMETTE DI UTILIZZARE UN SISTEMA DI CONNESSIONE TRA COMPUTER.
INTERNET : ARPA sviluppa ARPANET (rete di computer per scopi militari)
1 Scoprire e capire HTML Creare semplici pagine WEB Maria Laura Alessandroni.
Come creare e gestire siti web con Kompozer, editor HTML
HTML e CSS Concetti base Comunicazione Multimediale.
1 Università della Tuscia - Facoltà di Scienze Politiche.Informatica 2 - a.a Prof. Francesco Donini Richiami sul modello Client/Server (per.
Laboratorio di Applicazioni Informatiche II mod. A
Architettura del World Wide Web
Labbreviazione: WWW letteralmente: World = mondo Wide = esteso Web = rete Può essere tradotta come: Rete estesa in tutto il mondo.
Internet Explorer Il browser.
CORSO DI INFORMATICA LAUREA TRIENNALE-COMUNICAZIONE & DAMS
Laboratorio di Informatica
Un’introduzione a HTML (I)
RISORSE WEB Internet Per un uso consapevole delle risorse della Rete
HTML HyperText Markup Language
Corso di PHP.
HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco.
WORLD WIDE WEB Il World Wide Web (Web, WWW o W3) è un'architettura software utilizzata per fornire l'accesso e la navigazione ad un insieme molto vasto.
Classe 5 A Pr1 Il Sito Web Internet è la rete mondiale grazie alla quale possiamo comunicare via computer con ogni parte del globo. Di Internet fa parte.
2a Lezione: Martedì 6 Febbraio – HTML Comandi base
Test Reti Informatiche A cura di Gaetano Vergara Se clicchi sulla risposta GIUSTA passi alla domanda successiva Se clicchi sulla risposta ERRATA passi.
HTML Lezione 5 Immagini. URL Un Uniform Resource Locator o URL (Localizzatore di risorsa uniforme) è una sequenza di caratteri che identifica univocamente.
HTML Lezione 8 I collegamenti ipertestuali (link).
Paragrafi e allineamenti
Applicazioni Web HTTP, HTML e CSS Elaborato da Gianluca Lauteri e Daniele Filannino.
Creare pagine web Xhtlm. Struttura di una pagina.
Gianpaolo Cecere Introduzione
HTML Lezione 3 Stili.
Il linguaggio HTML Le pagine web sono file di testo scritte utilizzando il linguaggio HTML. I documenti HTML vanno racchiusi dentro una coppia di TAG.
Il World Wide Web Lidea innovativa del WWW è che esso combina tre importanti e ben definite tecnologie informatiche: Documenti di tipo Ipertesto. Sono.
BIOINFO3 - Lezione 101 GLI IPERTESTI Una delle innovazioni introdotte da HTML e dal WWW in generale, rispetto ad un testo normale è sicuramente la possibilità
Il Linguaggio HTML “Profe, ma io a casa l’HTML non ce l’ho!“
Il linguaggio HTML Antonella Schiavon – settembre 2008 rev. 1 – aprile 2011.
HTML HyperText Markup Language Linguaggio per marcare un’Ipertesto
Pagine Web statiche: HTML
Hyper-Text Mark-Up Language
INTRODUZIONE A JAVASCRIPT
HTML Gli elementi principali di una pagina Web. Titolo: 2  Attribuisce un titolo alla pagina  Il titolo è visibile nella “barra del titolo” del browser.
Corso Web CSV – Andiamo on-line 1 Andiamo on-line Corso di formazione Elementi base per la costruzione di un sito web.
XHTML Corso linguaggi per il web a.s. 2011/2012 ITIS A. Righi – Corsico Relatore – Aldo Guastafierro.
HTML I tag HTML (parte 1). I tag HTML  I comandi che il browser interpreta  Etichette per marcare l’inizio e la fine di un elemento HTML  Formato e.
1 Sistemi Informativi e Servizi in Rete Università degli Studi di Brescia Facoltà di Ingegneria Parsing di documenti XML Esercizi.
Creato da Riccardo Nuzzone
Laboratorio di XHTML a.s – 2012 Prof. Aldo Guastafierro.
CORSO Di WEB DESIGN prof. Leonardo Moriello
Creazione di pagine per Internet Brevi note a cura di Emanuele Lana
Internet e HTML Diffusione di informazioni mediante la rete Internet.
HTML HTML e il web.
Siti Web Elementi di base per la costruzione di siti web.
HTML e CSS C. Gena, C. Picardi, J. Sproston HTML e CSS.
PROGETTO… Internet Providers, registrazione del dominio Costruire una home page … e renderla visibile sul Web.
Fondamenti di Markup Languages: Richiami di HTML © 2005 Stefano Clemente Stefano Clemente
Servizi Internet Claudia Raibulet
ELABORAZIONE TESTI MICROSOFT WORD EM 09.
Master in Telemedicina HTML per iniziare Maria Simi, dicembre 2004 [da un tutorial di Rigget]
Creazione di pagine per Internet Brevi note a cura di Emanuele Lana
Sviluppo servizi su rete, banche datiCorso di formazione Strumenti via WEB per la gestione dinamica dei siti.
HTML. Pagina HTML Struttura Titolo Hello World! Paragrafo apre il documento html contiene informazioni come il titolo della pagina, i meta tags, la codifica.
Transcript della presentazione:

Laboratorio di XHTML e CSS Lezione 1: Introduzione

Accesso al computer Per accedere ai computer bisogna inserire username e password: username: nomecognome password: labinfo (la password e’ minuscola e da cambiare al primo accesso con un’altra lunga 8 caratteri e che contenga o solo numeri o numeri e lettere) Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 Uni

Corso in laboratorio 10 lezioni (30 ore) Frequenza facoltativa ma consigliata Esame: progetto di laboratorio (sito in XHTML con CSS) , modificabile sul momento domande di teoria Esercizi Necessario superare l’esame per poter accedere all’orale di Informatica Generale -> la parte di laboratorio se superata e’ valida per l’anno accademico del laboratorio (quindi fino al laboratorio successivo) Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 Uni

Programma XHTML e formattazione del testo CSS e presentazione Elenchi Immagini e image map Tabelle Form Layout Usabilità e Architettura dell’informazione Esercizio riassuntivo Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 Uni

Materiale del laboratorio Il materiale del corso e’ disponibile al seguente indirizzo: http://www.di.unito.it/~chiabran/labXHTML/index.html Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 Uni

WEB - World Wide Web “Il World Wide Web è un’ architettura software per accedere a documenti tra loro collegati e distribuiti su migliaia di macchine nell’intera Internet.” Andrew S. Tanenbaum, “Computer Networks” 1997 e’ un servizio supportato dalla rete Internet studiato e implementato al Cern nel 1989 per agevolare la cooperazione di gruppi di ricerca sparsi nel mondo nasce per il pubblico nei primi anni ’90 sulla base di tre standard: HTTP, un protocollo per la trasmissione di documenti su Internet. URL, una notazione per l’indirizzamento delle risorse. HTML, un linguaggio per la scrittura di documenti ipertestuali. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 Uni

Documenti WEB I documenti Web sono pagine ipermediali che contengono: Testi Immagini Suoni Legami ipertestuali ad altre pagine (link) Programmi Le pagine sono localizzate su server web e visualizzate dai client attraverso l’utilizzo di un browser web (Internet Explorer, Mozilla Firefox, Opera, Chrome, Safari, …). Quando l’utente digita l’indirizzo web (URL) della pagina di interesse il sistema operativo richiede attraverso una connessione HTTP la pagina al server in cui e’ memorizzata e la scarica in locale dove verra’ letta dal browser. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 Uni

URL di una pagina WEB Un URL è formato da tre parti: dal protocollo utilizzato per il trasferimento dati (HTTP) dall’indirizzo del server su cui risiede la risorsa dal pathname del file sul server pathname protocollo Indirizzo del server Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 Uni

Browser e HTML Il broswer e’ un programma che interpreta dati codificati nel linguaggio HTML e visualizza l’informazione con la formattazione specificata. HTML e’ il linguaggio attraverso cui si scrivono i documenti web e il cui standard viene mantenuto dal World Wide Consortium (W3C) http://www.w3.org Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 Uni

HTML HTML (Hyper Text Markup Language) combina due concetti: ipertesto: rappresentazione di informazioni basata su una collezione di documenti tra loro collegati linguaggio di markup: permette di arricchire i documenti con una struttura formale, “marcando” i dati e conferendo loro significato. Nasce per descrivere la struttura logica dei documenti (intestazioni “h1” “h2”, paragrafi “p”, collegamenti “a”…), lasciando ai browser completa libertà rispetto alla presentazione: struttura logica e layout fisico sono ben separati. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 Uni

Da HTML a XHTML Lo scarso controllo sugli aspetti di presentazione spinge però i progettisti ad aggiungere marcatori “fisici” (b, i…). Alcuni marcatori “logici” vengono inoltre usati impropriamente per controllare aspetti di presentazione. Vengono sviluppate versioni non standard di HTML, con marcatori “proprietari”. I browser non segnalano errori in presenza di documenti non validi, ma cercano di interpretarli comunque. Risultato: la manutenzione di ipertesti di grandi dimensioni risulta difficoltosa; la semantica dei documenti è spesso scorretta; lo stesso documento (se non valido) può essere visualizzato in modo inconsistente da browser diversi. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 11 Uni

(X)HTML: struttura + CSS: presentazione XHTML e CSS Si deve tornare alle origini: separare struttura e presentazione e utilizzare un linguaggio rigoroso per rappresentare l’informazione: (X)HTML: struttura + CSS: presentazione • (X)HTML è una versione di HTML basata sul metalinguaggio XML e ha una sintassi rigorosa. Serve per definire la struttura logica dei documenti. • I fogli di stile CSS (Cascading Style Sheet) permettono di definire gli aspetti di presentazione dei documenti. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 12 Uni

XHTML e CSS - 2 Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 13 Uni

XHTML: sintassi Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 14 Uni

<nome-comando> informazioni </nome-comando> Introduzione Un documento XHTML è un file di testo (file ASCII, per esempio “index.html” o “index.htm”) contenente dei “comandi” per: – la formattazione del testo (intestazioni, paragrafi, …) – l’inserimento di parti multimediali (immagini, suoni, …) – la definizione di link ipertestuali I “comandi” (tags) hanno una forma sintattica particolare: <nome-comando> informazioni </nome-comando> I tags hanno nomi mnemonici (“p” per paragrafo, “h1” per intestazione di primo livello, “a” per i link, etc) e definiscono la funzione/ruolo della parte di testo racchiusa. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 15 Uni

Nomenclatura Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 16 Uni

Regole sintattiche Tag e attributi devono essere in caratteri minuscoli. Tutti i tag devono essere chiusi. Negli elementi privi di contenuto, il tag di apertura viene chiuso con un carattere “/” finale. • I valori degli attributi devono sempre essere racchiusi tra virgolette. Non ci possono essere attributi non valorizzati. Gli elementi devono essere annidati correttamente. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 17 Uni

Annidamento E’ possibile porre degli elementi all’interno di altri elementi. Se un elemento “a” deve essere posto all’interno di un elemento “b”, allora il tag di chiusura di “a” deve precedere il tag di chiusura di “b”. L’elemento annidato prende il nome di “figlio” (child), l’elemento contenitore quello di “genitore” (parent). Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 18 Uni

Struttura di un documento Una pagina html vuota e’ sempre strutturata secondo questo schema: Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 19 Uni

Head -1 La parte fondamentale è l’elemento “title”, figlio di “head”, ovvero il titolo del documento che verrà visualizzato come nella finestra del browser. Poiché il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca è importante che esso sia significativo. <head> <title> Unito.it - Universita’ di Torino online: home </title> </head> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Head - 2 L’elemento “title”, figlio di “head”, è obbligatorio e assegna un titolo al documento, mostrato nella finestra del browser. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

<body> corpo della pagina </body> L’elemento “body” contiene il documento (pagina) vero e proprio (documento di testo).   Il testo strutturato inserito nell’elemento body verrà visualizzato secondo le direttive di formattazione. <body> corpo della pagina </body> Più avanti vedremo quali possono essere gli elementi figli di body. <body> Testo della pagina ... </body> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

<!--testo del commento--> Commenti Un commento è rivolto solo a chi legge direttamente il codice di un documento (X)HTML e non ne modifica in alcun modo il contenuto. Si può inserire in qualunque punto con la seguente sintassi: <!--testo del commento--> <html> <head> <title>Titolo</title> </head> <body> <!–- commento: testo non visibile all’utente --> Testo della pagina ... </body> </html> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

<p>Testo di prova</p> Al lavoro! – esercizio 1 Create una cartella che dovrà contenere tutto il materiale (file) del vostro progetto. Dentro questa cartella create il vostro primo file xhtml: Aprite Notepad++ (o un altro editor) Salvate il documento vuoto iniziale nella vostra cartella, indicando: Nome file: nome.html Salva come: All types (*.*) Create la struttura di base di un file xhtml, assegnate un contenuto all’elemento “title”, (salvate!) e aprite il file con un browser: cosa succede? Annidate questo elemento nell’elemento “body”: <p>Testo di prova</p> Cosa succede? Aggiungete un commento a piacere: cosa succede? Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Formattazione del testo Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Introduzione Il tipo di informazione che più comunemente si vuole inserire in un documento ipertestuale (nell’elemento body…) è il semplice testo. Attraverso (X)HTML si struttura un testo e si conferisce significato alle sue parti. Incontreremo: paragrafi interruzione di riga intestazioni enfasi citazione abbreviazione codici indirizzi Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Strutturare il testo con XHTML Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

<p> testo del paragrafo </p> Paragrafi Il testo è normalmente inserito all’interno di paragrafi, indicati dalla coppia di tag <p> testo del paragrafo </p> Esempio: <body> <!–- commento: testo non visibile all’utente --> <p> Benvenuti al laboratorio di Informatica Generale!</p> <p> Il laboratorio sara’ articolato in 10 lezioni che si terranno...</p> </body> I paragrafi sono elementi di blocco. Possono contenere elementi in linea, testo semplice o essere vuoto. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Interruzioni di riga - 1 Il tag <br /> si utilizza per inserire un’interruzione di riga, ossia andare a capo, senza iniziare un nuovo paragrafo. <body> <!–- commento: testo non visibile all’utente --> <p> Benvenuti al laboratorio di Informatica Generale!<br /> Il laboratorio sara’ articolato in 10 lezioni che si terranno...</p> </body> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Interruzioni di riga - 2 Le interruzioni di riga indicano un’interruzione logica nel flusso del discorso (es: nuova linea di un indirizzo o una poesia) e non si dovrebbero usare solo per ottenere spazi bianchi! “br” è un elemento privo di contenuto e non viene chiuso con un esplicito tag di chiusura, ma con il simbolo “/” finale. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Intestazioni - 1 Le varie parti di un testo sono normalmente identificate da intestazioni (o “titoli”). In (X)HTML si possono definire sei livelli di intestazioni con gli elementi h1 (intestazione di primo livello), h2, h3, h4, h5, h6 (intestazione di sesto ed ultimo livello). <body> <!–- commento: testo non visibile all’utente --> <h1>Laboratorio di XHTML</h1> <p> Benvenuti al laboratorio di Informatica Generale!<br /> Il laboratorio sara’ articolato in 10 lezioni che si terranno...</p> </body> Le intestazioni sono elementi di blocco. Possono contenere elementi in linea, testo semplice o essere vuote. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Intestazioni - 2 Gli elementi di intestazione devono essere usati in successione ordinata! un elemento h2 deve seguire h1 e precedere un eventuale h3 <h1>Il testo</h1> <p>Impareremo come gestire il testo dei nostri documenti</p> <h2>XHTML</h2> <p>Con XHTML definiamo la struttura</p> <h3>Paragrafi in XHTML</h3> <p>Il testo si struttura in paragrafi…</p> <h2>CSS</h2> <p>Con i CSS definiamo la presentazione</p> Intestazione di primo livello Intestazione di secondo livello Intestazione di terzo livello Intestazione di secondo livello Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Enfasi Una parte del testo contenuta in un elemento come un paragrafo o un’intestazione può essere marcata come particolarmente significativa attraverso l’uso dei tag: <em> testo </em> (emphasis) <strong> testo </strong> (strong emphasis). <body> <p>Benvenuti al <em>laboratorio</em> di <strong>Informatica Generale</strong></p> </body> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Citazioni - 1 “Blockquote” si usa per marcare un’ampia citazione che costituisce un passo a sé stante. Attraverso l’attributo “cite” si può indicare la fonte della citazione, se si tratta di un URI (ad es. un URL); in alternativa si usa l’attributo “title”. Esempio: <blockquote cite=“http://www.html.it”> <p> citazione di un passo…</p> <p>…</p> </blockquote> “Blockquote” è un elemento di blocco che deve contenere altri elementi di blocco (di solito paragrafi) e non testo libero! Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Citazioni - 2 Una breve citazione può essere contenuta invece nell’elemento in linea “q” (quote), accompagnato (eventualmente) dall’attributo “cite”. Esempio: <p>HTML <q cite=“http://www.html.it”> serve per formattare un testo</q>.</p> “Cite” è anche un elemento che si può usare per introdurre la fonte di una citazione. <p>Secondo <cite>Tim Berners Lee</cite>, il Web <q> bla bla bla</q>.</p> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Abbreviazioni Le abbreviazioni di parole o locuzioni possono essere marcate con “abbr”. L’attributo “title” ha come valore la forma estesa dell’abbreviazione. Esempio: <h1>Laboratorio di <abbr title=“Hyper-Text Markup Language”> HTML </abbr></h1> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Codice Quando un testo contiene del codice (HTML o altro) che non deve essere “interpretato” dal browser, ma marcato come tale, si usa l’elemento “code”. Esempio: <p>Copia e incolla questo codice: <code> javac java.doc </code> </p> Se il codice contiene spazi bianchi e tabulazioni significativi, ovvero il testo è preformattato, l’elemento “code” deve essere contenuto nell’elemento “pre”. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Indirizzi L’elemento “address” si usa per marcare gli indirizzi. Esempio: Indirizzo: <address> Arnolfo Piedifreddi <br /> Via dei Platani, 7 <br /> Venezia <br /> </address> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

Al lavoro! – esercizio 2 e 3 Inserite nel vostro file xhtml una struttura di questo tipo: Titolo di primo livello. Paragrafo. Titolo di secondo livello. Una citazione composta da due paragrafi. Modificate il vostro file xhtml: Inserite due interruzioni di riga nel primo paragrafo. Enfatizzate alcune delle parole della citazione (usate tutti i tag che conoscete!). Aggiungete il vostro indirizzo alla fine. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1