Grundlæggende html - appacademy

398 views
274 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
398
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Grundlæggende html - appacademy

    1. 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. 2. Planen Introduktion Opbygning af HTML-dokumenter Tekst og billeder Formularer og tabeller Mobile enheder Afrunding App Academy www.appacademy.dk @appacademydk
    3. 3. Kristian Langborg-Hansen Partner i App Academy Underviser og foredragsholder Forfatter klh@appacademy.dk App Academy www.appacademy.dk @appacademydk
    4. 4. Teknologierne Hyper Text Markup Language Struktur og indhold Cascading Style sheet Udseende App Academy www.appacademy.dk @appacademydk
    5. 5. Struktur af dokumentet • Et HTML-dokument indeholder – Dokumenttypen – Header – Brødtekst App Academy www.appacademy.dk @appacademydk
    6. 6. App Academy www.appacademy.dk @appacademydk
    7. 7. Struktur af tekst • Afsnit • Linjer • Sektioner App Academy www.appacademy.dk @appacademydk
    8. 8. App Academy www.appacademy.dk @appacademydk
    9. 9. Struktur af tekst (HTML) • Afsnit <p> • Linjer <br> • Sektioner <article> <section> • <div> <span> App Academy www.appacademy.dk @appacademydk
    10. 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. 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. 12. Billeder • Selvstændige filer • Almindelige formater – JPG, GIF, PNG App Academy www.appacademy.dk @appacademydk
    13. 13. App Academy www.appacademy.dk @appacademydk
    14. 14. Billeder (HTML) • <img> – src – alt – title App Academy www.appacademy.dk @appacademydk
    15. 15. Billeder (CSS) • float • border-width, border-style, border-color • Width, height App Academy www.appacademy.dk @appacademydk
    16. 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. 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. 18. www.TheWildernessDowntown.com App Academy www.appacademy.dk @appacademydk
    19. 19. Arkitektur App Academy www.appacademy.dk @appacademydk
    20. 20. Arkitektur App Academy www.appacademy.dk @appacademydk
    21. 21. Formularer Indtastede data Svar App Academy www.appacademy.dk @appacademydk
    22. 22. Formularer Indtastede data Svar App Academy www.appacademy.dk @appacademydk
    23. 23. App Academy www.appacademy.dk @appacademydk
    24. 24. Formularer (HTML) • Input type – – – – – – Text Email Number – min og max Radio Checkbox Range • Select • Textarea App Academy www.appacademy.dk @appacademydk
    25. 25. Tabeller • Bruges til... – tabeller – ikke til layout • (længere) App Academy www.appacademy.dk @appacademydk
    26. 26. App Academy www.appacademy.dk @appacademydk
    27. 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. 28. App Academy www.appacademy.dk @appacademydk
    29. 29. Mobile websider App Academy www.appacademy.dk @appacademydk
    30. 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. 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

    ×