Upload
johannes-karlsson
View
532
Download
1
Embed Size (px)
Citation preview
• 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
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
<img src=”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
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
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