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

Transkript

1 Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS 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. 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. I dag skal du også lære at arbejde med formatering af tekst på din hjemmeside, og du vil derfor stifte dit første bekendtskab med CSS. Øvelsen handler dels om at lære at benytte CSS i det hele taget til at style dine HTML-sider og dels om at afprøve nogle af de mange muligheder som CSS giver for at anvende forskellige typografier, skriftstørrelser, kanter, farver m.m. Dermed får du en fornemmelse af, hvor forskellige visuelle udtryk man kan opnå gennem ganske simple virkemidler, og hvor meget indflydelse de har på brugerens overblik over, og tilgang til indholdet på en hjemmeside. Du har allerede i sidste øvelse udarbejdet en underside til din hjemmeside, som på en eller anden måde handler om eller afspejler dig som (privat) person. En god tekst handler både om, hvordan teksten er skrevet, men også om, at teksten er læsevenlig og bliver opstillet på en måde (i afsnit, med overskrifter, og et tydeligt hierarki), som passer til webmediet, hvor folk typisk skimmer tekstligt indhold og søger det hurtige overblik. Altså skal du i denne øvelse arbejde med:

2 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: At mærke indhold op med header-, og aside-tags. 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. At benytte CSS i form af et eksternt stylesheet til at styre udseendet af dine HTML-sider. At benytte CSS til at præsentere din tekst passende ved at afprøve forskellige former for tekstformatering og farver. I øvelsen fokuseres der på den nye side ommig.html, men du skal sørge for, at alle dine sider bruger det stylesheet, som du laver igennem denne øvelse.

3 4. Koden HTML 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.

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

5 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> </ul> </nav> </header> <article> Sidens indhold </article> <footer> Validator-link </footer> </body> </html> <li><a href= index.html >Forside</a></li> <li><a href= cv.html >Mit CV</a></li> <li><a href= >Kommende menupunkt</a></li> 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 bruge lorem ipsum tekst. 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.

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.

7 5. Koden CSS 5.1. Skriv tekst om dig selv Du har som nævnt allerede lavet mindst to undersider i form af cv.html og ommig.html. Før du begynder skal du på din side om dig selv have en sammenhængende tekst. F.eks. om dine hobbyer, ferier, venner, familie osv. - det er i virkeligheden helt op til dig selv. Omfanget skal være mindst 3-4 tekstafsnit (ca. en halv A4-side). Du må gerne vælge at tilføje, rette eller ændre indholdet, du allerede har produceret i tidligere øvelser Opret stylesheet Der findes flere forskellige måder at arbejde med CSS på: Som intern styling angivet i selve HTML-filen, eller som et eksternt stylesheet. Vi kommer på kurset primært til at arbejde med den eksterne version. Dette er mest hensigtsmæssigt, fordi man med det eksterne CSSdokument har muligheden for at tilknytte det til flere HTML-dokumenter. Når man så vil ændre noget i layoutet, så skal det kun rettes en gang i CSS-dokumentet i stedet for i 20 HTMLdokumenter. Man sparer altså både tid, bevarer overblikket og kan nemt vedligeholde et konsistent design. Ideen med CSS er altså at indhold og struktur (HTML) og præsentationen (CSS) holdes adskilt, hvor man før i tiden ofte havde begge dele sammenblandet i HTML'en. Det kan virke lidt overvældende allerede nu at skulle forholde sig til et nyt kodesprog med en ny syntaks, men opbygningen af CSS er meget simpel. Man gemmer blot filen med en '.css'-extension, f.eks. style.css, (stadig med brug af tegnsættet utf-8). Syntaksen er ikke så indviklet - man skal huske på at CSS består af regler, der definerer, hvordan de enkelte tags i HTML'en skal fortolkes af browseren. Den generiske CSS-formel ser således ud:

8 Selektoren angiver, hvilket HTML-element, som en egenskab gælder for. Egenskaben angiver det du gerne vil ændre, f.eks. farve. Værdien angiver hvordan det skal se ud, f.eks. at farven skal være rød. Egenskab og værdi adskilles med et kolon og et mellemrum, og efter værdien afsluttes med et semikolon. Du kan skrive flere egenskab-værdi-par efter hinanden inden i de krøllede parenteser. Nedenfor ses et eksempel som gør den vigtigste overskrift rød: #ff0000 er farvekode for rød. Nogle farver kan man også angive med keywords, f.eks. red, blue, orange (se eksemplet herunder). Man kan både definere flere selektorer og egenskaber/værdier på en gang: h1, h2, h3 { color: #ff0000; background-color: black; font-family: Verdana, Arial, sans-serif; } Denne CSS-kode vil således medføre, at browseren vil vise de tre øverste overskrifter i hierarkiet, h1, h2 og h3, med rød skrift på sort baggrund. Derudover er det specificeret, hvilken skrifttype, der skal anvendes. Det specielle er, at der er angivet tre værdier, og det betyder, at afsenderen helst vil have at browseren viser overskrifterne med skrifttypen Verdana. Hvis det ikke er muligt på brugerens computer, så er næste valg Arial, og til sidst er værdien sans-serif angivet, som betyder 'en skrift uden fødder'. Det er altid godt at angive en generel font-family til sidst, som f.eks. sans-serif, hvis modtagerens browser ikke har de specifikke skrifttyper. Når du vælger skrifttype kan du således sikre dig, hvilket alternativ browseren vælger, hvis en bruger ikke har den skrifttype, du gerne vil bruge, installeret. Men hvis du vil være sikker på, at din bruger ser den helt rigtige skrifttype, kan du også embedde skrifttyper. Det gør du ved at uploade skrifttypen til din server gennem et ftp-program og her efter deklarationen. Du kan læse mere her: css3_pr_font-face_rule.asp Du kan hente gratis skrifttyper klar til at embedde her: Når en skrifttype er embedded, så kan du bruge den i din CSS font-family, som normalt. Når først skrifttypen er tilknyttet CSS dokumentet, så skriver du CSS-koden som normalt. En anden metode til at anvende skrifttyper, som brugeren ikke har på sin computer, er at linke

9 til en skrifttype i sit HTML-dokument på samme måde som man linker til sit CSS-dokument. Herefter kan skrifttypen anvendes i ens CSS-dokument. Denne metode anvendes når man vil anvende en skrifttype der ligger eksternt. F.eks. har Google - på webfonts#chooseplace:select - en række skrifttyper som man frit kan linke til og anvende. Opret dit eget stylesheet og angiv nogle værdier for overskrifter som herover: - Åbn et nyt dokument i din editor - Gem det som style.css samme sted, som du har din index.html-fil - Skriv nogle værdier som i eksemplet herover - Gem filen (ctrl+s) Bemærk at der modsat et HTML dokument ikke skal stå andet i dokumentet end ens CSSstyling. Et CSS-dokument skal nemlig ikke åbnes og lukkes med bestemte tags som HTML skal, og man skal heller ikke angive metaoplysninger af nogen art. Man starter bare med at skrive sin CSS-kode som det første i dokumentet. CSS udvikler sig hele tiden og for tiden er CSS version 3 ved at overtage for version 2. Med CSS3 bliver det lettere at lave en masse spændende styling, så som at arbejde med gennemsigtighed, skygger og animationer. Det er ikke alle browsere der er lige gode til at tolke CSS3 - endnu - og man må derfor altid teste sin kode i forskellige browsere og tage hensyn til funktioner, som ikke er implementerede Dette gøres f.eks. ved at lave en alternativ style til gamle browsere. CSS - gør det let at style sin HTML kode på mange måder - flere end det giver mening at inkludere i en øvelser, og derfor skal I endelig læse mere om CSS muligheder. Det kan i f.eks gøre på og Link stylesheet og HTML-dokumenter sammen For at få browseren til at vise din styling, skal du først linke stylesheetet til dine HTML-filer. Det gør du ved at tilføje en linje under dit meta-tag i dine HTML-filers head. Den linje du skal tilføje er den, du ser herunder, markeret med gult. Læg mærke til, hvor den er placeret i koden inde i <head>...</head>:

10 Du angiver stien til dit CSS på samme måde, som når du har linket mellem dine andre filer. Her ligger stylesheetet i roden sammen med index-filen. Men du skal være opmærksom på, at linket til style.css forholder sig til det mappeniveau f.eks. din cv-fil ligger i. Det betyder bare, at ligger din index-fil og din cv-fil ikke i samme mappeniveau, så skal du linke forskelligt til style.css i de to filer. Når du har tilføjet denne linje i alle dine HTML-filer, så prøv at opdatere siderne i browseren og se resultatet. Nu bruges din styling på alle dine sider Article, section, header, div, id og class i HTML Du kan style din kode udfra de tags, du har brugt til at strukturere din HTML kode med. Ved at bruge tagsne <article> <section> <header> <footer> <nav> osv. på en meningsfuld måde, kan du nu let style din HTML side. Du kan på den måde lave styles som formaterer alt indhold opmarkeret med f.eks. tagget <article> ved at bruge article som selektor. Du kan også style tags som <h1> og <h2> og <p>. Hvis du har brug for at ramme et stykke indhold på din side endnu mere specifikt kan du give det en class eller et id. På den måde kan du f.eks. give den første <h1> på din side et særligt udseende ved at give den en class eller et id: <h1 class= firstheading >. Undgå æ,ø,å, mellemrum og andre sjove tegn i dine classes og id er. Et id må kun må optræde ét sted i dit HTML-dokument. Har du indhold som deler karakteristika, f.eks. adresser eller egenavne, skal du bruge span tag et <span></span> og class (i stedet for id). Eksemplet med egenavne vil se sådan ud: <span class= egenavn >Jacob Nielsen</span> - og du kan så skrive alle de egenavne, der nævnes i dit dokument med denne opmarkning. Altså er id en unik identifikator, som kun kan findes et sted på hver side. Class definerer omvendt en klasse, en samling, af elementer, som deler fællestræk, hvilket gør at klassen kan bruges gentagende gange i samme dokument.

11 Generelt skal man sørge for, at have strukturen i sit HTML-dokument på plads, før man kaster sig over CSS'en. Når man går i gang med CSS, er div og span rigtige nyttige, da du bruger id og class til at angive styling af disse elementer i din CSS. Derfor skal du nu starte med at gennemgå dit HTML dokument, ommig.html, og sørge for at du har brugt de rigtige tags og evt. tilføje <div>, <span>, classes, og id er som du synes er passende. Det vil være en fordel, hvis du benytter samme grundstruktur på alle sider, for så kan du med din CSS sørge for, at elementer, som gentages på alle sider som f.eks. header, menu og tekststykker, får samme udseende på alle dine sider. Prøv selv at tilføje nogle span-elementer på din egen side, som du senere gerne vil have til at se ud på en bestemt måde. Fx. årstal, job-titler, stednavne eller telefonnumre. Husk, at din side måske ikke ændrer udseende bare fordi du tilpasser din opmarkering. Det er først når du begynder på CSS-koden, at siden ændrer udseende Styling af dine sider tekstformatering og farver, <body> For at komme i gang med CSS skal du nu afprøve nogle flere af de muligheder, der er for at styre udseendet på din side, bl.a. ved at formatere tekst. Først skal du give din hjemmeside en baggrundsfarve, bestemme en skrifttype og en farve på teksten. Det gør du ved at angive selektoren body og angive værdier for egenskaberne background-color, font-family og color. Gem dit CSS-dokument (tryk ctrl + s) og se resultatet i browseren ved at åbne en af dine HTMLfiler. Hvis du har fået linket rigtigt fra alle dine HTML-filer til dit stylesheet, som beskrevet i begyndelsen, vil alle dine sider bruge samme styling. Hvis ikke, så tilføj style-linket nu, som beskrevet tidligere. Vil du give dine overskrifter eller anden tekst skygger, kan du med CSS bruge egenskaben text-shadow som tager fire værdier: text-shadow: h-shadow v-shadow blur color; h1 {text-shadow: -1px 2px 0 red;} Ovenstående giver alle <h1>-overskrifter en hård rød skygge, der er rykket 2 pixels ned og en til venstre under overskriftens tekst.

12 Bemærk i øvrigt, at kommentarer i CSS skrives sådan: I HTML skriver du kommentarer sådan: Kommentarer læses ikke af browseren som en del af koden, men er kun til hjælp for os, som arbejder med hjemmesiden. Når du angiver en font-family og en color for body-elementet, gælder dette for alle de elementer, der i din HTML er placeret inde i body. Men vi kan overskrive dem, hvis nu vi gerne vil have bestemte elementer til at se anderledes ud.

13 5.6. Styling af dine sider tekstformatering og farver, <h1>, <h2>..., <p> og <a> Få din overskrift til at stå med kapitaler i midten af siden i stedet for til venstre, og så skal den have en bestemt størrelse og farve. Det gør du ved at angive selektoren h1 og angive værdier for egenskaberne font-variant, color, font-size og text-align. Gem igen og se resultatet i browseren ved at opdatere siden. Som du kan se, ser overskriften nu anderledes ud end det, som du definerede i body en, mens resten af siden stadig ser ud, som du angav tidligere. Nu ser stylesheetet f.eks. sådan ud: Og i browseren kan det se sådan ud: Bemærk, at stylingen fra body også gælder for h1 på de punkter, hvor der ikke er defineret noget anderledes, f.eks. er skrifttypen den samme som resten af body. Prøv selv at angive forskellige skriftstørrelser ved at bruge nogle af de forskellige metoder du har læst om i grundbogen. Du kan bruge pixels som herover. Det er dog mere optimalt at vælge em (f.eks. 3em), procenter (f.eks. 200%) eller keywords (f.eks. small, medium, large) da de er mere fleksible (i forhold til forskellige skærmstørrelser). Du mangler også at style underoverskrifterne h2, h3 m.v. Prøv dig frem og find passende størrelser, farver, skrifttyper og andre effekter til disse. Du kan med samme selektorer og værdier justere på, hvordan dine andre elementer ser ud. F.eks. kunne man angive særlige ting for tekstafsnit inden i <p>. Lige her er behovet ikke så stort for det, fordi vi allerede har angivet en bestemt skrifttype og størrelse på <body>, og disse værdier bliver brugt som standard de steder på siden, hvor man ikke angiver andet. Men vi vil gerne angive, at links skal se ud på en bestemt måde. Prøv derfor at ændre på stylingen af dine links som vist i eksemplet herunder:

14 Sådan ser denne kode ud i browseren: 5.7. Styling af dine sider tekstformattering og farver, <h1>, <h2>..., <p> og <a> Nu skal du bruge flere af de tags du bruger på din side - og også gerne nogle classes. Bare prøv dig frem og afprøv forskellige egenskaber og værdier. Når du vil rette stylingen mod et element med en class, sætter du et punktum foran class-navnet som selektor.

15 Hvis du vil rette din styling mod et id, sætter du # foran id-navnet Gem igen dit CSS-dokument og se resultatet i browseren. En sjov, ny egenskab i CSS er, at man kan lave bokse med rundehjørner. Med egenskaben border-radius kan du angive hvor rundede hjørnerne på f.eks. en tekstboks skal være. Prøv f.eks. at give et element på din side en baggrundsfarve og sæt forskellige border-radius for at få fornemmelse for, hvordan egenskaben virker. Runde hjørner er en af de nye egenskaber i CSS som stadig kan give problemer i nogle browsere og derfor er det nødvendigt at skrive den samme kode tre gange: første gange skriver du egenskaben: border-radius. Derefter skriver du koden igen for Firefox og til sidst for Safari og Chrome, browsere der bruger webkit: Ligge også mærk til vi har indstillet en bredte på en block element det kan du gør med andre block elementer og sammen med padding kan du lave bokse rundt om din indhold. CSS: Section{ } width 300px; background-color:lightgrey; padding: 30px; border-radius: 10px: -moz-border-radius: 10px; -webkit-border-radius:10px;

16 Man kan lave mange sjove ting med border-radius. Se for eksempel her, hvordan man ved hjælp af CSS kan skabe komplicerede geometriske former, uden at skulle bruge billeder: css-tricks.com/examples/shapesofcss/

17 Typografi og tekst Prøv nu selv at style dine klasser, som du har brugt til span eller lav nye, der understøtter en nem tilegnelse af teksten, f.eks. ved at fremhæve nøgleord eller lignende, som læseren skal lægge mærke til. Du kan f.eks. også lave en særlig klasse til de links, der står i teksten, som får dem til at adskille sig fra dine menulinks. Se eksemplet herunder. Før - to links i teksten får samme styling som menuen: Hvis vi tilføjer class en; class= keyword til linksne i brødteksten og styler dem, kan vi ændre dette: CSS: Resultat:

18 Du har tidligere prøvet at bruge egenskaben og værdien text-decoration: none i forbindelse med default-understregning af links. Du kan også fjerne default-bullets på lister, hvis du vil af med dem f.eks. i din menu. Ligesom du lige har gjort med links, kan du også lave en klasse til lister, som du i det hele taget gerne vil style på en bestemt måde. En anden måde er at udnytte, at du allerede har placeret din menu-liste i et nav -tag. Det giver mulighed for at specificere bestemt styling for en liste (ul) inde i tagget nav : I browseren kan du se, at menuen nu ikke har bullets, mens punkterne i CV'et stadig har. Prøv selv at style din menuliste på en særskilt måde, f.eks. uden bullets Tilpas din ommig.html side med disse virkemidler Du nu har prøvet at bruge forskellige virkemidler til at præsentere din tekst og dine sider i det hele taget rent visuelt. Prøv at justere på de ting, du har lavet, så den visuelle fremtoning passer til den tekst, du har skrevet på Om mig siden, og så den understøtter, at brugeren hurtigt får overblik over indholdet. Brug også gerne punktopstillinger, overskrifter m.v., som du arbejdede med i sidste øvelse. Brug bogen som inspiration og brug også gerne andre mulige formatteringer end dem, der er nævnt i øvelsen her. F.eks. liniehøjde og indrykninger, letterspacing m.v Validering af HTML Til sidst skal du som i de tidligere øvelser 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). 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å tjekke hver enkelt underside ved at indtaste URL'en for dem en ad gangen, for at få tjekket hele dit site. Når det er lykkedes dig at få valideret din side korrekt, skal du indsætte et link til validationen på

19 alle sider, som du kan formattere, som du vil, så den passer med resten af siden Validering af CSS Du skal også validere din CSS-kode! Det foregår på samme måde som med HTML-valideringen. På denne side: css-validator/ kan du validere din CSS ved enten at 1) angive URL en til dit CSS-dokument, 2) uploade dit CSS-dokument, eller 3) kopiere din CSS-kode direkte ind i et tekstfelt. Koden bliver tjekket uanset, hvilken af de tre måder, du vælger. 6. Aflevering 6.1. Deadline Du afleverer ved 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 ). 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. siden indeholder en længere sammenhængende tekst, der beskriver dig på et mere personligt plan, og som består af to til fire tekstafsnit på mindst en halv A4-side. teksten er formateret ved hjælp af et eksternt stylesheet, hvor du prøver at bruge nogle forskellige egenskaber og værdier, som i øvelsen her, i den visuelle præsentation af teksten. F.eks. typografier, farver m.v. sidens visuelle udtryk (opnået gennem stylingen og brug af andre ting f.eks. billeder) understøtter tonen og indholdet i det tekstlige indhold og at formateringen understøtter brugerens tilgang og læsning af indholdet. dit stylesheet er benyttet på alle dine HTML-sider på dit website. alle dine sider har et HTML-validator-link og mindst én af dine sider har et CSS- validatorlink

20 6.3. 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!". 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. Din deadline for aflevering er onsdag 18 sept før midnat. 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.