2D HTML 00
annuncio pubblicitario
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.
