Your SlideShare is downloading. ×
0
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Grundlæggende html - appacademy
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Grundlæggende html - appacademy

207

Published on

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

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
207
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Transcript

    • 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

    ×