föreläsning om 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

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

• Paragraph - Stycke

• , , , Dekorativa element

• 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=”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

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

https://validator.w3.org

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)

föreläsning om html

Education