Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
Next revision Both sides next revision
webbutv_05 [2012-09-13 15:30]
Daniel Viström 		webbutv_05 [2019-09-13 08:38]
Mattias Hamberg [2. Länka CSS till HTML5]
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 {{::historia.txt|}} som vi ska skapa en html5-sida av. Den nya filen ska heta historia.html. Fokus på uppgiften är att skapa en semantisk struktur där textens olika delar omsluts av taggar enligt rekommenderat bruk. I tabellen nedan anges exempel på taggar som särskilt bör beaktas i uppbyggandet av sidan. Alla behöver dock inte användas men kan vara en utgångspunkt att överväga. Ingen text får läggas till eller tas från den presenterade textmassan. Länkat med uppgiften finns en fil {{::historia.txt|}} som vi ska skapa en html5-sida av. Den nya filen ska heta historia.html. Fokus på uppgiften är att skapa en semantisk struktur där textens olika delar omsluts av taggar enligt rekommenderat bruk. I tabellen nedan anges exempel på taggar som särskilt bör beaktas i uppbyggandet av sidan. Alla behöver dock inte användas men kan vara en utgångspunkt att överväga. Ingen text får läggas till eller tas från den presenterade textmassan.
  
Line 33: Line 33:
   * Navigationsmenyn skall referera till [[http://www.w3.org/TR/html401/struct/links.html#anchors-with-id|ankare]] för respektive kapitel. Använd id (inte name).   * Navigationsmenyn skall referera till [[http://www.w3.org/TR/html401/struct/links.html#anchors-with-id|ankare]] för respektive kapitel. Använd id (inte name).
  
-==== 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 till #EAEAE4, med en marginal till omgivande element av 1ex och en padding på lika mycket. Rutan ska också ha en heldragen kant som är en pixel tjock och svart. +  * Ändra bakgrundsfärg på navigationsrutorna och ge dem såväl marginal som padding på minst 1em. 
-  * 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 formateringar så att sidan ser bra ut.
-  * Gör fler lämpliga formatteringar så att sidan ser bra ut.+
  
 ===== 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://html5.validator.nu/. \\ All HTML ni skriver ska vara korrekt och validerad med exempelvis http://html5.validator.nu/. \\
 Din CSS-fil kan valideras med http://jigsaw.w3.org/css-validator/ (Ange CSS3 under ”Fler val”) Din CSS-fil kan valideras med http://jigsaw.w3.org/css-validator/ (Ange CSS3 under ”Fler val”)