HTML ÖVNINGAR

Del 1 – Sätta upp din programmeringsmiljö
  • 1. Gå till Codepen.io
  • 2. Tryck på Start Coding
  • 3. Förminska rutan som har CSS som rubrik genom att trycka på Pilen och tryck sedan på minimize CSS editor
  • 4. Förminska rutan som har JS som rubrik genom att trycka på pilen och sedan “Minimize Javascript Editor”
Del 2 – Din första HTML kod
  • 1. Skapa 6 olika rubriker i olika storlekar. Använd <h1> tom <h6> taggar.

  • 2. Innanför <h1> taggen vill vi att du skriver ditt namn. Innanför <h2> kan du skriva något om dig själv och inom <h3> så kan du skriva vad du har för intresse. Inom de andra taggarna kan du skriva vad du vill.

  • 3. Skapa 3 olika <p> taggar. En av dessa paragrafer skall innehålla text om dig själv. Den här texten kan du ändra vid ett senare tillfälle – fokus är att lära dig att förstå hur koden fungerar.

  • 4. I en av dina <p> taggar, se vad som händer om du väljer att skriva <em></em> runt ett ord.

  • 5. Försök att använda <strong></strong> runt ett annat ord i din <p> tagg – får du samma resultat som i övning 4?

Del 3 – Bilder och länkar
  • 1. Lägg till en länk <a>. Du kan länka till vilken sida du vill. Kanske någon av de sidorna du oftast besöker?

  • 2. Lägg till en bild i din HTML-KOD. Använd <img> taggen när du lägger till bilder. Den här taggen kan vara lite svår – så blir det inte rätt första gången – försök igen!

  • TIPS! För att lägga till en bild behöver den finnas “online”, så om du googlar en bild på Google – Välj “View Image” -Högerklicka på bilden för att hitta bildens adress och kopiera den och lägg in under src.

  • 3. Skapa en <div> och flytta din <h2> så den ligger innaför <div> taggarna. Ser du någon skillnad?

  • 4. Lägg till 4 olika bilder

  • 5. Nu så ska du göra så att 2 av bilderna i övning 4 går att trycka på – dvs när du trycker på bilden så skall du komma till en ny sida. Ledtråd: du behöver använda både <img> och <a> elementen för att lyckas med den här uppgiften.

Haja kod logo

OM OSS

HAJA KOD introducerar programmering och digitalt skapande för barn och vuxna.

KONTAKT

Ingenjörsgatan 9
411 19 Göteborg
[email protected]

Haja kod logo

© Copyright 2020