HTML ÖVNINGAR

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”

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?

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.

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!