Design til digitale kommunikationsplatforme Formiddag (Hold 1), IT Universitetet, Efterår 2013 Øvelse 2, individuel øvelse Grundformen for et website: aside, tabeller, formularer og tekstformatering 1. Lidt om hvad du har lært Du har i øvelse 1 lært at lave en HTML side med semantisk markeret indhold som navigation, selvstændigt indhold, overskrifter, afsnit, links og billeder. Du har brugt lister til at ordne indhold og valideret din kode som et vigtigt afsluttende element. Start med at læse hele øvelsesvejledningen igennem. Bemærk, at øvelsen skal løses individuelt. 2. Målsætning I dag skal du lære om grundformen til et website. Der skal laves endnu en underside med noget mere indhold. Centralt for øvelsen i dag er, at du også skal arbejde med præsentationen af indholdet på alle dine sider. Første del af øvelsen vil introducere nogle flere elementer som aside, tabeller og formularer til at strukturere sideindholdet. Tabeller bruges til at præsentere data, lidt som du måske kender det fra Excel eller et andet regnearkprogram. Forms bruges til at sende data fra brugeren til en server. Bemærk at vi kun arbejder med statiske websites, dvs. at vi ikke kommer til at sende data til en server, men kun strukturere designet til at blive sendt videre i browseren. Du vil i arbejdet med præsentationslaget stifte dit første bekendtskab med CSS. Denne del af øvelsen handler dels om at lære at benytte CSS overordnet 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. Udover at organisere indhold og navigation på selve hjemmesiden på en overskuelig måde for brugeren (f.eks. ved tabeller og menuer), er det også vigtigt at holde orden i de filer, som du arbejder med på hjemmesiden. Derfor indeholder øvelsen også lidt træning i at tænke over, hvordan du bl.a. placerer filerne i forhold til hinanden i din projektmappe. 1
3. Beskrivelse I denne øvelse skal du arbejde videre med din personlige hjemmeside. Men det er vigtigt, at 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 (skabelon.html, index.html, cv.html samt eventuelle mapper og billedfiler). 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 underside, men du skal sørge for, at alle dine sider bruger det stylesheet, som du laver i denne øvelse. 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 at holde 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. 2
OBS! 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 >Link tekst 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. Husk at kopiere alle de nødvendige filer over i mappen (både mapper,.html og billedfiler). 4.2. 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. 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:kema@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 (index.html). 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. <section> <h2>send mig en mail</h2> <p>du kan vælge at kontakte mig via e mail, hvis du har spørgsmål, ris eller ros. Det kan du gøre <a href= mailto:fornavn@efternavn.dk >fornavn@efternavn.dk</a>.</p> </section> Tilføj kontaktoplysninger og maillink på din hjemmeside. 4.3. Tilføj et link, som er et billede 3
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 billede link 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: <p>klik på logoet for at læse mere om IT Universitetet i København:</p> <p><a href= http://www.itu.dk ><img src= billeder/itu logo.jpg alt= Logo: IT Universitetet i København ></a></p> </section> 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. Tilpas menuen på alle dine 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, da de forskellige html filer ligger i forskellige mapper. 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> <head> 4
<meta charset="utf 8" /> <title>om mig og mine interesser</title> </head> <body> <header> <nav> <ul> <li><a href=../index.html >Forside</a></li> <li><a href=../cv/cv.html >Mit CV</a></li> <li><a href= ommig.html >Om mig</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. OBS! Brug ikke mere end 10 15 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. Gerne mere. Opmarker teksten med de nødvendige semantiske elementer, du lærte at bruge i øvelse 1. Senere i øvelsen 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. 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 eksempel priser, udgivelsesår og andre specifikationer. 5
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> <tr> (table row) <th> (table head) <td> (table data) Det element der definerer selve tabellen. De vandrette 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> <tr> </tr> <tr> </tr> </table> <th>header 1</th> <th>header 2</th> <td>row 1, cell 1</td> <td>row 1, cell 2</td> Hvis du tilføjer attributten border med værdien 1 til <table>, får du 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 1.596 Sigurd er i Danmark.</li> <li>danmarks mest populære navn er Anne (47.466 1. januar 2012).</li> <li> Jensen hedder i alt 268.346 til efternavn.</li> <li>i 1988 skulle drenge helst hedde Kasper og piger skulle helst hedde Camilla.</li> <li>flest kvinder skiftede navn i 2011. I alt 3.700 kvinder fik nyt fornavn.</li> </ul> <p><strong>kilde:</strong><cite><a href= http://www.dst.dk >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 5 (side 82) til, hvad du kan bruge <aside> til. 4.7. Tilføj en mail form til dit website 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 formularer er centrale elementer i et funktionelt, brugervenligt og dynamisk website, er det vigtigt, at I har en forståelse af, hvad forms kan bruges til, og at I selv kan lave dem i HTML. Forms består altid af en skal et formelement som indeholder alle de andre elementer (eks. kommentarfelter, tekstlinjer, knapper, check bokse, dropdown vinduer med mere.) Blogs består for eksempel af forms når du afleverer url en til en øvelsesopgave skriver du jo i kursusbloggens kommentarfelt, 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. I denne delopgave skal du lave en simpel form, der indeholder det mest basale og kan danne grundlaget for, at andre kan kommentere på din hjemmeside. 7
Det vil sige, at formularen i mindste fald kommer til at indeholde følgende: Information om, hvordan formularen skal behandle og sende informationerne videre, når der trykkes på Send besked! knappen: action= method= post autocomplete= on attributten med information om automatisk at udfylde felter, hvis brugeren allerede har udfyldt en formular 2 input felter af typen 'text' og 1 af typen email, så man kan sende sit navn, emne og email sammen med sin kommentar required= required attributten på felter, der skal udfyldes, så browseren kan tjekke efter En kort vejledende tekst i placeholder attributten, som forsvinder, når brugeren begynder at udfylde et felt Et kommentarfelt input typen 'textarea' En submit knap Koden til din formular vil grundlæggende se således ud: <form action="#" method="post" autocomplete="on"> <h2>kontaktformular</h2> <input type="text" id="name" name="name" required="required" placeholder="hvad hedder du?"> <input type="email" id="email" name="email" required="required" placeholder="hvad er din e mail?"> <input type="text" id="subject" name="subject" required="required" placeholder="hvad vil du snakke om?"> <textarea id="message" name="message" required="required" placeholder="skriv din besked her! : )"></textarea> <input type="submit" value="send besked!"> <input type="reset"> </form> Prøv at skrive ovenstående kode på en af dine sider. Du kan også lave en helt ny kontakt side. Hvis du gør det, skal du huske at bruge samme struktur som på dine andre sider og tilføje et menu punkt hertil i koden til menuen på alle dine sider. Når du har gemt og ser det i browseren, ser du sikkert kun nogle bokse og en submit knap. Ikke just informativt om hvad der skal skrives hvor. For at løse dette giver vi hvert input element inkl. textarea en beskrivelse, f.eks Navn til input feltet name: 8
<label for="name">navn: *</label> <input type="text" id="name" name="name" required="required" placeholder="hvad hedder du?"> for attributten henviser til input elementets id attribut og bruges til at øge tilgængeligheden og f.eks. gøre det lettere at læse siden med en skærmlæser. Følg samme princip på samtlige input felter, for at give den rette info til din læser. Det endelige resultat skulle gerne se nogenlunde sådan her ud: [SCREENSHOT AF GRIM FORMULAR] Der er som sagt mange flere muligheder for input i formularer. Check f.eks.http://www.w3schools.com/html5 eller under Forms for flere typer, elementer og attributter. Formularen mangler nu kun at blive struktureret efter grundprincipperne for dit website: Orden. Til det bruger du en liste. Opsæt selve formularens input felter som punkter på en ikke nummereret liste efter følgende princip: <ul> <li> <label for="name">navn: *</label> <input type="text" id="name" name="name" required="required" placeholder="hvad hedder du?"> </li> <li> <input type="submit" value="send besked!"> <input type="reset"> </li> </ul> Hvad angår det noget kedelige udseende, så skal du nu til at style din hjemmeside vha. CSS (Cascading Style Sheets). 4.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 9
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. 4.2. Opret stylesheet Første trin er at oprette et 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 CSS dokument har muligheden for at tilknytte det til flere HTML dokumenter. Når man så vil ændre noget i layoutet, så skal det kun rettes én gang i CSS dokumentet i stedet for i 20 HTML dokumenter. 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: 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 der 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: 10
#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 som f.eks. Filezilla og herefter bruge @font face deklarationen. Du kan læse mere om @font face her: http://www.w3schools.com/cssref/css3_pr_font face_rule.asp Du kan hente gratis skrifttyper klar til at embedde her: http://www.fontsquirrel.com/fontface Når en skrifttype er embedded, 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 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å http://www.google.com/webfonts#chooseplace:select en række skrifttyper som man frit kan linke til og anvende (det kræver dog, at brugeren har internetadgang!). Men husk at bruge skrifttyper med omhu i langt de fleste tilfælde kan du nøjes med at anvende de standardskrifttyper brugeren allerede har på sin computer. 11
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 Bemærk at der modsat et HTML dokument ikke skal stå andet i dokumentet end ens CSS styling. 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 CSS version 3 er ved at erstatte 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. Det gør du f.eks. ved at lave en alternativ style til gamle browsere. CSS og CSS3 gør det let at style sin HTML kode på utroligt 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å http://www.w3schools.com/css3/ og http://css tricks.com/. 4.3. 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>: <!DOCTYPE html> <html> <head> <meta charset="utf 8"> <title>kennys hjemmeside</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> 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 også forholder sig til det mappeniveau f.eks. din cv fil ligger i. Du skal derfor linke forskelligt til style.css i dine forskellige HTML filer. 12
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. 4.4. Article, section, header, div, id og class i HTML Du kan style din kode ud fra de elementer eller tags, du har brugt til at strukturere din HTML kode med. Fordi du bruger <article> <section> <header> <footer> <nav> osv. på en meningsfuld måde, kan du nu let style dine HTML sider. Husk at tage udgangspunkt i din personlige side, da det er den med mest indhold at style. 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. Hold dig til hovedsageligt at style elementer direkte ved at bruge elementet som selector. Nogle få id er og classes i din ommig.html er nok for nu. Det kan hurtigt blive for komplekst. Om at bruge id eller class rigtigt: 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. 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 rigtig 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, roles og id er som du synes er passende. Sørg for at benytte samme grundstruktur på alle sider. 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. 13
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. 4.5. 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 og se resultatet i browseren ved at åbne en af dine HTML filer. 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å tjek, at du har tilføjet style linket, som beskrevet tidligere. Farver og skygger Når du arbejder med CSS, kan du selv vælge, hvilket farvesystem du vil bruge. I grundbogen er de alle forklaret. Prøv også at arbejde med gennemsigtighed ved hjælp af RGBA: Eksempel body { } background: rgba(0,40,180,.50); Det sidste tal i koden, Alpha kanalen, angiver graden af gennemsigtighed, hvor 0 = gennemsigtig og 1 = uigennemsigtig) Vil du give dine overskrifter eller anden tekst skygger, kan du med CSS bruge egenskaben text shadow som tager fire værdier: text shadow: horisontal skygge vertikal skygge slørethed farve; Eksempel h1 { } text shadow:.1em.1em 0 #0000ff; Ovenstående giver alle <h1> overskrifter en hård blå skygge, der er rykket en halv em værdi til venstre og en halv em værdi op over overskriftens tekst. 14
Bemærk i øvrigt, at kommentarer i CSS skrives sådan: /*Jeg er en CSS kommentar. Browseren læser ikke mig, men du kan skrive forklarende tekst til dig selv og andre, som læser koden.*/ /*Eksempel:*/ h1 { text shadow:.1em.1em 0 #0000ff; } I HTML skriver du kommentarer sådan: <! Jeg er en HTML kommentar. Browseren læser ikke mig, men du kan skrive forklarende tekst til dig selv og andre, som læser koden. > <! Eksempel: > <h1>overskrift</h1> <p>afsnit</p> 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 ved at udnytte flowet og dokumentets hierarki. 4.6. Styling af dine sider tekstformatering og farver, <h1>, <h2>, <p> og <a> Nu skal du 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: h1 { font variant: small caps; color: #ff0066; 15
} font size: 200%; text align: center; 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 godt bruge pixels. 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: a { } color: #ff9300; font size: 130%; text decoration: none; line height: 150%; Sådan ser denne kode ud i browseren: 16
4.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:.minclass { color: #00ff00; font size: 110%; line height: 110%; } Hvis du vil rette din styling mod et id, sætter du # foran id navnet: #mitid { color: #00ff00; font size: 110%; line height: 110%; } Gem igen dit CSS dokument og se resultatet i browseren. En sjov, ny egenskab i CSS er, at man kan lave bokse med runde hjørner. Med egenskaben border radius kan du angive hvor afrundede 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: 17
CSS: aside { color: #ffffff; background color: #222222; width: 300px; padding: 20px; line height: 110%; border radius: 10px; moz border radius: 10px; webkit border radius: 10px; } De to sidste egenskaber skal kun bruges i dag, fordi CSS3 stadig er i udviklingsfasen. I fremtiden vil du ikke længere behøve at bruge de browser specifikke egenskaber moz border radius: 10px; og webkit border radius: 10px;. 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: http://css tricks.com/examples/shapesofcss/ Typografi og tekst Prøv nu selv at style dine tekstelementer. Det kan være noget, der understøtter en nem tilegnelse af teksten ved at fremhæve nøgleord eller lignende. Du kan 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. Lige nu er alle dine links samme farve. Men hvis du nu i din CSS tilføjer en styling af links i artikler, så kan du ændre dette. article a { color: #00ff00; /*skriggrøn*/ } Bemærk, at jeg bruger en særlig syntaks i CSS en for at nå til anchor elementet i article. Ved at bruge mellemrum kan man benytte flere elementer som selectorer til at henvende sig meget specifikt til en type elementer. Her bruges article efterfulgt af a til at sige, at browseren skal kigge efter article elementer og nested deri skal den finde et link og style det. Man kan bruge så mange led man vil til at nå langt ind i en række nestede elementer. Du har tidligere prøvet at bruge egenskaben og værdien text decoration: none i forbindelse med 18
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 : nav ul { list style: none; } 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. 4.8. 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. 5. Aflevering Din deadline for aflevering er tirsdag den 17. september inden kl 18.00. Du har altså ca. en uge til at poste din hjemmesides link (www.itu.dk/people/dit_brugernavn/) på kursus bloggen, på den underside der hører til din hjælpelærer. Du poster bare linket som en kommentar. 5.1. Tjekliste Af din aflevering skal det være synligt, at du har været igennem denne øvelse. Det betyder, at: Øvelsen er udarbejdet individuelt.. der er en tabel på en af undersiderne f.eks. om dine yndlingsfilm der er en formular, hvor man kan kontakte dig og kommentere på din hjemmeside menuen går igen på alle sider og linker til alle sider fra alle sider noget indhold er organiseret i et aside tag. undersider og billeder på dit site er organiseret i undermapper. der er mindst et maillink og et billedelink på dit site din hjemmeside skal har en ny underside kaldet 'Om mig', 'Personligt' eller lignende. 19
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å ca. en A4 side. teksten er formateret ved hjælp af et eksternt stylesheet, hvor du bruger 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 validator link 20