Den kompletta HTML- och CSS-guiden. Framsida

Transkript

1 Framsida Sida 1 av 99

2 Innehållsförteckning Framsida...1 Vad kommer HTML ifrån?...3 SGML... 3 XML...5 Struktur...6 HTML...7 Får vi börja skriva webbsidor nu?... 9 HTML Introduktion / Struktur... 9 html...12 head och title body Text Länkar...18 Bilder Listor...25 Tabeller Formulär Frames (Ramar)...36 CSS Introduktion / Strukturer Färger och bakgrunder Teckensnitt...56 Texthantering Rutor (Box) Listor...63 Utseende (Block / Inline) Positionering Float Vanliga tekniker...85 Ett lite större exempel Bilagor HTML 4.01-referens Länkar Sida 2 av 99

3 Vad kommer HTML ifrån? SGML SGML (Standard Generalized Markup Language), som blev till i det tidiga 70-talet och sedan blev en standard 1986, är ett sätta att beskriva data. Det är egentligen inget sätt att beskriva data utan om man vill använda SGML måste man själv göra en variant av den, vilket går ut på att man bestämmer vilka taggar man vill använda. En tagg börjar med ett mindre-än-tecken (<) och slutar med ett större än-tecken (>), däremellan så finns en beskrivning på vad taggen innehåller. Därefter kommer själva informationen och till sist så avslutas det hela med en sluttagg som är likadan som starttaggen fast den innehåller ett snedstreck (/) efter mindre än-tecknet (<). Så här kan det se ut: <name>arthur C. Clarke</name> Det här beskriver ett namn. Först så har vi starttaggen <name>, sen sluttaggen </name> och däremellan har vi själva namnet. Man kan också ha taggar i taggar, vilket kan se ut såhär: <author name="isaac Asimov"> <book name="i Robot"> <book name="the Foundation"> </author> Det här beskriver en författare och hans böcker. Här ser ni också något annat som används i SGML. I taggen author står det också name="isaac Asimov". Detta kallas attribut. Attributen skulle också kunnas vara en tagg under author, men eftersom en författare bara har ett namn så brukar man inte ha taggar under. Det finns dock undantag. En författare brukar dock oftast ha skrivit flera böcker, dessa läggs alltså som taggar under author. // TODO.. begrepped element? Sida 3 av 99

4 Ett annat exempel kan vara ett vanligt textdokument: <page> <header1>information</header1> <paragraph> Det här är mängder med information som bara väntar att läsas av någon nyfiken. Det kan ju hända att någon är i alla fall <bold>lite</bold> intresserad? </paragraph> <header2>underrubrik</header2> <paragraph color="red">mer text</paragraph> </page> Det här är ett bra exempel. Ett dokument kan innehålla flera sidor och en sida flera rubriker och stycken. För att man ska kunna använda detta till något användbart så måste man själv bestämma vilka taggar som skall användas i sin egen version av SGML. Detta är alltså en uppsättning regler som bestämmer vilka taggar som skall finnas med. Dessa regler kallas för DTD eller Document Type Definition. Många myndigheter, universitet, industrier och militära institutioner använder sig av SGML till deras olika dokument och filer Sida 4 av 99

5 XML Precis som SGML är XML också ett sätt att beskriva data. Dessa två är väldigt närbesläktade. Man kan säga att XML bygger på SGML men att det är lite striktare. XML har blivit ett vänligt format på senaste tiden. XML är en enklare variant av SGML som är gjort för att användas på Internet. Men självklart kan den även användas till annat. StarOffice och OpenOffice sparar te x alla sina dokument i ett XML-format (Är man nyfiken kan man döpa om en StarOffice-fil till.zip1 och öppna den och titta vad den innehåller. Där kan du sen titta på de olika XML-filerna) <note> <to>ray Bradbury</to> <from>douglas Adams</from> <heading>fahrenheit 451</heading> <body>what is your book about?</body> </note> Numera använder man oftast XML eller XML-varianter istället för SGML. 1 OpenOffice- och StarOfficefiler är egentligen en komprimerad fil som innehåller fler andra filer. Den fungerar som en vanlig zip-fil. Öppnar man denna i ett program som kan packa upp dessa så ser man att den innehåller ett antal xml-dokument och alla eventuella bilder Sida 5 av 99

6 Struktur Precis som vanliga dokument är webbsidor oftast uppbyggda med hjälp av samma delar. Det handlar om rubriker, stycken (paragrafer), tabeller och bilder. När man konstruerar en webbsida så tänker man på samma sätt, dvs man vet att vissa bitar är rubriker, andra bitar är vanlig text och vissa objekt är te x bilder. Först och främst så ville man dela upp sidan i två bitan. Först kom huvudet (head) där man ville kunna sätta en titel på dokumentet, bestämma vilken teckentabell man ville använda och annan information om själva dokumentet. Den andra biten var kroppen (body), alltså själva innehållet. Här ville man kunna använda sig av bland annat rubriker, bilder och texter Sida 6 av 99

7 HTML Nu kanske du börjar förstå vart det här leder? När man funderar kring ett språk som kunde beskriva webbsidor så tittade man på SGML och kom fram till att det var ett enkelt, effektivt och väl fungerande sätt att beskriva, bygga upp och skapa dokument kring. Man funderade på vilka beståndsdelar man ville ha och kom fram till ett par som fortfarande är ganska standardiserade: html...själva dokumentet head... Huvudet title... Titel på dokumentet body... Själva kroppen h1...rubrik (nivå 1) h2...rubrik (nivå 2) Fortsätter ändå till nivå 6. p...ett stycke br... En radbrytning b...fet text i...kursiv text u...understruken text table... Tabell tr...en rad i tabellen td...en cell i raden Sida 7 av 99

8 Ett HTML-dokument kan alltså se ut ungefär såhär: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>robert A. Heinlein</title> </head> <body> <h1>the author himself, Mr Heinlein:</h1> <p>a man with great imagination...</p> <h2>the Books:</h2> <table> <tr> <td>book</td><td>isbn</td> </tr> <tr> <td>job: A Comedy of Justice</td><td> </td> </tr> <tr> <td>starship Troopers</td><td> </td> </tr> </body> Eftersom Internet hela tiden utvecklas så har det kommit nya versioner av HTML i olika omgångar. HTML HTML HTML HTML XHTML XHTML Före 1996 hade vi ingen definierad HTML-standard utan man hade mer en praxis som de flesta webbläsare och webbdesignare använde sig av. Tyvärr har man ännu inte riktigt lyckats få en standard utan många tillverkare av webbläsare lägger in sina egna taggar, och inte fullt ut följer dessa standarder och på detta sätt har webben segregeras ganska mycket. De nyaste varianterna av HTML använder sig av XML som bas istället för SGML och därför har man valt att kalla dessa XHTML. Dessa standarder beskriver också hur webbläsaren skall tolka koden som skrivs, detta för att personerna som utvecklar webbläsare skall kunna få sina produkter att rendera webbsidorna på exakt samma sätt Sida 8 av 99

9 Får vi börja skriva webbsidor nu? Den dominerande standarden på Internet just nu torde vara HTML 4.0, många av de som har och gör webbsidor vet inte något om HTML-standarder. Antingen så använder det sig av ett så kallat WYSIWYG2-program eller så har de ingen kunskap om standarder och dess olika uppsättningar av taggar. HTML 4.01 Introduktion / Struktur Kommer du ihåg när vi pratade om SGML? HTML är just en implementering, eller en variant av SGML som har ett antal förutbestämda taggar med olika attribut. Vi kommer att gå igenom de viktigaste här i tur och ordning. 2 What you see is what you get Alltså, man kan rent grafiskt producera en webbsida i ett program utan att man har någon koll på vad som händer bakom med själva HTML-koden. Exempel på sådana program är Dreamveawer och Frontpage. En sund blanding av ett sådant program och kunskap om HTML-kod och taggar är bra om man vill nå en professionell nivå Sida 9 av 99

10 Doctype Den absolut första taggen man ska använda sig av är något som kallas <!DOCTYPE>, det berättar för webbläsaren vilken version av HTML du använder dig av. Skriver du HTML 4.01 ser den ut ungefär såhär: Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Loose: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " Dessa har lite olika egenskaper. Frameset används till sidor som innehåller frames, och då alltså bara till den sidan som innehåller frameset-informationen. Mer om detta senare. Det rekommenderas att man försöker använda strict när det går. Vill man använda andra varianter av HTML, te x XHTML så får man använda sig av andra sorters doctype. Det här lilla kompendiet kommer att i första hand inrikta sig på strict och kommer också att innehålla en del om CSS som är ett komplement till HTML Sida 10 av 99

11 Filer och kataloger När man jobbar med HTML så handlar det ju om vanlig text. Vanlig text använder ofta filändelsen.txt medans när man skriver HTML-dokument vanligtvis3 använder sig av.html eller.htm. Vad som också är speciellt är att den sidan som först visas om vi till exempel går in på vanligtvis4 heter index.html eller index.htm. Den sida du vill ska visas först när dina besökare går in på sidan skall du alltså döpa till index.html. En annan bra sak att tänka på är att försöka strukturera upp din webbsida på ett bra sätt: bilder titel.jpg nagot.jpg filer program.zip annat.exe bilder.html index.html program.html Det här är ett bra exempel på hur man kan lägga upp en katalogstruktur. Att lägga alla filer direkt i en katalog kan bli väldigt rörigt tillslut. Försök att separera filerna på ett logiskt sätt. Att lägga filer som användarna kan ladda ner i en mapp med namnet filer och alla bilder som används i en mapp som heter bilder är till exempel en väldigt bra idé. Vill man sedan infoga en bild som ligger i en undermapp så refererar man helt enkelt till den genom att ange både katalognamnet och filnamnet på följande sätt; bilder/titel.jpg Kom ihåg att använda vanliga snedstreck (/) och inte bakvända snedstreck (\)! 3 Egentligen spelar det ingen roll vilken filändelse man använder när den väl ligger på en webbserver. Det enda som då spelar roll är att webbservern berättar för webbläsaren att just det här dokumentet är 4 Egentligen spelar det här heller ingen roll utan det är bara så att de flesta webbservrar är standardinställda på att om webbläsaren begär att till exempel sidan ska visas så skickas sidan index.html. Detta går vanligtvis att ställa om i webbservern Sida 11 av 99

12 html Nästa tagg är html. Det är själva huvudtaggen, det är mellan <html> och </html> som man skriver alla andra taggar. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html>... Innehåll... </html> Nästa tagg är den så kallade headern eller huvudet. Den innehåller allmän information om själva webbsidan så som titel, författare, copyright och annat. I huvudet så ligger alla information som inte är är själva innehållet Sida 12 av 99

13 head och title Head-taggen skall ligga i html-elementet. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> </head>... Innehåll... </html> I headern är det till att börja med en viktig sak vi ska titta på; Titel-elementet. Det sätter titeln på dokumentet och kommer att visas längst upp i namnlisten i webbläsaren. Om header-elementet nu skulle innehålla <title>test av titel i ett HTML-dokument</title> på följande sätt <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>test av titel i ett HTML-dokument</title> </head>... Innehåll... </html> Så skulle det kunna se ut såhär i namnlisten i en webbläsare: Såhär långt är det bra, men vi har fortfarande inget innehåll! Sida 13 av 99

14 body Allt innehåll på en webbsida ligger mellan <body> och </body> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>titel på webbsidan</title> </head> <body> <p>hej världen!</p> </body> </html> Såhär kan exemplet ovan se ut i en webbläsare: Sida 14 av 99

15 Text Rubriker Vissa texter på en webbsida är rent logiskt rubriker och underrubriker. Precis som i ett vanligt textdokument. Dessa rubriker har sina egna taggar: <h1>... </h1> till <h6>... </h6> H:et här står för heading, som på svenska översätts till överskrift eller rubrik. Att man markerar rubriker med speciella taggar beror på att det följer den logiska uppbyggnaden av ett vanligt dokument och kan därför renderas och läsas på olika sätt beroende på vilket system man har. Stycken Den text som inte är rubriker brukar vanligtvis delas upp i stycken, och så fungerar det också på webbsidor. Tittar man på ett enkelt dokument kan det se ut såhär: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>william Ford Gibsson</title> </head> <body> <h1>william Ford Gibsson</h1> <p>william Ford Gibson, kanadensisk författare, född 17 mars, Har skrivit mest science fiction och är en av de ledande medlemmarna i cyberpunkrörelsen.</p> <p>gibson föddes i Conway, South Carolina, USA. Han flyttade till Vancouver, Kanada 1972 där han har levt det mesta av sitt vuxna liv. Hans tidiga böcker är framtidshistorier om cybernetik och cyberrymden (datorsimulerad verklighet) och dess påverkan på människor. Hans första roman, Neuromancer, vann tre stora science fictionutmärkelser.</p> </body> </html> Sida 15 av 99

16 Det här dokumentet innehåller följande taggar: DOCTYPE html head body h1 p p En sån här lista är ett bra sätt att visa hur man taggarna är relaterade till varandra. Man ser att h1-taggen och p-taggarna ligger i body-taggen som i sin tur ligger i html-taggen. Dokumentet kan se ut på följande sätt i en webbläsare: Sida 16 av 99

17 Specialtecken Vissa specialtecken måste skrivas på ett speciellt sätt. Det beror på att vissa teckenuppsättningar inte innehåller alla specialtecken som å, ä, ö och vissa andra speciella tecken. Vill man använda specialtecken som te x våra extra svenska bokstäver så är det bra att man använder dessa koder för att se till att de fungerar i alla webbläsare och alla plattformarnas. Grundregeln är att när man vill infoga ett specialverken så börjar man med ett och-tecken (&) och sen ett speciellt namn eller kod och till sist avslutar man med ett semikolon(;). Tecken Kod & & å och Å å och Å ä och Ä ä och Ä ö och Ö ö och Ö < och > < och > Det finns dessutom en mängd flera sådana här specialtecken, om du vill använda några specialtecken så kan det vara bra att kolla upp om det finns en motsvarande specialkod för det tecknet Sida 17 av 99

18 Länkar En länk är en hänvisning till en annan sida, eller an annan del av den aktuella sidan. Taggen som används är a. Till den taggen hör attributet href som innehåller informationen om vart länken pekar. Ett exempel: Titta på mer <a href="information.html">information</a>. Trycker man på information i texten 'Titta på mer information' här så kommer man att skickas till HTML-sidan information.html. Precis samma tagg används om man vill länka till en extern sida: En annan bra nyhetssida för IT är <a href=" Det här kommer att skapa en länk till IT-nyhetssidan IDG. När man länkar utanför sin egen webbsida så brukar det kallas en extern länk och när man länkar inom sin egen webbplats en intern länk. Länken till IDG.se kan se ut ungefär såhär i en webbläsare: Att länka till andra sidor såhär är det absolut vanligaste Sida 18 av 99

19 Ankare Det finns också en teknik som gör att man kan länka till speciella bitar i den aktuella sidan eller en speciell bit i på en annan sida. Då använder man sig av något som kallas ankare (anchor). Detta går ut på att man först skapar en länk med attributet name satt, på det här sättet: <a name="telekom"></a> Detta skapar ett ankare som heter telekom. Om vi nu vill länka till det här stället i koden så kan vi använda oss av följande kod: <a href="#telekom">telekomföretag</a> Det går också att länka till andra dokument som innehåller ankare. Om vi säger att filen dokument.html innehåller ett ankare vid namn blanketter så kan man länka till just den delen i den filen med hjälp av följande kod: Här kan du hämta <a href="dokument.html#blanketter">blanketter</a>. Den här tekniken brukar ofta användas när man te x har långa textmassor och en meny, eller ett navigationssystem som ligger högst upp på sidan. Då kan man använda ett ankar högst upp på sidan och sen längst nerifrån dokumentet göra en länk högst upp där menyn då lätt kan kommas åt Sida 19 av 99

20 E-postlänkar Det går även att skapa länkar till e-postadresser, alltså länkar som öppnar epostprogrammet och börjar på ett nytt meddelande till en person. En e-postlänk är en helt vanlig länk, men istället för att skriva en adress till en webbsida så skriver man en e-postadress istället. Innan e-postadressen måste man komma ihåg att skriva mailto:. Vi tittar på ett exempel: Vill du kan du <a ett epostmeddelande</a> till mig! Det kan se ut på följande sätt: Det är alltså precis lika enkelt att skapa en e-postlänk som en vanlig! Sida 20 av 99

21 Bilder Introduktion Det finns vissa filformat som är standardiserade och gjorda för att användas på internet. Alla webbläsare stödjer inte alla format vilket gör att det till exempel inte går att lägga ut till exempel en windows bitmap-bild (.bmp). På nästa sida så kommer det en översikt på de tre bildformat som tillsammans bildar vad som kan sägas vara standardformaten på Internet och som fungerar i de absolut flesta webbläsare: Sida 21 av 99

22 GIF JPEG PNG GIF står för Graphic Interchange Format och är ett perfekt format för enkla bilder med få färger. JPEG står för Joint Photographic Experts Group och är speciellt utvecklat för fotografier. PNG står för Portable Network Graphics och är ett relativt nytt format och det har bland annat utvecklas för att ersätta GIF. Fördelar Fördelar Fördelar Icke-förstörande komprimering Bilderna kan vara transparenta Nackdelar Oklara patentregler och upphovsrättsfrågor Tillåter få färger Stora filer för fotografier Små filer för fotografier Nackdelar Förstörande komprimering Icke-förstörande komprimering Bilderna kan vara transparenta och delvis transparenta Bättre komprimering än GIF Helt öppet format Nackdelar Stora filer för fotografier Delvis transparenta bilder stöds inte i alla webbläsare än Sammanfattning Sammanfattning Sammanfattning Använd GIF när du är osäker på att alla webbläsare inte stödjer PNG eller om du vill använda GIF istället för dessa. Använd JPEG till fotografier och större bilder där det inte märks att bilden förstörs lite. Använd PNG när du har bilder med få färger eller när du behöver ett format utan förstörande komprimering. Ännu inte fullständigt stöd för delvis transparenta filer i alla webbläsare Använd ett annat format till mindre bilder med få Använd när du behöver färger. genomskinliga bilder. Sida 22 av 99

23 Bilder är en viktiga delar till alla webbsidor och är dessutom mycket enkla att infoga i ett HTML-dokument. Taggen som du bör lägga på minnet är img. Dessutom har img-taggen några viktiga attribut som också är bra att komma ihåg. Först ut har vi src som är sökvägen till själva bilden och sen har vi ytterligare ett viktigt attribut, alt. Den skall användas till att specificera en alternativ text till webbläsare som inte klarar av att visa bilder, till exempel textbaserade webbläsare eller speciella programvaror för döva. Ett exempel på hur det kan se ut: <img src="tiger.png" alt="en tiger som springer"> Det här kommer att infoga bilden tiger.png på det angivna stället i webbsidan. Det kan tänkas se ut på följande sätt i en webbläsare: Tänk på att alltid ge en alternativ text till bilden med hjälp av alt-taggen. Se också till att texten ger någon slags uppfattning om vad bilden föreställer. Bilder som enbart har till funktion att fungera som någon del i layouten skall alltså inte ha någon beskrivning eftersom det inte är relevant. Däremot skall det finnas en alt-tagg, men den skall vara tom, alltså: <img scr="layout-bild.png" alt=""> och inte något annat Sida 23 av 99

24 Alternativ text och tooltip-text Ett vanligt misstag som görs är att man använder alt-taggen som tooltip-text. Internet Explorer gör felaktigt detta till en tooltip-text vilket inte är korrekt. Istället så ska man använda title-attributet för att uppnå detta. HTML-koden för detta kan se ut på följande sätt: <img scr="tiger.png" alt="en springande tiger" title="en enkel illustration av en tiger, gjord av en tiger"> Den här informationen skall alltså ge mer information om själva bilden eller det objektet det används på. I webbläsare som kan visa bilder visas texten då oftast i en så kallad tool tip-ruta. Vi tittar på hur det ser ut i våran webbläsare: Så enkelt var det! Sida 24 av 99

25 Listor En annan vanlig komponent på webbsidor och dokument i allmänhet är listor. Punktlistor, numeriska listor och andra listor. Dessa kan vara väldigt användbara i många olika situationer. Oordnad lista Vi börjar med en enkel punktlista, som skulle kunna vara en att göra-lista: <ul> <li>gå ut med hunden</li> <li>handla mjölk</li> <li>fixa webbdesignläxan</li> </ul> Det här kan då se ut på följande sätt i en webbläsare: Ul-taggen här motsvarar alltså en oordnad lista eller unordered list på engelska, därav namnet ul. Taggen li motsvarar en punkt eller list item på engelskan Sida 25 av 99

26 Självklart kan man också göra detta i flera nivåer, till exempel såhär: <ul> <li>gå ut med hunden</li> <li>handla</li> <ul> <li>mjölk</li> <li>bröd</li> <li>smör</li> <li>chokladyogurt</li> </ul> <li>fixa webbdesignläxan</li> </ul> Det kan då se ut på följande sätt i en webbläsare: Självklart kan man sedan fortsätta i ännu fler undernivåer och till och med blanda de här oordnade listorna med ordnade listor, som vi ska gå in på nu Sida 26 av 99

27 Ordnad lista En ordnad lista fungerar på exakt samma sätt som en oordnat lista, fast istället för att det är punkter så används någon typ av numrering. Dessutom så används taggen ol istället för ul. Vi tittar på ett exempel: <ol> <li>vispa ägget och sockret pösigt.</li> <li>tillsätt det smälta smöret och mjölken.</li> <li>blanda samman mjöl och bakpulver och blanda ner det försiktigt i smeten.</li> <li>smöra och bröa en bakform och häll i smeten.</li> <li>grädda kakan i 175 C i ca min i nedre delen av ugnen.</li> </ol> Det här exemplet kan se ut på följande sätt i en webbläsare: Självklart går det också att göra det i flera nivåer precis som i exemplet med den oordnade listan Sida 27 av 99

28 Dessutom så går det att blanda friskt med oordnade och ordnade listor. Det kan till exempel se ut såhär: <ol> <li>planera</li> <ul> <li>tänk först!</li> <li>gör en punktlista</li> <li>bygg vidare</li> </ul> <li>genomför</li> <ol> <li>samla information</li> <li>strukturera</li> <li>gör!</li> </ol> <li>kontrollera allt flera gånger</li> </ol> Resultatet kan då se ut på följande sätt i en webbläsare: Listor kan alltså kombineras på alla möjliga konstiga sätt Sida 28 av 99

29 Tabeller Tabeller är ju en historia för sig! En tabell brukar ofta se ut på följande sätt: Ja Nej Kanske Män 10% 20% 70% Kvinnor 30% 50% 20% En tabell delas i HTML-koden upp i flera olika taggar. Första har vi table-taggen som enbart specificerar att här kommer det att komma en tabell. Här kan vi även lägga in en ram runt tabellen och cellerna med hjälp av border-attributet. Nästa tagg är en tagg som specificerar att här kommer det att komma en ny rad i tabellen, det är tr-taggen. Den här tabellen kommer alltså att behöva ha tre stycken tr-taggar. Till det här kommer th- och td-taggarna som alltså motsvarar varje cell (ruta) i tabellen. De två taggarna fungerar på exakt samma sätt men med den skillnaden att th skall användas till celler som innehåller en rubrik eller information om vad den raden eller kolumnen innehåller för information, alltså ska första raden och första kolumnen använda th och resten av cellerna använda td. Såhär kan HTML-koden för tabellen ovan se ut: <table border="1"> <tr> <th></th><th>ja</th><th>nej</th><th>kanske</th> </tr> <tr> <th>män</th><td>10%</td><td>20%</td><td>70%</td> </tr> <tr> <th>kvinnor</th><td>30%</td><td>50%</td><td>20%</td> </tr> </table> Det här kan renderas lite olika beroende på vad man har för webbläsare Sida 29 av 99

30 Såhär kan det se ut i våran webbläsare: Ser helt okay ut faktiskt. Det finns väldigt mycket mer att säga om tabeller, det här är bara den mest grundläggande taggarna och attributen Sida 30 av 99

31 Ram eller kant Vill man ha en ram eller kant på tabellen så anger man detta med attributet border i tabelltaggen på följande sätt: <table border="1">...innehåll... </table> Ökar man värdet till exempelvis 2 eller 3 så kommer kanten att bli större. Prova själv får du se hur det ändras! Bredd Oftast vill man kanske att tabellen ska vara lite större än standardbredden. Tabellen brukar oftast se lite hoptryckt ut om man inte anger en bredd. Om man vill ange en bredd så kan man göra det på följande sätt: <table width="200">..innehåll... </table> Eller om man vill ange det i procent: <table width="50%">...innehåll... </table> Att ange en bredd på en tabell görs alltså med hjälp av attributet width i tabletaggen. Den kan anges både i pixlar och procent Sida 31 av 99

32 Rowspan och colspan Om man vill göra tabeller som inte bara använder sig av samma storlek på cellerna så finns det två attribut till td- eller th-taggen man kan använda sig av. De kallas rowspan och colspan och anger över hur många rader eller kolumner som cellen ska sträcka sig. Såhär kan en tabell se ut som använder sig av rowspan och colspan som ni ser så är de celler som det står tiger i speciella. Den första cellen som det står Tiger i har colspan="2" och den andra har rowspan="2". Såhär kan koden ut: <table border="1" width="90%"> <tr> <td>cow</td><td colspan="2">tiger</td> </tr> <tr> <td rowspan="2">tiger</td><td>cow</td><td>cow</td> </tr> <tr> <td>cow</td><td>cow</td> </tr> </table> Tittar vi lite noggrannare på den här koden så ser vi att det bara är två stycket td-taggar i första raden men tre stycken i den andra. Det här beror på att vi har en cell i första raden som sträcker sig över två kolumner och då får vi summan tre på varje rad. Rad tre innehåller och bara två celler, detta är precis som ovan därför att en cell i raden ovanför sträcker sig över två rader och alltså räknas även på den raden. Summan blir alltså tre även där Sida 32 av 99

33 Tabeller som layoutverktyg? I webbdesignsammanhang finns det en stor tradition att jobba med layouter som använder sig av tabeller. Det här är egentligen fel att göra. Tabeller ska bara för att ställa upp information, liknande den här tabellen ovanför. Men i och med att man inte haft några andra verktyg för att göra lite mer avancerade designer så har man använt sig av tabeller. Nu har man tillgång till CSS och designer som använder CSS blir numer vanligare och vanligare. Fördelen med det är att man separerar designen från informationen och på sätt gör webbsidan mer lättarbetad, mer tillgänglig (för folk med till exempel en webbläsare som kan bara visa text eller för folk med synskador), och dessutom är det ofta mycket enklare. Gamla webbläsare kan däremot ha lite problem med CSS och det kan därför vara bra att känna till att man även kan göra designer med hjälp av tabeller. Däremot ska man försöka undvika det om man inte måste Sida 33 av 99

34 Formulär Ytterligare en användbar del, speciellt när man jobbar tillsammans med ett programmeringsspråk till exempel PHP eller ASP, av HTML-standarden är hanteringen av så kallade formulär. Formulär ger dig möjlighet att låta besökarna mata in information i olika fält och sedan med hjälp av ett programmeringsspråk använda den informationen till att göra olika saker. Exempel på när du använder dig av formulär, när du: söker på Internet, för att skriva in sökord, loggar in på till exempel lunarstorm.se, beställer varor från e-handelssystem använder din ett webbepostsystem, till exempel Hotmail. Vi tar ett exempel på hur ett formulär kan se ut i en webbläsare: Sida 34 av 99

35 Ett formulär är väldigt enkelt att skapa i HTML, men man måste precis som det sagts ovan ha ett programmeringsspråk för att kunna utnyttja datan man får från formuläret Sida 35 av 99

36 Frames (Ramar) Frames eller ramar är en i vissa sammanhang väldigt behändig och lättsam teknik. Det hela bygger på att man kan dela upp en webbsida i olika rutor (frames) och ha en html-fil för varje ruta. En sida håller reda på hur rutorna skall ritas upp och vilka html-sidor som skall visas i vilka. Vi tar ett exempel: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title>testsida för frames</title> </head> <frameset cols="200,*"> <frame src="meny.html" name="meny"> <frame src="sida.html" name="sida"> </frameset> <noframes> <p>din webbläsare stödjer inte frames</p> </noframes> </html> Som du ser högst upp i dokumentet så använder man sig av en speciell doctype när man jobbar med frames-dokument. Istället för den vanliga strict eller transitional så använder man sig logiskt av frameset-doctypen. Alltså: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " Näst efter doctype så kommer de vanliga taggarna du känner igen. Det är head och title. Men sen är det något som inte är som de brukar. Body-taggen är utelämnad! Det beror på att man i ett sådant här dokument inte har något egentligt innehåll utan bara beskriver hur de olika ramarna skall ritas upp Sida 36 av 99

37 framset Den första taggen vi stöter på är frameset den anger bara att det skall skapas en ny uppsättning av ramar eller frames. Vi börjar med att titta på hur en sådan uppsättning kan se ut: <frameset cols="200,*"> <frame src="meny.html"> <frame src="sida.html" name="main"> </frameset> Den här uppsättningen kan renderas på följande sätt i en webbläsare: Som ni ser här i bilden ovan så visas alltså två sidor i kolumner. Vi börjar med att analysera den första kodraden här. <frameset cols="200,*"> Taggen frameset angav ju som vi sa tidigare en ramuppsättning. Just den här ramuppsättningen skapar två kolumner. Det bestäms med attributet cols. Cols-attributet innehåller just här i exemplet ovan två värden; 200 och *. Det betyder att den skapar två kolumner, en som är 200 pixlar bred och en som använder resten av den fria ytan. Det går även att använda procentuella värden, detta görs genom att skriva till exempel 50%. Då anger man att den ska ta upp halva utrymmet Sida 37 av 99

38 Vill man istället skapa rader så använder man sig av attributet rows istället för cols. Exemplet ovan kan då se ut på följande sätt istället: <frameset rows="50,*"> <frame src="meny.html"> <frame src="sida.html" name="main"> </frameset> Och kan då se ut såhär i en webbläsare: Då ser du att det istället för kolumner har skapats en ramuppsättning i rader Sida 38 av 99

39 frame När man gör en ramuppsättning så vill man ju också kunna bestämma vilken html-fil som skall visas i vilken frame, eller ram. Det görs med hjälp av frame-taggen. En frame-tagg kan se ut ungefär såhär: <frame src="sida.html" name="main"> Attributet src anger vilken fil som skall visas i den ramen och name är ett unikt namn som man senare kan använda för att få länkar att öppnas i en speciell ram. Det måste finnas lika många frame-taggar som kolumner eller rader man har angett i frameset-taggen. Om vi tittar på exemplet från tidigare: <frameset cols="200,*"> <frame src="meny.html"> <frame src="sida.html" name="main"> </frameset> Frameset-taggen i det här exemplet säger att det skall vara två kolumner (en 200 pixlar bred och en som använder resterande utrymme). I den första kolumnen, eller ramen, skall sidan meny.html visas och i andra kolumen, eller ramen, skall sidan sida.html visas. Den andra ramen skall även få det unika namnet main Sida 39 av 99

40 Avancerade frameset Det går även att kombinera flera frameset-taggar och på så sätt kan man skapa lite mer avancerade ramuppsättningar. Vi tar ett exempel: <frameset cols="200,*,200"> <frame src="meny_left.html"> <frameset rows="100,*,100"> <frame src="page_top.html"> <frame src="page.html"> <frame src="page_bottom.html"> </frameset> <frame src="meny_right.html"> </frameset> Det man har gjort i det här exemplet är att man bytt ut en av frame-taggarna, mer specifikt den som skulle gälla för det resterande utrymmet. Alltså kolumn två. Istället för en frame-tagg så har man satt in ytterligare en frameset-tagg vilket betyder att man på platsen för den andra kolumnen har skapat ytterligare en ramuppsättning med tre rader Sida 40 av 99

41 Den här sidan kan se ut på följande sätt: Det kan vara lite krångligt att förstå logiken i detta men, enkelt uttryckt så kan man alltså byta ut en frame-tagg mot en frameset-tagg och på så sätt skapa mer avancerade ramuppsättningar Sida 41 av 99

42 Utseende Det går att ställa in olika saker på ramarna beroende på hur de ser ut. Ett attribut är noresize som anger att det inte ska gå att ändra storlek på ramen. Noresize skrivs direkt i taggen på följande sätt: <frame src="page.html" noresize> Ytterligare ett attribut är scrolling som anger om det ska finnas ska finnas några rullningslister i den ramen. Scrolling kan ha värdena auto, yes eller no. Ett exempel kan se ut på följande sätt: <frame src="meny.html" scrolling="no"> Vill man inte att det ska vara någon kant på den ramen så kan man använda sig av attributet frameborder. Attributet kan vara antingen 0 eller 1, alltså på eller av. Ett exempel på det: <frame src="page.html" frameborder="0"> De sista attributen vi ska ta upp här är marginwidth och marginheight som används till att ställa in vilka marginaler ramen ska ha (i pixlar). Används som följer: <frame src="tiger.html" marginwidth="20" marginheight="40"> Sida 42 av 99

43 Ramar och länkar (target) Ofta vill man att länkar skall öppnas i en speciell ram. Man kan till exempel ha en ramuppsättning med två kolumner där den första är en en meny och den andra är platsen där allt innehåll är tänkt att visas. Det man gör då är att man först döper själva ramen där innehållet skalla visas till ett unikt namn (med hjälp av name-attributet). Sen använder man sig av följande kod på länkarna: <a href="intressen.html" target="sidan">intressen</a> Den här länken kommer alltså att öppna sidan intressen.html i ramen med namnet sidan. Så enkelt var det! Sida 43 av 99

44 noframes Om en webbläsare inte stödjer ram-tekniken så kan det vara en bra idé att lägga in en alternativ text eller ett alternativt sätt att komma åt sidan. Till exempel kan det vara en bra idé att lista länkarna till sidorna i ramuppsättningen så man kan gå in på dom var för sig manuellt eller så har man någon annan smidig lösning. Oftast brukar man dock använda det här fältet till att enbart skriva: Din webbläsare stödjer inte ramar, uppgradera till en nyare. Vilket inte är särskilt intressant eller informativt egentligen. Försök hitta en mer vettigare text att använda än just denna. Gör gärna precis som jag beskrev ovan här med länkar till alla sidorna i ramuppsättningen. Till exempel på följande sätt: <noframes> <p>min sida:</p> <ul> <li><a href="intressen.html">mina intressen</a></li> <li><a href="kontakta.html">kontakta mig</a></li> </ul> </noframes> Då presenteras användaren med en lista med länkar istället för av en tråkig text som säger att sidan kan inte visas eftersom deras webbläsare inte stödjer ramar Sida 44 av 99

45 Meta-information För sökmotorer För att kontrollera bättre hur sökresultat visas i en sökmotor så kan man ta hjälp av en speciell tagg. Meta. <meta <meta <meta <meta name="author" content="namn"> name="copyright" content=" 1997 Företag / Person."> name="keywords" content="nyckelord, nyckelord, nyckelord"> name="description" content="en kortare beskrivning."> Den här sortens användning av meta-taggar är påväg bort och kommer då istället att ersättas med något som kallas RDF, Resource Description Framework. Det kan dock vara bra att känna till dessa taggar eftersom det fortfarande används. Man kan dock inte vara säker på hur eller om sökmotorn väljer att visa dessa dessa resultat. Övriga användningsområden Meta-taggar har även andra användningsområden. De kan till exempel användas för att ändra på HTTP-headrar. Här är ett exempel på hur man kan ändra på teckenuppsättningen: <meta http-equiv="content-type" content="text/html; charset=iso8859-5"> Det här är väldigt behändigt eftersom man då inte behöver ersätta alla å, ä och ö med motsvarande specialtecken. Oftast skickas webbsidorna med teckenuppsättningen UTF-8 vilket inte innehåller å, ä och ö Sida 45 av 99

46 Span och Div Det finns två speciella taggar som inte gör något mer än att gruppera ihop andra taggar eller innehåll. I ren HTML har dessa två inte något större användningsområde, utan den stora vinsten får man när man använder dessa ihop med CSS. <div> <a href="lank.html">länk</a> <a href="lank.html">länk</a> <a href="lank.html">länk</a> </div> Det här samlar ihop ett antal länkar till ett block och kan sedan användas för att bestämma ett visst utseende på dessa. Likadant kan man göra med span: <p>det här är en <span>mycket viktigt</span> text</p> Skillnaden mellan div och span är just att div används för att gruppera element mer i ett block, medans span används mitt inne i texter. Mer om detta i kapitlet om CSS Sida 46 av 99

47 CSS 2.1 Introduktion / Strukturer Intro Som du har märkt i HTML-biten av det här dokumentet, så finns det inte många möjligheter att i HTML-koden bestämma hur sidan kommer att se ut i webbläsaren. Det är precis av den anledningen CSS skapades. Att man separerar själva innehållet från informationen hur sidan skall se ut har flera poänger. Lättare att skapa ett enhetligt utseende. Bättre struktur. Det ökar kodens läslighet. I tidigare versioner av HTML så separerades inte dessa två och filerna blev krångliga och svårläsliga. Lättare att tolka och läsa för alternativa webbläsare, till exempel för synskadade. Det finns till och med vissa bitar i CSS som gör att man kan bestämma hur den ska tolkas om den skulle läsas upp. CSS är anpassat för att kunna användas till mycket annat! Vi tar ett exempel på hur en snutt CSS kan se ut: h1 { color: red; } Om man kopplar ihop detta med ett HTML-dokument så kommer det att innebära att all text som är inom h1-taggarna blir röd. Detta kommer alltså att gälla alla h1-taggar i det dokumentet man länkar in CSS:en i. Sida 47 av 99

48 Man skriver CSS-kod efter en mall som ser ut ungefär såhär: html-tagg { attribut: värde; } Man börjar alltså med den html-taggen man vill ändra utseende på, sätter in ett mellanslag och sen en start-klammerparentes ({). Vanligtvis brukar man sedan börjar på en ny rad och sätta in en tabb innan man börjar skriva attributet och värdet. Till sist så avslutar man med en ny radbrytning och ytterligare en slut-klammerparentes (}). Vill man använda fler attribut till en tagg är det bara att fortsätta skriva dessa såhär: html-tagg { attribut: värde; attribut: värde; } Skulle man göra detta med till exempel h1-taggen så skulle det kunna se ut såhär: h1 { color: red; background-color: black; } Det här skulle innebära att alla rubriker (nivå 1) skulle få röd text och en svart bakgrund. Redan i den här korta kodsnutten så har vi gått längre än det tidigare gick att göra med vanlig HTML. I tidigare versioner av HTML så har det aldrig vart möjligt att sätta en bakgrundsfärg på en h1-tagg. Sida 48 av 99

49 Tre sätt att infoga CSS Via en link-tagg som länkar till en extern fil. Det här är det vanligaste sättet. Man infogar en link-tagg i huvudet i HTML-dokumentet. Det ser oftast ut på följande sätt: <html> <head> <title>stardust</title> <link rel="stylesheet" href="cssfilen.css" type="text/css"> </head>... Link-taggen skall befinna sig i sidhuvudet, alltså mellan <head> och </head>. Attributet rel specificerar vad det är man länkar till5, href specificerar vilken fil eller plats man länkar till och type vilken typ av dokument det handlar om (MIME6). Via en style-tagg Du kan även skriva CSS direkt i HTML-dokumentet med hjälp av en speciell tagg, style. Det kan se ut på följande sätt: <html> <head> <title>moondust</title> <style type="text/css"> h1 { color: blue; } </style> </head>... Detta kommer då att göra eventuella huvudrubriker (nivå 1) blåa. Via ett style-attribut på en tagg Det sista sättet är att sätta CSS direkt på en tagg. 5 Det går att länka till många olika saker med hjälp av link-taggen. Den har alltså inte bara med CSS att göra. 6 MIME är en förkortning på Multipurpose Internet Mail Extensions och är ett sätt för webbläsare och epostklienter att avgöra vad de ska göra med filer. Sida 49 av 99

50 <h1>rubrik</h1> <p style="color: red;">den här texten kommer att blir röd!</p> Enheter Det går att använda sig av många olika enheter, för att specificera längder och annat, när man jobbar med CSS. Dessa går att dela upp i två olika grupper: Relativa: Enhet Beskrivning em Motsvarar teckensnittsstorleken, matchar font-size ex X-höjden, ofta höjden på bokstaven x px Pixlar, varierar beroende på vart dokumentet visas Att dessa kallas relativa enheter beror på att de inte är några exakta mått; em liksom ex varierar med teckenstorleken och px varierar beroende på vilken sorts enhet sidan visas på. Dock kan man säga att px är en ganska fast om den visas enbart på datorer. Fasta: Enhet Beskrivning in Tum, motsvarar 2,54 centimeter cm Centimeter mm Millimeter pt Punkter, motsvarar 1/72 tum pc Pica, motsvarar 12 punkter Dessa är ganska självförklarande och jag kommer inte att gå in på dessa något djupare. Alla dessa enheter kallas fasta därför att en centimeter alltid är en centimeter oavsett om den skrivs ut, visas på datorskärmen eller något annat. Sida 50 av 99

51 Utöver detta så finns det ytterligare en enhet; procent. Det går oftast att använda i de flesta situationer! Sida 51 av 99

52 Unika id:n I HTML finns det möjlighet att ge taggar unika id:n. Det här kan man sen utnyttja tillsammans med CSS för att ge just den taggen speciella egenskaper eller ett speciellt utseende. I själva HTML-koden kan det till exempel se ut på följande sätt: <div id="nyheter">... </div> Detta kombineras sen med CSS ungefär såhär: #nyheter { background-color: red; padding: 10px; } Istället för att man skriver namnet på HTML-taggen så skriver man istället en stjärna följt av id:t. I det här fallet har ju div-taggen det unika id:t nyheter, så när man vill ändra just den taggen med det id:t så skriver man alltså #nyheter. Tänk på att id:n är unika! Ett id kan alltså bara finnas på en tagg. Sida 52 av 99

53 Klasser Ibland hamnar man i den situationen att man vill att vissa bitar på sidan ska visas lite olika. Det går ju att använda id:t precis som vi tittade på förut, men vill man använda samma ändring ska kunna gälla flera taggar så måste man hitta en annan lösning. Den lösningen heter klasser. Vill man skapa en klass i CSS så gör man på följande sätt:.warning { color: red; font-weight: bold; } Den här kan man sedan applicera på en tagg genom att skriva om den såhär: <p>ett vanligt stycke</p> <p class="warning">ett speciellt stycke som kommer att bli rött och visas med fet stil</p> Det går också att bestämma att en speciellt klass bara ska kunna fungera på vissa taggar. vill man till exempel att den här klassen här ovan bara ska gå att använda på p-taggar så kan man göra såhär: p.warning { color: red; font-weight: bold; } Den kommer då bara att kunna användas på p-taggar. Man kan också göra så att flera klasser används på en tagg genom att i class-attributet separer dessa med ett mellanslag, såhär: <p class="warning notice">ett speciellt stycke som använder sig av klasserna warning och notice</p> Den här paragrafen kommer alltså att få egenskaperna från klasserna warning och notice. Sida 53 av 99

54 När man döper klasser så ska man försöka använda logiska namn och inte namn som anger hur det ser ut. Klassen som jag här ovanför har döpt till warning är ett bra exempel på hur det kan göras. Den klassen anger att just det stycket kanske ger en varning till användaren. Istället för att döpa den till då redbold eller något annat så har jag döpt den just till vad den representerar. Vill jag sedan i efterhand ändra så att varningen ska vara blå istället för röd så har jag ju tappat hela logiken om jag skulle använda mig av namnet redbold. Välj logiska namn! Även om klasser tillåter att man kan ändra vissa taggar så innebär det inte att man ska gå ifrån den vanliga strukturen i dokumentet. Är en viss text en rubrik så ska den använda en h-tagg och inte en p-tagg som använder en speciell klass. Sida 54 av 99

55 Pseudo-klasser I CSS finns något som heter pseudo-klasser som kan vara användbart att känna till. Med hjälp av pseudo-klasser så kan man bestämma att det kan se olika ut när man för musen över länkar, när man har besökt länkarna och när man trycker på dem. a:link a:visited a:hover a:active { { { { color: color: color: color: red } /* blue } /* yellow } /* lime } /* Vanlig länk Besökt länkt Mus över länken Aktiv länk */ */ */ */ Såhär kan det se ut i CSS när man säger att länkarna ska se olika ut beroende på detta. Klasser skriver men alltså som tagg:pesudoklass. De viktigaste pseudo-klasserna är: :first-child...matchar första elementet :link... Enbart för länkar (Matchar vanliga länkar) :visited... Enbart för länkar (Matchar besökta länkar) tagg:active... Aktivt objekt tagg:hover... Mus över objektet tagg:focus... Fokus på objektet Det är alltså inte bara på länkar det hår att använda focus, active och hover. Prova använda dessa på andra taggar. Tänk på att det kanske inte fungerar i alla webbläsare. Sida 55 av 99

56 Färger och bakgrunder Ett av de vanligaste problemen är att man vill ha lite olika färger, bakgrundsfärger och bakgrundsbilder på sina olika objekt. Detta löser man genom attributen color, background-color och background-image. Vi börjar med att titta på color. Säg att vi vill att alla våra rubriker, alltså h1-taggarna, ska vara gul text mot svart bakgrund så kan man göra på följande sätt: h1 { color: red; background-color: black; } Självklart kan man också använda sig av lite mer exaktare färger genom att specifiera dessa med antingen ett hexadecimalt värde eller ett vanligt. Det finns många olika sätt att specifiera färger, här är fem olika sätt att bestämma att färgen ska vara röd: color: color: color: color: color: red; rgb(255, 0, 0); rgb(100%, 0%, 0%); #ff0000; #f00; Vanligtvis vill man ju ha en bakgrundsbild eller bakgrundsfärg på hela dokumentet. Det löser man genom att i CSS ändra på body-taggen på följande sätt: body { background-color: #000; background-image: url(background.png); } Det här kommer att sätta bakgrunden på sidan till svart och sen lägga bakgrundsbilden background.png över hela sidan. Sida 56 av 99

57 Färger När man pratar om färger i datorsammanhang så finns det vad man kallar färgskalor. Vi har till exempel CMYK (cyan, magenta, yellow, black) och RGB (red, green, blue). Skillnaden mellan dessa är hur man blandar olika färger. När man jobbar med webbsidor använder man sig av RGB, alltså blandar man alla färger med hjälp av en viss del röd, en viss del grön och en viss del blå. Maximalt kan man ha ett värde mellan 0 och 255 för varje färg. Alltså 256 olika värden per färg. Det ger alltså sammanlagt olika färgkombination. Värde 255 för röd, 0 för grön och 0 för blå, ger alltså en maximal röd färg medans 255 för röd, 255 för grön och 0 för blå ger en gul färg. Hexadecimala talsystemet För att ange dessa värden använder man sig då oftast av det hexadecimala talsystemet. I vårt vanliga decimala talsystem har vi en bas på tio. I det hexadecimala har vi istället en bas på sexton siffror, 0 till F. Man räknar alltså på följande sätt: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, osv Talet 255 i det decimala talsystemet motsvarar alltså FF i det hexadecimala. Eftersom varje färgvärde var mellan 0 och 255 så motsvaras detta alltså av 0 och FF i det hexadecimala systemet. För att ange ett färvärde behöver vi alltså tre grupper av siffror mellan 0 och FF. Detta skrivs på följande sätt: #ff00ff Man börjar med ett nummertecken (#) och börjar därefter med första gruppen siffror. Det här värdet motsvarar alltså 255, 0, 255, vilket är en skarpt rosa färg. Det går även att skriva det på ett kortare sätt med bara ett tecken per grupp. Då motsvarar alltså #f0f det längre värdet #ff00ff, lika väl som #b34 motsvarar #bb3344. Sida 57 av 99

58 Enhet Beskrivning color Färg på text eller element, anges oftast med ett hexadecimalt värde. Exempelvis #f00 för röd. background-color Bakgrundsfärg, anges precis som color oftast med ett hexadecimalt värde. Exempelvis #0f0 för grön. background-image Sökväg till bakgrundsbilden: url(bgimage.png) background-repeat repeat, repeat-x, repeat-y eller no-repeat beronde på om du vill att bakgrunden skall upprepas eller inte, eller på vilket sätt. background-position Till exempel: 10px 20px placerar bilden 10 pixlar från vänster och 20 pixlar från toppen. Även andra värden som center, left och right är också tillåtna. background-attachment Anger om bakgrunden skall vara fast eller följa med när man använder rullningslisten. Giltliga värden är scroll eller fixed Sida 58 av 99

59 Teckensnitt Nu till något väldigt användbart! Säg att du har ett långt HTML-dokument med många paragrafer och rubriker på och vill ha ett gemensamt utseende på dokumentet. Oftast har man då ett HTML-dokument som kan se ut på följande sätt: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>tigrar</title> </head> <body> <h1>tigrar</h1> <p>den största populationen av tigrar finns i Asien</p>... <h2>utbredning</h2> <p>främst finns tigrar i Asien, men enstaka exemplar finns även i Sverige, då främst på zoo.</p>... </body> </html> Till detta kopplar man då CSS: h1 { font-family: Verdana; font-size: 22px; } h2 { font-family: Verdana; font-size: 20px; } p { font-family: Verdana; font-size: 12px; } Vill jag att h1 skall ha fet text och h2 kursiv så kan man göra det på följande sätt med hjälpa av font-style och font-weight: Sida 59 av 99

60 h1 { font-family: Verdana; font-size: 22px; font-weight: bold; } h2 { font-family: Verdana; font-size: 20px; font-style: italic; } Andra intressanta attribut eller egenskaper är: Sida 60 av 99

61 Enhet Beskrivning font-family Motsvarar teckensnittet. Flera går att specificera genom att kommaseparera. font-style Giltliga värden är: normal, italic eller oblique. Anger vilken typ av stil teckensnittet skall ha. font-variant font-weight Bestämmer att en text skall vara fet, och hur fet den skall vara. Giltliga värden är bland annat: normal, bold, bolder och lighter. font-size Bestämmer stoleken på texten, kan anges i bland annat pixlar, em och många andra enheter. Exempelvis: 12px. Sida 61 av 99

62 Texthantering Ofta vill man göra vissa texter centrerade, till exempel rubriker, blir centrerade. Då använder man sig av text-align. Vill jag till exempel göra h1-taggarna centrerade så kan jag göra såhär: h1 { text-align: center; } Då kommer alla h1-rubriker att bli centrerade. Vill jag sen även att dessa rubriker ska vara understruken så får jag använda mig av text-decoration. I CSS kan det se ut såhär: h1 { text-align: center; text-decoration: underline; } Ofta brukar man även använda text-decoration på a-taggen. Varför? Jo genom att sätta text-decoration: none på länkarna så får man bort understukningen på länkarna, vilket kan få en ganska läcker effekt. Såhär ser det ut i CSS: a { text-decoration: none; } Sida 62 av 99

63 Egenskap Beskrivning text-indent Används för att göra indrag i första raden text. För att dra in raden 3 centimeter så kan du använda: 3cm text-align Används för att välja centrerad, vänsterjusterad, högerjusterad eller marginaljusterad text. Använd left, right, center eller justify. text-decoration Använnds för att dekorera texten. Följande värden är tillåtna: underline, overline, line-through, blink eller none. letter-spacing Specifierar mellanrummet mellan bokstäver. word-spacing Specifierar mellanrummet mellan ord. text-transform Används för att bestämma hur texten skall använda stora bokstäver. Tillåtna värden är: capitalize, uppercase, lowercase och none. white-space Bestämmer hur mellanslag och andra så kallade white spaces hanteras i texten. Tillåtna värden är: normal, pre, nowrap, prewrap och pre-line. Sida 63 av 99

64 Rutor (Box) I CSS finns det något som kallas box-modellen. Det går ut på att många element visas eller renderas just som en box och därför har man en modell över hur just dessa element ska visas. Det finns lite olika saker man måste veta innan man kan rendera en box. Hur stor marginal det är runt objektet, hur stor ram det är, hur stor utfyllnad den har samt hur brett objektet är. Bredden på en box beräknas alltså på följande sätt: vänstermarginalen + vänsterramen + vänsterutfyllnad + bredden + högerutfyllnaden + högerramen + högermarginalen Höjden räknas också ut på motsvarande sätt. Här är en bild tagen direkt från specifikationen: Sida 64 av 99

65 Egenskap Beskrivning margin Tar ett, två, tre eller fyra värden. Sätter du ett värde så sätter den alla marginaler till det värdet, sätter du två så sätter den top och bottom till det första och left och right till det andra. Sätter du tre värden så sätter den det första till top, nästa till bottom och det tredje till left och right. Fyra värden sätts till respektive top, right, bottom och left. margin-top Sätter övre-marginalen till ett värde margin-right Sätter höger-marginalen till ett värde margin-bottom Sätter nedre-marginalen till ett värde margin-left Sätter vänster-marginalen till ett värde padding Se margin padding-top Sätter övre utfyllnaden till ett värde padding-right Sätter högra utfyllnaden till ett värde padding-bottom Sätter nedre utfyllnaden till ett värde padding-left Sätter vänstra utfyllnaden till ett värde border Kan användas för att bestämma att en visst element ska ha en ram runt sig. Det finns tre delar i border, den bestämmer hur tjock ramen skall vara. Giltiga värden för detta är: thin, medum, thick eller annat valfritt värde till exempel 1px. Den andra delen bestämmer vilken typ av ram det ska vara. Giltliga värden för detta är: none, hidden, dotted, dashed, solid, double, groove, ridge, inset och outset. Den tredje delen bestämmer färgen. Kan till exempel vara #000 för svart. Ett exempel är: 2px solid #00f vilket kommer att ge en blå heldragen linje som är två pixlar bred. border-top Samma som border fast ändrar bara ramen längst upp. border-right Samma som border fast ändrar bara den högra ramen. border-bottom Samma som border fast ändrar bara ramen längst ner. border-left Samma som border fast ändrar bara den vänstra ramen. Sida 65 av 99

66 Listor Det går också att via CSS bestämma hur listorna ska se ut. Du kan bestämma vilken sorts numreringstyp du vill ha för listorna, eller om du vill ha en speciell bild istället för en vanlig punkt. Här bestämmer jag att jag vill använda en fyrkant till min oordnade lista istället för att använda den vanliga punkten: ul { list-style-type: square; } Sen vill jag att min ordnade lista ska använda sig av romerska siffror istället för vanliga siffror: ol { list-style-type: lower-roman; } I en tredje lista kanske jag väljer att använda en bild istället: ul { list-style-image: url(my_dot.png); } //TODO list-position Sida 66 av 99

67 Egenskap Beskrivning list-style-type Bestämmer hur punkten eller siffran framför listan skall se ut. Möjliga värden är: disc, circle, square, decimal, decimal-leadingzero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian och none list-style-image Går att använda istället för list-style-type. Istället för att då använda en förutbestämt utseende så kan man använda sig av bilder. Ett giltigt värde kan var: url(bilden.png) list-style-position Bestämmer om punkten skalla vara inne i texten eller utanför. Det här märks bara om en viss punkt sträcker sig över mer än en rad. Giltliga värden är inside eller outside. list-style En kortare variant man kan använda istället för alla ovan. Går till exempel att skriva på följande sätt: list-style: upper-roman inside Sida 67 av 99

68 Utseende (Block / Inline) Det går att bestämma vart och hur vissa saker kan visas. Det finns två vanliga grundregler för hur saker kan visas. De vanligaste är inline och block. De skiljer sig åt på en viktiga punkt; hur de renderas. Ett block genereras just som ett block och kommer att sträcka sig över så stor yta den kan i sidledd och kommer att göra så att nästa tagg eller element som visas kommer att hamna på en ny rad. Inline kan däremot visas mitt i en textmassa utan att röra till det på detta sätt, inte ta plats i sidledd och inte göra så att nästa element visas på en ny rad. Här följer en lista på hur olika element renderas: Inline Block Länkar (a) Rubriker (h1, h2,...) Bilder (img) Stycken (p) Tabeller (table) Span-taggen (span) Div-taggen (div) Sida 68 av 99

69 Skillnaden på ett block och en inline kan se ut såhär: Här är rutan (eller boxen ) runt elementet markerad med en prickad linje. Detta är bara för att man ska se skillnaden. Ett block sträcker sig alltså över hela sidan, horisontellt. En bättre skillnad ser man om vi tittar på ett annat exempel: Här är p-taggarna markerade med en prickat kantlinje och det är även länkarna. P-taggar visas normalt som block medans länkar normalt visas som inline. Sida 69 av 99

70 För att hur något visas så använder man sig av display. Det kan se ut såhär: a { display: block; } Att ändra på hur olika objekt renderas kan vara väldigt användbart. Till exempel så kan man ju inte positionera ett element som renderas som inline hur som helst. p { display: inline; } Det finns ytterligare värden man kan använda sig av, bland annat för att rendera tabeller. Dessa två är dock absolut vanligast. Sida 70 av 99

71 Egenskap Beskrivning display Bestämmer hur elementet skall renderas. Giltliga värden är inline, block, list-item, run-in och inline-block. Dessutom finns ytterligare värden som har med tabeller att göra. Sida 71 av 99

72 Positionering Introduktion Det skulle ju också handla om positionering. Det finns flera sätt där man kan bestämma hur objekt skall visas. I CSS finns fyra stycken lägen definierade: Static Absolute Relative Fixed Dessa skiljer sig ganska mycket åt. Vi börjar med den absolut vanligaste, vilket är static. Alla element renderas vanligtis som static och det finns oftast ingen anledning att i CSS ge något element det värdet. Nästa värde är absolute som man använder när man vill positionera ett element på en speciell position. Det kan vara ett visst antal pixlar från vänsterkanten eller liknande. Ett som kan vara lite krångligt är relative. Det används när man till exempel vill flytta ett element ett visst avstånd från sin ursprungliga position. Avståndet är alltså realtivt till den ursprungliga positionen. Det sista värde är fixed, som har många likheter med absolute. Skillnaden är att ett element som är positionerat med hjälp av fixed inte flyttar på sig även om man scrollar, alltså är det helt fast placerat. Tillsammans med absolute, relative och fixed så använder man top, right, bottom och left som anger avstånd. Användningen skiljer sig lite från de olika lägena. Har det inte sjunkt in än så kommer det många exempel längre ner. Sida 72 av 99

73 Position: absolute #lager { position: absolute; top: 15px; left: 15px; width: 100px; background-color: #ddd; } Den här CSS-snutten säger åt webbläsaren att placera elementet med id:t lager 15 pixlar uppifrån och 15 pixlar från vänster. Elementet skall också vara 100 pixlar brett och ha en grå bakgrundsfärg. Vi kopplar ihop det med följande HTML-kod: <div id="lager"> <p>det här är ett lager</p> </div> <h1>vanlig placering</h1> <p>text som inte berörs av någon speciell positionering placeras i vanlig ordning.</p> Det renderas på följande sätt: Som du ser så placeras alltså lagret övanför den vanliga texten. Den här tekniken brukar ofta kallas lager. Sida 73 av 99

74 Position: relative Vi pratade förut om att static var läget när elementen renderades precis som vanligt. Läget relative ger en möjlighet att förskjuta element från detta läge. Du kan alltså säga att elementet skall ligga ett par pixlar mer åt höger än vanligtvis. a { position: relative; bottom: 5px; } Det här kommer alltså att göra så att länkarna höjer sig två pixlar över all annan text. Vi kikar på ett litet exempel: <p>det här är bara en enkel liten text med ett par länkar till <a href=" Det här är bara en enkel liten text med ett par länkar till <a href=" Det här är bara en enkel liten text med ett par länkar till <a href=" Exemplet ser ut på följande sätt i en webbläsare: Som du ser så är länkarna mycket riktigt upphöjda fem pixlar ovanför den vanliga texten. Då här fungerar alldeles utmärkt att göra på de flesta element. Sida 74 av 99

75 Position: fixed Det sista värdet för position är väldigt intressant. Tyvärr så stödjer den största webbläsaren på marknaden inte det här, faktum är att den genomgående har ganska dåligt stöd för CSS. Det gör att man tyvärr måste begränsa dessa användning. Det hindrar dock inte oss från att prova hur det fungerar: body { padding-left: 100px; } #sidolista { position: fixed; width: 80px; top: 10px; left: 10px; } Till det här har vi som vanligt lite HTML-kod: <div id="sidolista"> <p>det här hade kunnat vara en meny eller en viktig text</p> <h1>en rubrik</h1> <p>en massa mängd text...</p> <p>en massa mängd text...</p> <p>en massa mängd text...</p> </div> Sida 75 av 99

76 Vi ser hur det ska visas här nedan: Längst upp på sidan: Längst ner på sidan: Som du ser så ligger rutan kvar på precis samma position (i relation till webbläsarens fönster). Till skillnad mot absolute som också ligger kvar på sin position men då bara i relation till själva sidan. Sida 76 av 99

77 Egenskap Beskrivning position Bestämmer vart objektet skall vara placerat. Giltiga värden är: static, relative, absolute och fixed. top Hur långt uppifrån ska elementet vara placerat. right Hur långt från höger ska elementet vara placerat. bottom Hur långt från botten ska elementet vara placerat. left Hur långt från vänster ska elementet vara placerat. Sida 77 av 99

78 Float Introduktion Ytterligare en smart grej med css är att man kan låta element flyta. Antingen till höger eller till vänster. Om vi betraktar följande lilla html-snutt: <p> <img src="bild.png"> Den här texten kommer inte att lägga sig runt... </p> Den kommer i en webbläsare antagligen att få följande resultat: Vill man i stället att texten skall flyta fint runt bilden så kan man använda sig av något som heter float. Att få en bild att flyta till höger eller vänster i en text är den enklaste och kanske mest vanliga användningsområdet för så kallade floats. Sida 78 av 99

79 Det kan man lösa genom att använda sig av den här lilla snutten CSS. Den ändrar på hur alla img visas. Alltså alla bilder, oftast vill man kanske bara ändra på en speciell. img { float: left; } Men vi börjar med att titta på hur det ser ut om man kopplar den CSS:en till den här HTML-koden: <p> <img src="bild.png"> Den här texten kommer att lägga sig runt bilden... </p> Det kommer nu istället att se ut ptrå följande sätt: Du ser ganska tydligt skillnaden. Nu ligger kanske bilden och texten lite väl nära varandra, men det löser man väldigt lätt genom att lägga en marginal på bilden med hjälp av margin. Vill man att bilden skall lägga sig till höger gör man på precis samma sätt men använder istället följande snutt: (Alltså helt enkelt right i stället för left) img { float: right; } Sida 79 av 99

80 Clear En sak man måste tänka på när man jobbar med floats, eller vad som kan kallas en användbar funktion är något som kallas clear. Ofta när man jobbar med mer avancerade tillämpningar av float så använder man sig av clear. För att förstå vad det är tittar vi på följande exempel: <p><img src="bild.png">det här är första stycket</p> <p>det här är andra stycket</p> Om vi i det här exemplet förutsätter att bilden flyter till vänster så kommer det att se ut ungefär såhär i en webbläsare: Det ser kanske inte ut exakt så som vi hade tänkt oss. Som du ser så flyter bilden in även över det andra stycket. Det är på grund av det här beteendet vi kan vela använda oss clear. Clear kan alltså göra så att elementen inte flyter över på det här sättet. Left, right och both är giltiga värden för clear, och den gör så att beroende på om bilden flyter till höger eller vänster så börjar det nedanför elementet. Sida 80 av 99

81 Vi tittar på samma exempel som förut: <p><img src="bild.png">det här är första stycket</p> <p>det här är andra stycket</p> Men bestämmer att följande CSS ska gälla: img { float: left; } p { clear: left; } Clear left, kommer här att göra så att vi inte tillåter objekt att flyta vidare in i stycket (p). Vi tittar på hur det ser ut: Samma sak kommer att gälla för alla olika clear. Vill man att ett element som flyter till vänster inte skall fortsätta flyta i nästa stycke kan du sätta clear: left; på det stycket. Flyter det till höger kan du sätta clear: right; eller vill du att det ska gälla i båda fallen så kan du använda clear: both; Sida 81 av 99

82 Mer avancerat Det finns fler lite mer avancerade användningsområden för float. Bland annat så kan man på följande sätt väldigt enkelt skapa ett galleri med bilder: <p> <img <img <img <img <img <img </p> src="bild.png"> src="bild.png"> src="bild.png"> src="bild.png"> src="bild.png"> src="bild.png"> Just här använder jag samma bild i demonstrationssyfte. Till det här kopplar vi följande CSS: img { float: left; margin: 10px; } Detta kommer att se ut ungefär såhär: Sida 82 av 99

83 Som du ser så går det alldeles utmärkt att ha flera flytande element bredvid varandra. Dessa hamnar då till höger respektive vänster om varandra beroende på om de flyter till höger eller till vänster. En smart användning av clear i det här exemplet kan vara om man till exempel bara vill ha tre stycken bilder per rad. <p> <img <img <img <br> <img <img <img <br> </p> src="bild.png"> src="bild.png"> src="bild.png"> src="bild.png"> src="bild.png"> src="bild.png"> Som du ser har vi lagt in br-taggar. Den kan vi utnyttja som avskiljare med följande CSS: img { float: left; margin: 10px; } br { clear: left; } När den stöter på en br-tagg så kommer den effektivt att göra en clear, vilket betyder att allt fortsatt innehåll kommer att börja på en ny rad. Sida 83 av 99

84 Som vi ser i exemplet är det precis det som har hänt. Utan dessa br-taggar hade webbläsaren försökt få så många bilder bredvid varandra som möjligt. Sida 84 av 99

85 Ett annat exempel kan vara ett forumlär. Innan CSS så var man tvungen att använda tabeller för att man skulle få det att se bra ut med etiketter och formulärkomponenter. I CSS kan man lösa detta med hjälp av floats. Vi tar och tittar på HTML-koden för det här exemplet: <form> <div class="row"> <span class="label">namn:</span> <span class="formc"><input type="text"></span> </div> <div class="row"> <span class="label">efternamn:</span> <span class="formc"><input type="text"></span> </div> </form> Som du ser så har vi först markerat varje rad med en div-tagg, med den speciella klassen row. Varje etikett är sedan markerad med en span-tagg med klassen label och formulärkomponenten är marerad med formc. Det är väldigt ofta man gör sådan här strukturell uppdelning i koden för att på ett bättre sätt kunna använda CSS. Till det här exemplet måste vi givetvis ha en del CSS-kod också: div.row { clear: both; padding: 10px; width: 350px; } div.row span.label { float: left; text-align: right; width: 100px; } div.row span.formc { float: right; text-align: left; width: 200px; } Först börjar vi med att definiera row-classen längst upp. Den får en viss bredd och clear sätts till both. Sen säger vi att label-klassen skall flyta till vänster och formc-klassen till höger. Båda for också en viss bred. Sida 85 av 99

86 Detta resulterar i följande resultat: Väldigt elegant lösning! Kom ihåg att floats inte bara kan användas av enstaka bilder eller element. Du kan även bestämma att en större mängd element, till exempel omgivna av en div-tagg, skall flyta åt höger. På detta sätt har du enkelt skapat en extra kolumn på din sida där du kan lägga in information. Sida 86 av 99

87 Egenskap Beskrivning float Får ett element att flyta, antingen till höger eller till vänster. clear Bestämmer om ett element inte ska tillåta att element fortsätter att flyta i dem. Sida 87 av 99

88 Vanliga tekniker Layouter med div Ett mycket vanligt arbetssätt är att man delar upp sin sida i delar. I exemplet här nedan har jag till exempel använt mig av ett meny-block och ett contents-block. I och med att man delar upp det på det här sättet så går det att göra mycket mer specifika saker med CSS. <div id="menu"> <a href="index.html">index</a> <a href="links.html">länkar</a> </div> <div id="contents"> <h1>title of page</h1> <p>text, text text</p> </div> För att det ska bli någon slags layout av det här så måste man ha lite CSS: #menu { postition: absolute; left: 10px; top: 10px; width: 100px; background-color: #edd; } #contents { position: absolute; left: 120px; top: 10px; width: 500px; background-color: #edd; } Som du ser så använder vi oss av tecknet #. Det betyder alltså att vi använder oss av id:t istället för att på vanligt vis ändra på en speciell tagg. Här säger jag alltså att meny-delen, alltså det innehåll som är i den skall positioneras aboslut 10 pixlar uppifrån och 10 pixlar från vänster. Den ska också vara 100 pixlar bred. Jag gör samma sak med contents-delen, fast med lite andra värden. Sida 88 av 99

89 Resultatet blir något som liknar det här: Som du ser så har vi fått en layout med två kolumner. Det saknas fortfarande lite saker för att den ska se bra ut: exempelvis lite snyggare färger, större marginaler och andra teckensnitt. Sida 89 av 99

90 Att centrera ett element För att centrera ett element eller ett block så kan man göra det genom att sätta höger- och vänstermarginalerna till auto. För att det ska fungera måste bredden på blocket vara mindre än bredden på sidan. Ett block sträcker ju sig som standard över hela sidan. p { margin-left: auto; margin-right: auto; width: 400px; } Tänk på att det bara går att göra såhär med element som visas som block. Vill du alltså centrera en bild så måste du först ändra den så den visas som ett block istället för inline. Alternativt så kan du lägga den i ett block som har attributet text-align: center. Det som egentligen händer när man sätter text-align: center på ett block är att allt innehåll, som renderas som inline blir centrerat. <p>det här stycket (elementet) kommer att vara centrerat.</p> Som vi ser här på resultatet så fungerar det helt perfekt: Sida 90 av 99

91 Meny (Horisontell) För att göra en snygg meny i CSS så behöver man faktiskt inte använda sig av så mycket HTML-kod, utan man kan jobba med det mesta utseendet i CSS: <div id="meny"> <a href="html.html">html</a> <a href="css.html">css</a> <a href="webbl.html">webbläsare</a> <a href="tricks.html">tricks</a> </div> <div id="main"> <h1>html</h1> <p>den här webbsidan handlar om HTML och CSS.</p> </div> Det här är en väldigt enkel HTML-kod, det enda som är lite speciellt är ju att vi har två div-taggar som hjälper gruppera menyn och det andra innehållet. Till detta har vi en lite mer avancerad CSS till menyn: #meny { position: absolute; left: 10px; top: 10px; width: 100px; background-color: #ccc; } #meny a { display: block; text-decoration: none; padding: 3px; } #meny a:hover { background-color: #aaa; } Först så bestämmer vi att blocket ska visas som ett lager och vara positioner på en speciell plats. Länkarna ska sedan visas som ett block och inte ha någon understrykning. Bakgrundsfärgern på länkarna ska även byta färg när man för musen över dem. Notera också att vi bara ändrar på länkarna i menyn så vi inte får konstiga länkar i själva innehållet. Sida 91 av 99

92 Vi tar även och gör så att själva innehållet också visas som ett lager och också får en bagrundsfärg: #main { position: absolute; left: 120px; top: 10px; width: 580px; background-color: #ccc; } Resultatet blir något som liknanar det här: Ganska vackert för en så relativt kort HTML-kod! Självklart behöver även den här lite mer jobb i form av fäger, bilder, marginaler och teckensnitt. Sida 92 av 99

93 Meny (Vertikal) Vi fortsätter att jobba vidare med en vertikal meny, där vi försöker att återanvända HTMLkoden från föregående exempel: <div id="meny"> <a href="html.html">html</a> <a href="css.html">css</a> <a href="webbl.html">webbläsare</a> <a href="tricks.html">tricks</a> </div> <div id="main"> <h1>html</h1> <p>den här webbsidan handlar om HTML och CSS.</p> </div> Vi kopplar vidare detta till ett annat CSS för menyn: #meny { width: 700px; height: 26px; margin-left: auto; margin-right: auto; background-color: #ccc; } #meny a { display: block; float: left; width: 90px; height: 20px; padding: 3px; text-decoration: none; } #meny a:hover { background-color: #aaa; } På menyn så börjar vi att sätta breden och höjden. Dessutom sätts höger- och vänstermarginalerna till auto, vilket gör att elementet centreras. Länkarna ändras så att de visas som block och flyter till vänster, vilket gör att det radas upp efter varandra. Dessutom sätts en bredd och en höjd och en liten marginal. Understrukningen tas bort och en annan bakgrundsfärg sätts vid länk-hovring. Sida 93 av 99

94 Innehållet får också en likanande CSS-snutt. Centrering, bredd och bakgrundsfärg: #main { margin-left: auto; margin-right: auto; width: 700px; background-color: #ccc; } Detta får då följande resultat i en webbläsare: Utan att ändra HTML-koden från föregående exempel så har vi ändå radikalt ändrat hela designen. Sida 94 av 99

Visa mer