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.

Extra Övningar – Starta med inspektorn
  • 1. Börja med att ladda ner lektionsmaterialet nedan, och gå till sidan 22-26. Här kan man steg för steg följa hur man öppnar inspektorn i Google Chrome. Läs igenom och se om du kan öppna inspektorn i Chrome.

  • 2.Inspektorn är uppdelad i flera olika delar. Det finns en del där all HTML-kod finns, som ligger till vänster. Kan du lokalisera några av HTML taggarna vi jobbat med innan, isåfall vilka?
  • 3. Till höger i Inspektorn kan du se CSS-koden som finns – känner du igen några av de attributen som används? Kan du se om de finns några attribut som du inte använt innan?
  • 4. Gå till en valfri sida och öppna inspektorn. OM du nu väljer att trycka på knappen som ser ut som en Mobil och Ipad så kan du testa en hemsida i olika format, dvs t ex mobil, ipad och dator. Testa Mobil, Dator och Ipad, vad är skillnaderna på sidan, ser de olika ut beroende på skärmens storlek?
  • 4. Gör nu samma sak som i övning 3, med 2 nya sidor. Vad ser du för likheter och skillander på stora respektive mindre skärmar? Skriv ner!
Presentationen i PDF
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