Hyper-Links – Erklärt für Anfänger

Als ich die Buttons hier eingestellt habe, ist mir wieder mal aufgefallen, dass man ständig irgendwelche Links setzen oder verändern möchte. Dabei ist es eigentlich erst mal egal ob Textlinks oder Bilder.

Leider kann dies nicht jeder, deshalb versuche ich jetzt mal eine absolut einfache Anleitung zur Verfügung zu stellen:

1. Linksetzung in WordPress

WordPress macht es uns hier wirklich einfach (genauso wie Joomla). Einfach mit der gedrückten linken Maustaste das Wort markieren, was man verlinken möcht und das kleine Kettensymbol anklicken. Meist öffnet sich dann ein eigenes kleines Fenster, bei dem man nach der URL gefragt wird. URL  ist das lange Gebilde oben in Eurem Browser und fängt mit http:// an. Dieses einfach kopieren und in das Feld einfügen.  Bei WordPress kommt dann in der nächsten Zeile Target. Hier kann man dann auswählen, was passiert, wenn auf diesen Link geklickt wird. Entweder wird ein neues Fenster geöffnet oder Eure Seite verlassen.

Dann noch bestätigen und fertig. Der Link ist gesetzt.

Doch manchmal klappt es nicht und es wird der HTML-Modus nötig, oder es werden weitere Zusätze verlangt (nofollow)

2. Aufbau eines HTML-Links

im HTML-Modus sieht ein Link schon komisch aus. Fangen wir mal an:

Beginnen tut ein HTML-Befehl immer mit <

dann kommt beim Link ein kleines a kann man sich gut mit „Achtung Link“ merken

Jetzt folgt ein Leerzeichen und href= – als Eselsbrücke hilft mir hier referenz = – also jetzt das Ziel wohin.

damit keine Verwechslung für den Browser auftritt setzen wir alles in „.

Den HTML-Befehl mit > beenden

Nun kommt der wichtige Teil, nämlich der der später zu sehen ist: Linktext oder Bild Auf das Bild gehe ich später noch ein. Beim Linktext könnt ihr reinschreiben was ihr wollt. Doof ist allerdings ein Text, der nicht verrät wohin ihr verlinkt. Also wie etwa Homepage. Damit weiß keiner was anzufangen.

Damit jetzt noch der Browser weiß, wann den der Linktext zuende ist, braucht es noch die Zeichenfolge </a> Wenn Ihr die nicht setzt, ist der ganze nachfolgende Text de Link.

Also zusammengesetzt: <a href=“die url aus dem Browser“> der verlinkte Text </a>

3. Zusätze in HTML -Links

Das Target habe ich ja schon vorher kurz angesprochen. Wenn es nicht gesetzt wird, öffnet sich der Link in dem Fenster, bei dem Eure Seite offen ist und der Besucher ist erst mal weg. Das kann man umgehen indem man ein Target setzt. Dies wird nach den Gänsefüßchen der url getrennt mit einem Leerzeichen gesetzt:

target=“_blank“

Manchmal wird auc No-follow verlangt oder ist nötig. Das bedeutet, daß die Suchmaschinen den Link nicht folgen, sondern ignorieren. Zumindest sollen sie das so tun.

Dafür muss das Nofollow-Attribut gesetzt werden und zwar so:

rel=“nofollow“

Unser Link mit den beiden Ergänzungen sieht dann so aus:

<a href=“die url aus dem Browser“ target=“_blank“ rel=“nofollow“> der verlinkte Text </a>

4. Statt einem Linktext ein Bild

Wenn Ihr nun jetzt keinen Text habt, sondern ein Bild, wie z.B. bei den Buchwichtel-Button braucht ihr noch einen HTML-Befehl:

Er fängt wieder mit einem < an.

Dann kommt img für Image. Jetzt weiß der Browser, dass ein Bild kommt.

Damit er weiß, welches er zeigen soll geht es mit src= weiter. Eselsbrücke: src steht für bei mir für „Screen“ Ich weiß, die Brücke hängt, weil das SRC und das scr -een verdreht sind.

Der nächste Teil sitzt wieder in Anführungszeichen und sagt dem Browser, wo das Bild liegt. Also z. B.  bei WordPress geht ihr in die Mediathek, sucht das Bild und dann steht da unten ein ewig langer Text wo das bild ist.  Dieses dann wieder kopieren und wie bei der URL reinsetzen.

Das geht übrigens auch mit fremden Bildern. Da einfach den Link von dem Bild kopieren. Bei FireFox mit der Rechten Maustaste auf das Bild klicken und entsprechend „Grafikadresse“ kopieren. Doch Achtung, nur bei erlaubten Bildern so machen, wie etwa bei meinem Button. Da will ich die Verbreitung, andere mahnen ab und das kostet!

Jetzt muss nur noch der Befehl beendet werden. Da bei Bildern kein Anfang und Ende markiert werden muss, endet der Befehl gleich mit einem />. So jetzt weiß der Browser, daß das Bild zuende ist.

Das alt=“ sinnvolle Beschreibung“ ist eine Erweiterung des Bild-HTML-Befehls, in dem ein Ersatztext hinterlegt werden kann. Dies ist immer dann sinnvoll und nötig, wenn ein Browser keine Bilder anzeigen (soll). Wie etwa bei Handys?! Oder bei sehbehinderten Nutzern. Und auch für Suchmaschinen, denn die sind in erster Linie auch blind. Also bei sinnvoller Beschreibung ist „Bild“ nicht so ideal

So, nun der zusammengesetzte Bild-Befehl:

<img src=“URL des Bildes“ alt=“sinnvolle Beschreibung “  />

Nun ganz einfach statt dem Linktext dieses Konstrukt einfügen und Ihr habt ein verlinktes Bild.

Wie einbauen?

Ich beschreibe das ganze mal bei WordPress, dies gilt aber eigentlich immer dann, wenn man in einen HTML-Modus wechseln kann.

Am einfachsten jetzt mal in einen Blog-Beitrag.

Einfach in den HTML-Modus wechseln und da die HTML-Befehle an gewünschter Stelle einfügen.

In der Sidebar einfach in das Design- Widget wechseln. Dort das Text-Widget auswählen und an den entsprechenden Ort schieben. Wenn es dann aufgeht einfach den HTML-Code einfügen.

Wenn alles gut gegangen ist, dann ist Euer Link nun fertig!

Eventuelle Probleme bei Bildern

auf das Rechtliche gehe ich jetzt nur noch ganz grob ein: Bilderklau ist unerwünscht und kann Ärger machen.

Okay, nun das technische. Wenn das Bild zu groß für z.B. die Sidebar ist, kann es vorkommen, dass es nicht angezeigt wird, oder nur abgeschnitten. Geht dann bitte dahin, dass ihr das Bild verkleinert. Das geht z.B. ganz leicht mit der Windows-Life-Fotogallerie. Das Bild mit der rechten Maustaste anklicken und Größe ändern wählen. (dazu muss es aber bei Euch auf dem Rechner liegen). Oder in Worpress in der Mediathek das Bild auswählen und auf Bearbeiten klicken. Dann steht rechts bei mir Bild skalieren. Das  rechnet dann das ganze Bild kleiner.

Übrigens, die meisten Sidebars sind etwa zwischen 120 bis maximal 300 Pixel groß, nur mal so am Rande und die Meisten haben ihren Text in etwa 500 bis 700 Pixel Breite untergebracht. Also so ungefähr als Richtlinie.

Ich hoffe, Euch somit eine kleine Einleitung an die Hand gegeben zu Haben und vielleicht somit den oft geschimpften Linkgeiz an der Wurzel gepackt zu haben. Denn ich glaube nicht an den Linkgeiz an sich, sondern eher an Faulheit oder besser noch Unwissenheit!