HTML for Kids · Lektion

Multimedia: Videos und Audio hinzufügen

Binden Sie Videos und Audiodateien in Ihre Webseite ein

Lektion 4 von 410 Schritte

Multimedia: Videos und Audio hinzufügen ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.

Inline-Styles: Einfache Gestaltung zu Ihrem HTML hinzufügen

Willkommen in der Welt der Gestaltung! Heute lernen Sie, wie Sie mithilfe von Inline-Styles das Erscheinungsbild von Elementen auf Ihrer Webseite ändern. Inline-Styles sind eine einfache und schnelle Möglichkeit, Ihre Seite ansprechender zu gestalten.

Was sind Inline-Styles?

Mit Inline-Styles können Sie CSS (Cascading Style Sheets) direkt auf ein HTML-Element anwenden, indem Sie das Attribut style verwenden.

Beispiel:

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

Dadurch wird eine rote Überschrift angezeigt. Sehen wir uns an, wie das funktioniert!

Textfarbe ändern

Mit der Eigenschaft color im Attribut style können Sie die Textfarbe ändern.

Beispiel:

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

Schriftgröße ändern

Um die Größe des Textes zu ändern, verwenden Sie die Eigenschaft font-size.

Beispiel:

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

Hintergrundfarbe hinzufügen

Mit der Eigenschaft background-color können Sie einem Element eine Hintergrundfarbe hinzufügen.

Beispiel:

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

Mehrere Styles kombinieren

Sie können mehrere Styles kombinieren, indem Sie sie durch ein Semikolon ; trennen.

Beispiel:

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

Andere Elemente formatieren

Inline-Styles funktionieren bei allen HTML-Elementen, zum Beispiel bei Überschriften, Absätzen und Schaltflächen.

Beispiel:

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

Probieren Sie es selbst aus

Erstellen wir eine Webseite mit Inline-Styles. Hier ist ein Beispiel:

<!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>

Sehr gut!

Herzlichen Glückwunsch! Sie haben gelernt, wie Sie Inline-Styles verwenden, um Ihren Webseiten eine einfache und wirkungsvolle Gestaltung zu verleihen. Inline-Styles eignen sich hervorragend für schnelle Änderungen, aber es gibt noch mehr Möglichkeiten zur Gestaltung! In der nächsten Lektion sehen wir uns die Grundlagen von CSS an, um das volle Potenzial des Webdesigns auszuschöpfen. Machen Sie sich bereit, beeindruckende Webseiten zu erstellen!

Multimedia: Videos und Audio hinzufügen — Illustration 10

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 16
Lektionen: 35

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Multimedia: Videos und Audio hinzufügen“ kostenlos?

Ja — der vollständige Text von „Multimedia: Videos und Audio hinzufügen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Multimedia: Videos und Audio hinzufügen“?

Binden Sie Videos und Audiodateien in Ihre Webseite ein Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML for Kids zu starten?

Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Multimedia: Videos und Audio hinzufügen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?

Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu HTML for Kids