no image

Veröffentlicht am 25. Dezember 2011

0

Mit HTML ein Bild einfügen

Inhaltsverzeichnis

Einleitung

Ein Bild mit Html einfügen ist nicht schwer. Fast jeder wurde schon einmal mit diesem Problem konfrontiert. Egal ob ein kleines Bild für seine private Homepage in einem Chat oder für einen Foreneintrag html ist überall von nöten. Was viele Chatbetreiber und Forenbetreiber aber nicht wissen ist, dass nicht jeder diese Befehle beherrscht. Hier findet ihr eine Anleitung wie ihr ganz einfach Bilder mit Html einfügt. Es gibt mehrere Varianten um Bilder mit HTML einzufüge, welche ich euch Schritt für Schritt erklären werde.

Html Bild einfügen

Das geeignete Format

Oft werden die Formate PNG, JPG/JPEG und manchmal auch GIF benutzt. Je nachdem welche Eigenschaften das Bild hat, wird das jeweilige Format benutzt. Jeder Browser, der eine grafische Oberfläche unterstützt, kann die Formate problemlos lesen.

Bild in voller Größe enfügen

Wenn ihr ein Bild in der Größe nicht veränderm wollt, sondern, so einfügen wollt das es wie im Internet dargestellt wird, dann müsst ihr diesen HTML Befehl verwenden.

<img src="http://www.adresseDesBildes.jpg"/> 

Bild einfügen und Größe verändern

Wenn ihr die Größe von eurem Bild verändert möchtet, da dieses zu groß zum Einbinden ist, müsst ihr die Attribute width und height verändern. Zum Beispiel: widht=250 height =320. Achtet aber darauf, dass eure Bild seine Proportionen nicht verliert.

<img src="http://www.adresseDesBildes.jpg" width=160 height=190/> 

Bild einfügen mit Titel

Wenn ihr ein Bild mit HTML einfügen möchtet, und diesem Bild einen Namen geben möchtet, der angezeigt werden soll wenn ihr mit der Maus über das Bild fahrt, dann müsst ihr diesen Befehl verwenden. Ihr könnt die Attribute width(Breite) und height(Höhe) weglassen um eure Bild in der ursprungs Größte anzeigen zu lassen.

<img src="http://www.adresseDesBildes.jpg" width=160 height=190 alt="NameVonEuremBild"/> 

Bild mit Rahmen einfügen

Wenn ihr ein Bild mit einem Rahmen einfügen möchtet, dann verwendet diesen Befehl.
Border(Rahmen) könnt ihr beliebig verändern. Desto höher die Zahl umso dicker wird euer Rahmen

<img src="http://www.adresseDesBildes.jpg" width=160 height=190 alt="NameVonEuremBild" border=5/>

Bild rechts,links oder zentriert einbinden

Html bietet euch auch die Möglichkeit euer Bild mit einem Befehl links, rechts oder zentriert einzufügen. Einfach das Attribut right,center oder left setzen um das Bild in der jeweiligen Richtung zu positionieren.

<img src="http://www.adresseDesBildes.jpg" width=160 height=190 align="right"/> 

Ihr seht, es ist ganz einfach mit HTML ein Bild einzufügen. Ihr müsst keine Programmierer sein um diese HTML Befehle anzuwenden.

Zusatzinfos

  • Das alt-Attribut wird für standardkonforme Dokumente als Pflicht angesehen. Dort wird entweder beschrieben was auf dem Bild zu sehen ist oder wie das Bild heißt. Es dient zur Hilfe für Leute, die einen Screenreader benutzen und das Bild dadurch nicht sehen können. Auch ist das alt-Attribut dafür da, falls das Bild nicht zu lesen sein sollte. Dann erscheint dort der Alternativtext.
  • Liegt das Bild auf dem gleichen Server oder im gleichen Verzeichnis, so muss man nicht die vollständige Adresse angeben. Dies kann man auch so realisieren:
<img src="verzeichnis1/bild.png" alt="Beschreibung"/> 

Befindet sich das Bild ein Verzeichnis vor dem HTML-Dokument, so muss man dies folgendermaßen schreiben:

<img src="../bild.png" alt="Beschreibung"/> 
  • Bei großen Dateien lohnt es sich diese vorher mit einem Grafikprogramm zu verkleinern. Dies verkürzt die Ladezeit.
  • Da Suchmaschinen den Text von Bilddateien nicht lesen können, sollte man auf große und wichtige Texte auf Grafiken verzichten.
  • Um die Ladezeit zu verkürzen, ist es empfehlenswert es nicht zu übertreiben mit den Grafiken.

weitere Anleitungen

Tags: , ,




Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Zurck nach Oben ↑