HTML - Bilder: Ein umfassender Leitfaden für Anfänger

Hallo, angehende Web-Entwickler! Heute tauchen wir in die aufregende Welt der HTML-Bilder ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Also nimm deine virtuelle Malerkiste zur Hand und lassen uns unseren Webseiten Farbe verleihen!

HTML - Images

Warum Bilder in HTML verwenden?

Bevor wir uns dem Code widmen, lassen wir uns über die Bedeutung von Bildern im Webdesign unterhalten. Stell dir vor, du gehst in eine Bibliothek, in der alle Bücher nur aus/plain Text bestehen – ziemlich langweilig, oder? Genau so wäre eine Webseite ohne Bilder. Bilder können:

Deine Webseite visuell ansprechend gestalten
Informationen schnell vermitteln
Große Textblöcke unterbrechen
Die Benutzerbindung verbessern
Bei der Markenbildung und Erkennung helfen

Nun, da wir wissen, warum Bilder entscheidend sind, lernen wir, wie man sie verwendet!

Beispiele für HTML-Bilder

Das grundlegende Bild-Tag

Die Grundlage für die Anzeige von Bildern in HTML ist das <img>-Tag. Es ist ein selbstschließendes Tag, was bedeutet, dass es kein separates Schließtag braucht. Hier ist die grundlegende Syntax:

<img src="pfad/zu/deinem/bild.jpg" alt="Bildbeschreibung">

Lassen wir das auseinanderbrechen:

src: Dieses Attribut gibt die Quelle (den Ort) deiner Bilddatei an.
alt: Dies bietet eine alternative Textbeschreibung für das Bild, was für Barrierefreiheit und SEO wichtig ist.

Zum Beispiel, wenn wir ein niedliches Katzenbild anzeigen wollten, könnten wir schreiben:

<img src="cute-cat.jpg" alt="Eine flauschige orangefarbene Tabby-Katze">

Bildabmessungen einstellen

Manchmal möchtest du die Größe deiner Bilder steuern. Dies kannst du mit den Attributen width und height tun:

<img src="big-dog.jpg" alt="Ein großer goldener Retriever" width="300" height="200">

Dies zeigt das Bild in einer Breite von 300 Pixeln und einer Höhe von 200 Pixeln an. Denke daran, dass es in der Regel am besten ist, deine Bilder vor dem Hochladen auf deiner Webseite für optimale Leistung zu verkleinern.

Bildrand einstellen

In den Anfängen des Internets haben wir es geliebt, um alles Rahmen zu machen – es war, als ob man jedes Bild in deinem Haus einrahmt! Heute ist es nicht so verbreitet, aber du kannst immer noch Rahmen um deine Bilder hinzufügen, indem du CSS verwendest. Hier ist wie:

<img src="vintage-car.jpg" alt="Ein glänzender roter Oldtimer" style="border: 2px solid black;">

Dies gibt deinem Bild einen 2-Pixel breiten, festen schwarzen Rand. Probiere verschiedene Rahmengestaltungen und Farben aus!

Bildausrichtung

Die Ausrichtung von Bildern kann dabei helfen, ein organisierteres und visuell ansprechenderes Layout zu erstellen. Während moderne Webdesigns oft CSS dafür verwenden, hat HTML immer noch einige Ausrichtungs选项:

<img src="coffee-mug.jpg" alt="Eine dampfende Tasse Kaffee" align="left">
<pDieser Text wird um das Bild auf der rechten Seite umbrechen.</p>

Das align-Attribut kann Werte wie "left", "right", "top", "bottom" oder "middle" annehmen. Bedenke jedoch, dass dieses Attribut als veraltet gilt und die Verwendung von CSS für die Ausrichtung ist in der Regel empfohlen.

Kostenlose Webgrafiken

Jetzt weiß ich, was du denkst: "Aber Lehrer, wo bekomme ich diese erstaunlichen Bilder her?" Na, das freut mich zu hören! Es gibt viele Websites, die kostenlose, hochwertige Bilder für deine Projekte anbieten. Hier sind einige meiner Favoriten:

Unsplash
Pexels
Pixabay
Freepik
Flaticon (großartig für Symbole!)

Denke daran, immer die Lizenzbedingungen zu überprüfen, bevor du ein Bild auf deiner Webseite verwendest!

Fortgeschrittene Bildtechniken

Responsive Bilder

Als wir uns in fortgeschritteneres Terrain begeben, lassen wir uns über responsive Bilder unterhalten. Diese sind Bilder, die ihre Größe basierend auf der Bildschirmgröße des Benutzers anpassen. Hier ist eine einfache Methode, um deine Bilder responsive zu machen:

<img src="responsive-example.jpg" alt="Ein Beispiel für ein responsives Bild" style="max-width: 100%; height: auto;">

Dieses CSS stellt sicher, dass das Bild niemals breiter als sein Behälter ist und sein Seitenverhältnis beibehält.

Bildkarten

Bildkarten ermöglichen es dir, klickbare Bereiche auf einem einzigen Bild zu erstellen. Es ist, als ob du eine Schatzkarte auf deiner Webseite erstellst! Hier ist ein einfaches Beispiel:

<img src="world-map.jpg" alt="Weltkarte" usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="0,0,82,126" href="north-america.html" alt="Nordamerika">
<area shape="circle" coords="90,58,3" href="europe.html" alt="Europa">
</map>

In diesem Beispiel haben wir klickbare Bereiche für Nordamerika (ein Rechteck) und Europa (einen Kreis) auf einer Weltkartenbild erstellt.

Best Practices für die Verwendung von Bildern in HTML

Um unsere Lektion abzuschließen, lassen wir uns einige Best Practices复查:

Verwende immer das alt-Attribut für Barrierefreiheit und SEO.
Optimiere deine Bilder für den Webgebrauch, um Ladezeiten zu verbessern.
Verwende geeignete Dateiformate (JPG für Fotos, PNG für Grafiken mit Transparenz).
Erwäge die Verwendung von responsiven Bildern für mobilfreundliche Designs.
Verlass dich nicht ausschließlich auf Bilder, um wichtigen Inhalt zu vermitteln.

Zusammenfassung der bildbezogenen HTML-Attribute

Attribut	Beschreibung	Beispiel
src	Gibt den Pfad zum Bild an	`src="bild.jpg"`
alt	Bietet eine alternative Textbeschreibung	`alt="Eine Beschreibung"`
width	Setzt die Breite des Bildes	`width="300"`
height	Setzt die Höhe des Bildes	`height="200"`
align	Gibt die Ausrichtung des Bildes an	`align="left"`
usemap	Gibt an, dass ein Bild als Client-seitige Bildkarte verwendet wird	`usemap="#mapname"`

Und das ist es, zukünftige Web-Zauberer! Du bist jetzt mit dem Wissen ausgestattet, um deine Webseiten mit augenblicksfangenden Bildern zu bestreuen. Erinnere dich daran, ein Bild ist tausend Worte wert, aber in der Webentwicklung ist es tausend Zeilen Code wert! Frohes Coden und möge deine Websites stets visuell atemberaubend sein!

Credits: Image by storyset