Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
webbutv_05 [2012-09-13 15:28] Daniel Viström |
webbutv_05 [2018-10-05 07:42] Joakim Forsgren |
||
---|---|---|---|
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 48: | Line 48: | ||
===== 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:// | ||
- | <?php | + | <php> |
/* | /* | ||
+ | |||
+ | HTML5: | ||
+ | |||
< | < | ||
<html lang=" | <html lang=" | ||
Line 322: | Line 324: | ||
</ | </ | ||
+ | |||
+ | CSS: | ||
+ | |||
+ | body { | ||
+ | color: #000000; | ||
+ | background-color: | ||
+ | padding: 3ex; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | h1, h2{ | ||
+ | font-family: | ||
+ | color: #123456; | ||
+ | background-color: | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | p, ul, ol{ | ||
+ | font-family: | ||
+ | font-size: 2.2ex; | ||
+ | text-align: | ||
+ | } | ||
+ | |||
+ | nav{ | ||
+ | background: | ||
+ | color: #000000; | ||
+ | margin: 1ex; | ||
+ | padding: 1ex; | ||
+ | border: 1px solid #000000; | ||
+ | } | ||
+ | |||
+ | img{ | ||
+ | width: 400px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | Extra formatteringar: | ||
+ | |||
+ | header h1{ | ||
+ | font-size: 6ex; | ||
+ | margin: 0.5ex 0ex 0.5ex 0ex; | ||
+ | } | ||
+ | |||
+ | header h2{ | ||
+ | font-size: 2.5ex; | ||
+ | margin: 1ex 0ex 4ex 0ex; | ||
+ | } | ||
+ | |||
+ | section h1 { | ||
+ | font-size: 3.3ex; | ||
+ | margin: 4ex 0ex 1ex 0ex; | ||
+ | } | ||
+ | |||
+ | nav h1{ | ||
+ | font-size: 3.3ex; | ||
+ | margin: 1ex 0ex 1ex 0ex; | ||
+ | } | ||
+ | |||
+ | header, section{ | ||
+ | margin: 0ex 1ex 0ex 1ex; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | footer{ | ||
+ | border-top: | ||
+ | font-size: 1.8ex; | ||
+ | margin: 1ex; | ||
+ | padding: 1ex; | ||
+ | } | ||
+ | |||
+ | footer p{ | ||
+ | text-align: | ||
+ | } | ||
+ | |||
+ | p{ | ||
+ | margin: 2.5ex 0ex 2.5ex 0ex; | ||
+ | padding: | ||
+ | } | ||
+ | |||
+ | ul, ol{ | ||
+ | margin: 3ex; | ||
+ | padding: 1ex; | ||
+ | list-style-position: | ||
+ | } | ||
+ | |||
+ | ul{ | ||
+ | list-style-type: | ||
+ | } | ||
+ | |||
+ | ol{ | ||
+ | list-style-type: | ||
+ | } | ||
+ | |||
+ | li{ | ||
+ | margin: 0ex 0ex 1ex 0ex; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | table{ | ||
+ | margin: 4ex auto 4ex auto; | ||
+ | padding: 1ex; | ||
+ | border-collapse: | ||
+ | caption-side: | ||
+ | text-align: | ||
+ | } | ||
+ | |||
+ | th, td{ | ||
+ | border: 1px solid #000000; | ||
+ | width: 9ex; | ||
+ | padding: 0.5ex; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | th{ | ||
+ | color: #000000; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | td{ | ||
+ | color: #000000; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | caption{ | ||
+ | padding: 1ex; | ||
+ | margin: 0; | ||
+ | text-align: | ||
+ | font-style: | ||
+ | font-size: 1.9ex; | ||
+ | } | ||
+ | |||
+ | em, dfn{ | ||
+ | font-style: | ||
+ | } | ||
+ | |||
+ | figure{ | ||
+ | float: right; | ||
+ | padding: 1ex; | ||
+ | margin: 3ex 0ex 3ex 3ex; | ||
+ | border: 1px solid #000000; | ||
+ | } | ||
+ | |||
+ | figcaption{ | ||
+ | font-size: 13px; | ||
+ | margin: 0; | ||
+ | padding: 2ex 1ex 1ex 1ex; | ||
+ | font-style: | ||
+ | text-align: | ||
+ | } | ||
+ | |||
+ | a, a:visited{ | ||
+ | text-decoration: | ||
+ | color:# | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | a:hover, a:focus{ | ||
+ | color: #FF6347; | ||
+ | background-color: | ||
+ | } | ||
*/ | */ | ||
+ | </ |