hypertext markup language 17-23/6/08 informatica applicata b cristina bosco
TRANSCRIPT
![Page 1: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/1.jpg)
HyperText Markup Language
17-23/6/08Informatica applicata B
Cristina Bosco
![Page 2: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/2.jpg)
1. Che cosa e’ HTML
• un linguaggio di codifica testuale• un linguaggio di marcatura• un linguaggio per scrivere ipertesti
![Page 3: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/3.jpg)
Codifica testuale
lo scopo della codifica testuale (es. ASCII o UNICODE)
e’ rendere un testo leggibile dal
calcolatore, cioe’ trasformarlo in un
formato elettronico
![Page 4: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/4.jpg)
Codifica testuale
un testo in formato ASCIINON rappresenta PERO’ tutte le
informazioni
in particolare non sono rappresentati gli aspetti strutturali e semantici del
testo
![Page 5: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/5.jpg)
1. Che cosa e’ HTML
• un linguaggio di codifica testuale• un linguaggio di marcatura• un linguaggio per scrivere ipertesti
![Page 6: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/6.jpg)
Linguaggi di marcatura
lo scopo di un linguaggio di marcaturae’
rappresentare le informazioni logico-strutturali inerenti al testo, in un formato elettronico
![Page 7: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/7.jpg)
Linguaggi di marcatura
lo scopo di un linguaggio di marcaturae’
di specificare NON le esatte impostazioni di visualizzazione grafica, MA i
contenuti e l’organizzazione del testo in modo FORMALE
![Page 8: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/8.jpg)
Linguaggi di marcatura
ogni particolare linguaggio di marcaturae’
costruito per rappresentare determinate informazioni
logico-strutturali inerenti al testo
![Page 9: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/9.jpg)
1. Che cosa e’ HTML
• un linguaggio di codifica testuale• un linguaggio di marcatura• un linguaggio per scrivere ipertesti
![Page 10: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/10.jpg)
Linguaggi ipertestuali
un linguaggio per la scrittura di ipertestie’
un linguaggio di marcatura in cui tra le informazioni marcate esistono quelle
che consentono la navigazione ipertestuale
![Page 11: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/11.jpg)
2. Come e’ fatto un documento HTML
• basi sintattiche del linguaggio HTML• macrostruttura del documento HTML• struttura e contenuto del documento
HTML
![Page 12: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/12.jpg)
Basi sintattiche
il documento HTML comprende testo e marcatori:
testo marcatori
case-sensistive case-unsensitive
libero tra parentesi uncinate
non riconosce a capo, ne lettere accentate
![Page 13: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/13.jpg)
Basi sintattiche
Es. porzione di codice HTML che comprende testo e marcatori:
<B>questa parte di testo e’ in grassetto</B>, mentre questa parte
non lo e’
che il BROWSER interpreta come:
questa parte di testo e’ in
grassetto, mentre questa parte non lo e’
![Page 14: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/14.jpg)
Basi sintattiche
un marcatore M puo’ essere
• pieno: esiste un comando di apertura ed un comando di chiusura di M tra i quali e’ racchiusa la porzione di testo a cui il marcatore si applica(in rari casi il comando di chiusura e’ opzionale)
• vuoto: M consiste di un solo un comando
![Page 15: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/15.jpg)
Basi sintatticheEs. porzione di codice HTML che comprende
testo e marcatori pieni e vuoti:
<B>testo in grassetto</B> poi vado a capo proprio qui<BR> e inizio una linea nuova
che il BROWSER interpreta come:
testo in grassetto poi vado a capo proprio qui e inizio una linea nuova
![Page 16: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/16.jpg)
Basi sintattiche
un marcatore M puo’ essere dotato di
• attributi: all’interno delle parentesi uncinate del comando di apertura di M si possono specificare delle caratteristiche di M
• se ci sono piu’ attributi per un solo tag, li si deve separare con uno spazio vuoto
![Page 17: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/17.jpg)
Basi sintattichegli attributi di un marcatore M possono
essere: • attributi da valorizzare: hanno dei
valori predefiniti che devono essere messi tra virgolette dopo nome-attributo e simbolo = (dopo nome-tag spazio, nel comando di apertura del tag)
• attributi toggle: servono ad attivare una certa caratteristica del tag
![Page 18: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/18.jpg)
Basi sintatticheEs. porzione di codice HTML che comprende
testo e un marcatore con attributo valorizzato:
Testo NORMALE seguito da <FONT SIZE=“+1”>testo piu’ grande</FONT> seguito da altro normale
che il BROWSER interpreta come:
Testo NORMALE seguito da testo piu’ grande seguito da altro normale
![Page 19: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/19.jpg)
Basi sintatticheEs. porzione di codice HTML che comprende
testo e un marcatore con attributo toggle:
Testo NORMALE seguito da <HR NOSHADE> una linea orizzontale senza ombra
che il BROWSER interpreta come:
Testo NORMALE seguito da una linea orizzontale senza ombra
![Page 20: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/20.jpg)
Basi sintattiche
• i marcatori possono essere annidati (facendo attenzione agli annidamenti)
• piu’ comandi possono avere effetto sulla stessa porzione di testo
![Page 21: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/21.jpg)
Basi sintattiche
Es. porzione di codice HTML che comprende testo e marcatori annidati
<I><B>testo in corsivo e grassetto</B>, poi solo in corsivo</I> e poi ne’ uno ne’ l’altro
che il BROWSER interpreta come:
testo in corsivo e grassetto, poi solo
corsivo e poi ne’ l’uno ne’ l’altro
![Page 22: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/22.jpg)
Basi sintattiche
Es. porzione di codice HTML che comprende testo e marcatori annidati in modo corretto
<I><B>testo in corsivo e grassetto</B>, poi solo in corsivo</I> e poi ne’ uno ne’ l’altro
ed in modo non corretto (che il BROWSER “potrebbe” interpretare male)
<B><I>testo in corsivo e grassetto</B>, poi solo in corsivo</I> e poi ne’ uno ne’ l’altro
![Page 23: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/23.jpg)
2. Come e’ fatto un documento HTML
• basi sintattiche del linguaggio HTML• macrostruttura del documento HTML• struttura e contenuto del documento
HTML
![Page 24: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/24.jpg)
Macrostruttura del documento HTML
• il documento e’ tutto compreso nel marcatore pieno HTML
• include una intestazione, introdotta dal tag HEAD (informazioni non visualizzate nella pagina web, ma metadati visualizzati in altre parti del browser)
• include un corpo, introdotto dal tag BODY (il contenuto del testo con qualunque tag tranne quelli tipici dell’intestazione)
![Page 25: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/25.jpg)
Macrostruttura del documento HTML
Es. di macrostruttura (minima) di documento HTML:
<HTML><HEAD>
<TITLE>la mia prima pagina</TITLE></HEAD><BODY>
Testo della mia prima pagina</BODY>
</HTML>
![Page 26: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/26.jpg)
Macrostruttura del documento HTML
![Page 27: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/27.jpg)
Macrostruttura del documento HTML
La definizione del colore* o dell’immagine di sfondo e’ attributo del tag BODY:
<BODY BGCOLOR=“red” BACKGROUND=“lineadiciottoli.gif”>
<BODY BGCOLOR=“red”> <BODY BACKGROUND=“lineadiciottoli.gif”>
![Page 28: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/28.jpg)
Macrostruttura del documento HTML
![Page 29: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/29.jpg)
Macrostruttura del documento HTML
![Page 30: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/30.jpg)
Macrostruttura del documento HTML
![Page 31: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/31.jpg)
Macrostruttura del documento HTML
linee guida per la creazione del documento:• scrivere i tag con lettere maiuscole• scrivere i tag su righe separate• indentare i tag soprattutto in caso di
annidamenti• applicare sempre gli attributi nello stesso
ordine• non lasciare spazi vuoti laddove non sono
necessari
![Page 32: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/32.jpg)
Macrostruttura del documento HTML
<HTML><HEAD>
<TITLE>La mia prima pagina web</TITLE></HEAD><BODY>
In questa pagina metteremo delle informazioni importanti.
</BODY></HTML>
![Page 33: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/33.jpg)
Macrostruttura del documento HTML
… la stessa pagina in forma illeggibile (per
noi, non per il browser!!!):
<HTML> <HEAD> <TITLE>La mia prima pagina web</TITLE> </HEAD> <BODY>In questa pagina metteremo delle informazioni importanti.</BODY> </HTML>
![Page 34: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/34.jpg)
2. Come e’ fatto un documento HTML
• basi sintattiche del linguaggio HTML• macrostruttura del documento HTML• struttura e contenuto del documento
![Page 35: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/35.jpg)
Struttura e contenuto del documento HTML
• strutturazione logica del documento• strutturazione fisica del documento• inserimento di immagini• inserimento di collegamenti
ipertestuali
![Page 36: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/36.jpg)
Strutturazione logica del documento HTML
• titoli• paragrafi• separatori• sezioni• citazioni
![Page 37: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/37.jpg)
Strutturazione logica del documento HTML
titoli:• tag pieno Hn con n = 1|2|3|4|5|
6• 6 livelli di titoli in dimensione
decrescente• il testo seguente va a capo
![Page 38: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/38.jpg)
Strutturazione logica del documento HTML
Es: titoli
<H1>I linguaggi di marcatura</H1><H2>Il linguaggio HTML</H2><H3>Capitolo 1: i titoli</H3><H4>Paragrafo 1: inserire titoli nel document</H4><H5>Sottoparagrafo 1.1: dimensione di titoli </H5><H6>Sottosottoparagrafo 1.1.1: dimensione 1</H6>
![Page 39: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/39.jpg)
Es: titoli
![Page 40: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/40.jpg)
Strutturazione logica del documento HTML
paragrafi:• tag pieno P• divide il documento in capoversi che
ne aumentano la leggibilita’• il testo seguente va a capo ed e’
preceduto da uno spazio vuoto (una o piu’ righe)
• attributo: ALIGN = “LEFT | CENTER | RIGHT”
![Page 41: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/41.jpg)
Strutturazione logica del documento HTML
Es. paragrafi:Testo della mia prima pagina <br><P ALIGN=“CENTER”>Questa parte del testo
deve essere separata da quella che segue da alcune righe vuote
</P><P>Dopo le righe ecco un nuovo testosu un altro argomento</P>
![Page 42: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/42.jpg)
Es. paragrafi:
![Page 43: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/43.jpg)
Strutturazione logica del documento HTML
separatori:• interruzione di riga: tag vuoto che introduce un a
capo• linea orizzontale: tag vuoto con attributi ALIGN,
SIZE (spessore), WIDTH (larghezza), COLOR
![Page 44: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/44.jpg)
Strutturazione logica del documento HTML
Es. separatori: Testo della mia prima pagina<BR>
Dopo questa frase voglio andare a capo<BR> e poi introdurre una separazione netta mettendo una linea orizzontale come questa
<HR ALIGN=“center” SIZE=“5” WIDTH=“50%” COLOR=“red”>
che sta al centro, rossa, spessa e larga quanto basta per separare
![Page 45: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/45.jpg)
separatori:
![Page 46: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/46.jpg)
Strutturazione logica del documento HTML
sezioni:• tag pieno DIV• raggruppa gli elementi di una
sezione• introduce un a capo• attributo ALIGN
![Page 47: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/47.jpg)
Strutturazione logica del documento HTML
sezioni:<DIV ALIGN=“center”> <H2>Sezione A</H2><H3>Primo paragrafo</H3><P>Testo del primo paragrafo</P><H3>Secondo paragrafo</H3><P>Testo del secondo paragrafo</P></DIV><DIV> <H2>Sezione B</H2><P>Contenuto della sezione B</P> </DIV>
![Page 48: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/48.jpg)
sezioni:
![Page 49: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/49.jpg)
Strutturazione logica del documento HTML
citazioni:• tag pieno BLOCKQUOTE• provoca rientro della porzione
di testo relativa alla citazione rispetto al testo che segue e precede
![Page 50: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/50.jpg)
Strutturazione logica del documento HTML
citazioni: L'autore definisce la sua opera con le seguenti
parole: <BLOCKQUOTE>
"Un testo fondamentale per la letteratura di ogni tempo, in cui sono trattati i temi relativi a molti argomenti."</BLOCKQUOTE>parole che a me paiono come minimo eccessive.
![Page 51: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/51.jpg)
citazioni:
![Page 52: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/52.jpg)
Struttura e contenuto del documento HTML
• strutturazione logica del documento• strutturazione fisica del documento• inserimento di immagini• inserimento di collegamenti
ipertestuali
![Page 53: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/53.jpg)
Strutturazione fisica del documento HTML
• grassetto• corsivo• sottolineato• centrato• font (tipo e dimensione)• elenchi (puntati e numerati)• tabelle
![Page 54: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/54.jpg)
Strutturazione fisica del documento HTML
grassetto:• tag pieno B (bold)• contiene tutto il testo che deve
comparire in grassetto
![Page 55: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/55.jpg)
Strutturazione fisica del documento HTML
corsivo:• tag pieno I (italic)• contiene tutto il testo che deve
comparire in corsivo
![Page 56: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/56.jpg)
Strutturazione fisica del documento HTML
sottolineato:• tag pieno U (underline)• contiene tutto il testo che deve
comparire sottolineato
![Page 57: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/57.jpg)
Strutturazione fisica del documento HTML
centrato:• tag pieno CENTER• contiene tutto il testo che deve
comparire centrato
![Page 58: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/58.jpg)
Strutturazione fisica del documento HTML
font:• tag pieno FONT• attributi: SIZE (dimensione), FACE
(tipo), COLOR
![Page 59: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/59.jpg)
Strutturazione fisica del documento HTML
font:• tag pieno FONT• attributi: SIZE (dimensione), FACE
(tipo), COLOR
![Page 60: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/60.jpg)
Strutturazione fisica del documento HTML
font SIZE:
• valori da 1 a 7 (3 default)• valori relativi (piu’ grande o piccolo
del font attuale) espressi con + | - ed un numero
![Page 61: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/61.jpg)
Strutturazione fisica del documento HTML
font FACE:
• valori Times (default), Arial, Verdana, Courier, Helvetica, …
![Page 62: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/62.jpg)
Strutturazione fisica del documento HTML
font COLOR:
• il colore in HTML puo’ essere espresso tramite la codifica RGB
• oppure tramite nomi di colori riconosciuti dal browser
![Page 63: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/63.jpg)
Strutturazione fisica del documento HTML
elenchi:• elenchi puntati: tag pieno UL
(unordered list che include tutto l’elenco) + tag pieni LI (list item uno per ogni punto dell’elenco)
• elenchi numerati: tag pieno OL (ordered list che include tutto l’elenco) + tag pieni LI (list item uno per ogni punto dell’elenco)
![Page 64: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/64.jpg)
Strutturazione fisica del documento HTML
elenchi:Animali<UL>
<LI>cane</LI><LI>gatto</LI><LI>pesce</LI>
</UL>
![Page 65: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/65.jpg)
elenchi:
![Page 66: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/66.jpg)
Strutturazione fisica del documento HTML
tabelle:• tag pieno TABLE• tag pieno TR (table row), uno per ogni
riga della tabella• tag pieno TD (table data), uno per
ogni cella di ogni riga della tabella
![Page 67: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/67.jpg)
Strutturazione fisica del documento HTML
tabelle:<TABLE BORDER=2><TR> <TD> cella 1.1</TD> <TD> cella 2.1</TD> <TD> cella 3.1</TD></TR> <TR> <TD> cella 1.2</TD> <TD> cella 2.2</TD>
<TD> cella 3.2</TD></TR></TABLE>
![Page 68: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/68.jpg)
tabelle:
TR
TR
/TR
/TR
TD TD TD
TD TD TD
/TD /TD /TD
/TD /TD /TD
TABLE
/TABLE
![Page 69: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/69.jpg)
Struttura e contenuto del documento HTML
• strutturazione logica del documento• strutturazione fisica del documento• inserimento di immagini• inserimento di collegamenti
ipertestuali
![Page 70: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/70.jpg)
Inserimento di immagini
• inserimento di immagini
![Page 71: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/71.jpg)
Struttura e contenuto del documento HTML
• strutturazione logica del documento• strutturazione fisica del documento• inserimento di immagini• inserimento di collegamenti
ipertestuali
![Page 72: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/72.jpg)
Inserimento di collegamenti ipertestuali
• inserimento di collegamenti ipertestuali
![Page 73: HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco](https://reader035.vdocuments.pub/reader035/viewer/2022062404/5542eb5a497959361e8c7ddd/html5/thumbnails/73.jpg)
Struttura e contenuto del documento HTML
• strutturazione logica del documento• strutturazione fisica del documento• inserimento di immagini• inserimento di collegamenti
ipertestuali