Komma igång
Material och tips
Välkomna till webbsajten kopplad till boken Introduktion till CSS och HTML. Här hittar du lösningar och kommentarer till övningarna. Vi kommer även att lägga in korrigeringar och alternativa lösningar efter hand.
Lösningarna utgår från ett startpaket som du kan ladda ner nedan. Detta paket gör det enklare att komma igång och gör att du förhoppningsvis undviker du att fastna i början.
Efterhand som du arbetar med boken kommer du gradvis att bli oberoende av startpaketet, dock finns det startfiler till flera övningar som vi skapat för att du ska kunna fokusera på de för den aktuella övningen centrala kunskaperna.
Ladda ner övningsspaketet här
Övning 1.1
Skrivträning
I denna övning vill vi visa att webbsidor bara är vanliga filer. Det som skiljer dem från andra filer är dels filändelsen och att de är skrivna i html-format. När du använder till exempel Word och docx filändelsen så döljs den uppmärkning som gör att till exempel rubriker visas som de gör. Enkla textredigerare eller editorer som de som nämns i övningen visar exakt vad som står i filen och döljer ingen uppmärkning.
Övning 1.2
W3C-kompatibilitet
W3C är ett konsortium bestående av ledande organisationer och företag inom webbutveckling. W3C fastställer standarder för bland annat HTML och CSS, det är sedan upp till organisationen bakom webbläsarna att implementera dessa standarder. Ibland tycker en organisation att utvecklingen går för långsamt så att de skapar egna standarder och ibland hinner inte eller vill inte organisationen bakom en webbläsare implementera nyheter.
Genom verktyget som refereras i övningen kan du kontrollera din kod. Att hålla på och klistra och klippa i koden blir såklart opraktiskt och tidsödande. Vi kommer därför i senare kapitel att visa hur man gör det på ett effektivare sätt med hjälp av ett tilläggsprogram till en html-redigerare.
Övning 1.3
Indentering - Gruppering
Att på detta sätt gruppera koden kan tyckas lite petigt men när du får lite mer kod är det ett oumbärligt sätt att hitta fel. Det gör att du med en snabb blick kan se vilka delar som hör ihop. Till skillnad från W3C-kompatibilitet så har indentering ingen betydelse för funktionaliteten. Vi kommer i nästa kapitel att använda ett tilläggsprogram till en html-redigerare som hjälper dig att indentera.
Att vi rekommenderar att indentera med två mellanslag är delvis en smaksak men det är nog det vanligaste. Andra använder tabulator och de som har en bakgrund i språket phyton brukar använda 4 st mellanslag. Det finns en mängd argument och tyckande och vill du läsa mer så googla ”indentation tab or space”. Hur som helst så ersätter den plugin vi använder i nästa kapitel som standard indentering med två mellanslag, så använd gärna tabulator om du tycker det går snabbare.
Övning 1.4
Se kod på webbsida
En anledning till att webbutveckling går så fort är att det är svårt att dölja geniala lösningar. Webbsidans utseende skapas i webbläsaren och det möjligt att inspektera koden och titta på hur den som skapat sidan gjort. När du på det sättet som beskrivs i övningen tittar på en sida så kan mängden kod vara överväldigande, av den anledningen behövs lite mer sofistikerade verktyg som det du använder i nästa övning.
Övning 1.5
Inspektion av webbsida
Detta verktyg är oumbärligt när du bygger webbsidor, men som många kraftfulla verktyg är det komplext. I denna bok kommer vi främst att använda möjligheten att inspektera HTML koden samt se vilken css-stil som är kopplad till ett element. När du ser på HTML koden genom detta verktyg kan du “fälla ihop” starttaggar och sluttaggar och på det sättet bara se på de delar du är intresserad av. Detta kallas sidans DOM (Document Object Model) och skapar en hierarki som motsvarar indenteringen du gjorde en tidigare övning. Förutom att se HTML-kod och CSS-kod kan du bland annat se hur stora bilder är samt hur lång tid bilder på sidan tar att ladda etc.
Övning 2.1.a
Filstruktur
I övningarna arbetar vi med nedastående filstruktur, det går såklart att organisera filerna på andra sätt men för att komma igång så följer vi ett ganska strikt arbetssätt.
Att vi döper filen till index.html är en standard. Med denna standard slipper du skriva www.twitch.tv/index.html när du besöker sidan www.twitch.tv eftersom webbläsaren letar efter en fil det namnet om du inte har skrivit ett filnamn. Det finns ett antal andra standardnamn till exempel default.html, default.htm default.php samt andra alternativ som var och en säger lite om vilken typ av webbserver som du besöker samt vilken teknik den använder. Detta är inget som du behöver hålla reda på men kan vara bra att veta. Döp den som skall vara standard till index.html så fungerar det.
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Kommentarer i HTML</title>
<meta charset="utf-8">
</head>
<body>
<!--Here is a header 1 that is the highest order in the header hierarky-->
<h1>Jag testar HTML och CSS</h1>
</body>
</html>
I koden ovan är det bara det som finns inuti body-taggen som syns. Inom taggarna <!-- --> finns en kommentar som inte syns på sidan. Kommentarer är även användbara om du har fel i koden och inte kan hitta felet, kommentera då bort delar och ta sedan bort kommentaren på en del i taget till du hittar felet.
Om du inte är van vid att hitta filerna i din dators filsystem kan du i din editor (Atom) högerklicka på en fil och välja “Show in explorer” eller liknande så öppnas den mappen där filen ligger.
Övning 2.1.b
Skapa sidor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Mejeriprodukter</title>
<meta charset="utf-8">
</head>
<body>
<section>
<h1>Mejeriprodukter</h1>
<article>
<h2>Ost</h2>
<p>Text om ost</p>
</article>
<article>
<h2>Mjölk</h2 >
<p>Text om mjölk</p>
</article>
</section>
</body>
</html>
See the Pen articles-fruits.html by Lars Holmberg (@k3lara) on CodePen.
See the Pen articles-vegetables.html by Lars Holmberg (@k3lara) on CodePen.
Övning 2.1.c
Namnge filer
Övning 3.1.a
Lägga in bilder
I denna övning visas en bild som ligger i samma katalog som index.html. Lägg märke till att img-taggen inte har någon sluttagg som <p>text</p> utan den har i stället attribut som anger vilken bild som skall visas. Detta betyder att du endast skriver <img src="fruit-apple.jpg" alt="Green apple">, en del utvecklare menar att du alltid skall ange en sluttagg och du kan då antingen skriva <img src="fruit-apple.jpg" alt="Green apple"></img> eller <img src="fruit-apple.jpg" alt="Green apple"/>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML CSS</h1>
<img src="fruit-apple.jpg" alt="Green apple">
</body>
</html>
Övning 3.1.b
Hyperlänkar
Hyperlänkar eller anchor-taggar kan öppna den nya sidan i aktuell flik eller i en ny flik. I nedanstående exempel öppnas de i en ny flik i webbläsaren. Att det är en ny flik anges av attributet target="_blank". Om du i stället anger _self öppnas länken i aktuell flik.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML CSS</h1>
<img src="fruit-apple.jpg" alt="Green apple">
<a href="http://www.google.com" target="_blank">Google</a>
<a href="http://www.se" target="_blank">Sverige</a>
</body>
</html>
Övning 3.1.c
Snygga till med p-taggar och h-taggar
Användning av block-element som omsluter inline elementen a och img.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Svar Övning 3</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML CSS</h1>
<h3>Bild</h3>
<p><img src="fruit-apple.jpg" alt="Green apple"></p>
<h3>Externa länkar</h3>
<p><a href="http://www.google.com" target ="_blank">Google</a></p>
<p><a href="http://www.se" target ="_blank">Sverige</a></p>
</body>
</html>
Övning 3.1.d
Länkar till andra sidor på samma webbplats
Nedan visas den delen av koden som skapar länkarna mellan sidorna.
<h3>Interna länkar</h3>
<p>
<a href="a.html">A</a>
</p>
<p>
<a href="b.html">B</a>
</p>
<h3>Interna länkar</h3>
<p>
<a href="index.html">Startsida</a>
</p>
<p>
<a href="a.html">A</a>
</p>
<h3>Interna länkar</h3>
<p>
<a href="index.html">Startsida</a>
</p>
<p>
<a href="b.html">B</a>
</p>
Övning 3.2
Frukt och grönt
De fyra sidorna sammanlänkade så att det går att navigera mellan dem.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="sv">
<head>
<title>En liten affär</title>
<meta charset="utf-8">
</head>
<body>
<h1>Varugrupper</h1>
<h2><a href="articles-dairy-products.html">Mejeriprodukter</a></h2>
<h2><a href="articles-fruits.html">Frukt</a></h2>
<a href="articles-vegetables.html"><h2>Grönsaker</h2></a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Grönsaker</title>
<meta charset="utf-8">
</head>
<body>
<section >
<h1>Artiklar om grönsaker</h1>
<article>
<h2>Morötter</h2 >
<p><img src="images/vegetables-carrot-etc.jpg" alt="Morot"></p>
<p>Lite beska men ändå goda</p>
</article>
<article>
<h2>Potatis</h2 >
<p><img src="images/vegetables-potato.jpg" alt="Potatis"></p>
<p>Jordig och mjölig</p>
</article>
</section>
<p><a href="index.html">Back</a></p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Frukt</title>
<meta charset="utf-8">
</head >
<body>
<section >
<h1>Frukt</h1>
<article>
<h2>Citron</h2>
<p><img src="images/fruit-lemon.jpg" alt="Citron"></p>
<p>Sur o fin</p>
</article>
<article>
<h2>Apelsin</h2>
<p><img src="images/fruit-orange.jpg" alt="Apelsin"></p>
<p>Söta apelsiner med skal och kärnor</p>
</article>
</section>
<p><a href="index.html">Back</a></p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Mejeriprodukter</title>
<meta charset="utf-8">
</head >
<body>
<section >
<h1>Mejeriprodukter</h1>
<article>
<h2>Ost</h2>
<p><img src="images/dairy-cheese-etc.jpg" alt="Ost med mera"></p>
<p>Ostbricka</p>
</article>
<article>
<h2>Mjölk</h2>
<p><img src="images/dairy-milk.jpg" alt="Mjölk"></p>
<p>Härlig mjölk att lapa.</p>
</article>
</section>
<p><a href="index.html">Back</a></p>
<body>
</html>
Övning 3.3
Validering och indentering
Indentering med hjälp av plugin. Nedan syns filen index.html före och efter det att Atom-paketet “beautify” har körts. Du hittar pluginen från menyn Packages>Atom Beautify>Beautify om du kör Atom. Finns inte det alternativet i menyn så behöver du installera paketet.
<html lang="sv">
<head>
<title>En liten affär</title>
<meta charset="utf-8">
</head>
<body>
<h1>Varugrupper</h1>
<h2><a href="articles-dairy-products.html">Mejeriprodukter</a></h2>
<h2><a href="articles-fruits.html">Frukt</a></h2>
<a href="articles-vegetables.html"><h2>Grönsaker</h2></a>
</body>
</html>
<!DOCTYPE html>
<html lang="sv">
<head>
<title>En liten affär</title>
<meta charset="utf-8">
</head>
<body>
<h1>Varugrupper</h1>
<h2>
<a href="articles-dairy-products.html">Mejeriprodukter</a>
</h2>
<h2>
<a href="articles-fruits.html">Frukt</a>
</h2>
<a href="articles-vegetables.html">
<h2>Grönsaker</h2>
</a>
</body>
</html>
Övning 4.1
Mall
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Beskrivning">
<meta name="author" content="Montathar Faraon">
<title>Template</title>
</head>
<body>
<!-- Innehåll som ska visas i en webbläsare anges här -->
<p>Template</p>
</body>
</html>
Övning 4.2
Metainformation
Som du ser får man ett antal träffar på Wikipedia, en av dessa bör vara den engelskpråkiga sidan med addresen https://www.wikipedia.org/ där descriptiontaggen stämmer med den du hittade i metattaggen på sidan. De andra söksvaren har en beskrivningstagg som är relaterad till Wikipedia sidans språk.
Övning 4.3
Teckenuppsättning
See the Pen Övning 4.3 by Lars Holmberg (@k3lara) on CodePen.
Övning 5.1.a
CSS för att få lite färg på sidan
Raden <link rel="stylesheet" href="css/style.css"/> gör att din sida hittar en CSS-fil som ligger i mappen css och heter style.css. Filen style.css ser ut som nedan. Observera att CSS-regler har en syntax som skiljer sig från HTML-syntax. I denna CSS anger vi bakgrundsfärger till de olika HTML-elementen.
body {
background-color: lightgray;
}
header {
background-color: darkorange;
}
nav {
background-color: steelblue;
}
main {
background-color: deeppink;
}
section {
background-color: gray;
}
footer {
background-color: darkslategray;
}
aside {
background-color: limegreen;
}
p {
background-color: white;
}
h1 {
background-color: floralwhite;
}
Övning 5.1.b
Block-element 1
See the Pen Övning 5.1.a by Lars Holmberg (@k3lara) on CodePen.
Övning 5.1.c
Block-element 2
<header>, <section>och <footer> elementen fylls helt med p-element, det blir ett avstånd mellan elementen på grund av att <p>-taggen som standard har marginal före och efter.
See the Pen Övning 5.1.c by Lars Holmberg (@k3lara) on CodePen.
Bakgrundsfärgen grå i sektionerna kommer att synas eftersom det kommer en genomskinlig marginal mellan <p>-taggarna. Den sista <p>-taggen i <section> skapar mellanrum till nästa element som är en annan <section> eller en <footer>. Dessutom är det så att om horisontella marginaler överlappar varandra syns bara den bredaste. Det blir alltså inte dubbla horisontella marginaler (vertikala adderas dock). Collapsande marginaler
Övning 5.1.d
Block-element 3
Detta kan variera lite men för Chrome är 1em(16px) marginal före och efter ett p-element. Det är 0.67em(21.44px) marginal före och efter ett <h1> element. Då kollapsar p-marginalen efersom den är mindre och det blir 21.44px ner till h1-taggen sen 21.44px till p-taggen och sen 16px till första section-taggen.
Den brandgula färgen är header taggens bakgrundsfärg.
Allt detta kan man utläsa med utvecklarverktyget nedan.
Övning 5.1.e
Inline-element 1
See the Pen Övning5.1.e by Lars Holmberg (@k3lara) on CodePen.
Övning 5.1.f
Inline element 2
See the Pen LWgEBr by Lars Holmberg (@k3lara) on CodePen.
Övning 5.1.g
Inline element 3
Nedan kan du se a-taggar som omsluter tre img-taggar med kattbilder två av dem ligger lokalt den tredje hämtas från nätet. a-taggarna gör att bilderna blir klickbara. I och med att attributet “target” har värdet “_blank” så kommer wikipediasidor med information om katter på olika språk att öppnas i en ny flik i webbläsaren.
<a href="https://sv.wikipedia.org/wiki/Katt" target="_blank"><img src="images/katt.jpg" alt="katt"></a>
<a href="https://en.wikipedia.org/wiki/Cat" target="_blank"><img src="images/katt.jpg" alt="katt"></a>
<a href="https://eo.wikipedia.org/wiki/Hejma_kato" target="_blank"><img src="http://www.triggerphoto.se/common/getimage.php?size=256&grp=_public_&id=22757" alt="katt"></a>
Övning 5.2.a
Rubriker
See the Pen Övning 6.1.a by Lars Holmberg (@k3lara) on CodePen.
Övning 5.2.b
Semantisk uppmärkning
See the Pen Övning 6.1.b by Lars Holmberg (@k3lara) on CodePen.
Övning 5.2.c
Footer med copyright information
See the Pen Övning 6.1.c by Lars Holmberg (@k3lara) on CodePen.
Övning 6.1
Struktur
See the Pen Övning 6.1 by Lars Holmberg (@k3lara) on CodePen.
Övning 6.2
Struktur
See the Pen Övning 6.2 by Lars Holmberg (@k3lara) on CodePen.
Övning 7.1.a
Länka ihop sidor
Nedanstående länkar binder ihop startsidan (index.html) med projektsidorna. Vi använder här relativa länkar som utgår från var den aktuella filen ligger. Relativa länkar har den egenskapen att man kan flytta webbsidorna så länge relationen mellan dem behålls. Du kan alltså flytta hela mappen assignment1 till en annan plats i mappstrukturen. Om href-attributet inleds med ett snedstreck / så utgår länken från webbroten dvs det som anges efter webbadressen. Hade du till exempel haft webbadressen www.minakattbilder.se och länkat så här
<h2><a href="/myprojects/project2.html">Projekt 2</a></h2>
Så skulle ditt projekt2 ligga in en undermapp med adressen www.minakattbilder.se/myprojects/project2.html medan filen med länken
<h2><a href="myprojects/project2.html">Projekt 2</a></h2>
måste ligga som en undermapp till den filen (index.html i detta fall) som du länkar från.
Hur man gör är delvis en smaksak men använd relativa länkar om du är osäker för de fungerar alltid på samma sätt lokalt på din dator som när du laddar upp dem på ett webbhotell.
<body>
<h1>Mina projekt</h1>
<a href="myprojects/project1.html"><h2>Projekt 1</h2></a>
<h2><a href="myprojects/project2.html">Projekt 2</a></h2>
<h2><a href="myprojects/project3.html">Projekt 3</a></h2>
</body>
<h2><a href="../index.html">Startsidan</a></h2>
<h2><a href="project2.html">Nästa projekt</a></h2>
<h2><a href="../">Startsidan</a></h2>
<h2><a href="project1.html">Föregående projekt</a></h2>
<h2><a href="project3.html">Nästa projekt</a></h2>
<h2><a href="../index.html">Startsidan</a></h2>
<h2><a href="project2.html">Föregående projekt</a></h2>
Övning 7.1.b
Target
Attributet target för a-taggar. target=”_self” är standard och behöver inte anges, detta använde vi i föregående övning. Alternativet target=”_blank” öppnar i ny flik och brukar användas när du lämnar en webbplats eller visar ett innehåll som du tror användaren vill se parallellt med din andra sida. Detta kan till exempel vara en manual. _parent och _top används inte direkt längre utan är en kvarleva från gamla tider och HTML taggen <frame>. De beter sig som ‘_self’ om du inte har ramar.
<h1>Mina projekt</h1>
<a href="myprojects/project1.html" target="_self"><h2>Projekt 1</h2></a>
<h2><a href="myprojects/project1.html" target="_blank">Projekt 2</a></h2>
<h2><a href="myprojects/project3.html">Projekt 3</a></h2>
Övning 7.1.c
Absolut länkning
Här länkar vi till en extern sida och använder därför target”_blank”. Vi anger även vilket protokoll som skall användas i detta fall webbsidesprotokollet http:// ibland är sidorna säkrare och använder en krypterad förbindelse och man använder då https://.
<p><strong><a href="http://www.lu.se" target="_blank">Min skola</a></strong></p>
Övning 7.2.a
Ankarlänkar
I koden nedan använder vi attributet id för att ange den exakta platsen på sidan dit länken leder. Observera att det bara får finnas ett id med samma namn på en sida, det blir inget fel men ankarlänken leder bara till första stället namnet återfinns.
See the Pen Assignment 7.2 by Lars Holmberg (@k3lara) on CodePen.
Övning 7.2.b
Bildlänkar
Nedan finns ett exempel på en bildlänk som leder till en sida med utförligare beskrivning av projekt 2. Det bör ligga liknande kod i samtliga av dina <article>-element på din index.html. Därunder finns kod för att hoppa tillbaka. Observera genom att ange länken href="../index.html#project2" med hashtag och namnet för id länkar du till en speciell plats på sidan index.html. På så sätt blir det enkelt för en besökare att hoppa tillbaka till samma plats hen kom från.
<a href="myprojects/project2.html" ><img src="images/fruit-apple-th.png" alt="Apple thumbnail"></a>
<h2><a href="../index.html#project2">Startsidan</a></h2>
Övning 7.2.c
E-postlänkar
Nedan finns ett förslag på hur koden för indexsidan kan se ut i sin helhet. Under den finns koden för hur ett av projekten kan se ut.
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Mina projekt</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1 id="topOfPage">Mina projekt</h1>
</header>
<nav>
<p>
<a href="#project1">Projekt 1</a>
</p>
<p>
<a href="#project2">Projekt 2</a>
</p>
<p>
<a href="#project3">Projekt 3</a>
</p>
</nav>
<main>
<article id="project1">
<h1>Projekt 1</h1>
<a href="myprojects/project1.html"><img src="images/dairy-milk-th.jpg" alt="Milk thumbnail"></a>
<p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</p>
<p>
<a href="#topOfPage">Tillbaka</a>
</p>
</article>
<article id="project2">
<h1>Projekt 2</h1>
<a href="myprojects/project2.html"><img src="images/fruit-apple-th.png" alt="Apple thumbnail"></a>
<p>Sed quia consequuntur magni dolores eos qui ratione voluptatem.
</p>
<p>
<a href="#topOfPage">Tillbaka</a>
</p>
</article>
<article id="project3">
<h1>Projekt 3</h1>
<a href="myprojects/project2.html"><img src="images/fruit-lemon-th.jpg" alt="Lemmon thumbnail"></a>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</p>
<p>
<a href="#topOfPage">Tillbaka</a>
</p>
</article>
</main>
<footer>
<a href="mailto:a.b@gmail.com">Skicka mail</a>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Projekt 1</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Projekt 1</h1>
</header>
<main>
<p><img src="../images/dairy-milk.jpg" alt="Milk">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<h2><a href="../index.html#project1">Startsidan</a></h2>
</main>
<footer>
<a href =" mailto:a.b@gmail.com">Skicka mail</a>
</footer>
</body>
</html>
Övning 8.1.a
Inkludera bilder och figurer
Nedan finns ett förslag på hur koden för bildsidan kan se ut. Ett tips är att använda gemener för alla filnamn både på själva filen samt när man refererar till den i <img> elementet (se kapitel 2.2).
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Mina Bilder 1</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Skogsbilder</h1>
</header>
<main>
<article>
<img src="images/forrest1.jpg" alt="Foto som visar en gles odlad skog i norrland">
</article>
<article>
<img src="images/forrest2.jpg" alt="Foto av solbelyst bokskog i skåne.">
</article>
<article>
<img src="images/forrest3.png" alt="Illustration som visar ett träd.">
</article>
<article>
<img src="images/forrest4.gif" alt="Animation av en man som springer i skogen.">
</article>
</main>
</body>
</html>
Övning 8.1.b
Bild-bredd
All bilder kommer då att skalas till samma bredd men lite olika höjd om bredd/höjd förhållande varierar.
Vad händer om du lägger alla img taggar ovanför varandra i ett <article> element så här?
<article>
<img src="images/forrest1.jpg" alt="Foto som visar en gles odlad skog i norrland" width="200">
<img src="images/forrest2.jpg" alt="Foto av solbelyst bokskog i skåne." width="200" height="400">
<img src="images/forrest3.png" alt="Illustration som visar ett träd." width="200" >
<img src="images/forrest4.gif" alt="Animation av en man som springer i skogen." width="200" >
</article>
Övning 8.1.c
Bild-höjd
Här tvingar vi alla bilder att ha samma bildförhållande. Det innebär att bilderna förvrängs vilket sällan är önskvärt.
Tänk på att när du ändrar bredd och höjd så ändras inte den storlek bilden har när den är sparad den bara zoomas in eller ut. Därför måste man skala ner bilder till tummnagel-storlek om man vill visa många på en sida annars tar det mycket lång tid att ladda en sida.
Det går ofta fort att ladda en sida för den som bygger den eftersom bilderna lagras temporärt i webbläsaren. Sedan när man ber någon annan titta på sidan från en annan dator går det långsamt första gången sidan visas. Inte alls bra när du vill sälja in din webbdesign (du är i gott sällskap om du gör det misstaget).
Ett tips är att googla på hur du tömmer cache-minnet för den webbläsare du använder, då kan du rensa bort alla lagrade sidor och bilder och iaktta hur en sida laddas för en förstagångsbesökare.
Övning 8.1.d
Figur elementet
De bilder som du lägger elementet <figure> runt kommer att få en marginal. Om du använder inspektionsverktyget (högerklick inpektera) så kan du se att det finns en sidomarginal som är 40px och marginal ovanför och nedanför som är 16px . Detta beteendet kan man ändra med CSS. Detta är främst en semantisk uppmärkning det vill säga att allt som finns inom <figure> skall betraktas som att det tillhör en bild eller figur. Titta på definitionen MDN för mer information bland annat om vilka element som får finnas i ett <figure> element.
Övning 8.1.e
Figurtext
Du bör tänka som så att det som står i alt attributet syns när man rör musen (hovrar) över en bild men även att det för en person med synnedsättning skall beskriva bilden. Det vill säga de båda texterna skall komplettera varandra. Nedan finns ett förslag på hur det kan se ut för en av dina bilder.
<article>
<figure>
<img src="images/forrest2.jpg" alt="Foto av en bäckravin med solbelyst bokskog i Skåne." width="200" height="400">
<figcaption>
<b>Figure 2: </b><i>I denna solglänta vandrade Linnè den 31 maj 1749. Enligt hörsägen vilade han på slänten och svalkade sina fötter i bäcken.</i></figcaption>
</figure>
</article>
Övning 9.1
Ordnade listor
Nedan syns html-koden som finns innanför <body> elementet. Öppna gärna genom codepen och experimentera lite med olika typer av numrering med type= attributet. Det finns ett attribut reversed som sorterar listan i omvänd ordning. Kan du få det att fungera? MDN ordnade listor.
See the Pen Assignment 9.1 by Lars Holmberg (@k3lara) on CodePen.
Övning 9.2
Oordnade listor
Ordnade listor inuti en oordnad lista. Om du vill ändra pricken i den oordnade listan görs det via CSS. Mer om listor på MDN: Oordnade och ordnade.
See the Pen Assignment 9.2 by Lars Holmberg (@k3lara) on CodePen.
Övning 9.3
Beskrivningslistor
En lite ovanligare lista där delarna kategoriseras med hjälp av indrag.
See the Pen Assignment 9.3 by Lars Holmberg (@k3lara) on CodePen.
Övning 10.1.a
Tabell med bilder
Tabell med länkar och bilder.
<table>
<tr>
<td><a href="https://sv.wikipedia.org/wiki/Ost" target="_blank" >Cheese</a></td>
<td><img src=images/dairy-cheese-etc-th.jpg alt="Olika ostar på ett fat"></td>
<td>Mejeriprodukt</td>
</tr>
<tr>
<td><a href="https://sv.wikipedia.org/wiki/Mj%C3%B6lk" target="_blank" >Mjölk</a></td>
<td><img src=images/dairy-milk-th.jpg alt="Glas med mjölk"></td>
<td>Mejeriprodukt</td>
</tr>
<!--Resten av raderna-->
</table>
Övning 10.1.b
Tabell fortsättning
Tabell med beskrivning, rubriker samt tabellfot.
<table>
<caption><h3>Frukt o grönt i affären</h3></caption >
<thead>
<tr>
<th>Produkt</th>
<th>Bild</th>
<th>Varugrupp</th>
</tr>
</thead>
<tr>
<td><a href="https://sv.wikipedia.org/wiki/Ost" target="_blank" >Cheese</a></td>
<td><img src=images/dairy-cheese-etc-th.jpg alt="Olika ostar på ett fat"></td>
<td>Mejeriprodukt</td>
</tr>
<tr>
<td><a href="https://sv.wikipedia.org/wiki/Mj%C3%B6lk" target="_blank" >Mjölk</a></td>
<td><img src=images/dairy-milk-th.jpg alt="Glas med mjölk"></td>
<td>Mejeriprodukt</td>
</tr>
<!--Resten av raderna-->
<tfoot>
<tr>
<td><h4>Vollsjö Frukt o grönt</h4></td>
<td><b>Tel:</b><i>0708-123456</i></td>
<td><b>E-post:</b><i>vfg@gmail.com</i></td>
</tr>
</tfoot>
</table>
Övning 10.1.c
Sammanslagning av rader
Del av lösning på övningen. Här visas de två första raderna i en tabell där vi slagit ihop två rader lodrätt så att “Mejeriprodukter” bara förekommer en gång för båda raderna. Lägg märke till att det därför endast finns två tabellceller <td> i den andra tabellraden eftersom den sista cellen <td> är ihopslagen med raden ovanför.
<table>
<!--Caption och tabellhuvud-->
<tr>
<td>
<a href="https://sv.wikipedia.org/wiki/Ost" target="_blank">Cheese</a>
</td>
<td><img src="images/dairy-cheese-etc-th.jpg" alt="Olika ostar på ett fat"></td>
<td rowspan="2">Mejeriprodukt</td>
</tr>
<tr>
<td>
<a href="https://sv.wikipedia.org/wiki/Mj%C3%B6lk" target="_blank">Mjölk</a>
</td>
<td><img src="images/dairy-milk-th.jpg" alt="Glas med mjölk"></td>
</tr>
<!--Resten av raderna och tabellfot-->
</table>
Övning 10.1.d
Sammanslagning av kolumner
Del av lösning på övningen. Här visas de två sista raderna i en tabell. I tabellfonten <tfoot> har vi slagit ihop alla tre kolumnerna till en så att informationen on affären kan utnyttja hela kolumnbredden.
<table>
<!--Caption tabellhuvud och rader-->
<tr>
<td>
<a href="https://sv.wikipedia.org/wiki/Potatis" target="_blank">Potatis</a>
</td>
<td><img src="images/vegetables-potato-th.jpg" alt="Potatis"></td>
</tr>
<tfoot>
<tr>
<td colspan="3">
<h4>Vollsjö Frukt o grönt</h4>
<p>
<b>Tel:</b>
<i>0708-123456</i>
</p>
<p>
<b>E-post:</b>
<i>vfg@gmail.com</i>
</p>
</td>
</tr>
</tfoot>
</table>
Övning 11.1.a
Logga in 1
Ett mycket enkelt formulär. Vi har utelämnat attributet action="serverfil.php" i form-elementet eftersom vi inte har någon server som kan ta emot det vi skickar. I stället för att använda <label> har vi skrivit in value= direkt i inmatningsfälten.
1: När attributet method="get" används skickas det man lagt i formuläret som en del av adressen i en så kallad query-string. Det är den del av adressen som står efter frågetecknet nedan.
Efter frågetecknet kommer informationen. I detta fall har jag anget “kl85B” som användarnamn och “qwe123” som lösenord.
2: När attributet method="post" används blir det fel. Med metoden post packas informationen in i paketet som sedan skickas till servern. Det blir fel här eftersom vi inte har någon server att skicka till.
<form method="get">
<input name="username" value="Användarnamn">
<input type="password" name="password" value="lösen">
<input type="submit" value="Logga in">
</form>
Övning 11.1.b
Logga in 2
Formulär där inmatningsfälten placerats i en tabell. Detta är ett, av många möjliga, sätt att organisera delarna i ett formulär. I boken används <div> taggar att lägga elementen i, det är egentligen en bättre lösning, men det kräver lite CSS som gör att <div>-boxarna kan flyttas runt. Tabeller är en central komponent men används inte i samma utsträckning som tidigare innan HTML5 med semantisk uppmärkning introducerades (Se kapitel 5). Det beror främst på att det är svårare att göra tabeller som är responsiva så att element kan flytta runt när man basöker sidan från en liten skärm.
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Logga in</title>
</head>
<body>
<form method="get">
<table>
<caption><b>Logga in på Äpplemarknaden</b></caption>
<tr>
<td rowspan="3"><img src="images/fruit-apple.jpg" width="100" height="100" alt="Äpple"></td>
<td>
<label for="username">Användarnamn</label>
<input id="username" name="username">
</td>
</tr>
<tr>
<td>
<label for="password">Lösenord</label>
<input id="password" type="password" name="password">
</td>
</tr>
<tr>
<td>
<input type="submit" value="Logga in">
</td>
</tr>
</table>
</form>
</body>
</html>
Övning 11.2
Ett lite mer omfattande formulär
I denna uppgiften har vi använt andra metoder än tabeller för att separera elementen. De vi använt är <div> och <p> som är blockelement och radbryter och håller ihop element till en enhet. <p> elementet skapar även lite utrymme runt om. Vi har även använt <br> elementet som endast infogar en radbrytning. På ett par ställe använder vi &nbps; som är koden för none-breaking space. &nbps; som kan användas om man vill vara säker på hur många mellanslag som läggs till. I exemplet har vi medvetet blandat olika tekniker vilket du såklart inte har gjort :).
Attributen name=, value= kan vara lite förvirrande eftersom de inte behövs när vi inte skickar informationen till en server. name= och value= hör ihop och meddelar i detta fallet att "artist=ca" dvs att den första checkboxen klickats i.
for= och id= håller ihop en label med ett input field.
type= anger vilken typ av inmatning som förväntas, den blockerar inte felaktig inmatning men till exempel din browser kan föreslå inmatning av sparad e-postadress. Testa gärna detta i Codepen exemplet.
Lägg gärna märke till att informationen skickas i klartext i en query-string när du trycker på skicka när du kör koden lokalt på din dator (Obs detta går inte att se på Codepen). Så här kan skickad information se ut:
index.html?artist=ca&artist=fs&firstname=Lars&lastname=Holmberg&phone=0708655345&email=k3larra%40hotmail.com&diet=veget&other_diet=Allergi+mot+paprika.®ister=Skicka
Denna information avkodas sedan på serversidan i ett specialskrivet program.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Beskrivning">
<meta name="author" content="Montathar Faraon">
<title>Template</title>
</head>
<body>
<h3>Lovande unga kontnärer ställer ut på Subversiva Galleriet</h3>
<form method="get">
<fieldset>
<legend>Specialvisning</legend>
<div>
<input type="checkbox" name="artist" value="ca" id="ca">
<label for="ca">Chris Alvarez
</label >
<input type="checkbox" name="artist" value="en" id="en">
<label for="en">Edvard Nilsson</label >
</div>
<div>
<input type="checkbox" name="artist" value="sj" id="sj">
<label for="sj">Sara Jakobsson</label >
<input type="checkbox" name="artist" value="fs" id="fs">
<label for="fs">Fahed Sahli</label >
</div>
</fieldset>
<fieldset>
<legend>Kontaktuppgifter</legend>
<p>
<label for="firstname">Förnamn</label>
<input id="firstname" name="firstname" type="text">
<label for="lastname">Efternamn</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="phone">Telefonummer</label>
<input id="phone" name="phone" type="tel">
<label for="email">E-postadress</label>
<input id="email" name="email" type="email">
</p>
</fieldset>
<fieldset>
<legend>Kostönskemål</legend>
<p>
<label for="diet">Kost</label >
<select id="diet" name="diet">
<option value="no">----</option >
<option value="veget">Vegetarian</option >
<option value="vegan">Vegansk</option>
</select>
</p>
<p>
<label for="other_diet">Övriga kostönskemål</label>
<br>
<textarea id="other_diet" rows="3" cols="80" name="other_diet"></textarea >
</p>
</fieldset>
<br>
<input type="submit" name="register" value="Skicka">
</form>
</html>
See the Pen Övning 11.2 by Lars Holmberg (@k3lara) on CodePen.
Övning 12.1
Film från Youtube
Det finns ett antal sidor på nätet där du kan hämta innehåll genom att använda ett <video> element. Om man hämtar filer från inte betrodda källor kan dessa innehålla virus eller så kan innehållet bytas ut av den som sköter servern till något man absolut inte vill visa på sin sida. De som distribuerar material mer seriöst vill ha bättre kontroll över innehållet och tillåter endast visning via deras egen uppspelningsenhet. Nedan visas hur material från YouTube bäddas in i sidan.
På YouTube högerklickar man på filmen och väljer kopiera inbäddningskod för att få tillgång till koden nedan.
1
2
3
4
5
<figure>
<h1>Inbäddad film från YouTube</h1>
<iframe width="1045" height="588" src="https://www.youtube.com/embed/drnBMAEA3AM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
<figcaption>The sound of music(1965)</figcaption>
</figure>
Övning 12.2
Egen film
När du visar innehåll från samma server som din webbsida finns kan <video> elementet användas. Du har då full kontroll över materialet och kan göra mer som du vill med det. I nedanstående exempel har vi ställt in storleken på videofönstret samt använt attributet autoplay för att ange att filmen skall börja spela direkt. Andra attribut kan du hitta på MDN video
1
2
3
4
5
6
7
<figure>
<h1>Lokal film</h1>
<video width="450" height="250" autoplay loop>
<source src="media/bee.mp4" type ="video/mp4">
</video>
<figcaption>Film about bees.</figcaption>
</figure>
Övning 12.3
Ljudfil
När du visar innehåll från samma server som din webbsida finns kan <audio> elementet användas. Här använder vi attributen “controls” och “loop” så att kontrollknapparna visas och att ljudet loopas när det väl börjat spelas. Vi har lagt audio-elementet i ett <figure> element för att kunna lägga till beskrivning på ett snyggt sätt.
1
2
3
4
5
6
7
<figure>
<h1>Lokalt ljud</h1>
<audio controls loop>
<source src="media/news.mp3" type ="audio/mp3">
</audio>
<figcaption>Ljud från omgivningen.</figcaption>
</figure>
Övning 12.4
I många webbläsare finns det stöd för att visa PDF-filer. Du kan konvertera dina presentationer, textdokument etc. till pdf från de flesta program. PDF är ett bra filformat eftersom det är lite svårare att ändra materialet än om du lämnar ut ditt dokument direkt, det är även ett praktiskt format eftersom det är skapat för att kunna visas på alla plattformar och alla webbläsare.
1
2
3
4
5
6
7
<object data="media/lecture.pdf" type="application/pdf" width="600" height="800">
<p>
Din webbläsare stödjer inte inbäddade pdf-filer.<br >
Ladda ner filen:
<a href="media/lecture.pdf">test.pdf</a>
</p>
</object >
Övning 13.1
Extern CSS fil
I denna övning använder vi en extern stilmall “style.css”. En extern mall gör det möjligt att koppla samma mall till flera sidor. Detta arbetsätt gör det enkelt att återanvända mallen i olika projekt.
1
2
3
4
5
6
7
8
p {
background-color: lightgray;
color: gray;
}
h2 {
background-color: black;
color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Introduktion till HTML och CSS</title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
</head>
<body>
<article>
<h2>Äpple</h2>
<p>Gravensteiner</p>
</article>
</body>
</html>
Övning 13.2
Intern CSS fil
I denna övning använder vi dels en extern stilmall “style.css” och dels stilsättning av samma element i ett <style> element i <head> elementet. På detta sätt kan du överskugga stilsättning i en extern stilmall när du vill ändra i bara en fil eller prova ändringar. För att se vilken CSS-regel som gäller är utvecklarverktyget som finns i din webbläsare oumbärligt.
När det gäller konflikter mellan interna css-regler och regler i externa css filer är det den sist inlästa regeln som gäller. Reglerna läses i den ordning de står i <head> elementet. Experimentera gärna lite med detta, eftersom det ofta är denna typ av konflikter som kan vara svåra att hitta om du inte är förtrogen med utvecklarverktyget. Om du, i utvecklarverktyget, hovrar med muspekaren över en regel som är aktiv kan du inaktivera den och på det sättet inspektera hur reglerna inaktiveras och aktiveras.
1
2
3
4
5
6
7
8
p {
background-color: lightgray;
color: gray;
}
h2 {
background-color: black;
color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Introduktion till HTML och CSS</title>
<link rel="stylesheet" href="style.css">
<style>
p {
background-color: blue;
color: red;
}
h2 {
background-color: red;
color: cyan;
}
</style>
<meta charset="utf-8">
</head>
<body>
<article>
<h2>Äpple</h2>
<p>Gravensteiner</p>
</article>
</body>
</html>
Övning 13.3
Intern CSS fil
I denna övning använder vi extern stilmall “style.css”, intern stilsättning samt stilsättning direkt i html-koden med ett style-attribut.
En regel som använder style attributet för ett element läses in sist och överskuggar därför alla tidigare regler.
Sträva efter att bara ha regler på ett ställe, det är dock praktiskt att enkelt kunna felsöka genom att stilsätta, till exempel, bakgrunden på ett element för att se hur stor plats det tar på en sida. Att kombinera regler som kommer från olika källor (extern, intern, inline) är en central egenskap hos CSS. Denna egenskap ligger bakom att stilsättningen kallas “cascade” eftersom den, så att säga, rinner nedåt i en kaskad.
Som ofta är fallet finns det undantag och möjlighet att sätta regler ur spel, det kan göras genom att ange !important efter en regeln så här:
1
2
3
4
h2 {
background-color: red;
color: cyan !important;
}
Detta skall dock undvikas eftersom de sätter “cascade” funktionaliteten ur spel. Detta diskuteras vidare i nästa kapitel.
1
2
3
4
5
6
7
8
p {
background-color: lightgray;
color: gray;
}
h2 {
background-color: black;
color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Introduktion till HTML och CSS</title>
<link rel="stylesheet" href="style.css">
<style>
p {
background-color: blue;
color: red;
}
h2 {
background-color: red;
color: cyan !important;
}
</style>
<meta charset="utf-8">
</head>
<body>
<article>
<h2 style="color: orange">Äpple</h2>
<p style="color: gold; background-color: silver;">Gravensteiner</p>
</article>
</body>
</html>
Övning 14.1
Ny mall
Nedan finns mallfiler för index.html och style.css som du kan kopiera och utgå från i kommande övningar.
/* Startkod så att du kan se att kopplingen mellan html-fil och stilmall fungerar.*/
body {
background-color: lightgray;
color: black;
}<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Mall">
<meta name="author" content="fnamn enamn">
<link rel="stylesheet" href="style.css">
<title>Template</title>
</head>
<body>
<!-- Innehåll som ska visas i en webbläsare anges här -->
<p>Template</p>
</body>
</html>Övning 14.2.a
Semantisk uppmärkning igen
Nedan finns html sidan som vi skall stilsätta. Sidan använder de semantiska elementen <main> och <article>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Mall">
<meta name="author" content="fnamn enamn">
<link rel="stylesheet" href="style.css">
<title>Template</title>
</head>
<body>
<main>
<article>
<h3>Äpple</h3>
<figure>
<img src="images/fruit-apple.jpg" alt="Äpple">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
<article>
<h3>Citron</h3>
<figure>
<img src="images/fruit-lemon.jpg" alt="Citron">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
<article>
<h3>Apelsin</h3>
<figure>
<img src="images/fruit-orange.jpg" alt="Apelsin">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
</main>
</body>
</html>
Övning 14.2.b
Bildstorlek
CSS regler som anger bildstorlek samt storlek på det omgivande article elementet.
1
2
3
4
5
6
7
8
9
10
img {
width: 200px;
height: 175px;
}
article {
width: 280px;
}
h3 {
text-align: center;
}
Övning 14.2.c
Inspektera storleken på element
CSS som färglägger bakgrunden så storleken på elementen syns. Detta kan även göras genom att inspektera sidan med verktyget för detta i din browser. Men det blir extra tydligt när man gör som i nedanstående exempel.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
img {
width: 200px;
height: 175px;
background-color: gray;
}
article {
/*width: 280px;*/
background-color: red;
}
main {
background-color: green;
}
h3 {
background-color: silver;
text-align: center;
}
figure {
width: 200px;
background-color: gold;
}
figcaption {
background-color: yellow;
}
Övning 14.2.d
Storlek på element
Kommenterad CSS kod för denna övning. Resultatet är inte så snyggt eftersom vi inte styrt, till exempel, avståndet ovanför Äpple och under texten för att skapa utrymme. Vi återkommer till det i senare uppgifter. Att skala bilderna på det sätt vi gör här är inte heller så bra eftersom det kan innebära att en mycket stor bild skalas ner och blir liten, dels utnyttjas inte hela bildens upplösning men vad som är värre är att det påverkar tiden det tar att ladda en sida. Det är bättre att skapa exakt de storlekar som behövs om tiden att ladda en sida är prioriterad.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*För att se till att alla bilder visas i samma storlek, oberoende av ursprunglig storlek, anger vi visningsstorleken här*/
img {
width: 200px;
height: 175px;
}
/*Vi ger article elementen samma bredd så att det blir lika stor ram runt dem.*/
article {
width: 280px;
background-color: lightgray;
}
h3 {
text-align: center;
}
figure {
width: 200px;
}
Övning 14.3.a
Klass-selektorer
I övningen använder vi klass-selektorer i stället för typ-selektorer. Du bör använda klass-selektorer som standard eftersom de kan kopplas dynamiskt till vilka element du vill. Att använda typ-selektorer direkt är praktiskt i vissa fall, till exempel när du felsöker eller om du, av någon anledning, inte vill eller kan ändra i html-filen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*För att se till att alla produktbilder blir lika stora oberoende av
ursprunglig storlek anger vi storleken här*/
.product_img {
width: 200px;
height: 175px;
}
/*Vi ger article elementen samma bredd så att det är ungefär like stor ram
runt dem.*/
.product_article {
width: 280px;
background-color: lightgray;
}
.product_h3 {
text-align: center;
}
.product_figure {
width: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Mall">
<meta name="author" content="fnamn enamn">
<link rel="stylesheet" href="style.css">
<title>Template</title>
</head>
<body>
<main>
<article class="product_article">
<h3 class="product_h3">Äpple</h3>
<figure class="product_figure">
<img class ="product_img" src="images/fruit-apple.jpg" alt="Äpple">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
<article class="product_article">
<h3 class="product_h3">Citron</h3>
<figure>
<img class="product_img" src="images/fruit-lemon.jpg" alt="Citron">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
<article class="product_article">
<h3 class="product_h3">Apelsin</h3>
<figure>
<img class="product_img" src="images/fruit-orange.jpg" alt="Apelsin">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
</main>
</body>
</html>
Övning 14.3.b
Klass-selektorer och typselektorer
I övningen använder vi klass-selektorer i stället för typ-selektorer. Du bör använda klass-selektorer som standard eftersom de kan kopplas dynamiskt till valfritt element. Att använda typselektorer, som i föregående uppgift, är praktiskt i vissa fall, till exempel när du felsöker för att snabbt se ett resultat.
1
2
3
4
5
6
7
8
9
10
11
12
.product_article {
width: 280px;
background-color: lightgray;
}
article {
width: 280px;
background-color: black;
}
.product_article_2 {
width: 280px;
background-color: lightblue;
}
Övning 14.3.c
Klass-selektorer och typselektorer
I denna uppgift visar vi specificitet för typ-selektorer, klass-selektorer och style-attribut. Genom inspektion med ett utvecklarverktyg kan du se vilka regler som slår igenom.
1
2
3
4
5
6
7
8
9
<article style="background-color: gold" class="product_article product_article_2" >
<h3 class="product_h3">Äpple</h3>
<figure class="product_figure">
<img class ="product_img" src="images/fruit-apple.jpg" alt="Äpple">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
1
2
3
4
5
6
7
8
9
10
11
12
.product_article {
width: 280px;
background-color: lightgray;
}
article {
width: 280px;
background-color: black;
}
.product_article_2 {
width: 280px;
background-color: lightblue;
}
Övning 14.4.b
ID-selektorer
CSS kod kopplad till ID selektorn har högre specificitet än class-selektorer men lägre än ett style-attribut direkt i HTML-koden. ID selektorn används för att ange en speciell plats på en sida. Det är dock inget som hindrar att du använder ID-selektorer för stil-sättning, det är dock inte en strategi som du bör prioritera i relation till class-selektorer. ID selektorer används främst för att koppla ankare till för att länka till en specifik plats på en sida Uppgift 14.4.a eller, för att hitta en plats på sidan från kod i JavaScript.
1
2
3
4
5
6
7
8
9
<article class="product_article" id="lemon">
<h3 class="product_h3">Citron</h3>
<figure>
<img class="product_img" src="images/fruit-lemon.jpg" alt="Citron">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
1
2
3
4
5
6
7
8
9
/*Other CSS code*/
.product_article {
width: 280px;
background-color: lightgray;
}
#lemon{
background-color: yellow;
}
/*Other CSS code*/
Övning 14.4.b
ID-selektorer
ID attribut används för att hitta en specifik plats på en sida. Ett specifikt attribut får bara finnas på en plats på sidan, en modern editor påpekar detta men det blir inget fel på sidan när den vissas i en browser. Att ha dubblett-ID bör du undvika eftersom de kan ge upphov till svårfunna fel. Testa gärna vad som händer om du har samma ID på flera platser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Mall">
<meta name="author" content="fnamn enamn">
<link rel="stylesheet" href="style.css">
<title>Template</title>
</head>
<body>
<nav>
<ul>
<li>Startsida</li>
<li> <a href="#apple">Äpple</a></li>
<li> <a href="#lemon">Lemon</a></li>
<li> <a href="#orange">Orange</a></li>
</ul>
</nav>
<main>
<article style="background-color: gold" class="product_article product_article_2" id="apple">
<h3 class="product_h3" >Äpple</h3>
<figure class="product_figure">
<img class="product_img" src="images/fruit-apple.jpg" alt="Äpple">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
<article class="product_article" id="lemon">
<h3 class="product_h3">Citron</h3>
<figure>
<img class="product_img" src="images/fruit-lemon.jpg" alt="Citron">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
<article class="product_article" id="orange">
<h3 class="product_h3" >Apelsin</h3>
<figure>
<img class="product_img" src="images/fruit-orange.jpg" alt="Apelsin">
<figcaption>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.?
</figcaption>
</figure>
</article>
</main>
</body>
</html>
Övning 15.1.a
Enheter procent
Nedan visas koden för hela sidan. <article> fyller ut hela bredden på visningsytan (Viewport), det kan du se i inspektera verktyget där det anges display: block;. Om du i stället anger display:inline; för article blir <article> ett inline element. Skalar du bilderna så att de tar mindre än 50% kommer det att få plats flera bilder än en per rad.
Utforska gärna hur webbsidan ser ut på olika telefonmodeller i både porträtt och landskaps vy.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Mall">
<meta name="author" content="fnamn enamn">
<link rel="stylesheet" href="style.css">
<title>Uppgift 14.1.a</title>
</head>
<body>
<main>
<section class="section-properties">
<article class="article-properties">
<img class="img-properties" src="images/fruit-apple.jpg" alt="Äpple">
</article>
<article class="article-properties">
<img class="img-properties" src="images/fruit-apple-th.png" alt="Citron">
</article>
<article class="article-properties">
<img class="img-properties" src="images/fruit-orange.jpg" alt="Apelsin">
</article>
<article class="article-properties">
<img class="img-properties" src="images/fruit-orange-th.jpg" alt="Äpple">
</article>
<article class="article-properties">
<img class="img-properties" src="images/fruit-tomatoes-th.jpg" alt="Citron">
</article>
<article class="article-properties">
<img class="img-properties" src="images/fruit-tomato.jpg" alt="Tomat">
</article>
</section>
</main>
</body>
</html>
1
2
3
4
5
6
7
.article-properties{
background-color: lightseagreen;
}
/*Skala bilder till halva bredden*/
.img-properties{
width: 50%;
}
Övning 15.1.b
Enheter relativt föräldraelement
Med procent tar ett element upp 50% av föräldraelementet. Här märks det genom att <article> blir halva skärmbredden samt att sedan bilden blir halva bredden av <article>, dvs en fjärdedel av skärmbredden.
Övning 15.1.c
Enheter relativt visningsyta
Använder du 50vw (Vieweport Width) utgår bredden på både bilder och <article> från skärmbredden och blir därför lika stora.
Övning 15.2
Typsnitt
I nedanstående kod använder vi rem som enhet för att relatera storleken till standardstorleken för text på sidan. Använder du em så är storleken relativt föräldra-elementet och då blir det lite mer att räkna på.
För typselektorer använder vi syntax för barnselektorer ul ul li det vill säga: ett li-element inuti ett ul-element som i sin tur ligger i ett ul-element. Denna regel har då högre specificitet än li och därför gäller den. I den nedre listan, den med klasselektorer, är dessa regler mer specifika än typselektorer, och därför gäller dessa. Titta gärna på detta i inspektera-verktyget i din webbläsare.
Ett val mellan typselektorer och klasselektorer är delvis en smaksak, vill göra ändringar som gäller, till exempel, alla listor är klass-selektorer bra. Det kan vara så att att du alltid vill rendera inre listor på ett annat sätt än yttre. Då behöver du inte komma ihåg ett klassnamn utan det fungerar direkt.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Mall">
<meta name="author" content="fnamn enamn">
<link rel="stylesheet" href="style.css">
<title>Uppgift 14.1.a</title>
</head>
<body>
<main>
<h3>Med typ-selektorer</h3>
<ul>
<li>Frukt<ul>
<li>Apelsin</li>
<li>Äpple</li>
<li>Päron</li>
</ul>
</li>
<li>Grönsaker
<ul>
<li>Purjolök</li>
<li>Lök</li>
<li>Blomkål</li>
</ul>
</ul>
<h3>Med klass-selektorer</h3>
<ul>
<li class=li-prop-main>Frukt
<ul>
<li class=li-prop-inner>Apelsin</li>
<li class=li-prop-inner>Äpple</li>
<li class=li-prop-inner>Päron</li>
</ul>
</li>
<li class=li-prop-main>Grönsaker
<ul>
<li class=li-prop-inner>Purjolök</li>
<li class=li-prop-inner>Lök</li>
<li class=li-prop-inner>Blomkål</li>
</ul>
</li>
</ul>
</main>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
ul ul li{
font-size: 0.5rem;
}
li{
font-size: 1.5rem;
}
.li-prop-main{
font-size: 1.5rem;
}
.li-prop-inner{
font-size: 0.5rem;
}
Övning 16.1.a
Utfyllnad, marginal och kantlinje.
Nedan har vi använt CSS-klasser för att tilldela egenskaper (i detta begränsade exempel går det lika bra att tilldela egenskaper direkt till typselektorer). Vi anger bildstorleken i px för att skalningen skall ske till jämna pixlar, samma sak gäller för kantlinjen. Det går även att ange detta i rem, eftersom 1 rem som standard är 16 px så skulle bildbredden bli 4rem för att motsvara 64px. Detta förklarar i sin tur varför vi angett bredden på article till 4rem, som motsvarar bredden på innehållet i standard boxmodellen (Se avsnitt 16.5).
Höjden 42px på bilderna har vi angett för att bilderna inte skall förvrängas så mycket, trots att de har lite olika storlek.
Som du ser är det samma avstånd ovanför det första article elementet som mellan de följande, trots att det egentligen är två marginaler, en för article ovanför och en för article nedanför. Att det inte blir så beror på så kallade kollapsande marginaler, där ett designbeslut är taget som innebär att man oftast vill ha samma avstånd ovanför det första elementet som mellan elementen. Du kan läsa mer om det här Collapsing margins.
1
2
3
4
5
6
7
8
9
<!--More HTML code above-->
<section>
<article class="article-properties">
<img class="image-properties" src="images/dairy-cheese-etc-th.jpg" alt="Ost">
</article>
<article class="article-properties">
<img class="image-properties" src="images/dairy-milk-th.jpg" alt="Mjölk">
</article>
<!--More HTML code below-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.article-properties{
background-color: lightseagreen;
}
body {
background-color: lightgray;
color: black;
}
.image-properties{
width:64px;
height:42px;
}
.article-properties{
width:4rem;
padding:0.5rem;
margin:1rem;
border:1px solid black;
border-radius: 2px;
background-color: WhiteSmoke;
}
Övning 16.1.b
Standard och alternativ boxmodell
För den alternativa boxmodellen räknas utfyllnad och kantlinje in i bredden. Vi har då bilden som är 64px, utfyllnad 0.5rem, dvs 16px totalt, och kantlinjen som är 1px på varje sida, dvs 2px. Totalt alltså 82px eller bättre 82/16 = 5.125rem.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Ange att alla element skall inkludera padding och kantlinje för dimensioner */
*{
box-sizing: border-box;
}
body {
background-color: lightgray;
color: black;
}
.image-properties{
width:64px;
height:42px;
}
.article-properties{
width:5.125rem;
padding:0.5rem;
margin:1rem;
border:1px solid black;
border-radius: 2px;
background-color: WhiteSmoke;
}
Övning 16.2
Inline, block och inline-block
Använder du inline så blir höjden på article mindre än bilden. I äldre versioner av html fanns bara inline och block, de är inte anpassade för modern responsiv design. Inline-block har skapats för att möta detta behov.
Vid inline-block kollapsar inte marginaler därför anges 0.25rem för att ge totalt 0.5 rem mellan två <article.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
*{
box-sizing: border-box;
}
body {
background-color: lightgray;
color: black;
}
.image-properties{
width:64px;
height:42px;
}
/*Display: inline-block; innebär att elementen hamnar på samma rad*/
.article-properties{
display: inline-block;
width:5.125rem;
padding:0.5rem;
margin:0.25rem;
border:1px solid black;
border-radius: 2px;
background-color: WhiteSmoke;
}
Övning 16.3
Float
I CSS koden nedan har vi använt barnselektorer får att nå elementen inuti <article> elementen. Vi behöver då inte skapa så många CSS klasser.
De två första raderna i CSS koden är centrala, den första display: inline-block; anger att så många <article> element som får plats skall placeras på samma rad. Den andra raden vertical-align: top; anger att blocken skall anpassas mot överkant (prova att ta bort raden).
Resten av CSS raderna är justeringar för att få innehållet att se någotsånär snyggt ut, detta kan göras på flera sätt.
1
2
3
4
5
6
7
8
9
10
<!-- Inside section -->
<article class="article-properties">
<h3>Ost</h3>
<img src="../images/dairy-cheese-etc-th.jpg" alt="Ost">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</article>
<!-- the rest of the articles inside the section element -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* Ange att alla element skall inkludera padding och kantlinje för dimensioner */
* {
box-sizing: border-box;
}
body {
background-color: lightgray;
color: black;
}
.article-properties {
display: inline-block; /* Placera det antal element som får plats på en rad */
vertical-align: top; /* Anpassa mot överkant*/
width: 16rem;
height: 16rem;
padding: 0.5rem 0.5rem 0.5rem 0.7rem;
margin: 0.25rem;
border: 1px solid black;
border-radius: 2px;
background-color: WhiteSmoke;
}
.article-properties>img {
width: 64px;
height: 42px;
float: left;
margin-right: 0.5rem;
margin-top: 0.5rem;
}
.article-properties>h3 {
text-align: center;
margin-bottom: 0px;
margin-top: 0.5rem;
}
.article-properties>p {
margin-top: 0px;
}
Övning 16.4
Relativ positionering
I CSS koden nedan använder vi .hover på article elementen och flyttar positionen relativt utgångsläget.
1
2
3
4
5
.article-properties:hover{
position : relative;
top: 0.25rem;
left: 0.25rem;
}
Övning 17.1
Gridmall
Mall för Gridlayout som fyller ut hela sidan. Vi har i koden även lagt in ett nav element i header.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Mall">
<meta name="author" content="fnamn enamn">
<link rel="stylesheet" href="style.css">
<title>Template Grid</title>
</head>
<body>
<header>
Sidhuvud
<nav>Navigation</nav>
</header>
<aside>Sidoinnehåll</aside>
<main>Huvudinnehåll</main>
<footer>Sidfot</footer>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*Sidmall gridlayout*/
body {
height:100vh;
display:grid;
grid-template-rows: 1fr 3fr 1fr; /*sidan delas på tre delar, första tar 20% av höjden nästa 60% den sista 20% (femtedelar)*/
grid-template-columns: 1fr 2fr; /*Den första columnen dubbelt så stor som den andra. (tredjedelar)*/
gap:1rem; /*Lite avstånd mellan delarna på sidan*/
background-color: lightgray;
color: black;
}
/*navigation*/
header{
background-color: gainsboro;
color: black;
grid-row: 1 / 2; /*Första delen, dvs slutar innan område 2 börjar*/
grid-column: 1 / 3; /* Innehäller alla delar slutar där område 3 skulle börja om det fanns*/
}
aside{
background-color: darkgray;
color: black;
grid-row: 2 / 3;
grid-column: 1 / 2;
}
main{
background-color: silver;
color: black;
grid-row: 2 / 3;
grid-column: 2 /3;
}
footer{
background-color:ghostwhite;
color: black;
grid-row: 3 / 4;
grid-column: 1 /3;
}
Övning 17.2.a
Navigation
Mall för Gridlayout som fyller ut hela sidan. Vi har i koden även lagt in ett nav element i header. Nedan visas de centrala delarna för att skapa en meny där alltid samtliga menyval finns med oberoende hur bred sidan är. Prova hur navigationen ser ut när du gör webbläsarfönstret smalare och hur det ser ut på en mobil.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--Mer HTML ovan.-->
<header>
<h1>Livsmedel o sånt</h1>
<nav id="thumb-nav">
<article class="article-properties">
<p>Ost</p>
<img class="image-properties" src="../images/dairy-cheese-etc-th.jpg" alt="Ost">
</article>
<article class="article-properties">
<p>Mjölk</p>
<img class="image-properties" src="../images/dairy-milk-th.jpg" alt="Mjölk">
</article>
<!--Resten av bilderna i <article>-element, bortklippta för att göra förslaget tydligare.-->
</nav>
</header>
<!--kod för resten av sidan-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*Mer CSS-kod ovan*/
/*För nav använder vi id eftersom det bara skall finnas en tumnagelnavigation på sidan.*/
/*<article> skall placera sig horisontellt, alltid ha samma storlek samt hoppa ner på ny rad om de inte får plats. På det sättet skapar vi en meny som fungerar för många artiklar*/
#thumb-nav {
display: flex;
flex-wrap: wrap;
}
.article-properties {
width: 4rem;
height: 4rem;
padding: 0.5rem 0.5rem 0.5rem 0.7rem;
margin: 0.25rem;
border: 1px solid black;
border-radius: 2px;
background-color: WhiteSmoke;
color: black;
}
.article-properties>img {
width: 64px;
height: 42px;
}
.article-properties>p {
text-decoration: none;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
}
/*Mer CSS-kod efter*/
Övning 17.2.b
Huvudinnehåll
Navigering från meny till huvudinnehåll.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--Mer HTML ovan.-->
<!--Navigation-->
<a href="#cheese">
<article class="article-properties">
<p>Ost</p>
<img class="image-properties" src="../images/dairy-cheese-etc-th.jpg" alt="Ost">
</article>
</a>
<!--Mer HTML ovan.-->
<main>
<section>
<article class="article-detail" id="cheese">
<h1>Ost</h1>
<img src="../images/dairy-cheese-etc.jpg" alt="Ost">
<p>
Lorem ipsum text
</p>
</article>
<article class="article-detail" id="milk">
<h1>Mjölk</h1>
<img src="../images/dairy-milk.jpg" alt="Mjölk">
<p>
Lorem ipsum text
</p>
<!--kod för resten av sidan-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*Mer CSS-kod ovan*/
.article-detail {
padding: 0.5rem;
margin: 0.25rem;
border: 1px solid black;
border-radius: 2px;
background-color: WhiteSmoke;
}
.article-detail>img {
width: 50%;
height: 12rem;
float: left;
padding-right: 1rem;
}
.article-detail>h1 {
text-align: center;
}
/*Ta bort att besökta länkar ändrar färg etc.*/
a {
text-decoration: none;
color: black;
}
/*Mer CSS-kod efter*/
Övning 17.2.c
Navigation till sidhuvud
Navigering tillbaka överst på sidan. Vi har här använt tecknet för en pil uppåt, snyggare skulle ju vara en bild i stället. Vår design ger ju långa sidor att scrolla i.
Ett alternativ skulle kunna vara att göra <main> skrollbar. Scroll kan adderas via CSS).
1
2
3
4
<!--Mer HTML ovan.-->
<!--Div för navigation som flyter ovanpå. Den kan placeras var som helst i koden eftersom den lyfts ur det vanliga flödet (↑ är kod för en pil, använd hellre en bild.)-->
<div id="toppnav"><a href="#top">↑</a></div>
<!--kod för resten av sidan-->
1
2
3
4
5
6
7
8
9
10
11
12
13
/*Mer CSS-kod ovan*/
#toppnav {
position: fixed;
bottom: 1rem;
left: 1rem;
height: 1.5rem;
width: 1.5rem;
border-radius: 1rem;
text-align: center;
background-color: darkgray;
color: black;
}
/*Mer CSS-kod efter*/
Övning 17.2.d
Sidfot
Nedan visas kod för sidfoten. Vi låter en section #filler vara den som expanderar så att de andra delarna har samma storlek. Med hjälp av flex-wrap:nowrap
ser vi till att alla delar i sidfoten är på en rad. Genom att ange flex-direction: column; för #social-media ser vi till att ikonerna hamna ovanför varandra.
Vi fixar även med ett litet avstånd som finns efter <a> med en litet trick .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--Mer HTML ovan.-->
<footer>
<section class="adress">
<p>Livsmedel AB<br>
Tel: 0754 999 333<br>
Epost: info@Livsmedel.se</p>
</section>
<section class="adress">
<p>Livsmedel AB<br>
Östervägen 17<br>
225 30 Malmö<br>
Sweden</p>
</section>
<section id="filler"></section>
<section id="social-media">
<a href="http://facebook.com" target="_blank"><img src=../images/f.PNG alt="face"></a>
<a href="http://linkedin.com" target="_blank"><img src=../images/l.PNG alt="link"></a>
<a href="http://twitter.com" target="_blank"><img src=../images/t.PNG alt="tw"></a>
</section>
</footer>
<!--kod för resten av sidan-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*Mer CSS-kod ovan*/
footer{
display:flex;
flex-wrap: nowrap;
}
.adress{
padding-left: 1rem;
width:10rem;
height: 6rem;
background-color: white;
}
#filler{
flex-grow : 1;
background-color: white;
}
#social-media{
width:2rem;
height: 6rem;
background-color: white;
display: flex;
flex-direction: column;
}
#social-media img{
width:2rem;
height:2rem;
}
#social-media a{
font-size:0; /*trick som tar bort litet avstånd för a tagg, avståndet beror på radmellanrum.*/
}
/*Mer CSS-kod efter*/
Övning 17.2.e
Sidfot
Här finns inget förslag utan det lämnar vi öppet för fritt skapande.
Övning 18.1.a
Inloggning
Detta kan göras på flera bra sätt. Lösningen nedan bygger på att om margin:auto; så kommer marginalen att anpassa sig. I vårt fall anger top, bottom, right och left till 0, dvs att vår <div> skall gå ånda ut i hörnorna, samtidigt anger vi storleken till ett fast mått. Då måste marinalen anpassa sig och rutn hamnar i mitten.
Vi anger även z-index till 1 så att rutan hamnar ovanför sidan som ligger på z-index:0. Formulär-rutorna organiserar vi ovanför varandra med display:flex; och i kolumn samt centrerade.
1
2
3
4
5
6
7
8
<!--Mer HTML ovan.-->
<div id="form">
<h3>Login Matvaru AB</h3>
<input name="username" value="Användarnamn">
<input type="password" name="password" value="lösenord">
<input type="submit" value="Logga in">
</div>
<!--kod för resten av sidan-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*Mer CSS-kod ovan*/
#form{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 20rem;
height: 10rem;
border-radius: 1rem;
background-color: gray;
z-index: 1;
padding: 2rem;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#form input{
margin-bottom: 1rem;
width:12rem;
}
/*Mer CSS-kod efter*/
Övning 18.1.b
Inloggning
Att lägga en halvgenomskinlig ruta ovanpå används i ganska många sammanhang för att inaktivera delar eller en hel sida. Nedan är en ruta anpassad så att den täcker inloggningsrutan i övning 17.a.
Genom att ange z-index:2 hamnar den överst opacity ger halvgenomskinlig ruta. Genom att ändra display egenskapen mellan block och none görs rutan synlig och det går inte att mata in information.
Detta kan du prova i inspektera verktyget så som indikeras nedan
1
2
3
<!--Mer HTML ovan.-->
<div id="hide-form">
<!--kod för resten av sidan-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*Mer CSS-kod ovan*/
#hide-form{
display:none;
/*display:block;*/
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 24rem;
height: 14rem;
border-radius: 1rem;
background-color: black;
opacity:0.5;
z-index: 2;
}
/*Mer CSS-kod efter*/
Övning 18.2
Färgschema
Här finns inget förslag utan det lämnar vi öppet för fritt skapande.
Övning 19.1
Schack
Delar av koden för schackspelet. Vi använder id-selektorer för de element som det bara får finnas ett av, devs spelplan samt de olika pjäserna. Vi samlar då egenskaper i class selektorer så vi undviker att upprepa kod eftersom det försvårar felsökning samt kan ge svårfunna fel.
1
2
3
4
5
6
7
8
9
10
11
12
<!--Mer HTML ovan.-->
<body>
<!-- Innehåll som ska visas i en webbläsare anges här -->
<div id="chess">
<div class="piece" id="black-king">♚</div>
<div class="piece" id="white-queen">♕</div>
<div class="piece" id="white-pawn1">♙</div>
<div class="piece" id="black-pawn1">♟</div>
<!--all other pieces-->
</div>
</body>
<!--kod för resten av sidan-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
body {
background-color: lightgray;
color: black;
background-image : url('images/grass.png ');
background-repeat:repeat;
}
/*Chess board*/
#chess{
background-image : url('images/chess-board.png ');
position:absolute; /*SPelplanen lyfts ur det normala flödet och placeras centrlt på sidan.
Detta genom att margin:auto anges, det medför, eftersom storleken på spelplanen är angiven exakt och
top, bottom,right och left är 0, att marginalen, för att hitta en kompromiss placerar spelplanen i mitten*/
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 512px;
height: 512px;
background-color: gray;
}
/*shared CSS-classes for the pieces*/
.piece{
position: absolute; /*lyft ur alla spelpjäser fårn det normala flödet*/
box-sizing: border-box; /*Anger vi detta ingär marginalen i width o height,
vilket gör det enklare att positionera se avsnitt 16.5)*/
width:66px;
height:66px;
padding-top: 0.40rem;
padding-left: 1rem;
padding-right:0;
font-size: 2rem;
}
.piece:hover{
opacity:0.6;
font-size: 2.2rem;
}
/*Chess pieces and their positions*/
#black-king{
left:256px; /*Här anger vi positionen exakt med pixlar, dvs övre västra hörnet för en pjäsens container*/
top:0px;
}
#white-queen{
/*För att förenkla det hela kan den "inbyggda" räknaren calc() användas.
På så sätt behöver bara ett heltal ändras som motsvarar rutan räknat från övre vänstra hörnan
(använd siffrorna 0-7) */
left:calc(7*64px);
top:calc(7*64px);;
}
#white-pawn1{
left:calc(5*64px);
top:calc(6*64px);;
}
#black-pawn1{
left:calc(0*64px);
top:calc(0*64px);;
}
/*And all other pieces. Codes here: https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode */
Övning 20.1
Webbplats med tema
Delar av koden för schackspelet. Vi använder id-selektorer för de element som det bara får finnas ett av, devs spelplan samt de olika pjäserna. Vi samlar då egenskaper i class selektorer så vi undviker att upprepa kod eftersom det försvårar felsökning samt kan ge svårfunna fel.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Mall">
<meta name="author" content="fnamn enamn">
<style>
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@800&family=Rubik+Beastly&display=swap');
</style>
<link rel="stylesheet" href="style.css">
<title>Template</title>
</head>
<body>
<h1>Rubrik 1</h1>
<h2>Rubrik 2</h2>
<h3>Rubrik 3</h3>
<h4>Rubrik 4</h4>
<b>Bold</b>
<p>Jag vill ge dig en gåva<br>
jag gett till ingen förut.<br>
Så jag ger dig min ensamhet,<br>
den varar till livets slut.
<br><i>Ebba Lindqvist, ”Gåva” (ur "Röd klänning", 1941)</i></p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Här importeras de fonter som kommer att användas nadanstående kod hämtas från fonts.google.com*/
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Birthstone+Bounce:wght@400;500&display=swap');
/*kod för att använda en font finns på samma sida nedan är den kommenterad*/
/*font-family: 'Architects Daughter', cursive;
font-family: 'Birthstone Bounce', cursive;*/
/*Färgerna är hämtade från http://paletton.com */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=55o050kicuZe7vS6iVTn9vkXPkH */
.color-secondary-1-0 { color: #D45B8C } /* Main Secondary color (1) */
.color-secondary-1-1 { color: #DA7AA1 }
.color-secondary-1-2 { color: #F9C8DC }/*use as standard font color*/
.color-secondary-1-3 { color: #D63B7A }
.color-secondary-1-4 { color: #8E0039 } /*use as standard background*/
/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */
/*här anges standardfärgen som sen ärvs till alla element, när inte annat anges.*/
*{
font-family: 'Architects Daughter', cursive;
color: #F9C8DC;
background-color: #8E0039;
}
p{font-family: 'Birthstone Bounce', cursive;}
i{
font-style: italic;
font-size:0.6rem;
}
Övning 21.1
Indentering
I denna övning anges att alla stycken <p> utom det första skall ha ett indrag. Lägg märke till hur vi, via CSS, väljer ut det andra <p>-elementet av de som följer på varandra. Genom att vara specifika när vi väljer ut vilka p som skall påverkas av detta undviker vi förhoppningsvis att regeln tillämpas på andra delar av webbplatsen.
1
2
3
4
5
6
7
8
9
10
11
12
<!--Mer HTML ovanför-->
<article class="article-display">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum eu justo ac
tincidunt. Donec eget pretium lectus. Vestibulum nisl est, consectetur rhoncus
ex sed, aliquam convallis mauris. Mauris tristique condimentum leo, quis faucibus
purus rhoncus sed. Aliquam venenatis a leo a posuere. Donec at pharetra lacus.
Pellentesque eu lorem dictum, vulputate dolor non, consectetur massa. Mauris
viverra ante id egestas porta. Pellentesque at elit semper, ullamcorper justo
eu, ornare risus.</p>
<p>Donec
<!-- Och så vidare fyra stycken....-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*importera en serif-font från google*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
/*Sätt font samt standardfärger*/
*{
font-family: 'Playfair Display', serif;
color: #F9C8DC;
background-color: #8E0039;
}
.article-display>p{
margin-bottom:0px;
margin-top: 0px;
}
/*För att undvika att alla <p> får detta beteende har jag lagt dem i ett article element
med ett unikt klassnamn här väljs bara de paragrafer som följer direkt på en annan paragraf,
dvs för den första paragrafen av många gäller inte denna regel.*/
.article-display>p+p{
text-indent : 1.5rem;
}
Övning 21.2
Dekor
Nedan visas CSS för ett förslag på hur detta kan göras.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*importera en serif-font och en sans serif från google*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,600;1,300&display=swap');
/*Sätt font samt standardfärger*/
*{
font-family: 'Playfair Display', serif;
color: #F9C8DC;
background-color: #8E0039;
}
.article-display>p{
margin-bottom:0px;
margin-top: 0px;
}
/*välj endast de paragrafer som följer på en annan paragraf som i sin tur är ett direkt barn till article-display*/
.article-display>p+p{
text-indent : 1.5rem;
}
h3{
font-family: 'Open Sans', sans-serif; /*applicera seriffonten*/
color: #DA7AA1;
text-transform : capitalize;
margin-bottom: 0px;
text-indent : 0.1rem;
}
h4{
font-family: 'Open Sans', sans-serif;
color: #DA7AA1;
text-transform:uppercase;
margin-bottom: 0px;
text-indent : 0.4rem;
}
h5{
font-family: 'Open Sans', sans-serif;
color: #DA7AA1;
text-transform:lowercase;
margin-bottom: 0px;
text-indent : 1rem;
}
Övning 21.3
Avstånd
Nedan visas CSS för ett förslag på hur detta kan göras.
1
2
3
4
5
6
7
8
9
/strong{
text-decoration: underline; /*detta behövs inte eftersom underline är default för strong.*/
font-weight: 600;
}
del{
text-decoration-color: #D45B8C;
color: #D45B8C;
opacity:0.6;
}
Övning 21.4
Avstånd
Nedan visas CSS för ett förslag på hur detta kan göras.
1
2
3
4
5
6
7
h2{
text-decoration: overline;
text-align: center;
margin-top: 2rem;
margin-bottom: 0.5rem;
line-height: 1.5;
}
Övning 21.5
Radavstånd och justering
Nedan visas CSS för ett förslag på hur detta kan göras.
1
2
3
4
5
6
7
em{
font-style:normal;
letter-spacing: -0.05rem;
word-spacing: 0.5rem;
font-weight: bolder;
color: #FAC9D9;
}
Övning 21.6
Justering av text
Nedan visas CSS för ett förslag på hur detta kan göras.
1
2
3
4
5
6
7
8
9
10
11
h2::before{
content: "\26D3";
color:red;
}
h3{
font-family: 'Open Sans', sans-serif; /*applicera seriffonten*/
color: #DA7AA1;
text-transform : capitalize;
margin-bottom: 0px;
text-indent : 0.1rem;
}
Övning 22.1
Navigation
Nedan visas CSS för ett förslag på hur detta kan göras. Lägg märke till att a:visited reagerar olika för ankarlänkar internt på sidan samt expterna länkar. Dessutom skall hover ligga efter link och visited eftersom de har högre prioritet. a:visited är även begränsar för vilka egenskaper som kan kopplas till den
1
2
3
4
5
6
7
8
9
10
11
12
13
14
a:link{
color:black;
text-decoration: none;
}
a:visited{
/*color:red*/
}
a:hover{
font-weight: bolder;
text-transform :uppercase;
}
a:active{
text-decoration: line-through;
}
Övning 23.1
Lista
Rudimentär design, punkterna börda vara runda samt centrerade framför. Detta överlämnas åt läsaren att åtgärda.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Mall">
<meta name="author" content="fnamn enamn">
<link rel="stylesheet" href="style.css">
<title>Template</title>
</head>
<body>
<ul>
<li>Däggdjur
<ul>
<li>Mård</li>
<li>ekorre</li>
<li>skogselefant</li>
</ul>
</li>
<li>Fåglar
<ul>
<li>nötskrika</li>
<li>nötväcka</li>
<li>Gröngöling</li>
</ul>
</li>
<li>Reptiler
<ul>
<li>Ätlig groda</li>
<li>Grönfäckig padda</li>
<li>Långbensgroda</li>
</ul>
</li>
</ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;1,100;1,400&display=swap');
/* Startkod så att du kan se att kopplingen mellan html-fil och stilmall fungerar.*/
body{
background-color: lightgray;
color: black;
}
.image-properties{
/*width:33vw;*/
}
ul{
list-style-image : url("red2.png");
text-transform: capitalize;
font-family: 'Roboto', sans-serif;
font-style: normal;
font-size: 0.8rem;
list-style-position: inside;
}
ul ul{
list-style-image : url("green.png");
text-transform: capitalize;
font-family: 'Roboto', sans-serif;
font-style:italic;
font-size: 0.6rem;
padding-left: 0.8rem;
list-style-position: inside;
}
Övning 23.2
Tabell
Rudimentär design, punkterna börda vara runda samt centrerade framför. Detta överlämnas åt läsaren att åtgärda.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="description" content="Mall">
<meta name="author" content="fnamn enamn">
<link rel="stylesheet" href="style.css">
<title>Template</title>
</head>
<body>
<main class="problem">
<table class="and-what-about-next-generation">
<caption>Utsläpp CO<sub>2</sub> 2018 (Tusen ton)</caption>
<tr>
<td>Kina</td>
<td>10 313 460</td>
</tr>
<tr>
<td>USA</td>
<td>4 981 300</td>
</tr>
<tr>
<td>Indien</td>
<td>2 434 520</td>
</tr>
<tr>
<td>Ryssland</td>
<td>1 607 550</td>
</tr>
<tr>
<td>Japan</td>
<td>1 106 150</td>
</tr>
<tr>
<td>Tyskland</td>
<td>709 540</td>
</tr>
<tr>
<td>Sydkorea</td>
<td>630 870</td>
</tr>
<tr>
<td>Iran</td>
<td>629 290</td>
</tr>
<tr>
<td>Indionesien</td>
<td>583 110</td>
</tr>
<tr>
<td>Kanada</td>
<td>574 400</td>
</tr>
</table>
</div>
</main>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
body {
background-color: white;
color: black;
}
.problem{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 20rem;
height: 14rem;
font-family: 'Alfa Slab One', cursive;
}
.and-what-about-next-generation {
width: 20rem;
background-color: WhiteSmoke;
color:Grey;
border-spacing: 0px; /*Removes default distance between cells*/
margin:auto;
}
.and-what-about-next-generation caption{
text-transform: uppercase;
text-align: center;
color:Black;
}
.and-what-about-next-generation td{
border: 0px;
border-spacing: 0px;
padding-left: 0.5rem;
}
.and-what-about-next-generation td+td {
text-align: right;
}
.and-what-about-next-generation tr:nth-child(2n){
background-color: DimGrey;
color:snow;
}