ØVELSE 11: TABLES & FORMS (Individuel)

ØVELSE 11: TABLES & FORMS (Individuel) 1. Målsætning I denne øvelse kommer du til at arbejde med to forskellige områder: Forms (formularer) og tables (tabeller) (kapitel 8+9 i LWD.) Du kommer blandt andet til: - At skrive xhtml-koder for simple forms, der kan sende brugergenereret information til din emailadresse. - At variere udseendet for forms med CSS. - At skrive xhtml-koder for opbygningen af tables. - At variere udseendet for tables med CSS. 2. Beskrivelse Dette er en individuel øvelse, som hører til undervisningstemaet: Målgrupper. Øvelsen består af to dele - en Forms-øvelse(3.1) og en Table-øvelse(3.2): Forms-øvelsen: I denne øvelse får du en fornemmelse af, hvordan informationer, der tastes ind på din hjemmeside, kan bearbejdes og sendes videre som data. Du skal som nævnt arbejde med et simpelt eksempel, der sender brugerinformationer til din mailadresse. Tables-øvelsen: En øvelse der skal give dig en forståelse for, hvad tables typisk bruges til, hvordan de er bygget op i XHTML, og hvordan de kan shines op med CSS. 3. Øvelsen Formular og Tabeller Øvelsen er udformet som en videreudvikling af blusebrothers.html 3.1 Forms - formularer som vejen til en interaktiv hjemmeside. Forms benyttes for at gøre hjemmesider interaktive. Som I ved, skal vi på dette kursus kun forholde os til at lave statiske hjemmesider. Men da størstedelen af jer skal have PHP og MySQL på næste semester, er det vigtigt at, I på forhånd har en forståelse af hvad forms kan bruges til, og at I selv kan lave dem i xhtml. Forms består altid af en skal - et formelement- som indeholder alle de andre elementer (eks. kommentarfelter, tekstliner, knapper, checkbokse, dropdown-vinduer med mere.) Blogs består for eksempel af forms når I afleverer urlen til en øvelsesopgave skriver I jo indeni kursusbloggens komentarfelt, som er en formular. Det vil sige hjemmesider, hvor du på en eller anden måde kan tilføje information, bestille, søge osv., indeholder forms. Et godt eksempel er google.dk, som her består af en formular med 'input type= text ', to 'submit-knapper' og 3 'radio buttons' nederst.

3.1.1 Forms - egen løsning Hvis du selv vil prøve kræfter med at designe en formular, og ikke følger øvelsen, der genbruger bluesbrothers.html (afsnit 3.1.2), skal formularen minimum være bygget op af nedenstående: - Formularen skal sendes til dig selv vha. action= mailto:dit_brugernavn@itu.dk method= post - Hele formularen skal være omkranset af et fieldset med en legend. - Minimum 2 tekstfelter - af input-typen 'text' (med lable) - Et kommentarfelt input-typen 'textarea' (med lable) - Enten en eller flere checkbox-elementer, et sæt radio buttons eller en dropdown menu (select), - En submit og en reset knap - I stylesheet skal du som minimum sørge for at input 'type= text '-felterne aligner. - Som altid skal både css og html(xhtml) valideres og valideringsikonerne placeres på siden. God øvelse :) 3.1.2 Formularen skal placeres i blusebrothers (div id= contact ) For dig der vil guides igennem opgaven benytter vi blusebrother.html. Du skal tilføje et kommentarfelt og en mulighed for at tilmelde sig nyhedsbrev. Til sidst vil det ende med at se ca sådan her ud: Start med at: 1. Kopier din oevelses6-mappe (med billeder og styles), kald den: oevelse11. (aktiver mappen: oevelse6, tryk ctrl+c derefter ctrl+v omdøb kopien til: oevelse11) 2. Åbn blusebrothers.html i Notepad/PSPad alt efter, hvad du bedst kan lide at bruge. 3. Indsæt en ny div: <div id= form >...</div> inden i den eksisterende <div id= contact > </div> i bluesbrothers.html. 3.1.3 Formularens ydre skal og ramme En formular kan indeholde uendeligt mange formularelementer, det der gør det til en formular er det omsluttende formelement. Derudover er det godt at afgrænse formularen med en ramme og placere de andre formelementer i en liste. 1. Indsæt formulartagget med action (hvor bliver indholdet sendt til og behandlet) og method (hvordan bliver det sendt), indeni form div en contact. <form action="mailto:dit_brugernavn@itu.dk" method="post"></form> Dette vil sende de indtastede oplysninger til din mail. 2. Så skal du lave et fieldset indeni (en ramme om formularen) med en legend (navngivning af

formularen, der vises i rammen) <fieldset> <legend>comments and/or Suggestions</legend> </fieldset> 3. Lav en uordnet liste (<ul>...</ul>) med 5 listeelementer (<li>...</li>) placer listen i fieldset efter <legend>...</legend>. Placerer formularelementerne i listen - listen er sådan set ikke strengt nødvendig, men den hjælper rent grafisk med at holde layoutet på plads og kan jo efterfølgende styles i CSS. 3.1.4 De aktive formularelementer i formularen: Nu skal vi have defineret nogle forskellige input-typer. For at få det til at se pænest ud, er det også smart at putte dem ind i listeelementer i en uordnet liste. Desuden definerer vi et labelelement for hvert inputelement, hvilket er med til at øge tilgængeligheden. Vær ikke bekymret for det rodede layout, mens du bygger formularen op, det fikser vi til sidst med CSS. Vores kontaktformular vil indeholde: - 2 indtastningsfelter til hhv. navn og email - 1 stort kommentarfelt - 1 afkrydsningsfelt til accept af nyhedsbrev - 2 knapper - en til at indsende og en, der nulstiller indtastningen. 3.1.4.1 name og e-mail felt - 'input type= text ' Du skal først lave to de to indtastningsfelter med tilhørende label - et til brugerens navn og et til hans/hendes e-mailadresse. Felterne placeres efter hinanden i første og andet listeelement (<li>...</li>) i den uordnede liste. XHTML-koden for navnefeltet: <label for="form-name">name:</label> <input type=" text" name="name" size="30" maxlength="50" id=" form-name" /> Skriv herefter koden til emailfeltet med 'for' og 'id' som form-email - 'name' navngives email. Bemærk! Et formular har altid en unik attribut - som regel id, nogle gange value. Label knyttes til formularen med attributten for og er identisk med id - dvs. for=id. 3.1.4.2 kommentarfelt - 'textarea' I tredje listeelement (<li>...</li>) skal der være et kommentarfelt i form af et textarea med tilhørende label. Labels for og texareas id skal som nævnt før have identiske navne (eks. form-comment.) Textarea skal også have et passende 'name' (eks. comments.) Kommentarfeltet skal have et antal rows (altså rækker) eks. 4 og cols (kolonner) eks. 30. Udfyld skabelonen nedenfor: <label for="">comments and suggestions:</label> <textarea name=" " rows="" cols="" id="></textarea>

3.1.4.3 til- og fravalg 'input type= checkbox ' I fjerde listeelement skal afsender have mulighed for at vælge et nyhedsbrev ved at sætte flueben i det lille felt, der kaldes en checkbox. Nu skal input type derfor være 'checkbox'. Navngiv den newsletter og sæt værdien til yes. Udfyld skabelonen ud fra ovenstående oplysninger: <input type=" " name=" " value=" " /> Yes! Send me the TBB newsletter. 3.1.4.4 send og reset Til sidst skal vi have to knapper - en til at sende formularen og en, der kan fjerne indtastningerne. Begge skal placeres i samme listeelement. Knapperne er simple - de skal have hver sin 'input type'- henholdsvis submit og reset og værdierne Send by email og Reset. Lav de to felter ud fra ovenstående oplysninger: <input type=" " value=" " /> 3.1.5 Styling - CSS Så er formularen på plads og bør se cirka sådan her ud, før du styler det: Kommentarfeltet har fået den længde og bredde, du har angivet. Du kan evt. prøve at angive andre værdier for rows og cols, og se hvordan størrelsen på feltet ændrer sig. 3.1.5.1 tilføj ekstra stylesheet Nu skal du style din formular, men i stedet for at fylde mere ind i dit eksisterende style.css fra oevelse6, laver vi et nyt - kald det style_forms.css og tilføj det under dit style link i <head>...</head>: <link href="style_forms.css" rel="stylesheet" type="text/css" /> 3.1.5.2 justering af form, label, liste og fieldset. Som minimum skal du style form, label, fieldset og den uordnede liste: id form: skal have en top- og bundmargin på 0 og højre og venstre margin på 3em, (eller så formularen passer med sidens andet indhold). label: skal floate left, og gives en width på 8em (dette aligner formularens tekstfelter)

form li: skal styles så den ikke har bullits (list-style), og tilføjes en padding på 2 px, så der bliver lidt luft mellem formularelementerne fieldset: skal have en border som er identisk med phone og mail (kopier fra style.css), til sidst skal du ændre margintop til minus 10 px. Ved aflevering skal formularen som minimum være stylet så det ser sådan her ud. Hvis du har tid, kan du selv lege videre med at style formularen. Husk dog at der også er en tabel, der skal laves.

3.2 Tabeller systematisering af information Tables er, som du nok allerede har fanget, en måde at systematisere informationer på hjemmesiden, som minder om de tabeller, man kan lave i et Word-dokument eller excel-ark. Tables består grundlæggende af rows (rækker) på den vandrette led og columns (kolonner) lodret. Vi holder os til de engelske betegnelser, da det er dem, der refereres til i tags attributterne og som du støder på i grundbogen og i undervisningen i øvrigt. Indholdet og antallet af rows og columns betinges af xhtml-koden, mens indholdets placering, skrifttyper, farver mm. som altid styres af CSS. Bemærk at selvom du allerede har hørt og læst om, hvordan tables før i tiden er blevet brugt til opsætning af hele hjemmesider, er det ikke det, du skal gøre! Det styrer du langt bedre og mere overskueligt med CSS. Her er et par eksempler på tables du sikkert kender fra nettet (bemærk at de begge har formularer øverst):

3.2.1 Tables egen løsning Hvis du ønsker at lave din egen tabel i stedet for at følge opgaven, skal den som minimum bestå af: 1. En tabel med minimum en colspan og en rowspan (ingen styling i html). 2. I stylesheet skal tabellens bredde defineres i forhold til et baggrundsbillede og border og border collapse skal også defineres. 3. Både XHTML-koden og CSS skal valideres og valideringsikoner sættes ind på siden. Hvis du ønsker at lave tabellen på blusebrothersiden, laver vi en tabel i form af en diskografi af blusebrothersalbums, som følger i opgave nummer 3.2.2. 3.2.2 Opret en ny div med id = discography + tilhørende link i menu 1. Nederst i blusebrothers.html <body>...</body> skal du indsætte en ny div med id discography. 2. I div'en skal der også være en forklarende tekst sat ind i en paragraf, som placeres før tabellen: <h1>discography</h1> <p>here's the discography of The Blues Brothers' main albums according to all music</p> 3. Nederst i den div skal der selvfølgelig være et link tilbage til toppen af siden: <p><a href="#header">back to the top</a></p> 4. Øverst på siden i menuen skal der tilføjes et link ned til discography: <li><a href="#discography">discography</a></li> 3.2.3 forberedelse på at lave en tabel Når tabellen er færdig vil den se ca sådan her ud:

Tabellen vi skal lave har som grundstruktur 9 rækker og 3 kolonner, men som det ses på billedet ovenfor, så skal nogle af cellerne spænde over flere rækker (rowspan) eller kolonner (colspan). Vi bruger følgende 4 elementer til opbygning af tabellen: <table> <th> (table head) <tr> (table row) <td> (table data) XHTML-koden bag en tabel kan godt virke lidt overvældende i starten, så for at få et overblik, kan det være en god idé at håndtegne tabellen først. Så gælder det ellers om at holde tungen lige i munden, for det er vigtigt at sørge for, at de enkelte rækker, felter og indhold bliver rigtigt stillet op. Dette er en god øvelse i at neste kode, hvilket for overskuelighedens skyld også bør fremgå visuelt i jeres kode. Start med at skrive koden for tabellens yderste skal, nemlig elementet <table></table> Tilføj en summary til glæde for hørehæmmede: <table summary="a listing of the main albums of The Blues Brothers, with information about year, title and label"> <tr> <th colspan= 3 ><h2>the Blues Brothers Main Albums</h2></th> </tr> </table> Tilføj derefter række for række (<tr></tr>), så der til sidst er 9 styk med tilhørende data (<td></td>) - dataindholdet kan du se listet i tabellen herunder. Når du er færdig, skal dataceller og spans gerne se ca. sådan her ud i browservinduet - ikke kønt eller videre praktisk:

3.2.4 Styling af tabel Når man arbejder med CSS i relation til tabeller, er det vigtigt at notere sig, at der er forskellige arveregler ned gennem tabelhierarkiet (<table>,<tr>,<th>/<td>) afhængig af hvilken egenskab, man vil definere. Hvis man eks. definerer en rød tekstfarve vha. css-selektoren table, så vil hele tabellens tekst blive rød. Men definerer man derimod en border i selektoren table, vil denne kun figurere rundt om hele tabellen. De enkelte rækker og celler arver altså egenskaber fra table som eks. 'font' og 'color'. De vil derimod ikke arve egenskaber som f.eks. 'border', 'margin' og 'padding'. Disse egenskaber skal defineres specifikt for den enkelte celletype eller den enkelte celle. 3.2.5 Styles i nyt stylesheet Ligesom i formularøvelsen laver vi et nyt stylesheet - kald det styles_table.css og placer det sammen med de andre stylesheets i <head>...</head>: <link href="styles_table.css" rel="stylesheet" type="text/css" /> 3.2.6 Baggrund samme som #lyrics #discography { /* Kopieret fra style.css #lyrics*/ background: #E5E5E5 url(billeder/bb_bottomcollage.gif) no-repeat; background-position: right bottom; padding: 1em; margin-bottom: 1em; 3.2.7 Tilføj følgende styling og tjek efter i browservinduet, hvordan tabellen forandrer udseende eftersom du tilføjer styles: table{ width:53%; border-collapse:collapse; margin:0; border:1px solid #C7CCD4; text-align: left;

th, td { border:1px solid #C7CCD4; color: #333333; vertical-align: top; th { td { th h2{ font-size: 13px; font-size: 11px; padding: 0 7px; font-size: 15px; color: #333333; margin:1px; padding: 0 7px; background-color:#c7ccd4; 4. Aflevering Du skal aflevere et formular og en tabel: Formular øvelsen skal som minimum bestå af: 1. I xhtml: En formular som postes som mail til dig selv. Formularen skal i øvrigt bestå af: Et fieldset med en legend, Minimum 2 en lines tekstfelt af typen text m label. Et kommentarfelt med label. Enten; en eller flere checkbox elementer, et set radio buttons eller en dropdown menu(select), En submit og en reset knap. 2. Stylesheet skal som minimum sørge for at input felterne af typen text aligner. Table øvelsen skal bestå af: 1. I html skal der laves et table med minimum en colspan og en rowspan. 2. I stylesheet skal der defineres tabel bredde i forhold til et baggrundsbillede og definer border og border kollaps. Som altid skal siden både css og html valideres og valideringsmærkerne placeres på siden. Post øvelsen som link til oevelse11 på bloggen, senest onsdag 19. Nov. kl. 20