Slides til første del af kurset HTML & CSS: http://appacademy.dk/kurser/html-og-css/

1. HTML og
CSS
Introduktion
Vi starter klokken 17
Eksemplerne kan efterfølgende
hentes på http://appacademy.dk
App Academy
www.appacademy.dk
@appacademydk

2. Planen
Introduktion
Opbygning af HTML-dokumenter
Tekst og billeder
Formularer og tabeller
Mobile enheder
Afrunding
App Academy
www.appacademy.dk
@appacademydk

3. Kristian Langborg-Hansen
Partner i App Academy
Underviser og foredragsholder
Forfatter
klh@appacademy.dk
App Academy
www.appacademy.dk
@appacademydk

4. Teknologierne
Hyper Text Markup Language
Struktur og indhold
Cascading Style sheet
Udseende
App Academy
www.appacademy.dk
@appacademydk

5. Struktur af dokumentet
• Et HTML-dokument indeholder
– Dokumenttypen
– Header
– Brødtekst
App Academy
www.appacademy.dk
@appacademydk

6. App Academy
www.appacademy.dk
@appacademydk

7. Struktur af tekst
• Afsnit
• Linjer
• Sektioner
App Academy
www.appacademy.dk
@appacademydk

8. App Academy
www.appacademy.dk
@appacademydk

9. Struktur af tekst (HTML)
• Afsnit <p>
• Linjer <br>
• Sektioner <article> <section>
• <div> <span>
App Academy
www.appacademy.dk
@appacademydk

10. Struktur af tekst (CSS)
•
•
•
•
font-family, font-weight, font-style, font-size
margin-left, margin-right
:before, :after, text-transform
Background-image
App Academy
www.appacademy.dk
@appacademydk

11. Danske bogstaver
• To muligheder
– Skift til UTF-8
<meta charset="utf-8">
– Brug HTML entities
Å = &Aring;
Æ = &Aelig;
Ø = &Oelig;
App Academy
www.appacademy.dk
@appacademydk

12. Billeder
• Selvstændige filer
• Almindelige formater
– JPG, GIF, PNG
App Academy
www.appacademy.dk
@appacademydk

13. App Academy
www.appacademy.dk
@appacademydk

14. Billeder (HTML)
• <img>
– src
– alt
– title
App Academy
www.appacademy.dk
@appacademydk

15. Billeder (CSS)
• float
• border-width, border-style, border-color
• Width, height
App Academy
www.appacademy.dk
@appacademydk

16. Google Web Fonts
• Flere end 500 skrifttyper
• Open source
• Genbruges på tværs af websteder
http://www.google.com/webfonts
App Academy
www.appacademy.dk
@appacademydk

17. Tekst og billeder
• Adskillelse af indhold og design
– Struktur i HTML
– Layout i CSS
• Billeder
– Placering
– Størrelse
App Academy
www.appacademy.dk
@appacademydk

18. www.TheWildernessDowntown.com
App Academy
www.appacademy.dk
@appacademydk

19. Arkitektur
App Academy
www.appacademy.dk
@appacademydk

20. Arkitektur
App Academy
www.appacademy.dk
@appacademydk

21. Formularer
Indtastede data
Svar
App Academy
www.appacademy.dk
@appacademydk

22. Formularer
Indtastede data
Svar
App Academy
www.appacademy.dk
@appacademydk

23. App Academy
www.appacademy.dk
@appacademydk

24. Formularer (HTML)
• Input type
–
–
–
–
–
–
Text
Email
Number – min og max
Radio
Checkbox
Range
• Select
• Textarea
App Academy
www.appacademy.dk
@appacademydk

25. Tabeller
• Bruges til...
– tabeller
– ikke til layout
• (længere)
App Academy
www.appacademy.dk
@appacademydk

26. App Academy
www.appacademy.dk
@appacademydk

27. Hurtigt design
• Twitter bootstrap
– Prædefineret CSS til at komme hurtigt i gang
– Mulighed for tilpasning
– Mange andre komponenter
http://getbootstrap.com/
App Academy
www.appacademy.dk
@appacademydk

28. App Academy
www.appacademy.dk
@appacademydk

29. Mobile websider
App Academy
www.appacademy.dk
@appacademydk

30. Responsive Web Design
• Tre nøgleteknologier:
– Media queries
– Fluid grid
– Fleksible billeder
• Test Test Test!
– http://codenerd.dk/responsive/
App Academy
www.appacademy.dk
@appacademydk

31. App Academy
Dagens eksempler og links:
www.appacademy.dk
Kontakt:
klh@appacademy.dk
”Hos App Academy mener vi, at alle fortjener at
kunne programmere – og vi vil gerne hjælpe jer
www.appacademy.dk
med at lære det.”
App Academy
@appacademydk