Grundlæggende html - appacademy

50 %
50 %
Information about Grundlæggende html - appacademy
Education
css

Published on February 19, 2014

Author: klangborg

Source: slideshare.net

Description

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

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

Add a comment

Related presentations

Related pages

HTML og CSS - App Academy - Programmering for børn og ...

Med HTML og CSS kan du lave grundlæggende websider til både mobiltelefoner og traditionelle computere. Samspillet mellem HTML og layoutsproget CSS, gør ...
Read more

Mellemtrin Archives - Kodning og innovation i skolen

... Didaktiseret site, Elevark, HTML, Mellemtrin, Mine ... fra Appacademy, i gang med at samle ... Spilleren vil lære om grundlæggende gaming ...
Read more

Alm. kodning Archives - Kodning og innovation i skolen

Trinket tilbyder også intro til HTML. ... fra Appacademy, i ... På Grok Learning ligger en række fine tutorials der kan bruges til at lære ...
Read more

SQL tutorial - App Academy

HTML og CSS; PHP; Scratch; Stencyl; WordPress; Kontakt App Academy. Jernbanegade 27 6000 Kolding Denmark +45 51 922 722 kd.ymedacappa null @ofni. Praktiske ...
Read more

⭐Mobile apps. App Academy. Velkommen! Vi starter kl. 17 ...

Mobile apps Velkommen! Vi starter kl. 17:00 Eksempler og links kan findes på http://appacademy.dk Kristian Langborg-Hansen Partner i Underviser og ...
Read more

Lene Sørensen | LinkedIn

Grundlæggende SAP (TERP - INTEGRATION OF BUS PROCESS_COL_95) ... Mobile apps med HTML og Phonegap AppAcademy, Licens 2014039. oktober 2014 – I dag.
Read more