j0 1 marco ronchetti - [email protected] http e html html: evoluzione
TRANSCRIPT
![Page 1: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/1.jpg)
J01
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
HTTP e HTML
HTML: evoluzione
![Page 2: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/2.jpg)
J02
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
WWW
1990: La Web
HTTP protocollo che permette di richiedere documentiipertestuali da un server.
HTML linguaggio di markup usabili per rendere documenti ovvero individuare e a abilitare link ipertestuali.
![Page 3: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/3.jpg)
J03
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
HTML 2.0
Linguaggio basato su elementi di descrizione di caratteristiche (tag) e testo:
la caratteristica viene applicata a tutto il testo compreso tra tag aperta e tag chiusa
<TAG>testo</TAG>
![Page 4: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/4.jpg)
J04
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
HTML
Caratteristiche generali:
•Non è case sensitive•Non tutte le tag aperte vengono chiuse•Tutte le tag sconosciute vengono ignorate•Tutti gli “a capo” vengono mutati in spazio•Più spazi o tabulazioni vengono collassate in un singolo spazio
![Page 5: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/5.jpg)
J05
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
HTML 2.0
La prima versione conforme alla sintassi SGML
<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 2.0//EN”>
![Page 6: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/6.jpg)
J06
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Struttura di un documento HTML
<!-- HTML --><html> <head> <title>Titolo della pagina</title> </head> <body> Corpo della pagina, visualizzato dal browser </body></html>
Nota: l’HTML non è case sensitive
![Page 7: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/7.jpg)
J07
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Definizione di intestazione
H1 …H6: sei livelli di intestazione
<H1>Livello H1</H1><H2>Livello H2</H2><H3>Livello H3</H3><H4>Livello H4</H4><H5>Livello H5</H5><H6>Livello H6</H6>
![Page 8: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/8.jpg)
J08
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Tipi di lista
ul Unordered listol ordered list
<ul><li> primo<li> secondo<li> terzo</ul>
dir directory list (deprecata)menu menu list (deprecata)
<ol><li> primo<li> secondo<li> terzo</ol>
![Page 9: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/9.jpg)
J09
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Tipi di lista
Liste di definizione DLDT:Definition Term DD: Definition Entry
<dl><dt> SGML <dd> Standard Generalized Markup Language<dt> HTML<dd> Hypertext Markup Language<dt> XML <dd> Extensible Markup Language</dl>
![Page 10: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/10.jpg)
J010
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Tipo di carattere
<B> Bold <I> Italic <TT> Teletype
Carattere normale<b> Carattere Bold </B><i> Carattere Bold </i><b><I> Carattere Bold </B></i><TT>Carattere Teletype</TT>
Notare la sequenza
Notare gli a capo
![Page 11: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/11.jpg)
J011
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Caratteri speciali
< si scrive <> si scrive > & si scrive &
I caratteri “<“ e “>” definiscono apertura e chiusura delle tag,Quindi non possono in essere inclusi nel testo. Per risolvere il problema si introduce una sintassi speciale:
![Page 12: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/12.jpg)
J012
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Tipologie di frase
<em> <strong> <code> <kbd> <var> <samp> <cite>
Carattere normale<em> emphasized </em><strong> strong </strong ><code> code a=1 b=2</code><var>variable</var><samp>sample</samp><cite>citazione</cite>
![Page 13: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/13.jpg)
J013
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Elementi di formattazione
<P> <BR> <BLOCKQUOTE> <HR>Esempi di uso di formattazione<P>Questo e'un paragrafo</P>Questo e'un esempio di <BR>forzatura di un a capo<HR>Linea Orizzontale<HR>testo<BLOCKQUOTE>testo indentato</Blockquote>continua il testo
![Page 14: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/14.jpg)
J014
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Elementi di formattazione
<PRE>Esempio di testo con formattazione forzata<PRE>class demo { public static void main(String a[]) { System.out.println("Hello"): }}</PRE>
Notare la preservazione degli a capo
![Page 15: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/15.jpg)
J015
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Meta data
<meta Name=“author” Content=“Marco Ronchetti”><meta Name=“ keywords” Content=“ =“Sex, Money”><base HREF=“URL”>
Nella sezione head:
Indicazio
ni per i
robots
Url di base del documento corrente
![Page 16: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/16.jpg)
J016
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Link e interni ed esterni
Vi si possono trovare ulteriori <a href=“#altro”>dettagli</a>…<a name=“altro”>Ecco i dettagli</a>
Vi si possono trovare ulteriori <a href=“URL”>dettagli</a>
Link interno
Link esterno
Eccone una foto <img src=“URL” alt=“Vista dal basso”align=“top/bottom/center”>.
Immagini
Deprecato!
![Page 17: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/17.jpg)
J017
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Mappe clickabili
<a href=“/cgi-bin/imagemap.exe”> <img src=“italia.gif” ISMAP></a>
Identificaun eseguibile sul
server
Vedi anche le estensioni HTML 3.2
Mostra la figure italia.gif epassa al server le coordinate (x,y)del punto su cui si é clickato
![Page 18: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/18.jpg)
J018
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Forms
Danno all’utente la possibilità di inviare informazioni al Web server
La tag FORM definisce il modulo e ha il seguente attributi:•L’attributo ACTION identifica il programma
che processa il modulo•L’attributo ENCTYPE specifica tipo MIME usato per
passare dati al server (Es. Text/html)Inoltre comprende varie sotto-tag:
•Può contenere diverse tag per la raccolta dei dati•Una tag INPUT dev’essere di tipo SUBMIT per la •spedizione dei dati•Una tag INPUT può essere di tipo RESET per •l’annullamento dei dati inseriti
![Page 19: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/19.jpg)
J019
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Form - input
<FORM method="POST" action="/cgi-bin/elabora"> Scrivi il tuo nome <Input type="text" size“=25" maxlength="15“ name=“a”> <Input type="submit" value="spedisci"> <Input type="reset" value="annulla"></FORM>
Invia una url di tipo http://…/cgi-bin/elabora?a=MarcoRonchetti&b=…
![Page 20: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/20.jpg)
J020
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Form – input type=“radio”
<FORM method="POST" action="/cgi-bin/elabora"> Fai la tua scelta: <LI><Input type="radio" name="tipo" value="auto" checked>Auto <LI><Input type="radio" name="tipo" value="bus">Bus <LI><Input type="radio" name="tipo" value="camion">Camion <P><Input type="radio" name="colore" value="rosso">Rosso <Input type="radio" name="colore" value="argento" checked>Argento</P> <Input type="submit" value="spedisci"></FORM>
![Page 21: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/21.jpg)
J021
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Form – input type=“checkbox” - select
<FORM method="POST" action="/cgi-bin/elabora"> Fai la tua scelta: <LI><Input type="checkbox" name="tipo" value="auto" checked>Auto <LI><Input type="checkbox" name="tipo" value="bus">Bus <LI><Input type="checkbox" name="tipo" value="camion">Camion <P><Select name="colore"> <option>Rosso <option selected>Argento </select></P> <Input type="submit" value="spedisci"></FORM>
![Page 22: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/22.jpg)
J022
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Form – textarea
<FORM method="POST" action="/cgi-bin/elabora"> Scrivi i tuoi commenti: <Textarea name="commenti" rows="4" columns="14"> Spiega in questo spazio la tua opinione </TEXTAREA> <Input type="submit" value="via!"></FORM>
Notare gli spazi
![Page 23: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/23.jpg)
J023
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
HTML 3.2
Ampiamente supportato dalla maggior parte dei browser e degli editor HTML
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>
Aggiunge supporto per le tabelle, Applets, stilizzazione del testo, client-side image-based linking e per la strutturazione del documento.
![Page 24: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/24.jpg)
J024
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Trattamento delle immagini
Vengono introdotte evoluzione di allineamento usando l’attributo Align: a top, bottom, center si aggiungono left e right
Nuovi attributi includono: Border (spessore del bordo attorno all’immagine)Vspace (spazio extra in verticale) Hspace (spazio extra in orizzontale)
Width (larghezza dell’immagine)Height (altezza dell’immagine)
<IMG SRC=“file” ATTRIBUTO1=“Valore” … >
Informa il browser delle dimensioni così da permettere la formattazione della pagina prima che l’mmagine sia scaricata
![Page 25: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/25.jpg)
J025
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Trattamento delle immagini
Viene introdotta la gestione delle immagini clickabili sul lato client
<IMG SRC="a.gif" usemap="#mymap">...<MAP name="mymap"> <area shape="rect" coords=“150,50,250,150"
href="rect.html"alt="scatola">
<area shape="circle" coords=“250,350,50"
href="wheel.html"alt="ruote">
</MAP>
50
150
150
250
50
![Page 26: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/26.jpg)
J026
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Tabelle
Bordi:<table border=“0”> nessun bordo<table> Nessun bordo, ma spazio per bordo allocato<table border=“10”> Bordo di dimensione 10<table border> Corrisponde a border=“1”
Spaziatura tra le celle:<table Cellspacing=“5” >Default = 2
Titolo:<caption align=“bottom”>Titolo</caption>
![Page 27: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/27.jpg)
J027
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Tabelle
Le tabelle sono strutture basate sulle righe Ogni righe di dati è inclusa in un elemento <TR>Ogni cella è inclusa in un elemento •<TH> (intestazione) oppure•<TD> (dato)Larghezza e altezza di una cella possono essere suggeriticon gli attributi Width e Height.
Il contenuto di ogni cella può essere allineato •orizzontalmente (align=left,center,right)•e verticalmente (valign=top,center,bottom)
![Page 28: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/28.jpg)
J028
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Tabelle
Genere ogni cella occupa un’area individuata da una colonna e una riga, mai possibile fare in modo che una cella si estenda su più colonne e/o righeUsando di attributi colspan e rowspan.
![Page 29: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/29.jpg)
J029
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Tabelle
<table border> <caption align=bottom>LIVELLI DI PERICOLO</caption> <tr><th>colore<th>stato<th>Livello</tr> <tr><th>rosso</th><td>Pericolo</td><td>1</td></tr> <tr><th>giallo <td rowspan="2" valign="center" align="center">ok <td>2</tr> <tr><th>verde<td>3</tr></table>
![Page 30: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/30.jpg)
J030
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Tabelle
<table border cellpadding=5>
<table border cellspacing=5>
<table border>
![Page 31: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/31.jpg)
J031
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Supporto di Java
<applet code=“Name.class”height=“150” width=“300”> <param name=“time” value=“100”> <param name=“color” value=“red”> Questo Browser non supporta le applets</Applet>
Deprecato in HTML 4.0
![Page 32: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/32.jpg)
J032
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Stilizzazione del testo
Viene introdotto un parametro applicabile alla maggior parte delle tag:ALIGN=“LEFT-CENTER-RIGHT”e la tag CENTER che ha funzione analoga
Viene introdotta una tag per raggruppare elementi di testoa cui applicare gli stessi parametri: DIV
![Page 33: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/33.jpg)
J033
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Stilizzazione del testo
Inizio<div align=right>Hello<P>Paragrafo</P><CENTER>Testo centrato</CENTER>Bye</div>Fine
![Page 34: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/34.jpg)
J034
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Stilizzazione del testo: Body
<body
bgcolor=“#FF0000" colore dello sfondo - deprecatobackground=“URL“ immagine di sfondo - deprecatotext =“#0000FF“ colore del testo - deprecatolink=“#00FF00" colore dei link – sconsigliatovlink =“#00FF00“ colore dei link visitati – sconsigliato
>…</body>
![Page 35: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/35.jpg)
J035
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Stilizzazione del testo: Font
<font face="Times Roman", serif"color="Red"size="18">
Hello</font>
Deprecato in HTML 4.0
Nota: alternativamente si possono fare resize incrementali: size=“+2">
![Page 36: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/36.jpg)
J036
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Ufficializzazione
Le tag SCRIPT e STYLE vengono ufficializzate,anche se ancora non viene definito l’esatto funzionamento delle stesse.
SCRIPT introduce la possibilità di avere codiceLa cui esecuzione è a carico dal browser (es. Javascript)
STYLE introduce il concetto di formattazione da applicareal documento separatamente dal contenuto deldocumento stesso
![Page 37: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/37.jpg)
J037
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
HTML 4.0
Rilasciato nel dicembre ‘97
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4.strict.dtd”>
Standardizza il supporto dei frame, estende il modello di tabelle, estende il modello dei form, aggiunge l’evidenziazione della variazione di contenuto, l’identificazione di oggetti generalizzati non HTML, alcune generali descrizioni di testo. Formalizza l’uso di elementi script e style.
Per la prima volta la definizione dello standard precede l’implementazione!
![Page 38: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/38.jpg)
J038
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Script
Identifica un contenitore di codice riconoscibile ed eseguibileda parte del browser.
<script type=“text/javascript” language=“javascript”><!-- function ciao() {
alert(“hello world”)}//--></script>
La funzione è attivabile da eventi associati con elementi Visualizzati (Onmouseover…)
![Page 39: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/39.jpg)
J039
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Style
Identifica un contenitore di un foglio di stile.
Va incluso solo nella sezione <HEAD>
<STYLE TYPE="text/css">
a {color:red}
p {font-size:18}
</STYLE>
![Page 40: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/40.jpg)
J040
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Stilizzazione del testo
Vengono introdotti attributi applicabili alla maggior parte delle tag:ID fornisce all’elemento un nome tramite il quale può
essere referenziatoTITLE associo una descrizione all’elemento. Normalmente
non è visibile. CLASS dichiara l’appartenenza dell’elemento ad un gruppo
(classe) usabile per definirne caratteristiche comuni. STYLE attribuisce uno stile all’elemento. LANG dichiara una lingua per l’elementoDIR specifica la direzione della scrittura (ltr o rtl)
![Page 41: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/41.jpg)
J041
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Stilizzazione del testo: ID e STYLE
<p id="trento" style="color: red"> Paragrafo su trento...</p><BR><BR><BR><BR><BR><BR><BR><BR><HR>Vedi <a href="#trento">Trento</A>...
![Page 42: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/42.jpg)
J042
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Descrizione del testo
...talk to<ABBR title="mister">Mr.</ABBR> Smith<HR>...there are <del>eight</del> <ins>seven</ins> days left to Christmas <HR>...the <acronym title="World Wide Web">WWW</acronym> exploded in 1995<HR>Amleto disse: <Q>Essere o non essere</Q>
Abbreviation (*)
Delete/insert
Quote (*)
Acronimo (*)
(*) Ad uso dei robot
![Page 43: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/43.jpg)
J043
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Miglioramenti alle Tabelle
Nelle tabelle viene introdotto il concetto di:Header THEADBody TBODYFooter TFOOTSe la tabella diventa molto grande, lo scorrimento (scroll)avviene solo sul Body mantenendo fissi Header e Footer.
Vi sono poi diverse utilità per formattare omogeneamentegruppi di celle (tag col e colgroup, attributi align di tr e di tbody) e per lavorare con sotto celle (tag entry)
![Page 44: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/44.jpg)
J044
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Miglioramenti alle Form
Viene introdotta la possibilità di usare il tasto TAB per muoversi tra i campi (l’attributo Tabindex=“n” specifica l’ordine della visita)
Viene data la possibilità di usare delle scorciatoie da tastiera(l’attributo Accesskey=“carattere”specifica il tasto da premere in combinazione con il tasto ALT)
Si possono inoltre rendere attivi degli elementi di input tramite laTag LABEL: nel codice che segue la digitazione di un RETURN nel campo di testo attiva l’azione senza premere bottoni.
<FORM method="POST" action="/cgi-bin/elabora">Scrivi il tuo nome <label><Input type="text" name=“a”></label> </FORM>
![Page 45: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/45.jpg)
J045
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Frames
Usando i frames lo schermo é diviso in aree,a ciascuna delle quali è possibile far corrispondere un diverso documento(attributo src).Vanno usati con grande attenzione perché è possibile disorientare l’utente e perché si possono fare ’pasticci’ di varia natura.
Quando si usano i frames la sezione body viene sostituita dauna sezione frameset che ha il compito di definire come lapagina viene suddivisa.
Il contenuto dell’eventuale tag noframes viene ignorato, ed usato solo da browser non abilitati ai frames.
![Page 46: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/46.jpg)
J046
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Frames
<FRAMESET rows="50%, 33%, 16%"><FRAME name="alto" src="..."><FRAME name="main" src="..."><FRAME name="basso" src="..."><NOFRAMES>Sul tuo browser i frames non sono riconosciuti. Una questo indirizzo: <A HREF="noframes"> http:.../noframes</A></NOFRAMES></FRAMESET>
![Page 47: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/47.jpg)
J047
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Frames
Il frameset può essere organizzato per colonne (cols=…)oppure per righe (rows=…).Lo spazio può essere riservato in forma assoluta (50), percentuale (50%) o proporzionale (2*,*).
<FRAMESET cols="50%, 100, 2*, *"><FRAME name="sx" ><FRAME name="main" ><FRAME name="dx1" ><FRAME name="dx2" ></FRAMESET>
![Page 48: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/48.jpg)
J048
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Frames
Il frameset può anche essere chiamato ricorsivamente
<FRAMESET cols="50%, 100, 2*, *"> <FRAMESET rows=3*,2*,1*> <FRAME name="su" > <FRAME name="centro" > <FRAME name="giu" > </FRAMESET> <FRAME name="main" > <FRAME name="dx1" > <FRAME name="dx2" ></FRAMESET>
![Page 49: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/49.jpg)
J049
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Frames
A ciascun frame si può associare un nome (attributo name).
Il nome può poi essere utilizzato all’interno di un link (attributo target) per indicare che l’oggetto di quel link va visualizzato nella sottofinestra (frame) specificata. Il nome top è associato alla finestra intera.
<A HREF=“URL” TARGET=“dx1”>…</A>
![Page 50: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/50.jpg)
J050
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Oggetti
Viene introdotta la tag OBJECT per fornire al browserinformazioni utili a caricare o visualizzare tipi di datinon supportati nativamente (applets, plugins, Controlli Active-X ecc.)
Una eventuale tag PARAM al suo interno permette dipassare parametri alla applet o plugin.
<OBJECT HEIGHT=… WIDTH=… CLASSID=…><PARAM NAME=… VALUE=…></OBJECT>
![Page 51: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/51.jpg)
J051
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
HTML TESTING & REFERENCE
All’indirizzo:
http://www.w3.org/MarkUp/html-test/Overview.html
trovate servizi di validazione delle pagine HTML
All’indirizzo:
http://www.w3.org/MarkUp/
trovate le pagine ufficiali sull’HTML, sempre aggiornate.
![Page 52: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/52.jpg)
J052
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
DHTML
Per DHTML (Dynamic HTML) si intende l’insieme di:
•HTML 4.0•CSS – CSS/P (Cascading Style Sheet)•DOM (Document Object Model)•ECMA (JavaScript)
![Page 53: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/53.jpg)
J053
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
XHTML 1.0
Ridefinizione di HTML come un’applicazione XML invece che SGML.
Vedere http://www.w3.org/TR/xhtml1/
Non introduce nuove caratteristiche rispetto ad HTML 4.0ma pone dei nuovi vincoli.
![Page 54: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/54.jpg)
J054
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
XHTML 1.0 - vincoli
Ci DEVE essere una dichiarazione di tipo DOCTYPEAll’inizio del documento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
![Page 55: J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione](https://reader036.vdocuments.mx/reader036/viewer/2022081502/5542eb4f497959361e8bf040/html5/thumbnails/55.jpg)
J055
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
XHTML 1.0 - vincoli
• Le tag e gli attributi devono esser scritti in minuscolo.• Gli sttributi devono stare tra virgolette• A ogni tag aperta deve corrispondere una tag di
chiusura, o• Le tag “vuote” devono essere terminate con una \ (Es.
<img src=“URL” \> )• Il corpo degli script deve stare in una sezione CDATA
<script> <![CDATA[ ... unescaped script content ... ]]> </script>