Övningar HTML

Del 1 – Sätta upp din programmeringsmiljö

För att kunna börja programmera och skriva HTML kod så behöver vi sätta upp verktyget Visual Studio Code på rätt sätt. Har ni använt det sedan tidigare så tryck på knappen “VSC guide” så visar vi steg för steg hur du kan göra för att ladda ner programmet.

Har du redan laddat ner verktyget sedan innan så kan du gå till punkt 4 i VSC Guide och följa instruktionerna för att sätta upp allt på rätt sätt. När du följt alla stegen är du redo att börja skriva HTML kod.

Del 2.0 – HTML övningar 

Nu är det dags att testa på att skriva er första kod. Det viktigaste är att du skriver all kod mellan body-taggarna precis som bilden visar till vänster.

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 som intresse. Inom de andra taggarna kan du skriva vad du vill.

3 – Fortsätt att testa på HTML koden som du precis har lärt dig. 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 2.1 – HTML övningar

1 – Lägg till en länk, <a>. Du kan länka till vilken sida du vill. Kanske någon av dina mest besökta sidor på nätet?!

2 – Försök att lägga till en bild i din HTML-KOD. Använd 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 –

Redan klar? Extra uppgifter

1 – Google som verktyg är väldigt viktigt för utvecklare. Nu ska vi se hur bra ni är på att googla – Googla <style> taggen. Hur tror ni att vi kan använda den i vår kod? Vad används taggen till?

2 – Googla “HTML tags” så hittar ni en lista med olika HTML taggar. Testa på att använda dessa i din kod. Hittar du någon favorit?

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