HTML-attribut
Förstå hur du lägger till extra information i dina element med attribut
HTML-attribut är en gratis lektion i HTML for Kids på CoddyKit. Detta är lektion 3 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.
Multimedia: lägg till video och ljud
Välkommen till nästa lektion! I dag lär du dig att lägga till video och ljud på dina webbsidor. Multimedia gör sidorna mer interaktiva och roliga!
Varför lägga till multimedia?
Video och ljud kan göra dina webbsidor:
- Mer engagerande
- Informativa och roliga
- Interaktiva
Nu lär vi oss att lägga till dem med HTML!
Lägga till en video
Video läggs till med taggen <video>. Du kan ange videofilen med attributet src.
Exempel:
I det här exemplet:
src: Anger videofilen.controls: Lägger till kontroller för uppspelning, paus och volym.width: Anger videons bredd.
<video src="example.mp4" controls width="400"></video>
Lägga till flera videoformat
Alla webbläsare har inte stöd för samma videoformat. Du kan inkludera flera källor med taggen <source>.
Exempel:
<video controls width="400">
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Lägga till ljud
Ljud läggs till med taggen <audio>. Du kan ange ljudfilen med attributet src.
I det här exemplet:
src: Anger ljudfilen.controls: Lägger till kontroller för uppspelning, paus och volym.
<audio src="example.mp3" controls></audio>
Lägga till flera ljudformat
Precis som för video kan du inkludera flera ljudkällor för bättre kompatibilitet med webbläsare.
Exempel:
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
Automatisk uppspelning och loop
Du kan få video och ljud att spelas upp automatiskt eller loopas genom att lägga till attributen autoplay och loop.
Exempel:
Obs! Automatisk uppspelning kan vara inaktiverad i vissa webbläsare av hänsyn till användarupplevelsen.
<audio src="example.mp3" autoplay loop></audio>
Bädda in YouTube-videor
Du kan bädda in YouTube-videor på sidan med taggen <iframe>.
Exempel:
Ersätt example med videons unika ID.
<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
Bra jobbat!
Grattis! Du har lärt dig att lägga till video, ljud och till och med YouTube-inbäddningar på dina webbsidor. Multimedia gör innehållet mer dynamiskt och engagerande. I nästa lektion går vi igenom formatering med CSS för att få dina webbsidor att se fantastiska ut. Gör dig redo att utforska designens värld!
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 ”HTML-attribut” gratis?
Ja – hela texten till ”HTML-attribut” 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 ”HTML-attribut”?
Förstå hur du lägger till extra information i dina element med attribut 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 3 av 4.
Hur lång tid tar lektionen ”HTML-attribut”?
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
- Tabeller: organisera data
- Formulär: samla in användarinddata
- HTML-attribut
- Multimedia: lägg till video och ljud