Fügen Sie ein Bild mit HTML hinzu

Autor: Christy White
Erstelldatum: 4 Kann 2021
Aktualisierungsdatum: 25 Juni 2024
Anonim
Полный обзор программатора ключей TanGo, купленного в китае
Video: Полный обзор программатора ключей TanGo, купленного в китае

Inhalt

Das Hinzufügen von Bildern zu Ihrer Website oder Ihrem Profil in sozialen Netzwerken ist eine hervorragende Möglichkeit, Ihre Webseite zu verschönern. HTML (HyperText Markup Language) bietet viele Funktionen zum Erstellen von Webseiten, aber zum Glück ist der Code, den Sie zum Hinzufügen von Bildern benötigen, nicht allzu schwierig.

Schreiten

Methode 1 von 1: Einfügen von Bildern mit HTML

  1. Laden Sie Ihr Bild auf eine kostenlose Hosting-Website wie Photobucket oder TinyPic hoch, die Hotlinks ermöglicht. Hotlink ermöglicht eine direkte Verknüpfung eines Bildes mit dem Website-Server. Einige Anbieter haben dies verboten, da Hotlinking ihre Bandbreite nutzt und Speicherplatz auf ihren Servern beansprucht.
    • Wenn Sie ein kostenpflichtiges Hosting-Konto haben, laden Sie die Bilder direkt auf den Server hoch, auf dem sich Ihre Website befindet. Dies ist immer zuverlässiger als eine kostenlose Website und muss überhaupt nicht teuer sein.
  2. Öffnen Sie ein neues Dokument in einem Texteditor (z., Notepad / Notepad) oder öffnen Sie die Seite in Ihrer Website / Ihrem Profil, auf der Sie den HTML-Code direkt ändern können.
  3. Beginnen Sie mit dem img Etikett. Das img Das Tag ist leer, dh es wird kein schließendes Tag benötigt. Für die XHTML-Validierung können Sie jedoch weiterhin ein Leerzeichen und einen Schrägstrich davor setzen größer als Schild.
    • img />
  4. Es gibt viele verfügbare Attribute, aber nur eines ist erforderlich:src. Dies ist der Ort / die Adresse oder auch die URL Ihres Bildes.
    • img src = "URL des Bildes" />
  5. Als nächstes musst du alt Attribute hinzufügen. Dies zeigt einen alternativen Text für den Fall, dass das Bild nicht geladen werden kann. Dies ist auch ein Dienst für Sehbehinderte, der Bildschirmleser verwendet.
    • Wenn Sie den Mauszeiger über ein Bild bewegen, wird dieser Text auch als QuickInfo angezeigt. Dies ist jedoch nur in Internet Explorer der Fall. Die Lösung, die mit allen Browsern funktioniert (Firefox et al.) ist dazu Titel Attribut zusätzlich zu verwenden alt. (Letzteres können Sie weglassen, wenn das Bild keinen Tooltip enthalten soll.)

Als Beispiel:img src = "URL des Bildes" alt = "Nur für den Fall" title = "Tooltip" />


  1. Jetzt können Sie die Größe des Bildes mit dem angeben Höhe und Breite Attribut und durch Angabe der Pixel oder eines Prozentsatzes. Beachten Sie, dass die Größenänderung auf diese Weise nur die Größe der Ansicht ändert, nicht die Größe des Bildes. Um die Ladezeit eines Bildes zu verkürzen, ist es insbesondere bei großen Bildern besser, die Größe im Voraus mit einer Fotobearbeitungssoftware oder einem Onlinedienst wie PicResize.com zu ändern.
    • img src = "URL des Bildes" alt = "Nur für den Fall" title = "Tooltip" height = "50%" width = "50%" />
    • img src = "URL des Bildes" alt = "Nur für den Fall" title = "Tooltip" height = "25px" width = "50px" />

Tipps

  • Der Wert für diese Attribute wird entweder in Pixel oder als Prozentsatz von 1 bis 100% angegeben.
  • Das Bild kann mithilfe der verschiedenen Formatierungsattribute wie oben, unten, Mitte, rechts, links usw. an einer beliebigen Stelle auf der Webseite platziert werden.
  • Das hspace-Attribut wird verwendet, um links und rechts von einem Bild einen horizontalen Raum einzufügen, während das vspace-Attribut verwendet wird, um oben und unten in Bildern und anderen Objekten Platz zu schaffen.
  • Gönnen Sie sich nicht zu viel Bilder. Das sieht chaotisch und unprofessionell aus.
  • GIF-Bilder eignen sich gut für Logos oder Cartoons, aber dieser Dateityp eignet sich weniger für Fotos und andere Bilder mit vielen Farben.
    • GIF-Bilder unterstützen nur 8-Bit-Farben mit maximal 256 Farben für ein Bild. Es ist daher zu erwarten, dass die Wiedergabe einer 16- oder 24-Bit-Farbabbildung oder eines Fotos nicht so gut ist.
    • GIF-Bilder unterstützen auch Transparenz. Ein bisschen Transparenz ist möglich, was bedeutet, dass eine Farbe transparent gemacht werden kann.
    • Interlacing wird auch von GIF-Bildern unterstützt, sodass der Website-Besucher eine Vorstellung davon bekommt, wie das Bild aussehen wird, bevor es vollständig geladen wird.
    • Das GIF-Format unterstützt auch Animationen.
  • Stellen Sie sicher, dass die URL das Dateiformat des Bildes angibt (.webp .gif usw.).

Warnungen

  • Kein Hotlink!