Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration
Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera webbplatsen med grundläggande HTML. Att separera innehåller och utseendet på webbplatser genom att använda stilmallar. Teori och förberedelse Välj ämne för din webbplats. Ta fram en Lo-fi prototyp på din tänkta webbplats. Du ska skapa en responsiv webbplats så visa hur den lo-fi ser ut i de olika storlekarna. (se föreläsningsanteckningarna för teori omkring Lo-fi-prototyp.) Webplatsen ska minst innehålla 5 sidor. Beskriv webbplatsens struktur med hjälp av ett flödesschema. (Ett flödeschemat beskriver hur sidorna på din webplats är länkade till varandra.) Filmer, föreläsningsanteckningar, kurslitteratur och internetlänkar (se kurshemsidan). Material Dator med ett HTML-editeringsverktyg, exempelvis Dreamweaver. Webserver (konto och lösenord fås av kursansvarig). 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äst på ett bra och tillfredställande sätt, dessutom ska plusuppgifterna vara löst på ett bra och tillfredställande sätt. 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. Ni kommer att använda den senaste standarden för html och CSS: HTML5 och CSS3. Redovisning Ladda upp din Lo-fi prototyp (se till att få den godkänd innan du fortsätter med uppgiften). Redovisa ditt arbete genom att lägga upp webbplatsen på den tilldelade webbservern samt fyll i labbprotokollet. Protokollet laddas upp på Moodle. För godkänt på laborationen redovisas del 1, 2 och 3. För Plusnivå skall även plusuppgiften (uppgift 4) redovisas. Det skall tydligt framgå om det redovisade sidor avser grundnivå eller plusnivå.
Del 1 - HTML 1a Med denna uppgift ska du få 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. Ett html-dokument är indelat i en head-del och en body-del. Beskriv kort vad det är som ingår i de olika delarna: head och body. Vilken kod är det som beskriver att html-dokumentet skrivs i HTML5 och var skrivs denna kod? Undersök metataggar som finns på välgjorda webbsidor, exempelvis Vägverket (http://www.trafikverket.se/) eller någon annan myndighet. Sätt in några relevanta meta-taggar på din sida. Var ska dessa placeras? Hur används metataggar? Sätt en titel (title) på ditt dokument. Hur och var visas titel? Det du nu gjort hittills kan du se som en mall för dina andra sidor fortsättningsvis. Spara sidan förslagsvis som mall.html innan du fortätter. Försätt nu med att sätta in text och bild som ska visas på din websida. Tips: På w3schools, http://www.w3schools.com/tags/default.asp, finns en lista med alla taggar. Se till att du använder taggar som är tillåtna i HTML5. Använd motsvarande html-taggarna för rubrik (minst två nivåer), paragraf/stycke (minst två stycken), bilder, en lista (Det finns olika typer av listor. Vilka? ), en tabell med innehåll, länkar till utomstående websidor (minst två sidor) Spara denna sida. Kontrollera att länkarna fungerar. 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 uppgift 2.) Utgå från din Lo-fi prototyp och din skiss på websidans struktur. Använd din mall.html 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. Spara din första sida som index.html. Fortsätt sedan att döpa de andra sidorna till namn som har med innehållet på sidorna att göra. 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. 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. 2a Skapa ett CSS-dokument och spara den förslagsvis som stilmall.css. Länka nu ihop ditt CSS-dokument med dina html sidor. Hur och var görs denna länkning? Dags att börja förändra utseendet på dina webbsidor: 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. Vad är skillnaden på dessa selektorer och när används respektive selektor? Utgå från din Lo-fi prototyp och skapa de block som du kommer att behöva i dina html-dokument för att kunna styra layouten på dina sidor med din CSS-fil. För att skapa dessa block sätt in div:ar och de färdiga 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. Ta reda på typiska CSS3 kommandon och använd dem på dina webbsidor. 2b Här ska du få testa på och visa hur samma html sida kan få helt olika utseende genom att ändra på stilmallen. Gör din webbplats responsiv så att den fungerar på olika plattformat (stationär dator, läsplatta och mobil, med hjälp av stilmallen. Utgå från någon av sidorna från 2a. Visa exempel på hur du kan få samma HTML-fil att få helt nytt utseenden både med tanke på textens utseende och med tanke på layouten med hjälp av stilmall. Spara sidan med ett nytt 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: http://validator.w3.org/. Försök att åtgärda de eventuella fel som uppstår. Testa även din webplats i olika webbläsare samt på olika plattformar (dator, läsplatta, mobil, ). Redovisa resultatetet. Del 4 - Plusuppgift Fördjupa dig inom ett ämne och genomför uppgiften. Applicera det på din webbplats. Var noga med att ange dina källor för din fördjupning. Responsive design: Använd något CSS-ramverk för att göra din webbplats resonsiv. Beskriv och förklara hur detta används. Undersök och förklara begrepp som mobile first och desktop first. Du kan också välja någon annan webbteknik som du är nyfiken på att undersöka eller implementera på din webbplats. Diskutera dina ideer med läraren för att ta reda på din idé räcker.