HTML for Kids · Lektion

Multimedia: lägg till video och ljud

Bädda in videor och ljudfiler på din webbsida

Lektion 4 av 410 steg

Multimedia: lägg till video och ljud ä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.

Inline-stilar: lägg till enkel formatering i HTML

Välkommen till formateringens värld! I dag lär du dig att använda inline-stilar för att ändra utseendet på element på din webbsida. Inline-stilar är ett enkelt och snabbt sätt att förbättra sidans utseende.

Vad är inline-stilar?

Med inline-stilar kan du tillämpa CSS (Cascading Style Sheets) direkt på ett HTML-element med attributet style.

Exempel:

<h1 style="color: red;">Hello, World!</h1>

Detta visar en röd rubrik. Nu undersöker vi hur det fungerar!

Ändra textfärg

Du kan ändra textens färg med egenskapen color i attributet style.

Exempel:

<p style="color: blue;">This is blue text.</p>

Ändra teckenstorlek

Om du vill ändra textens storlek använder du egenskapen font-size.

Exempel:

<p style="font-size: 20px;">This text is 20 pixels large.</p>

Lägga till bakgrundsfärg

Du kan lägga till en bakgrundsfärg på ett element med egenskapen background-color.

Exempel:

<p style="background-color: yellow;">This text has a yellow background.</p>

Kombinera flera stilar

Du kan kombinera flera stilar genom att skilja dem åt med ett semikolon ;.

Exempel:

<p style="color: white; background-color: black; font-size: 18px;">
  This text has multiple styles applied!
</p>

Formatera andra element

Inline-stilar fungerar på alla HTML-element, till exempel rubriker, stycken och knappar.

Exempel:

<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: lightblue; border: none; padding: 10px;">
  Styled Button
</button>

Prova själv

Nu ska Ni skapa en webbsida med inline-stilar. Här är ett exempel:

<!DOCTYPE html>
<html>
  <head>
    <title>Inline Styles Example</title>
  </head>
  <body>
    <h1 style="color: purple;">Welcome to My Styled Page</h1>
    <p style="color: gray; font-size: 16px;">
      This paragraph has styled text.
    </p>
    <button style="background-color: coral; color: white; padding: 10px;">
      Click Me!
    </button>
  </body>
</html>

Bra jobbat!

Grattis! Ni har lärt Er att använda inline-stilar för att lägga till enkel och effektiv formatering på Era webbsidor. Inline-stilar är ett bra sätt att snabbt göra ändringar, men det finns mycket mer att lära om formatering! I nästa lektion utforskar vi grunderna i CSS för att frigöra webbdesignens fulla potential. Gör Er redo att skapa fantastiska webbsidor!

Multimedia: lägg till video och ljud — illustration 10

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Multimedia: lägg till video och ljud” gratis?

Ja – hela texten till ”Multimedia: lägg till video och ljud” 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 ”Multimedia: lägg till video och ljud”?

Bädda in videor och ljudfiler 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 ”Multimedia: lägg till video och ljud”?

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

← Tillbaka till HTML for Kids