Föreläsning om HTML
•
0 likes•681 views
Föreläsning om HTML i Medieteknik, Malmö Högskola.
Recommended
More Related Content
What's hot
What's hot (14)
Similar to Föreläsning om HTML
Similar to Föreläsning om HTML (17)
More from Johannes Karlsson
Föreläsning om HTML
- 1. 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=”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. Exempel
- 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
- 16. 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)