ݺߣ

ݺߣShare a Scribd company logo

Föreläsning om HTML

•
•
Johannes Karlsson
Johannes Karlsson

Föreläsning om HTML i Medieteknik, Malmö Högskola.

1 of 20
Downloaded 11 times
HTML
• Märkspråk (HyperText Markup Language) • Presentera innehåll på webben • HTML styr inte utseendet • Ett HTML-dokument består av flera HTML-element Vad är HTML?
• HTML 1.0 - 1992 • HTML 2.0 - 1994 • HTML 4.01 - 1997 (Strict & Transitional) • XHTML 1.0 - 2000 (Strict & Transitional) • HTML 5 - 2012 (ej fastställd) Versioner http://caniuse.com
Föreläsning om HTML
Föreläsning om HTML
HTML-Element • Ett element består av en eller två taggar • Start och sluttagg eller om elementet saknar innehåll så finns det endast en starttagg Exempel
Vanliga Element • <h1> Heading - Rubriker • <p> Paragraph - Stycke • <b>, <i>, <strong>, <em> Dekorativa element • <br /> Break - Radbryt • <hr /> Horizontal Rule - Horisontell linje • <ul>, <ol> & <li> List - Lista Exempel
Kodstruktur • Nestla - vad är det? • Föräldrar, barn och syskon • Indentering (Indrag) • Läsbarhet i koden • Kommentarer <!—- —-> Exempel
Egenskaper <a href=”http://mah.se”>Gå till Mah</a> Attribut Värde Innehåll Gå till Mah
Egenskaper <img src=/slideshow/frelsning-om-html/52414197/”bilder/katt.jpg” alt=”katt” /> • Ett element kan ha flera attribut och värden • Element utan innehåll har endast en start-tagg, markeras med ett / på slutet • Attributen skrivs alltid i start-taggen
Sökvägar & Filnamn • Absoluta och relativa sökvägar • Gå upp .. gå ner /mappnamn • Använd inte ÅÄÖ i sökvägar eller filnamn • HTML-dokument måste ha filändelsen .html • Ingångssidan brukar döpas till index.html Övning
HTML-dokument • Doctype - HTML-version • <html> - Den yttre ramen • <head> - Metadata • <body> - Innehåll • Quirks mode
Exempel
Metadata • Information om innehållet på webbplatsen • T.ex. avsändare, beskrivning, dokumenttitel • UTF-8 - teckenuppsättning • <meta /> - Elementet för metainformation • Metadatan styrs genom attribut • name & content Exempel
Föreläsning om HTML
Exempel
Validering • Kontrollera koden så att den är korrekt • Hittar fel, dock inte alla • Ska göras ofta och inte bara i slutet av arbetet • Görs via; https://validator.w3.org • Börja med fel nummer 1 och gå vidare Exempel
Resurser • Textredigerare (Editor) • Atom, Sublime, Brackets, Edge Code, Notepad++ • Bildbehandlingsprogram • Photoshop, Gimp, Illustrator Inkscape • Textmaterial, guider och andra källor finns på nätet
Summering • Vad är HTML? • HTML-element • Vad är nestla/indentering? • Principen är viktigare än alla detaljer • Övning ger färdighet • Ge inte upp
Läshänvisningar • Till nästa gång. • HTML & CSS-boken - Kapitel 5 (sidorna 109-144) • Youtube - Web Development tutorial for beginners (#2)

More Related Content

Föreläsning om HTML

  • 2. • Märkspråk (HyperText Markup Language) • Presentera innehåll på webben • HTML styr inte utseendet • Ett HTML-dokument består av flera HTML-element Vad är HTML?
  • 3. • HTML 1.0 - 1992 • HTML 2.0 - 1994 • HTML 4.01 - 1997 (Strict & Transitional) • XHTML 1.0 - 2000 (Strict & Transitional) • HTML 5 - 2012 (ej fastställd) Versioner http://caniuse.com
  • 6. HTML-Element • Ett element består av en eller två taggar • Start och sluttagg eller om elementet saknar innehåll så finns det endast en starttagg Exempel
  • 7. Vanliga Element • <h1> Heading - Rubriker • <p> Paragraph - Stycke • <b>, <i>, <strong>, <em> Dekorativa element • <br /> Break - Radbryt • <hr /> Horizontal Rule - Horisontell linje • <ul>, <ol> & <li> List - Lista Exempel
  • 8. Kodstruktur • Nestla - vad är det? • Föräldrar, barn och syskon • Indentering (Indrag) • Läsbarhet i koden • Kommentarer <!—- —-> Exempel
  • 9. Egenskaper <a href=”http://mah.se”>Gå till Mah</a> Attribut Värde Innehåll Gå till Mah
  • 10. Egenskaper <img src=/slideshow/frelsning-om-html/52414197/”bilder/katt.jpg” alt=”katt” /> • Ett element kan ha flera attribut och värden • Element utan innehåll har endast en start-tagg, markeras med ett / på slutet • Attributen skrivs alltid i start-taggen
  • 11. Sökvägar & Filnamn • Absoluta och relativa sökvägar • Gå upp .. gå ner /mappnamn • Använd inte ÅÄÖ i sökvägar eller filnamn • HTML-dokument måste ha filändelsen .html • Ingångssidan brukar döpas till index.html Övning
  • 12. HTML-dokument • Doctype - HTML-version • <html> - Den yttre ramen • <head> - Metadata • <body> - Innehåll • Quirks mode
  • 14. Metadata • Information om innehållet på webbplatsen • T.ex. avsändare, beskrivning, dokumenttitel • UTF-8 - teckenuppsättning • <meta /> - Elementet för metainformation • Metadatan styrs genom attribut • name & content Exempel
  • 17. Validering • Kontrollera koden så att den är korrekt • Hittar fel, dock inte alla • Ska göras ofta och inte bara i slutet av arbetet • Görs via; https://validator.w3.org • Börja med fel nummer 1 och gå vidare Exempel
  • 18. Resurser • Textredigerare (Editor) • Atom, Sublime, Brackets, Edge Code, Notepad++ • Bildbehandlingsprogram • Photoshop, Gimp, Illustrator Inkscape • Textmaterial, guider och andra källor finns på nätet
  • 19. Summering • Vad är HTML? • HTML-element • Vad är nestla/indentering? • Principen är viktigare än alla detaljer • Övning ger färdighet • Ge inte upp
  • 20. Läshänvisningar • Till nästa gång. • HTML & CSS-boken - Kapitel 5 (sidorna 109-144) • Youtube - Web Development tutorial for beginners (#2)