Webbutveckling Laboration 1: HTML5 och CSS3.

Transkript

1 Institutionen för Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan implementera webbplatsen med grundläggande HTML. Att separera innehåller och utseendet på webbplatser genom att använda html och stilmallar. Teori och förberedelse Välj ämne för din webbplats. Ta fram en Lo-fi prototyp på din tänkta webbplats. (se föreläsningsanteckningarna för teori omkring Lo-fi-prototyp.) Webplatsen ska minst innehålla 5 sidor. Du ska också rita upp flödesschemat för att beskriva webplatsens struktur. (Ett flödeschemat beskriver hur sidorna på din webplats är länkade till varandra.) Ta fram text och bilder som du ska använda på din webbplats. Se separat dokument och inlämning för denna förberedelse. Se också till att ha en webserver där du kan lägga upp din webplats på. Filmer, föreläsningsanteckningar, kurslitteratur och internetlänkar (se kurshemsidan). Material Dator med ett HTML-editeringsverktyg, exempelvis Dreamweaver. Utförande Denna laboration utför ni individuellt, men ni hjälps givetvis åt så mycket som möjligt. Utför moment 1, 2 och 3 för godkändnivå på labben. För plusnivå gäller att grunduppgifterna är lösta på ett bra och tillfredställande sätt, dessutom ska plusuppgifterna vara löst på ett bra och tillfredställande sätt samt ha relevanta referenser som stöder uppgiften. Vi kommer att bedöma om er plusuppgift ger ett högre betyg och vad det betyget blir. De högre betygen är VG och MVG. Läs igenom hela laborationen innan ni börjar. Spara filerna ni gör i mappar som heter samma sak som uppgifterna, ex.vis en mapp som heter 2a. Det är meningen att ni ska få ett stort antal filer. Lägg upp alla mappar med filerna på en webbserver. Ni kommer att använda den senaste standarden för html och CSS: HTML5 och CSS3.

2 Redovisning En rapport ska skrivas och lämnas in via Moodle-plattformen. Den ska innehålla: En problembeskrivning. Vad är det ni ska göra på labben? Svar på följande frågor: o Beskriv kort vad det är som ingår i de olika delarna: head och body. o Hur och var definierar du att det är HTML5 du använder? o Hur används metataggar? Var placeras meta-taggarna? o Hur och var visas titel? o Det finns olika typer av listor. Vilka? o Hur och var görs länkning till stilmallen (CSS)? o Vad är skillnaden element-selektorer, id-selektorer, och klass-selektorer och när används de? Din lösning. Hur ni löst labben ska vara beskrivet både i text och med bilder (ni kan ta skärmdumpar av webbsidorna) samt att ni ska redovisa er kod (HTML och CSS) i rapporten. Välj ut relevant kod och beskriv med text vad denna kod gör. Länk till din webbplats. Lägg Lo-fi dokumentet som en bilaga till detta dokument. En reflektion. Vad var bra och dåligt med labben? Vad var svårast (eller för svårt/enkelt)? Tyckte ni att något saknades eller borde behandlats mer? För godkänt på laborationen redovisas del 1, 2 och 3. För Plusnivå skall även plusuppgiften (del 4) redovisas. Det skall tydligt framgå om redovisade sidor avser grundnivå eller plusnivå.

3 Del 1 - HTML Näst steg blir nu att göra en slag mall som du kan använda för dina webbsidor. Text och bild ska nu taggas upp i ditt html-dokument. I denna del handlar det om att få in innehållet på rätt plats så att du senare kan göra det utseende som du vill att det ska vara enligt din lo-fi. Utseendet gör du först under Del 2. 1a Här ska du få börja testa på olika html-taggar hur de ser ut och hur de fungerar samt få förståelse för hur ett html-dokument är uppbyggt. Bry dig inte så mycket om utseendet det kommer i del 2. Starta programmet Dreamweaver eller något annat verktyg med liknande egenskaper och öppna ett tomt HTML5-dokument. Se till att det är indelat i en head-del och en body-del Se till fixa och placera följande på rätt plats: o Html5 o Se till att definiera upp språket du ska skriva din sida på (exempelvis engelska eller svenska) o beskriva vilken teckenuppsättning som sidan ska tolkas på o Sätt in minst 4 relevanta meta-taggar, varav 2 ska vara Dublin Core. o Sätt en titel (titel) på ditt dokument. Du har nu fått en grund som du kan använda till alla dina sidor (spara detta exempelvis som mall.html) 1b Nu är det dags att börja skapa innehållet i din webbplats. Webbplatsen ska innehålla minst 5 olika sidor. (Själva utseendet och layouten av sidan ska du få göra i Del 2.) Utgå från din Lo-fi prototyp och din skiss på websidans struktur. Använd din grunden (mall.html) du skapat i förra uppgiften att utgå ifrån. Ändra titel och meta-taggar om så behövs för respektive sida. Ändra sedan innehållet på sidorna så att de stämmer överens med din Lo-fi skiss. Märk upp innehållet på sidorna med html-taggar. På w3schools, finns en lista med alla taggar. Spara din första sida index.html. Fortsätt sedan att döpa de andra sidorna till namn som speglar innehållet på sidorna. När du skapar namne på sidorna kom ihåg: inte mellanslag (använd istället understreck) bara små bokstäver inga å, ä, ö

4 Sidorna ska tillsammans innehålla följande (anpassa efter din Lo-fi skiss): text länkar bilder listor tabeller video och ljud (använd <video> och <audio> taggar. Båda klippen ska ha kontroller som play, pause, osv.) Lägg till en meny som du placerar på alla sidor och som länkar ihop din webbplats enligt din webbplats struktur som du beskrivit i flödesschemat. Använd dig av en ul-lista för att skapa menyn. Del 2 - CSS Här ska du prova på att använda stilmallar eller formatmallar (CSS) som det också heter, för att styra utseendet på din webbplats. Utgå hela tiden efter din lo-fi skiss. 2a Skapa ett CSS-dokument, spara detta förslagsvis som stilmall.css. (Detta dokument är än så länge ganska tomt.) Länka nu ihop ditt CSS-dokument med dina html sidor. Dags att börja förändra din sida utseende mässigt: Använd nu stilmallen och bestäm hur dina rubriker, paragrafer, länkar, listor och tabeller ska se ut när det gäller färg och font genom att använda element-selektorer, id-selektorer, och klassselektorer. Utgå från din Lo-fi prototyp och skapa de block som du kommer att behöva i dina htmldokument för att kunna styra utseendet med din CSS-fil. För att skapa dessa block sätt in div:ar och de färdigahtml5- block-taggarna som ex.vis nav, article, header, footer, section, and aside i dina html-dokument. I CSS-filen använder du dig nu av margin, float, padding, clear, position, osv i dina selektorer för placera ut blocken enligt din Lo-fi prototyp. Tips: Se external styles på W3schols. Använd dig dessutom av också av minst 3 typiska CSS3-kommandon på din webplats. 2b Här ska du få testa på och visa hur samma html sida kan få helt olika utseende genom att ändra på stilmallen. Utgå från någon av dina sidor. Gör nu två helt nya och olika utseende av denna sida genom att länka två helt nya CSS-filer till dem.

5 Ändra både på ex.vis textens utseende samt placering av elementen, genom att bara ändra i i CSS-filen. Spara filerna med nya namn Del 3 - Validering För att testa att html koden följer HTML5 standarden så ska du nu få validera din webplats. Använd dig av följande valideringstjänster för att validera dina 5 sidor från uppgift 2a: Försök att åtgärda de eventuella fel som uppstår. Testa även din webplats i olika webbläsare. Ta skärm dumpar för att visa exempel på hur några av dina sidor ser ut i olika webläsare. Det är mest intressant att du visar de eventuella skillnader som du får. Del 4 - Plusuppgift Du ska designa hela din webplats så att den anpassas för olika typer av skärmar (stationär datorskärm, en surf-platta och en smartphone) så kallad responsive design och för utskrift. För denna uppgift ska du läsa följande artiklar på Alista part, och Anpassa din webbplats till minst en bärbar enhet (surf-platta eller smartphone) samt för utskrift. Se till att ta reda på vad det är du bör tänka på när du designar för de olika versionerna (bärbar enhet och utskrift) jämför med den version som visas på en stationär dator. Beskriv detta tydligt i rapporten. För denna uppgift är det viktigt att du är noga med att beskriva dina beslut och motivera besluten med relevanta referenser.