Bilder: lägg till bilder på sidan
Infoga och formatera bilder på din webbsida
Bilder: lägg till bilder på sidan är en gratis lektion i HTML for Kids på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för HTML for Kids, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML for Kids innehåller totalt 4 lektioner.
Bilder: lägg till bilder på sidan
Välkommen till nästa lektion! I dag lär du dig att lägga till bilder på dina webbsidor. Bilder gör sidorna mer engagerande och roliga!
Vad är bilder i HTML?
Bilder läggs till på webbsidor med taggen <img>. Det här är en självstängande tagg, vilket innebär att den inte behöver någon sluttagg som </img>.
Nu lär vi oss hur den används!
Lägga till en bild
Om du vill lägga till en bild använder du attributet src för att ange bildfilens plats.
Exempel:
I det här exemplet:
src: Anger bildfilen.alt: Tillhandahåller alternativ text om bilden inte kan visas.
<img src="https://www.w3.org/html/logo/img/html5-display.png"
alt="A beautiful view" />
Alternativ text (attributet alt)
Attributet alt beskriver bilden. Det är viktigt för tillgängligheten och hjälper sökmotorer att förstå bilden.
Exempel:
Om bilden inte kan läsas in visas texten "En vacker solnedgång över havet" i stället.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />
Lägga till bildmått
Du kan styra bildens storlek med attributen width och height.
Exempel:
I det här exemplet anges bildens bredd till 300 pixlar och höjden till 200 pixlar.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />
Länka bilder
Du kan göra en bild till en klickbar länk genom att placera den i en tagg av typen <a>.
Exempel:
När du klickar på bilden skickas användaren till https://example.com.
<a href="https://example.com">
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>
Använda bilder online
Du kan använda bilder som finns på internet genom att ange deras URL i attributet src.
Exempel:
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />
Prova själv
Nu skapar vi en enkel webbsida med bilder. Här är ett exempel:
<!DOCTYPE html>
<html>
<head>
<title>My Image Page</title>
</head>
<body>
<h1>Welcome to My Gallery</h1>
<img src="cat.jpg" alt="A cute cat" width="400" />
<p>This is my adorable cat!</p>
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
<p>This is a friendly dog from the internet!</p>
</body>
</html>
Bra jobbat!
Grattis! Du har lärt dig att lägga till bilder på dina webbsidor, ange deras mått och till och med länka dem till andra sidor. Bilder gör webbsidor mer intressanta och visuellt tilltalande. I nästa lektion lär du dig att skapa tabeller för att organisera data. Gör dig redo att göra dina sidor ännu mer funktionella!
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 16
- Lektioner
- 35
Vanliga frågor
Är lektionen ”Bilder: lägg till bilder på sidan” gratis?
Ja – hela texten till ”Bilder: lägg till bilder på sidan” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i HTML for Kids, kan Ni uppgradera till CoddyKit PRO. Kursen i HTML for Kids innehåller totalt 4 lektioner.
Vad lär jag mig i ”Bilder: lägg till bilder på sidan”?
Infoga och formatera bilder på din webbsida Ni övar på HTML for Kids med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML for Kids?
Du behöver inga förkunskaper. Utbildningen i HTML for Kids på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Bilder: lägg till bilder på sidan”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML for Kids-lektionen?
Ja. Varje HTML for Kids-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Rubriker och stycken
- Listor: ordnade och oordnade
- Länkar: så kopplas webben samman
- Bilder: lägg till bilder på sidan