J0 1 Marco Ronchetti - [email protected] HTTP e HTML HTML: evoluzione.
55
-
Upload
severino-fabbri -
Category
Documents
-
view
230 -
download
0
Transcript of J0 1 Marco Ronchetti - [email protected] HTTP e HTML HTML: evoluzione.
J01
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
HTTP e HTML
HTML: evoluzione
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.
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>
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
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”>
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
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>
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>
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>
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
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:
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>
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
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
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
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!
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
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
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=…
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>
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>
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
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.
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
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
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>
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)
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.
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>
J030
Marc
o R
onch
ett
i
-
ronch
et@
alt
avis
ta.it
Tabelle
<table border cellpadding=5>
<table border cellspacing=5>
<table border>
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
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
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
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>
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">
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
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!
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…)
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>
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)
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>...
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
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)
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>
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.
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>
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>
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>
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>
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>
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.
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)
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.
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">
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>
