Introduktion

I dette projekt bliver du introduceret til HTML & CSS ved at lære, hvordan du laver dit helt eget personlige fødselsdagskort.

screenshot

Trin 1: Hvad er HTML?

HTML står for HyperText Markup Language, hvilket er det sprog, som man bruger til at lave websider. Lad os se på et eksempel!

Arbejdsliste

  • Du skal bruge en webside, der hedder Trinket til at skrive din HTML. Åbn denne Trinket: jumpto.cc/web-intro. Hvis du læser dette online, så kan du også benytte den indlejrede Trinket nedenfor.
  • Koden, som vises til venstre i vores Trinket, er HTML. I højre side kan du se den webside, som HTML koden har lavet.

HTML bruger tags til at opbygge websider. Prøv at lægge mærke til følgende HTML i linje 8 af din kode:

    <p>Hej. Mit navn er Anders.</p>

<p> er et eksempel på et tag, og er en forkortelse af paragraph. Du kan begynde en paragraf med <p> og afslutte en paragraf med </p>.

  • Kan du få øje på andre tags? Måske du har lagt mærke til et tag på linje 9, som er <b>, hvilket står for bold (fed):
    <b>løbe</b>

Her er nogle flere tags:

<html> og </html> markerer begyndelsen og slutningen af dit HTML dokument;
<head> og </head> omringer fx din CSS (det kommer vi ind på senere!);
<body> og </body> indeholder dit website indhold.

screenshot

  • Prøv at ændre en af dine tekstparagrafer i din HTML (til venstre). Klik på ‘Run’. Nu bør du se, at din webside ændrer sig (i højre side)!

screenshot

  • Hvis du har lavet en fejl og har lyst til at fortryde dine ændringer, så kan du klikke på menuknappen og derefter ‘Reset’. Prøv det selv!

screenshot

Gem dit projekt

Du behøver ikke have en Trinket konto for at kunne gemme dine projekter!

Hvis du ikke har en Trinket konto, så klik på pil-ikonet, der vender nedad, og klik så på ‘Link’. Så vil du få et link, som du kan gemme og vende tilbage til senere. Dette skal du gøre hver gang du laver ændringer, som du gerne vil gemme, for linket ændrer sig tilsvarende!

screenshot

Hvis du har en Trinket konto, så er den letteste måde at gemme din webside på ved at klikke på ‘Remix’ knappen øverst til højre. Så gemmer du en kopi af din Trinket på din profil.

screenshot

Udfordring: Tilføj en ny paragraf

Kan du tilføje en tredje tekstparagraf til din webside under dine 2 øvrige paragrafer? Husk at din nye paragraf skal starte med et <p> tag og slutte med et </p>.

Din webside bør se således ud:

screenshot

Kan du tilføje fed (bold) og understreget tekst til din nye paragraf? Du skal bruge <u> og </u> for at understrege din tekst.

Gem dit projekt

Trin 2: Hvad er CSS?

CSS står for Cascading Style Sheets, og er det sprog man bruger til at style websider (forme layout) og få dem til at se indbydende ud. Du kan linke din webside til en CSS fil i <head> sektionen af et HTML dokument på denne måde:

screenshot

Arbejdsliste

  • CSS definerer egenskaberne for et givent tag. Klik på ‘style.css’ fanen for CSS’en til din webside.

screenshot

  • Find denne kode:
    p {
        color: black;
    }

Denne CSS kode indeholder en enkelt egenskab for paragrafer, hvilket er at tekstfarven skal være sort.

  • Ændr ordet ‘black’ i CSS’en til ‘blue’. Du bør nu se at tekstfarven på alle dine paragrafer skifter farve til blå.

    screenshot

Gem dit projekt

Udfordring: Tilføj endnu mere styling

Kan du lave tekstlinjerne orange? Eller baggrunden grå?

screenshot

Gem dit projekt

Trin 3: Lav et fødselsdagskort

Lad os bruge hvad du har lært indtil videre omkring HTML og CSS og gå igang med at lave dit helt eget fødselsdagskort.

Arbejdsliste

  • Åbn denne Trinket: jumpto.cc/web-kort, eller benyt den indlejrede version nedenfor, hvis du læser dette online.

Bare rolig hvis du ikke forstår al koden. Fødselsdagskortet ser lidt kedeligt ud, så nu skal du lave nogle ændringer i HTML- og CSS’en.

  • Hvis du klikker på knappen på forsiden af kortet, så bør du se at det åbner sig.

    screenshot

  • Gå til linje 13 i din kode. Ligesom vores tidligere eksempel, så kan du redigere hvilken som helst tekst i HTML’en for at gøre dit kort personligt.

    screenshot

  • Kan du finde HTML’en for dit robotbillede? (Hint: den er på linje 16!) Ændr ordet robot til sun - så vil du se at billedet ændrer sig!

    screenshot

Du kan bruge andre ord som boy, diamond, dinosaur, flowers, girl, rainbow, robot, spaceship, sun, tea, og trophy.

  • Du kan også redigere CSS’en til dit fødselsdagskort. Klik på fanen “style.css”. Det begynder med al CSS’en outside (udenpå) kortet. Ændr background-color til lightgreen.

    screenshot

  • Du kan også ændre størrelsen på et billede. Gå til linje 29 i din CSS og ændr width (bredde) og height (højde), af billedet udenpå, til 200px (px står for pixels).

    screenshot

  • Skrifttypen (font) kan også ændres. Gå til linje 24 og ændr font-family til Comic Sans MS og font-size til 16pt.

    screenshot

Du kan benytte andre skrifttyper som fx arial, Impact og Tahoma.

Gem dit projekt

Udfordring: Lav et personligt kort

Brug alt det du har lært omkring HTML og CSS for at færddiggøre dit personlige kort. Det behøver ikke være et fødselsdagskort, men kan være til hvilken som helst lejlighed!

Her er et eksempel:

screenshot

Gem dit projekt

Nu hvor du har lavet dit kort færdigt, så kan du dele, eller e-maile, det til nogen.

screenshot