grundlæggende html - appacademy
DESCRIPTION
Slides til første del af kurset HTML & CSS: http://appacademy.dk/kurser/html-og-css/TRANSCRIPT
![Page 1: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/1.jpg)
App Academy www.appacademy.dk@appacademydk
HTML og CSS
Introduktion
Vi starter klokken 17
Eksemplerne kan efterfølgende hentes på http://appacademy.dk
![Page 2: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/2.jpg)
App Academy www.appacademy.dk@appacademydk
Planen
Introduktion
Opbygning af HTML-dokumenter
Tekst og billeder
Formularer og tabeller
Mobile enheder
Afrunding
![Page 3: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/3.jpg)
App Academy www.appacademy.dk@appacademydk
Kristian Langborg-Hansen
Partner i App AcademyUnderviser og foredragsholderForfatter
![Page 4: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/4.jpg)
App Academy www.appacademy.dk@appacademydk
Teknologierne
Hyper Text Markup Language
Struktur og indhold
Cascading Style sheet
Udseende
![Page 5: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/5.jpg)
App Academy www.appacademy.dk@appacademydk
Struktur af dokumentet
• Et HTML-dokument indeholder– Dokumenttypen– Header– Brødtekst
![Page 6: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/6.jpg)
App Academy www.appacademy.dk@appacademydk
![Page 7: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/7.jpg)
App Academy www.appacademy.dk@appacademydk
Struktur af tekst
• Afsnit• Linjer• Sektioner
![Page 8: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/8.jpg)
App Academy www.appacademy.dk@appacademydk
![Page 9: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/9.jpg)
App Academy www.appacademy.dk@appacademydk
Struktur af tekst (HTML)
• Afsnit <p>• Linjer <br>• Sektioner <article> <section>
• <div> <span>
![Page 10: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/10.jpg)
App Academy www.appacademy.dk@appacademydk
Struktur af tekst (CSS)
• font-family, font-weight, font-style, font-size• margin-left, margin-right• :before, :after, text-transform• Background-image
![Page 11: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/11.jpg)
App Academy www.appacademy.dk@appacademydk
Danske bogstaver
• To muligheder– Skift til UTF-8
<meta charset="utf-8">
– Brug HTML entitiesÅ = Å Æ = &Aelig; Ø = &Oelig;
![Page 12: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/12.jpg)
App Academy www.appacademy.dk@appacademydk
Billeder
• Selvstændige filer• Almindelige formater
– JPG, GIF, PNG
![Page 13: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/13.jpg)
App Academy www.appacademy.dk@appacademydk
![Page 14: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/14.jpg)
App Academy www.appacademy.dk@appacademydk
Billeder (HTML)
• <img>– src– alt– title
![Page 15: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/15.jpg)
App Academy www.appacademy.dk@appacademydk
Billeder (CSS)
• float• border-width, border-style, border-color• Width, height
![Page 16: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/16.jpg)
App Academy www.appacademy.dk@appacademydk
Google Web Fonts
• Flere end 500 skrifttyper• Open source• Genbruges på tværs af websteder
http://www.google.com/webfonts
![Page 17: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/17.jpg)
App Academy www.appacademy.dk@appacademydk
Tekst og billeder
• Adskillelse af indhold og design– Struktur i HTML– Layout i CSS
• Billeder– Placering– Størrelse
![Page 18: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/18.jpg)
App Academy www.appacademy.dk@appacademydk
www.TheWildernessDowntown.com
![Page 19: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/19.jpg)
App Academy www.appacademy.dk@appacademydk
Arkitektur
![Page 20: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/20.jpg)
App Academy www.appacademy.dk@appacademydk
Arkitektur
![Page 21: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/21.jpg)
App Academy www.appacademy.dk@appacademydk
Formularer
abc
123
Indtastede data
Svar
![Page 22: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/22.jpg)
App Academy www.appacademy.dk@appacademydk
Formularer
abc
123
Indtastede data
Svar
![Page 23: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/23.jpg)
App Academy www.appacademy.dk@appacademydk
![Page 24: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/24.jpg)
App Academy www.appacademy.dk@appacademydk
Formularer (HTML)
• Input type– Text– Email– Number – min og max– Radio– Checkbox– Range
• Select• Textarea
![Page 25: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/25.jpg)
App Academy www.appacademy.dk@appacademydk
Tabeller
• Bruges til... – tabeller– ikke til layout
• (længere)
![Page 26: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/26.jpg)
App Academy www.appacademy.dk@appacademydk
![Page 27: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/27.jpg)
App Academy www.appacademy.dk@appacademydk
Hurtigt design
• Twitter bootstrap– Prædefineret CSS til at komme hurtigt i gang– Mulighed for tilpasning– Mange andre komponenter
http://getbootstrap.com/
![Page 28: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/28.jpg)
App Academy www.appacademy.dk@appacademydk
![Page 29: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/29.jpg)
App Academy www.appacademy.dk@appacademydk
Mobile websider
![Page 30: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/30.jpg)
App Academy www.appacademy.dk@appacademydk
Responsive Web Design
• Tre nøgleteknologier:– Media queries– Fluid grid– Fleksible billeder
• Test Test Test!– http://codenerd.dk/responsive/
![Page 31: Grundlæggende html - appacademy](https://reader034.vdocuments.net/reader034/viewer/2022042815/557ab148d8b42a70408b4fcd/html5/thumbnails/31.jpg)
App Academy www.appacademy.dk@appacademydk
App Academy
Dagens eksempler og links:www.appacademy.dk
Kontakt:[email protected]
”Hos App Academy mener vi, at alle fortjener at kunne programmere – og vi vil gerne hjælpe
jer med at lære det.”