Schau dir irgendwas an Website heute online und Sie werden feststellen, dass sie bestimmte Dinge gemeinsam haben. Eine dieser gemeinsamen Eigenschaften sind Bilder. Die richtigen Bilder tragen so viel zur Präsentation einer Website bei. Einige dieser Bilder, wie das Logo eines Unternehmens, helfen dabei, die Website zu brandmarken und diese digitale Einheit mit Ihrem physischen Unternehmen zu verbinden.
So fügen Sie mithilfe von HTML ein Bild zu einer Webseite hinzu
Um Ihrer Webseite ein Bild, Symbol oder eine Grafik hinzuzufügen, müssen Sie das Tag im HTML-Code einer Seite verwenden. Sie platzieren die.
IMGTag in deinem. HTML genau dort, wo die Grafik angezeigt werden soll. Der Webbrowser, der den Code der Seite rendert, ersetzt dieses Tag nach dem Aufrufen der Seite durch die entsprechende Grafik. Zurück zu unserem Firmenlogo-Beispiel: So können Sie dieses Bild zu Ihrer Website hinzufügen:
Das SRC-Attribut
Wenn Sie sich den obigen HTML-Code ansehen, werden Sie feststellen, dass das Element zwei Attribute enthält. Jeder von ihnen wird für das Bild benötigt.
Das erste Attribut ist das "src". Dies ist im wahrsten Sinne des Wortes die Bilddatei, die auf der Seite angezeigt werden soll. In unserem Beispiel verwenden wir eine Datei namens "logo.png". Dies ist die Grafik, die der Webbrowser beim Rendern der Site anzeigen würde.
Sie werden auch bemerken, dass wir vor diesem Dateinamen einige zusätzliche Informationen "/images/" hinzugefügt haben. Dies ist der Dateipfad. Der anfängliche Schrägstrich weist den Server an, in das Stammverzeichnis des Verzeichnisses zu schauen. Es sucht dann nach einem Ordner namens "images" und schließlich nach der Datei "logo.png". Die Verwendung eines Ordners namens "images" zum Speichern aller Grafiken einer Site ist eine ziemlich gängige Praxis, aber Ihr Dateipfad würde in einen für Ihre Site relevanten geändert werden.
Das Alt-Attribut
Das zweite erforderliche Attribut ist der "alt"-Text. Dies ist der "alternative Text", der angezeigt wird, wenn das Bild aus irgendeinem Grund nicht geladen werden kann. Dieser Text, der in unserem Beispiel "Firmenlogo" lautet, wird angezeigt, wenn das Bild nicht geladen wird. Warum sollte das passieren? Eine Vielzahl von Gründen:
- Falscher Dateipfad
- Falscher Dateiname oder Rechtschreibfehler
- Übertragungsfehler
- Datei wurde vom Server gelöscht
Dies sind nur einige Möglichkeiten, warum unser angegebenes Bild möglicherweise fehlt. In diesen Fällen würde stattdessen unser Alternativtext angezeigt.
Wofür wird Alt-Text verwendet?
Alternativ-Text wird auch von Screenreader-Software verwendet, um das Bild einem sehbehinderten Besucher vorzulesen. Da sie das Bild nicht wie wir sehen können, lässt dieser Text sie wissen, was das Bild selbst ist. Aus diesem Grund ist Alt-Text erforderlich und sollte klar angeben, was das Bild ist!
Ein häufiges Missverständnis von Alt-Text ist, dass er für Suchmaschinenzwecke gedacht ist. Das ist nicht wahr. Während Google und andere Suchmaschinen diesen Text lesen, um festzustellen, um welches Bild es sich handelt (denken Sie daran, sie können Ihr Bild auch nicht "sehen"), Sie sollten keinen Alternativtext schreiben, um nur die Suche anzusprechen Motoren. Verfassen Sie einen klaren Alternativtext, der für Menschen gedacht ist. Wenn Sie dem Tag auch einige Keywords hinzufügen können, die Suchmaschinen ansprechen, ist das in Ordnung, aber stellen Sie immer sicher Der Alt-Text erfüllt seinen Hauptzweck, indem er angibt, was das Bild für jeden ist, der die Grafiken nicht sehen kann Datei.
Andere Bildattribute
Das.
IMG.
-Tag hat auch zwei weitere Attribute, die Sie möglicherweise sehen, wenn Sie eine Grafik auf Ihrer Webseite platzieren – die Breite und die Höhe. Wenn Sie beispielsweise einen WYSIWYG-Editor wie Dreamweaver verwenden, werden diese Informationen automatisch für Sie hinzugefügt. Hier ist ein Beispiel:
Das.
BREITE.
und.
HÖHE.
Attribute teilen dem Browser die Größe des Bildes mit. Der Browser weiß dann genau, wie viel Platz im Layout zuzuweisen ist, und kann während des Bilddownloads zum nächsten Element auf der Seite wechseln. Das Problem bei der Verwendung dieser Informationen in Ihrem HTML-Code besteht darin, dass Sie möglicherweise nicht immer möchten, dass Ihr Bild in genau dieser Größe angezeigt wird. Wenn Sie beispielsweise eine.
Responsive Website
deren Größe sich basierend auf dem Bildschirm des Besuchers und der Gerätegröße ändert, möchten Sie auch, dass Ihre Bilder flexibel sind. Wenn Sie in Ihrem HTML-Code die feste Größe angeben, werden Sie es sehr schwer finden, sie mit responsive zu überschreiben.
CSS-Medienabfragen
. Aus diesem Grund und um eine Trennung von Stil (CSS) und Struktur (HTML) beizubehalten, wird empfohlen, Ihrem HTML-Code KEINE Breiten- und Höhenattribute hinzuzufügen.
Eine Anmerkung: Wenn Sie diese Größenanweisungen weglassen und keine Größe in CSS angeben, zeigt der Browser das Bild trotzdem in seiner Standardgröße an.
Herausgegeben von Jeremy Girard