Grundlagen zum Erstellen eines Bildes in HTML - Handbuch mit Beispielen

Einbetten von Bildern in HTML

Der erste Weg besteht darin, das Tag zu verwenden . Es ermöglicht Ihnen, ein Bild einer Seite hinzuzufügen, indem Sie den Pfad zur Bilddatei angeben. Zum Beispiel:

Die zweite Methode besteht darin, den Hintergrund in CSS zu verwenden. Sie können ein Bild als Hintergrund für ein bestimmtes Element oder eine ganze Seite festlegen. Zum Beispiel:

Die dritte Methode besteht darin, das Bild mithilfe der Base64-Codierung in den HTML-Code selbst einzufügen. Dazu müssen Sie das Bild im base64-Format codieren und es als Wert des src-Attributs des Tags festlegen . Zum Beispiel:

In HTML können Sie das Element auch zum Erstellen von Bildern und Bildern verwenden. Mit diesem Element können Sie einfache grafische Elemente zeichnen, einschließlich Linien, Kurven und Text.

Sie können die Bildgrößen mithilfe der Attribute width und height für das Tag festlegen , oder verwenden Sie die CSS-Eigenschaften width und height für Elemente mit einem Hintergrundbild oder einer Zeichnung.

Die wichtigsten Tags für die Arbeit mit Bildern

Für die Arbeit mit Bildern in HTML werden mehrere grundlegende Tags verwendet:

• : Dieses Tag wird verwendet, um Bilder in eine Webseite einzufügen. Es hat Attribute wie src (Bildreferenz), alt (alternativer Text, der angezeigt wird, wenn das Bild nicht geladen werden kann) und width / height (Breite /Höhe des Bildes). Ein Beispiel:

• und : Diese Tags werden zusammen verwendet, um eine Bildbeschriftung zu erstellen. Das Tag umrahmt das Bild und das Tag enthält den Text der Beschriftung. Ein Beispiel:

• und : Diese Tags werden verwendet, um interaktive Bilder zu erstellen, auf die geklickt und Informationen abgerufen werden können. Ein Tag definiert einen Bereich und ein Tag definiert einen bestimmten Bereich innerhalb eines Bildes. Ein Beispiel:

>

• und : Diese Tags werden verwendet, um Vektorbilder mit der SVG-Markupsprache zu erstellen. Das Tag erstellt einen Container für das Vektorbild, und das Tag definiert die Form und den Stil der Kontur für das Bild. Ein Beispiel:

Dies sind nur einige der wichtigsten Tags, die Sie zum Arbeiten mit Bildern in HTML verwenden können. Durch die Kombination dieser Tags und das Experimentieren mit Attributen können Sie eine Vielzahl von Effekten und Funktionen für Bilder auf Webseiten erstellen.

Attribute für die Arbeit mit Bildern

Es gibt mehrere Attribute in HTML, mit denen Sie die Anzeige von Bildern auf einer Webseite flexibler anpassen können. Betrachten wir einige von ihnen:

Dies sind nur einige der Attribute, die Sie für die Arbeit mit Bildern in HTML verwenden können. Mit diesen können Sie attraktivere und informativere Webseiten erstellen.

Positionieren und Ausrichten von Bildern

Um Bilder auf einer Webseite korrekt anzuzeigen, müssen Sie in der Lage sein, sie richtig zu positionieren und auszurichten. Auf diese Weise können Sie die Anordnung der Bilder innerhalb des Containers steuern und deren Proportionen beibehalten.

Sie können Attribute verwenden, um ein Bild innerhalb eines Containers zu positionieren align und float. Attribut align wird dem Tag hinzugefügt und ermöglicht es Ihnen, das Bild in der Mitte, links oder rechts innerhalb des Containers auszurichten. Attribut float wird dem Tag hinzugefügt und ermöglicht es Ihnen, das Bild am linken oder rechten Rand des Containers auszurichten und um den Text zu wickeln.

Um beispielsweise ein Bild zentriert auszurichten, verwenden Sie das Attribut align="center":

Um ein Bild nach links auszurichten, verwenden Sie das Attribut align="left":

Und um das Bild nach rechts auszurichten, verwenden Sie das Attribut align="right":

Wenn Sie Text umbrechen möchten, verwenden Sie das Attribut float und geben Sie den gewünschten Wert an: float="left" zur Linksausrichtung und float="right" zur rechten Ausrichtung:

Sie können auch CSS-Eigenschaften verwenden, um ein Bild auszurichten. Fügen Sie dazu dem Tag eine Klasse oder ID hinzu und legen Sie die gewünschten Stile fest.

Jetzt wissen Sie, wie Sie Bilder in HTML positionieren und ausrichten können!

Erstellen von Bildlinks

In diesem Beispiel wird der Benutzer, wenn er auf ein Bild klickt, an den angegebenen Link weitergeleitet.

Sie können dem Bildlink auch das Attribut target="_blank" hinzufügen, um das Bild in einem neuen Tab zu öffnen:

Wenn Sie auf ein Bild klicken, wird es in einem neuen Browser-Tab geöffnet.

Sie können auch Links zu Bildern mithilfe einer Liste erstellen:

In diesem Beispiel wird eine Liste mit zwei Elementen erstellt, die jeweils einen Verweis auf ein einzelnes Bild enthalten.

Sie können diese Bildlinks überall auf der Webseite erstellen, um dem Benutzer die Möglichkeit zu geben, die Bilder auf bequeme Weise anzuzeigen.

Alternative Texte für Bilder

Die korrekte Verwendung alternativer Texte hat mehrere Vorteile. Erstens hilft es Menschen mit eingeschränkter Wahrnehmung, wie Sehbehinderten oder Blinden, den Inhalt eines Bildes zu verstehen und Informationen auf einer Webseite zu suchen und zu organisieren.

Wenn Sie alternative Texte schreiben, sollten Sie sich an einige einfache Regeln halten. Erstens muss der alternative Text klar und beschreibend sein. Es muss die Informationen, die auf dem Bild enthalten sind, genau übertragen. Anstatt beispielsweise den alternativen Text "Bild" zu verwenden, ist es besser, Text zu verwenden, der beschreibt, was ein Bild ist, z. B. "Die Person, die das Tablet benutzt".

Zweitens sollte der alternative Text nicht zu lang sein. Es sollte kurz genug sein, um das Wesen des Bildes schnell und genau zu vermitteln. Verwenden Sie nur Schlüsselwörter und Phrasen, um das Hauptmotiv oder die Handlung des Bildes zu beschreiben.

Schließlich sollten Sie vermeiden, alternative Texte zu verwenden, die wie Stubs oder Platzhalter aussehen. Die Verwendung des alternativen Textes "Kein Bild gefunden" oder "Bild wird geladen" nützt beispielsweise für Benutzer mit Behinderungen keinen Nutzen. Es ist besser, den Inhalt eines Bildes zu beschreiben, nicht seine Verfügbarkeit oder seinen Zustand selbst.

Mithilfe von korrekt geschriebenen alternativen Texten können Sie die Verfügbarkeit der Webseite für alle Benutzer verbessern und Suchmaschinen dabei helfen, den Inhalt der Seite besser zu verstehen und zu indizieren. Daher sollten Sie sich immer Zeit und Aufmerksamkeit widmen, um informative und beschreibende alternative Texte für Ihre Bilder zu erstellen.

Optimieren von Bildern für schnelles Laden

Hier sind einige Möglichkeiten, Bilder zu optimieren:

1. Verwenden Sie die richtigen Formate

Die Auswahl des richtigen Bildformats ist ein wichtiger Schritt bei der Optimierung. Es wird empfohlen, für Fotos ein JPEG-Format zu verwenden, das eine gute Bildqualität bei einer akzeptablen Dateigröße bietet. Bei Illustrationen, Symbolen und transparenten Bildern handelt es sich um PNG– oder GIF-Formate.

2. Auswahl der Auflösung

3. Verwenden Sie Komprimierung

Kompression - dies ist eine Methode, um die Dateigröße zu reduzieren, ohne die Bildqualität zu verlieren. Es gibt verschiedene Werkzeuge zum Komprimieren von Bildern, z. B. TinyPNG oder Kraken. Verwenden Sie diese, um Dateien auf die optimale Größe zu komprimieren.

4. Aufteilen von Bildern in mehrere Dateien

Wenn Sie mehrere Bilder auf der Seite haben, versuchen Sie, sie in separate Dateien aufzuteilen. Auf diese Weise können Sie die Größe der heruntergeladenen Dateien reduzieren und sie parallel laden, um die Gesamtladezeit der Seite zu verbessern.

Durch die korrekte Optimierung der Bilder können Sie die Benutzererfahrung verbessern und das Laden der Webseite beschleunigen. Verwenden Sie die oben beschriebenen Methoden, um ein schnelles Laden und eine effektive Nutzung der Bilder auf Ihrer Website zu erreichen.

Beispiele für die Verwendung von Bildern in HTML

Das Erstellen eines Bildes in HTML ist einfach - Sie müssen ein Tag verwenden und geben Sie das src-Attribut an, das die Quelle des Bildes angibt. Hier ist ein Beispiel für die Verwendung eines Bildes:

Das src-Attribut gibt den Pfad zur Bilddatei an, und das alt-Attribut gibt alternativen Text an, der angezeigt wird, wenn das Bild nicht geladen werden kann.

Sie können auch die Bildgrößen mithilfe der Attribute width und height festlegen:

Es wird jedoch empfohlen, CSS zum Festlegen der Bildgrößen zu verwenden, um eine flexiblere und anpassungsfähigere Webseite zu ermöglichen.

Bilder können auch Links zu anderen Seiten oder Dateien sein. Um dies zu tun, müssen Sie das Tag umbrechen in das Tag und geben Sie das href-Attribut mit der URL an:

Wenn Sie also auf ein Bild klicken, wird der Benutzer auf die angegebene Seite oder Datei umgeleitet.

Hier sind einige Beispiele für die Verwendung von Bildern in HTML, die beim Erstellen von Webseiten hilfreich sein können:

1. Website-Logo:

2. Illustration zum Text:

3. Foto des Autors:

4. Symbol für soziale Netzwerke:

Die Verwendung von Bildern in HTML hilft, die visuelle Wahrnehmung und die Benutzererfahrung auf einer Webseite zu verbessern. Vergessen Sie nicht, die Größe und Qualität der Bilder zu optimieren, um das Laden der Seite zu beschleunigen und die Leistung zu verbessern.