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

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

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

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>

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

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
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
Abbiamogia Winscp sulnostropc?

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

y Avviamo il clientWinscp ed accediamo allaccount
comune html,conpassword**********
HTML.MI.INFN.IT
32

y Laprimavolta che ci colleghiamo adunserver,ci viene
richiesto di accettare lasua chiave pubblica
y Accettiamo eproseguiamo
33

y Winscp supporta il draganddrop.
34

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

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

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
IlLink(2)
y <ahref=http://www.mi.infn.it>INFN</a>
Ladestinazione
Laparte cliccabile
y INFN
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
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
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
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
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

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
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
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>
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
Iltarget diunlink
y Quandosicliccasuunlink,lapaginacorrenteviene
sostituitadallapaginadestinazione
y Epossibileforzarelaperturadiunlinkinunanuova
A B
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"> <! a{textdecoration:none} > </style> </head>

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

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
Letabelle(1)
y Sipossonoutilizzareperinseriredeglielenchi y ma sonomoltoimportantiperdareallepagineweb
unaspettoordinato,impostandolospessoredelbordo azero
y Disegnamo unatabelladi3x3cellenellasezione
normal
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

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
ESERCIZIO
y Aggiungiamounaimmaginedisfondoallanostra
paginaweb;primaproviamoconlimmaginesfondo.gif epoiconlimmaginelisa.jpg y Entrambeleimmaginisonodisponibilinellasezione corsohtml/materiale/immagini y Attenzione,conlosfondolisa.jpg enecessario modificareilcoloredeltesto,ilneroepocoleggibile!

sfondo.gif immaginedi5x5 pixel
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
IMetatag (1)
y Imetatag sonometadatipresentinellinguaggioHTML
utilizzatiperfornireinformazionisullepagineagliutentio aimotoridiricerca
y Adifferenzadiognialtrotag inseribileinunapaginaweb,i
metatag nonfornisconoalbrowseralcundatodi formattazionedellapagina,percuiilloroinflussosul layoutfinalepraticamentenullo;sonopercitotalmente invisibiliall'utentesenonattraversolavisualizzazionedella codicesorgenteinHTMLdellapaginaoppuretramitele finestrediproprietdeibrowser.

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

ESERCIZIO
y Creiamounapaginawebanimatachevisualizziin
sequenzaleparole:
y UN y DUE y TRE y STELLA! y Trucco:scrivere4paginehtmlefarlecaricare
automaticamenteunadopolaltraconiltag: <METAhttpequiv="REFRESH"content="5; url=destinazione.html">

IFrame(1)
y Iframe(cornici)dividonoloschermoinzoneseparate
Zona2
Zona1
Zona3
IFrame(2)
y Ognunadiquestefinestrepuo contenereun
documentohtml y Occorrespecificareilframeset ,cioe ilfilecheindica albrowsercomesuddividerelafinestraprincipale y Quandolapaginaframeset vienelettadalbrowser, essocaricaautomaticamentelepagineassociateal frameset
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*).
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
Menu
IFrame(4)
y Prepariamolapaginaprincipale
Principale
y Sara unapaginahtmlnormalissimaconades.una
scrittadibenvenuto y <html> <body> BenvenutonellapaginaprincipaledellINFN<br> PuoiselezionarelaSezionecliccandosulmenua sinistra </body> </html>

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>

Menu
IFrame(6)
y Ricapitoliamo:
Principale
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
IFrame(7)
y <framesetrows="20%,80%">
<framesrc="top.htm"name=sopra"> <framesrc="bottom.htm"name=sotto"> </frameset>
sopra
20% 80%
sotto
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
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>
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>
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
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.

it INFN Sezione di Milano

Quando,doveeda chiestato inventato lHTML?

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!

Che cosa etecnicamente lHTML

Che cosa sono i browsers

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 Provare avisualizzare il sorgente di una qualsiasi

pagina htmlsul web

Creare /modificare unHTML

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 comesefosseundocumento di Word?

y Risposta:Spesso lunico modo di capire percheuna pagina webnonsi

Facciamo pratica coni tag(3)

Acaccia di tag(1):grassetto, sottolineato,corsivo,eccetera

finestra Normalperscrivere deltesto everifichiamo quali tagvengono utilizzati perrendere leffetto

y Scriviamo una pagina webche contenga parecchi tage

salviamola sul nostro pc

Acaccia di tag(2):lalista ordinata

leffetto di lista ordinata

<li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> <li>quarto elemento</li> </ul>

Acaccia di tag(3):lalista numerata

leffetto di lista numerata

<li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> <li>quarto elemento</li> </ol>

y Aggiungiamo alla nostrapagina webuna lista e

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

posizionarci nella sezione <HTML>sourcedi Seamonkey (inbassoasinistra)

Comefaccio apubblicare una pagina web?(1)

y Ilserverwebeunpcche rimane sempre acceso e

collegato alla rete interneteche,dietro richiesta,invia lepagine HTMLalbrowserrichiedente

Comefaccio apubblicare una pagina web?(2)

Comefaccio apubblicare una pagina web?(3)SCP

Abbiamogia Winscp sulnostropc?

comandoscp dallashell,oppureilclientgraficogftp y AnchegliutentiMacOS possonoservirsidelcomando scp dallashell,oppuredelclientgraficoFugu

Comefaccio apubblicare una pagina web?(4)SCP

Comefaccio apubblicare una pagina web?(5)SCP

richiesto di accettare lasua chiave pubblica

Comefaccio apubblicare una pagina web?(6)SCP

Comefaccio apubblicare una pagina web?(6)SCP

Comefaccio apubblicare una pagina web?(7)Ilbrowser

nostrapagina htmlaprendo unbrowserinternet (InternetExplorer,Firefox,Seamonkey ecc)ed inserendo lURL html.mi.infn.it/corsohtml/studenti/mionome

Riusciamo a visualizzare il fileutilizzando il browserweb?

Ilpiatto fortedelweb:il link

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

dalrestodeldocumentoperqualchesuapeculiaritgrafica;la pitipicaunasottolineatura.L'attivazionediuncollegamento vieneeffettuataattraversounclicdelmouse,cuiseguela visualizzazionedelladestinazionedelcollegamento.

<body> EccounlinkversoilsitowebdellaSezionedi Milano<br> <ahref=http://www.mi.infn.it>INFN</a> </body> </html>

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

Testo alternativo allimmagine

Limmagine che diventera cliccabile

IlLink(4)percorsi relativi eassoluti

(diversa da noi)alla quale vogliamo fareriferimento y Vantaggi:

altrifiles rispettoaldocumentoincuicisitrovain quelmomento

dilivelloinferioreallaposizionecorrente,basta nominarelacartellaseguitadallo"slash",epoiilnome delfile. Secondolaformula:cartella/NomeFile.html

evidenziatoinqualchemanieraallinternodellapagina HTML,inmodochesiafacileperlutenteindividuarlo. NellHTMLtradizionaleillinksempresottolineato Didefaultilinksonoblu(#0000FF).

nellacronologiadellutente.Didefaultilinkvisitati sonodicolorvioletto(piesattamente:#800080). Questo eunlinkvisitato

Icolori (1)Icodici colore