Corso Base HTML

Andrea.Baldini@mi.infn.
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
y Ederaospitata da questo server

y 8megadi RAM
y 256megadi HardDisk
y Processore a25MHz
NOTA:
I pc di oggi sono
circa 100 volte piu
performanti!
3
Che cosa etecnicamente lHTML

y Le pagine web sono create utilizzando il linguaggio
HTML (HyperText Markup Language)

y LHTML e un insieme di codici di formattazione,
denominati tags, che inseriti all'interno di un file di
testo ne determinano la formattazione quando il
documento richiamato dal browser.
y I tags forniscono delle indicazioni sul colore delle
scritte, sulla posizione delle immagini all'interno della
pagina, su come far scorrere il testo, e altre cose di
questo genere.
Findal principio
y Non ho mai previsto che il codice sorgente di HTML fosse
visibile agli utenti. Un browser/editor avrebbe fatto vedere o

editare all'utente soltanto il linguaggio di una pagina di
ipertesto, come se stesse usando un word processor. Per me, e
credevo anche per gli altri, l'idea di chiedere al pubblico di
battere a mano le parentesi era inaccettabile quanto chiedere a
qualcuno di scrivere un documento in Microsoft Word
stendendo il formato in codice binario. Ma la leggibilit
dell'HTML si rivel una manna inaspettata. Con mia grande
sorpresa molte persone si familiarizzarono alla svelta con i tag, e
iniziarono a scrivere direttamente propri documenti in HTML
y TimBernersLee,L'architetturadelnuovoWeb,Feltrinelli,Milano,2001
Esempio di tag
y Una frase contenuta tra i tags<u></u>,quando viene
richiamata da unbrowser,viene visualizzata come

sottolineata (u=underline,sottolinea)
<u>Mache bel corso!</u>
viene visualizzata dal browser:
Mache bel corso!
Che cosa sono i browsers

y Sono quei programmi che ci permettono di navigare in
Internet,comeFirefox,Netscape,InternetExplorer,
Seamonkey,eccetera
y Utilizzo tipico:il browsersi collega aduna URL
y ecarica lapagina webche gli viene passata dal server
websul quale si trova il sito

Esempio di documento HTML

y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
<!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
Questo equanto viene ricevuto dal browser,che poiprovvede amostrare

sullo schermo sostituendo ai tagdegli effetti grafici (grassetti,tabelle,
sottolineature,links,eccetera)
ESERCIZIO
y Provare avisualizzare il sorgente di una qualsiasi
pagina htmlsul web
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
10
Creare /modificare unHTML

y Una pagina HTMLescritta informato testo
y Perscrivere inHTMLesufficiente unqualunque
editordi testo (notepad,vi,emacs,nedit,ecc)

y Oppure unAmbiente di sviluppo HTMLintegrato,ad
esempio Seamonkey
(http://www.mozilla.org/projects/seamonkey/)
y PercheSeamonkey?
y Emultipiattaforma (Linux,Windows,Mac,ecc)
y Eopensource(quindi gratuito)
y Funziona moltobene!
11
InstalliamoSeamonkey
y Chinonloavesseancorafatto,puo scaricareed
installareSeamonkey da:
y http://www.mozilla.org/projects/seamonkey
12
Utilizzo di Seamonkey
y Avviamo Seamonkey
y Apriamo il Composer
13
Lanostraprimapagina HTML
y Seamonkey
si
apre
nella
sezione
Normal,
dove e possibile creare le pagine web come se si

trattasse di un documento di testo (avete presente
Word?)
y Digitiamo del testo (ad es. Questa e' una pagina di
prova), e proviamo a cliccare in basso sulla linguetta
HTML Source
14
Analisi delcontenuto
Indico che cioche

contiene
segueelinguaggio
<html>
informazioni
HTML
riguardanti
<head>
l'idetificazione
deltipodi
<metacontent="text/html;charset=ISO88591"
documento
Chiude il
httpequiv="contenttype">
tag<head>
Questo eil
titolo
<title></title>
Chiudo
il della
pagina web
tag<html>
</head>
Quicomincia
il testo della
<body>
Ecco il testo,
pagina
web il
Chiudo
seguito da una
Questae'unapaginadiprova<br>
tag<body>
capo<br>
y
y
y
y
y
y
y
y
y </body>
y </html>
15
Diamo untitolo alla pagina

y Rimaniamo nella sezione HTMLsourceescriviamo il
titolo tra i duetag<title></title>

y <title>INFN</title>
y Setorniamo nella sezione Normal(clickinbassoa
sinistra)vediamo che il titolo della pagina ecambiato
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
17
Facciamo pratica coni tag(1)

y Andiamo nella sezione HTMLSourcedi Seamonkey
y Proviamo adinserire deltesto utilizzando i tag
<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
18

y Ora vistarete chiedendo:Maperchedevo conoscere il
significato dei tag?Nonmibasta editare lapagina HTML

comesefosseundocumento di Word?
y Risposta:Spesso lunico modo di capire percheuna pagina webnonsi
presenta comevorremmo,eaprire amano il filehtml

y Ades.quello che ci sembra ungrassetto potrebbe essere untitleo
viceversa
y Una volta appresa lalogica che cedietro aduna pagina html,etutto
piusemplice
19

y Itagpossono essere nidificati
<u><b><i>
Mache bello che equesto corso!
</u></b></i>
restituisce:
Mache bello che equesto corso!
20
Acaccia di tag(1):grassetto,
sottolineato,corsivo,eccetera
y Ora facciamo loperazione inversa,utilizziamo la
finestra Normalperscrivere deltesto everifichiamo

quali tagvengono utilizzati perrendere leffetto
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
21
ESERCIZIO
y Scriviamo una pagina webche contenga parecchi tage
salviamola sul nostro pc
22
Acaccia di tag(2):lalista ordinata

y Verifichiamo quale tagestato utilizzato perrendere
leffetto di lista ordinata
y <ul>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
<li>quarto elemento</li>
</ul>
23
Acaccia di tag(3):lalista numerata

y Verifichiamo quale tagestato utilizzato perrendere
leffetto di lista numerata
y <ol>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
<li>quarto elemento</li>
</ol>
24
ESERCIZIO
y Aggiungiamo alla nostrapagina webuna lista e
salviamola nuovamente
25
Acaccia di tag(3):Icommenti
y Epossibile includere inuna pagina webun
commento,che nonverramai visualizzato dal

browser.
y Ilcommento halaseguente sintassi:
<! Questo euncommento >
26
ESERCIZIO
y Aggiungiamo dei commenti alla nostrapagina web

y Attenzione,perinserire uncommento,dobbiamo
posizionarci nella sezione <HTML>sourcedi

Seamonkey (inbassoasinistra)
27
Comefaccio apubblicare una

pagina web?(1)
y Innanzitutto lapagina webdeve essere creata esalvata
y Poiva spostata su unserverweb
Se non lo abbiamo
ancora fatto, salviamo
la pagina web che
abbiamo editato fino
ad ora
y Ilserverwebeunpcche rimane sempre acceso e
collegato alla rete interneteche,dietro richiesta,invia

lepagine HTMLalbrowserrichiedente
28

pagina web?(2)
y Pertrasferire una pagina HTMLsu unserverwebsi
utilizzano FTP (FileTransferProtocol)oSCP(Secure

Copy).Da anni presso lINFN eil Dipartimento di
Fisica si fa uso esclusivamente di SCP,che offre
superiori garanzie di sicurezza (autenticazione e
trasferimento dei dati informacrittografata)
y Pertrasferire lamia pagina HTMLsu unserver web,
devo quindi utilizzare unclient SCP
29

pagina web?(3)SCP
y Windowsnonoffre supporto nativo adSCP(permotivi
di marketing),occorre quindi scaricare

unapplicazione dal web
y Lamia scelta personale ricade su Winscp
http://winscp.net
y Consiglio lutilizzo della StandaloneApplication,che
nonrichiede nessuna installazione
Winscp egia
disponibile sul
desktopdi Ntserver
30
Abbiamogia Winscp sulnostropc?

y http://winscp.net
y GliutentiLinuxpossonoutilizzaredirettamenteil
comandoscp dallashell,oppureilclientgraficogftp
y AnchegliutentiMacOS possonoservirsidelcomando
scp dallashell,oppuredelclientgraficoFugu
31

pagina web?(4)SCP
y Avviamo il clientWinscp ed accediamo allaccount
comune html,conpassword**********
HTML.MI.INFN.IT
32

pagina web?(5)SCP
y Laprimavolta che ci colleghiamo adunserver,ci viene
richiesto di accettare lasua chiave pubblica
y Accettiamo eproseguiamo
33

pagina web?(6)SCP
y Winscp supporta il draganddrop.
34

pagina web?(6)SCP
y Andiamo nellarea /var/www/html/corsohtml/studenti
ecreiamo una cartella conil nostro nome,nella quale

copieremo i nostri fileshtml
35
ESERCIZIO
y Utilizzando winscp accediamo alserverweb
html.mi.infn.itecreiamo una nostraareapersonale,

che utilizzeremo dora inpoiperverificare lenostre
pagine web
y Copiamo inquesta areail fileche abbiamo modificato
fino adora sul nostro pc
36

pagina web?(7)Ilbrowser
y Una volta copiati i files,verifichiamo lavisibilitadella
nostrapagina htmlaprendo unbrowserinternet

(InternetExplorer,Firefox,Seamonkey ecc)ed
inserendo lURL html.mi.infn.it/corsohtml/studenti/mionome
Riusciamo a
visualizzare il
fileutilizzando
il browserweb?
37
Leimmagini (1)
y <img style="width: 160px; height: 120px;" alt="INFN"
src=infn.gif">
y Se,perinserire unimmagine,utilizziamo il bottone
imagedi Seamonkey,otterremo una struttura come

quella sopra indicata
y Icampi style ealt sono opzionali (src eobbligatorio)
y Styleserveamodificare graficamente limmagine;inquesto
caso vengono indicateledimensioni inpixel(altri attributi
possono essere border,align,ecc)
y Alt fornisce il testo che viene mostrato nel browseral
passaggio delmousesullimmagine,anche senel
reperimento dellimmagine si everificato unerrore
INFN CorsobasediHTML(GenFeb 2008)
38
Leimmagini (2)
width
50%dellafinestra
height
y style="width: 100%; height: 50%;
Limmagine
saradeformata!
100%dellafinestra
Finestradel
browser
39
Ilpiatto fortedelweb:il link

y Ininformatica,uncollegamentoipertestuale(ininglese
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.
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
41
IlLink(2)
y <ahref=http://www.mi.infn.it>INFN</a>
Ladestinazione
Laparte
cliccabile
y INFN
42
IlLink(3)conleimmagini
y <ahref=http://www.mi.infn.it">
<img alt=Homepage Infnsrc=file:infn.gif></a>
Testo alternativo
allimmagine
Limmagine che
diventera
cliccabile
43
IlLink(4)percorsi relativi eassoluti

y Ilpercorso puoessere relativo oppure assoluto
y src=file:infn.gif
y src=file:///C:/sitiweb/infn/immagini/infn.gif
y src=http://www.mi.infn.it/layout/banner2.gif
y src=cartella_1/cartella_2/file.jpg
Il percorso si puo anche riferire
a qualche cosa di diverso dalle
immagini, ad esempio vale
anche per i link. E un concetto
generale
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
(diversa da noi)alla quale vogliamo fareriferimento

y Vantaggi:
eunmetodo rapido
ladestinazione viene tenuta aggiornata automaticamente
y Svantaggi:
seladestinazione sparisce,sparisce anche nel nostro sito
45
IlLink(6)percorsi relativi
y src=cartella_1/cartella_2/immagine.jpg
documento.html
y Ipercorsirelativifannoriferimentoallaposizionedegli
altrifiles rispettoaldocumentoincuicisitrovain
quelmomento
46
y Perfarriferimentoaunfilechesitroviallinternodella
stessadirectorybastalinkareilnomedelfile
<ahref="pagina.html">collegamentoallapagina</a>
sonoqui
pagina.html
47
y Perfarriferimentoaunfilecontenutoinunacartella
dilivelloinferioreallaposizionecorrente,basta
nominarelacartellaseguitadallo"slash",epoiilnome
delfile.
Secondolaformula:cartella/NomeFile.html
<ahref=cartella_1/cartella_2/pagina.html">Visitalapaginainterna</a>
sonoqui
pagina.html
48
y Pertornaresudiunlivello,sufficienteutilizzarela
notazione:../NomeFile.html
<ahref="../../pagina.html">Visitalapaginainterna</a>
pagina.html
sonoqui
49
IlLink(10)Attenzione!
y Ilpercorso:/cartella_1/file.html indica che il percorso
partedalla directoryradice (rootdirectory)

y Evitiamo i nomi dei filescondegli spazi (utilizzare _)
y Evitiamo i percorsi assoluti deltipo
<ahref="file:///C:/percorsonomeFile.html">testo</a>
perscongiurarechecisianoproblemiunavoltaspostato
ilsitowebdalnostropc sulserverweb
y Nei percorsi facciamo anche attenzione
alle lettere maiuscole eminuscole
50
IlLink(11)linkariposo
y Normalmenteillinkquandositrova"ariposo"viene
evidenziatoinqualchemanieraallinternodellapagina
HTML,inmodochesiafacileperlutenteindividuarlo.
NellHTMLtradizionaleillinksempresottolineato
Didefaultilinksonoblu(#0000FF).
Questo eunlink
51
IlLink(12)linkvisitato
y Unlinkvisitato,quandolURLdellapaginacompare
nellacronologiadellutente.Didefaultilinkvisitati
sonodicolorvioletto(piesattamente:#800080).
Questo eunlinkvisitato
52
Icolori (1)Icodici colore
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!
54
Icolori (3)deltesto
y Iltag<span></span>cosida solononindica
assolutamente nulla,euntagcontenitore
y Viene utilizzato pesantemente coni CSS,che pero
nontratteremo inquesto corso
55
Icolori (4)dei links

y Permodificare leimpostazioni di defaultdei links,
occorre utilizzare il menudisponibile inSeamonkey

alla voce:
Format/Pagecolorsandbackground
y Esempre meglio indicare Usecustom
colorsperevitarechedelle
impostazionipredefinitedichi
visualizzera lenostrepagineprendano
ilsopravvento,elerendanoilleggibili
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
elosalviamo sul nostro pcnella directorydocumenti

57
ESERCIZIO
y Ora creiamo una pagina webconunlinkversoil pdf
che abbiamo appena salvato

y Attenzione:il percorso deve essere relativo!
58
ESERCIZIO
y FFFatto?
y Ora utilizziamo winscp pertrasferire sul serverweb
html.mi.infn.itlastruttura da noi creata

y Miraccomando,nella nostraarea!
y Verifichiamo il risultato utilizzando
il browserinternet
59
Glierroristandard
y Glierroripiu subdolichesipossonocommetteredi
solitosonodisolitoquellidipercorso(percorso difile!)
y Altrierroririguardanoipermessidiletturadeifile(ad
esempiounimmaginenonvienevisualizzataperche le
estatoinibitoilpermessodiletturasulserverweb)
y Altriproblemipossonoesseredovutialrefresh della
pagina:lacache delbrowserpuo impedirecheilfile
vengarichiestoalserverweb
60
e lesoluzioni
y Glierroridipercorsosiindividuanocontrollandoil
sorgentehtmlchecirestituisceilbrowser(visualizza
HTML,view sourceeccetera).Esufficientecopiare
nellaclipboard lURLdelloggettochehailproblema,e
poiincollarlonellabarradellURLdiunbrowserweb:
senoncomparecio checiaspettiamo,abbiamo
scovatolerrore
y Ilpassosuccessivoecontrollareipermessisuifiles,
oravediamocome
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
62
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>
63
y <styletype="text/css">
y
y
y
y
<!
>
</style>
Ibrowsersannointerpretareglistili
Inquestocasospecificoeunostileapplicatoaltesto
Edinparticolarealtag <a>
Seilbrowsernoneingradodiinterpretareilcomando(ad
es browserdatato),comealsolitononverra generato
nessunerroreperilcampostyle,edilrestoetraitag di
commento,equindinonverra maivisualizzato
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
65
ESERCIZIO
y Creareunapaginahtmlconunlinksenzasottolineaturae
target_blank
y UtilizzareWinscp pertrasferirlasulserverweb
html.mi.infn.it
y Verificarelapaginawebsulserverconunbrowser
y <head>
<styletype="text/css">
<!
>
</style>
</head>
66
Ipermessisuifiles inLinux(1)
y Ifiles inLinuxhanno3tipidipermessi:lettura(read),
scrittura(write)edesecuzione(execution).
y Ifiles inoltreappartengonoadunutente(user),e
lutenteappartieneadungruppo(group).
y Ognunadiquestecaratteristichestabiliscechiecome
haaccessoaiunfiles
67
y IlnostroamicoUGO
y rwxrwxrwx abaldini calcolopippo.txt
U
user
G
O
group others
utente
gruppo
file
68
yrwr abaldini calcolopippo.txt
y Lutenteabaldini puo leggereescrivereilfilepippo.txt
(manonpuo eseguirlo)
y Gliutenticheappartengonoalgruppocalcolo
possonoleggereilfilemanonpossononemodificarlo
neeseguirlo
y Pertuttiglialtriutentiilfileeinaccessibile
RicordiamocidiUGO!
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
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
71
Letabelle(1)
y Sipossonoutilizzareperinseriredeglielenchi
y ma sonomoltoimportantiperdareallepagineweb
unaspettoordinato,impostandolospessoredelbordo
azero
y Disegnamo unatabelladi3x3cellenellasezione
normal
72
Letabelle(2)
3righe
3colonne
Cancelliamolalarghezza
Impostiamoilbordoa0pixel
Cancellandolalarghezza,
ladimensionedellatabella
diventera
automaticamentequella
dellacellapiu grande
73
Letabelle(3)
y Otterremoquesto:
y Riempiamolecaselleconinumerida1a9:
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>
75
Letabelle(5)
Nellasezionenormal,
facciamoclickdestro
allinternodiunacella
qualsiasidellatabellae
selezioniamoTable Cell
Properties.
Inquestasezionepossiamo
deciderecomeallineare
orizzontalmentee
verticalmenteilcontenuto
dellacellaeilcoloredello
sfondo
76
Letabelle(6)
y OraselezioniamolalinguettaTable
(einaltoasinistra)
Diamounbordomaggioredizero
pixelallatabellaeproviamoavedere
comeinfluisconoiparametrisulla
formattazionedellatabella
Gliattributispecificati
perlasigola cellahanno
lapriorita suquelli
relativiallatabella
77
Leproprieta deltag <table>(1)
78
Leproprieta deltag <table>(2)
79
Leproprieta deltag <tr>e<td>(1)
80
Leproprieta deltag <tr>e<td>(2)
81
Leproprieta deltag <td>(3)
Questiattributivalgono
soloperiltag <td>,
NONvalgonoper<tr>
Gliattributiperle
celle(tag <tr>o
<td>)hannopriorit
rispettoagli
attributiperl'intera
tabella(tag <table>)
82
Losfondodellapagina(1)
y Il90%dellepagineininternethalosfondobianco
y Ilrestante9%halosfondouniforme
y Solol1%halosfondononuniforme
y <bodybgcolor="#FF0000">
Ilcoloredellosfondosi
specificanellasezione
<body>
y Losfondonondevedarefastidio(evitiamotroppo
contrastootroppopoco)
83
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?
84
y SeabbiamorispostoSiatutteledomande,possiamo
utilizzareiltag
y <bodybackground=sfondo.gif">
Selimmagineepiu
piccoladelloschermo,
essaverra replicatafino
ariempiretuttolo
schermo
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
86
ESERCIZIO
y Spostiamolanostrapaginawebsulservere
verifichiamochecisialosfondo
y Senonvediamolosfondo,copiamole2immaginisul
serverwebnellareaopportuna
87
ESERCIZIO
y Oraproviamoaricreareunapaginadiunsitoweb
facendousodeltag <table>
y Lapaginawebdaricrearee:
http://www.mi.infn.it/~amminist/amministrazione
yNONVALECOPIARE!
y TRUCCO:Epossibileinserireunatabellaallinternodi
unaltratabella
88
IMetatag (1)
y Imetatag sonometadatipresentinellinguaggioHTML
utilizzatiperfornireinformazionisullepagineagliutentio
aimotoridiricerca
y Adifferenzadiognialtrotag inseribileinunapaginaweb,i
metatag nonfornisconoalbrowseralcundatodi
formattazionedellapagina,percuiilloroinflussosul
layoutfinalepraticamentenullo;sonopercitotalmente
invisibiliall'utentesenonattraversolavisualizzazionedella
codicesorgenteinHTMLdellapaginaoppuretramitele
finestrediproprietdeibrowser.
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
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)
91
ESERCIZIO
y Creiamounapaginawebanimatachevisualizziin
sequenzaleparole:
y UN
y DUE
y TRE
y STELLA!
y Trucco:scrivere4paginehtmlefarlecaricare
automaticamenteunadopolaltraconiltag:
<METAhttpequiv="REFRESH"content="5;
url=destinazione.html">
92
IFrame(1)
Zona2
y Iframe(cornici)dividonoloschermoinzoneseparate
Zona1
Zona3
93
IFrame(2)
y Ognunadiquestefinestrepuo contenereun
documentohtml
y Occorrespecificareilframeset ,cioe ilfilecheindica
albrowsercomesuddividerelafinestraprincipale
y Quandolapaginaframeset vienelettadalbrowser,
essocaricaautomaticamentelepagineassociateal
frameset
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*).
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
96
Menu
IFrame(4)
Principale
y Prepariamolapaginaprincipale
y Sara unapaginahtmlnormalissimaconades.una
scrittadibenvenuto
y <html>
<body>
BenvenutonellapaginaprincipaledellINFN<br>
PuoiselezionarelaSezionecliccandosulmenua
sinistra
</body>
</html>
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>
98
Menu
IFrame(6)
Principale
y Ricapitoliamo:
y Abbiamocreatoilframeset (unhtmlsenza<body>)
y Abbiamocreatolapaginamenu elapaginaprincipale
y Quandoilbrowserleggeilframeset,carica
automaticamentemenu eprincipale allinternodegli

spaziindicatinelframeset
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
100
IFrame(7)
y <framesetrows="20%,80%">
<framesrc="top.htm"name=sopra">
<framesrc="bottom.htm"name=sotto">
</frameset>
sopra
20%
sotto
80%
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
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>
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>
104
LadestinazionedeiLink
y Abbiamovistocheneilinkepossibilespecificareun
y
y
y
y
y
target(cioe doveverra apertoillink)

Cisono4targetriservati:
_blank scaricalapaginainunanuovafinestrabrowser
_self scaricalapaginanellafinestracorrente
_parent scaricalapaginanelframesuperioreaquello
incuisitroval'hyperlink
_top cancellatuttiiframes,scaricalafinestrabrowser
alcompleto
105
Fine
106

Corso Base HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Corso Base HTML

Caricato da

Copyright:

Formati disponibili

Andrea.Baldini@mi.infn.

y Ederaospitata da questo server

Che cosa etecnicamente lHTML

HTML (HyperText Markup Language)

visibile agli utenti. Un browser/editor avrebbe fatto vedere o

richiamata da unbrowser,viene visualizzata come

Che cosa sono i browsers

y ecarica lapagina webche gli viene passata dal server

websul quale si trova il sito

Esempio di documento HTML

Questo equanto viene ricevuto dal browser,che poiprovvede amostrare

y Provare avisualizzare il sorgente di una qualsiasi

pagina htmlsul web

Creare /modificare unHTML

editordi testo (notepad,vi,emacs,nedit,ecc)

dove e possibile creare le pagine web come se si

Indico che cioche

Diamo untitolo alla pagina

titolo tra i duetag<title></title>

sinistra)vediamo che il titolo della pagina ecambiato

Facciamo pratica coni tag(1)

Facciamo pratica coni tag(2)

significato dei tag?Nonmibasta editare lapagina HTML

y Risposta:Spesso lunico modo di capire percheuna pagina webnonsi

presenta comevorremmo,eaprire amano il filehtml

Facciamo pratica coni tag(3)

finestra Normalperscrivere deltesto everifichiamo

y Scriviamo una pagina webche contenga parecchi tage

salviamola sul nostro pc

Acaccia di tag(2):lalista ordinata

leffetto di lista ordinata

Acaccia di tag(3):lalista numerata

leffetto di lista numerata

y Aggiungiamo alla nostrapagina webuna lista e

commento,che nonverramai visualizzato dal

y Aggiungiamo dei commenti alla nostrapagina web

posizionarci nella sezione <HTML>sourcedi

Comefaccio apubblicare una

y Ilserverwebeunpcche rimane sempre acceso e

collegato alla rete interneteche,dietro richiesta,invia

Comefaccio apubblicare una

utilizzano FTP (FileTransferProtocol)oSCP(Secure

Comefaccio apubblicare una

di marketing),occorre quindi scaricare

Abbiamogia Winscp sulnostropc?

Comefaccio apubblicare una

Comefaccio apubblicare una

richiesto di accettare lasua chiave pubblica

Comefaccio apubblicare una

Comefaccio apubblicare una

ecreiamo una cartella conil nostro nome,nella quale

html.mi.infn.itecreiamo una nostraareapersonale,

Comefaccio apubblicare una

nostrapagina htmlaprendo unbrowserinternet

imagedi Seamonkey,otterremo una struttura come

y style="width: 100%; height: 50%;

Ilpiatto fortedelweb:il link

<img alt=Homepage Infnsrc=file:infn.gif></a>

IlLink(4)percorsi relativi eassoluti

(diversa da noi)alla quale vogliamo fareriferimento

partedalla directoryradice (rootdirectory)

Icolori (1)Icodici colore

Icolori (4)dei links

occorre utilizzare il menudisponibile inSeamonkey