Bilder: Bilder zu Ihrer Seite hinzufügen
Fügen Sie Bilder in Ihre Webseite ein und formatieren Sie sie
Bilder: Bilder zu Ihrer Seite 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.
Bilder: Bilder zu Ihrer Seite hinzufügen
Willkommen zur nächsten Lektion! Heute lernen Sie, wie Sie Bilder zu Ihren Webseiten hinzufügen. Bilder machen Ihre Seiten ansprechender und unterhaltsamer!
Was sind Bilder in HTML?
Bilder werden mit dem Tag <img> zu Webseiten hinzugefügt. Dieser Tag ist selbstschließend, das heißt, er benötigt keinen schließenden Tag wie </img>.
Lernen wir, wie Sie ihn verwenden!
Ein Bild hinzufügen
Um ein Bild hinzuzufügen, verwenden Sie das Attribut src, um den Speicherort der Bilddatei anzugeben.
Beispiel:
In diesem Beispiel:
src: Gibt die Bilddatei an.alt: Stellt einen Alternativtext bereit, wenn das Bild nicht angezeigt werden kann.
<img src="https://www.w3.org/html/logo/img/html5-display.png"
alt="A beautiful view" />
Alternativtext (alt-Attribut)
Das Attribut alt beschreibt das Bild. Es ist für die Barrierefreiheit wichtig und hilft Suchmaschinen, Ihr Bild zu verstehen.
Beispiel:
Wenn das Bild nicht geladen wird, wird stattdessen der Text "A beautiful sunset over the ocean" angezeigt.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />
Bildabmessungen hinzufügen
Mit den Attributen width und height können Sie die Größe Ihres Bildes festlegen.
Beispiel:
In diesem Beispiel wird das Bild auf eine Breite von 300 Pixeln und eine Höhe von 200 Pixeln festgelegt.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />
Bilder verlinken
Sie können ein Bild in einen anklickbaren Link umwandeln, indem Sie es innerhalb eines Tags <a> platzieren.
Beispiel:
Wenn auf das Bild geklickt wird, gelangt der Benutzer zu https://example.com.
<a href="https://example.com">
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>
Onlinebilder verwenden
Sie können online gehostete Bilder verwenden, indem Sie ihre URL im Attribut src angeben.
Beispiel:
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />
Selbst ausprobieren
Erstellen Sie eine einfache Webseite mit Bildern. Hier ist ein Beispiel:
<!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>
Großartige Arbeit!
Herzlichen Glückwunsch! Sie haben gelernt, wie Sie Bilder zu Ihren Webseiten hinzufügen, ihre Abmessungen festlegen und sie sogar mit anderen Seiten verknüpfen. Bilder machen Ihre Webseiten interessanter und optisch ansprechender. In der nächsten Lektion lernen Sie, wie Sie Tabellen erstellen, um Daten zu organisieren. Machen Sie sich bereit, Ihre Seiten noch funktionaler zu gestalten!
Häufig gestellte Fragen
Ist die Lektion „Bilder: Bilder zu Ihrer Seite hinzufügen“ kostenlos?
Ja — der vollständige Text von „Bilder: Bilder zu Ihrer Seite 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 „Bilder: Bilder zu Ihrer Seite hinzufügen“?
Fügen Sie Bilder in Ihre Webseite ein und formatieren Sie sie 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 „Bilder: Bilder zu Ihrer Seite 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
- Überschriften und Absätze
- Listen: nummeriert und unnummeriert
- Links: Das Web verbinden
- Bilder: Bilder zu Ihrer Seite hinzufügen