CorsoHTML
lezione1
L'HTML(HyperTextMarkupLanguage)èillinguaggiochevieneusatoperrealizzarelepagineweb.Queste
sonoparticolarifileditestoorganizzaticomeipertesti.
Non è un vero e proprio linguaggio di programmazione, ma un linguaggio di descrizione, di marcatura.
Consisteinfattinelporreall'internodiunfiledisolotestodeimarcatori(Markup)ocontrassegni,dettiTAG
che, letti e interpretati da un opportuno programma (chiamato browser=sfogliatore), produrranno le
visualizzazionieleazionicorrispondenti.
All'interno di pagine HTML, si possono includere programmi scritti in veri linguaggi di programmazione
(linguaggidiscripting)comeilJavaScript,eilVBScript.
PeriniziarealavoraresullacostruzionediunapaginaWeb,sipuòutilizzareunqualsiasieditoreditesticome
ilsempliceblocconotediWindows,anchesel'utilizzodieditorivisuali(comeFrontpage),facilitàmoltoil
lavoro del programmatore che non dovendo scrivere tutto il codice può dedicarsi all'aspetto finale della
pagina Web. La conoscenza dell'Html è però indispensabile per poter intervenire sul codice in caso di
necessità.Perfunzionarecomepaginaweb,questofileditestodeveessererinominatoconilsuffisso.HTML
o.HTMedevecontenere,oltrealtestoveroeproprio,ancheleistruzionicheconsentonoalbrowserdi
riconoscerloegestirlocorrettamente.
QuesteistruzionisonochiamateTag(marcatori).TuttiiTAGHMTLvengonoracchiusitraparentesiangolate,
nellaforma<TAG>,evengonogeneralmenteterminatidauntagdichiusuranellaforma</TAG>postoalla
finedellaporzionedidocumentosullaqualesiapplicailTAG.Quandoilbrowserincontraquestisimboli
capiscechesitrattad'istruzionedaeseguireenonditestodavisualizzaresulloschermo.Itagingenerale
possono contenere attributi che ne definiscono determinate proprietà. Ogni attributo può assumere
differentivalori.Lasintassiè:<TAGATTRIBUTO="valore">;adesempio:<BODYbgcolor=“red">.Levirgolette
cheracchiudonoilvalorediunattributoavoltesonoobbligatorieedavolteno.Inognicasosonosempre
accettabilianchequandononsononecessarie.
È anche possibile includere coppie di tag all'interno di altre coppie di tag mantenendo una sequenza
simmetrica.
Adesempio,iltag<B>identificailgrassettoediltag<I>ilcorsivo.Cosìperformattareingrassettoecorsivo
unaparolasidevescrivere:
<B><I>Testo</I></B>oppure:<I><B>Testo</B></I>manon:
<B><I>Testo</B></I>cioèl'ultimotagapertoèilprimoadoveresserechiuso.
Ilprimotagchesidevescrivereintuttelepaginehtml,èiltag<HTML>cheandràchiusocon</HTML>alla
fine del codice. Qui di seguito vi mostro gli altri TAG ESSENZIALI che si usano per definire la struttura
essenzialediognipaginaweb:
Itag<HTML>e</HTML>all'inizioedallafinedeldocumento;essiindicanoalbrowserchetuttociòcheè
compresonelmezzoèunapaginaweb.
Itag<HEAD>e</HEAD>racchiudonol'intestazionedeldocumentodovesipossonoinserireinformazioni
chenonvengonovisualizzatenellapagina,machenedescrivonocaratteristichecometitolo,autoreeparolechiave.
Itag<BODY>e</BODY>racchiudonoilcorpodeldocumentodovesiinserisceilcontenutodavisualizzare
nellapagina(testo,collegamenti,immaginiecosìvia).
ITAGDIINTESTAZIONEsono:<TITLE>e<META>.
Con <TITLE> si definisce il titolo della pagina web. Il titolo appare sulla barra superiore della finestra del
browserquandolapaginavienevisualizzatadurantelanavigazione.Lasintassiè:
<HEAD>
<TITLE>Titolodellapagina</TITLE>
</HEAD>
Coniltag<META>èpossibilespecificareinformazionicome:ilnomedell'autoredellapagina,unabreve
descrizionedeicontenutidellapaginaedunelencoschematicodiparole-chiavelegateaicontenuti.Iltag
<META>nonrichiedechiusura.Adesempio:
Per inserire nell'intestazione il nome dell'autore si utilizza: <META NAME=author CONTENT="nome e
cognome">
Per inserire nell'intestazione una descrizione del documento si utilizza: <META NAME=decription
CONTENT="brevedescrizionedellapagina">
Perinserirenell'intestazioneunelencodiparole-chiavechespecificanol'argomentodellapaginasiutilizza:
<METANAME=keywords
CONTENT="parola1,parola2,parola3,parola4>
IlCORPODELLAPAGINAIltag<BODY>segnal’iniziodelcorpoprincipaledeldocumentoHTMLdovevanno
inseritituttiicontenutichedevonoapparirenellapaginaweb.Essorichiedeiltagdichiusura</BODY>
Diseguitosonoriportatiiprincipaliattributideltag<BODY>:
BGCOLORimpostauncolorecomesfondodellapaginaweb.Sevogliamorealizzareunapaginaconlosfondo
neroscriveremoallora:<BODYBGCOLOR="#000000">doveilcodicedelcoloreèinformatoesadecimale.
Si può indicare il colore mediante il nome in inglese anziché il formato esadecimale: <BODY
BGCOLOR="black">
Questa però non è una pratica comune perché non tutti i browser sono in grado di interpretare
correttamentetalegenerediespressione.
Conl'attributoBACKGROUNDèpossibileimpostarecomesfondodellapaginawebun'immagineinformato
GIFoJPEGsecondolasintassi:
<BODYBACKGROUND="percorsoenomedelfile">
Sel'immaginesitrovanellastessacartelladellapaginaHTMLesichiamasfondo.gifscriveremo:
<BODYBACKGROUND="sfondo.gif">
Inserendoun'immaginecomesfondodellapaginaweb,questavieneautomaticamentereplicatadalbrowser
inmododacoprirel'interospaziovisibile.
L'attributo TEXT serve per impostare il colore del testo della pagina secondo la sintassi: <BODY
TEXT="#codicedelcolore">.Senonspecificato,ilcoloredidefaultdeltestoèilnero.
Tramitegliattributideltag<BODY>sipossonodefinireancheicolorideicollegamentiipertestuali.Icolori
dadefiniresonotre:pericollegamentiipertestualiincondizioninormalisiusal'attributoLINK="codicedel
colore";pericollegamentiattivi,nelmomentocioèincuivisifaclic,siusal'attributoALINK="codicedel
colore"; per i collegamenti già visitati si usa l'attributo VLINK="codice del colore", la sintassi è: <BODY
LINK="colore1"ALINK="colore2"VLINK="colore3">
IMARGINIIquattroattributiperdefinireladistanzainpixelsono:Topmargin,Bottommargin,Leftmargin,
Rightmarginrispettivamenteda:marginesuperiore,margineinferiore,marginesinistroemarginedestro.
Unmargineugualeazerofaràsicheiltestoinizipraticamentesulbordodellafinestradelbrowser.
<bodytopmargin="30">
<bodybottommargin="30">
<bodyleftmargin="30">
<bodyrightmargin="30">
Esercizio1Realizzareunapaginawebconleseguenticaratteristiche:
titolo:”primapaginaweb”contenutodellapagina:questaèlamiaprimapaginaweb.
N.B.utilizzaBloccoNoteperscrivereilcodice;salvailfileconnome“esercizio1”,conestensionehtmleprova
adavviarlocliccandol'iconadiinternetexplorer.
Esercizio2RealizzareunapaginaWebcheabbiacometitolo:”ITag”ecometesto:
“Va sottolineato che tutti i tag possono essere scritti sia in minuscolo che in maiuscolo senza che venga
alterataodifferenziatalalorofunzione.”
Salvateilfileconnome:“esercizio2.html";
Visualizzateilrisultatoconexplorer
Modificatelosfondorendendologiallo(yellow)
Salvateilfile;Visualizzateilrisultatoconexplorer(cliccaresultastoaggiorna)Modificateilcoloredeltesto
rendendoloblueSalvateilfile;Visualizzateilrisultatoconexplorer
Esercizio3Utilizzandoilfile:“esercizio2”:
Impostateilmarginesuperiorea200pixel;visualizzateilrisultatoImpostateilmarginesinistroa300pixel;
visualizzate il risultato; Cambiate il colore dello sfondo e del testo della pagina a vostro piacimento
utilizzandolatabelladeicoloripostainappendice
Esercizio4Realizzateunasemplicepaginawebconunafrase,untesto,unapoesiaavostrascelta
Ricordatevidiaggiungereiltitoloallapaginaesalvateloconilnome:”esempio3.html”
Createundisegnoconpaintesalvateloconilnome:”sfondo”Applicateildisegnocomesfondoallapagina
web.
