1 / 19

HTML e CSS

HTML e CSS. 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’è

laszlo
Download Presentation

HTML e CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related