Bilder

Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 23 von 60.

Bilder können deine Webseite ansprechender gestalten, und sie in HTML hinzuzufügen ist mit dem Tag <img> ganz einfach. Das Tag <img> ist selbstschließend, das heißt, es benötigt kein schließendes Tag.

Um ein Bild anzuzeigen, musst du das Attribut src verwenden. Dieses Attribut gibt den Speicherort des Bildes an (URL oder Dateipfad). Hier ist ein Beispiel:

<img src="https://coddy.tech/images/bit.svg" />

In diesem Beispiel lädt der Browser das Bild von der URL https://coddy.tech/images/bit.svg und zeigt es an.

Selbstschließende Tags wie <img> werden für Elemente verwendet, die keinen Inhalt haben und daher kein schließendes Tag besitzen. In HTML5 ist der Schrägstrich am Ende optional: <img src="bit.svg"> und <img src="bit.svg" /> sind beide gültig. In diesem Kurs wird /> verwendet.

Aufgabe

Einfach

Füge dem HTML-Dokument ein Bild hinzu. Du kannst die URL aus dem Beispiel in der Lektion oder eine beliebige andere URL verwenden.

Achte darauf, dass du ein Bild siehst!

Probier es selbst

<!DOCTYPE html>
<html>
    <body>
        <!-- Schreibe hier Code -->
    </body>
</html>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Grundlagen

1HTML-Grundlagen

Was ist HTML?Grundstruktur von HTML Tags und Elemente Verschachtelung und schließende Tags Kommentare in HTML

4Rezeptkarte

Projektübersicht Rezepttitel und Beschreibung

Zutaten

Schritte

7Persönliche Profilseite

Projektübersicht Header-Bereich

Profilbild

Über-mich-Bereich

Social Links

10Tabellen

Tabellen-Grundlagen Beschriftungen hinzufügen Zeilen und Spalten verbinden Zusammenfassung - Tabellen

2Text und Formatierung

Überschriften Absätze Zeilenumbrüche Fetter und kursiver Text Nochmals fett und kursiv Wiederholung – Formatierung

5Inhalte hinzufügen

HTML-Attribute Links Links zu neuen SeitenBilderBild-Attribute

8Formulare und Eingaben Teil 1

Formular-Grundlagen Texteingaben Input-Attribute Passwortfeld Labels für Eingaben Zusammenfassung – Einfaches Formular

11Event-Registrierungsseite

Projektübersicht Header-Bereich

Event-Details-Bereich

Registrierungsformular

Footer-Bereich

3Arbeiten mit Listen

Ungeordnete Liste Geordnete Liste Verschachtelte Listen Zusammenfassung – Listen

6Seitenlayout

Bereiche (Divisions)Inline-Spans Semantische Tags Sections und Articles Zusammenfassung – Layout

9Formulare und Eingaben Teil 2

Radio-Buttons Checkboxen Dropdowns Buttons Buttons in Formularen Wiederholung - Formulare #1 Wiederholung - Formulare #2

12Abschlussherausforderungen

Einfache Profilkarte Event-Einladungskarte Einfache Artikelseite Lieblingsbücher-Liste

Übe selbstständig: Web-Playground