Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se
1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en antal filer som du kan ladda ner i en zip-fil. Länk &ll zip-filen finns på labora&onens webbsida. Då du packat upp zip-filen, får du en mapp med en HTML-dokument samt en mapp med en antal bildfiler.
2. Skapa en nyn HTML-dokument Du ska nu skapa en nyn HTML-dokument, som ska fungera som ingångssida för din webbporwolio. Namnet på filen ska vara index.htm eller index.html. I servern är det förvalt an en fil med dena namn är ingångssidan, då man anger adressen &ll mappen. Filens namn behöver då inte ingå i URL:en &ll sidan, så adressen blir lite kortare. DeNa kommer du se i den sista övningen i denna labora&on, då du ska ta fram den publicerade webbsidan. På de två följande sidorna visas det hur du skapar en nyn HTML-dokument i Dreamweaver respek&ve Komodo Edit. Använder du en annan editor, får du själv ta reda på hur man gör.
2a. Skapa nyn HTML-dokument i Dreamweaver Här beskrivs hur du skapar en nyn HTML-dokument i Dreamweaver CS6. Starta programmet Dreamweaver. Välj New i File-menyn. I dialogrutan, du då får, väljer du Blank page. I kolumnen för Page Type väljer du HTML. I kolumnen för Layout väljer du <none>. I popupmenyn för DocType väljer du HTML5. Klicka sedan på knappen Create. Du får då en nyn HTML-dokument med de grundläggande elementen. Kontrollera också an koden inkluderar en meta-tagg där charset är UTF-8. Spara filen med namnet index.htm i din mapp webbsidor, som du skapade i labora&on 1. Obs! Använd kodläget i Dreamweavers fönster.
2b. Skapa nyn HTML-dokument i Komodo Edit Här beskrivs hur du skapar en nyn HTML-dokument i Komodo Edit 9. Starta programmet Komodo Edit. Välj New->New File from Template i File-menyn. I dialogrutan, du då får väljer du Web i kolumnen för Categories. I kolumnen för Templates väljer du HTML5. Filnamn, etc. behöver du inte bry dig om nu. Klicka sedan på Open. Du får då en nyn HTML-dokument med de grundläggande elementen, fast det finns ingen meta-tagg som anger teckenkodning. Välj Current File Preferences i Edit-menyn. Kontrollera där an UTF-8 är vald, annars väljer du det och klickar på OK. (se labora&on 1) I HTML-koden lägger du &ll en meta-taggen som anger an UTF-8 ska användas. <meta charset="utf-8"> Spara filen med namnet index.htm i din mapp webbsidor, som du skapade i labora&on 1.
3. Titel och första innehåll Sidan ska vara en presenta&on av dig själv, så en lämplig &tel i &tle-elementet är din namn. Skriv in din namn som innehåll i Otle-elementet. Skriv även in din namn som första innehåll i body-elementet. Spara filen. Du bör all&d spara filen e:er varje ändring, så denna instruk&on ges o:ast inte längre i de kommande övningarna. Men du fortsäner alltså då an spara ändå. I illustraoonen används Dreamweaver. Men, oavset om du använder Dreamweaver, Komodo Edit eller någon annan editor, så handlar det nu om innehållet i HTML-koden och då är det likadant i alla editorer. I de följande övningarna i denna laboraoon, beskrivs det vad du ska göra i koden. Det visas också hur det kan se ut i webbläsaren. Däremot visas inte den exakta HTML-koden. Det är din uppgiy at ta fram den. TiTa på exempel i föreläsningar och kursboken om HTML, för at få Ops om hur du skriver koden.
4. Öppna sidan i webbläsaren Öppna nu din webbsida i webbläsaren, så an du kan se resultatet. Öppna filen index.htm i webbläsaren. Ändra storlek på fönstret och lägg fönstret för webbläsaren och fönstret för editorn in&ll varandra. Då kan du län växla mellan fönstren och se resultatet av de ändringar och &llägg du gör i HTML-filen. Du bör nu se din namn, dels i flikens &tel och dels som innehåll på sidan.
5. Text och avskiljare Skriv nu in lite innehåll på webbsidan. DeNa skrivs i body-delen, dvs mellan start- och slunaggen för body-elementet. Innehållet ska vara en presenta&on av dig själv för dina kurskamrater och lärarna i kursen. Ta upp vad du vill, men det kan t.ex. vara hur gammal du är, var du kommer ifrån, eventuellt &digare utbildning/arbete, vilka intressen du har och vad du vill arbeta med e:er din utbildning. Ta upp vad du vill, men lägg in lite olika informa&on, som kan struktureras enligt övningarna i denna labora&on. Så börja med lite grand nu och fyll på med mer i de kommande övningarna i labora&onen. E:er varje punkt nedan sparar du filen och laddar om sidan i webbläsaren, så an du kan se resultatet. Omge din namn med h1, så an det blir huvudrubrik på sidan. Skriv sedan in lite text om dig själv. Löpande text skrivs inom p-element. Lägg &ll underrubriker med h2-h6, där du vill dela upp det i olika avsnin. Radbrytning mellan textstycken läggs in automa&skt genom p-elementen. Men ibland vill man ha en radbrytning min i en stycke. Det görs med <br>. Lägg in dena på något ställe i en stycke, så an du kan se hur det görs. EN block av en eller flera element (rubriker och stycken) omges med blockquote, för an markera det. I webbläsarna brukar resultatet bli an det blir inskjutet i vänsterkanten. Markera något stycke med blockquote. En horisontell linje läggs in med <hr>. Lägg in det i din kod på lämpligt ställe.
6. En&teter Om filen sparas i UTF-8 och meta-taggen anger UTF-8, kan många specialtecken skrivas som vanligt i editorn, utan speciell kod, t.ex. åäöéøü. En del andra tecken måste dock skrivas som en en&tet med koden &kod; där kod anger vilket tecken som avses. Skriv in några en&teter på din webbsida, för an testa. Men försök lägga in det där det är naturligt i din text. &-tecken. E:ersom & är början på en en&tet, tror webbläsaren an det kommer en kod, då man skriver &. Vill man ha en &-tecken, får man skriva en&teten för det, & (ampersand). < och > är tecken som omger taggar. Vill man ha dessa tecken i texten, får man skriva < och > (less than och greater than). Blanktecken som all&d skrivs ut skriver man med (non breakable space). Det kan man lägga in mellan två ord som ska höra ihop och där man inte vill an det ska ske en radbrytning. Skriver man flera vanliga blanktecken e:er varandra, t.ex. abc xyz, så skriver webbläsaren det endast som en blanktecken, dvs abc xyz. Vill man ha en större mellanrum, kan man lägga in flera, t.ex. abc xyz. Observera dock an dena ska inte göras för an få en inskjutning av texten. Då används istället blockquote (eller senare i kursen margin i CSS).
7. Listor En lista omges av ol (ordered list, numrerad lista) eller ul (unordered list, punktlista). Varje punkt i listan omges av li-elementet (list item). Skriv in en punktlista med lämpligt innehåll. Ändra det &ll en numrerad lista. Lägg &ll en type-anributet i ol-taggen, för an det ska bli en ordnad lista med a, b, c, etc. En underlista läggs &ll som en ny lista som ingår i en li-element i den ynre listan. Observera an den inre listan ska ligga inu& li-elementet, dvs mellan <li> och </li> och inte mellan raderna (li-elementen).
8. Bilder En bild läggs in med img-elementet. I mappen pics (som ingick i det arbetsmaterial du laddade ner) finns det en bild som du kan lägga in för an öva. Men byt sedan ut den mot en egen bild helst en bild på dig själv. Lägg in en img-tagg för bilden teddy.jpg, som ligger i mappen pics. Använd en rela&v adress &ll bilden. Lägg också in en alt-anribut som ger en kort beskrivning av bilden. Vill du justera storleken på bilden gör du det med width- och height-anributen. Använd endast en av dessa anribut, så behålls bildens propor&oner och det andra värdet justeras automa&skt.
9. Länkar En länk skapas genom an man dels anger ankaret, som är det man kan klicka på, och dels anger des&na&onen. DeNa görs med med a-elementet och href-anributet i a-taggen. Skapa en länk &ll kursens webbplats. Skriv en a-element där du har lämplig text som ankare och refererar &ll adressen htp://medieteknik.lnu.se/1me321. Lägg &ll anributet target="_blank" i a-taggen. Då öppnas länken i en nyn fönster eller flik i webbläsaren. Du kan också ha en bild som ankare. Skapa en ny länk och lägg in en img-tagg mellan start- och slunaggen för a-elementet. I mappen pics finns två bilder som du kan använda, för an testa. Länka t.ex. &ll följande två sidor: htps://sv.wikipedia.org/wiki/kalmar_slot htps://sv.wikipedia.org/wiki/teleborgs_slot
10. Validera HTML-koden För an kontrollera an din kod stämmer med de syntak&ska reglerna för HTML5, validerar du koden i en validator. Använd validatorn på hnps://validator.nu I den första menyn (där det står Adress) väljer du File Upload. Dra sedan din fil &ll rutan &ll höger om Bläddra-knappen. Alterna&vt klickar du på Bläddra-knappen och pekar sedan ut din fil. I menyn för Parser väljer du HTML5. Klicka sedan på knappen Validate. Om koden är korrekt, får du en ruta med grön ram som säger an det är OK. I annat fall får du en lista med felmeddelanden. RäNa i så fall dess fel och validera om, &lls allt är OK. Som övning validerar du också filen errors.htm (som finns i mappen med arbetsmaterialet, L2downloads). Den innehåller en antal fel. Gå igenom dem och räna koden.
11. Publicera sidan Publicera din sida i Web Publishing i FirstClass. Använda an&ngen FirstClass klient eller FTP-program (Cyberduck). Om det fungerar med FTP i det nätverk du siner rekommenderar jag an du använder det. Ladda upp filen index.htm och mappen pics direkt i Web Publishing. Både filen och mappen kan dras &ll Web Publishing, så du behöver inte skapa något på servern först. Kontrollera an det fungerar i webbläsaren, genom an skriva in adressen &ll din webbplats. Den är nu htp://www.fc.lnu.se/~anvid där anvid är din eget användarid. E:ersom filen heter index.htm, behöver den inte anges i url:en.
Uppgi: U1 Det du gjort i denna labora&on är en övning för en av de sidor du ska ha med i uppgi: U1, dvs ingångssidan för din webbporwolio. Du kan nu behöva gå igenom det igen och göra en del justeringar av kod och innehåll. Krav för denna sida i U1 finns på webbsidan för labora&onen.