Buttons oder Bilder verlinken 



Buttons oder Bilder verlinken 24.Mai 2011 ©Chris Barharn aka Avarra
Urheberrechtshinweis!
Meine Tutorials unterliegen dem Urheberrecht
Das Nutzungsrecht liegt beim Gimp-Atelier e.V.


Das Tutorial sowie mein Material sind nicht für Kurse außerhalb dieses Forums freigegeben!
Dieses bedarf der ausdrücklichen Erlaubnis des Gimp-Atelier e.V.


but-link-000.jpg  In diesem halben Gimp Tutorial möchte ich dir zeigen, wie du deine Grafiken oder auch Buttons, welche du in THE GIMP erstellt hast auf deiner Webseite verlinkst.

Material: Buttons von gimpzora aus dem Gimp-Atelier
und einen Texteditor

Vorarbeiten:

1. Mache dir in deinem persönlichen Ordner einen Ordner, den du "Buttonside" nennst. In diesem Ordner erstelle bitte einen zweiten Ordner, den du "images" nennst. In den Ordner "images" kopiere die Grafiken, welche du zeigen möchtest. Da die Grafiken von gimp-zora einen sehr langen Namen haben, habe ich sie umbenannt in kürzere, was in html üblich ist. So kurz wie möglich, so lang wie nötig. Hier kannst du den Ordner "images" von mir sehen. Ich habe mich für den braunen Button entschieden, der bei mir "button-003.png" heißt. Gewöhne dir gleich an, alles klein zu schreiben denn auch dies ist in html durchaus üblich.

but-link-001.jpg

2. Öffne den Texteditor, du findest ihn meistens hinter dem Windowszeichen.

but-link-002.jpg

Füge folgenden Text ein:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title></title>
</head>
<body>
<br />
</body>
</html>

3. Speichere die Datei als index.html in dem Ordner "Buttonside"

4. Kopiere dir nun folgenden Text:

<a href="http://www.gimp-atelier.org"><img
 style="border: 0px solid ; width: 95px; height: 95px;"
 alt="button-003" src="images/button-003.png" /></a>

Setze deinen Mauszeiger hinter das Wort: "body" und durch "Strg + V" füge den Text ein. Speichere die Datei. Dein Text müßte demnach so aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>webtestside</title>
</head>
<body>
<a href="http://www.gimp-atelier.org"><img
 style="border: 0px solid ; width: 95px; height: 95px;"
 alt="button-003" src="images/button-003.png" /></a>
</body>
</html>

5. Wenn du nun die Datei im Internetbrouser aufrufst, wirst du den button sehen und wenn du drauf klickst, wirst du auf die Homepage des Gimp-Ateliers weitergeleitet. Du fragst dich sicher, wie denn das? Ich versuche es im folgenden zu erklären

<a href="hier text"> läutet einen Link ein. Dieser Link kann zu einer Website führen, einer Datei oder auch auf eine andere Seite in deiner homepage.

<img style="hier text"> gibt an, ob dein Bild einen Rand hat und wie groß es ist.

<alt="hier text"sagt dir, welchen Titel dein Bild hat und

src="hier text" gibt den Pfad an, wo sich dein Bild befindet. Da sich dein images Ordner im gleichen Ordner, wie die index.html befindet, reicht es aus, hier nur den relativen Pfad anzugeben. Befindet sich der Ordnder mit deinen Bildern aus irgendeinem Grund woanders, so gebe bitte den absoluten Pfad ein. Dies kann auch ein Bild aus dem Internet sein.

Die beiden Zeichen am Ende sind sehr wichtig /> und </a> schließen 1. die Linkanweisung und 2. Die Bildanweisung.

Ich habe hier mal den Button. Als erstes verlinke ich zu unserer Homepage - wenn du draufklickst, dann wirst du weitergeleitet.
Der zweite Button führt dich zu dem Downlaod von gimp-zoras Buttons, der dritte in die gimp-registry und der vierte ... ??? Finde es raus ;)

but-link-003.png but-link-003.png but-link-003.png but-link-003.png



Lieben Gruß

Avarra

Diskussion zum Thema

ateliers-banner.jpg