HTML-Grundlagen: Bilder Einfügen - Praxiswissen Für Selbstständige

Trang chủ » Html Befehl Grafik Einfügen » HTML-Grundlagen: Bilder Einfügen - Praxiswissen Für Selbstständige

Có thể bạn quan tâm

Direkt zum Inhalt HTML lernen (1): Einführungskurs

HTML-Grundlagen: Bilder und Pfade: HTML-Grundlagen: Bilder einfügen

MangelhaftNot so poorDurchschnittgutsehr gut Speichern

∅ 4.5 / 19 Bewertungen

Bitte dieses Feld leer lassen von Kerstin Dankwerth / 01.09.2007

HTML-Grundlagen: Bilder einfügen

Inhalt

  • Überblick
  • Kleine Theorie
  • Texte
  • Überschriften
  • Listen
  • Bilder
    • HTML-Grundlagen: Bilder einfügen
    • HTML-Grundlagen: Relative Pfade
    • HTML-Grundlagen: Absolute Pfade
    • HTML-Grundlagen: Zusammenfassung (V)
  • Links
  • Body-Tag
  • Frames
  • Anhang

Downloads zum Beitrag

Für Mitglieder

(Bitte einloggen oder Mitglied werden.)

PDF des Beitrags Textauszeichnungen

Login für MitgliederMitglied werden

Auf dieser Seite

Aufgabe: Das etwas weiter unten abgebildete Bild (engl. image) 'delphin.gif' soll in die HTML-Datei 'delphin.htm' eingesetzt werden.Beispiel:

Mit Bild

In HTML lassen sich sehr einfach Grafiken einbinden. Zwei Grafikformate, die von allen gängigen Browsern unterstützt werden, sind das GIF- und JPEG-Format. (Mehr dazu im Modul "Aufbau einer Web-Site") Setzen Sie Grafiken jedoch immer gezielt ein, denn "weniger ist manchmal mehr". Je mehr Grafiken eine Seite enthält, desto länger dauert der Ladevorgang. Eine Grafik sollte nicht größer sein als 30 KBytes, idealerweise ist sie höchstens 5 KBytes groß.

Mit Bild

Grafik einbinden: Grafiken können in ein HTML-Dokument über die Anweisung <img src="Dateiname"> direkt eingebunden werden.

Mit Bild

Aufgabe: Das etwas weiter unten abgebildete Bild (engl. image) 'delphin.gif' soll in die HTML-Datei 'delphin.htm' eingesetzt werden.

  • Als erstes legen Sie die HTML-Datei delphin.htm an. Geben Sie folgenden HTML-Code als Grundgerüst ein:

Mit Bild

Beispiel:

<html> <head> <title>Alles über Delphine </title> </head> <body bgcolor="#ffffff">

</body> </html>

Mit Bild

Jetzt soll das Bild delphin.gif in die Datei eingebunden werden.

Mit Bild

  • Dazu müssen Sie das Bild der beiden springenden Delphine auf Ihrer Festplatte im gleichen Verzeichnis wie die HTML-Datei speichern.

Mit Bild

50080_delphin.gif

Delphin

Mit Bild

Das funktioniert bei Windows-Rechnern folgendermaßen:

  • Klicken Sie mit der rechten Maustaste auf das Bild.

  • Wählen Sie den Befehl "Grafik speichern" (engl. Save Image).

  • Geben Sie das Verzeichnis an, in das Sie das Bild speichern möchten. (das gleiche, in dem die Datei delphin.htm liegt.)

Für die Mac-Anwender:

  • Klicken Sie auf das Bild und halten Sie die Maustaste gedrückt.

  • Wählen Sie den Befehl "Grafik speichern" (engl. Save Image).

  • Geben Sie den Ordner an, in dem Sie das Bild speichern möchten. Das ist derselbe Ordner, in dem die Datei delphin.htm liegt.

Nachdem Sie das Bild auf Ihrer Festplatte gespeichert haben, können Sie es in die HTML-Datei delphin.htm einbinden. Der Befehl, den Sie dazu im Body eingeben müssen, lautet folgendermaßen: <img src="delphin.gif"> Schauen wir uns das Ergebnis im Browser an:

Mit Bild

50081_delphinbr.gif

Delphin im Browser

Mit Bild

Im <img src=-...>-Tag können die Attribute alt, align und border optional verwendet werden.

alt="[Text]"

Gibt den Text an, wenn die Bildanzeige im Browser deaktiviert wurde und erscheint kurzzeitig beim Laden der Grafik, wenn die Bildanzeige im Browser eingeschaltet ist. Dieses Attribut sollten Sie immer angeben. Dieser Alt-Tag wird nämlich auch verwendet, um in Text-basierten Browsern die Bilder zu ersetzen.

align="[Position]"

Bestimmt die horizontale und vertikale Ausrichtung. Dies spielt bei Bildern, die innerhalb eines Textes eingebunden sind, eine Rolle. Damit kontrollieren Sie den Textfluß um das Bild.

border="[Stärke in Pixel]"

Umrahmt die Grafik. Fehlt diese Angabe, erhält die Grafik keinen Rahmen. Wenn Sie die Grafik verlinken, dann erhält dieser Rahmen entweder die Farbe, die Sie für Links definiert haben, oder standardmäßig blau. Wenn Sie diesen Rahmen nicht anzeigen möchten, sollten Sie border="0" setzen.

width="[Breite in Pixeln]"

Bestimmt die Breite der Grafik. Geben Sie hier die richtige Breite der Grafik in Pixeln an, da ansonsten das Bild verzerrt wird.

height="[Höhe in Pixeln]"

Bestimmt die Höhe der Grafik. Hier sollten Sie auch die richtige Breite der Grafik in Pixeln angeben, sonst wird das Bild verzerrt.

Mit Bild

Breite und Höhe von Grafiken sollten immer angegeben werden.

‹ HTML-Grundlagen: Bilder und Pfade HTML-Grundlagen: Relative Pfade ›

Từ khóa » Html Befehl Grafik Einfügen