So Betten Sie Ein Bild Auf Einer Website Ein

Inhaltsverzeichnis:

So Betten Sie Ein Bild Auf Einer Website Ein
So Betten Sie Ein Bild Auf Einer Website Ein

Video: So Betten Sie Ein Bild Auf Einer Website Ein

Video: So Betten Sie Ein Bild Auf Einer Website Ein
Video: WordPress Tutorial - Wie Du BILDER in Beiträge und Seiten einfügen + bearbeiten kannst - 3 Methoden 2024, April
Anonim

Alles, was der Besucher auf den Seiten der Website sieht, wird vom Browser basierend auf detaillierten Anweisungen angezeigt, die ihm vom Server gesendet werden. Diese Anweisungen werden als HTML-Code der Seite bezeichnet und bestehen aus separaten "Tags", die die Art, das Aussehen und die Position jedes Elements einzeln beschreiben. Um ein neues Element (z. B. ein Bild) auf einer Seite zu platzieren, müssen Sie dem Quellcode eine entsprechende Anweisung – ein Tag – hinzufügen. Betrachten Sie den einfachsten Weg, dies zu tun.

Ein Bild in eine Seite einfügen
Ein Bild in eine Seite einfügen

Anweisungen

Schritt 1

Wenn Sie ein Content-Management-System verwenden, ist es sehr wahrscheinlich, dass es einen Seiteneditor enthält. Zunächst müssen Sie die gewünschte Seite in diesem Editor öffnen. Weitere - Optionen sind möglich. Im besten Fall verfügt der Seiteneditor über einen "visuellen Modus", also "WYSIWYG-Modus" (What You See Is What You Get - "What You See Is What You Get"). In diesem Modus müssen Sie sich überhaupt nicht mit dem ursprünglichen HTML-Code befassen! Die Seite im Editor sieht genauso aus wie auf der Site, es reicht aus, die Maus an die gewünschte Stelle zu stecken und die Schaltfläche "Bild einfügen" im Editor-Panel zu drücken.

Schritt 2

Als Ergebnis öffnet sich ein Dialogfeld, in dem Sie das gewünschte Bild auswählen müssen. Wenn Sie es noch nicht hochgeladen haben, gibt es auch eine Schaltfläche zum Auswählen eines Bildes auf Ihrem Computer und zum Hochladen auf den Server. Außerdem können Sie in diesem Dialog die Farbe und Breite des Rahmens um das Bild, den Abstand und die Farbe der Füllung zwischen Rahmen und Bild, den Text für den Tooltip einstellen. Die Angabe der Maße ist hier nicht notwendig, aber aus Gründen der Beschleunigung des Seitenladens und um Verzerrungen des Designs zu vermeiden, ist es dennoch besser dies zu tun. Wenn alle erforderlichen Felder des Dialogs ausgefüllt sind, klicken Sie auf "OK" und speichern Sie dann die bearbeitete Seite.

Dialogfeld Bild einfügen Insert
Dialogfeld Bild einfügen Insert

Schritt 3

Da es keinen einheitlichen Standard für Steuerungssysteme gibt, kann das Verfahren zum Einfügen eines Bildes in den visuellen Modus Ihres Systems geringfügig abweichen, das Prinzip ist jedoch dasselbe. Aus dem gleichen Grund wird der WYSIWYG-Modus möglicherweise nicht im Verwaltungssystem Ihrer Site angezeigt. Dann müssen Sie noch den Quellcode der Seite in HTML (HyperText Markup Language - "Hypertext Markup Language") bearbeiten. Sie müssen an der richtigen Stelle im Code ein Tag einfügen, das den Browser anweist, das Bild hier anzuzeigen. In seiner einfachsten Form sollte es so aussehen: Hier ist die "relative Adresse" des Bildes - unter dieser Adresse sollte der Browser den Server kontaktieren, um die Bilddatei daraus zu bekommen. Wenn die Adresse relativ ist, geht der Browser davon aus, dass sich die Datei im selben Serverordner wie die Seite selbst (oder in einem Unterordner) befindet. Aber um sich nicht zu irren, ist es besser, die "absolute Adresse" anzugeben - zum Beispiel so: Damit der Server das Bild finden und an den Browser senden kann, sollte es natürlich an die angegebene Adresse hochgeladen werden Lage. Am einfachsten geht das über den Dateimanager, der sich in jedem Content-Management-System sowie im Control Panel Ihres Hosting-Unternehmens befindet. Sie können dies auch mit dem FTP-Protokoll (File Transfer Protocol - "File Transfer Protocol") tun, mit einem speziellen Programm - FTP-Client. Es gibt viele von ihnen, sowohl kostenpflichtig als auch kostenlos - zum Beispiel Cute FTP, FlashFXP, WS FTP usw. Aber natürlich braucht das Installieren, Mastern und Konfigurieren des Programms Zeit, also ein Dateimanager zum Herunterladen von allem, was Sie brauchen ein Browser ist eine einfachere Option.

Schritt 4

Neben der Adresse im HTML-Tag des Bildes können Sie zusätzliche Informationen - "Attribute" des Tags angeben. Das Attribut alt="Image" enthält zum Beispiel den Text für den Tooltip, der erscheint, wenn Sie mit dem Mauszeiger über das Bild fahren: Es kann ersetzt werden durch das Attribut - title: - Die Größe des Rechtecks, in dem der Browser Die Anzeige des Bildes wird durch die Attribute width und height festgelegt: - Das Attribut border gibt die Breite des Rahmens um das Bild an (in Pixel): Wenn das Bild zu einem Link gemacht wird, zeichnet der Browser einen blauen Rahmen um das Bild. Um es loszuwerden, setzen Sie den border-Wert auf Null: - Die anderen beiden Attribute enthalten Informationen über den Einrückungsbetrag des Bildes von benachbarten Elementen (von Textzeilen, anderen Bildern usw.) - hspace legt die Größe des fest Einrückung horizontal (links und rechts), vspace - vertikal (unten und oben):

Empfohlen: