Foredrag om grundlæggende HTML holdt for HK Hovedstaden

1. HTML og CSS
Introduktion
Eksemplerne kan efterfølgende
hentes på http://html5.dk

2. Kristian Langborg-Hansen
html5.dk
Planen
Introduktion
Opbygning af HTML-dokumenter
Tekst og billeder
Formularer og tabeller
Mobile enheder
Afrunding

3. Kristian Langborg-Hansen
html5.dk
Hvem er jeg?
Kristian Langborg-Hansen

4. Kristian Langborg-Hansen
html5.dk
Teknologierne
Hyper Text Markup Language
Struktur og indhold
Cascading Style sheet
Udseende

5. Kristian Langborg-Hansen
html5.dk
Struktur af dokumentet
• Et HTML-dokument indeholder
– Dokumenttypen
– Header
– Brødtekst

6. Kristian Langborg-Hansen
html5.dk

7. Kristian Langborg-Hansen
html5.dk
Struktur af tekst
• Afsnit
• Linjer
• Sektioner

8. Kristian Langborg-Hansen
html5.dk

9. Kristian Langborg-Hansen
html5.dk
Struktur af tekst (HTML)
• Afsnit <p>
• Linjer <br>
• Sektioner <article> <section>
• <div> <span>

10. Kristian Langborg-Hansen
html5.dk
Struktur af tekst (CSS)
• font-family, font-weight, font-style, font-size
• margin-left, margin-right
• :before, :after, text-transform
• Background-image

11. Kristian Langborg-Hansen
html5.dk
Danske bogstaver
• To muligheder
– Skift til UTF-8
<meta charset="utf-8">
– Brug HTML entities
Å = &Aring;
Æ = &Aelig;
Ø = &Oelig;

12. Kristian Langborg-Hansen
html5.dk
Billeder
• Selvstændige filer
• Almindelige formater
– JPG, GIF, PNG

13. Kristian Langborg-Hansen
html5.dk

14. Kristian Langborg-Hansen
html5.dk
Billeder (HTML)
• <img>
– src
– alt
– title

15. Kristian Langborg-Hansen
html5.dk
Billeder (CSS)
• float
• border-width, border-style, border-color
• Width, height

16. Kristian Langborg-Hansen
html5.dk
Google Web Fonts
• Flere end 500 skrifttyper
• Open source
• Genbruges på tværs af websteder
http://www.google.com/webfonts

17. Kristian Langborg-Hansen
html5.dk
www.TheWildernessDowntown.com

18. Kristian Langborg-Hansen
html5.dk
Arkitektur

19. Kristian Langborg-Hansen
html5.dk
Arkitektur

20. Kristian Langborg-Hansen
html5.dk
Formularer
Indtastede data
Svar

21. Kristian Langborg-Hansen
html5.dk
Formularer
Indtastede data
Svar

22. Kristian Langborg-Hansen
html5.dk

23. Kristian Langborg-Hansen
html5.dk
Formularer (HTML)
• Input type
– Text
– Email
– Number – min og max
– Radio
– Checkbox
– Range
• Select
• Textarea

24. Kristian Langborg-Hansen
html5.dk
Tabeller
• Bruges til...
– tabeller
– ikke til layout
• (længere)

25. Kristian Langborg-Hansen
html5.dk

26. Kristian Langborg-Hansen
html5.dk
Hurtigt design
• Twitter bootstrap
– Prædefineret CSS til at komme hurtigt i gang
– Mulighed for tilpasning
– Mange andre komponenter
http://twitter.github.com/bootstrap/

27. Kristian Langborg-Hansen
html5.dk

28. Kristian Langborg-Hansen
html5.dk
Mobile websider

29. Kristian Langborg-Hansen
html5.dk
Responsive Web Design
• Tre nøgleteknologier:
– Media queries
– Fluid grid
– Fleksible billeder
• Test Test Test!
– http://codenerd.dk/responsive/

30. Kristian Langborg-Hansen
html5.dk
Mere?
www.html5.dk
@html5dk
linkedin.com/in/krhansen