Formge webbens historia

Uppgiften går ut på att bekanta sig med html som märkspråk och hur språket används till att bygga upp en semantisk struktur hos textmaterial. En viktig princip hos HTML är separera på innehåll och presentation. I uppgiften introduceras därför även CSS som är ett viktigt verktyg i HTML 5 för att beskriva presentation och utseende.

• Starta med att kolla upp vad alla nedanstående taggar används till i HTML5.

1. Första uppgiften går ut på att ta ett färdigt textmaterial och bygga upp en semantisk struktur av detta i html 5.
2. Andra uppgiften går ut på att skapa en CSS-fil för att styra utseendet på den fil vi skapat i deluppgift 1.

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.

Exempel på taggar och deras användning

DOCTYPE, html, head, title, body          Struktur på omslagsinformation
section, p 			          Semantisk struktur av text
header, hgroup, h1, h2 		          Hantering av rubriker
aside, nav, footer 		          Specialbehandlade textblock, såsom marginaltext, navigationsrutor och sidfötter.
em, abbr, dfn, var 		          Speciellt markerade ord.
figure, img, figcaption 		  Hantering av figurer och bilder
table, tbody, thead, tr, th, td, caption  Hantering av tabeller
ul, ol, li 			          Hantering av listor

Förutom god struktur enligt gängse normer, finns följande explicita krav på det inlämnade dokumentet:

• Förklaringen till textens ursprung ska anges i en header-tag tillsammans med sidans rubrik.
• Ni ska använda taggen abbr på förkortningarna ARPA och WWW. Du får använda taggen på fler förkortningar också om du vill.
• Den refererade bilden skall göras till en figur med bildtext och visas med img.
• Tabellen ska göras om till en html5-tabell med table, thead, tbody, tr, th, td och caption.
• Under rubriken ”Se även” skall länkarna anges i en punktlista.
• Sista raden ”Obligatorisk uppgift […]” skall bli en sidfot.
• Varje kapitel bör vara en section.
• De webbadresser som finns med inom parenteser i texten ska inte skrivas ut utan användas till länkar eller bilder.
• Navigationsmenyn skall referera till ankare för respektive kapitel. Använd id (inte name).

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.

Med hjälp av taggen link kan vi länka bl.a. stilmallar till våra dokument. Uppgiften går ut på att skapa en CSS-fil som är länkad till dokumentet skapat i den tidigare uppgiften. I CSS-filen ska vi styra utseende genom att koppla stil till olika taggar (dvs. inte använda ID- eller class-information).

Följande ska finnas med:

• Ändra rubrikerna till valfri färg (utom svart) och fonten ska vara av sans-serif typ.
• Fonten på paragraftext ska vara av typen serif.
• Ändra bakgrundsfärg på navigationsrutorna och ge dem såväl marginal som padding på minst 1em.
• Bilder skall ha en bredd av 25em.
• Hela sidan skall ha en padding på 3em.
• Gör fler lämpliga formateringar så att sidan ser bra ut.

Se vklass.
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”)