www.skolportalen.se Licens ISBN: 978-91-7379-176-2 att
använda WEBBUTVECKLING 1 denna Webbutveckling 1 bok ARBETSBOK är köpt via www.skolportalen.se Thelin Läromedel i Licensen samband
Läromedel för GY2011
Lars Gunther2012 gäller med enligt köpet
villkor WEBBUTVECKLING 1 ‐ ARBETSBOK
FÖRLAGETS FÖRORD
Detta är Webbutveckling 1 ‐ Arbetsbok. Boken är anpassad efter gymnasieskolans kursplan GY2011 för kursen Webbutveckling 1 med kurskod WEBWEU01. Boken är skriven av Lars Gunther. Erfaren gymnasielärare inom bl.a. webbutveckling och programmering. Boken är utgiven av Thelin Läromedel. Boken finns även tillgänglig för läsning via internet via Skolportalen eBooks. Om du käre läsare skulle hitta något i boken som du inte tycker stämmer eller om du saknar någon viktig del så får du gärna meddela detta till oss. Vi är oerhört tacksamma för alla kommentarer och tips. Det går bra att e‐posta till [email protected] Eventuella uppdateringar och rättelser till boken som tillkommit efter denna upplagas tryckning finns att ladda hem på Skolportalen, www.skolportalen.se. Facit med svaren på frågorna samt lösningsförslag finns i Lärarhandledningen som kommer att utkomma. I denna finns även värdefulla tips till läraren. Somliga uppgifter ska göras online adressen http://webbteknik.nu/, där finns också instruktionsfilmer i videoform, samt exempelkod. Arbetsboken följer samma typografiska konventioner som läroboken. Numreringen av stycken är dock inte densamma.
Thelin Läromedel och Lars Gunther, juni 2012.
Samtliga varumärken som förekommer i boken tillhör innehavaren av varumärket. OBSERVERA ATT ALL KOPIERING ELLER ANNAT MÅNGFALDIGANDE AV DENNA BOK ELLER DELAR AV DEN ÄR FÖRBJUDET ENLIGT LAG. THELIN LÄROMEDEL, LIDKÖPING Tel. 0510‐66100, www.skolportalen.se Första upplagan, utskriven 2012‐06‐11 Beställningsnummer J200 4501 Tryckeri: JustNu ISBN: 978‐91‐7379‐176‐2
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet 1 WEBBUTVECKLING 1 ‐ ARBETSBOK 1 VAD ÄR WEBBTEKNIK? Uppgift noll: Registrera ett konto på webbteknik.nu Registrera ditt konto och koppla det till din kurs med en kod du fått av din lärare. Titta på introduktionsvideon och orientera dig runt på webbplatsen. Lägg märke till arbetsplaneringen och välj om du vill jobba med springspåret eller enligt bokens systematiska genomgång. Följ sedan den webbaserade arbetsplaneringen. Uppgift 1A – installera en bra textredigerare Om din dator inte redan har en textredigerare, en editor, som kan visa radnummer och spara i UTF‐8 format, samt har syntax highlight, så ladda ner och installera en sådan nu. Gedit finns oftast redan i Linux, men kan laddas ner och installeras i Windows. Andra editorer för Linux är Kate och KEDIT. Är du en van Linuxanvändare kan du använda Vim , Emacs eller Nano. För Windows kan du använda Notepad++ eller Notepad2. Mac‐användare använder oftast Textmate, men den är inte gratis. Du kan prova den i 30 dagar, dock. Andra alternativ är Coda eller Stylemaster.
För CSS (enbart) finns det en inbyggd editor i Firefox . Du kan aktivera den med SHIFT+F7. Använder du den ser du ändringarna hända på sidan i realtid.
Fler förslag: http://en.wikipedia.org/wiki/Comparison_of_text_editors 1.1 Grundfrågor om din editor
1) Var i din editor ställer du in teckenkodningen för den aktuella filen?
(Svaret beror på vilken som används) ......
2) Var i din editor ställer du in teckenkodningen för nya filer?
(Svaret beror på vilken som används) ......
......
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet2 WEBBUTVECKLING 1 ‐ ARBETSBOK
Uppgift 1B – ett första dokument Skapa först en mapp för dina uppgifter. Skriv av koden för avsnitt 1 i läroboken i din editor. (Du skall inte skriva radnumren. Lägg också märke till att av utrymmesskäl är somliga rader brutna.) Spara det du skrivit som kap‐1‐a.html och öppna sedan det dokumentet i en webbläsare.
1.2 Frågor om HTML och CSS
3) Vilka är rot‐elementets taggar?
och ......
4) Vilka två delar består dokumentet av?
Head och body ......
5) Vilka rader är CSS‐kod?
7 - 12 ......
6) Var i webbläsaren ser du det som står i elementet
? </p><p>Som text på flikarna (men ev. också på andra ställen) ...... </p><p>7) Vilka taggar omger stycken? </p><p><p> och </p> ...... Uppgift 1C – skriv och validera HTML och CSS Spara ner ditt dokument från förra uppgiften med ett nytt namn: kap‐1‐c.html Utvidga och ändra nu ditt dokument. Du kan till exempel: Lägga till ett extra stycke. Lägga till en underrubrik mellan två stycken. Använd <h2>. Lägg in ytterligare en länk. Byta bakgrundsfärg. Ändra på bredden. </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet 3 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>När du gjort detta, så gå till http://validator.nu/ och validera din HTML‐kod. Åtgärda alla eventuella fel. Ta hjälp om du behöver. Gör sedan följande fel med flit, ett i taget och beskriv vilka felmeddelanden som du får: Stava fel på en tagg. ”Glöm bort” sluttaggen för <title>. ”Glöm bort” sluttaggen för <body>. ”Glöm bort” starttaggen för ett stycke. Stava fel på attributet lang. </p><p>(Resultatet beror på var felen gjorts) ...... Felaktigt stavade taggar och attribut ger ofta svar som: ...... “not allowed as …” ...... </p><p>...... </p><p>...... Gå sedan till http://jigsaw.w3.org/css‐validator/ och validera din CSS‐kod. Åtgärda alla eventuella fel. Ta hjälp om du behöver. Gör sedan följande fel med flit, ett i taget och beskriv vilka felmeddelanden som du får: Stava fel på ett färgnamn Stava fel på width Glöm ett semikolon (inte det sista) Glöm ett kolon Skriv ett mellanslag mellan siffran och px på bredden Ex: ”lirme is not a color value” (lime felstavat) ...... Ex: “property xxx does not exist” (width felstavat) ...... Ex: “attempt to find a semi-colon before the property name. Add it” ...... Ex: “parse error” (inget kolon) ...... “too many values or value not recognized” (blanksteg i värde) ...... Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet4 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 1D – leta efter en domän Leta reda på var du kan registrera domäner och vad det kostar. Lägg märke till variationer beroende på toppdomänen. Var kan du registrera domäner? (Det finns många svar. Loopia, nunames, e t c) ...... Hur tar du reda på om en domän är ledig? Man kan söka hos registratorn eller använda whois ...... Vad kostar… En .se domän ...... </p><p>En .nu domän ...... </p><p>En .com domän ...... </p><p>1.3 Identifiera delar av en URL I denna url: </p><p> https://foobar.com/drul/putte/part.php?p=5&q=none#article </p><p>Vad är: </p><p>8) Protokoll (också kallat schema) </p><p> https ...... </p><p>9) Auktoritet (också kallat domän) </p><p> foobar.com </p><p>...... </p><p>10) Sökväg </p><p>/drul/putte/ </p><p>...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet 5 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>11) Resursnamn </p><p> part.php ...... </p><p>12) Query string </p><p> p=5&q=none ...... </p><p>13) Fragment identifier </p><p>#article ...... </p><p>Dum – men nödvändig – fråga: </p><p>14) Är foo.jpg och foo.JPG samma sak, betraktade som resursnamn? </p><p>Nej, webben skiljer på versaler och gemener. (Men inte Windows.) ...... </p><p>Fördjupningsfråga: </p><p>15) Vad är en slugg? </p><p>En del av en URL anpassad för människor (och sökmotorer) ...... </p><p>Uppgift 1E – Emulera (härma) en webbläsare (extrauppgift) Använd telnet eller netcat (nc) för att koppla upp dig mot en webbserver och hämta en resurs. Se video på webbplatsen hur detta görs. </p><p>1.4 HTTP statuskoder </p><p>16) Vad betyder koden 200? </p><p>OK = resursen finns och skickas nu ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet6 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>17) Vad betyder koden 304? </p><p>Not modified = resursen behöver inte skickas utan finns i cachen ...... </p><p>18) Vad betyder koden 500? </p><p>Internal Server Error = krasch, bom, bang! Attans! ...... </p><p>1.5 Statiska och dynamiska sidor, DHTML, <a href="/tags/Ajax_(programming)/" rel="tag">Ajax</a>, insticksprogram </p><p>19) Vad menas med en statisk sida? </p><p>Dess kod är manuellt gjord och sidan hämtas ur ...... webbserverns filsystem ...... </p><p>20) Vad menas med en dynamisk sida? </p><p>Dess kod framställs av ett skript som körs på servern ...... när den efterfrågas. Dess data ligger ofta i en databas ...... </p><p>21) Vad menas med DHTML? </p><p>En marknadsföringsterm för dynamiska effekter gjorda med CSS ...... och JavaScript. Ofta synonymt med missbruk av dessa tekniker...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet 7 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>22) Vad menas med Ajax? </p><p>Delar av en sida uppdateras med data som hämtats från servern, ...... utan att sidan som helhet behöver laddas om. Görs med JavaScript...... XMLHttpRequest-objektet (XHR) används...... OBS! Begreppet Ajax är inte en förkortning (längre)...... </p><p>23) Vad kallas insticksprogram på engelska? </p><p>Plug-in ...... </p><p>24) Ge minst 5 exempel på insticksprogram? </p><p>Flash, QuickTime, Silverlight, Real Player, Shockwave, BankId, ...... Acrobat Reader, VLC, Mplayer… Java är också OK som svar...... Uppgift 1F – MDN Gå till Mozilla Developer Network och orientera dig på webbplatsen. Beskriv vad som finns under varje alternativ i huvudmenyn (Topics, Docs, Demos, Learning, Community) Lägg märke till Learn! ...... </p><p>...... </p><p>...... </p><p>...... Du får också gärna titta på de andra webbplatserna, som nämns i boken, avsnitt 1.10. </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet8 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>1.6 Dåliga råd </p><p>25) Skriv ned minst fem saker som utmärker dåliga råd om webbutveckling. </p><p>Kodexempel utan doctype ...... Inget sägs om teckenkodning och du förväntas inte använda UTF-8 ...... Attribut som styr utseende: bgcolor, alink, vlink, align ...... Taggar som styr utseende: <font>, <center>, <blink> ...... Tabeller för layout, tabeller i andra tabeller ...... Frames, iframes (förutom seamless och sandbox iframe) ...... JavaScript (event handlers) inuti taggar, document.write() ...... Browsersniffning, DHTML ...... XHTML är det ”senaste”, HTML5 har inte kommit eller ”kommer aldrig” ...... <a name=”fooo”> som länkmål ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet 9 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>2 UTVECKLINGSPROCESSEN ⏩ </p><p>2.1 Frågor om utvecklingsprocessen </p><p>1) Vad mens med en iterativ process? </p><p>Att den inte går rakt från en start- till en slutpunkt, utan att moment ...... upprepas och ibland också sker parallellt...... </p><p>2) Vad mens med en WYSIWYG? </p><p>What You See Is What You Get. Verktyg som Dreamweaver, ...... BlueGriffon och Expression Studio. Eller på webbplatser: TinyMCE, ...... CKEditor och XStandard. Ordbehandlare är också WYSIWYG-program...... </p><p>3) Formulera minst två skilda exempel på målsättningar för en webbplats: </p><p>(Kan variera – ska dock vara så konkreta så möjligt.) ...... (Undvik svävande ord som ”bra”, ”snygg”, ”rolig”…) ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet10 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 2A – sitemap och wireframe Gör en enkel sitemap och en enkel wireframe för en sida till (en av) en rockartist, en faktabok, en fotbollsturnering, en bilfirma, en geocaching‐klubb… Har du redan en idé kring ditt slutarbete, så kan du börja skissa på det nu. Arbeta på löst papper eller på datorn. </p><p>2.2 Alfa, Beta, RC </p><p>4) Beskriv begreppen alfaversion, betaversion och Release Candidate: </p><p>Alfa – under utveckling. Såväl design som kod kan komma att skrivas ...... om och ändras rejält. Funktioner saknas ofta. Instabil...... Beta – ”feature complete”. Inga större ändringar förväntas. Dock ...... kan det finnas många buggar kvar. Sprids för testning i större grupper. </p><p>...... </p><p>RC – inga, eller ytterst få ”show stoppers”, (allvarliga buggar), </p><p>...... </p><p> ytterst nära att vara en färdig produkt...... </p><p>Uppgift 2B – installera webbläsare Installera följande Webbläsare: Firefox, <a href="/tags/Google_Chrome/" rel="tag">Google Chrome</a>, <a href="/tags/Opera_(web_browser)/" rel="tag">Opera</a>, <a href="/tags/Internet_Explorer/" rel="tag">Internet Explorer</a>, <a href="/tags/Safari_(software)/" rel="tag">Safari</a>. Extrauppgift: Installera en emulator för <a href="/tags/Opera_Mini/" rel="tag">Opera Mini</a>, Firefox Mobile och Android eller någon annan mobil webbläsare. </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet11 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 2C – testa utvecklingsverktygen Aktivera utvecklingsverktyget för var alla webbläsare. Beskriv nedan hur du gör för var och en: Firefox inbyggda verktyg: </p><p>...... Opera Dragonfly: </p><p>...... Chrome Devtools: </p><p>...... Internet Explorer Developer Tools: </p><p>...... Safari Web Inspector: </p><p>...... </p><p>Extrauppgift: Installera <a href="/tags/Firebug_(software)/" rel="tag">Firebug</a> för Firefox. </p><p>Uppgift 2D – överför med FTP Installera ett FTP‐program, exempelvis FireFTP (tillägg i Firefox) eller FileZilla. Har du tillgång till ett konto på en FTP‐server, så testa att ladda upp nu. Skriv ner vilka inställningar du använde – men skriv inte ditt lösenord! </p><p>...... </p><p>...... </p><p>...... </p><p>...... Annars kan du nu testa att hämta något från ftp.sunet.se. </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet12 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 2E – frivillig – Git och Github </p><p> Öppna ett konto på Github. http://github.com/ Skapa ett projekt för dina övningar. Namnförslag: ”webbutveckling‐1‐ovningar”. Skapa ett annat projekt för ditt inlämningsarbete. Namnförslag: ”webbutveckling‐1‐inlamning”. Ladda ner och installera Git för Windows eller Mac. (Använd din distributions verktyg på Linux.) Instruktioner: http://help.github.com/ och i filmer på http://webbteknik.nu/ I din texteditor, skapa en README. Använd gärna formatet Markdown. Gör en för varje projekt, och spara i de mappar som du skapade i uppgift 1B. Navigera till mapparna i kommandotolken (Git Bash på Windows.) Skriv detta (exklusive dollartecknet – det är din prompt). Upprepa (det mesta) i båda mapparna. Kursiverad text behöver bytas ut mot vad som gäller för dig och den aktuella mappen. </p><p>$ git init $ git status $ git add README.markdown $ git status $ git commit –m "Initial commit. README." $ git add . $ git commit –m "All the stuff made in chapter 1" $ git remote add origin git@github.com:username/wu‐1‐ovningar.git $ git push ‐u origin master </p><p> Kontrollera dina commits på Github. Uppdatera din användarinfo på webbteknik.nu med ditt användarnamn på Github. </p><p>2.3 Referens för kommandon i Git I framtiden så bör du upprepa följande, så fort du gjort en övning eller ändring: </p><p>$ git status $ git add ‐A $ git status $ git commit –m "Förklaring av vad som ändrats och tillkommit" $ git push </p><p>Det är en god vana att kontrollera vad som händer med git status. Skulle du vilja dela upp dina commits i mindre delar, så skriver du filnamnen, så här: </p><p>$ git add FILENAME </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet13 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Skulle du av misstag råka få med en fil du inte vill ”committa”, så kan du plocka bort den så här: </p><p>$ git add ‐A $ git status Visar att FELFIL nu ska committas. Aj då! $ git reset FELFIL $ git status Etc. </p><p>Uppgift 2F – andra resurser Undersök: Pastebin – http://pastebin.com/ JSFiddle – http://jsfiddle.net/ BaseCamp – http://basecamp.com/ Skaffar du ett konto på JSFiddle, så uppge gärna ditt användarnamn på webbteknik.nu. Överkurs: Gör någon eller några av dessa: Skapa en pastebin med kap‐1‐a.html Skapa en JSFiddle med kap‐1‐a.html Skapa en Gist med kap‐1‐a.html och länka till den från bl.ocks.org </p><p>Anteckningar: ...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet14 WEBBUTVECKLING 1 ‐ ARBETSBOK 3 VAD ÄR EN BRA WEBBPLATS? Uppgift 3A – bra webbplatser – och dåliga Titta på listan över vad som utmärker bra webbplatser. Hitta fem exempel, från olika områden, som du tycker exemplifierar detta positivt och fem som exemplifierar detta negativt. Skriv ner och förklara dina val med en till två meningar vardera. (Lärare – gör detta själv, så du kan exemplifiera!) ...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet15 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>3.1 Luftig kod, med snygga indrag Skriv om följande kod, så att den blir luftig och lättläst. </p><p> div{padding:5px;width:800px;font‐family:Calibri,sans‐ serif;}.items{border‐radius:2%;border:2px solid #DDD;background‐ color:rgb(1,35,100;} </p><p>Plats att skriva: </p><p>3.2 Kommentarer </p><p>1) Hur skriver man kommentarer i HTML? </p><p><!-- Detta är en kommentar --> ...... </p><p>2) Hur skriver man kommentarer i CSS? </p><p>/* Detta är en kommentar */ ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet16 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 3B – indrag i din editor? Undersök hur du kan använda och ställa in indragen (indentering) i din editor. Hur styr du bredden? o Kan du styra den per språk? Kan du ersätta tabb‐tecknet med mellanslag? Finns det automatisk indentering? Kan du markera och dra in eller dra tillbaka hela block med TAB och SHIFT+TAB? </p><p>...... </p><p>...... </p><p>...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet17 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>3.3 Progressiv förbättring </p><p>3) Vad menas med progressiv förbättring? </p><p>Att man inte ger exakt samma upplevelse till alla användare, utan ...... låter dem som har bättre webbläsare dra nytta av kraften i dem...... Man utgår från en basteknik och lägger ovanpå den, för just de ...... som har moderna webbläsare...... </p><p>4) Vad menas med att HTML‐kod är semantisk? </p><p>Att den skrivs utifrån elementens mening, deras språkliga värde, ...... och inte som om de styrde designen...... </p><p>5) Vad är kapacitetsdetektering? </p><p>Kontroll om en webbläsare stödjer en teknik. Utestänger ingen i ...... i onödan, till skillnad från browsersniffning...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet18 WEBBUTVECKLING 1 ‐ ARBETSBOK 4 GRUNDLÄGGANDE HTML OCH CSS ⏩ 4.1 HTML‐terminologi ⏩ Titta på följande kod: </p><p><p lang="la" id="a" class="poesi jambisk"> Miser Catulle desinas ineptire Et quod visum perdire perditum ducas </p> </p><p>1) Vad utgör elementet p? </p><p>Allt vi ser – taggar, attribut, textinnehåll ...... </p><p>2) Vilka attribut har elementet? Skriv attributnamnen </p><p> lang, id och class ...... </p><p>3) Vad händer om du utelämnar citationstecknen för attributet class? </p><p>Det kommer att tolkas som att ”jambisk” är ett attributnamn ...... </p><p>4) Vad är fel i följande kod? </p><p><p>Lorem ipsum.</p class="nonsens"> </p><p>Sluttaggen kan inte ha attribut ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet19 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 4A – färgerna i din editor Beskriv hur den editor som du använder, ger syntax highlighting för HTML. Lägg märke till att detta kan variera beroende på inställningar, valt tema, etc. </p><p>Taggar har färgen ...... </p><p>Attributnamn har färgen ...... </p><p>Attributvärden har färgen ...... </p><p>Textinnehåll har färgen ...... </p><p>Kommentarer har färgen ...... </p><p>Entiteter (6.4 i Läroboken) har färgen ...... </p><p>4.2 CSS‐terminologi </p><p>5) Skriv en CSS‐regel som har en typselektor för h2‐element, ger dem silver som färg, och x‐ large textstorlek. Kommentera att silver är ljusgrå. </p><p>(Plats att skriva) </p><p> h2 { </p><p> color: silver; /* Ljusgrå */ </p><p> font-size: x-large; </p><p>} </p><p>6) I regeln ovan, vad avgränsar deklarationsblocket? </p><p>Måsvingarna (= klammerparenteserna, braces, curly <a href="/tags/Brackets_(text_editor)/" rel="tag">brackets</a>) ...... </p><p>7) I regeln ovan, vad skiljer property name från property value och vad heter dessa på svenska? </p><p>Kolon skiljer dem åt. Property name = egenskap. Value = värde...... Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet20 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 4B – CSS‐färgerna i din editor Beskriv hur den editor som du använder, ger syntax highlighting för CSS. Lägg märke till att detta kan variera beroende på inställningar, valt tema, etc. </p><p>Typselektorer har färgen ...... </p><p>Klass‐selektorer har färgen ...... </p><p>Id‐selektorer har färgen ...... </p><p>Egenskaper har färgen ...... </p><p>Keywords har färgen ...... </p><p>Värden med siffror och mått har färgen ...... </p><p>Övrigt: ...... </p><p>Uppgift 4C – Experimentera med CSS Dags att experimentera! Utgå från koden i det färdiga exemplet i avsnitt 4.2 i läroboken och variera den på olika sätt. Spara den som kap‐4‐c.html. Gå till http://validator.nu/ och kontrollera din kod. Åtgärda alla eventuella fel. Gå till http://jigsaw.w3.org/css‐validator/ och åtgärda alla CSS‐fel. Om du använder Github, läs också extrainstruktionerna nedan innan du fortsätter. Ändra något i koden, spara och uppdatera webbläsaren efter varje steg. Validera också din kod efter varje ändring. </p><p> Testa olika färgnamn för color och background‐color. Lägg till fler stycken, både med och utan klasser. Testa x‐large, xx‐large och x‐small för textens storlek. Hur många x kan man ha framför? (Tips: Det beror på webbläsaren) Byt plats på regeln för .foo och regeln för .bar. Lägg till <span class="foo">…</span> runt ett ord i ett stycke som inte har klassen foo. </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet21 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Anteckningar: ...... </p><p>...... </p><p>...... </p><p>...... Extrainstruktioner om du använder Github Skriv först av koden i boken som den är. Navigera till mappen där den ligger i konsollen och skriv dessa kommandon: </p><p>$ git status $ git add kap‐4‐1.html $ git commit –m "Övning 4B. Filen kap‐4‐1.html har lagts till" </p><p>Efter varje ändring skriver du detta: </p><p>$ git status $ git diff $ git commit –am "Beskrivning av förändringen" </p><p>När du är klar med övningen skriver du: </p><p>$ git push </p><p>Gå sedan till Github på nätet och undersök din commit‐historik. Gå till Code Commits. Klicka också på knappen till höger för varje commit, där dess hash står, med hexadecimala siffror. </p><p>4.3 Block‐ och inline‐element </p><p>8) Vad menas med block‐ och inline‐element? </p><p>Inline-element kan bara innehålla text och andra inline-element...... Blockelement skapar en ”ruta” omkring sig. De radbryter...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet22 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>4.4 Några HTML element och attribut </p><p>9) Förklara begreppet rotelement. </p><p>Elementet som omsluts av <html> och </html>. Finns längst upp i ...... DOM-trädet. Alla andra element finns alltså inuti detta...... </p><p>10) Förklara begreppet viewport. </p><p>Dokumentfönstret i webbläsaren. (Motsatsen är dess ”chrome”.) ...... </p><p>11) Förklara begreppet metadata. </p><p>Information om dokumentet, som inte visas i viewport ...... </p><p>12) Hur används texten i elementet title? </p><p>På titellisten för webbläsaren och på flikarna. Visas när man väntar ...... på resten om sidan laddas långsamt. Läses upp först av allt för ...... användare av talsyntes. Visas i Windows task bar...... Prioriteras för sökmotorers rankning och används ...... vid deras presentation av sökresultat...... Kan ha speciella funktioner i en CMS, som sluggar...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet23 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 4D – centrera en sida med bakgrundsfärg </p><p>Skapa ett HTML‐dokument och inkludera följande CSS‐regel: </p><p> html { background‐color: lime; } body { margin: auto; width: 600px; height: 600px; background‐color: orange; } </p><p>Spara som kap‐4‐d.html. (Github användare? Stage + commit + push!) Undersök effekten av varje deklaration, genom att avaktivera och/eller ändra den med webbläsarens utvecklingsverktyg. </p><p>4.5 Länkar och bilder </p><p>13) Hur skriver du en länk med en relativ sökväg? </p><p><a href=”./path/to/resource.html”>text</a> ...... </p><p>14) Hur skriver du en länk med en absolut sökväg? </p><p><a href=”//path/to/resource.html”>text</a> (// autojusterar för https) ...... </p><p>15) Hur skriver du en länk till en extern resurs? </p><p><a href=”http://domain.top/path/to/resource.html”>text</a> ...... </p><p>16) Hur skriver du en sidintern länk? </p><p><a href=”#fragid”>text</a> ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet24 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>17) Hur anger du dess mål? </p><p><div id=”fragid”> (Måste inte vara div, <a name=”fragid”> är föråldrat.) ...... </p><p>18) Extrasvår fråga – står inte i läroboken. Hur kan du ange målet som selektor i CSS? </p><p>:target (en pseudoklass) ...... </p><p>19) Om du av tekniska skäl inte kan lägga in en dekorativ bild i din CSS, hur skriver du då dess HTML‐kod? </p><p> (Du kan också ha med role=”presentational”) ...... </p><p>20) Vad gör alt‐attributet för nytta? </p><p>Läses med talsyntes. Visas om bilden laddas långsamt/inte alls...... Används av sökmotorer...... </p><p>4.6 <div> och <span> </p><p>21) Vad kallas onödigt användande av <div> och <span>? </p><p>Divitis och spanmania ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet25 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 4D – språkkoder Hitta (på nätet) språkkoder (om två bokstäver) och fullborda denna tabell. </p><p>Svenska sv </p><p>Engelska en </p><p>Norska no </p><p>Danska da </p><p>Finska fi </p><p>Franska fr </p><p>Tyska de </p><p>Spanska es </p><p>Arabiska ar </p><p>4.7 Class och id </p><p>22) Vad skiljer id från class? </p><p>Id måste vara unikt, d v s ett värde får bara användas på ett ...... enda element. Class-värden kan användas flera gånger...... (+ I CSS så har en id-selektor högre specificitet…) ...... </p><p>23) Hur skriver man flera klasser på samma gång? </p><p>Med mellanslag som separationstecken. class=”foo bar zoo xar” ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet26 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>4.8 Attributet title </p><p>24) Vad gör attributet title? </p><p>Innehåller extra information, som visas som ett tooltip ...... när muspekaren hovrar (svävar) över elementet...... </p><p>25) Vad är felet med koden ? </p><p>Title upprepar information från alt-attributet i onödan...... </p><p>4.9 Några CSS‐selektorer Fullborda tabellen genom att skriva selektorns namn och en rad HTML‐kod som matchas av den. </p><p>Selektor Selektortyp HTML </p><p>Span Typselektor <span>…</span> </p><p>#gnu Id‐selektor <p id="gnu">…</p> </p><p>.mammal Klass-selektor <li class=”mammal”> </p><p> div > p Barn-selektor <div><p>…</p></div> </p><p>#meny li Avkomlingsselektor <div id=”meny”><ul><li>…</li> </p><p>#gnu + p Syskonselektor <p id=”gnu”>…</p><p>…</p> </p><p>.lama > em Barn-selektor <p class=”lama”><em>…</em></p> </p><p>#gnu > .zoo Barn-selektor <p id=”gnu”><em class=”zoo”>… </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet27 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 4E – färg och font Ladda ner filen kap‐4‐e.html från webbteknik.nu. Dess HTML‐kod får du inte ändra, men med hjälp av CSS ska du skapa utseendeet på bilden nedan. Ladda ner filen kap‐4‐e.css och jobba vidare i den. Tips: Börja med att analysera HTML‐koden i ett utvecklingsverktyg. Lite CSS‐kod är redan gjord. Du kan bygga på med fler deklarationer i de befintliga reglerna, eller skapa helt nya regler. Jobba med CSS‐editorn i Firefox eller spara och uppdatera ofta – efter varje ändring! Validera din CSS‐kod om du stöter på problem och när du är klar. </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet28 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p> Skapa först en grundstil för typsnitt och bakgrundsfärer, genom att lägga till detta i reglerna för <html> och <body>. o lighslategrey för <html> o azure för <body> o sans‐serif Skapa en regel hör <h1> med en typselektor o purple som textfärg o text‐align Lägg till kantlinje för divvarna. 1px bred, solid, purple. Lägg till rundade hörn för divvarna. 5px. Texten i första divven ska vara darkred. Använd en id‐selektor. Texten i andra divven ska vara darkgreen. Använd en id‐selektor. Texten i det andra stycket i båda divvarna ska vara larger. Använd en klass‐selektor. Texten i det tredje stycket i båda divvarna ska vara smaller. Använd en klass‐selektor som grund för en angränsande syskon‐selektor. Texten i sista stycket i båda divvarna ska vara bolder. Använd samma selektor men lägg på ytterligare ett ”+ p”, d v s ange syskonet till första syskonet. Texten i sista stycket i andra divven ska vara marginaljusterad, justify. Använd selektorn #bob > .two + p + p (syskon som är syskon till en klass som är barn till en id). Färgen på länktexten är webbläsarens default. Den hoppar vi över. Länkarna i andra divven ska vara genomstrukna, line‐through. Använd en avkomlingsselektor. Länken i andra stycket i andra divven ska däremot vara underline overline. Använd en selektor som anger barn till ett barn. Spara. Validera. Åtgärda alla fel. Spara. Du är klar! </p><p> Överkurs: För Firefox bara (än så länge, våren 2012) ska denna länktexts över‐ och understrykning vara orange och double. Git‐användare? ”Comitta” och pusha! </p><p>Guiden ovan fungerar till stor del som en stilguide (se avsnitt 2.3.4 i Läroboken). </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet29 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>4.10 Externa CSS‐filer </p><p>26) Hur länkar du in en extern CSS‐fil? </p><p><link href="path/to/style.css" rel="stylesheet"> ...... </p><p>27) Varför bör man använda externa CSS‐filer? </p><p>Håller sig till DRY-regeln. En fil styr alla sidor på hela webbplatsen...... </p><p>Uppgift 4F – DOM‐trädet Titta på bilden av ett DOM‐träd i avsnitt 4.10 i läroboken. Rita motsvarande DOM‐träd för den kod du skrev i uppgift 4C. (Plats att rita.) </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet30 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>5 EN FÖRSTA SIDA </p><p>Uppgift 5 Du ska nu skapa sidan för läxhjälpen, genom att följa genomgången i läroboken. Börja med att skapa en egen undermapp för läxhjälpen. Kalla mappen laxhjalpen. Spara sidan som index.html – startsidor heter så. Kalla CSS‐filen laxhjalpen.css. För att du ska slippa skriva all text, så kan du ladda ned en start av dessa från http://webbteknik.nu/. </p><p>Du lär dig bäst i denna övning om du sparar och uppdaterar sidan efter varje moment. Använder du CSS‐redigeraren i Firefox, så ser du designen växa fram i realtid. Validera så fort du stöter på problem och när du är klar. </p><p>(Github‐användare? Committa efter varje avsnitt. Pusha när du är klar.) </p><p>Lura inte dig själv genom att bara läsa eller kopiera av någon annans kod. Detta är inget du ska ha ”avverkat”. Du lär dig genom att se hur din kod får effekt. </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet31 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>6 TECKENKODNING OCH FONTER </p><p>6.1 Äldre teckenkodning </p><p>1) Vad för slags tecken är de 32 första (0‐31) samt tecken 127? </p><p>Kontrolltecken ...... </p><p>2) Vad bör man göra med dessa tecken om man bygger en CMS? </p><p>Stoppa alla utom CR och LF ...... </p><p>3) Vilka begränsningar har US_ASCII? </p><p>Funkar inte utanför USA/England. Inga åäö, û, etc. Inga CJK-tecken...... </p><p>4) Hur lagras radslut på Windows, respektive Mac OS X, Unix och Linux? </p><p>Windows använder CR+LF, de andra bara LF ...... </p><p>5) ISO‐8859‐1 och Windows 1252 är mycket snarlika. Under vilka namn kan dessa mer uppträda? </p><p>Latin-1, (ISO-8859-15), Win-1252, ANSI ...... </p><p>6) Vad innebär det att en teckenkodning är ASCII‐kompatibel? </p><p>Att de 128 första tecknen kodas likadant som i US_ASCII...... </p><p>6.2 Entiteter </p><p>7) Vad är entiteter? </p><p>Namngivna tecken. &-kod-; Kan skrivas som med US-ASCII...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet32 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>8) På vilka tre sätt kan man skriva entiteter? Exemplifiera! </p><p>Med namn: & Decimalt: & Hexadecimalt: " ...... </p><p>9) På vilka fyra tecken kräver att de skrivs som entiteter, eftersom de har specialfunktion i HTML? Vilka är deras namngivna entiteter? </p><p>< (mindre än) = < > (större än) = > & = & " = " ...... </p><p>6.3 Unicode </p><p>10) Vad menas med glyf? </p><p>Meningsbärande symboler, inkl. bokstäver, siffror, etc...... </p><p>11) Vad menas med tecken? Vad för egenskaper har de? </p><p>Själva innebörden av en glyf – ”abstrakta representationen”...... De har ett namn och en kodpoäng. De sorteras i en tabell...... </p><p>12) Vad menas med teckenkodning? </p><p>Hur tecken lagras och skickas i datorn. Vilken sekvens av nollor och ...... och ettor som motsvarar ett tecken...... </p><p>13) Vilka teckenkodningar finns för Unicode? </p><p>UCS-2, UCS-4, UTF-8, UTF-16, UTF-32, etc...... </p><p>14) När man i http och HTML anger charset, så används inom Unicode ordet…? </p><p> encoding ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet33 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>15) Men när man i http talar om encoding så avses…? </p><p>Komprimering, gzip och liknande ...... </p><p>6.4 Ange teckenkodning och annan content‐type (MIME) </p><p>16) Hur kan man ange teckenkodning i http och HTML? Vad bör man tänka på för var och en av dessa? </p><p>Som http-huvud. Styrs av serverns konfigurationsfiler eller ...... anges med server-skript...... Med elementet <meta charset=””>. Funkar bara om filen läses från ...... Filsystemet lokalt, men är också en signal till andra utvecklare...... Med Byte Order Mark (BOM) – men det är dumt...... Med en XML-deklaration: <?xml encoding=”” ?> ...... </p><p>17) Vilka två delar utgör en MIME‐deklaration? </p><p>Råformat/dataspråk eller huvudtyp/kodek ...... </p><p>6.5 Fonter </p><p>18) Vad är en font? </p><p>Beskrivning av ett typsnitts utseende, i detalj ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet34 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>19) Vad är nedladdningsbara typsnitt? </p><p>Font-beskrivningar som hämtas av webbläsaren @font-face ...... men för den skull inte installeras i operativsystemet...... </p><p>20) Vad är och hur fungerar en font‐stack i CSS? </p><p>En uppräkning snarlika font-familjer. Webbläsaren använder den ...... första som den kan...... </p><p>21) Vilka är de fem generiska font‐familjerna och vad utmärker dem? </p><p>Serif – har klackar, blir oftast Times New Roman ...... Sans-serif – saknar klackar, blir oftast Arial ...... Monospace – alla tecken lika breda, blir ofta Courier New ...... Cursive – ska likna handstil. Opålitlig...... Fantasy – dekorativa glyfer. Opålitlig...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet35 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>7 HTML HISTORIK OCH TEORI </p><p>7.1 HTML historik och versioner Historian hjälper dig förstå samband och sätta enskilda artiklar i perspektiv. Det finns gott om "tutorials" och "tips" kvar från de sista 15 åren. Utan kännedom om hur webben utvecklats blir det omöjligt att avgöra om de är bra eller dåliga. </p><p>1) Vem är upphovsman till webben (HTML och http)? </p><p>Tim Berners-Lee ...... </p><p>2) Varför hade HTML 1.0 inte några funktioner att styra utseende? </p><p>Därför att webbläsarna inte var grafiska i början ...... </p><p>3) Vilken var den första populära grafiska webbläsaren? </p><p>Mosaic ...... </p><p>4) Vilken var den populäraste webbläsaren under 90‐talet? </p><p>Netscape Navigator ...... </p><p>5) Vilken version av HTML är den första som gjordes med separation av innehåll från design i åtanke? </p><p>HTML 4 ...... </p><p>6) När publicerades CSS 1.0? </p><p>1996 ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet36 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>7) HTML 4 finns i tre versioner. Vilka, och vad är deras syfte? </p><p>Strict – förbjuder många presentationsattribut och element ...... Transitional – mjukare övergång om man hade gammal kod ...... Frameset – för frames, iframes och attributet target ...... </p><p>8) XML har "drakonisk" felhantering. Vad menas med det? </p><p>Att all vidare behandling av koden avbryts vid minsta lilla fel ...... </p><p>9) XML har betydligt snävare och mer detaljerade syntaxregler än HTML. Ge minst 5 exempel på detta. </p><p>Skillnad på VERSALER och gemener ...... Inga tomma elelement, inga implicita element, ingen implicit stängning ...... Korrekt nästling krävs. Entiteter måste skrivas korrekt...... Attribut måste ha värden och de måste ha citationstecken ...... Attribut måste ha värden och värdena måste ha citationstecken ...... </p><p>10) Vad är default teckenkodning i HTML respektive XML? </p><p>Win-1252 för HTML, UTF-8 för XML ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet37 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>11) Vad är XHTML? På vad sätt skiljer sig XHTML från HTML? </p><p>XHTML är HTML med XML syntax, d v s element och attribut är ...... </p><p> desamma och har samma betydelse (identisk semantik), men allt måste ...... </p><p> skrivas enligt XML:s strikta regler. XHTML stödjer namnrymder...... XHTML default teckenkodning är UTF-8...... </p><p>12) Vilka var nyheterna i XHTML 1.1? </p><p>Uppdelningen i moduler (meningslös). Stöd för Ruby-markup...... </p><p>13) Vad hände med den planerade standarden XHTML 2.0? </p><p>Den var inte bakåtkompatibel och utelämnade många önskemål ...... Detta gjorde att XHTML blev DOA (dead on arrival) ...... </p><p>14) Vad menas med ”äkta XHTML”? </p><p>XHTML skickad med en MIME-typ som gör att den faktiskt tolkas ...... som just XML, med all dess strikthet, stöd för namnrymder, etc...... </p><p>15) Varför bildades WhatWG? </p><p>Mozilla, Opera och Apple ville vidareutveckla HTML, men W3C sa (då) ...... nej. WhatWG blev en alternativ organisation. Man var också missnöjda ...... med W3C:s byråkrati och långsamma arbetstakt ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet38 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>16) En slags kuggfråga: Vad menas med HTML5? </p><p>(Det beror på...) ...... Kolla http://www.zeldman.com/2010/08/03/html5-fuzzies/ och ...... </p><p>...... </p><p>17) Sett ut webbläsarens perspektiv, hur många versioner av HTML finns det? </p><p>En enda (eller möjligen två, om man räknar XHTML som en egen) ...... </p><p>18) Vilka tre renderingslägen finns i de flesta webbläsare? </p><p>Quirks mode, Almost Standards Mode, Standards Mode ...... </p><p>19) Varför är det viktigt att ange en bra doctype? </p><p>Annars hamnar du i Quirks Mode eller Almost Standards Mode ...... </p><p>20) Vad gör följande rad HTML? </p><p><meta http‐equiv="X‐UA‐Compatible" content="IE=Edge" /> Den gör så att den mest moderna “motorn” används av IE...... Annars är det risk att IE låtsas vara en äldre version av sig själv...... </p><p>7.2 Mer om HTML </p><p>21) Vad är ett booleskt attribut? </p><p>Attribut som kan finnas (= true) eller inte finnas. Kan förkortas...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet39 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>22) Vad är ett tomt element? </p><p>Element som inte kan ha textinnehåll. Saknar sluttagg...... </p><p>23) Ge 10 exempel på tomma element? </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>...... </p><p>24) Vad gör elementet <base />? </p><p>Styr utgångspunkten för relativa länkar ...... </p><p>25) Vad gör elementet <br />? </p><p>Break = radbrytning ...... </p><p>26) Vad gör elementet <pre>? </p><p> preformatted = bevarar whitespace (tabb, space, newline) ...... </p><p>27) Vad gör elementet <hr />? </p><p>Horizontal ruler, thematic break ...... </p><p>Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet40 WEBBUTVECKLING 1 ‐ ARBETSBOK </p><p>Uppgift 7A – Använd <em> <strong> <i> <b> <abbr> och <time> </p><p>Skriv några rader HTML‐kod, där du på ett bra sätt använder bl a <em>, <strong>, <i>, <b>, <abbr> och <time>. </p><p>Uppgift 7B – Från HTML till XHTML Skriv om dessa rader HTML‐kod till XHTML. Kom ihåg att XHTML varken har implicita element eller implicit stängning av element. Du behöver inte bry dig om att bevara tekniskt identisk whitespace, utan skriv i stället snygg kod. Teckenkodningen står inte i HTML‐koden. Det ska vara samma efter konverteringen till XHTML. </p><p>Tips: Namnrymden för XHTML skrivs xmlns="http://www.w3.org/1999/xhtml" </p><p>Koden du ska skriva om: </p><p><TITLE>HTML till XHTML HTML till XHTML Lorem ipsum dolor sit
Lorem ipsum dolor sit
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet41 WEBBUTVECKLING 1 ‐ ARBETSBOK
8 CSS HISTORIK OCH TEORI
8.1 CSS Historik och versioner
1) Vem är upphovsman till CSS?
Håkon Wium-Lie (och i viss mån Bert Bos + det fanns alternativa idéer från andra) ......
2) När publicerades rekommendationen för CSS 2.0?
1998 (den var dock buggig och orealistisk) ......
3) Varför skapades CSS 2.1?
För att CSS 2.0 inte stämde med verkligheten och till vissa delar inte ...... ens var tekniskt möjlig att implementera ......
4) Vilket år började CSS‐baserad layout slå igenom på allvar?
2003 ......
5) Vad innebär det att en CSS‐egenskap eller ett CSS‐nyckelord har prefix?
Prefix används för experimentella implementationer...... När en specifikation har blivit stabil, ska de tas bort......
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet42 WEBBUTVECKLING 1 ‐ ARBETSBOK
6) Kan man använda CSS 3 idag?
Ja. Delvis. Somliga moduler är helt stabila (selectors, colors) ...... Andra moduler är till stor del stabila (fonts, gradients, transforms)...... Med progressive enhancement kan man använda också nya saker! ......
8.2 Grundfrågor om CSS
7) Vilka är fördelarna med att länka in CSS med elementet
Man bryter inte mot DRY. Parallell nedladdning av CSS och HTML......
8) CSS har ett antal måttenheter. Vilka är de vanligaste? Beskriv var och en med en mening.
% (procent) - i förhållande till föräldraelementet eller det ärvda ...... värdet (font-size) ...... px (pixlar) - en bildpunkt på skärmen - men CSS-pixel inte alltid ...... fysisk pixel ...... cm, mm, in (inch/tum) - funkar mindre bra på skärm ...... pt (points), pc (pica) – font-mått för tryck, inte skärm ...... em - radhöjden med aktuell font ...... ex - höjden på bokstaven lilla x
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet43 WEBBUTVECKLING 1 ‐ ARBETSBOK
...... ch - bredden på siffran noll (dåligt stöd – sommaren 2012) ...... rem - radhöjden på root-elementet (dåligt stöd – sommaren 2012) ...... vw, vh - viewport width, viewport height (dåligt stöd – sommaren 2012) ...... vm - Math.min(vw, vh) (dåligt stöd – sommaren 2012) ...... s, ms - sekunder, millisekunder – för animering ...... deg - degree (grader, 360 på ett varv) – för transformation ...... turn - varv (snurra n antal varv = nturn) – för transformation, dåligt ...... stöd ......
......
......
......
......
......
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet44 WEBBUTVECKLING 1 ‐ ARBETSBOK
9) Varför behöver man inte ange enhet om måttet är 0 (noll)?
Noll av något är alltid noll – genom att utelämna enheten gör man det ...... tydligt att nollan är avsiktlig och inte ett misstag ......
10) Vad innebär LoVe Focus HaTe regeln?
Ordningen på regler för länkar bör vara ...... :link, :visited, :focus, :hover, :active ......
Uppgift8A – beräkna specificitet Fullborda tabellen genom att räkna ut selektorns specificitet. Skriv på slutet en sorteringssiffra där 1 är mest specifik och 7 minst specifik.
Selektor Antal id Antal klass och Antal typ och Ordning likvärdiga likvärdiga
p > em 0 0 2 7
.foo::first‐line 0 1 1 6
#bar 1 0 0 3
#bar p 1 0 1 2
p.foo:first‐of‐type 0 2 1 5
div[id="x"] > p:nth‐child(3n) 0 2 2 4
#bar div em:last‐child 1 1 2 1
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet45 WEBBUTVECKLING 1 ‐ ARBETSBOK
8.3 CSS – svårare frågor
11) Hur fungerar arv av textstorlek i CSS?
Det beräknade värdet ärvs......
12) Vilka CSS‐källor finns med i kaskaden?
Webbläsarens inbyggda CSS = User Agent CSS...... Användarens CSS = User CSS (1) ...... Inline CSS = Author CSS (1) ...... Style-elementets CSS = Author CSS (2) ...... Link-elementets CSS = Author CSS (3) ...... Användarens CSS med ! important = User CSS (2) ......
13) Vad är en CSS reset?
En ”nollställning” av webbläsarens inbyggda CSS-regler ......
14) Det finns två sätt att ange en media‐query. Vilka är dessa?
I CSS-koden som en @-regel eller som ett HTML-attribut ......
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet46 WEBBUTVECKLING 1 ‐ ARBETSBOK
Uppgift 8B – Gör om kortformer (shorthands) till deras långa form: Skriv om nedanstående deklarationer från kortform, till att varje enskild egenskap får sin egen deklaration. De två första är färdiggjorda som ett exempel. Använd exempelvis Mozilla Developer Network för att ta reda på default‐värden.
Kortform Utförlig form
font: italic normal bold 1em/1.5 serif; font‐style: italic; font‐variant: normal; font‐weight: bold; font‐size: 1em; line‐height: 1.5; font‐family: serif;
border: 2px solid red; border‐width: 2px; border‐style: solid; border‐color: red;
background: #CCC url("foo.png") center background-color: #ccc; no‐repeat fixed cover; background-image: url(”foo.png”);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet47 WEBBUTVECKLING 1 ‐ ARBETSBOK
Kortform Utförlig form
font: 1.4em Consolas, monospace; font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 1.4em; line-height: normal;
font-family: Consolas, monospace;
border: 3px dotted; border-width: 3px;
border-style: dotted;
border-color: black; /* samma som texten */
background: url("foo.png"); background-color: transparent; (Dåligt skriven! Man nästan vill alltid ange färg också.) background-image: url(”foo.png”); background-position: 0% 0%;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: auto;
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet48 WEBBUTVECKLING 1 ‐ ARBETSBOK
9 FÄRGER OCH BILDER
9.1 Färger i CSS
1) Vad står bokstäverna rgb för när man anger färger?
Red, Green, Blue ......
2) Vad är alpha?
Graden av genomskinlighet ......
3) Här kommer några hexadecimala färgkoder. Förkorta dem om möjligt. (Se avsnitt 4.8.2 i Läroboken)
Långform Kortform
#AABBCC #ABC
#A1B2C3 (kan inte förkortas)
#000000 #000
#DDCCF0 (kan inte förkortas)
#1100CC #10C
4) Extrauppgift: Gör om dessa värden till hexadecimala
RGB Hexadecimal
rgb(16, 40, 101) #102865
rgb(128, 0, 255) #8000FF
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet49 WEBBUTVECKLING 1 ‐ ARBETSBOK
5) Vilken vinkel i HSL‐systemet har cyan, magenta och gul?
Du kan titta på den interaktiva demon av hsl‐färger på http://webbteknik.nu/ för att hitta svaret. Cyan = 60 grader, Magenta = 320 grader, Gul = 180 grader ......
9.2 Bilder
6) Hur anger man en bild som värde på en egenskap i CSS?
url(path/to/image.png) ......
7) När är vektorgrafik att föredra framför pixelbaserade bilder?
När man vill kunna skala bilderna i storlek. När bilderna har få ...... fotografiska detaljer (logotyper, infographics, diagram, etc)......
8) Vilka bildformat bygger på paletter?
Gif, PNG-8 ......
9) Kan GIF‐bilder vara delvis genomskinliga?
Nej, de har ingen alphakanal ......
10) Vad händer om man komprimerar en JPEG‐bild för mycket?
Artefakter uppstår (bildens nyansrikedom minskar dessutom) ......
11) Vilka av de på webben vanliga bildformaten kan ha metadata?
PNG, JPEG (och SVG eftersom det bygger på XML) ......
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet50 WEBBUTVECKLING 1 ‐ ARBETSBOK
Uppgift 9A – testa SVG Hämta kap‐9‐b.html på http://webbteknik.nu/ Det är samma bild som du ser i avsnitt 9.4.4 i läroboken. Efter varje steg: Spara, uppdatera webbläsaren, observera skillnaden. Byt färg på rektangeln till rgb(20, 255, 20) Gör cirkelns radie 100 Gör cirkelns kantlinje tjockare (3) Flytta cirkeln åt vänster minst 100 steg Lägg till ytterligare en rektangel
Diskussionsfråga För ett enkelt hänga‐gubbe spel, skulle du använda SVG, Canvas eller WebGL? Diskutera med några andra. Skriv ner några slutsatser och argument......
......
......
......
Avancerad uppgift ‐ testa Pngcrush Hämta eller skapa en PNG‐bild. Kör den genom Pngcrush. Observera hur mycket mindre den blev. Testa gärna på mer än en bild.
Före: ......
Efter: ......
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet51 WEBBUTVECKLING 1 ‐ ARBETSBOK
10 BOXAR OCH SEKTIONER
Tips: Titta på den interaktiva demon av box‐sizing på http://webbteknik.nu/
10.1 CSS för boxar
1) Om du vill dölja alla div‐element med klassen peekabo, hur skriver du en CSS‐regel som gör detta? Det dolda elementet ska varken synas eller uppta någon yta.
.peekabo {
display: none;
}
2) Vilka webbläsare stödjer CSS 3 egenskapen box‐sizing? Från och med vilken version?
Se data på http://caniuse.com/ (Du kan strunta i mobila webbläsare för den här frågan) IE8 och framåt ...... Firefox sedan åtminstone 3.6, fast bara med prefix...... Chrome, åtminstone sedan version 17...... Safari 5 med prefix, Safari 5.1 och framåt utan prefix ...... Opera åtminstone från 11.6 och framåt ...... (Alla mobila webbläsare stödjer egenskapen) ......
3) Vad skiljer border från outline?
Border är med och upptar yta i boxen. Outline ritas utanför boxen ...... antingen i marginalen, eller ovanpå (eller under) intilliggande element ......
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet52 WEBBUTVECKLING 1 ‐ ARBETSBOK
Övning 10A – placera boxar Hämta hem kap‐10‐a.html samt kap‐10‐a.css från http://webbteknik.nu/ Skapa följande utseende med hjälp av egenskapen position. Lägg märke till att den blå rutan inte ska följa med när sidan skrollar.
Tips: Analysera först HTML‐kod och den redan skrivna CSS‐koden. Alla positionsvärden är angivna i steg om 50px; Du måste också använda z‐index. Kontrollera först hur den fungerar på MDN. Position: absolute kommer vara relativt wrapper. Position: fixed kommer vara relativt viewport. Ange left för den blå divven med procent. Det finns en färdigskriven marginal som tillsammans med rätt procentvärde placerar den rätt, oavsett sidbredd.
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet53 WEBBUTVECKLING 1 ‐ ARBETSBOK
Övning 10B – transform Hämta hem kap‐10‐b.html och kap‐10‐b.css från http://webbteknik.nu/ När muspekaren svävar över divven i mitten, så ska den få utseendet nedan. Divven har minskat i storlek och roterat.
Tips: Lägg märke till att det finns två divvar på sidan. Om muspekaren inte svävar över dem, så täcks den bakre av den du ska arbeta med. Använd transform. Matematiken för scale bygger på roten ur 2. När du fått det att funka i en webbläsare, lägg till prefix för alla andra. Testa din CSS‐kod med CSS‐lint på http://csslint.net/
Extrauppgift
Lägg till en mjuk övergångseffekt till den förra uppgiften med transition. Låt det till exempel ta en halv sekund att växla läge.
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet54 WEBBUTVECKLING 1 ‐ ARBETSBOK
10.2 Sektioner
4) Ersätter elementet i HTML5 det äldre elementet ? (Motivera ditt svar.)
Nej. har ett semantiskt värde. Det påverkar dokumentets ...... outline. Det gör inte . Det finns dock vissa speciella tillfällen då ......
, eller ett annat sektionerande element, med fördel kan ...... användas när man tidigare använde ...... Du bör aldrig använda
som "wrapper", eller för att bara ha ...... som en "krok" för designen! ...... 5) Vad är en sektionsrot?
En sektionsrot skapar ett nytt sammanhang för en outline...... Innehållet tas inte med i en ev. ovanför liggande outline...... (Att
är en sektionsrot är ännu ett argument mot tabell-layout!) ...... Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet55 WEBBUTVECKLING 1 ‐ ARBETSBOK
11 LAYOUT MED FLOAT
Uppgift 11A – identifiera olika sorters layout Besök (med en vanlig dator, inte mobil eller surfplatta) minst 10 populära webbplatser, men inte förstasidan! Notera om de har 1‐, 2‐, 3‐ eller 4‐spaltslayout. Räkna bara de huvudsakliga spalterna. Ibland kan nämligen innehållet delas upp med inre spalter. Notera också hur många horisontella band som finns längst upp på sidan. Notera slutligen sidans menyer. Har den både primär‐ och sekundär navigation? Har den en specialmeny med snabblänkar till de mest använda sidorna? Försök hitta sidor där allt detta varierar. (Som en webbutvecklare ska du en dag kunna åstadkomma alla dessa!) Här kommer ett exempel:
Skärmdump från SvD:s sportsida 3 juni 2012. Sidan har tre spalter (numrerade i svart), plus inre uppdelning i spalter på artiklarna. Huvudet har hela fem horisontella band, varav det tredje i sin tur delats i två till vänster. Dessutom ligger de två översta fast på sidan när den skrollas. Översta bandet är hjälpmenyn. Band 4 är primärmeny och band 5 är sekundärmeny.
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet56 WEBBUTVECKLING 1 ‐ ARBETSBOK
Fullborda nu tabellen nedan:
Besökt Spalter Horisontella Primärmeny? Sekundärmeny? Hjälpmeny? webbplats band Var? Var? Var?
Aftonbladet 4 4 Till vänster Fälls ut i Fjärde sport primärmenyn bandet
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet57 WEBBUTVECKLING 1 ‐ ARBETSBOK
11.1 Layouttekniker
1) Det finns tre layouttekniker som kan användas med dagens webbläsare, för att skapa sidlayout med spalter. Vilka?
Float, inline-block, CSS-tabeller ...... (Absolut positionering är för begränsat, andra tekniker behöver mogna) ......
2) Vilket är (troligen) den teknik som kommer vara bäst för att skapa sidlayout om ett par år, d v s runt år 2015‐2020?
Flexbox ......
3) Vad menas med faux columns?
Att man lägger en marginal tillsammans med float, samt bakgrundsbild ...... på wrappern, så att ögat luras tro att det är två kolumner......
4) Vad menas med contain float?
Att det element som fått float inte ska sticka ut från sin förälder, ...... utan att föräldern ska växa på höjden så att float-elementet innesluts ......
5) Vad menas med clear float?
En nollställning, så att float inte påverkar efterföljande element ......
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet58 WEBBUTVECKLING 1 ‐ ARBETSBOK
Uppgift 11B – contain float Hitta ett annat sätt att "containa floats" än det som står i boken. Skriv en demokod för den lösning du hittat. Spara som kap‐11‐b.html. (Commit + push på Github)
Uppgift 11C – Läxhjälpens Om oss‐sida Du ska nu skapa all CSS‐kod för presentationssidan för Läxhjälpen. Detta är en stor uppgift, så dela upp den i mindre steg och var noggrann. Ladda hem om‐oss.html ifrån http://webbteknik.nu/ så slipper du skriva all kod från början. Följ med i boken i avsnitt 11.2.1, 11.3.2, 11.3.3, 11.3.5, 11.4.1 samt 11.5 och se hur resultatet växer fram. Spara och uppdatera webbläsaren ofta. o Git‐användare? Gör en commit med git efter varje avsnitt. Push när du är helt klar. Validera din kod.
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet59 WEBBUTVECKLING 1 ‐ ARBETSBOK
12 LISTOR OCH TABELLER
Uppgift 12A – en numrerar lista Gör en numrerad lista över dina favoritfilmer, fast bara platserna 6‐10. Spara som kap‐12‐a.html, uppdatera, validera. (Commit, push)
Uppgift 12B – description list Gör en description list som förklarar följande termer och förkortningar. Webbläsare Webserver HTML HTTP Spara som kap‐12‐b.html, uppdatera, validera. (Commit, push)
Uppgift 12C – meny till Läxhjälpen Fortsätt på uppgift 11C och lägg till menyn enligt kod i Lärobokens avsnitt 12.2. Följ sedvanlig drill med spara, uppdatera och validera (samt commit och push).
Uppgift 12D – tabell till Läxhjälpen Skapa sidan arbeten.html för Läxhjälpen. Återanvänd det du kan från sidan om‐oss.html. Skapa och ge design till en tabell genom att följa lärobokens avsnitt 12.3.1, 12.3.3 och 12.3.5 samt 12.4, 12.4.1 och 12.4.3 Följ sedvanlig drill med spara, uppdatera och validera (samt commit och push).
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet60 WEBBUTVECKLING 1 ‐ ARBETSBOK
13 FORMULÄR
13.1 Grundläggande om formulär
1) Vad kallas det på engelska att skicka data till en server?
Submit ......
2) Vad krävs på servern för att bearbeta data från ett formulär?
Ett skript (ett program) ......
3) Vad heter krypteringstekniken som används av https?
TLS – Transport Layer Security ......
4) Hur skickas data med metoden GET?
Som en del av URL:en.
......
5) Vad heter krypteringstekniken som används av https?
TLS – Transport Layer Security ......
6) Vilken http‐metod måste du använda om du vill skicka stora mängder data?
POST ......
7) Vilken http‐metod måste du använda om du vill skicka stora mängder data?
POST ......
Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se © THELIN LÄROMEDEL & LARS GUNTHER 2012 i samband med köpet61 WEBBUTVECKLING 1 ‐ ARBETSBOK
8) Varför ska man aldrig använda GET‐metoden för inloggningar?
Lösenordet kommer att synas i klartext i URL:en ......
9) Vilken metod är default, GET eller POST?
GET ......
10) Vilket element definierar ett formulär?
