Februari 2015.
Om du vill göra lite övningar i grundläggande html och css så kan du göra dessa. Betoningen är på css. Facit till varje övning hittar du här: facit övningar html och css. Good luck.
1. Skapa en katalog på din dator där du ska förvara filerna. Döp katalogen till t.ex. “övningar css”.
2. Skapa en html-fil som innehåller de grundläggande elementen såsom doctype, head, title och body. Spara den filen som “index.html” och spara den i mappen “övningar css”.
3. Skapa filen “mystyle.css” och spara den i “övningar css”.
4. Skriv in länk-elementet – dvs den länk som länkar mellan index.html och mystyle.css. Placera länken på rätt ställe i index.html.
5. Skapa ett p-element i index.html och skriv några rader valfri text i detta element.
6. Exekvera filen index.html så att du ser att allt fungerar.
7. Gå in i mystyle.css och skapa en css-regel för p. Fonts ska vara svarta.
8. Skapa en h1-rubrik i index.html med valfri text. Placera h1 ovanför p-elementet.
9. Styla h1 i den externa stilmallen. H1 ska vara centrerad.
10. Skapa en css-regel i mystyle.css för ett id med namnet “olle”. Fonts ska vara 16px, font-familjen är verdana och sans-serif och fonts ska vara röda.
DEL TVÅ
11. Skapa en css-regel för ett id-element som heter “olle” i mystyle.css. Fonts ska vara 16px och font-familjen verdana och sans-serif. Fonts ska vara röda.
12. Skriv en titel i titel-elementet i index.html. Titeln kan vara “css-övningar”.
13. Skapa ett nytt p-element i index.html. Styla detta p-element med id “olle”. Skriv några rader med valfri text i p-elementet. Detta p-element ska ligga under det andra p-elementet.
14. Skapa ett h2-element. H2-elementet ska ligga under första p-elementet. Skriv valfri text i h2-rubriken.
15. Skapa ett h3-element. Detta elementa ska ligga under olle-paragrafen. Skriv valfri rubrik i detta element.
16. H2 och H3 ska ha samma styling. De ska ha gula fonts och fontstorlek 20px. Gör endast en css-regel för båda elementen.
17. Styla om h2 och h3 så att de har 50 pixlars avstånd till vänstermarginalen.
18. Styla om så att bakgrundsfärgen i body är grå (mystyle.css).
19. Skapa en ny html-fil som heter “html2.html”. Se till att den har de grundläggande html-elementen. Spara filen i mappen “övningar css”.
20. Gör ett h1-element i filen html2.html. Använd internal style sheet för stylingen. Styla så att h1-elementet har 150 pixlars avstånd till vänstermarginalen.
21. Välj ett foto som du namnger till “bakgrundsbild.jpg”. Placera detta foto i mappen “övningar css”.
22. I filen html2.html så skriver du css-regeln för att länka bilden “bakgrundsbild.jpg” till filen html2.html.
23. Skriv det deklarationsblock som gör att “bakgrundsbild.jpg” upprepas horisontellt på en rad.
24. Kommentera bort bakgrundsfilen i html2.html.
25. Skapa ett p-element i html2.html. Placera elementet under h1. Skriv några raders valfri text.
26.Skriv ett deklarationsblock som gör att du har ett streck som går igenom bokstäverna i det p-element du nyss gjorde.
27. Indentera texten i P med 70px.
28. Skriv deklarationsblock till h1 och ge h1 röd textshadow. Valfria storlekar.
29. Skriv så att p får 200 % i lineheight.
30. Gå tillbaks till mystyle.css. Skriv ett deklarationsblock för p så att p får en fontfamilj med tre valfria värden.
31. Skapa en klass i mystyle.css. Klassen ska heta “lista1”. Styla klassen enligt följande: fonts ska vara vita och punkterna i listan ska vara svarta och runda.
32. Skapa en onumrerad lista i index.html. Listan ska ha två list-items. Gör en klass av listan och dör listan till “lista1”. Ha valfri text i cellerna.
33. Använd inline style på första p-elementet i index.html. Texten ska ha en marginal på 100px till vänster. Fonts ska vara 20 px.
34. Ta fram en bild/foto och spara fotot i mappen “övningar css”. Döp fotot till “test.jpg”. Width och height ska vara 100px. Skriv länken till detta foto så att fotot hamnar ovanför h2 (skriv länk-elementet för hand, skippa kopiera och klistra).
35. Lägg in en länk i index.html som går till svenska Google. Ha ankartexten “länk till google”.
36. Gå tillbaks till html2.html och skapa en tabell. Gör detta med internal style sheet. Placera tabellen under p-paragrafen. Tabellen ska ha två rubriker och två celler. Värdena i rubrikerna ska vara “färg” och “antal”. Sätt in valfria värden på dessa.
37. Styla denna tabell med internal style sheet. Kanten ska vara 1 px solid black och det ska bara vara en kant i tabellen – inte dubbla.
38. Höjden i tabellcellerna ska vara 60px och width på tabellen är 50px.
39. Padding i tabellcellerna ska vara 100px till vänster.
40. Tabellhuvudet ska ha grön bakgrundsfärg och fonts i tabellhuvud ska vara vita.
41. Skapa en div i html2.html. Använd internal style sheet. Bakgrundsfärg ska vara ljusgrå.
42. Width och height i div ska vara 250px. Padding ska vara 40px. Kanten ska vara solid. Sätt in valfri text på cirka tre rader i diven.
43.Gå tillbaks till mystyle.css. Styla id olle så att marginalerna 50px top and bottom. Vänstra och högra marginalerna 25px.
44. Skapa en css-regel i mystyle.css som heter “first_class”. Fonts ska vara purple.
45. Skapa en p-paragraf under tabellen i index.html som är stylad med “first_class”.
46. Styla first class i mystyle.css. Gör bakgrundsfärgen orange samt att width blir 550px.
47. Använd inline style på h1 för att göra fonts gröna.
48. Skriv en p-paragraf med några raders text. Placera p-elementet under det p-element som är stylat med id olle.
49. Använd inline style till detta sista elementet. Använd HEX-värden för att ge fontsen färgen fuchsia (#FF00FF).
50. Gå till mystyle.css. Skapa ett id med namnet urban. Använd RGBvärde för bakgrundsfärgen som ska vara 0, 176, 238. Width på id ska vara 500px. Fonts ska vara vita.
51. Gå till Googe creative commons:
https://www.google.se/search?q=stol&tbs=sur:fmc&source=lnms&tbm=isch&sa=X&ei=8wCwVJ66H8SeywOqtYLQBw&ved=0CAgQ_AUoAQ&biw=1600&bih=1041#tbs=sur:fmc&tbm=isch&q=blue+sky+wallpaper
Sök efter “blue sky wallpaper”. Ladda ned ett valfritt wallpaper och döp filen till “blue_sky_wallpaper”. Placera denna fil i mappen “övningar css”. Placera sedan in denna bild som bakgrundsfoto i index.html.
52. Gå tillbaks till filen html2.html. Ta bort den bortkommenterade koden för bakgrundsbild.jpg.
53. Placera bakgrundsbilden längst ned på sidan och sätt sedan bodys height till 1 000px.
54. Ändra så att bakgrundsbilden blir centrerad i mitten.
55. Ta bort strecket som går igenom bokstäverna i p-elementet i html2.html.
56. Gör en div till html2.html och döp den till “div2”. Använd som vanligt internal style sheet. Använd hexvärden för att ge fontsen färgen crimson (#DC143C). Bakgrundsfärgen ska vara lime och ska skrivas med hexvärden (#00FF00). Width: 600px. Height: 300px. Gör några raders text. Placera detta div-element under förra p-elementet.
57. Kolla i facit om se hur filen bör se ut.
58. Öka lineheight i div 2 med 120 %.
59. Ge div2 fontfamiljen: arial, helvetica och sans-serif.
60. Ge texten i div 2 kursiv stil.
61. Skapa h2 i html2.html. Använd inline style. Fonts ska vara 50px. Skriv valfri rubrik. Placera h2 ovanför div2 elementet i html2.html.
62. Ändra den inline style du nyss gjorde för h2 så att font-size blir 3,5em.
63. Skapa en länk i html2.html. Länken ska gå till: https://startpage.com/sve/sve? Ha valfri ankartext.
64. Gör en gul bakgrund till länken du nyss skapade.
65. Låt oss göra en länkbox av samma länk. Förutom a:link så sätt in a:visited i samma cssregel. Den ska visas som ett blockelement, fet fontstil, color: #fff, bakgrundsfärg: #98bf21, vidd 120px, centrerad text och inget understreck.
66.
Gör en unordered list med tre listitems: kaffe, mjölk och socker. Placera listan under boxlänken du nyss gjorde. Skriv en cssregel med fyrkant som symbol för listitems.
67.
I den tabell som du har i html2.html, gör så att det bara blir en linje mellan tabellhuvudena och tabelldatan och inte två linjer som det är nu.
68.
I tabellen du har i html2.html, skapa en bredare kant till cellerna för tabelldata.
69.
Ändra färgen på samma kant. Använd RGB-värdena för färgen cyan: 0,255,255.
70.
Gå till den div som heter div och gör så att marginalen till objektet ovanför denna div är 75px.
71.
Gå tillbaks till mystyle.css och styla index.html. Se till att paddingen i klassen”first_class” har följande padding: 50px top and bottom samt 25 px right and left padding.
