Introduktion

I dette projekt skal du lære, hvordan du laver din egen webside til at fortælle en historie, en joke eller et digt.

screenshot

Trin 1: Beslut dig for en fortælling

Før du begynder at kode, så skal du beslutte dig for hvilken slags historie, du gerne vil fortælle.

Arbejdsliste

  • Tænk på en historie, som du kunne have lyst til at fortælle. Det kunne fx være:
    • En kendt historie;
    • En historie som du selv finder på;
    • Noget som er sket for dig, eller en du kender.

Det behøver ikke engang være en historie. Det kunne også være en joke, et digt eller hvad som helst du har lyst til at fortælle om!

Trin 2: Redigér din historie

Lad os starte med at redigere HTML indholdet og CSS stylingen af fortællingen på din webside.

Arbejdsliste

  • Åbn denne Trinket: jumpto.cc/web-fortælling. Hvis du læser dette online, så kan du også benytte den indlejrede Trinket nedenfor.
  • Måske du kan huske, fra ‘Tillykke Med Fødselsdagen’ projektet, at websiteindhold skal placeres i <body> af dit HTML dokument.

Gå til linje 7 i din kode. Her bør du se indholdet på din webside, og at det er placeret mellem vores <body> og </body> tags.

screenshot

  • Kan du finde ud af, hvilke tags der er brugt til at lave de forskellige dele af websiden?

screenshot

  • <h1> er en heading (overskrift). Du kan bruge tallene 1 - 6 for at lave overskrifterne forskellig størrelse;
  • <div> er en forkortelse af division, og er en måde man kan gruppere ting sammen. Du skal du bruge det på din egen webside, når du skal gruppere dine elementer ud fra hvor de hører til i din historie;
  • <img> er et image (billede);
  • <p> er en paragraph (paragraf) af tekst.

Udfordringer: Lav nogle ændringer

Redigér HTML og CSS koden for at gøre din webside helt din egen.

screenshot

Du kan ændre farverne, som du bruger på din webside, og du kan også benytte skrifttyper (fonte) såsom Arial, Comic Sans MS, Impact og Tahoma.

Hvis du har brug for mere hjælp, så tag et kig på ‘Tillykke Med Fødselsdagen’ projektet - det kan hjælpe dig.

Gem dit projekt

Trin 3: Fortæl din historie

Lad os tilføje en ‘del 2’ til din historie.

Arbejdsliste

  • Gå til linje 17 i din kode, og tilføj endnu et <div> start -og </div> slut tag. Så får du en ny boks til næste del af din historie.

screenshot

  • Tilføj en tekstparagraf indeni dit nye <div> tag.

screenshot

  • Endelig kan du tilføje et billede til din nye boks ved at indsætte følgende kode i dit <div> tag:
    <img src=""> 

Læg mærke til at <img> tags er en smule anderledes end andre tags, da de ikke har et slut tag.

  • Med hensyn til HTML billeder skal du tilføje kilden til billedet imellem anførselstegnene. Lad os finde et billede, som vi kan føje til din historie.

Gå til jumpto.cc/web-images, og vælg et billede som du har lyst til at få med i din historie.

  • Højreklik på billedet og klik dernæst ‘Kopier billedets webadresse’. Webadressen (URL) er adressen på dit billede.

screenshot

  • Indsæt adressen imellem anførselstegnene i dit <img> tag. Nu bør du se, at dit billede vises!

screenshot

  • Hvis du har en Trinket konto, så kan du også uploade dine egne billeder til din webside. Klik på billedikonet øverst i din trinket, og klik så på ‘upload’.

screenshot

  • Find dit billede på din computer, og slæb det ind i din trinket.

screenshot

  • Nu kan du så tilføje navnet på dit nye billede imellem anførselstegnene i dit <img> tag på denne måde:
    <img src="buildings.png">

Gem dit projekt

Udfordring: Fortsæt!

Brug det du har lært i dette projekt til at færdiggøre din fortælling! Her er et eksempel:

screenshot

Gem dit projekt