Grundlæggende html - appacademy

App Academy www.appacademy.dk@appacademydk

HTML og CSS

Introduktion

Vi starter klokken 17

Eksemplerne kan efterfølgende hentes på http://appacademy.dk


Planen

Introduktion

Opbygning af HTML-dokumenter

Tekst og billeder

Formularer og tabeller

Mobile enheder

Afrunding


Kristian Langborg-Hansen

Partner i App AcademyUnderviser og foredragsholderForfatter

[email protected]


Teknologierne

Hyper Text Markup Language

Struktur og indhold

Cascading Style sheet

Udseende


Struktur af dokumentet

• Et HTML-dokument indeholder– Dokumenttypen– Header– Brødtekst



Struktur af tekst

• Afsnit• Linjer• Sektioner



Struktur af tekst (HTML)

• Afsnit <p>• Linjer <br>• Sektioner <article> <section>

• <div> <span>


Struktur af tekst (CSS)

• font-family, font-weight, font-style, font-size• margin-left, margin-right• :before, :after, text-transform• Background-image


Danske bogstaver

• To muligheder– Skift til UTF-8

<meta charset="utf-8">

– Brug HTML entitiesÅ = Å Æ = &Aelig; Ø = &Oelig;


Billeder

• Selvstændige filer• Almindelige formater

– JPG, GIF, PNG



Billeder (HTML)

• <img>– src– alt– title


Billeder (CSS)

• float• border-width, border-style, border-color• Width, height


Google Web Fonts

• Flere end 500 skrifttyper• Open source• Genbruges på tværs af websteder

http://www.google.com/webfonts


Tekst og billeder

• Adskillelse af indhold og design– Struktur i HTML– Layout i CSS

• Billeder– Placering– Størrelse


www.TheWildernessDowntown.com


Arkitektur


Arkitektur


Formularer

abc

123

Indtastede data

Svar


Formularer

abc

123

Indtastede data

Svar



Formularer (HTML)

• Input type– Text– Email– Number – min og max– Radio– Checkbox– Range

• Select• Textarea


Tabeller

• Bruges til... – tabeller– ikke til layout

• (længere)



Hurtigt design

• Twitter bootstrap– Prædefineret CSS til at komme hurtigt i gang– Mulighed for tilpasning– Mange andre komponenter

http://getbootstrap.com/



Mobile websider


Responsive Web Design

• Tre nøgleteknologier:– Media queries– Fluid grid– Fleksible billeder

• Test Test Test!– http://codenerd.dk/responsive/


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.”

Education

Grundlæggende html - appacademy