Inlärningsmål - apachepersonal.miun.seapachepersonal.miun.se/~parfor/DV/Grundl_xhtml.pdfUnder public-html skapar ni en lämplig katalogstruktur som passar er. Start sidan i Start

©Pär-Ove Forss Mittuniversitetet 2005

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


• 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


XHTML

Exempel 1 Alla exempel som vi kommer att titta på är tagna ur boken Internet & Word Wide Webb, How to program.

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <p>Welcome to XHTML!</p> </body> </html>

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 = ”http://www…” 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


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

Sida 4 av 26


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: http://validator.w3.org/ . 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.

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Headers</title> </head> <body> <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> </body> </html>

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 = ”http://www.itm.mh.se/”> 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:[email protected]”> <?xml version = "1.0"?>

Sida 5 av 26

http://validator.w3.org/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Links</title> </head> <body> <h1>Here are my favorite sites</h1> <p><strong>Click a name to go to that page.</strong></p>  <p><a href = "http://www.deitel.com">Deitel</a></p> <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> <p><a href = "http://www.yahoo.com">Yahoo!</a></p> <p><a href = "http://www.usatoday.com">USA Today</a></p> </body> </html>

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 15 – 16 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.

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <p><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


alt = "Java How to Program book cover" /> </p> </body> </html>

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.

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Navigation Bar </title> </head> <body> <p> <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 /> </p> </body> </html>

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


teckenföljt av koden för önskat tecken och avslutar med ett semikolon. Alla specialtecken finns listade i appendix A i kurslitteraturen.

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Contact Page </title> </head> <body>   <p> Click <a href = "mailto:[email protected]">here </a> to open an e-mail message addressed to [email protected]. </p> <hr />  <p>All information on this site is <strong>©</strong> Deitel <strong>&</strong> Associates, Inc. 2002.</p>     <p><del>You may download 3.14 x 10<sup>2</sup> characters worth of information from this site.</del> Only <sub>one</sub> download per hour is permitted.</p> <p>Note: <strong>< ¼</strong> of the information presented here is updated daily.</p> </body> </html>

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


<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Links</title> </head> <body> <h1>Here are my favorite sites</h1> <p><strong>Click on a name to go to that page.</strong></p>  <ul>  <li><a href = "http://www.deitel.com">Deitel</a></li> <li><a href = "http://www.w3.org">W3C</a></li> <li><a href = "http://www.yahoo.com">Yahoo!</a></li> <li><a href = "http://www.cnn.com">CNN</a></li> </ul> </body> </html>

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.

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Lists</title> </head> <body> <h1>The Best Features of the Internet</h1>  <ul> <li>You can meet new people from countries around the world.</li> <li> You have access to new media as it becomes public: 

Sida 9 av 26


  <ul> <li>New games</li> <li> New applications  <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  <ol type = "a"> <li>XML</li> <li>Java</li> <li>XHTML</li> <li>Scripts</li> <li>New languages</li> </ol> </li> </ul>  </li> <li>Links</li> <li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> </ul>  <h1>My 3 Favorite <em>CEOs</em></h1>   <ol> <li>Harvey Deitel</li> <li>Bill Gates</li> <li>Michael Dell</li> </ol> </body> </html>

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 16 – 17 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


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.

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>A simple XHTML table</title> </head> <body>  <table border = "1" width = "40%" summary = "This table provides information about the price of fruit">   <caption><strong>Price of Fruit</strong></caption>   <thead> <tr>  <th>Fruit</th>  <th>Price</th> </tr> </thead>   <tbody> <tr> <td>Apple</td>  <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>   <tfoot>

Sida 11 av 26


<tr> <th>Total</th> <th>$3.75</th> </tr> </tfoot> </table> </body> </html>

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

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Tables</title> </head> <body> <h1>Table Example Page</h1> <table border = "1"> <caption>Here is a more complex sample table.</caption>   <colgroup>   <col align = "right" span = "1" />

Sida 12 av 26


</colgroup> <thead>   <tr>  <th rowspan = "2"> <img src = "camel.gif" width = "205" height = "167" alt = "Picture of a camel" /> </th>  <th colspan = "4" valign = "top"> <h1>Camelid comparison</h1><br /> <p>Approximate as of 9/2002</p> </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> </body> </html>

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


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.

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p>    <form method = "post" action = "/cgi-bin/formmail"> <p>   <input type = "hidden" name = "recipient" value = "[email protected]" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p>  <p><label>Name: <input name = "name" type = "text" size = "25" maxlength = "30" /> </label></p> <p>    <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </p> </form> </body>

Sida 14 av 26


</html>

exempel 5.4 skapas ett mer komplext formulär med flera inmatningsfält. Dettas

å detta formulär använder vi två olika typer av text inmatningsfält. På rad 31 till 33

å rad 36 till 40 skapar vi ett textinmatningsfält som omfattar flera rader. Detta skapas

" rows = "4" cols = "36">

par vi ytterligare en typ av textfält som inte visar vad som skrivs

Ett

I formulär samlar information om vad besökarna tycker om en webbsida. Pskapar vi textruta på samma sätt som i föregående exempel. Pmed hjälp av elementet input type = ”textarea” enlig följande  <p><label>Comments:<br /> <textarea name = "commentsEnter your comments here. </textarea> </label></p> På rad 45 till 48 skain 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 (inputname = "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.annat argument som man kan lägga till är checked = ”checked” vilket medför att rutan är kryssad redan då den visas på sidan.

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "[email protected]" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p>  <p><label>Comments:<br />

Sida 15 av 26


<textarea name = "comments" rows = "4" cols = "36"> Enter your comments here. </textarea> </label></p>    <p><label>E-mail Address: <input name = "email" type = "password" size = "25" /> </label></p> <p> <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> </p> <p> <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </p> </form> </body> </html>

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


<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


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

Sida 18 av 26


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

Bilagor Exempel Exempel 5.5

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "[email protected]" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p>

Sida 19 av 26


<p><label>Comments:<br /> <textarea name = "comments" rows = "4" cols = "36"></textarea> </label></p> <p><label>E-mail Address: <input name = "email" type = "password" size = "25" /></label></p> <p> <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> </p>     <p> <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> </p> <p>

Sida 20 av 26


<label>Rate our site:    <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> </p> <p> <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </p> </form> </body> </html>

Exempel 5.6

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - List</title> </head> <body>  <p><a name = "features"></a></p> <h1>The Best Features of the Internet</h1>  <p><a href = "#ceos">Go to <em>Favorite CEOs</em></a></p> <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


<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>  <p><a name = "ceos"></a></p> <h1>My 3 Favorite <em>CEOs</em></h1> <p>  <a href = "#features">Go to <em>Favorite Features</em> </a></p> <ol> <li>Bill Gates</li> <li>Steve Jobs</li> <li>Michael Dell</li> </ol> </body> </html>

Exempel 5.7

<?xml version = "1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Internet and WWW How to Program - Image Map </title> </head> <body> <p>  <map id = "picture"> 

Sida 22 av 26


  <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" />   <area shape = "poly" alt = "E-mail the Deitels" coords = "162,25,154,39,158,54,169,51,183,39,161,26" href = "mailto:[email protected]" />   <area href = "mailto:[email protected]" shape = "circle" coords = "100,36,33" alt = "E-mail the Deitels" /> </map>   <img src = "deitel.gif" width = "200" height = "144" alt = "Deitel logo" usemap = "#picture" /> </p> </body> </html>

Exempel 5.8

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title>   <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


instruction." /> </head> <body> <h1>Welcome to Our Web Site!</h1> <p>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></p> <p>Have Fun With the Site!</p> </body> </html>

Exempel 5.9, 5,10

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - 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." /> </head>  <frameset cols = "110,*">   <frame name = "leftframe" src = "nav.html" /> <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> </html>

<?xml version = "1.0"?>

Sida 24 av 26


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Navigation Bar </title> </head> <body> <p> <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 /> </p> </body> </html>

Exempel 5.11

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">   <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - 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


and instruction." /> </head> <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> </frameset> </html>

All exempelkod: (C) Copyright 2002 by Deitel & Associates, Inc. and Prentice Hall.

Sida 26 av 26

Documents

Inlärningsmål - apachepersonal.miun.seapachepersonal.miun.se/~parfor/DV/Grundl_xhtml.pdfUnder public-html skapar ni en lämplig katalogstruktur som passar er. Start sidan i Start