HTML e CSS C. Gena, C. Picardi, J. Sproston HTML e CSS.

Presentazione sul tema: "HTML e CSS C. Gena, C. Picardi, J. Sproston HTML e CSS."— Transcript della presentazione:

1 HTML e CSS C. Gena, C. Picardi, J. Sproston HTML e CSS

2 C. Gena, C. Picardi, J. Sproston 2 Testo e Formattazione  Testo semplice vs. testo formattato  Testo semplice: sequenza di caratteri spogliata di qualsiasi attributo di visualizzazione  Di fatto non esiste, è un’astrazione.  Memorizzato (in RAM, su disco…) così com’è  Testo formattato: testo semplice + info su come visualizzalo  Tutto il testo è in un certo senso formattato  Memorizzato insieme alle info aggiuntive  Il modo in cui le info aggiuntive sono memorizzate costituisce il formato del documento di testo

3 HTML e CSS C. Gena, C. Picardi, J. Sproston 3 Editor di testo  Editor di testo semplice  non memorizzano il formato  pur dovendo usare un qualche formato per visualizzare il testo, questo è indipendente dal documento (si sceglie una volta per tutte)  Editor di testo formattato  permettono di specificare opzioni di formattazione  memorizzano tali informazioni  a volte (spesso) hanno un formato specifico che scrivono/leggono solo loro

4 HTML e CSS C. Gena, C. Picardi, J. Sproston 4 Linguaggi di annotazione  Due possibilità per il testo formattato:  editor WYSIWYG (What You See Is What You Get)  linguaggi di annotazione (markup language)  nati per la tipografia {testo centrato, grassetto, 20 punti}Relazione trimestrale {testo giustificato, 12 punti} Nel primo trimestre del 2001 il gruppo di ricerca diretto dal prof. Verdi ha {corsivo}raggiunto{fine corsivo} gli obiettivi specificati. Relazione trimestrale Nel primo trimestre del 2001 il gruppo di ricerca diretto dal prof. Verdi ha raggiunto gli obiettivi specificati.

5 HTML e CSS C. Gena, C. Picardi, J. Sproston 5 Linguaggi di annotazione (2)  Alcune caratteristiche:  posso creare il documento con qualunque editor di testo semplice  le informazioni di visualizzazione sono scritte a mano nel documento  il documento è visualizzato con un programma diverso da quello con cui viene creato

6 HTML e CSS C. Gena, C. Picardi, J. Sproston 6 HyperText Markup Language  Creare documenti  posso usare qualunque editor di testo semplice  esistono anche editor WYSIWYG per HTML ma in generale non sono molto convenienti perché non permettono di avere il controllo completo sul documento risultante  Visualizzare documenti  il Browser  interpreta le annotazioni e visualizza il testo in modo appropriato  attenzione: Browser diversi possono presentare differenze nel modo di interpretare una stessa annotazione in HTML

7 HTML e CSS C. Gena, C. Picardi, J. Sproston 7 HTML: un uso diverso delle annotazioni  Particolarità di HTML: le annotazioni non specificano tanto le impostazioni di visualizzazione quanto la strutturazione logica del documento. {testo centrato, grassetto, 20 punti}Relazione trimestrale {testo giustificato, 12 punti}Nel primo trimestre del 2001 il gruppo di ricerca diretto dal prof. Verdi ha {corsivo}raggiunto{fine corsivo} gli obiettivi specificati. {titolo}Relazione trimestrale {testo} Nel primo trimestre del 2001 il gruppo di ricerca diretto dal prof. Verdi ha {importante}raggiunto{fine importante} gli obiettivi specificati.

8 HTML e CSS C. Gena, C. Picardi, J. Sproston 8 Annotazioni in HTML  Separazione fra rappresentazione grafica e significato di tale rappresentazione  E’ il Browser a scegliere come rendere un certo significato  Vantaggi:  accessibilità per disabili  adattabilità ai dispositivi  interpretabilità delle informazioni da parte di programmi quali motori di ricerca, etc.  Se chi scrive vuole specificare delle regole di rappresentazione grafica  CSS

9 HTML e CSS C. Gena, C. Picardi, J. Sproston 9 HTML come linguaggio formale  Regole precise che devono essere rispettate  quali annotazioni si possono inserire  come devono essere scritte  se e come possono essere combinate fra loro  Regole stabilite dal W3C (World Wide Web Consortium)  www.w3c.org www.w3c.org  sono regole in evoluzione, ma meglio non attenersi all’ultimissima versione… :)

10 HTML e CSS C. Gena, C. Picardi, J. Sproston 10 Ipertesto  I documenti HTML sono ipertestuali  collegamenti (link) verso altri documenti (o altre risorse) o verso altre parti dello stesso documento  anche i collegamenti sono espressi con opportune annotazioni  il Browser è (almeno in teoria) libero di evidenziare il link come preferisce

11 HTML e CSS C. Gena, C. Picardi, J. Sproston 11 Se voglio scrivere documenti HTML…  Ho bisogno di:  un editor di testo semplice  o che per lo meno mi consenta di salvare il documento come testo semplice  uno o più Browser  per vedere come appare a chi lo legge sul Web  Perché no un editor WYSIWYG?  è in effetti possibile usarne  problema: usano male il linguaggio HTML  non sono in generale in grado di dedurre la strutturazione logica del documento e spesso usano HTML in modo inappropriato  Editor ibridi  es. Dreamweaver di Macromedia

12 HTML e CSS C. Gena, C. Picardi, J. Sproston 12 Come è fatto HTML [uno sguardo da lontano…]  Le annotazioni si chiamano TAG  Per distinguerle dal testo sono racchiuse fra <>  Ci sono tag vuoti e tag contenitore  Tag vuoti  indicano un elemento che va inserito in quel punto (es. un’immagine)  Formato:.  Tag contenitore  strutturano una porzione di testo, per cui devono indicare dove inizia e dove finisce la porzione  Formato: …testo…  Possono essere annidati ma non accavallati

13 HTML e CSS C. Gena, C. Picardi, J. Sproston 13 Attributi  I tag possono avere attributi  Gli attributi specificano meglio il significato dell’annotazione  Es.: il tag contenitore … specifica una porzione di testo attiva che fa da link  Dove porta il link? Lo si specifica tramite un attributo  Gli attributi hanno la forma nome_attributo=“valore”  Gli attributi si inseriscono DENTRO al tag (iniziale se si tratta di tag contenitore)  Ci sono attributi specifici di un certo TAG e attributi validi per tutti i TAG  …

14 HTML e CSS C. Gena, C. Picardi, J. Sproston 14 Com’è fatto HTML  HTML = HyperText Markup Language Pagina di Claudia Il mio testo Questo è il testo che voglio visualizzare nella mia pagina Web. Ecco la mia foto. Questo è il sito di mio cugino.

15 HTML e CSS C. Gena, C. Picardi, J. Sproston 15 Cos’è CSS?  HTML fornisce un insieme di TAG per strutturare il documento  CSS (Cascading Style Sheet) è un linguaggio che permette di suggerire al browser come visualizzare graficamente le diverse parti del documento.  In questo modo chi scrive il documento può controllarne parzialmente l’aspetto grafico

16 HTML e CSS C. Gena, C. Picardi, J. Sproston 16 Com’è fatto CSS  CSS = Cascading Style Sheets BODY { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #d2dbe8; background-color: #1b2e43; } H1 { background-color: #000000; font-size: 12pt; margin-top: 10px; margin-right: 1px; margin-left: 1px; margin-bottom: 5px; } P {...}

17 HTML e CSS C. Gena, C. Picardi, J. Sproston 17 Documenti Pubblicati sul Web  Possiamo distinguere due elementi:  Contenuto:  Il testo del documento, le immagini da visualizzare  Si tratta di documenti multimediali  anche suoni, filmati, etc.  Impaginazione e grafica:  A sua volta si divide in due aspetti:  Strutturazione del documento (ruolo delle diverse parti del testo – titoli, didascalie, paragrafi, etc)  include i collegamenti ipertestuali.  Aspetto grafico (colori, margini, bordi, etc)  HTML  definisce un insieme di annotazioni (tag) che si inseriscono nel documento per strutturarlo  CSS  definisce l’aspetto grafico corrispondente ad ogni annotazione

18 HTML e CSS C. Gena, C. Picardi, J. Sproston 18 Dal Documento al Web (1) Il mio testo Questo è il testo che voglio visualizzare nella mia pagina Web. Ecco la mia foto. Questo è il sito di mio cugino. Testo di partenza foto.jpg Altri file multimediali Pagina di Claudia Il mio testo Questo è il testo che voglio visualizzare nella mia pagina Web. Ecco la mia foto. Questo è il sito di mio cugino. pagina.html L’autore aggiunge i tag HTML Immagini e altri file multimediali sono collegati al documento tramite appositi tag Rimangono quindi su file separati BODY{ color:...; border:...; margin:....;...} H1{ color:...; border:...; margin:....;...} P{ color:...; border:...; margin:....;...} stile.css Anche lo stile è un file separato collegato al documento tramite un apposito tag

19 HTML e CSS C. Gena, C. Picardi, J. Sproston 19 HTTP Server Dal Documento al Web (2) Browser scarica visualizza