Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan tittar på i en webbläsare (Internet Explorer, Firefox, Safari ). För att kunna göra en preview så brukar det finnas ett snabbkommando, t ex Ctrl+Alt+Shift+I som används i Notepad++ för att visa filen i Internet Explorer. När du arbetar med övningen så behöver du inte redovisa den. Ställ gärna frågor och diskutera i kursens forum! I den här laborationen ska vi göra en enkel hemsida där vi lägger till listor, länkar, bilder mm. På webbsidan vi skapar har jag använt så kallad dummy-text för att ha någonting att arbeta med. På www.lipsum.com kan du hämta text att laborera med. (Tänk på att all html/css-kod ska skrivas som oformaterad text, alltså ingen kursivering, fet stil eller liknande.) Jenny Folkesson Jenny.folkesson@hkr.se
Sidan 2 av 7 1. Vi börjar med att bygga en webbsida som ser ut ungefär som bilden nedan. Börja med att ange vilken dokumenttyp som ska användas, teckenuppsättning och sidans titel. Det som skrivs som titel är det som sedan visas på flikar i webbläsaren eller som text när man till exempel väljer att spara sidan som en favorit/bokmärke. Titeln är också viktig när det gäller rankning i sökmotorer, som till exempel google. Längst upp i filen rekommenderar W3C att du även lägger till xml-deklarationen när du märker upp sidor med XHTML. Lägg märke till att vi i denna deklaration anger teckenuppsättning: <?xml version="1.0" encoding="utf-8"?> Blir det någon skillnad med och utan denna? (När sidan är klar ska du prova att validera i W3C.s validator prova både med och utan xml-deklaration!)
Sidan 3 av 7 I body-elementet bygger vi sedan upp det som kommer att synas på hemsidan. I texten nedan finns tre olika rubriker (h1,h3,h4), textstycken (p), en bild (img) och en bildtext i kursiv stil (em). Lägg till en tigerbild (finns exempelvis att hämta på sxc.hu). Anpassa storleken på bilden så att den passar in på sidan och har en lämplig filstorlek (prova ett onlineverktyg: http://pixlr.com/). Validera din sida! Sidan är i sitt nuvarande skick inte så lättläst textstyckena är alldeles för breda, och vi har inte angett vilket typsnitt som ska användas eller i vilken storlek texten ska visas. För att ändra på detta ska vi lägga till en stilmall (CSS). 2. Stilmall I head-elementet lägger vi en intern stilmall som formaterar <div>-taggen som vi ska lägga runt hela vårt innehåll:
Sidan 4 av 7 För att allt innehåll på hemsidan ska visas med 500 pixlars bredd lägger du till div-elementet runt hela innehållet. <body> <div>allt som ligger mellan <body>-taggarna lägger du här.</div> </body> Genom att lägga till nedanstående stil i din stilmall kan du bestämma vilket typsnitt som i första, andra, tredje och fjärde hand ska användas (du kan välja både färre och fler). Det typsnitt som slutligen visas är helt beroende av vad besökaren har för typsnitt installerade på sin dator, så tänk noga igenom vad du väljer. Genom att placera valet av typsnitt på body-elementet betyder det att allt som visas kommer att få det här typsnittet om du inte anger något annat för andra element. Lägg till en bakgrundsfärg på hela hemsidan, färger anges med hex-koder, t ex #66CCCC Använd till exempel http://www.colorschemer.com/online.html för att hämta färgkoder. Lägg, i stilmallen, till formatering av rubrikerna h1, h3 och h4 prova med olika typsnitt, färger och storlekar. I koden ovan finns även radhöjden angiven, prova även att öka avståndet mellan tecken (spärra). Svart text mot en skarpt färgad bakgrund är inte alltid så läsvänligt. Som webbdesigners bör vi även ta hänsyn till användare med sämre syn. Då är kontrasten viktig och svart mot vitt det absolut tydligaste. Vi lägger till en vit bakgrund till texten genom att skapa en klass med namnet bakgrund. Nedanstående kod betyder att klassen bakgrund endast kan användas tillsammans med en <div>tagg. div.bakgrund{ background-color: #FFFFFF; padding: 30px; }
Sidan 5 av 7 I html-koden lägger vi till klassen som ett attribut i <div>-taggen: Vad händer om du ändrar värdet för padding? Lägg till en ram (border) runt det vita området. Gör så att man kan använda klassen bakgrund även på andra taggar än just <div>. 3. Länkar Genom att skapa ett ankare/bokmärke kan man länka från en del av sidan till en annan. Detta kan vara särskilt användbart om man har en lång sida som man behöver scrolla. Det första man gör är då att skapa ankare på väl valda ställen. Till exempel av rubrikerna. <h1><a name="a1">min hemsida</a></h1> Längst ner på sidan kan vi sedan lägga till en länk som tar oss tillbaka till rubriken Min hemsida. <p><a href="#a1">till sidans topp</a></p> Lägg till ett ankare vid varje rubrik och skapa sedan en innehållsförteckning/meny som leder till de olika rubrikerna. För att du ska märka att något händer, kan du lägga till lite mer text under varje rubrik/lägga till fler rubriker och stycken så att sidan blir längre. Länkar leder ju ofta till externa webbplatser och andra sidor inom samma webbplats. Länken ser i princip likadan ut som ovan och du behöver inte ange något bokmärke. Lägg till attributet title i din länk. Vad innebär detta? Vad händer i webbläsaren? En annan typ av länk du kan skapa är en mailto-länk som öppnar användarens e-post-program och automatiskt fyller i den e-postadress du angivit. Läs mer om länkar på w3schools: http://www.w3schools.com/tags/tag_a.asp Lägg till en e-post-länk Gör tigerbilden till en länk
Sidan 6 av 7 Tigersidan med bakgrundsfärger och länkar. Med widescreen-skärm blir det mycket yta över! I stilmallen kan vi lägga till egenskaper även för länkar. Default är att länkar har understrykning och är blå, besökta länkar får en lila färg. Ofta vill man ändra på detta och man kan då till exempel ta bort understrykning, ändra färgerna, göra så att länken blir markerad när man för musen över den osv. I stilmallen anger vi hur länkarna ska formateras. a { text-decoration: none; color: #000000; } Genom att lägga till pseudoklasser kan man ange att länken till exempel ska visa en understrykning när man för musen över den. Andra pseudoklasser är active och visited. a:hover{ text-decoration: underline; } Lägg till formateringen ovan i din stilmall. Gör så att texten istället får en bakgrundsfärg när man för musen över länken. Lägg till formatering för besökt respektive aktiv länk. Vad händer med bilden som du gjort till en länk?
Sidan 7 av 7 4. Listor Ibland har man stor nytta av de inbyggda funktioner som finns för att göra listor. De vanligaste och mest använda är unordered list och ordered list. Prova att lägga in ovanstående listor någonstans på sidan du skapat. Vad är det som skiljer dem åt? Även listor kan stilas i stilmallen. Man kan till exempel byta symbol framför varje listpunkt eller lägga till en egen bild. Lägg till taggarna <ul> och <ol> i stilmallen. Ändra symbolen med hjälp av egenskapen list-styletype. Tips: läs mer om listor på http://www.w3schools.com/css/css_list.asp.