Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
webbutv_05 [2012-09-13 15:30] Daniel Viström |
webbutv_05 [2019-09-13 08:39] Mattias Hamberg |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== |
===== Syfte ===== | ===== Syfte ===== | ||
Line 9: | Line 9: | ||
- Andra uppgiften går ut på att skapa en CSS-fil för att styra utseendet på den fil vi skapat i deluppgift 1. | - Andra uppgiften går ut på att skapa en CSS-fil för att styra utseendet på den fil vi skapat i deluppgift 1. | ||
- | ==== Skapa semantisk struktur i HTML5 ==== | + | ==== 1. Skapa semantisk struktur i HTML5 ==== |
Länkat med uppgiften finns en fil {{:: | Länkat med uppgiften finns en fil {{:: | ||
Line 33: | Line 33: | ||
* Navigationsmenyn skall referera till [[http:// | * Navigationsmenyn skall referera till [[http:// | ||
- | ==== Länka CSS till HTML5 ==== | + | ==== 2. Länka CSS till HTML5 ==== |
Vanligtvis vill vi att olika sidor inom en domän eller webbplats alla följer en viss stil. Genom att separera innehåll från presentation kan vi därför skapa flera olika sidor där fokus är på innehåll och text. Därefter länkas dessa sidor till en gemensam stilmall. Genom att göra förändringar i stilmallen påverkas då utseendet på alla sidor utan att vi behöver ändra i individuella sidor. Att förändra utseendet på en hel webbplats blir därmed enkelt. | Vanligtvis vill vi att olika sidor inom en domän eller webbplats alla följer en viss stil. Genom att separera innehåll från presentation kan vi därför skapa flera olika sidor där fokus är på innehåll och text. Därefter länkas dessa sidor till en gemensam stilmall. Genom att göra förändringar i stilmallen påverkas då utseendet på alla sidor utan att vi behöver ändra i individuella sidor. Att förändra utseendet på en hel webbplats blir därmed enkelt. | ||
Line 41: | Line 41: | ||
* Ändra rubrikerna till valfri färg (utom svart) och fonten ska vara av sans-serif typ. | * Ändra rubrikerna till valfri färg (utom svart) och fonten ska vara av sans-serif typ. | ||
* Fonten på paragraftext ska vara av typen serif. | * Fonten på paragraftext ska vara av typen serif. | ||
- | * Ändra bakgrundsfärg på navigationsrutorna | + | * Ändra bakgrundsfärg på navigationsrutorna |
- | * Paragrafer ska ha marginal-justerad text. | + | * Bilder skall ha en bredd av 25em. |
- | * Bilder skall ha en bredd av 400 pixlar. | + | * Hela sidan skall ha en padding på 3em. |
- | * Hela sidan skall ha en padding på 3ex. | + | * Gör fler lämpliga |
- | * Gör fler lämpliga | + | |
===== Inlämning ===== | ===== Inlämning ===== | ||
- | + | Se vklass.\\ | |
- | Lämna in filerna **historia.html** samt **pagestyle.css**. \\ | + | |
All HTML ni skriver ska vara korrekt och validerad med exempelvis http:// | All HTML ni skriver ska vara korrekt och validerad med exempelvis http:// | ||
Din CSS-fil kan valideras med http:// | Din CSS-fil kan valideras med http:// | ||
Line 55: | Line 53: | ||
<php> | <php> | ||
/* | /* | ||
+ | |||
+ | HTML5: | ||
+ | |||
< | < | ||
<html lang=" | <html lang=" | ||
Line 321: | Line 322: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | |||
+ | CSS: | ||
body { | body { | ||
Line 356: | Line 360: | ||
- | /* Extra formatteringar | + | Extra formatteringar: |
header h1{ | header h1{ |