Introduktion til HTML og CSS

Slides

Introduktion til HTML & CSS

Opgaver

HTML
Læs og gennemgå 10 hurtige lektioner om HTML på HTML tutorial

Lær HTML og slå HTML tags op på http://www.w3schools.com/html/ (på engelsk)

CSS
Læs og gennemgå nogle af lektionerne om CSS på CSS tutorial

Lær CSS og slå CSS properties op på http://www.w3schools.com/css/ (på engelsk)

Opgaver

HTML

  • Opret en ny simpel HTML side og kald den test.html. I Aptana gøres dette ved at højreklikke på blog, og herefter klikke på new file.

En HTML side har altid en bestemt grundstruktur - denne ser ud på følgende måde:

<html>
  <head></head>
  <body></body>
</html>
  • Opret HTML grundstrukturen.
  • Skriv et blog-indlæg i kroppen - mellem body tags'ene - bestående af minimum en overskrift, brødtekst, dato samt navnet på forfatteren.
  • Åbn derefter test.html i din browser ved at trykke på det grønne kør-ikon i Aptana Studio. Hvordan ser dit blog-indlæg ud? Hvorfor ser det mon ud, som det gør?
  • Tilføj HTML tags til dit blog-indlæg for at give dit indlæg struktur og gøre det mere læsbart. Hvilke HTML tags har du benyttet og hvorfor har du netop brugt disse?
  • Bonus opgave: Tjek om din side overholder standarderne ved at copy-paste HTML'en ind i validator.w3.org

Hvad med æøå?

Du har sandsynligvis læst e-mails eller HTML sider hvor æøå ikke blev vist korrekt. Det samme er tilfældet på vores test.html side. Dette skyldes at det ikke er indikeret for browseren hvilket format HTML filen er skrevet i - og så gætter browseren selv, desværre ofte forkert. For at understøtte æøå indikeres formatet i head sektionen:

<html>
  <head>
   <meta charset="utf-8">
  </head>
</html>

CSS

  • Tilføj CSS styles på dine HTML tags og giv dit blog-indlæg et flot layout (Ex. <div style="color:#FFFFFF">tekst</div>). Hvilke CSS styles har du benyttet og hvorfor har du valgt disse?
  • Når du er tilfreds med udseendet på dit blog-indlæg, opret en CSS fil med navnet test.css og inkluder filen i test.html. Det gøres ved at lave en reference i head sektionen af dokumentet:
  <head>
    <link href="test.css" rel="stylesheet">
  </head>
  • Flyt de CSS styles du oprettede tidligere til test.css og referer til dem via id (dvs #) eller class (dvs .). Hvorfor har du valgt den ene metode frem for den anden? Hvad er forskellen på id og class? Hvad kan der være smart ved at flytte CSS styles ud i et eksternt dokument?

Mere om HTML og CSS

Opgaver:
HTML og CSS opgaver

Hjælpeværktøjer:

Ekstra resurser

  • csszengarden.com - Demonstration af hvordan den sammen HTML kan layoutes forskelligt med CSS. (Klik på et design navn for at få siden hvis med en anden CSS)
  • css1k.com - Samme koncept, men nu med kun 1024 tegns CSS.
Medmindre andet er angivet, er indholdet af denne side licenseret under Creative Commons Attribution-NonCommercial 3.0 License