Bilder
Teil des Abschnitts Fundamentals der HTML-Journey von Coddy — Lektion 23 von 60.
Bilder können Ihre Webseite ansprechender gestalten, und das Hinzufügen in HTML ist mit dem <img>-Tag ganz einfach. Das <img>-Tag ist selbstschließend, was bedeutet, dass es kein schließendes Tag benötigt.
Um ein Bild anzuzeigen, müssen Sie das src-Attribut 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>, benötigen kein schließendes Tag. Sie enden mit /> und werden für Elemente verwendet, die keinen Inhalt haben.
Aufgabe
EinfachFüge ein Bild zum HTML-Dokument hinzu, du kannst die URL aus dem Beispiel in der Lektion oder jede andere URL verwenden.
Stelle sicher, dass du ein Bild siehst!
Spickzettel
Der <img> Tag zeigt Bilder an und ist selbstschließend (kein End-Tag erforderlich):
<img src="https://coddy.tech/images/bit.svg" />Das src Attribut gibt den Speicherort des Bildes an (URL oder Dateipfad). Selbstschließende Tags enden mit />.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Fundamentals
2Text und Formatierung
ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung8Formulare und Eingaben Teil 1
Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular11Event-Registrierungsseite
ProjektübersichtHeader-Bereich
Event-Details-BereichRegistrierungsformularFooter-Bereich6Seitenlayout
Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout9Formulare und Eingaben Teil 2
Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #212Abschlussherausforderungen
Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-Liste