Sei sulla pagina 1di 106

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


INFN CorsobasediHTML(GenFeb2008)

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.
INFN CorsobasediHTML(GenFeb2008) 4

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

INFN CorsobasediHTML(GenFeb2008)

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!

INFN CorsobasediHTML(GenFeb2008)

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


INFN CorsobasediHTML(GenFeb2008) 7

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)
INFN CorsobasediHTML(GenFeb2008)

ESERCIZIO

y Provare avisualizzare il sorgente di una qualsiasi

pagina htmlsul web

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

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!

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,

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

INFN CorsobasediHTML(GenFeb2008)

14

Analisi delcontenuto
y y y y y y y y y </body> y </html>

Indico che contiene cioche segueelinguaggio <html> informazioni HTML riguardanti <head> l'idetificazione deltipodi <metacontent="text/html; charset=ISO88591" documento Chiude il httpequiv="content type"> 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'unapagina diprova<br> tag<body> capo<br>

INFN CorsobasediHTML(GenFeb2008)

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

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 y <br>acapo(break) y <big>aumenta ladimensione delcarattere y <small>diminuiscila
Apro il tag:<tag> Chiudo il tag:</tag>

INFN CorsobasediHTML(GenFeb2008)

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
INFN CorsobasediHTML(GenFeb2008) 18

Facciamo pratica coni tag(2)


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
INFN CorsobasediHTML(GenFeb2008) 19

Facciamo pratica coni tag(3)


y Itagpossono essere nidificati

<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

finestra Normalperscrivere deltesto everifichiamo quali tagvengono utilizzati perrendere leffetto

Ingrandisci Colore del testo e Sposta Sposta Scrivi lariga laallineato riga Scrivi allineato a Scrivi a Rimipicciolisci la la Evidenziatore Grassetto Corsivo Sottolineato Elenco Elenco ordinato numerato Scrivi centrato dello sfondoscritta verso verso sinistra sinistra destra giustificato destra scritta Proviamo assieme
INFN CorsobasediHTML(GenFeb2008) 21

ESERCIZIO

y Scriviamo una pagina webche contenga parecchi tage

salviamola sul nostro pc

INFN CorsobasediHTML(GenFeb2008)

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>


INFN CorsobasediHTML(GenFeb2008) 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>


INFN CorsobasediHTML(GenFeb2008) 24

ESERCIZIO

y Aggiungiamo alla nostrapagina webuna lista e

salviamola nuovamente

INFN CorsobasediHTML(GenFeb2008)

25

Acaccia di tag(3):Icommenti
y Epossibile includere inuna pagina webun

commento,che nonverramai visualizzato dal browser. y Ilcommento halaseguente sintassi: <! Questo euncommento >

INFN CorsobasediHTML(GenFeb2008)

26

ESERCIZIO

y Aggiungiamo dei commenti alla nostrapagina web y Attenzione,perinserire uncommento,dobbiamo

posizionarci nella sezione <HTML>sourcedi Seamonkey (inbassoasinistra)

INFN CorsobasediHTML(GenFeb2008)

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


INFN CorsobasediHTML(GenFeb2008) 28

Comefaccio apubblicare una 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

INFN CorsobasediHTML(GenFeb2008)

29

Comefaccio apubblicare una 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
INFN CorsobasediHTML(GenFeb2008) 30

Abbiamogia Winscp sulnostropc?


y http://winscp.net y GliutentiLinuxpossonoutilizzaredirettamenteil

comandoscp dallashell,oppureilclientgraficogftp y AnchegliutentiMacOS possonoservirsidelcomando scp dallashell,oppuredelclientgraficoFugu

INFN CorsobasediHTML(GenFeb2008)

31

Comefaccio apubblicare una pagina web?(4)SCP


y Avviamo il clientWinscp ed accediamo allaccount

comune html,conpassword**********

HTML.MI.INFN.IT

INFN CorsobasediHTML(GenFeb2008)

32

Comefaccio apubblicare una pagina web?(5)SCP


y Laprimavolta che ci colleghiamo adunserver,ci viene

richiesto di accettare lasua chiave pubblica

y Accettiamo eproseguiamo

INFN CorsobasediHTML(GenFeb2008)

33

Comefaccio apubblicare una pagina web?(6)SCP


y Winscp supporta il draganddrop.

INFN CorsobasediHTML(GenFeb2008)

34

Comefaccio apubblicare una pagina web?(6)SCP


y Andiamo nellarea /var/www/html/corsohtml/studenti

ecreiamo una cartella conil nostro nome,nella quale copieremo i nostri fileshtml

INFN CorsobasediHTML(GenFeb2008)

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

INFN CorsobasediHTML(GenFeb2008)

36

Comefaccio apubblicare una 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?


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

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)
y style="width: 100%; height: 50%;
50%dellafinestra height

Limmagine saradeformata!

width 100%dellafinestra

Finestradel browser

INFN CorsobasediHTML(GenFeb2008)

39

Ilpiatto fortedelweb:il link


y Ininformatica,uncollegamentoipertestuale(ininglese

hyperlink,spessoabbreviatoinlink,usatoancheinitaliano)un rinviodaun'unitinformativasusupportodigitaleadun'altra. cichecaratterizzalanonlinearitdell'informazionepropriadi unipertesto. ulterioriunitinformative(documenti,immagini,etc.)apartire daunaprimaunitadessecorrelata.


Tratto da Wikipedia

y Uncollegamentoipertestualehaloscopodicondurread

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">

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

Testo alternativo allimmagine

Limmagine che diventera cliccabile

INFN CorsobasediHTML(GenFeb2008)

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
INFN CorsobasediHTML(GenFeb2008) 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
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

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
INFN CorsobasediHTML(GenFeb2008) 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

Icolori (1)Icodici colore

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

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

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

elosalviamo sul nostro pcnella directorydocumenti


INFN CorsobasediHTML(GenFeb2008) 57

ESERCIZIO
y Ora creiamo una pagina webconunlinkversoil pdf

che abbiamo appena salvato y Attenzione:il percorso deve essere relativo!

INFN CorsobasediHTML(GenFeb2008)

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
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

y Epossibileforzarelaperturadiunlinkinunanuova

A B

finestradelbrowseraggiungendotarget="_blank
y <ahref="http://www.mi.infn.it"target="_blank">INFN</a>

INFN CorsobasediHTML(GenFeb2008)

A B

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

file

INFN CorsobasediHTML(GenFeb2008)

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 Ilpermesso setuid o suid un flag viene unix impostata sulla permesso speciale chepermette directory /tmp per evitare che ad unnormale utente dieseguire utenti ordinari cancellino o un processo deiappartenenti privilegisuperiori spostino icon file aquelli concessiadunnormale 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

Leproprieta deltag <table>(1)

INFN CorsobasediHTML(GenFeb2008)

78

Leproprieta deltag <table>(2)

INFN CorsobasediHTML(GenFeb2008)

79

Leproprieta deltag <tr>e<td>(1)

INFN CorsobasediHTML(GenFeb2008)

80

Leproprieta deltag <tr>e<td>(2)

INFN CorsobasediHTML(GenFeb2008)

81

Leproprieta deltag <td>(3)

Questiattributivalgono soloperiltag <td>, NONvalgonoper<tr>

Gliattributiperle celle(tag <tr>o <td>)hannopriorit rispettoagli attributiperl'intera tabella(tag <table>)


82

INFN CorsobasediHTML(GenFeb2008)

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)
y Iframe(cornici)dividonoloschermoinzoneseparate

Zona2

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

IFrame(3)
y Vediamocomeefattounframeset
Zona2 Zona1

Alcunischermimisurano 640x480,altri800x600, altri1024x768ecc. Eccoperche enecessario lasterisco*

y <frameset cols="120,*"></frameset> y Loschermodivisoinduecolonne(Zona1eZona2) y Quellaasinistradi120pixelequelladidestraoccupa

ilrestodelloschermo(indicatocon*).
INFN CorsobasediHTML(GenFeb2008) 95

IFrame(4)
y <framesetcols="120,*">

Avremmopotuto utilizzarequalunquealtro nomealpostodimenu e principale

<framesrc="menu.html"name="menu"> <framesrc=principale.html"name="principale"> </frameset>


Attenzione,non ceil<body>

Menu

Principale

120

*
96

INFN CorsobasediHTML(GenFeb2008)

Menu

IFrame(4)
y Prepariamolapaginaprincipale

Principale

y Sara unapaginahtmlnormalissimaconades.una

scrittadibenvenuto y <html> <body> BenvenutonellapaginaprincipaledellINFN<br> PuoiselezionarelaSezionecliccandosulmenua sinistra </body> </html>


INFN CorsobasediHTML(GenFeb2008) 97

Menu

IFrame(5)
y Prepariamolapaginamenu

Principale

<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)
y Ricapitoliamo:

Principale

y Abbiamocreatoilframeset (unhtmlsenza<body>) y Abbiamocreatolapaginamenu elapaginaprincipale y Quandoilbrowserleggeilframeset,carica

automaticamentemenu eprincipale allinternodegli spaziindicatinelframeset

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% 80%

sotto

INFN CorsobasediHTML(GenFeb2008)

101

Menu

IFrame(leopzioni)
y y y y y

Principale

y <framesetcols="120,*"frameborder="0"border="0"

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)
y <html>

principale

banner

<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"> <frame src=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" A name=B"> B </frameset> BassoSinistra <framesrc=C.htm"name=C"> </frameset> C </frameset>
INFN CorsobasediHTML(GenFeb2008) 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
INFN CorsobasediHTML(GenFeb2008) 105

Fine

INFN CorsobasediHTML(GenFeb2008)

106