Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.

Transkript

1 Laboration 2: HTML och CSS.

2 Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny och ett antal olika sidor. Teori Filmer eller föreläsningsanteckningar, kurslitteraturen och internetlänkar (se kurshemsidan). Förberedelseuppgift Läs igenom föreläsningsanteckningar, internetlänkar samt kurslitteraturen. 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 godkändnivån är uppfylld och att två av plusuppgifterna på moment 4 är lösta. Läs igenom hela laborationen innan du börjar. Var noga då du sparar filer så att du inte skriver över samma hela tiden. Välj spara som och se till att skriva ett nytt filnamn. Det är meningen att du ska få ett stort antal filer. Dessa behövs för att menyerna i slutet ska bli meningsfulla och innehållsrika. Uppgift Moment 1 grundläggande html Ni ska testa ett antal taggar och notera hur de fungerar och se och testa egenskaper som de har. Betrakta detta som en övning i html. De snygga sidorna gör vi sedan. Boken tar upp denna del i kapitel 1 och Skapa en tom webbsida. Ge sidan ett namn som ska synas överst i webbläsaren (Se w3schools.com: html head). Skriv två meta-taggar där du keywords och description. (Se w3schools.com: html meta) Här är allt innehåll i head-segmentet. (Sidorna blir utan innehåll i själva bodyn och kommer inte att ses annat än vita i en webbläsare) Tips undersök metataggar som finns på välgjorda webbsidor. Se t.ex. trafikverkets eller regeringens. Trafikverket använder i huvudsak något som heter Dublin Core, så där blandas två olika tekniker för metataggar. Det vanligaste och enklare sättet är vanliga metataggar med namnen description och keywords. Metataggar används som stöd till sökmotorer. Språket på sidan läggs nästan alltid in som ett attribut i html-taggen. Se även här hur trafikverket eller regeringen gjort. De gör olika. Varför?

3 Lägg in fyra valfria dublincoremetataggar. Spara filen som 1p1.html. (Se för fler detaljer). 1.2 Öppna webbsidan 1p1.html och spara om den som 1p2.html. Du ska nu ha två filer i din mapp. Placera ut fyra olika taggar på styckenivå. Välj p-taggen, h1- taggen, h2-taggen och ul-taggen. Fyll dessa med text och se hur de beter sig i en webbläsare. Se till att p-taggen får extra mycket text. Finns det fler taggar på denna nivå är vanligt förkommande? [Tips hur vet man att det är på styckenivå? Jo - om de är på styckenivå visas de som block. I firefox web developer tool kan man outlina block level elements. Då får man en ram runt elementet. Ett element på styckenivå har också egenskapen att nästa element normalt hamnar under tidigare element.] Spara filen som 1p2.html. Tips: På w3schools, finns en lista med alla taggar. Här är det lite svårt att se vilka som är på styckenivå, textnivå, logiska eller fysiska. Här är en förklaring. Styckenivå innebär att taggarna visas som egna stycken, eller block som det kallas på engelska. Textnivå innebär att det är taggar avsedda för text i ett stycke, tex. ett enda ord. Att taggen är logisk betyder att den har en logisk förklaring. Till exempel är p en logisk tagg. Det betyder att det är brödtext. 1.3 I denna uppgift är det tänkt att du ska märka upp delar av texten som du skrev i förra uppgiften. Öppna 1p2.html och lägg in fyra logiska taggar på textnivå. Ta gärna taggarna q, em, strong och span. Finns det några taggar av denna typ som man absolut bör känna till och vilken betydelse har de som du nyss använts? Tips! De fysiska taggarna i diagrammet ovan är utdaterade, depricated enligt W3c-standard. De har uppgiften att tala om hur ett element ska visas inte vad det är. Exempel är taggen <i> = italic som gör att texten visas kursivt. Logiska taggar på textnivå har en logisk innebörd. Exempel <strong> = betona starkt. Taggen strong beskriver inte hur det ska visas eller läsas upp endast att det ska vara en stark betoning, men det som märkts upp med stron-taggen visas som fet stil. Spara om filen som 1p3.html. (Du ska nu ha tre filer i din mapp!)

4 1.4 Öppna 1p1.html. Lägg in två listor, en ul-lista och en ol-lista. Utseendet på en lista kan förändras med hjälp av stilmallar. Vi tar upp detta i avsnittet om menyer. Vilken är skillnaden mellan ul och ol? Spara om filen som 1p4.html. (Du ska nu ha fyra filer i din mapp!) 1.5 Öppna 1p1.html. Lägg in en tabell på sidan (<table> ). Fyll den med information och spara om filen som 1p5.html. Boken tar upp detta i kapitel 9. Vad innebär attributet cellpadding i en tabell? Man kan t.ex. skriva så här i starttaggen: <table cellpadding= 20px > 1.6 Öppna 1p1.html. Lägg in en bild. Se till att ha med alternativtext till bilden. Spara om filen som 1p6.html. 1.7 Slutligen ska du göra en sida där du länkar till alla dina sidor. Länkar tas upp i kapitel 3. Gör även en länk till en extern sida t.ex. Spara om filen som index.html. Kontrollera sedan att länkarna fungerar. När du gör länkarna så ska de ligga i en lista av typen ul. Spara som 1p8.html. Du bör nu ha koll på grundläggande html. Moment 2 att ändra utseende på sidorna. Här ska ni prova på stilmallar eller formatmallar som det också heter. Detta tas upp i bokens kapitel Utgå från sidan 1p2.html som du gjorde i förra momentet. Använd inline formatmall för att styra utseendet på p-taggen (style = ). Tips! Inline kallas även så på W3schools. Det finns bra beskrivet i avsnittet Learn css, How to. Spara som inline.html. 2.2 Utgå än en gång från sidan 1p2.html som du gjorde i förra momentet. Använd nu istället inbäddad formatmall för att styra utseendet på ett textblock. Tips: Detta kallas internal styles på W3schools och embedded i kursboken. Spara som internal.html. 2.3 Utgå även nu från sidan 1p2.html som du gjorde i förra momentet. Använd istället en global formatmall för att styra utseendet på ett textblock. Detta är det vanligaste sättet. Stilsätt taggarna <p>, <h1> samt <h2>. Tips: Se external styles i kursboken eller på W3schols. Spara som external.html. När är det bra att använda respektive metod för stilmallar? 2.4 Slutligen ska du länka till dina tre sidor med stilmallar. Gör detta i filen 1p8. Spara om den med samma namn. Prova sedan att länkarna fungerar.

5 Moment 3- här ska det bli riktiga sidor! I detta moment får ni prova att layouta en sida med sidmallar. Det är bra om den blir snygg men inget krav. Kapitel 6 och 7 är lämpliga att läsa igenom. Det finns 3.1 Gör en sida med fyra block, div-taggar. Namnge med id = container, head, content samt foot. Positionera ut dessa så containern, id = container, får bredd och höjd 800px. Lägg sedan de tre behållarna så att de hamnar i följd inuti containern. Lägg in en bakgrundbild i behållaren för head med hjälp av stilmallen och försök att få det att se fint ut. Lägg in texter i blocken content och foot. Sätt en bakgrundsfärg på bodyn och gör containerns bakgrund vit. Lägg all stilmallsinformation i en extern fil, styles.css. Spara som 3p1.html. Vilken uppgift har attributen margin, padding och border? Tips: Titta igenom specifikationen för box-modellen på w3c.org eller bokens kapitel Se till att prova tre olika sätt att stilsätta din sida 3p1.html. - alla taggar, div, p eller h1 - med class-attributet - med id-attributet Observera att du måste skriva in dessa attribut i html-koden. Spara som 3p2.html. 3.3 Lägg till ytterligare ett block som får innehålla menyn från uppgift 2.4. Den innehåller då en lista. Sätt ett id på div:en och kalla den menu. Stilsätt denna lista så att det ser ut som en vanlig meny där du styr utseende på taggarna ul, li, a:link, a:visited och a:hover. Placera blocket så att det blir en högerkolumn i containerblocket. Tips: använd tekniken float:left på blocken content och menu, samt clear:both på blocket foot. Float och Clear hör ihop! Glöm aldrig det! Spara som 3p3.html. 3.4 Nu är det dags att prova det som heter html5. Prova att byta ut några av divtaggarna i 3p3.html till html5-taggar. Ersätt eller lägg till taggarna <article>, <footer>, <header>, <nav>, <section>. Se till att du får detta att stämma med stilmallen, styles.css. Lägg bara till i stilmallen! Ta inte bort det som redan finns där. (exempel: Om du byter ut taggen <div id= head > och dennes sluttagg </div> till <header> och </header> så lägger du till header{ width: ; osv} i stilmallen.) Om du vill kan du piffa till med css3 centrering, runda hörn, box shadow eller opacitet. Boken tar upp detta i kapitel sju. Spara som 3p4.html, lägg in i menyn och spara om styles.css. Om du inte gör plusuppgifter så visar du upp det som du gjort för handledare. Moment 4 - Plusnivå gör två eller fler för att få högre betyg I detta moment får ni prova några finesser som man kan göra med formatmallar och formulär.

6 4.1 Gör om din meny i uppgift 3.3 till en dropdown-meny. Se tips och anvisningar på alistapart.com. Leta efter suckerfish eller dropdown menus. Fyll menyn så att du kan visa alla dina filer som du gjort på denna laboration. Spara som 4p1.html. 4.2 Hitta något annat som ser häftigt ut häftigt och där stilmallen tar hand om utseende och funktion på ett bra och användbart sätt. Troligen kan du hitta tips på alistapart.com eller liknande sajter. Just nu är det populärt att göra enligt html5 och css3. Googla för att hitta något lämpligt. Spara som 4p2.html. 4.3 Snygga till sidan 3p3.html. Lägg in bakgrundsbilder med runda hörn enligt skjutdörrprincipen. Leta t.ex. sliding doors på alistapart.com. Se till att innehåll och utseende är separerat. Spara filen som 4p3.html. 4.4 Gör en utskriftsvänlig sida, med olika css-filer för skärm och utskrift. Se till att det blir skillad på utskriften t.ex. genom att dölja menyn och lyfta fram innehållet på så att den ser bra ut i en printer. Spara som 4p4.html. 4.5 Gör om sidan så att den får responsiv design. Spara som 4p5.html. 4.6 Lägg in i menyn som du jobbat med tidigare och se till att det blir en bra redovisning för någon av handledarna. Redovisning Gör en skriftlig rapport på de delar som du gjort. Följ rapportmallen. Beskriv hur du löst uppgiften och de frågeställningar, i kursiv text, som nämnts i denna instruktion samt dina egna reflektioner. Ta inte med all html-kod. Det är bättre om du väljer ut den som är central i respektive uppgift. Ange referenser som använts och markera i labrapporten var dessa använts. Lämna in rapporten i Cambro under pt&w uppg1 inlämning.