Jedes Mal, wenn Sie das Netz erkunden, Sie sind verpflichtet, in Tonnen von Bildern auf fast jedem HTML5 und CSS3-Seite besuchen zu laufen. Typischerweise werden die Bilder in vierfacher Hinsicht auf Webseiten verwendet:

• Externer Link: Die Seite hat Text mit einem Link in sie eingebettet. Wenn der Benutzer auf den Link klickt, ersetzt das Bild der Seite im Web-Browser. Um ein extern verlinkter Bild machen, machen nur ein gewöhnlicher Link, sondern weisen auf eine Bilddatei, und nicht als HTML (Hypertext Markup Language) Datei.

• Eingebettete Bilder: Das Bild wird in die Seite eingebettet. Der Text der Seite fließt in der Regel um das Bild. Dies ist die häufigste Art von Bild auf der Bahn verwendet.

• Hintergrundbilder: Ein Bild kann als Hintergrund für die gesamte Seite oder für einen bestimmten Teil der Seite verwendet werden. Bilder in der Regel eine besondere Manipulation erfordern, um sie für die Hintergrund-Verwendung geeignet zu machen.

• Bullets: Mit CSS können Sie ein kleines Bild zuordnen Kugel für eine geordnete oder ungeordnete Liste zu sein. Auf diese Weise können Sie jede Art von kundenspezifischen Liste Markierungen machen Sie zeichnen können.

Wie man ein Bild zu verknüpfen

Der einfachste Weg, um Bilder aufzunehmen ist, um sie zu verbinden. Werfen Sie einen Blick auf die externalImage.html Seite.

Die Code-Seite ist nicht viel mehr als ein einfacher Link:

Link zu einer externen Bild
Susan B. Constant

Das href verweist auf eine Bilddatei, nicht eine HTML-Seite. Sie können auf jede Art von Datei, die Sie in einem Anker-Tag wollen zeigen. Wenn der Browser den Dateityp kennt, zeigt der Browser die Datei. Wenn der Browser das Dateiformat nicht kennt, versucht der Computer des Benutzers die Datei anzuzeigen verwenden, was auch immer Programm es normalerweise diese Art von Datei zu öffnen, verwendet.

Dies funktioniert gut für die meisten Bilder, da das Bild direkt im Browser angezeigt wird.

Sie können diese Anker Trick mit jeder Art von Datei zu verwenden, aber die Ergebnisse können sehr unberechenbar sein. Im Allgemeinen speichern diesen Trick für sehr gängige Formate wie GIF und JPG.

Die meisten Browser automatisch die Größe des Bildes die Browsergröße zu passen. Dies bedeutet ein großes Bild erscheinen kann kleiner sein, als es wirklich ist, aber der Benutzer hat immer noch zu warten, bis das gesamte Bild zum Download bereit.

Da dies eine relative Referenz ist, muss das angegebene Bild im selben Verzeichnis wie die HTML-Datei sein. Wenn der Benutzer auf den Link klickt, wird die Seite durch das Bild ersetzt.

Externe Links sind einfach zu erstellen, aber sie haben einige Probleme:

• Sie haben nicht das Bild in der Vorschau. Der Benutzer hat nur die Textbeschreibung, um herauszufinden, was das Bild sein könnte.

• Sie unterbrechen den Fluss. Wenn die Seite eine Reihe von Bildern enthält, hat der Benutzer dem Verlassen der Seite zu halten, Bilder zu betrachten.

• Der Benutzer muss auf die Hauptseite zurückzukehren sichern. Das Bild sieht aus wie eine Web-Seite, aber es ist nicht. Keine Verbindung oder anderen erläuternden Text im Bild zeigt an, wie auf der Web-Seite zu kommen. Die meisten Nutzer kennen den Browser-Zurück-Taste zu klicken, aber nicht davon ausgehen, alle Benutzer wissen, was zu tun ist.

Wie man Inline-Bilder mithilfe des Etikett

Die Alternative zu Links zu Bildern Bereitstellung Ihre Bilder in die Seite einbinden.

Der Code zeigt, wie das Bild in die Seite aufgenommen wurde:

Die Susan B. Constant
Das Susan B. Constant war Flaggschiff der thefleet von drei kleinen Schiffen, die Siedler in Jamestown, der firstsuccessful englischen Kolonie in der neuen Welt gebracht. Dies ist eine Replik housednear Jamestown, Virginia.

Die Image-Tag ist der Star dieser Seite. Mit diesem Tag können Sie eine Bilddatei und integrieren sie in die Seite direkt zu greifen. Die Image-Tag ist ein One-Shot-Tag. Es endet nicht mit. Verwenden Sie stattdessen die Zeichen am Ende der Definition, um anzuzeigen, dass dieser Tag nicht Inhalt hat.

Sie haben vielleicht bemerkt, dass Susan B. Konstante Kursivschrift wird verwendet, auf der Seite des Tags um diesen Effekt zu erhalten. steht für Betonung, und Mittel starke Betonung. Standardmäßig wird jeder Text innerhalb eines Paares kursiv gedruckt und Text fett gedruckt wird. Sie können dieses Verhalten mit CSS ändern.

src (Quelle)

Das src-Attribut können Sie die URL des Bildes anzuzeigen. Dies kann ein absoluter oder relativer Bezug. in Ihrem eigenen Verzeichnisstruktur zu einem Bild verknüpfen ist in der Regel am besten, weil Sie sich nicht sicher ein externes Bild noch da sein kann, wenn der Benutzer auf die Seite bekommt.

Höhe und Breite

Die Höhe und Breite Attribute werden verwendet, um die Größe des Bildes anzuzeigen. Der Browser verwendet diese Informationen, um anzuzeigen, wie viel Platz auf der Seite zu reservieren.

Die Höhe und Breite Attribute sollten beschreiben die Größe eines Bildes. Sie können diese Attribute verwenden, um tatsächlich die Größe eines Bildes zu ändern, aber es ist eine schlechte Idee. Ändern Sie die Bildgröße mit dem Bildbearbeitungsprogramm. Wenn Sie diese Attribute verwenden, muss der Anwender für das gesamte Bild zu warten, auch wenn sie eine kleinere Version sehen werden. Nicht der Benutzer Informationen warten machen sie nicht sehen.

alt (Alternativtext)

Das alt-Attribut gibt Ihnen die Möglichkeit alternativen Text angeben, die das Bild beschreiben. Alternative Textinformationen verwendet wird, wenn der Benutzer Bilder ausgeschaltet und von Bildschirm-Leser. Informationen in Alt-Tags wird auch in Bild-Suchsoftware wie Google Images verwendet.

Das alt-Attribut wird auf alle Bilder erforderlich.

Darüber hinaus ist der tag ein Inline-Tag, so muss es in einem Block-Tag eingebettet werden.