Lektion 1, Del1, Kapitel 4

Transkript

1 , Del1, Kapitel 4 Inlärningsmål Att förstå uppbyggnaden av XHTML dokument Att kunna använda XHTML för att skapa enkla webbsidor. Att kunna lägga till bilder till en webbsida Att förstå hur man skapar och använder hyperlänkar Att kunna skapa listor med information Introduktion Vi skall nu börja med att se på grunderna i XHTML kodning. Senare skall vi gå in på mer avancerade tekniker. XHTML, HTML liksom XML stammar från SGML. Alla dessa språk är sk. markeringsspråk. Historik Standardisering I början av 60 : talet samlades representanter för ett antal Amerikanska universitet som sponsrades av försvaret till en konferens. Där presenterades planerna på ett gemensamt nät för att underlätta samarbete mellan 12 universitet och forsknings institutioner. Nätet fick namnet ARPA net (Advanced Research Projects Agency). Grunden till internet lades under 70 talet av forskare vid olika Amerikanska universitet som behövde en metod för att dela information med varandra. Det var dock först under 1989 som detta formulerades till ett mål om ett globalt nätverk för data kommunikation. Detta formulerades av forskare vid CERN laboratoriet och gick till en början under arbetsnamnet Mesh. Under 1990 godkändes ett utvecklingsprojekt med syfte att ta fram en prototyp baserad på NeXT datorer. Projektet gavs namnet Word Wide Web. Under November 1992 fans 26 olika någorlunda tillförlitliga webbservers. Under 1993 ökade antalet webbservers i världen från 50 till över 200. Trafiken utgjorde för första gången över en procent av trafiken it NSF:s globala nät. Del 1, sida 1

2 Samma år presenterades en alfa version av den första webbläsaren från NCSA mosaic for x. Under senare delen av 1994 bildades W3C (World Wide Web Consortium) av NCSA och CERN med syftet att bilda en internationell sammanslutning som skulle samordna och övervaka webbens utveckling. Webbläsaren utveckling Ursprungligen utformades en teknik för webbhanteringen som bestod av tre delar. o URL, Hur ett dokument namnges. Uniform Resource Locator som är en mekanism för att med hjälp av länkar lokalisera informationen på nätet. O HTTP Hur man hämtar ett dokument. Hypertext Transfer Protocol används som kommunikations protokoll för webben. O HTML, Formatet för webbdokument. Beskriver hur den hämtade informationen skall tolkas. Dessa tekniker har under åren raffinerats och utvecklats. Utvecklingen har ofta gått fortare än vad standardiserings organet hunnit specificera. Nyligen har en ny komponent introducerats nämligen stilmallar. CSS, Cascading Style Sheets skapar en möjlighet att ge flera sidor ett gemensamt utseende utifrån en gemensam mall. Under senare år har även nya markerings språk som XHTML och XML introducerats och standardiserats. Dessa tekniker har potential att på sikt ersätta HTML. XHTML Exempel 1 Alla exempel som vi kommer att titta på är tagna ur kurslitteraturen. Vi börjar med att titta på ett enkelt exempel (4.1) för att se hur ett XHTML dokument ät uppbyggt. Betrakta till en början de första tre raderna som något som måste finnas, senare skall vi gå igenom och förklara dessa. Raderna fem och sex är kommentarer, dessa inleds alltid med <! och avslutas alltid med -->. Dessa ignoreras av webbläsaren och används för att beskriva och kommentera funktionen hos dokumentet. Del 1, sida 2

3 Alla XHTML dokument inleds med en html tagg (<html>) denna finns på rad åtta i dokumentet. Betrakta tills vidare raden xmlns = som nödvändig. Vi kommer senare in på funktionen för denna rad. Notera att alla taggar har både en öppnings och slut, tagg med vissa undantag. Den indenteringen (indrag) på raderna 9 tom 15, denna finns för att förtydliga dokumentets struktur och relationer. Indenteringen visar tex. att HEAD är ett underelement till HTML. Taggen HEAD markerar dokumenthuvudet och innehåller bland annat dokumentets titel (rad 10). Läggmärke till att öppningstaggen och sluttaggen finns på samma rad. Det som står i TITLE är vad som visas längst upp i listen på webbläsaren. Rad 13 tom 15 är dokument kroppen och inleds med taggen BODY. Det som finns mellan BODY taggarna är det som visas i webbläsarens fönster. Lägg märke till att P taggen är indenterad för at visa att P, som står för paragraph är ett underelement till BODY. Validering För att verifiera att koden är korrekt utformad med rätt syntax bör den färdiga filen testas mot en validerare En sådan finns att tillgå på W3C s hemsida, adress: Tag för vana att alltid validera de färdiga filerna. Rubriker i XHTML Rubriker i XHTML (och html) indelas i sex nivåer från H1 tom. H6 däe H1 ger störst rubrik och H6 den minsta (fig.4.4 i boken). Dessa använd precis som i ett ordbehandlings program. Hyperlänkar En av de viktigaste funktionerna i XHTML (och html) är länkar. Dessa är grunden för att koppla samman resurser på olika sidor och olika webbservrar. I exemplel 4.6 skapas länkar till fyra olika webbsidor. En länk inleds alltid med taggen <a> denna följs sedan av en referens till den sida som man vill länka till enligt följande <a href = > där efter följer den text (eller bild) som skall synas som länk följt av ett avslutande </a>. För att skapa en länk till en mailadress skriver man <a href = mailto:par- Ove.Forss@mh.se > Del 1, sida 3

4 Bilder Hittills har vi jobbat med att rendera text på sidorna. Vi skall nu lära oss att lägga till bilder till våra webbsidor. De vanligaste bild formaten är gif och jpeg men andra format som tex. png är på frammarsch. För att infoga en bild i en webbsida använder man elementet img med attributet scr som anger sökvägen till bilden (hädan efter kommer vi att använda benämningen element i stället för taggar och attribut för att ange egenskaper för dessa). I exempel 4.7 ser vi hur man har infogat en bild i en webbsida. På rad infogas en bild med <img src = xmlhtp.jpg height = 238 with = 183 alt = XML How to Program book cover />. Den första delen (img src = xmlhtp.jpg )är skälva länken till bilden där efter följer attribut som anger bildens brädd och höjd slutligen efter attributet alt kommer en textsträng som visas om bilden av någon anledning inte kan visas. Bilder som hyperlänkar Bilder kan även användas som länkar, man sätter då in referensen till bilden mellan <a> och </a> som visas i exempel 4.8. Specialtecken Vissa tecken kan inte skrivas ut på vanligt sätt i en webbläsare. För att visa dessa tecken anger man i stället dess html kod enligt följande: först skriver man ett & - teckenföljt av koden för önskat tecken och avslutar med ett semikolon. Alla specialtecken finns listade i appendix A i kurslitteraturen. Listor Ett bra sätt att strukturera information är att placera den i listor. Dessa indelas i två typer oordnade och ordnade. Oordnade listor Oordnade listor omsluts av <ul> element och varje post i listan markras med <li> element (se fig 4.10). En oordnad lista har som standard punkter som föregår varje post. Listor kan även nästlas, alltså en lista kan bestå av underlistor som i exempel Till ul elementet kan ett argument type kopplas som anger vilken typ av teken som skall föregå postrerna. Dessa är disc2, cicle, square. Del 1, sida 4

5 Ordnade listor Ordnade listor omsluts av <ol> element och varje post markeras med <li> element. Till ol elementet kopplas ett argument som talar om vilken typ av ordningstecken man vill använda enligt följande <ol type = a >. De typer som kan anges är: a, små bokstäver, A, stora bokstäver, i, små romerska siffror, I, stora romerska siffror. Om ingen typ anges användes siffror. Del 1, sida 5

6 , del 2, Kapitel 5 Inlärningsmål för lektionen Att kunna skapa tabeller på webbsidor med data i rader och kolumner Att kunna formatera tabeller Att kunna skapa och använda image maps för navigering Att kunna göra webbsidorna tillgängliga för sökmotorer med hjälp av <meta> taggar. Att kunna använda frameset element för att visa flera webbsidor i samma fönster. Introduktion Vi skall nu börja arbeta med tabeller för att styra hur data skall presenteras på sidan. Sedan skall vi se hur man använder formulär för att samla in information. Vi lär oss använda interna länkar för att navigera inom ett dokument. Slutligen skall vi lära oss att använda frames för att presentera flera webbsidor i samma fönster. Tabeller i XHTML Tabeller är att av de mest använda elementen på webbsidor. Tabeller skall enligt standarden endast användas för att organisera och visa data men de används flitigt för att styra utseendet på webbsidor. Detta är dock inte förenligt med god programmering. I exempel 5.1 skapas en enkel tabell med sex rader och två kolumner. Tabeller definieras med table elementet. På rad i exemplet inleds tabellen med table följt av tre attribut border, width och summary. Border är satt till ett vilket innebär att tabellen skall en ram som är en pixel bred. Width är satt till 40% vilket innebär att tabellen skall vara 40% av sidans brädd. Summary skall som namnet antyder summera innehållet i tabellen. På rad 22 finns en caption för tabellen vilket skrivs ut som en rubrik ovanför tabellen. På raderna 26 till 31 finns tabellhuvudet (thead). Det specificerar vas som skall stå på tabellens första rad. Detta skrivs oftast ut med fet stil. Raderna 35 till 55 specificerar tabellkroppen (tbody). Denna innehåller huvuddelen av tabellen. Sist kommer tabellfoten (tfoot). Innehållet i denna skrivs även det ut med fet stil. Varje tr element specificerar en rad och varje th element specificerar en kolumn i tabellhuvudet. Dessa visas med fet stil. Varje td element specificerar en kolumn i Del 2, sida 1

7 tabellkroppen. I tabellfoten använder man här th element för att data i tabellfoten skall skrivas ut med fet stil. I exempel 5.2 introduceras några ny element och attribut som används för att formatera tabellen. På rad 22 använder vi elementet colgroup för att ange format för flera kolumner på en gång. Här vill vi bara formatera en kolumn, den med kamelen. På rad 26 anger vi att vi vill att innehållet skall ligga till höger (align right) i tabell kolumnen. Med span = 1 talar vi om att formateringen skall gälla för en kolumn. På rad 36 talar vi med rowspan = 2 om att tabellrutan skall vara två tabellrader hög. På rad 42 talar vi om att nästa ruta i första raden skall omfatta fyra kollumner med hjälp av th colspan = 4 och att texten skall fästas mot toppen av rutan med valign = top. Formulär En annan funktion som ofta används på webbsidor är formulär för att mata in data. Vi skall nu titta på hur man skapar ett formulär men vi kommer inte att hantera de data som formuläret samlar. Ett formulär anges med elementet form tillsammans med attrebut som talar om hur data sänds till tex en server och vilken applikation på servern som skall mottaga datat. I exemplet 5.3 används ett antal inmatningsfält och knappar, det är dock bara ett inmatningsfält som syns i webbläsaren. På raderna 28 till 33 anges att antal inmatningsfält som är dolda med värden redan ifyllda. Detta för att man använder en färdig CGI applikation som mailar datat till en E post mottagare. På rad 37 till 40 skapar vi det inmatningsfält som syns i webbläsaren. Vi börjar med att infoga en label, denna skall finnas där för att upplysa om vad fältets ändamål är. Den kommer inte att presenteras av webbläsaren men det är ändå ett design fel att inte inkludera den. Där efter kommer på rad 38 själva inmatningsfältet, i detta fallet en text ruta. Den deklareras med input name = name type = text size = 25 maxlength = 30. Först ger vi den namnet name, sedan talar vi om att det skall vara en textruta som visar 25 tecken och maximalt antal tecken är 30. Sedan infogar vi en submitt knapp och en reset knapp. Submitt skickar datat till den applikation som vi angett och reset rensar formuläret. I exempel 5.4 skapas ett mer komplext formulär med flera inmatningsfält. Dettas formulär samlar information om vad besökarna tycker om en webbsida. På detta formulär använder vi två olika typer av text inmatningsfält. På rad 31 till 33 skapar vi textruta på samma sätt som i föregående exempel. På rad 36 till 40 skapar vi ett textinmatningsfält som omfattar flera rader. Detta skapas med hjälp av elementet input type = textarea enlig följande  <p><label>comments:<br /> <textarea name = "comments" rows = "4" cols = "36"> Del 2, sida 2

8 Enter your comments here. </textarea> </label></p> På rad 45 till 48 skapar vi ytterligare en typ av textfält som inte visar vad som skrivs in i fältet. Denna typ av textfält är avsedda för t.ex. lösenordsfält. Dessa skapas med elementet input type = password. På rad 53 till 71 skapar vi fem st kryssrutor. Dessa skapar vi med input type = checkbox. Dessa kryssrutaor är grupperade, alltså de behandlas som en grupp eftersom att de delar ett gemensamt namn (input name = "thingsliked" ). Denna input har liksom de andra ett antal argument t.ex. value som är det namn skickas till mottagande applikation för just den kryssrutan. Ett annat argument som man kan lägga till är checked = checked vilket medför att rutan är kryssad redan då den visas på sidan. I exempel 5.5 byggs formuläret på ytterligare med sk radioknappar dessa skapas med input type = radio. Argumenten för dessa är ungefär de samma som för kryssrutor förutom att man alltid bör ange en ruta som markerad från början. Nästa inmatnings fält som vi lägger till är en sk listbox. Denna skapas med select name = namn följt av ett antal options som representerar de olika valen enlit följande <select name = "rating"> <option selected = "selected">amazing</option> <option>10</option> <option>9</option> <option>8</option> <option>7</option> <option>6</option> <option>5</option> <option>4</option> <option>3</option> <option>2</option> <option>1</option> <option>awful</option> </select> Som synes är det första valet redan valt som defoult med selected = selected. Interna länkar I den förra lektionen lärde vi oss att skapa länkar till andra sidor och till en e post adress. Vi skall nu skapa länkar inom ett dokument. Dessa skapar man för att besökaren skall slippa scrolla så mycket i dokumentet. I exempel 5.6 ser vi hur man skapar intern länkar. På rad 16 finns ett namngivet ankare <a name = features > som man sedan kan länka till från andra delar av dokumentet med <a href = # features >(rad 63). Exemplet innehåller ytterligare ett ankare (rad 57) och en intern länk till denna (rad 20). Del 2, sida 3

9 Image maps Ett snyggt sätt att åstadkomma navigations menyer är med hjälp av sk imag maps. Dessa skapar man genom att defeniera områden på en bild som länkar till olika mål. För att skapa en image map börjar man med att ange <map id = namn >. Detta är det namn som vi sedan skall använda för att koppla ihop bilden med vår image map. Nästa steg är att definiera de ytor vi skall använda på vår image map. Detta gör vi med <area href = mål.html shape = rect coords = x,y,x,y >. Koordinaterna står i ordningen övre högra hörnet, nedre vänstra hörnet. En länkyta kan även ha andra former än rektangulär, t.ex. rund (cicle x,y för centrum och radien), polygon formad (x,y för första koordinaten, x,y för andra koordinaten osv). Slutligen skall vi ange vilken bild som vi vill koppla till vår image map. Detta gör vi genom att referera till enbild på vanligt sätt (<img src = bild.gif ) men vi lägger till ett nytt attribut usemap = #namn. Detta kopplar ihop bilden med vår image map. Meta element Meta element används bland annat för att ange information som man vill skall registreras i olika sökmotorer. Detta görs med nyckelordet meta följt av atterbut. I exempel 5.8 kan vi se exempel på detta. På rad 14 inleds meta elementet och vi anger attributet name = keywords vilket känns igen av sökmotorer. Detta följs av attributet content = sökord som anger de sökord som vi vill registrera för vår sida. Sedan anger vi ett ny meta element med attributet name = description följt av content = beskrivning av sidan. Det är detta som presenteras som text för den som hittar sidan via en sökmotor. Det finns flera andra användningar för meta element men dessa går vi in på i den takt vi kommer in på dem. Frames Ibland vill vi kunna visa flera webbsidor samtidigt i samma webbläsarfönster, då använder vi oss av frames (ramar). För att skapa en sida med ramar använder vi elementet frameset tillsammans med attribut för att formatera ramarna. I exempel 5.9 skapar vi en sida med en smal ram tillvänster som innehåller navigerings knappar och en stor ram som innehåller den information som vi vill visa. Detta åstadkoms med följande kod snutt. <frameset cols = "110,*">   <frame name = "leftframe" src = "nav.html" /> Del 2, sida 4

10 <frame name = "main" src = "main.html" /> <noframes> <p>this page uses frames, but your browser does not support them.</p> <p>please, <a href = "nav.html">follow this link to browse our site without frames</a>.</p> </noframes> </frameset> Första raden med frameset cols = 110,* talar om att vi vill skapa två vertikala ramar där den första skall vara 110 pixlar bred och den andra skall fylla ut resten av skärmen. Den vänstra ramen ges namnet left frame med frame name = leftframe och den högra ges namnet min på motsvarande sätt. Sedan kopplar vi med hjälp av attributet src = fil.html rätt webbsida till rätt ram. Sist lägger vi till ett element för de webbläsare som inte stöder ramar oller om användaren valt att inte visa ramar. <noframes> <p>this page uses frames, but your browser does not support them.</p> <p>please, <a href = "nav.html">follow this link to browse our site without frames</a>.</p> </noframes> Nästlade frames Det går även att skapa ramar i andra ramar sk nästlade frames. Detta åstadkommer man genom att lägga till ett frameset inne i ett annat enligt nedan <frameset cols = "110,*"> <frame name = "leftframe" src = "nav.html" />   <frameset rows = "175,*"> <frame name = "picture" src = "picture.html" /> <frame name = "main" src = "main.html" /> </frameset> <noframes> <p>this page uses frames, but your browser does not support them.</p> <p>please, <a href = "nav.html">follow this link to browse our site without frames</a>.</p> </noframes> Del 2, sida 5

11 </frameset> Del 2, sida 6