Upload
laszlo
View
88
Download
0
Embed Size (px)
DESCRIPTION
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’è - PowerPoint PPT Presentation
Citation preview
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
3HTML e CSSC. Gena, C. Picardi,
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
4HTML e CSSC. Gena, C. Picardi,
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.
5HTML e CSSC. Gena, C. Picardi,
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
6HTML e CSSC. Gena, C. Picardi,
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
7HTML e CSSC. Gena, C. Picardi,
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.
8HTML e CSSC. Gena, C. Picardi,
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
9HTML e CSSC. Gena, C. Picardi,
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… :)
10HTML e CSSC. Gena, C. Picardi,
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
11HTML e CSSC. Gena, C. Picardi,
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
12HTML e CSSC. Gena, C. Picardi,
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
13HTML e CSSC. Gena, C. Picardi,
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>
14HTML e CSSC. Gena, C. Picardi,
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>
15HTML e CSSC. Gena, C. Picardi,
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
16HTML e CSSC. Gena, C. Picardi,
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{...}
17HTML e CSSC. Gena, C. Picardi,
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
18HTML e CSSC. Gena, C. Picardi,
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
19HTML e CSSC. Gena, C. Picardi,
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