HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside

Transkript

1 Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside 1. Lidt om hvad du har lært Du har i øvelse 1 lært at lave en HTML5-side med afsnit, overskrifter og et billede. Du har også lært at lave et link til en anden hjemmeside, bruge lister til at ordne indhold og at validere din kode som et vigtigt afsluttende skridt. Start med at læse hele øvelsesvejledningen igennem, så du ved, hvilke trin du skal igennem. Bemærk at øvelsen skal løses individuelt. 2. Målsætning 2.1. Hvad vil dagens øvelse dække I dag skal du lære at arbejde med opbygningen af en hjemmeside. Der skal altså laves endnu en underside. Derudover skal du lære lidt mere om links at lave mail- og billedelinks. Du skal også lære at mærke grundlæggende sideindhold op med header- og aside-tags. Desuden skal du lære at gruppere overskrifter og links til at lave din første on-page menu. Udover at organisere indhold og navigation på selve hjemmesiden på en overskuelig måde for brugeren (f.eks. ved punktopstillinger og menuer), er det også vigtigt at holde orden i de filer, som du arbejder med på hjemmesiden både for din egen skyld men også for dem, der måske senere skal arbejde videre med at udvikle den hjemmeside, du arbejder på. Derfor indeholder øvelsen også lidt træning i fra starten at tænke over, hvordan du placerer filerne i forhold til hinanden i din projektmappe og, hvordan du navngiver filerne. Sidst vil du få en introduktion til tabeller. Tabeller bruges til at præsentere data, lidt som du måske kender det fra Excel eller et andet regnearkprogram. 3. Beskrivelse I denne øvelse skal du arbejde videre med den personlige hjemmeside, men det er vigtigt du ikke skriver videre i de samme dokumenter som i øvelse 1. Øvelse 1 skal stadig være tilgængelig. Når du begynder at løse øvelse 2 skal du oprette en mappe til opgaven - kald den f.eks. opg2 - og kopiere de nødvendige filer over i mappen (index.html og cv.html). På den måde kan vi stadig rette den første øvelse, selvom i arbejder videre med øvelse 2. I øvelsen skal du arbejde med:

2 At mærke indhold op med header-, og aside-tags. Gruppere overskrifter med hgroup-tagget til en on-page menu. At tilføje en underside med noget mere tekstindhold f.eks. om dig selv, en interesse eller anden fyldtekst. At tilføje link punkt i menuen til den nye underside. Menuen skal gå igen på tværs af dine HTML-dokumenter. At lave et link til din mailadresse, så besøgende kan skrive til dig ved at klikke på linket. At benytte et billede som link. 4. Koden 4.1. Placer underside og billeder i undermapper og tilret links Sidste gang fik du kodet en forside og en CV-side. Du fik også lavet en mappe til billeder - og det er godt, for det gælder om at holde god orden i dine dokumenter fra starten. I begyndelsen vil det måske føles lidt overdrevet, fordi du ikke har så mange filer, der skal holdes orden i. På sigt, når de projekter, du arbejder med, bliver større, vil det dog være rigtig rart med god orden, så du selv (og dem, der skal overtage vedligeholdelse og udvikling af hjemmesiden) kan finde rundt i filerne. I øvelse 1 prøvede du at lave en mappe til dine billeder. Nu skal du også lave en til de forskellige afdelinger af dit site - dine undersider. Du kan evt. også vælge at lave en mappe til billeder specielt til undersiderne det er op til dig. Det vigtigste er, at du finder et system, som er logisk og intuitivt, og at du er konsekvent i brugen af dette system, så det er nemt at finde rundt i dit site-materiale. Husk at rette alle de relative links til i de enkelte html-dokumenter, så browseren kan finde filen i den rette mappe. Som du husker er formen for dette: <a href= mappe_navn/fil_navn.html >Linktekst der vises i browseren</a> Dette er, hvis du skal sende browseren ned i en mappe fra den position, du står i nu. Hvis du derimod skal fra den position, du står i nu nede i en mappe, og et mappeniveau op, skriver du '..' foran skråstregen for at sige 'gå ud af den mappe, jeg er i nu', hvorefter du angiver /filnavn på samme vis som ovenfor: <a href=../fil_navn.html >Linktekst</a> Når du begynder at løse øvelse 2 skal du oprette en mappe til opgaven - kald den f.eks. opg2 - og kopiere de nødvendige filer over i mappen (index.html og cv.html). På den måde kan vi stadig rette den første øvelse, selvom i arbejder videre med øvelse Tilføj link til at sende en mail På dit digitale visitkort skal man selvfølgelig også kunne finde dine kontaktoplysninger, herunder din mailadresse. Og den skal du lave som et link, så man kan klikke på den og sende en mail til dig nemt.

3 Et maillink har samme form som et almindeligt link, hvor du bruger <a href=... >...</a>, men i stedet for en URL eller et filnavn skriver du mailto:mailadresse i anførselstegnene. For eksempel <a href= mailto:stg@itu.dk >. Som linktekst kan du vælge at skrive selve adressen, eller du kan skrive en anden tekst, fx 'skriv en mail til mig'. Her har vi lavet et lille kontakt-afsnit på forsiden. Læg mærke til, at man kan se mailadressen for neden i browseren, hvis man holder musen over linket, ligesom du med almindelige links kan se den adresse, der linkes til samme sted. Tilføj kontaktoplysninger og maillink på din hjemmeside Tilføj et link, som er et billede Du kan også vælge at bruge et billede som link, og det skal du selvfølgelig også prøve. Lav f.eks. et link til en af de andre studerendes hjemmeside med et billede af vedkommende eller et link til ITUs hjemmeside, Facebook eller LinkedIn ved at bruge et logo. (Du kan som regel gemme logoer som billeder ved at højreklikke på dem på den pågældende hjemmeside). Husk nu at gemme det billede, du vil bruge i den rette mappe! Formen for et billedlink er igen til at genkende. Du skriver <a href=... > som med et hvilket som helst andet link, men i mellem <a...> og lukketag'et </a>, hvor du normalt angiver en linktekst, sætter du i stedet et billede ind. Som du prøvede i øvelse 1, henviser du til et billede ved at angive <img src= mappe/billede.jpg alt= alternativ tekst, hvis billedet ikke vises />. Du kan se et eksempel herunder. Hvis man holder musen henover billedet kan man se linkadressen nederst i browseren, ligesom med mailadressen: 4.4 Opret ny underside, hvor du fortæller om dig selv Nu skal du oprette endnu en underside ud fra din skabelon - du kan også gemme din CV-side med et nyt navn og slette det indhold som skal udskiftes. Kald den f.eks. Om mig i titlen og gem den som ommig.html. Tilføj også menuen, som du lavede i øvelse 1, på din nye side.

4 Tilpas menuen på alle sider, så den kommer til at indeholde et link til Om mig. Husk at holde tungen lige i munden når du opdaterer din menu - det kan godt være svært at få links på alle tre sider til at virke ordentligt. På nuværende tidspunkt er din menu header på din side. For at markere dette, skal menuen omfattes af et header-tag, som i eksemplet nedenfor. Senere hen bliver der tilføjet mere indhold til din header. Koden til din nye side skulle gerne se nogenlunde ud som herunder: <!DOCTYPE html> <html lang="da"> <head> <meta charset="utf-8" /> <title>mine interesser</title> </head> <body> <header> <nav> <ul> <li><a href= index.html >Forside</a></li> <li><a href= cv.html >Mit CV</a></li> <li><a href= >Kommende menupunkt</a></li> </ul> </nav> </header> <article> Sidens indhold </article> <footer> Validator-link </footer> </body> </html> Du skal nu tilføje noget tekst og eventuelt nogle billeder på din nye side. Teksten kan handle om dig selv, dine interesser eller et andet emne. Brug ikke mere end minutter i øvelsestimen på teksten. Du behøves altså ikke skrive teksten selv, men må gerne kopiere fra et sted på nettet. Omfanget af teksten skal være ca. ½-1 A4-side og bestå af mindst 3 afsnit à mindst 5 sætninger med overskrifter. Opmarker teksten med de nødvendige semantiske elementer, du lærte at bruge i øvelse 1. I løbet af næste uge vil du lære at designe udseendet af dine sider. Så tænk ikke over, hvis det ikke helt ser ud, som du gerne vil have. Nu skal vi tilføje noget mere indhold til din nye side i form af endnu et nyttigt redskab i html, en tabel.

5 4.5. Opret en tabel med fx dine yndlingsfilm Tabeller er, ligesom lister, gode til at gøre information overskuelig for modtageren. De er særligt velegnede til at vise informationer der har sammenlignelige karakterer, for eksempelvis priser, udgivelsesår, og andre specifikationer. Her er det tanken, at du skal lave en simpel tabel over fem af dine yndlingsfilm, med filmnavne, årstal, samt hvor mange gange du har set filmen. Hvis du har lyst til at lave en tabel over noget andet, f.eks. over dine seneste løbeture, er du velkommen til det. En tabel består grundlæggende af 4 elementer: <table> Det element der definerer selve tabellen. <tr> (table row) <th> (table head) <td> (table data) De vandtrette rækker i tabellen. Celler til overskrifter. Laver lodrette celler til data (opdeler de vandrette rækker). Skrevet i HTML5 vil det grundlæggende princip se således ud: <table border="1"> <tr> <th>header 1</th> <th>header 2</th> </tr> <tr> </tr> </table> <td>row 1, cell 1</td> <td>row 1, cell 2</td> Der er tilføjet en border på 1, for at give et bedre overblik mens vi arbejder med tabellen. I en browser vil den sandsynligvis ligne dette: Da din tabel skal have 5 vandrette rækker, en til hver film, med 3 celler i hver, er du nødt til at indsætte flere <tr> med tre <td> i hver, samt en ekstra <th>. HUSK, at det er tilladt at genbruge koden du allerede har i stedet for at skulle skrive det hele fra bunden. Men hold tungen lige i munden. Det kan evt. være en ide at tegne tabellen i hånden først, for at få bedre overblik, så rækker, celler, og data bliver placeret rigtigt. Dette er en god øvelse i at neste kode, hvilket for overskuelighedens skyld også bør fremgå visuelt i din kode.

6 4.6. Brug af <aside> til beslægtet indhold Du kan bruge aside til at opmarkere indhold, der er beslægtet med resten af indholdet i en artikel eller på en side. Det bliver ofte brugt til lokale menuer, men du kan f.eks. også bruge det til din tabel over yndlingsfilm eller en faktaboks over dit emne, som du kan se i kodeeksemplet her: <aside> <h1>facts om danske navne</h1> <ul> <li>i 2011 boede der Sigurd er i Danmark.</li> <li>danmarks mest populære navn er Anne ( januar 2012).</li> <li> Jensen hedder i alt til efternavn.</li> <li>i 1988 skulle drenge helst hedde Kasper og piger skulle helst hedde Camilla.</li> <li>flest kvinder skiftede navn i I alt kvinder fik nyt fornavn.</li> </ul> <p><strong>kilde:</strong><cite><a href= >Danmarks Statistik</a></ cite></p> </aside> Lav en faktaboks eller opmarker allerede eksisterende indhold på din side, der kan stå alene men er beslægtet med resten af indholdet på siden. Find eventuelt inspiration i grundbogens kapitel 3 til, hvad du kan bruge <aside> til Validering af site Til sidst skal du som i øvelse 1 validere dit site vha. validator.w3.org, så du kan være sikker på, det overholder HTML5 standarden, som er defineret af World Wide Web Consortium (W3C). Vi gentager her en del af vejledningen fra sidste gang, hvis nu du har glemt det :-) Vær opmærksom på, at du skal validere hver enkelt af dine undersider én ad gangen. Når du indtaster URL'en til din forside validerer den KUN forsiden og ikke de tilknyttede undersider, selvom de er forbundne via links. Derfor skal du også validere hver enkelt underside ved at indtaste URL'en for dem en ad gangen, for at få tjekket hele dit site. Gå ind på validator.w3.org og indtast URL'en til den side, du vil validere ( dit_brugernavn/). Klik på Check. Sitet tjekker din kode og vender oftest tilbage med en rød side og teksten "Errors found while checking this document as HTML5!". Nedenunder vises en en liste over de fejl, den mener at kunne finde, og så må du starte fra en ende af og rette fejlene. Det kan godt i starten virke lidt overvældende, hvis man har mange fejl-meddedelser, men tager man en dyb indånding, kan man som regel godt tyde ud af fejlmeddelelserne, hvad der er galt. Og så skal man huske på, at en fejl øverst i dokumentet sagtens kan medføre 20 fejl længere nede. Når den øverste fejl er rettet, forsvinder de andre muligvis af sig selv. Er koden derimod i orden efter standarderne (enten i første hug eller efter rettelser) vil validatoren vise en grøn tillykke-side med teksten "This document was successfully checked as HTML5!".

7 Husk at validere alle dine sider ved at skrive linket til dem hver især ind i validatoren. Når det er lykkedes dig at få valideret dine sider korrekt, skal du kopiere adressen fra linket nederst på validator-siden og indsætte det som et link (<a>) i dine html-filer. Eksempelkode på validator-link <footer> <p><a href=" uri=http%3a%2f%2fwww.itu.dk%2fpeople%2fdit-brugernavn%2f">validator</a></p> </footer> Når man som bruger klikker på linket på dine sider, vil man blive sendt videre til validatorservicen, som viser resultatet af valideringstjekket; at siden er opbygget af valid HTML5-kode efter den pågældende standard. 5. Aflevering 5.1. Deadline Din deadline for aflevering er tirsdag den 21. februar 2012 inden kl Du har altså en lille uge til at poste din hjemmesides link ( på kursus-bloggen, på den underside der hører til din hjælpelærer. Du poster bare linket som en kommentar Tjekliste Af den hjemmeside, du afleverer, skal det være synligt, at du har været igennem hele denne øvelse. Inden du afleverer på bloggen bør du derfor gennemgå denne tjekliste for at sikre at: sitet har mindst to undersider ( cv og om mig ). der er en tabel på en af undersiderne, om dine yndlingsfilm (eller noget andet der interesserer dig). undersiderne og forsiden er tilgængelige fra en menu, som er lagt i et header-tag, og går igen på alle siderne. noget indhold er organiseret i et aside-tag. undersider og billeder på dit site er organiseret i undermapper. der er mindst et maillink på dit site. der er mindst et billedelink på dit site. koden på alle dine (under)sider validerer og har fået indsat en validator-knap på hver side.