Downloaded 11 times
Föreläsning om HTML
- 1.
- 2. • Märkspråk (HyperTextMarkup 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 elementbestå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å tillMah</a> Attribut Värde Innehåll Gå till Mah
- 10. 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
- 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
- 13.
- 14. Metadata • Information ominnehå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
- 16.
- 17. Validering • Kontrollera kodenså 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 ärHTML? • 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ästagång. • HTML & CSS-boken - Kapitel 5 (sidorna 109-144) • Youtube - Web Development tutorial for beginners (#2)