Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Corso Base HTML
Corso Base HTML
it
INFN Sezione di Milano
Quando,doveeda chiestato
inventato lHTML?
y QUANDO:nel 1990
y DOVE:alCern
y DACHI:daTimBernersLee eRobertCaillau
INFN CorsobasediHTML(GenFeb2008)
Laprimapagina HTML
y Questaeinassoluto laprimapagina webmai scritta
NOTA:
I pc di oggi sono
circa 100 volte piu
performanti!
3
Findal principio
y Non ho mai previsto che il codice sorgente di HTML fosse
INFN CorsobasediHTML(GenFeb2008)
Esempio di tag
y Una frase contenuta tra i tags<u></u>,quando viene
INFN CorsobasediHTML(GenFeb2008)
Internet,comeFirefox,Netscape,InternetExplorer,
Seamonkey,eccetera
y Utilizzo tipico:il browsersi collega aduna URL
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>ServiziodiAmministrazione</title>
<metahttpequiv="ContentTypecontent="text/html;charset=ISO88591">
<metahttpequiv="EXPIRES"content="0">
<metaname="RESOURCETYPE"content="DOCUMENT">
<metaname="DISTRIBUTION"content="GLOBAL">
<metaname="AUTHOR"content="ServiziodiAmministrazione">
<metaname="COPYRIGHTcontent="Copyright(c)by ServiziodiAmministrazione">
<metaname="DESCRIPTION"content="">
<metaname="ROBOTS"content="INDEX,FOLLOW">
<metaname="REVISITAFTER"content="1DAYS">
<metaname="RATING"content="GENERAL">
</head>
<bodystyle="color:rgb(0,0,0);backgroundcolor:rgb(240,255,255);link="#101070"vlink="#101070">
<br>
<br>
<center>
<ahref=""><img src="logo.gif"alt="Welcometo theDirector'spagestyle="border:0pxsolid ;width:690px;height:82px;"></a><br>
eccetera
ESERCIZIO
INFN CorsobasediHTML(GenFeb2008)
Pagina minimaHTML
y <html>
<head>
<title>Pagina minimaHTML</title>
</head>
Avremmo potuto
<body>
scrivere lapagina
tutta su una riga,il
Corso basedi Html
browserlavrebbe
</body>
visualizzata nello
stesso modo
</html>
Nota:leindentazioni hanno solouna funzione estetica,
servono adaumentare laleggibilitadella pagina.
http://html.mi.infn.it/corsohtml/paginaminima.html
INFN CorsobasediHTML(GenFeb2008)
10
INFN CorsobasediHTML(GenFeb2008)
11
InstalliamoSeamonkey
y Chinonloavesseancorafatto,puo scaricareed
installareSeamonkey da:
y http://www.mozilla.org/projects/seamonkey
INFN CorsobasediHTML(GenFeb2008)
12
Utilizzo di Seamonkey
y Avviamo Seamonkey
y Apriamo il Composer
INFN CorsobasediHTML(GenFeb2008)
13
Lanostraprimapagina HTML
y Seamonkey
si
apre
nella
sezione
Normal,
INFN CorsobasediHTML(GenFeb2008)
14
Analisi delcontenuto
y
y
y
y
y
y
y
y
y </body>
y </html>
INFN CorsobasediHTML(GenFeb2008)
15
INFN CorsobasediHTML(GenFeb2008)
16
Itagpiuutili
y <b>grassetto (dallinglese bold)
y <u>sottolineato (underlined)
y <i>corsivo (italic)
y <center>centrato
y <left>allineato asinistra
Apro il tag:<tag>
Chiudo il tag:</tag>
y <br>acapo(break)
y <big>aumenta ladimensione delcarattere
y <small>diminuiscila
INFN CorsobasediHTML(GenFeb2008)
17
<b><u><i><center><left><right><br><big><small>
y Attenzione!Seuntagnonviene chiuso,il suo
effetto permane fino alla finedella pagina.Ades.,
senonchiudo il tag<u>conil tag</u>,tutto
quello che verradopo <u>sarasottolineato
y Poiandiamo nella sezione Previewevisualizziamo il
risultato
INFN CorsobasediHTML(GenFeb2008)
18
19
<u><b><i>
Mache bello che equesto corso!
</u></b></i>
restituisce:
Mache bello che equesto corso!
INFN CorsobasediHTML(GenFeb2008)
20
Acaccia di tag(1):grassetto,
sottolineato,corsivo,eccetera
y Ora facciamo loperazione inversa,utilizziamo la
Ingrandisci
Colore deltesto
e
Sposta
Sposta
Scrivi
lariga
lariga
allineato
Scrivi allineato
a Scrivi a
Rimipicciolisci
la la
Evidenziatore
Grassetto
Corsivo
Sottolineato
Elenco
Elenco
ordinato
numerato
Scrivi
centrato
dello sfondoscritta
versosinistra
versodestra
sinistra
giustificato
destra
scritta Proviamo assieme
INFN CorsobasediHTML(GenFeb2008)
21
ESERCIZIO
INFN CorsobasediHTML(GenFeb2008)
22
y <ul>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
<li>quarto elemento</li>
</ul>
INFN CorsobasediHTML(GenFeb2008)
23
y <ol>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
<li>quarto elemento</li>
</ol>
INFN CorsobasediHTML(GenFeb2008)
24
ESERCIZIO
salviamola nuovamente
INFN CorsobasediHTML(GenFeb2008)
25
Acaccia di tag(3):Icommenti
y Epossibile includere inuna pagina webun
INFN CorsobasediHTML(GenFeb2008)
26
ESERCIZIO
INFN CorsobasediHTML(GenFeb2008)
27
28
INFN CorsobasediHTML(GenFeb2008)
29
30
comandoscp dallashell,oppureilclientgraficogftp
y AnchegliutentiMacOS possonoservirsidelcomando
scp dallashell,oppuredelclientgraficoFugu
INFN CorsobasediHTML(GenFeb2008)
31
comune html,conpassword**********
HTML.MI.INFN.IT
INFN CorsobasediHTML(GenFeb2008)
32
y Accettiamo eproseguiamo
INFN CorsobasediHTML(GenFeb2008)
33
INFN CorsobasediHTML(GenFeb2008)
34
INFN CorsobasediHTML(GenFeb2008)
35
ESERCIZIO
y Utilizzando winscp accediamo alserverweb
INFN CorsobasediHTML(GenFeb2008)
36
Riusciamo a
visualizzare il
fileutilizzando
il browserweb?
INFN CorsobasediHTML(GenFeb2008)
37
Leimmagini (1)
y <img style="width: 160px; height: 120px;" alt="INFN"
src=infn.gif">
y Se,perinserire unimmagine,utilizziamo il bottone
38
Leimmagini (2)
width
50%dellafinestra
height
Limmagine
saradeformata!
100%dellafinestra
Finestradel
browser
INFN CorsobasediHTML(GenFeb2008)
39
hyperlink,spessoabbreviatoinlink,usatoancheinitaliano)un
rinviodaun'unitinformativasusupportodigitaleadun'altra.
cichecaratterizzalanonlinearitdell'informazionepropriadi
unipertesto.
y Uncollegamentoipertestualehaloscopodicondurread
ulterioriunitinformative(documenti,immagini,etc.)apartire
daunaprimaunitadessecorrelata.
Tratto da Wikipedia
y Uncollegamentoipertestualenormalmentepuesseredistinto
dalrestodeldocumentoperqualchesuapeculiaritgrafica;la
pitipicaunasottolineatura.L'attivazionediuncollegamento
vieneeffettuataattraversounclicdelmouse,cuiseguela
visualizzazionedelladestinazionedelcollegamento.
INFN CorsobasediHTML(GenFeb2008)
40
IlLink(1)
y Eccounesempiodilink
y <html>
<body>
EccounlinkversoilsitowebdellaSezionedi
Milano<br>
<ahref=http://www.mi.infn.it>INFN</a>
</body>
</html>
y Ilrisultatoevisibilesu
http://html.mi.infn.it/corsohtml/link.html
INFN CorsobasediHTML(GenFeb2008)
41
IlLink(2)
y <ahref=http://www.mi.infn.it>INFN</a>
Ladestinazione
Laparte
cliccabile
y INFN
INFN CorsobasediHTML(GenFeb2008)
42
IlLink(3)conleimmagini
y <ahref=http://www.mi.infn.it">
Testo alternativo
allimmagine
Limmagine che
diventera
cliccabile
INFN CorsobasediHTML(GenFeb2008)
43
44
IlLink(5)percorsi assoluti
y src=file:///C:/sitiweb/infn/immagini/infn.gif
y src=http://www.mi.infn.it/layout/banner2.gif
y Disolito si utilizzano quando citiamo una fonte
y Svantaggi:
seladestinazione sparisce,sparisce anche nel nostro sito
INFN CorsobasediHTML(GenFeb2008)
45
IlLink(6)percorsi relativi
y src=cartella_1/cartella_2/immagine.jpg
documento.html
y Ipercorsirelativifannoriferimentoallaposizionedegli
altrifiles rispettoaldocumentoincuicisitrovain
quelmomento
INFN CorsobasediHTML(GenFeb2008)
46
IlLink(7)percorsi relativi
y Perfarriferimentoaunfilechesitroviallinternodella
stessadirectorybastalinkareilnomedelfile
<ahref="pagina.html">collegamentoallapagina</a>
sonoqui
pagina.html
INFN CorsobasediHTML(GenFeb2008)
47
IlLink(8)percorsi relativi
y Perfarriferimentoaunfilecontenutoinunacartella
dilivelloinferioreallaposizionecorrente,basta
nominarelacartellaseguitadallo"slash",epoiilnome
delfile.
Secondolaformula:cartella/NomeFile.html
<ahref=cartella_1/cartella_2/pagina.html">Visitalapaginainterna</a>
sonoqui
pagina.html
INFN CorsobasediHTML(GenFeb2008)
48
IlLink(9)percorsi relativi
y Pertornaresudiunlivello,sufficienteutilizzarela
notazione:../NomeFile.html
<ahref="../../pagina.html">Visitalapaginainterna</a>
pagina.html
sonoqui
INFN CorsobasediHTML(GenFeb2008)
49
IlLink(10)Attenzione!
y Ilpercorso:/cartella_1/file.html indica che il percorso
50
IlLink(11)linkariposo
y Normalmenteillinkquandositrova"ariposo"viene
evidenziatoinqualchemanieraallinternodellapagina
HTML,inmodochesiafacileperlutenteindividuarlo.
NellHTMLtradizionaleillinksempresottolineato
Didefaultilinksonoblu(#0000FF).
Questo eunlink
INFN CorsobasediHTML(GenFeb2008)
51
IlLink(12)linkvisitato
y Unlinkvisitato,quandolURLdellapaginacompare
nellacronologiadellutente.Didefaultilinkvisitati
sonodicolorvioletto(piesattamente:#800080).
Questo eunlinkvisitato
INFN CorsobasediHTML(GenFeb2008)
52
INFN CorsobasediHTML(GenFeb2008)
53
Icolori (2)deltesto
y Sipossono utilizzare 16milioni di colori
y Sipossono descrivere informato decimale oesadecimale
y #RRGGBB(inesadecimale,da 00aff)
0123456789ABCDEF
y color:rgb(R,G,B)(inscaladecimale,da0a255)
<span style="color:rgb(255,0,0);">ROSSO!</span>ROSSO!
<span style="color:rgb(255,0,255);">VIOLA!</span>VIOLA!
INFN CorsobasediHTML(GenFeb2008)
54
Icolori (3)deltesto
y Iltag<span></span>cosida solononindica
assolutamente nulla,euntagcontenitore
y Viene utilizzato pesantemente coni CSS,che pero
nontratteremo inquesto corso
INFN CorsobasediHTML(GenFeb2008)
55
colorsperevitarechedelle
impostazionipredefinitedichi
visualizzera lenostrepagineprendano
ilsopravvento,elerendanoilleggibili
INFN CorsobasediHTML(GenFeb2008)
56
ESERCIZIO
y Creiamo sul nostro pc(nonsul server)lastruttura di
unsito web.
y Ilsito webda creare hauna directoryradiceWWW
(larootdirectory)eduesottodirectory:immaginie
documenti
y Copiamo il fileNormativaMissioni.pdfche si trova
nellarea:
http://html.mi.infn.it/corsohtml/materiale/documenti/NormativaMissioni.pd
f
57
ESERCIZIO
y Ora creiamo una pagina webconunlinkversoil pdf
INFN CorsobasediHTML(GenFeb2008)
58
ESERCIZIO
y FFFatto?
y Ora utilizziamo winscp pertrasferire sul serverweb
il browserinternet
INFN CorsobasediHTML(GenFeb2008)
59
Glierroristandard
y Glierroripiu subdolichesipossonocommetteredi
solitosonodisolitoquellidipercorso(percorso difile!)
y Altrierroririguardanoipermessidiletturadeifile(ad
esempiounimmaginenonvienevisualizzataperche le
estatoinibitoilpermessodiletturasulserverweb)
y Altriproblemipossonoesseredovutialrefresh della
pagina:lacache delbrowserpuo impedirecheilfile
vengarichiestoalserverweb
INFN CorsobasediHTML(GenFeb2008)
60
e lesoluzioni
y Glierroridipercorsosiindividuanocontrollandoil
sorgentehtmlchecirestituisceilbrowser(visualizza
HTML,view sourceeccetera).Esufficientecopiare
nellaclipboard lURLdelloggettochehailproblema,e
poiincollarlonellabarradellURLdiunbrowserweb:
senoncomparecio checiaspettiamo,abbiamo
scovatolerrore
y Ilpassosuccessivoecontrollareipermessisuifiles,
oravediamocome
INFN CorsobasediHTML(GenFeb2008)
61
Ilinknonsottolineati(1)
y Ilinkditestovengonosottolineatiperdefault dal
browser
y Epossibiledisattivarelasottolineaturaperun'intera
paginaaggiungendountag "style"nellasezione"head"
deldocumento
y Sitrattadiuntag CSS(Cascade StylingSheet),viene
trattatoinquestocorsobaseperche richiestoda
diversipartecipanti
y Vengonovisualizzatisolodalleversioniavanzatedei
browser
INFN CorsobasediHTML(GenFeb2008)
62
Ilinknonsottolineati(1)
y <html>
<head>
<title>Paginaconlinknonsottolineato</title>
<styletype="text/css">
<!
a{textdecoration:none}
>
</style>
</head>
<body>
Edorauntag nonsottoli<br>
<ahref="http://www.mi.infn.it>Questolinknon
sottolineato!</a>
</body>
</html>
INFN CorsobasediHTML(GenFeb2008)
63
Ilinknonsottolineati(3)
y <styletype="text/css">
y
y
y
y
<!
a{textdecoration:none}
>
</style>
Ibrowsersannointerpretareglistili
Inquestocasospecificoeunostileapplicatoaltesto
Edinparticolarealtag <a>
Seilbrowsernoneingradodiinterpretareilcomando(ad
es browserdatato),comealsolitononverra generato
nessunerroreperilcampostyle,edilrestoetraitag di
commento,equindinonverra maivisualizzato
INFN CorsobasediHTML(GenFeb2008)
64
Iltarget diunlink
y Quandosicliccasuunlink,lapaginacorrenteviene
sostituitadallapaginadestinazione
A
B
y Epossibileforzarelaperturadiunlinkinunanuova
finestradelbrowseraggiungendotarget="_blank
y <ahref="http://www.mi.infn.it"target="_blank">INFN</a>
A B
INFN CorsobasediHTML(GenFeb2008)
65
ESERCIZIO
y Creareunapaginahtmlconunlinksenzasottolineaturae
target_blank
y UtilizzareWinscp pertrasferirlasulserverweb
html.mi.infn.it
y Verificarelapaginawebsulserverconunbrowser
y <head>
<styletype="text/css">
<!
a{textdecoration:none}
>
</style>
</head>
INFN CorsobasediHTML(GenFeb2008)
66
Ipermessisuifiles inLinux(1)
y Ifiles inLinuxhanno3tipidipermessi:lettura(read),
scrittura(write)edesecuzione(execution).
y Ifiles inoltreappartengonoadunutente(user),e
lutenteappartieneadungruppo(group).
y Ognunadiquestecaratteristichestabiliscechiecome
haaccessoaiunfiles
INFN CorsobasediHTML(GenFeb2008)
67
Ipermessisuifiles inLinux(2)
y IlnostroamicoUGO
y rwxrwxrwx abaldini calcolopippo.txt
U
user
G
O
group others
utente
gruppo
INFN CorsobasediHTML(GenFeb2008)
file
68
Ipermessisuifiles inLinux(3)
yrwr abaldini calcolopippo.txt
y Lutenteabaldini puo leggereescrivereilfilepippo.txt
(manonpuo eseguirlo)
y Gliutenticheappartengonoalgruppocalcolo
possonoleggereilfilemanonpossononemodificarlo
neeseguirlo
y Pertuttiglialtriutentiilfileeinaccessibile
RicordiamocidiUGO!
INFN CorsobasediHTML(GenFeb2008)
69
Modificareipermessiaifiles
y Ipermessisuifiles sipossonomodificareinmodografico
utilizzandowinscp
y Oppureaccedendoalserverconunashell edutilizzandoil
comandochmod (perWindowsfunzionamoltobenela
shell putty.exe,disponibilesuldesktopdintserver)
y chmod ug+w nomedelfile
aggiungolattributoscritturaperlutenteeilgruppoal
qualeappartieneilfile
y chmod owx nomedelfile
rimuovogliattributiscritturaedesecuzioneatuttiglialtri
utenti
INFN CorsobasediHTML(GenFeb2008)
70
Modificareipermessiaifiles
Attribuendoilpermessosetgid ad
L'uso pi comune dello sticky
unadirectory,sifainmodoche
bit consiste nell'applicarlo alle
tuttiifiles creatiintaledirectory
directory dove, se settato,
sianopossedutidalgruppodella
blocca gli item contenuti
directorycontalepermessoenon
permettendone la modifica
dalgruppodelcreatoredelfile.Lo
(rinomina o cancellazione)
stessovaleperdirectories createal
solo al proprietario del file, al
suointerno
proprietario della directory ed
all'utente root. Spesso questo
Ilpermessounix
setuid osuid
flag
viene impostata
sulla un
permessospecialechepermettead
directory
/tmp per evitare che
unnormaleutentedieseguireun
utenti ordinari cancellino o
processocondeiprivilegisuperiori
spostino
i file appartenenti
aquelliconcessiadunnormale
agli
altri utenti.
utente
INFN CorsobasediHTML(GenFeb2008)
71
Letabelle(1)
y Sipossonoutilizzareperinseriredeglielenchi
y ma sonomoltoimportantiperdareallepagineweb
unaspettoordinato,impostandolospessoredelbordo
azero
y Disegnamo unatabelladi3x3cellenellasezione
normal
INFN CorsobasediHTML(GenFeb2008)
72
Letabelle(2)
3righe
3colonne
Cancelliamolalarghezza
Impostiamoilbordoa0pixel
Cancellandolalarghezza,
ladimensionedellatabella
diventera
automaticamentequella
dellacellapiu grande
INFN CorsobasediHTML(GenFeb2008)
73
Letabelle(3)
y Otterremoquesto:
y Riempiamolecaselleconinumerida1a9:
INFN CorsobasediHTML(GenFeb2008)
74
Letabelle(4)
y
<table>
<tbody>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
</tr>
<tr>
<td>4
</td>
<td>5
</td>
<td>6
</td>
</tr>
<tr>
<td>7
</td>
<td>8
</td>
<td>9
</td>
</tr>
</tbody>
</table>
INFN CorsobasediHTML(GenFeb2008)
75
Letabelle(5)
Nellasezionenormal,
facciamoclickdestro
allinternodiunacella
qualsiasidellatabellae
selezioniamoTable Cell
Properties.
Inquestasezionepossiamo
deciderecomeallineare
orizzontalmentee
verticalmenteilcontenuto
dellacellaeilcoloredello
sfondo
INFN CorsobasediHTML(GenFeb2008)
76
Letabelle(6)
y OraselezioniamolalinguettaTable
(einaltoasinistra)
Diamounbordomaggioredizero
pixelallatabellaeproviamoavedere
comeinfluisconoiparametrisulla
formattazionedellatabella
Gliattributispecificati
perlasigola cellahanno
lapriorita suquelli
relativiallatabella
INFN CorsobasediHTML(GenFeb2008)
77
INFN CorsobasediHTML(GenFeb2008)
78
INFN CorsobasediHTML(GenFeb2008)
79
INFN CorsobasediHTML(GenFeb2008)
80
INFN CorsobasediHTML(GenFeb2008)
81
Questiattributivalgono
soloperiltag <td>,
NONvalgonoper<tr>
Gliattributiperle
celle(tag <tr>o
<td>)hannopriorit
rispettoagli
attributiperl'intera
tabella(tag <table>)
INFN CorsobasediHTML(GenFeb2008)
82
Losfondodellapagina(1)
y Il90%dellepagineininternethalosfondobianco
y Ilrestante9%halosfondouniforme
y Solol1%halosfondononuniforme
y <bodybgcolor="#FF0000">
Ilcoloredellosfondosi
specificanellasezione
<body>
y Losfondonondevedarefastidio(evitiamotroppo
contrastootroppopoco)
INFN CorsobasediHTML(GenFeb2008)
83
Losfondodellapagina(2)
y Vogliamoproprioutilizzareunimmaginecomesondodellanostra
paginaweb?
y Losfondoabbastanzadiscretodanondistrarrel'attenzionedallescritte?
y L'immaginedellosfondosiarmonizzaconicolorideltestoeconquellidei
link?
y L'immaginedellosfondosiarmonizzaconlealtreimmaginichevogliomettere
sullapagina?
y Quantotempoimpiegalapaginaascaricarel'immaginedellosfondo?
E'troppogrande?
y L'immaginedellosfondo,dopoesserestatacopiata,riesceariempirel'intera
pagina?Conschermidiognirisoluzione?
INFN CorsobasediHTML(GenFeb2008)
84
Losfondodellapagina(3)
y SeabbiamorispostoSiatutteledomande,possiamo
utilizzareiltag
y <bodybackground=sfondo.gif">
Selimmagineepiu
piccoladelloschermo,
essaverra replicatafino
ariempiretuttolo
schermo
INFN CorsobasediHTML(GenFeb2008)
85
ESERCIZIO
y Aggiungiamounaimmaginedisfondoallanostra
paginaweb;primaproviamoconlimmaginesfondo.gif
epoiconlimmaginelisa.jpg
y Entrambeleimmaginisonodisponibilinellasezione
corsohtml/materiale/immagini
y Attenzione,conlosfondolisa.jpg enecessario
modificareilcoloredeltesto,ilneroepocoleggibile!
sfondo.gif
immaginedi5x5
pixel
INFN CorsobasediHTML(GenFeb2008)
86
ESERCIZIO
y Spostiamolanostrapaginawebsulservere
verifichiamochecisialosfondo
y Senonvediamolosfondo,copiamole2immaginisul
serverwebnellareaopportuna
INFN CorsobasediHTML(GenFeb2008)
87
ESERCIZIO
y Oraproviamoaricreareunapaginadiunsitoweb
facendousodeltag <table>
y Lapaginawebdaricrearee:
http://www.mi.infn.it/~amminist/amministrazione
yNONVALECOPIARE!
y TRUCCO:Epossibileinserireunatabellaallinternodi
unaltratabella
INFN CorsobasediHTML(GenFeb2008)
88
IMetatag (1)
y Imetatag sonometadatipresentinellinguaggioHTML
utilizzatiperfornireinformazionisullepagineagliutentio
aimotoridiricerca
y Adifferenzadiognialtrotag inseribileinunapaginaweb,i
metatag nonfornisconoalbrowseralcundatodi
formattazionedellapagina,percuiilloroinflussosul
layoutfinalepraticamentenullo;sonopercitotalmente
invisibiliall'utentesenonattraversolavisualizzazionedella
codicesorgenteinHTMLdellapaginaoppuretramitele
finestrediproprietdeibrowser.
INFN CorsobasediHTML(GenFeb2008)
89
IMetatag (2)
y Siinseriscononellasezione<head>
y <METAname="DESCRIPTION"content="Corso
basediHTML">
y Description euntag moltoimportanteperimotoridi
ricerca
y <METAname="KEYWORDS"content="html,
htm,webdesign">
y Keywords oggigiornononvienepiu utilizzatodai
motoridiricercaacausadegliabusichenesonostati
fattiinpassato
INFN CorsobasediHTML(GenFeb2008)
90
IMetatag (3)
y <METAname="AUTHOR"content=MarioRossi">
y <METAhttpequiv="REFRESH"content="5;
url=http://www.mi.infn.it">
y Ilnavigatorevienereindirizzatosullapagina
www.mi.infn.it dopo5secondidiattesa
y Siutilizzaquandosispostanodellepagineenonsi
vuolegenerareunerroresequalcunolericercanella
posizionevecchia(losiinvitaadaggiornarei
bookmarks)
INFN CorsobasediHTML(GenFeb2008)
91
ESERCIZIO
y Creiamounapaginawebanimatachevisualizziin
sequenzaleparole:
y UN
y DUE
y TRE
y STELLA!
y Trucco:scrivere4paginehtmlefarlecaricare
automaticamenteunadopolaltraconiltag:
<METAhttpequiv="REFRESH"content="5;
url=destinazione.html">
INFN CorsobasediHTML(GenFeb2008)
92
IFrame(1)
Zona2
y Iframe(cornici)dividonoloschermoinzoneseparate
Zona1
Zona3
INFN CorsobasediHTML(GenFeb2008)
93
IFrame(2)
y Ognunadiquestefinestrepuo contenereun
documentohtml
y Occorrespecificareilframeset ,cioe ilfilecheindica
albrowsercomesuddividerelafinestraprincipale
y Quandolapaginaframeset vienelettadalbrowser,
essocaricaautomaticamentelepagineassociateal
frameset
INFN CorsobasediHTML(GenFeb2008)
94
Alcunischermimisurano
640x480,altri800x600,
altri1024x768ecc.
Eccoperche enecessario
lasterisco*
IFrame(3)
Zona2
y Vediamocomeefattounframeset
Zona1
y <frameset cols="120,*"></frameset>
y Loschermodivisoinduecolonne(Zona1eZona2)
y Quellaasinistradi120pixelequelladidestraoccupa
ilrestodelloschermo(indicatocon*).
INFN CorsobasediHTML(GenFeb2008)
95
Avremmopotuto
utilizzarequalunquealtro
nomealpostodimenu e
principale
IFrame(4)
y <framesetcols="120,*">
Attenzione,non
ceil<body>
Menu
<framesrc="menu.html"name="menu">
<framesrc=principale.html"name="principale">
</frameset>
Principale
120
INFN CorsobasediHTML(GenFeb2008)
96
Menu
IFrame(4)
Principale
y Prepariamolapaginaprincipale
y Sara unapaginahtmlnormalissimaconades.una
scrittadibenvenuto
y <html>
<body>
BenvenutonellapaginaprincipaledellINFN<br>
PuoiselezionarelaSezionecliccandosulmenua
sinistra
</body>
</html>
INFN CorsobasediHTML(GenFeb2008)
97
Menu
IFrame(5)
Principale
y Prepariamolapaginamenu
<html>
<body>
<b>SezioniINFNdisponibili:</b><br><br>
<ahref=http://www.mi.infn.it"
target="principale">Milano</a><br>
<ahref=http://www.fi.infn.it"
target="principale">Firenze</a><br>
</body>
</html>
INFN CorsobasediHTML(GenFeb2008)
98
Menu
IFrame(6)
Principale
y Ricapitoliamo:
y Abbiamocreatoilframeset (unhtmlsenza<body>)
y Abbiamocreatolapaginamenu elapaginaprincipale
y Quandoilbrowserleggeilframeset,carica
INFN CorsobasediHTML(GenFeb2008)
99
ESERCIZIO
y Creiamounapaginaframeset conmenuepagina
principale,copiamolasulserverhtml.mi.infn.it nella
nostraareaeverifichiamoneilfunzionamento
y <framesetcols="120,*">
frameset
<framesrc="menu.html"name="menu">
<framesrc=principale.html"name="principale">
</frameset>
y <ahref=http://www.mi.infn.it"
target="principale">Milano</a>
menu
INFN CorsobasediHTML(GenFeb2008)
100
IFrame(7)
y <framesetrows="20%,80%">
<framesrc="top.htm"name=sopra">
<framesrc="bottom.htm"name=sotto">
</frameset>
sopra
20%
sotto
80%
INFN CorsobasediHTML(GenFeb2008)
101
Menu
IFrame(leopzioni)
Principale
y <framesetcols="120,*"frameborder="0"border="0"
y
y
y
y
y
framespacing="0">
Iframenonsono piuincorniciati
<framesrc="menu.htm"name="menu"noresize>
Iframenonsi possono piuridimensionare
<framesrc="menu.htm"name="menu"noresize
scrolling=no>
Viene eliminata labarra di scroll
INFN CorsobasediHTML(GenFeb2008)
102
menu
IFrame(9)
principale
banner
y <html>
<head>
<title>Paginaconframe</title>
</head>
<frameset cols="120,*">
<framesrc="menupage.htmname="menu">
<frameset rows="*,50">
<framesrc="welcomepage.htm"name=principale">
<framesrc="bottombanner.htm"name="bottom">
</frameset>
</frameset>
</html>
INFN CorsobasediHTML(GenFeb2008)
103
IFrame(10)
y <frameset rows="50%,50%"cols="50%,50%">
<framesrc=AltoSinistra.htm"name=AltoSinistra">
<framesrc=AltoDestra.htm"name=AltoDestra">
AltoSinistra
AltoDestra
<framesrc=BassoSinistra.htm"name=BassoSinistra">
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<framesrc=A.htm"name=A">
<framesrc=B.htm"name=B">
A
B
</frameset>
BassoSinistra
<framesrc=C.htm"name=C">
</frameset>
C
</frameset>
INFN CorsobasediHTML(GenFeb2008)
104
LadestinazionedeiLink
y Abbiamovistocheneilinkepossibilespecificareun
y
y
y
y
y
105
Fine
INFN CorsobasediHTML(GenFeb2008)
106