HTML e CSS C. Gena, C. Picardi, J. Sproston HTML e CSS
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
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
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.
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
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
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.
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
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) sono regole in evoluzione, ma meglio non attenersi all’ultimissima versione… :)
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
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
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
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 …
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.
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
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 {...}
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
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
HTML e CSS C. Gena, C. Picardi, J. Sproston 19 HTTP Server Dal Documento al Web (2) Browser scarica visualizza