Grundlæggende html - appacademy
Upcoming SlideShare
Loading in...5
×
 

Grundlæggende html - appacademy

on

  • 237 views

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/

Statistics

Views

Total Views
237
Views on SlideShare
211
Embed Views
26

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 26

http://appacademy.dk 26

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Jquery-example
  • Jquery-example

Grundlæggende html - appacademy Grundlæggende html - appacademy Presentation Transcript

  • HTML og CSS Introduktion Vi starter klokken 17 Eksemplerne kan efterfølgende hentes på http://appacademy.dk App Academy www.appacademy.dk @appacademydk
  • Planen Introduktion Opbygning af HTML-dokumenter Tekst og billeder Formularer og tabeller Mobile enheder Afrunding App Academy www.appacademy.dk @appacademydk
  • Kristian Langborg-Hansen Partner i App Academy Underviser og foredragsholder Forfatter klh@appacademy.dk App Academy www.appacademy.dk @appacademydk
  • Teknologierne Hyper Text Markup Language Struktur og indhold Cascading Style sheet Udseende App Academy www.appacademy.dk @appacademydk
  • Struktur af dokumentet • Et HTML-dokument indeholder – Dokumenttypen – Header – Brødtekst App Academy www.appacademy.dk @appacademydk
  • App Academy www.appacademy.dk @appacademydk
  • Struktur af tekst • Afsnit • Linjer • Sektioner App Academy www.appacademy.dk @appacademydk
  • App Academy www.appacademy.dk @appacademydk
  • Struktur af tekst (HTML) • Afsnit <p> • Linjer <br> • Sektioner <article> <section> • <div> <span> 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 App Academy www.appacademy.dk @appacademydk
  • Danske bogstaver • To muligheder – Skift til UTF-8 <meta charset="utf-8"> – Brug HTML entities Å = &Aring; Æ = &Aelig; Ø = &Oelig; App Academy www.appacademy.dk @appacademydk
  • Billeder • Selvstændige filer • Almindelige formater – JPG, GIF, PNG App Academy www.appacademy.dk @appacademydk
  • App Academy www.appacademy.dk @appacademydk
  • Billeder (HTML) • <img> – src – alt – title App Academy www.appacademy.dk @appacademydk
  • Billeder (CSS) • float • border-width, border-style, border-color • Width, height 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 App Academy www.appacademy.dk @appacademydk
  • Tekst og billeder • Adskillelse af indhold og design – Struktur i HTML – Layout i CSS • Billeder – Placering – Størrelse App Academy www.appacademy.dk @appacademydk
  • www.TheWildernessDowntown.com App Academy www.appacademy.dk @appacademydk
  • Arkitektur App Academy www.appacademy.dk @appacademydk
  • Arkitektur App Academy www.appacademy.dk @appacademydk
  • Formularer Indtastede data Svar App Academy www.appacademy.dk @appacademydk
  • Formularer Indtastede data Svar App Academy www.appacademy.dk @appacademydk
  • App Academy www.appacademy.dk @appacademydk
  • Formularer (HTML) • Input type – – – – – – Text Email Number – min og max Radio Checkbox Range • Select • Textarea App Academy www.appacademy.dk @appacademydk
  • Tabeller • Bruges til... – tabeller – ikke til layout • (længere) App Academy www.appacademy.dk @appacademydk
  • 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/ App Academy www.appacademy.dk @appacademydk
  • App Academy www.appacademy.dk @appacademydk
  • Mobile websider 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/ App Academy www.appacademy.dk @appacademydk
  • 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