Vi skall nu börja med att se på grunderna i XHTML kodning. Senare skall vi gå in på mer avancerade tekniker.

Transkript

1 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 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 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. Sida 1 av 26

2 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. 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. Student portalen Ni skall spara alla era webb sidor i en katalog som heter public-html. Denna skapas automatiskt när kontot skapas och om den av någon anledning inte finns så måste ni ta kontakt med närmaste tekniker så att katalogen skapas med korrekta rättigheter. Ni kan inte själva göra detta om ni inte är bekant med UNIX miljön. Det går inte att ange rättigheter från Windows klienterna i labben. Under public-html skapar ni en lämplig katalogstruktur som passar er. Start sidan i varje katalog döps lämpligen till index.html vilket gör att sidan laddas automatiskt när katalogen anges i en URL. Sida 2 av 26

3 XHTML Exempel 1 Alla exempel som vi kommer att titta på är tagna ur boken Internet & Word Wide Webb, How to program. <!-- Fig. 4.1: main.html <!-- Our first Web page Welcome</title> Welcome to XHTML! Vi börjar med att titta på ett enkelt exempel för att se hur ett XHTML dokument är 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. 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 Sida 3 av 26

4 taggen är indenterad för at visa att P, som står för paragraph är ett underelement till BODY. Sida 4 av 26

5 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är H1 ger störst rubrik och H6 den minsta (fig.4.4 i boken). Dessa använd precis som i ett ordbehandlings program. <!-- Fig. 4.4: header.html <!-- XHTML headers Headers</title> <h1>level 1 Header</h1> <h2>level 2 header</h2> <h3>level 3 header</h3> <h4>level 4 header</h4> <h5>level 5 header</h5> <h6>level 6 header</h6> 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 > Sida 5 av 26

6 Bilder <!-- Fig. 4.5: links.html <!-- Introduction to hyperlinks Links</title> <h1>here are my favorite sites</h1> <strong>click a name to go to that page.</strong> <!-- create four text hyperlinks <a href = " <a href = " Hall</a> <a href = " <a href = " Today</a> 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. <!-- Fig. 4.7: picture.html <!-- Adding images with XHTML Welcome</title> <img src = "xmlhtp.jpg" height = "238" width = "183" alt = "XML How to Program book cover" /> <img src = "jhtp.jpg" height = "238" width = "183" Sida 6 av 26

7 alt = "Java How to Program book cover" /> 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. <!-- Fig. 4.8: nav.html <!-- Using images as link anchors Navigation Bar </title> <a href = "links.html"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> </a><br /> <a href = "list.html"> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /> </a><br /> <a href = "contact.html"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /> </a><br /> <a href = "header.html"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /> </a><br /> <a href = "table.html"> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /> </a><br /> <a href = "form.html"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form" /> </a><br /> 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 & - Sida 7 av 26

8 teckenföljt av koden för önskat tecken och avslutar med ett semikolon. Alla specialtecken finns listade i appendix A i kurslitteraturen. <!-- Fig. 4.9: contact2.html <!-- Inserting special characters Contact Page </title> <!-- special characters are entered <!-- using the form &code; Click <a href = "mailto:deitel@deitel.com">here </a> to open an message addressed to deitel@deitel.com. <hr /> <!-- inserts a horizontal rule All information on this site is <strong> </strong> Deitel <strong>&</strong> Associates, Inc <!-- to strike through text use <del> tags <!-- to subscript text use <sub> tags <!-- to superscript text use <sup> tags <!-- these tags are nested inside other tags <del>you may download 3.14 x 10² characters worth of information from this site.</del> Only _one download per hour is permitted. Note: <strong>< ¼</strong> of the information presented here is updated daily. 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 tecken som skall föregå posterna. Dessa är disc2, cicle, square. Sida 8 av 26

9 <!-- Fig. 4.10: links2.html <!-- Unordered list containing hyperlinks Links</title> <h1>here are my favorite sites</h1> <strong>click on a name to go to that page.</strong> <!-- create an unordered list <ul> <!-- add four list items <li><a href = " <li><a href = " <li><a href = " <li><a href = " </ul> 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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <!-- Fig. 4.11: list.html <!-- Advanced Lists: nested and ordered Lists</title> <h1>the Best Features of the Internet</h1> <!-- create an unordered list <ul> <li>you can meet new people from countries around the world.</li> <li> You have access to new media as it becomes public: <!-- this starts a nested list, which uses a - -> Sida 9 av 26

10 <!-- modified bullet. The list ends when you - -> <!-- close the <ul> tag. - -> <ul> <li>new games</li> <li> New applications <!-- ordered nested list <ol type = "I"> <li>for business</li> <li>for pleasure</li> </ol> </li> <li>around the clock news</li> <li>search engines</li> <li>shopping</li> <li> Programming <!-- another nested ordered list <ol type = "a"> <li>xml</li> <li>java</li> <li>xhtml</li> <li>scripts</li> <li>new languages</li> </ol> </li> </ul> <!-- ends the nested list of line 27 </li> <li>links</li> <li>keeping in touch with old friends</li> <li>it is the technology of the future!</li> </ul> <!-- ends the unordered list of line 18 <h1>my 3 Favorite <em>ceos</em></h1> <!-- ol elements without a type attribute <!-- have a numeric sequence type (i.e., 1, 2,...) <ol> <li>harvey Deitel</li> <li>bill Gates</li> <li>michael Dell</li> </ol> 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 Sida 10 av 26

11 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. <!-- Fig. 5.1: table1.html <!-- Creating a basic table <title>a simple XHTML table</title> <!-- the <table> tag opens a table <table border = "1" width = "40%" summary = "This table provides information about the price of fruit"> <!-- the <caption> tag summarizes the table's <!-- contents (this helps the visually impaired) <caption><strong>price of Fruit</strong></caption> <!-- the <thead> is the first section of a table <!-- it formats the table header area <thead> <tr> <!-- <tr> inserts a table row <th>fruit</th> <!-- insert a heading cell - -> -> -> <th>price</th> </tr> </thead> <!-- all table content is enclosed <!-- within the <tbody> <tbody> <tr> <td>apple</td> <!-- insert a data cell <td>$0.25</td> </tr> <tr> <td>orange</td> <td>$0.50</td> </tr> <tr> <td>banana</td> <td>$1.00</td> </tr> <tr> <td>pineapple</td> <td>$2.00</td> </tr> </tbody> <!-- the <tfoot> is the last section of a table - <!-- it formats the table footer - <tfoot> Sida 11 av 26

12 <tr> <th>total</th> <th>$3.75</th> </tr> </tfoot> </table> 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 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. <!-- Fig. 5.2: table2.html <!-- Intermediate table design Tables</title> <h1>table Example Page</h1> <table border = "1"> <caption>here is a more complex sample table.</caption> <!-- <colgroup> and <col> tags are used to <!-- format entire columns <colgroup> <!-- span attribute determines how many columns <!-- the <col> tag affects <col align = "right" span = "1" /> Sida 12 av 26

13 </colgroup> <thead> <!-- rowspans and colspans merge the specified <!-- number of cells vertically or horizontally <tr> <!-- merge two rows <th rowspan = "2"> <img src = "camel.gif" width = "205" height = "167" alt = "Picture of a camel" /> </th> <!-- merge four columns <th colspan = "4" valign = "top"> <h1>camelid comparison</h1><br /> Approximate as of 9/2002 </th> </tr> <tr valign = "bottom"> <th># of Humps</th> <th>indigenous region</th> <th>spits?</th> <th>produces Wool?</th> </tr> </thead> <tbody> <tr> <th>camels (bactrian)</th> <td>2</td> <td>africa/asia</td> <td rowspan = "2">Llama</td> <td rowspan = "2">Llama</td> </tr> <tr> <th>llamas</th> <td>1</td> <td>andes Mountains</td> </tr> </tbody> </table> 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 Sida 13 av 26

14 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. <!-- Fig. 5.3: form.html <!-- Form Design Example 1 Forms</title> <h1>feedback Form</h1> Please fill out this form to help us improve our site. <!-- this tag starts the form, gives the <!-- method of sending information and the <!-- location of form scripts <form method = "post" action = "/cgi-bin/formmail"> <!-- hidden inputs contain non-visual <!-- information <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> <!-- <input type = "text"> inserts a text box <label>name: <input name = "name" type = "text" size = "25" maxlength = "30" /> </label> <!-- input types "submit" and "reset" insert <!-- buttons for submitting and clearing the <!-- form's contents <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </form> Sida 14 av 26

15 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 <!-- <textarea> creates a multiline textbox <label>comments:<br /> <textarea name = "comments" rows = "4" cols = "36"> Enter your comments here. </textarea> </label> 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 kryssrutor ä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. <!-- Fig. 5.4: form2.html <!-- Form Design Example 2 Forms</title> <h1>feedback Form</h1> Please fill out this form to help us improve our site. <form method = "post" action = "/cgi-bin/formmail"> <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> <label>name: <input name = "name" type = "text" size = "25" /> </label> <!-- <textarea> creates a multiline textbox <label>comments:<br /> Sida 15 av 26

16 <textarea name = "comments" rows = "4" cols = "36"> Enter your comments here. </textarea> </label> <!-- <input type = "password"> inserts a <!-- textbox whose display is masked with <!-- asterisk characters <label> Address: <input name = " " type = "password" size = "25" /> </label> <strong>things you liked:</strong><br /> <label>site design <input name = "thingsliked" type = "checkbox" value = "Design" /></label> <label>links <input name = "thingsliked" type = "checkbox" value = "Links" /></label> <label>ease of use <input name = "thingsliked" type = "checkbox" value = "Ease" /></label> <label>images <input name = "thingsliked" type = "checkbox" value = "Images" /></label> <label>source code <input name = "thingsliked" type = "checkbox" value = "Code" /></label> <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </form> 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 enligt 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> Sida 16 av 26

17 <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. Exemplen börjar nu bli så omfattande att det känns bättre att bifoga dem som bilagor i slutet av dokumentet. 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). 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. Sida 17 av 26

18 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 elements specify which pages <!-- are loaded into a given frame <frame name = "leftframe" src = "nav.html" /> <frame name = "main" src = "main.html" /> <noframes> This page uses frames, but your browser does not support them. Please, <a href = "nav.html">follow this link to browse our site without frames</a>. </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> This page uses frames, but your browser does not support them. Please, <a href = "nav.html">follow this link to browse our site without frames</a>. </noframes> Sida 18 av 26

19 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" /> <!-- nested framesets are used to change the <!-- formatting and layout of the frameset <frameset rows = "175,*"> <frame name = "picture" src = "picture.html" /> <frame name = "main" src = "main.html" /> </frameset> <noframes> This page uses frames, but your browser does not support them. Please, <a href = "nav.html">follow this link to browse our site without frames</a>. </noframes> </frameset> Bilagor Exempel Exempel 5.5 <!-- Fig. 5.5: form3.html <!-- Form Design Example 3 Forms</title> <h1>feedback Form</h1> Please fill out this form to help us improve our site. <form method = "post" action = "/cgi-bin/formmail"> <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> <label>name: <input name = "name" type = "text" size = "25" /> </label> Sida 19 av 26

20 <label>comments:<br /> <textarea name = "comments" rows = "4" cols = "36"></textarea> </label> <label> Address: <input name = " " type = "password" size = "25" /></label> <strong>things you liked:</strong><br /> <label>site design <input name = "thingsliked" type = "checkbox" value = "Design" /></label> <label>links <input name = "thingsliked" type = "checkbox" value = "Links" /></label> <label>ease of use <input name = "thingsliked" type = "checkbox" value = "Ease" /></label> <label>images <input name = "thingsliked" type = "checkbox" value = "Images" /></label> <label>source code <input name = "thingsliked" type = "checkbox" value = "Code" /></label> <!-- <input type = "radio" /> creates a radio <!-- button. The difference between radio buttons <!-- and checkboxes is that only one radio button <!-- in a group can be selected. <strong>how did you get to our site?:</strong><br /> <label>search engine <input name = "howtosite" type = "radio" value = "search engine" checked = "checked" /> </label> <label>links from another site <input name = "howtosite" type = "radio" value = "link" /></label> <label>deitel.com Web site <input name = "howtosite" type = "radio" value = "deitel.com" /></label> <label>reference in a book <input name = "howtosite" type = "radio" value = "book" /></label> <label>other <input name = "howtosite" type = "radio" value = "other" /></label> Sida 20 av 26

21 Exempel 5.6 <label>rate our site: <!-- the <select> tag presents a drop-down <!-- list with choices indicated by the <!-- <option> tags <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> </label> <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </form> <!-- Fig. 5.6: links.html <!-- Internal Linking List</title> <!-- <a name = ".."></a> creates an internal hyperlink <a name = "features"></a> <h1>the Best Features of the Internet</h1> <!-- an internal link's address is "#linkname" <a href = "#ceos">go to <em>favorite CEOs</em></a> <ul> <li>you can meet people from countries around the world.</li> <li>you have access to new media as it becomes public: <ul> Sida 21 av 26

22 Exempel 5.7 <li>new games</li> <li>new applications <ul> <li>for Business</li> <li>for Pleasure</li> </ul> </li> <li>around the clock news</li> <li>search Engines</li> <li>shopping</li> <li>programming <ul> <li>xhtml</li> <li>java</li> <li>dynamic HTML</li> <li>scripts</li> <li>new languages</li> </ul> </li> </ul> </li> <li>links</li> <li>keeping in touch with old friends</li> <li>it is the technology of the future!</li> </ul> <!-- named anchor <a name = "ceos"></a> <h1>my 3 Favorite <em>ceos</em></h1> <!-- internal hyperlink to features <a href = "#features">go to <em>favorite Features</em> </a> <ol> <li>bill Gates</li> <li>steve Jobs</li> <li>michael Dell</li> </ol> <?xml version = "1.0"?> <!-- Fig. 5.7: picture.html <!-- Creating and Using Image Maps <title> Internet and WWW How to Program - Image Map </title> <!-- the <map> tag defines an image map <map id = "picture"> <!-- shape = "rect" indicates a rectangular -- > Sida 22 av 26

23 Exempel 5.8 <!-- area, with coordinates for the upper-left -- > <!-- and lower-right corners -- > <area href = "form.html" shape = "rect" coords = "2,123,54,143" alt = "Go to the feedback form" /> <area href = "contact.html" shape = "rect" coords = "126,122,198,143" alt = "Go to the contact page" /> <area href = "main.html" shape = "rect" coords = "3,7,61,25" alt = "Go to the homepage" /> <area href = "links.html" shape = "rect" coords = "168,5,197,25" alt = "Go to the links page" /> <!-- value "poly" creates a hotspot in the shape <!-- of a polygon, defined by coords <area shape = "poly" alt = " the Deitels" coords = "162,25,154,39,158,54,169,51,183,39,161,26" href = "mailto:deitel@deitel.com" /> <!-- shape = "circle" indicates a circular <!-- area with the given center and radius <area href = "mailto:deitel@deitel.com" shape = "circle" coords = "100,36,33" alt = " the Deitels" /> </map> <!-- <img src =... usemap = "#id"> indicates that the <!-- specified image map is used with this image <img src = "deitel.gif" width = "200" height = "144" alt = "Deitel logo" usemap = "#picture" /> <!-- Fig. 5.8: main.html <!-- <meta> tag Welcome</title> <!-- <meta> tags provide search engines with <!-- information used to catalog a site <meta name = "keywords" content = "Web page, design, XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel" /> <meta name = "description" content = "This Web site will help you learn the basics of XHTML and Web page design through the use of interactive examples and Sida 23 av 26

24 instruction." /> <h1>welcome to Our Web Site!</h1> We have designed this site to teach about the wonders of <strong><em>xhtml</em></strong>. <em>xhtml</em> is better equipped than <em>html</em> to represent complex data on the Internet. <em>xhtml</em> takes advantage of XML s strict syntax to ensure well-formedness. Soon you will know about many of the great new features of <em>xhtml.</em> Have Fun With the Site! Exempel 5.9, 5,10 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <!-- Fig. 5.9: index.html <!-- XHTML Frames I Main</title> <meta name = "keywords" content = "Webpage, design, XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel" /> <meta name = "description" content = "This Web site will help you learn the basics of XHTML and Web page design through the use of interactive examples and instruction." /> <!-- the <frameset> tag sets the frame dimensions - -> <frameset cols = "110,*"> <!-- frame elements specify which pages <!-- are loaded into a given frame <frame name = "leftframe" src = "nav.html" /> <frame name = "main" src = "main.html" /> <noframes> This page uses frames, but your browser does not support them. Please, <a href = "nav.html">follow this link to browse our site without frames</a>. </noframes> </frameset> Sida 24 av 26

25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <!-- Fig. 5.10: nav.html <!-- Using images as link anchors Navigation Bar </title> <a href = "links.html" target = "main"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> </a><br /> <a href = "list.html" target = "main"> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /> </a><br /> <a href = "contact.html" target = "main"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /> </a><br /> <a href = "header.html" target = "main"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /> </a><br /> <a href = "table1.html" target = "main"> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /> </a><br /> <a href = "form.html" target = "main"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form" /> </a><br /> Exempel 5.11 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <!-- Fig. 5.11: index2.html <!-- XHTML Frames II Main</title> <meta name = "keywords" content = "Webpage, design, XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel" /> <meta name = "description" content = "This Web site will help you learn the basics of XHTML and Web page design through the use of interactive examples Sida 25 av 26

26 and instruction." /> <frameset cols = "110,*"> <frame name = "leftframe" src = "nav.html" /> <!-- nested framesets are used to change the <!-- formatting and layout of the frameset <frameset rows = "175,*"> <frame name = "picture" src = "picture.html" /> <frame name = "main" src = "main.html" /> </frameset> <noframes> This page uses frames, but your browser does not support them. Please, <a href = "nav.html">follow this link to browse our site without frames</a>. </noframes> </frameset> All exempelkod: (C) Copyright 2002 by Deitel & Associates, Inc. and Prentice Hall. Sida 26 av 26