Läromedel för GY2011 Webbutveckling 1 ARBETSBOK WEBBUTVECKLING 1 Lars Gunther 2012 Thelin Läromedel www.skolportalen.se ISBN: 978-91-7379-176-2 ISBN: 978-91-7379-176-2 Licens att använda denna bok är köpt via Licensen gäller enligt villkor www.skolportalen.se i samband med köpet 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öpet1 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? <html> och </html> ........................................................................................................................................................... 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 <title>? Som text på flikarna (men ev. också på andra ställen) ........................................................................................................................................................... 7) Vilka taggar omger stycken? <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. 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öpet3 WEBBUTVECKLING 1 ‐ ARBETSBOK 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. (Resultatet beror på var felen gjorts) ........................................................................................................................................................... Felaktigt stavade taggar och attribut ger ofta svar som: ........................................................................................................................................................... “not allowed as …” ........................................................................................................................................................... ........................................................................................................................................................... ........................................................................................................................................................... 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 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 ..........................................................................................................................................................