Download as PDF, PPTX
More Related Content
Föreläsning 1: Grundläggande HTML
- 1. HTML 1 -Askul & aslätt
- 3. Dagens föreläsning •Webbsyntax och versioner av HTML • Grundläggande taggar • Typografiska taggar • Bilder • Länkar • Validering • Praktisk genomgång
- 4. Resurser • Textredigerare • Atom, Brackets, Text Mate 2, Dreamweaver o.s.v • Bild- och grafikprogram • Photoshop, Gimp eller liknande • FTP (File transfer protocol) • Cyberduck, FileZilla o.s.v • Webbhotell / Server • Binero, Surftown, Lopia o.s.v
- 5. Versioner av HTML • HTML 1.0 - 1992 • HTML 2.0 - 1994 • HTML 4.01 - 1997 (Strict, Transitional) • XHTML 1.0 - 2000 (Strict, Transitional) • HTML 5 - 2012 -> pågående standard (2025 ?) • CSS 1, 2 & 3
- 7. HTML • Taggarbörjar alltid med < och avslutas med >, åäö och STORA BOKSTÄVER är inte att rekommendera • De flesta taggar har också en starttagg och en sluttag
- 8. Benämningar <div id=”content”>Innehåll</div> element tagg attribut värde
- 9. Rendering • Webbläsarenläser koden från start till slut • Tänk efter vart ni lägger de olika delarna • Javascript sist • Inkorrekt HTML innebär att webbläsaren går in i Quirk-mode
- 10. Grundtaggar • Doctypetalar om vilket språk/standard som används. • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> • <html> är den tagg som omsluter hela dokumentet, den yttersta ramen. • <head> och <body> delar upp sidan i två delar. • Textredigerare kan ofta genererar starttaggar åt er. • WTF! Rolf Staflin säger vad... Quirkmode
- 11.
- 12.
- 13. Typografiska taggar •<p> paragraf </p> • <i> italic / kursivt </i> • <b> bold / fet </b> • <h1> heading / rubrik </h1> • <h2> heading / rubrik nivå 2 </h2> • <br /> eller <br> radbryt
- 14. <img src="bilder/hus.jpg" alt="gultvåningshus med balkonger" />
- 15. Bilder • bilder= image = img • alt-texter = alternativ text • title = bildtitel (syns vid hover) • longdesc = lång beskrivning (tabell, diagram) • ingen sluttagg <img src="bilder/hus.jpg" alt="gult våningshus med balkonger" />
- 16. Struktur • Logiskkodstruktur, använd indrag för att visa hierarki • Visar vilka element som ligger i varandra • Nesting error • Kommentarer hjälper oss att hitta i koden <!-- Här var det en kommentar -->
- 18. Filnamn • Allasidor måste döpas till something.html • Startsidan ska döpas till index.html, designa förstasidan först, kopiera till övriga sidor • Webbhotellet/servern letar efter index.html • Logisk mappstruktur, det är jobbigt att ändra i efterhand
- 20. Länkar • a= anchor = ankare • href = hyper text reference = länk referens • title = länktitel (vart leder länken?) <a href=”http://google.se” title=”Gå till Google”>Google</a>
- 21. Relativa och absoluta <a href="index.html" /> ⎫ ⎪ ⎬ ⎪ ⎭ dokumentberoende sökväg <a href="http://www.hemsida.se/html/link.html" /> ⎫ ⎪ ⎪ ⎪ ⎪ ⎬ ⎪ ⎪ ⎪ ⎪ ⎭ absolut länk • relationen mellan dokument och objekt • länka sig ur mappar görs genom ../
- 22. Länk till e-post • alla användare har inte en mailklient installerad • Skriv ut adressen som länktext
- 23.
- 24. Rätt Svar 1.”public/steel/awesome.jpg” 2. ”../www/doom/about.html” 3. ”../../../public/header.png” 4. ”../../../../public/php/gloom/guest.js”
- 25. Listor • Listorkan vara användbara till mer än bara listor • Det finns två olika listtyper, osorterad, sorterad • Egna listelement
- 26. Metataggar • Metataggarinnehåller information om informationen/webbplatsen • Ger sökmotorer information • Möjlighet att skriva datum och författare • UTF-8 <meta charset=”UTF-8”> VIKTIGT • Beskrivning av sidan – visas i google • Keywords fungerar ibland, inte med google eller altavista
- 27.
- 28. Validering • Försäkrasig om att koden är korrekt • Steg ett i problemlösning • Tänk på att validera efter rätt standard • Görs externt via http://validator.w3.org/
- 29.
- 30. Sammanfattning • Vadär en tagg? • Varför ska man använda grundtaggar? • Vad är är skillnaden mellan HTML & CSS? • Varför ska man validera sin kod?
- 32. Läsanvisningar • Införlabb: kapitel 1-4 HTML och CSS boken • Inför föreläsning: sid 11-67 och 76-81 i Användbarhetsboken