HTML-Grundlagen - Anzeigen von Bildern

• April 23, 2024

Sobald Sie Ihren Website-Text veröffentlicht und nach Ihren Wünschen formatiert haben, ist es Zeit, die Seite mit ein paar Bildern aufzupeppen. Bilder können Ihren Seiten nicht nur Farbe und Leben verleihen, sondern Sie können sie auch verwenden, um Texteffekte zu generieren, die mit normalem Text und Formatierung nur schwer oder gar nicht möglich sind. Zum Beispiel ist Ihre Auswahl an Schriftarten normalerweise auf die geringe Anzahl von Schriftarten beschränkt, von denen Sie sicher sein können, dass sie auf den Computern der Besucher installiert sind, da sie diese nicht auf Ihrer Website sehen können, wenn sie die Schrift nicht installiert haben! Jedes Mal, wenn Sie Text in einer nicht verfügbaren Schriftart veröffentlichen, wird er von den Computern der Besucher in der verfügbaren Schriftart gerendert, die dem Stil am nächsten kommt. Dies kann häufig zu Schäden an der Gestaltung Ihrer Website führen.

Wenn Sie dagegen ein Bildbearbeitungsprogramm verwenden, um Text in einer ausgefallenen Schriftart zu erfassen und als GIF oder JPEG auf Ihrer Website zu veröffentlichen, wird jeder Besucher ihn genau so sehen, wie Sie es beabsichtigt haben - da es sich jetzt eher um ein Textbild als um ein Bild handelt Text selbst. Auf diese Weise können Sie phantasievolle Schriftarten in Ihren Kopfzeilen verwenden und diese auf ungewöhnliche Weise gruppieren.

Das grundlegende Tag zum Anzeigen von Bildern lautet wie folgt:



Der obige Code funktioniert perfekt in HTML. Wenn Sie XHTML verwenden oder sicherstellen möchten, dass Ihre Site XHTML-fähig ist, sollten Sie einen Schrägstrich hinzufügen, um das Tag zu schließen, da Sie in XHTML keine offenen Tags verwenden können:



'Src' ist die Abkürzung für source und Sie werden es verwenden, um den Dateipfad zu Ihrem Bild anzugeben - mit anderen Worten, um Ihrem Browser mitzuteilen, wo sich das Bild auf Ihrer Site befindet. Wenn Sie Ihre Bilder im selben Ordner wie Ihre Webseiten aufbewahren, müssen Sie den Ordner nicht im 'src'-Text auflisten - Sie können einfach den Bilddateinamen eingeben.

Sobald Sie Ihre Bildquelle angegeben haben, können Sie dieses grundlegende Framework mit verschiedenen optionalen Attributen erweitern, um Ihre Bilder optimal zu nutzen. Ein Attribut, das Sie fast immer verwenden sollten, ist das 'alt'-Attribut. Auf diese Weise können Sie festlegen, welcher Text vom Browser angezeigt werden soll, wenn Ihr Bild aus irgendeinem Grund nicht angezeigt werden kann. Der 'alt'-Text wird wie folgt erstellt:



Ein weiterer nützlicher Satz von Attributen sind die Tags 'width' und 'height'. Mit diesen können Sie Bilder in einer anderen Größe als der tatsächlichen Bildgröße anzeigen. Sie können sie verwenden, um Ihr Bild so zu optimieren, dass es perfekt in Ihr gesamtes Seitendesign passt. Im Allgemeinen ist es jedoch aus zwei Gründen vorzuziehen, die tatsächliche Bildgröße mithilfe von Bildbearbeitungsprogrammen zu ändern und das Bild dann online zu stellen. Erstens liefert die Bildbearbeitungssoftware fast immer ein besser aussehendes Ergebnis, als wenn Sie die Größe von Hand anpassen. Zweitens ändert das Ändern der Tags 'width' und 'height' nicht die tatsächliche Dateigröße des Bildes. Wenn Sie also ein riesiges Bild haben, das Sie als Miniaturbild anzeigen, dauert das Laden des Bildes genauso lange und wird genauso zerkaut viel Bandbreite, als hätten Sie es in voller Größe angezeigt.

Wenn Sie die Größe eines Bildes angeben, können Sie die Höhe, die Breite oder beides angeben. Die Größen werden durch das Pixel angegeben, wie Sie unten sehen können:



Sie können Ihre Bilder auch so ausrichten, dass sie sich nahtlos in den Textfluss einfügen. Wenn Sie die linke Ausrichtung wählen, beginnt der Text rechts neben dem Bild. Wenn Sie die richtige Ausrichtung wählen, wird das Bild auf der rechten Seite der Seite angezeigt, und Ihr Text wird auf der linken Seite des Bildes angezeigt und dann in eine neue Zeile unterbrochen.

Die Bildausrichtung wird wie folgt eingestellt:



Sie können die Ausrichtung auch auf "oben", "unten" oder "Mitte" einstellen, um die Bildlinie entweder am oberen oder am unteren Rand der Textzeile auszurichten. Wenn Sie keine Ausrichtung angeben, wird das Bild standardmäßig auf "unten" gesetzt.

Als Randnotiz können Sie Ihre Bildattribute (src, align, alt usw.) in beliebiger Reihenfolge in die Bild-Tags aufnehmen. Meine persönliche Präferenz ist es, zuerst das Attribut 'src' aufzulisten, da dies das grundlegendste Attribut ist und in jedem Bild-Tag enthalten sein muss. Sie können jedoch jede Sequenz verwenden, die sich für Sie am natürlichsten anfühlt.

Video-Anleitungen: HTML erklärt #4 Bilder einfügen (April 2024).