HTML e CSS

1. HTML e CSS

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. 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. 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. 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. 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: 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. 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 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 • sono regole in evoluzione, ma meglio non attenersi all’ultimissima versione… :)

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. 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. 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: <NOME_TAG>. • Tag contenitore • strutturano una porzione di testo, per cui devono indicare dove inizia e dove finisce la porzione • Formato: <NOME_TAG>…testo…</NOME_TAG> • Possono essere annidati ma non accavallati

13. Attributi • I tag possono avere attributi • Gli attributi specificano meglio il significato dell’annotazione • Es.: il tag contenitore <A>…</A> 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 • <A href=“http://www.unito.it”>…</A>

14. Com’è fatto HTML • HTML = HyperText Markup Language <HTML> <HEAD> <TITLE>Pagina di Claudia</TITLE> </HEAD> <BODY> <H1>Il mio testo</H1> <P>Questo è il testo che voglio visualizzare nella mia pagina Web. Ecco la mia foto.<IMG src="foto.jpg" width=100 /></P> <P>Questo è il <A href="http://www.unito.it">sito di mio cugino</A>.</P> </BODY> </HTML>

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. 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. 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. • Aspettografico (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. pagina.html L’autore aggiunge i tag HTML <HTML> <HEAD> <TITLE>Pagina di Claudia</TITLE> <LINK.../> </HEAD> <BODY> <H1>Il mio testo</H1> <P>Questo è il testo che voglio visualizzare nella mia pagina Web. Ecco la mia foto.<IMG.../></P> <P>Questo è il <A ...>sito di mio cugino</A>.</P> </BODY> </HTML> Immagini e altri file multimediali sono collegati al documento tramite appositi tag Rimangono quindi su file separati Anche lo stile è un file separato collegato al documento tramite un apposito tag stile.css BODY{ color:...; border:...; margin:....; ...} H1{ color:...; border:...; margin:....; ...} P{ color:...; border:...; margin:....; ...} Dal Documento al Web (1) Testo di partenza Il mio testo Questo è il testo che voglio visualizzare nella mia pagina Web. Ecco la mia foto. Questo è il sito di mio cugino. foto.jpg Altri file multimediali

19. Browser scarica visualizza Dal Documento al Web (2) HTTP Server