C dL in Ing e gn e ri a E le tt ron ica e In fo rm a tica M odu lo d i Fond a m e n ti d i I n fo rm a tica D

(1)

Franco Zambonelli - HTML- 1

C dL in Ing e gn e ri a E le tt ron ica e In fo rm a tica M odu lo d i Fond a m e n ti d i I n fo rm a tica D

Il L ingu a gg io H T M L

P ro f. F ra n c o Z a m bon e lli F e bb ra io 2001

WWW (M osa ic , N e tscape , E xp lo re r)

s tr u tt u ra z ione ipe rte s tua le de lle in fo rm a z ion i (tr a s pa ren z a de lla a llo c a z ione de lle in fo rm a z ion i) e u s o d i i n te rfa cc e g ra fic he (s e m p lic ità d i u tili zz o )

abcdef FORM

INPUT UTENTE

OUTPUT ELABORAZIONE

elemento

RETE VISIONE LOCALE

NODI REMOTI

F a c endo “c lick ”s u una pa ro la /imm ag ine s i “e s pande ” una pa rte de l do c u m en to c he in te re ss a . N on e ’ ne c e ss a rio “pe rc ep ire ” il fa tt o c he il do c u m en to s ia s u l fil e sys te m lo c a le o s u una m a cc h ina re m o ta .

(2)

S IS T E M A WWW

P ro to c o ll o c li e n t- se rve r pe r il tr a s fe rim en to d i pag ine ipe rte s tua li

richiesta

risposta HTTPclient HTTPserver

TCP / IPTCP / IP CGI applicazioni esterneapplicazioni di supporto

rete sistema remotosistema locale

S p ec if ic h e s ta nd a rd p e r il W e b

• S is te m a d i i nd iri zz a m en to un iv e rs a le UR I e UR L (U n ifo rm R e s ou rc e Iden tif ie r/Lo c a tion ) S e rv e pe r po te r iden tif ic a re un iv o c a m en te le pag ine ipe rte s tua li. • P ro to c o llo H TT P (H y pe rT e x t T ran s fe r P ro to c o l). S tab ili sc e lo sc he m a d i c o m un ic a z ione tr a c lien te e s e rv ito re . • L inguagg io H T M L (H y pe rT e x t M a rk up Language ). L inguagg io pe r la de sc riz ione d i do c u m en ti i pe rte s tua li

H T M L H y pe rT e x t M a rk up L anguage

H T M L è un linguagg io d i s pe c ifi c a de lle in fo rm a z ion i c he de riv a da S G M L (S tanda rd G ene ra liz ed M a rk up Language ). E ' un m a rk up la ngu a g e ( T e X , R TF ).

I linguagg i m a rk up u s ano de i ta g (“m a rc a to ri”) de fin iti fun z ion a lm e n te pe r c a ra tt e rizz a re g ra fic a m en te il te s to in c lu s o . • H T M L agg iunge s pe c ifi c he pe r la in c lu s ione d i fil e m u lti m ed ia li (p .e ., imm ag in i, f ilm a ti, e s uon i) • H T M L agg iunge s pe c ifi c he pe r la de fin iz ione d i c o llega m en ti i pe rte s tua li c on a ltr i (pa rti d i) te s ti

E se m p i d i ta g H T M L

te st o d i ti po h ea d er 1 : <H1>testo</H1> te st o in g ra ss ett o : <STRONG>testo</STRONG>

oppure

<B>testo</B>

Visualizzazione (cioè tipo di carattere e grandezza) dipendente dalbrowser

C o ll eg am en ti i p er te st u ali (li nk ): <A HREF = "destinazione"> descrizione </A>

imm ag in i: <IMG SRC = "myimage.gif">

H T M L m o lt o se m p li ce pe r non c o m p lic a re il c lien te ve rs ion e b ro w se r p rop ri e tà 1 .0 s to ric o heade r, lis te , en fa s i 2 .0 M o s a ic In line Im age , f o rm 2 .1 N e tsc ape /M ic ro s o ft tabe lle , a lli nea m en to 3 .2 N e tsc ape /M ic ro s o ft fr a m e , ... 4 .0 N e tsc ape /M ic ro s o ft S tili , J a v a S c rip t

(3)

Franco Zambonelli - HTML- 5 Franco Zambonelli - HTML- 6

E se m p io pag ina H T M L (cod ice )

<HEAD> <TITLE>Page Title</TITLE> </HEAD>

<BODY> <H1>Example of HTML document</H1>

The second paragraph shows special effects. This is a word in <I>italics</I>. This is a word in <B>bold</B>. Here is an in-lined GIF image: <IMG SRC = "myimage.gif">. <P>

The third paragraph demonstrates links. Here is a hypertext link from the word <A HREF = "subdir/myfile.html">hello</A> to a document called "subdir/myfile.html". <P>

<H2>A second-level header</H2>

This is a unordered list with two items: <P> <UL> <LI> cranberries <LI> blueberries </UL> This is the end of my example document. <P> <ADDRESS> Me (me@deis.unibo.it) </ADDRESS> </BODY>

(4)

E se m p io pag ina H T M L (v isua li zz a z ione )

S tr u tt u ra p a g in a H T M L

<HTML> <! -- questo e’ un commento --> <!—il tag HTML specifica il lunguaggio con cui e’ scritto il file, tipicamente HTML generico, ma si puo’ specificare anche una versione particolare di HTML -->

<HEAD> <! -- il tag HEAD deve include specifiche - ->

<TITLE> The title of your document goes here. </TITLE> <!—TITLE significa che va sulla sbarra della finestra windows --> </HEAD>

<BODY> Tutto cio’ che e’ compreso tra i tag di body rappresenta il testo del documento. </BODY>

</HTML>

(5)

Il Tag B ody

Il tag < B O D Y > s tab ilsc e l’a s pe tt o gene ra le de l do c u m en to .

D e fau lt (c o m e e s e m p io d i p rim a ): • te s to ne ro • s fondo b ian c o • lin k in b lu • lin k v is ita ti i n v io la

S i po ss ono s pe c ifi c a re a tt ribu ti s pe c ifi c i pe r il bod y tag :

E s e m p io :

<BODY BGCOLOR=" black" TEXT="#30ff3d" LINK="#f89400" ALINK="purple" VLINK="#FF8DDD">

C o lo ri s pe c ifi c a ti • C on no ta z ione R G B • C on no m i s im bo lic i

N O T A : pe r qua s i tu tt i i tag H T M L s i po ss ono s pe c ifi c a re a tt ribu ti c he c a ra tt e rizz ano le p rop rie ta ’ d i (pa rti de l) do c u m en to e de l te s to

Il t es to H T M L

P a ra g ra fi (In te s i c o m e il te s to c o m p re s o tr a due pun ti e a c apo ).

<p> Testo del paragrafo.</p> <p ALIGN=" CENTER">Testo di un paragrafo allineato al centro, i.e., giustificato, Gli altri allineamenti sono center e left</p>

R it o rno d i L in ea : tag <br>

B o ld ( g ra ss e tt o ): il te s to c he s egue <b> va in g rasse tt o </b> fino a qu i

It a li c ( c o rs iv o ): il te s to c he s egue <b> c o rs iv o </b> fino a qu i

U nd e rli n e ( g ra ss e tt o ): il te s to c he s egue <b> s o tt o linea to </b> fino a qu i

F O N T S pe c ifi c ano il tipo e il fo rm a to de l c a ra tt e re da u s a re . M o lti a tt ribu ti: • S IZ E : <FONT SIZE="-2">

piccolo

</FONT> (c a m b ia ris pe tt o a lla d im en s ione c o rr en te ) oppu re < F ON T S IZE = "4 "> ( d im en s ione a ss o lu ta ) • F AC E : t ipo d i c a ra tt e re (s e e s is ten te s u l s is te m a ) <FONT

FACE="Coronet, Times New Roman”>

</FONT> in o rd ine il p rim o tr o v a to ne lla lis ta • C O L O R

(6)

T it o li ( H ead ings )

S e rv ono pe r fo rm a tt a re il te s to c on i tit o li de i c ap ito li e s o tt o c ap ito li … I v a ri li v e llo hanno il te s to c he c a la c o l c re sc e re de l li v e llo

< h1 > T ito lo d i p rim o liv e llo < /h1 >

< h2 > T ito lo d i s e c ondo liv e llo < /h2 >

… .

< h6 > T ito lo d i s e s to liv e llo < /h6 >

S i puo ’ o tt ene re la s te ss a c o s a u s ando F O N T S IZ E , m a e ’p iu ’ sc o m odo .

E lench i pun ta ti e N u m e ra ti

P e r da re ril e v an z a a lis te /in s ie m i d i c on c e tt i fr a s i. Il tag < u l> in c lude i pun ti d i un e len c o pun ta to . I l tag < li> ind ic a i v a ri pun ti. Ecco dei punti importanti: <ul> <li>Primo punto</li> <li>Secondo punto</li> </ul> Che significano che….

E cc o de i pun ti i m po rtan ti: • P rim o pun to • S e c ondo pun to C he s ign ifi c ano c he …

C on il tag < o l> in v e c e d i < u l> s i o tt engono e len c h i nu m e ra ti:

E cc o de i pun ti i m po rtan ti: 1 . P rim o pun to 2 . S e c ondo pun to C he s ign ifi c ano c he …

S i po ss ono an c he inne s ta re tr a lo ro .

L in ea o ri zz on ta le <hr>

In s e risc e una linea o rizz on ta le ne l te s to

(s i puo ’ s pe c ifi c a re la lunghe zz a < HR W ID T H = ”50 % ”>

(7)

L INK (co ll ega m en ti i pe rt es tua li)

Il tag <A> s e rv e pe r la s tr u tt u ra z ione ipe rte s tua le de i do c u m en ti:

• a tt ribu to HR E F pe r ind ic a re un c o llega m en to a un a ltr o pun to de l do c u m en to oppu re a un ’a ltr a pag ina H T M L , oppu re a un ind iri zz o d i m a il • a tt ribu to N A M E pe r da re un no m e a un pun to de l do c u m en to a c u i c i s i v uo le c o llega re

One excellent Web directory is <A HREF="http ://www.yahoo.com/">Yahoo.</A> Yahoo links to all sorts of pages such as the <A HREF= "http://www.unimo.it/"> University of Modena home page</A>. Franco attends the University of Modena; you can email Franco (<A HREF="mailto :zambo@unimo.it"> zambo@unimo.it </A>).

W hen loaded in a W eb b ro w s e r, t he abo v e te x t w ill loo k lik e th is :

O ne e x c e llen t W eb d ire c to ry is Y ahoo . Y ahoo lin ks to a ll s o rts o f page s s u c h a s the U n iv e rs ity o f M odena ho m e page . F ran c o a tt end the U n iv e rs ity o f M odena ; y ou c an e m a il F ran c o (fr an c o .z a m bone lli @ un im o .it ).

L INK (co ll ega m en ti i pe rt es tua li)

• a tt ribu to N A M E pe r da re un no m e a un pun to de l do c u m en to a c u i c i s i v uo le c o llega re

Questo e’ il mio documento PIPPO <A NAME=”primo”> <H1> Primo Capitolo <h1> </A> Bla Bla Bla

<H2> Secondo Capitolo </h2> Bla2 Bla2 Bla2

Adesso metto un link <A HREF=”#primo”> Clicckando qui si torna all’inizio del primo capitolo di questo documento</A> ….

O ppu re in un a ltr o do c u m en to H T M L

<A HREF=”http ://zambo.it/pippo.html#primo”> Clicckando qui si torna all’inizio del primo capitolo di questo documento del documento pippo su zambo.it</A>

(8)

INSER IM EN T O DE LL E IMM A GI N I

E ’ po ss ib ile in s e rir e qua ls ia s i i mm ag ine , in qua ls ia s i pun to

de llo sc he rm o . Le imm ag in i de v ono e ss e re in fo rm a to GI F o

in fo rm a to J P G.

Tag/AttributeUse<IMG>evidenzia un’immagine all’interno di un documentoHTMLALT=”…”specifica testi alternativi che sono mostrati seun’immagine non appareSRC=”…”indica un file di immagine da includere (URL)HEIGHT=nspecifica l’altezza finale di un immagine in pixelWIDTH=nspecifica la larghezza finale di un’immagine in pixelBORDER=nspecifica la larghezza del bordo attorno aun’immagine in pixelALIGN=”…”Specifica allineamenti di immagine come TOP,MIDDLE, BOTTOM, LEFT or RIGHT

E s e m p i:

<IMG src=”stella. jpg” height=300 width=180> <IMG src=”http ://www.mysite.com/p1.jpg”>

E una imm ag ine puo ’ e ss e re un lin k :

<a href=”http ://www.disney.com> <IMG src=”myckeymouse.jpg”> </a>

IMM A GI N I M APPA

N on s o lo e ’ po ss ib il e a v e re d e ll e imm a g in i c h e s ono li n k , m a e ’ po ss ib il e d e fin ir e c o ll e g a m e n ti d iv e rs i a pun ti d iv e rs i d i un a imm a g in e .

B is ogn a d e fin ir e qu a li l e a ree d i un a imm a g in e s u c u i s i puo ’ c li ccka re e a c o se s i c o ll e g a no qu es ti a ree .

<img src="pages.gif" width="384" height="245" usemap=”#miamappa”>

<map name="miamappa"> <area shape="circle" coords="186,44,45" href="Overview.html"> <area shape="circle" coords="42,171,45" href="Style. html> <area shape="circle" coords="186,171,45" href=”MyFile.html”>

<area shape="circle" coords="318,173,45" href="Advanced.html"> </map>

ALTERNATIVE:

<area shape=”rect” coords=”left-x, top-y, right-x, bottom-y> <area shape=”circle” coords=”center-x, center-y, radius”>

(9)

T ABE LL E

Le tabe lle s ono a lla ba s e d i tu tt e le fo rm a tt a z ion i d i

pa rag ra fi. Q ua ls ia s i tipo d i a lli nea m en to e d i s tr u tt u ra

g ra fic a /log ic a de lla pag ina può e ss e re rea lizz a ta a tt ra v e rs o l’u s o app rop ria to de lle tabe lle .

Le tabe lle s ono c o s tr u ite pe r r ighe . E ’ po ss ib ile in s e rir e

un ’in te s ta z ione a lla c o lonna e una in te s ta z ione a lla tabe lla

s te ss a .

T a g U se < T AB L E > In s e risc e una tabe lla den tr o un do c u m en to H T M L < T R > E v iden z ia una linea den tr o la tabe lla ; il c o m ando d i c h iu s u ra è op z iona le < T D > E v iden z ia una c e lla (tab le da ta ) a ll’i n te rno d i una riga < T H > E v iden z ia una c e lla d i i n te s ta z ione den tr o una linea

ESE M P IO D I T ABE LL A

<table> <tr><th>Eta</th><th>Altezza</th></tr> <tr><td>9</td><td>125</td></tr> <tr><td>12</td><td>135</td></tr> <tr><td>16</td><td>159</td></tr> </table>

APPA R E C O S I’:

E ta A lt e zz a 9 125 12 135 16 159

(10)

SPANN IN G S R O W S AND C O L U M NS

S pann ing s s i rif e risc e a lla po ss ib ili tà d i e s tende re una c e lla s u p iù linee o c o lonne .

A tt ri bu te U se R O W SP AN = n U s a to ne i c o m and i < T H > e < T D > ind ic a quan te linee la c e lla do v rebbe c on tene re C O L SP AN = n U s a to ne i c o m and i < T H > e < T D > ind ic a quan te c o lonne la c e lla do v rebbe ric op rir e

A GG IUN G E ND O CA P T IO N S

U n c ap tion è un te s to d i s p iega z ione o de sc ritt iv o c he d i s o lit o c o m pa re s op ra la tabe lla .

T A G /A TT R IBU T E U SE < CA P T IO N > u s a to den tr o una tabe lla pe r iden tif ic a re il te s to de l tab le c ap tion A L IG N = ” … ” c o llo c a il c ap tion a ll’i n iz io o a lla fine de lla tabe lla (r is pe tt iv a m en te T O P e B O TT O M )

F O R M A TT A Z IO NE DE LL E T ABE LL E

U na v o lta c he è s ta ta p red is po s ta una tabe lla , è po ss ib ile agg iunge re un c e rto nu m e ro d i op z ion i d i fo rm a tt a z ione c he m ig lio rano il s uo a s pe tt o g loba le . I n pa rti c o la re è po ss ib ile u tili zz a re le s eguen ti po ss ib ili tà : 1 . agg iunge re bo rd i 2 . i n c lude re c o lo ri d i s fondo e imm ag in i 3 . agg iu s ta re lo s pa z io e il m a rg ine in te rno de lle c e lle 4 . agg iu s ta re l’a lli nea m en to de lle c e lle 5 . s pe c ifi c a re la d im en s ione de lle c e lle 6 . s pe c ifi c a re l’a lli nea m en to de lle tabe lle

(11)

B O RD I D I T ABE LL E

I bo rd i de lle tabe lle s i s pe c ifi c ano u s ando un a tt ribu to e un nu m e ro , m is u ra ti i n p ix e l, c he c o m un ic ano a l b ro w s e r l’a m p ie zz a de l bo rdo . P e r fa re que s to b is ogna ag ire s u l tag < T AB L E > agg iungendo le op z ion i d i s egu ito e len c a te .

A tt ri bu te U se B O RD E R = n s pe c ifi c a la la rghe zz a de l bo rdo d i una tabe lla , c he è m is u ra to in p ix e l. A nu m e ro e le v a to c o rr is ponde un bo rdo p iù s pe ss o B O RD E RC O L O R = “ # rr ggbb ” s e rv e a s pe c ifi c a re un c o lo re pe r il bo rdo de lla tabe lla c o m e nu m e ro o c o m e no m e B G C O L O R = ” … ” u s o d i un c o lo re d i s fondo BACK G R O UND = “ ... ” u s o d i un ’imm ag ine d i s fondo

A lli nea m en to de ll e ce ll e Il c on tenu to d i una c e lla può e ss e re a lli nea to ris pe tt o a l bo rdo de lla c e lla s ia o rizz on ta lm en te s ia v e rti c a lm en te . P e r fa re que s to è ne c e ss a rio in tr odu rr e c o m e a tt ribu to de l tag < T D > le s eguen ti op z ion i: A tt ri bu ti U s i A L IG N = n S pe c ifi c a l’a lli nea m en to o rizz on ta le de l c on tenu to de lle c e lle , c o m e L E FT , C E N T E R , o R IG H T V A L IG N = n S pe c ifi c a l’a lli nea m en to v e rti c a le de l c on tenu to de lle c e lle , c o m e T O P , M IDD L E , B O TT O M , o BASE L IN E

A m p ie zz a de ll e tabe ll e e de l t ex t w rap

Le c e lle po ss ono e ss e re d im en s iona te s e c ondo d im en s ion i v o lu te e s i può fo rz a re il b ro w s e r a non e ff e tt ua re anda te a c apo s u s e z ion i d i te s to ind ic a te . P e r fa re que s to è ne c e ss a rio in tr odu rr e c o m e a tt ribu to de l tag < T D > le s eguen ti op z ion i:

A tt ri bu ti U s i W ID T H = ” n ” S pe c ifi c a l’a m p ie zz a de lle c e lle in p ix e l o c o m e pe rc en tua le de ll’ a m p ie zz a de lla tabe lla N O W RA P Im ped isc e la s o v rappo s iz ione de l te s to a ll’i n te rno de lle c e lle c o s i’ ric h iede c he tu tt o il te s to appa ia in un ’un ic a linea

E ’ po ss ib ile m od ifi c a re s ia lo s pa z io tr a una c e lla e l’a ltr a s ia lo s pa z io tr a la linea c he s epa ra le c e lle e il te s to s te ss o . Le s pa z ia tu re sc e lte de v ono pe rò e ss e re un ifo rm i a ll’i n te rno de lla s te ss a tabe lla . S i ag isc e s u l c o m ando < T AB L E > c on i s eguen ti a tt ribu ti:

A tt ri bu ti U s i C E LL SP AC IN G = n S pe c ifi c a in p ix e l l o s pa z io e s is ten te tr a le c e lle C E LL P ADD IN G = n S pe c ifi c a in p ix e l l o s pa z io e s is ten te tr a il c on tenu to e il bo rdo de lle c e lle

(12)

A lli nea m en to e d im ens iona m en to de ll a tabe ll a

La tabe lla può e ss e re oppo rtuna m en te d im en s iona ta e oppo rtuna m en te a lli nea ta a ll’i n te rno de l do c u m en to . S i u s ano i s eguen ti a tt ribu ti de l c o m ando < T AB L E >

A tt ri bu te U se W ID T H = n Ind ic a la d im en s ione de lla tabe lla o in nu m e ro d i p ix e l o in pe rc en tua le de lla d im en s ione de lla fine s tr a A L IG N = ” ... ” Ind ic a l’a lli nea m en to de lla tabe lla c o m e L E FT , R IG H T , C E N T E R

UN A L T R O ESE M P IO: <TABLE CELLPADDING="5" CELLSPACING="10" BORDER="2" WIDTH="100" HEIGHT="100"> <TR ALIGN ="CENTER"> <TD><STRONG>Item One</STRONG></TD> <TD BGCOLOR="#888fff">Item Two</TD> </TR> <TR BGCOLOR="#ffaaff"> <TD COLSPAN="2">Item Three, plus a description</TD> </TR> </TABLE>

F RA M ES

P e r ge s tir e riquad ri m u lti p li d i pag ine H T M L . In p ra tic a , un s ito a “fr a m e ” s udd iv ide lo sc he rm o de l b ro w s e r in p iu ’ riquad ri, s u ognuno de i qua li v i s a ra ’ una pag ina H T M L .

N e lla pag ina in iz ia le :

< F RA M ESE T > ri m p ia zz a < B O D Y >

e c on e ss a de fin isc o l’i n s ie m e d i “fr a m e ” ne l qua le s a ranno in s e rit e pag ine H T M L .

A tt ri bu ti:

C O L S , R O W S , s pe c ifi c ano il nu m e ro e la d im en s ione de i fr a m e .L A d im en z ione puo ’ e ss e re in p ix e l o in pe rc en tua le s u lla d im en s ione to ta le de lla pag ina . La wil d c a rd (* ) ind ic a c io ’ c he rim ane .

Il ta g < F RA M E >

S e rv e pe r: a tt ribu to S RC : il no m e de l fil e H T M L c he do v rá appa rir e ne l fr a m e a tt ribu to N A M E : s pe c ifi c a re il no m e de i v a ri fr a m e

(13)

ESE M P IO D I F RA M ES

Il fr a m e s e t c rea tr e c o lonne , una la rga il 20 % de lla pag ina , l’u lti m a la rga due c en to p ix e l, e que lla in m e zz o d im en s iona ta d i c on s eguen z a .

La c o lonna d i s in is tr a e ’ po i s pe zz a ta in due righe , que lla a lta d i a lte zz a 250 p ix e l, que lla ba ss a d im en s iona ta d i c on s eguen z a .

<FRAMESET COLS="20% ,,200"> <FRAMESET ROWS="250 ,"> <FRAME SRC="a. html" NAME="A"> <FRAME SRC="b.html" NAME="B"> </FRAMESET> <FRAME SRC="c.html" NAME="C"> <FRAME SRC="d.html" NAME="D"> </FRAMESET>

N OM E E T AR G E T

Il no m e (a tt ribu to N A M E ) d i un fr a m e puó e ss e re u s a to pe r s pe c ifi c a re il fr a m e d i de s tina z ione d i un lin k : s e rv e l’a tt ribu to T A R G E T pe r il li n k .

E s e m p io :

<A HREF=" target. html" TARGET="body">Why don't you click here?</A>

In una pag ina a fr a m e c on un fr a m e c he s i c h ia m a “bod y ” fa c endo c lick s u que l li n k s i fa in m odo c he la nuo v a pag ina appa ia s u l fr a m e d i no m e “bod y ”.

A LT R I A TT R IBU T I PER I F RA M E

S CR O LL IN G pe r m e tt e re la s pa rr a d i sc o rr im en to . V a lo ri po ss ib ili : YES , N O, o A U T O

N O R ES IZ E S e rv e pe r s pe c ifi c a re s e a un rid im en s iona m en to de lla fine s tr a de l b ro w s e r de v e s egu ire un rid im en s iona m en to de l b ro w s e r o m eno . V a lo ri po ss ib ili : YES o N O.