Worldofgarry - Bilder mittels HTML einfügen

Bilder mittels HTML einfügen:

Nutzen
Bildadresse ermitteln
Bild einfügen
Bild formatieren
Bild verlinken

1. Nutzen
Es gibt zwar in normalen HPBK-Seiten einen html-Editor, mit dessen Hilfe du Bilder Einfügen kannst, aber bei den Extras oder bei der Rechtenbox fehlt dieser jedoch, um dort trotzdem Bilder einfügen zu können, könnt ihr html benutzen.
Übrigens gibt es hier ein Archiv mit Bildern für die Rechte box

2. Bildadresse ermitteln
Dazu müsst ihr folgende schritte beim HPBK ausführen:

Das gewünschte Bild bei "Eigene Bilder verwalten" hochladen
Mit der linken Maustaste auf das Bild drücken; wenn es erscheint mit der rechten Maustaste draufdrücken und "Grafikadresse kopieren" drücken.

Nun habt ihr die Grafikadresse =)
Ihr könnt von jedem Bild, welches im Internet steht, die Grafikadresse kopieren, doch es ist ratsam das Bild vorher bei dir selbst hochzuladen, es gibt nähmlich viele Webmasters die es nicht wünschen, dass die Bildadresse auf ihre Seite hinweißt.

3. Bild einfügen
Dazu braucht ihr nur folgenden Code, den ihr im Quellcodebereich einfügt (bei Extras einfach einfügen)

<img scr="Grafikadresse.jpg" />

img steht für imagine, welches auf deutsch Bild bedeutet
scr steht für die Herkunft (Quelle) des Bildes, es gilt, bei img ohne scr gibt es kein Bild
Grafikadresse.jpg steht wie der Name schon sagt für die vorhin ermittelte Grafikadresse, diese müsst ihr jetzt bei Grafikadresse.jpg einfügen

3. Bild formatieren
Natürlich könnt ihr in HTML auch das Bild formatieren, hier einige Beispiele:

Ich habe folgendes Bild eingefügt:
Code: <img scr="https://img.webme.com/pic/w/worldofgarry/button_gelb.jpg" />
das sieht jetzt so aus

Nun möchten wir, dass das Bild kleiner dargestellt wird, dazu benutzen wir folgenden Code:

<img scr="Grafikadresse.jpg" height="xxx" width="xxx" />

Wie ihr seht, bleibt der Kerncode gleich, allerdings haben wir ein height="xxx", was Höhe bedeutet, bei xxx schreibt ihr eine beliebige Zahl hinein und ein with="xxx" was Breite bedeutet, hierbei verfahrt ihr gleich.

Ich habe folgendes Bild verkleinert:

Code: <img scr="https://img.webme.com/pic/w/worldofgarry/button_gelb.jpg" height="80" width="14" />

Natürlich könnt ihr das Bild auch verzehren:
Code: <img scr="https://img.webme.com/pic/w/worldofgarry/button_gelb.jpg" height="30" width="80" />

Mit folgenem Code könnt ihr dem Bild einen Rahmen geben:
(bei manchen Browsern wird der Rahmen nicht angezeigt)

Hier der Code:
<img scr="Grafikadresse.jpg" border="x" />

Wie immer bleibt der Kerncode gleich, aber dieses Mal steht noch ein border="x" dabei, in x tragt ihr wieder eine Zahl ein.

Natürlich könnt ihr dies auch mit "with/height" kombinieren, die Rheinfolge ist hierbei egal.

Auch eine wichtige Funktion bei HTML ist der sogenannte Alternativtext, welcher dazu dient, dass falls das Bild nicht geladen werden konnte, oder noch läd, ein Text anstelle vom Bild angezeigt wird.

Hier der Code:
<img scr="Grafikadresse.jpg" alt="dein Text" />

Bei "dein Text" könnt ihr natürlich, wie der Namen schon sagt euren eigenen Text schreiben, er könnte lauten: Das Bild wird noch geladen oder konnte nicht angezeigt werden.
Alle hier genannten Eigenschaften können miteinander kombiniert werden,
z.B. <img scr="Grafikadresse.jpg" with="80" height="120" border="x" alt="Hier würde normalerweise ein Würfel stehen"/>

4. Bild verlinken

Ein durch HTML einfügtes Bild kannst du natürlich auch verlinken:

Hier der Code:
<a href="LinkURL"><img src=
"https://img.webme.com/pic/w/worldofgarry/spinnennetzwerkbanner.jpg" /></a>

Wir sehen, dass um den bisher bekannten gelben <img scr /> Rahmen ein roter <a href></a> Rahmen kommt, in welchen wir unter LinkURL die URL für unseren Link angeben sollen. Die im vorherigem Abschnitt erklärten Methoden können selbstverständlich mit übernommen werden.
Verlinkte Bilder haben immer einen Rand, in Linkfarbe, um diesen zu entfernen müsst ihr den Rahmen (border) auf 0 stellen.

Hier ein Beispiel:

Code:<a href="http//www.spinnennetzwerk.de.tl"><img src="https://img.webme.com/pic/w/worldofgarry/spinnennetzwerkbanner.jpg" with="200" height="40" border="0" /></a>

Eine genauere Anleitung zu Links gibt es hier, ansonsten hoffe ich, dass es euch geholfen hat

Nach oben