html e css

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

HTML e CSS

2HTML e CSSC. Gena, C. Picardi,

J. Sproston

Testo e FormattazioneTesto e Formattazione

Testo semplice vs. testo formattatoTesto 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 formattatoMemorizzato insieme alle info aggiuntiveIl modo in cui le info aggiuntive sono memorizzate

costituisce il formato del documento di testo


J. Sproston

Editor di testoEditor di testo

Editor di testo semplicenon memorizzano il formatopur dovendo usare un qualche formato per visualizzare il testo, questo è indipendente dal documento (si sceglie una volta per tutte)

Editor di testo formattatopermettono di specificare opzioni di formattazione

memorizzano tali informazionia volte (spesso) hanno un formato specifico che scrivono/leggono solo loro


J. Sproston

Linguaggi di annotazioneLinguaggi 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 trimestraleNel primo trimestre del 2001 il gruppo di ricerca diretto dal prof. Verdi ha raggiunto gli obiettivi specificati.


J. Sproston

Linguaggi di annotazione (2)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


J. Sproston

HyperText Markup LanguageHyperText Markup Language

Creare documenti posso usare qualunque editor di testo sempliceesistono 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 Browserinterpreta le annotazioni e visualizza il testo in modo appropriato

attenzione: Browser diversi possono presentare differenze nel modo di interpretare una stessa annotazione in HTML


J. Sproston

HTML: un uso diverso delle annotazioni

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.


J. Sproston

Annotazioni in HTMLAnnotazioni in HTML

Separazione fra rappresentazione grafica e significato di tale rappresentazione

E’ il Browser a scegliere come rendere un certo significato

Vantaggi:accessibilità per disabiliadattabilità ai dispositiviinterpretabilità delle informazioni da parte di programmi quali motori di ricerca, etc.

Se chi scrive vuole specificare delle regole di rappresentazione grafica CSS


J. Sproston

HTML come linguaggio formaleHTML come linguaggio formale

Regole precise che devono essere rispettatequali annotazioni si possono inserirecome devono essere scrittese e come possono essere combinate fra loro

Regole stabilite dal W3C (World Wide Web Consortium)www.w3c.orgsono regole in evoluzione, ma meglio non attenersi all’ultimissima versione… :)


J. Sproston

IpertestoIpertesto

I documenti HTML sono ipertestualicollegamenti (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


J. Sproston

Se voglio scrivere documenti HTML…

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ù Browserper vedere come appare a chi lo legge sul Web

Perché no un editor WYSIWYG?è in effetti possibile usarneproblema: 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


J. Sproston

Come è fatto HTML[uno sguardo da lontano…]Come è fatto HTML

[uno sguardo da lontano…]

Le annotazioni si chiamano TAGPer distinguerle dal testo sono racchiuse fra <>Ci sono tag vuoti e tag contenitoreTag vuoti

indicano un elemento che va inserito in quel punto (es. un’immagine)

Formato: <NOME_TAG>.

Tag contenitorestrutturano una porzione di testo, per cui devono

indicare dove inizia e dove finisce la porzioneFormato: <NOME_TAG>…testo…</NOME_TAG>Possono essere annidati ma non accavallati


J. Sproston

AttributiAttributi

I tag possono avere attributiGli 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 attributoGli 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>


J. Sproston

Com’è fatto HTMLCom’è 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>


J. Sproston

Cos’è CSS?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


J. Sproston

Com’è fatto CSSCom’è 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{...}


J. Sproston

Documenti Pubblicati sul WebDocumenti Pubblicati sul Web

Possiamo distinguere due elementi:Contenuto:

Il testo del documento, le immagini da visualizzareSi 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


J. Sproston

Dal Documento al Web (1)Dal Documento al Web (1)

Il mio testoQuesto è 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

<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>

pagina.html

L’autore aggiunge

i tag HTML

Imm

agini e altri file

multim

ediali sono

collegati al

documento tram

ite

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


J. Sproston

HTTP Server

Dal Documento al Web (2)Dal Documento al Web (2)

foto.jpg

Altri file multimediali

<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>

pagina .html

BODY{ color:...; border:...; margin:....; ...}H1{ color:...; border:...; margin:....; ...}P{ color:...; border:...; margin:....; ...}

stile .css

Browser

scarica

visu

alizza

html e css

Documents