Labora&on 2 HTML och validering – övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik © 2015 Rune Körnefors [email protected] 1. Ladda ner arbetsdokument Till övningarna i denna labora&on ﬁnns det eM antal ﬁler som du kan ladda ner i en zip-‐ﬁl. Länk &ll zip-‐ﬁlen ﬁnns på labora&onens webbsida. Då du packat upp zip-‐ﬁlen, får du en mapp med eM HTML-‐dokument samt en mapp med eM antal bildﬁler. 2. Skapa eM nyM HTML-‐dokument Du ska nu skapa eM nyM HTML-‐dokument, som ska fungera som ingångssida för din webbporVolio. Namnet på ﬁlen ska vara index.htm eller index.html. I servern är det förvalt aM en ﬁl med deMa 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. DeMa 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 eM nyM 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 nyM HTML-‐dokument i Dreamweaver Här beskrivs hur du skapar eM nyM 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å eM nyM HTML-‐dokument med de grundläggande elementen. •  Kontrollera också aM koden inkluderar en meta-‐tagg där charset är UTF-‐8. •  Spara ﬁlen med namnet index.htm i din mapp webbsidor, som du skapade i labora&on 1. 2b. Skapa nyM HTML-‐dokument i Komodo Edit Här beskrivs hur du skapar eM nyM 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 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å eM nyM HTML-‐dokument med de grundläggande elementen, fast det ﬁnns ingen meta-‐tagg som anger teckenkodning. •  Välj Current File Preferences… i Edit-‐menyn. •  Kontrollera där aM 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 aM UTF-‐8 ska användas. <meta charset="UTF-‐8"> •  Spara ﬁlen 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 diM namn. •  Skriv in diM namn som innehåll i Otle-‐elementet. •  Skriv även in diM namn som första innehåll i body-‐elementet. •  Spara ﬁlen. •  Du bör all&d spara ﬁlen e:er varje ändring, så denna instruk&on ges o:ast inte längre i de kommande övningarna. Men du fortsäMer alltså då aM 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 Basics of Web Design av Felke-‐Morris, för aT få Ops om hur du skriver koden. 4. Öppna sidan i webbläsaren Öppna nu din webbsida i webbläsaren, så aM du kan se resultatet. •  Öppna ﬁlen 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äM växla mellan fönstren och se resultatet av de ändringar och &llägg du gör i HTML-‐ﬁlen. •  Du bör nu se diM namn, dels i ﬂikens &tel och dels som innehåll på sidan. 5. Text och avskiljare Skriv nu in lite innehåll på webbsidan. DeMa skrivs i body-‐delen, dvs mellan start-‐ och sluMaggen 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 ﬁlen och laddar om sidan i webbläsaren, så aM du kan se resultatet. •  Omge diM namn med h1, så aM 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 avsniM. •  Radbrytning mellan textstycken läggs in automa&skt genom p-‐elementen. Men ibland vill man ha en radbrytning miM i eM stycke. Det görs med <br>. Lägg in deMa på något ställe i eM stycke, så aM du kan se hur det görs. •  EM block av en eller ﬂera element (rubriker och stycken) omges med blockquote, för aM markera det. I webbläsarna brukar resultatet bli aM 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 ﬁlen 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 aM 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 aM det kommer en kod, då man skriver &. Vill man ha eM &-‐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 aM det ska ske en radbrytning. Skriver man ﬂera vanliga blanktecken e:er varandra, t.ex. abc xyz, så skriver webbläsaren det endast som eM blanktecken, dvs abc xyz. Vill man ha eM större mellanrum, kan man lägga in ﬂera  , t.ex. abc   xyz. •  Observera dock aM deMa ska inte göras för aM 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 eM type-‐aMributet i ol-‐taggen, för aM det ska bli en ordnad lista med a, b, c, etc. •  En underlista läggs &ll som en ny lista som ingår i eM li-‐element i den yMre listan. Observera aM 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) ﬁnns det en bild som du kan lägga in för aM ö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 eM alt-‐aMribut som ger en kort beskrivning av bilden. •  Vill du justera storleken på bilden gör du det med width-‐ och height-‐aMributen. •  Använd endast eM av dessa aMribut, så behålls bildens propor&oner och det andra värdet justeras automa&skt. 9. Länkar En länk skapas genom aM man dels anger ankaret, som är det man kan klicka på, och dels anger des&na&onen. DeMa görs med med a-‐elementet och href-‐aMributet i a-‐taggen. •  Skapa en länk &ll kursens webbplats. Skriv eM a-‐element där du har lämplig text som ankare och refererar &ll adressen hTp://medieteknik/1me321. •  Lägg &ll aMributet target="_blank" i a-‐taggen. Då öppnas länken i eM nyM fönster eller ﬂik 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 sluMaggen för a-‐elementet. I mappen pics ﬁnns två bilder som du kan använda, för aM 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 aM kontrollera aM din kod stämmer med de syntak&ska reglerna för HTML5, validerar du koden i en validator. •  Använd validatorn på hMps://validator.nu •  I den första menyn (där det står Adress) väljer du File Upload. Dra sedan din ﬁl &ll rutan &ll höger om Bläddra-‐knappen. Alterna&vt klickar du på Bläddra-‐knappen och pekar sedan ut din ﬁl. •  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 aM det är OK. •  I annat fall får du en lista med felmeddelanden. •  RäMa i så fall dess fel och validera om, &lls allt är OK. •  Som övning validerar du också ﬁlen errors.htm (som ﬁnns i mappen med arbetsmaterialet, L2downloads). Den innehåller eM antal fel. Gå igenom dem och räMa 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 siMer rekommenderar jag aM du använder det. •  Ladda upp ﬁlen index.htm och mappen pics direkt i Web Publishing. •  Både ﬁlen och mappen kan dras &ll Web Publishing, så du behöver inte skapa något på servern först. •  Kontrollera aM det fungerar i webbläsaren, genom aM skriva in adressen &ll din webbplats. Den är nu hTp://www.fc.lnu.se/~anvid där anvid är diM eget användarid. •  E:ersom ﬁlen 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 webbporVolio. 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 ﬁnns på webbsidan för labora&onen.