Webteknologi - Opgaver HTML - modul 1

Opgave 1 - Skriv noget HTML

Lav en ny tekstfil i vscode der hedder index.html. Find eksemplet fra dagens præsentation og kopier indholdet ind i index.html. Åben index.html i din browser (gerne Chrome). Ser det rigtigt ud? Kan du se indholdet?

Din opgave er nu at ændre i HTML’en så siden kommer til at se ud som på billedet herunder. Du kan finde en liste af mulige tags på https://www.w3schools.com/tags/default.asp. Der skulle gerne være nogle “list” tags imellem. Klik på dem for at se eksempler.

Opgave 2 - Anchor

Lav ændringer i HTML’en fra sidste opgave, så hver kat i listen nu er et link til en relevant wikipedia-artikel. Her skal du bruge et anchor tag.

Opgave 3 - Tabeller med billeder

I denne opgave skal du lave en html-side med en tabel på. Læs mere om hvordan man laver tabeller i html på http://www.w3schools.com/html/html_tables.asp

Du vælger selv indholdet. Det kunne fx være en tabel af pokemon’er (name, type, generation) eller hvad du nu lige synes.

I hver række af tabellen skal der også være et relevant billede, fx et billede af en pokemon. Find billederne på nettet og gem dem i samme folder som din html-fil. Brug <img> tagget til at indsætte billedet i tabellen.

Opgave 4 - Flere sider

Nu skal du opdele din side i flere undersider. Lav mindst tre undersider og lad siden fra sidste opgave være udgangspunktet for din hovedside.

Når man klikker på et af billederne i din tabel fra sidste opgave, skal den åbne en ny HTML-side med indhold der er specifikt for det pågældende billede. Hvis det er pokemoner, kunne det fx være et større billede og en mere detaljeret tekst som beskriver den pågældende pokemon. Fra hver side skal du også lave et link der peger tilbage på hovedsiden.

Opgave 5 - JavaScript-eksempel

I denne opgave får du en forsmag på JavaScript. Du skal ikke selv skrive det. Indsæt istedet følgende kode på en af dine HTML-sider.

Under <head> skal du tilføje følgende tag:

<script>
  function changeColor() {
    document.body.style.backgroundColor = "#e3bad1";
  }
</script>

Og under <body> skal du tilføje følgende tag (det er en knap):

<button onclick="changeColor()">Tryk mig!</button>

Genindlæs din side og tryk på knappen!

Prøv at lave ændringer i <script>-tagget så farven skifter til din favorit baggrundsfarve i stedet! Google har en “color picker” du kan bruge.

Opgave 6 - CSS

Vi slutter af med at prøve noget CSS. Herunder er et eksempel på noget styling. Tag hele <style>-tagget og indsæt det under <head> i en af dine HTML-sider.

<style>
  h1, h2 {
    background-color: rgb(167, 66, 53);
    color: rgb(161, 235, 167);
  }

  body {
    background-color: rgb(207, 196, 175);
    margin: 50px;
  }
</style>

Kan du gennemskue hvordan det her CSS fungerer? Prøv at svare på følgende spørgsmål:

Hvad sker der hvis du ændrer i en af de to background-color og genindlæser siden? Prøv med forskellige tal og se hvad der sker.
Hvad sker der hvis du ændrer på tallet efter margin?
Hvad hvis du ændrer i color?
Hvad er forskellen på de to background-color? Hvilke dele af din HTML bliver påvirket? ’

“color” og “background-color” er eksempler på det man kalder “properties” i CSS. Der findes mange flere en dem der er vist i eksemplet. Prøv om du kan tilføje en ny property så dine h1 og h2-overskrifter får en tyk kant med prikker omkring sig. Du kan se et eksempel her: https://www.w3schools.com/css/css_border_width.asp

Prøv på egen hånd at finde yderligere nogle properties du kan tilføje til body eller h1, h2 i eksemplet. Du kan finde mange flere eksempler inde på w3schools. Udfordring: Kan du bruge CSS til at vælge en anden font til din tekst? Kan du tilføje en Google font med ild omkring teksten?