HTML ÖVNINGAR

Del 1 – Sätta upp din programmeringsmiljö
  • 1. Gå till Codepen.io
  • 2. Tryck på Logga in – den gråa knappen som du hittar till höger på sidan. (Se bild om du är osäker.)
  • 3. Fyll i dina uppgifter och tryck på den stora gröna knappen Logga in.
  • 4. Nu kommer det upp en meny till vänster där trycker du på “Pen”. Då kommer du få upp en helt tom “penna” och det är i HTML-rutan vi ska skriva all vår HTML-kod. (Se bild)
  • 5. För att det ska bli enklare att se vad vi gör så – förminska rutan som har CSS som rubrik genom att trycka på Pilen och tryck sedan på minimize CSS editor
  • 6. Förminska även rutan som har JS som rubrik genom att trycka på pilen och sedan “Minimize Javascript Editor”.
  • 7. Bra jobbat! Nu kan du scrolla ner till Del 2 – Din första HTML kod.
Del 2 – Din första HTML kod
  • Nu när du ska börja skriva dina första rader kod så kommer du att skriva all kod i rutan som har HTML som rubrik. För att du ska kunna se om det fungerar kommer du få upp en förhandsvisning längst ner på sidan. Först är den delen svart, men så fort du börjar skriva kod kommer den rutan att få en vit bakgrund. Se bild.
  • 1. Skapa en rubrik med hjälp av <h1> taggarna och skriv rubriken du vill ha på din hemsida mellan de två taggarna. Glöm inte att öppnings och stängingstaggen ser lite olika ut.
  • 2. Skapa en <h3> rubrik occh skriv kort vad din hemsida ska handla om. Kanske kommer din egna hemsida att handla om ditt husdjur, en favoritsport, din familj, om dig själv eller något annat du tycker är roligt.
  • 3. Skapa 3 stycken olika <p> taggar. Dessa tre paragrafer ska innehålla något du tycker ska finnas med på hemsidan. Har du valt att skriva om ditt husdjur kanske du gör en paragraf med ditt djurs leksaker och en annan med ditt djurs favoritlekar. Kom ihåg, skriv om något du tycker är roligt!
Har du redan hunnit klart? Spana in extra uppgifterna nedan.
  • 4. Testa att lägga till <em></em> runt ett ord i en av dina <p> taggar – ser du någon skillnad?
  • 5. Försök nu att göra på samma sätt som i övning 4. Runt ett av dina ord i en av dina <p> taggar sätt <strong></strong> – Ser du någon skillnad mot övning 4?
  • 6. Har du redan hunnit klart med alla övningar? Bravo! Då kan du börja titta på Del 3 som kommer handla om bilder och länkar!
Del 3 – Bilder och länkar
  • 1. Lägg till två stycken länkar genom att använda <a> taggarna. Kommer du ihåg att det var lite annorlunda med <a> taggen? Du kan länka till vilka sidor du vill. Kanske någon av de sidorna du gillar eller något som kan ge mer information om vad din hemsida handlar om?! Om du inte kommer ihåg hur man skriver finns det ett exempel till höger på sidan.
Exempel på länk
//Detta är ett kodexempel på hur man skriver en länk i HTML kod.

<a href="https://www.haja-kod.se">Länk till Haja Kod </a>

  • 2. Lägg till minst 2 bilder och för att göra det kommer du behöva använda <img> taggen. Den här kan vara lite klurig, men vi vet att ni kommer klara det! Ett exempel på hur en <img> tag kan se ut ser du till höger.
  • TIPS! För att lägga till en bild i vårt program(Codepen) så behöver den finnas “online”.

    1. Det innebär att om du går in på Google och söker efter en bild, t ex “Söt hund”.

    2.Välj ut bilden du vill ha på din hemsida genom att trycka på den.

    3.När den har kommit upp i ett större format till höger så högerklicka på bilden

    4. Välj “Kopiera bild adress”.

    5. När du gjort detta kan du klistra in din länk i <img> taggen. Se kodexemplet till höger om du är osäker.

Exempel på bild
//Här är ett exempel på hur du kan lägga till en bild i din kod
<img src="https://i.pinimg.com/cute-pig.jpg" 
     alt="bild på en söt gris"/>

Extra övningar – Klickbar bild
  • 3. Nu så ska du göra så att 2 st av bilderna i under Del 3 – övning 2 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 – Klickbar bild
//Här är ett exempel på hur du kan göra en bild till en klickbar länk.
<a href="https://www.google.se"><img src="https://i.pinimg.com/cute-pig.jpg" 
                alt="bild på en söt gris"/></a>
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