Das Zeitalter der VisualisierungDu hast ein schönes Foto gemacht und willst es nun in deinen Blog einbinden?
Blogger-Dienste ermöglichen das ohne in den Code gehen zu müssen. Muss ich als Blogger also wirklich wissen, was sich hinter den Kulissen abspielt? Und wenn ja warum?
Warum ist der Image-Tag für mich als Blogger von Bedeutung?
- Wichtige Grundlagen wie das alt-Attribut sind für jeden Blog-Betreiber und Bild-Poster gleich doppelt wichtig: aus Fairnessgründen und SEO-Eigennutz! (SEO zu dt. Suchmaschinen Optimierung)
- Für vieles braucht es nur ein paar einfache Klicks ohne HTML-Vorkenntnisse
- Falls der Blogger-Dienst mal macht, was er will und nicht was ihr wollt, könnt ihr ihn mit ein paar HTML-Kenntnissen schnell wieder auf eure Seite ziehen.
Aussehen von Tags im Allgemeinen
Ein Tag steht immer in spitzen Klammern, fängt mit dem Namen an und kann einige Eigenschaften enthalten. Er sieht im Allgemeinen so aus: <meinTag>
Oft umschließt ein Tag einen Bereich. Ein Kästchen-Tag kann z.B. einen Text umschließen.
Dazu wird der Anfang und das Ende des Tags gekennzeichnet – das Ende erkennt man am Querstrich:
<meinTag> … meinBereich… </meinTag>
Der Image-Tag
Unser Bild schließt in den nachfolgenden Fällen keinen Bereich ein und sieht deshalb ganz nackt so aus: <img>
Nur ist das Bild nie nackt, es hat noch einige Eigenschaften und davon gibt es genau zwei, die unerlässlich sind. Alle anderen Eigenschaften sind optional.
Das Image mit den zwei unerlässlichen Attributen
<img src="Hier kommt die Bildaresse (URL) hin" alt="Hier kommt ein Text hin, der kurz den Inhalt des Bildes beschreibt" >
Src steht für Source (dt. Quelle) und ist unbedingt notwendig, um überhaupt ein Bild zu haben, das angezeigt werden kann. Über Rechtsklick auf ein Bild kann die URL entweder direkt unter „Bildadresse“ oder über „Eigenschaften“ abgerufen werden. Oft (nicht immer) enden die Bildadressen mit .png oder .jpg
Alt steht für den alternativen Text. Unser Image würde eigentlich mit der Angabe der Bild-Quelle schon funktionieren. Zu verstehen, warum es unbedingt notwendig ist, den alt-Text zu pflegen ist nicht mehr ganz so einfach. Im folgenden versuche ich den Nutzen und die Notwendigkeit des alt-Attributes zu erklären:
- Es gibt Browser, die zeigen keine Bilder an und Benutzer, die deaktivieren das automatische Laden von Bildern. Auch diesen Benutzern soll es ermöglicht werden zu erfassen, was das Bild, was sie nicht sehen denn eigentlich abbildet. Sie sehen also stattdessen den alt-Text.
- Es gibt außerdem Computerprogramme wie die von Suchmaschinen (Google & Co) und Browser, die nur Texte lesen z.B. für Blinde. Solche Programme können Bilder nicht „sehen“ und somit nicht raten, was sie darstellen. Sie greifen auf das alt-Attribut zurück, um zu erfassen, was die Bilder darstellen.
- Ein ganz simpler Punkt zum Schluss: Wir Blogger benutzen ja auch gerne externe Bildadressen, z.B. von einem Buchcover. Nimmt ein Verlag dieses Cover aus dem Netz, läuft unser Link ins Nirvana und wir sehen das typische rote Kreuzchen, wo einmal das schöne Bild gewesen ist. Ärgerlich für unsere Leser, die nicht wissen, was dort mal für ein Bild war. Der alt-Text bietet wenigstens eine kleine Erklärung, welches Bild hier nun gerade fehlt.
<img src="Bild-URL" alt="Alternativer Text" title="Bild-Titel" height="10px;" width="15px;" >Der Titel wird als Tooltip (Mini-Pop-Up mit Beschreibung der Graphik) beim Mouseover/Hover des Bildes angezeigt und kann deshalb zusätzliche Informationen zum Bild enthalten.
Der Internet Explorer 7, sowie seine Vorgänger stellen das alt-Attribut als Tooltip da. Das ist allerdings nicht als HTML-Standard definiert, deswegen sollte man auf jeden Fall für Tooltips das title-Attribut benutzen.
Mit den Eigenschaften „height“ und „width“ lassen sich Höhe und Breite des Bildes verändern. Ohne sie wird das Bild in der Originalgröße angezeigt. Bei blogspot lassen sich ohne in den Code zu gehen nur vier Standardgrößen auswählen. Das schränkt auf Dauer sehr ein. Ihr könnt auch nur eins der beiden Attribute angeben, dann passt sich das zweite praktischer Weiser an. Doch Vorsicht: Dadurch wird euer Bild nicht komprimiert! Nur weil ihr es kleiner darstellen lasst, verringert sich z.B. nicht die Ladezeit des Bildes.
Wichtig ist die Angabe in der Maßeinheit Pixel (px) und das Semikolon am Ende vor den Hochkoma. Für die Maßeinheit bekommt man durch ausprobieren schnell ein Gefühl.
Die beiden Größen-Attribute können übrigens auch im style-Attribute beschrieben werden.
Dieses Attribut werde ich bald in einem extra Post erklären (Comming Soon: „Zusatzfunktionen eines Bildes in HTML/CSS“).
Geht das mit blogspot auch ohne in den Code gehen zu müssen?
Natürlich! Die meisten von euch wissen längst, wie sie mit blogspot Bilder hinzufügen.
Und viele von euch wissen bestimmt auch schon, wie man das alt- und das title-Attribut pflegt:
Auf dem zweiten Screenshot seht ihr auch die vier Standartgrößen + die Originalgröße, die ihr zur Auswahl habt. Möchtet ihr die Größe eures Bildes individuell anpassen, müsst ihr allerdings in den Code gehen und dort das height und/oder width-Attribut anpassen.
Aber auch alle anderen Attribute könnt ihr natürlich einfach im Code anpassen.
Einen Link auf das Bild legen
Als letztes hinterlegen wir einen Link, denn das ist häufig sehr hilfreich.
Auch auf meinem Blog wird viel durch Graphiken verlinkt. Jeder Button ist z.B. einen Graphik, hinter der ein Link liegt.Das geht auch nur im Code, ist aber ganz einfach.
Ihr erinnert euch, dass es Tags gibt, die Bereiche einschließen. Der Link ist so ein Tag. Er sieht so aus:
<a href="Hier kommt die URL hin, auf die ihr verlinken wollt" >Wenn ihr mit blogspot arbeitet und euer Bild mit Hilfe der obigen Screenshots eingefügt habt, dann werdet ihr im Code sehen, dass der Image-Tag automatisch in einen Link-Tag eingebettet wurde. Dieser automatisch generierte Link verweist ganz einfach wieder auf die Bild-URL.
... der Bereich, der verlinkt wird z.B. ein Text oder euer Img-Tag...
</a>
Das könnt ihr für euch nutzen, wenn ihr einen eigenen Link auf euer Bild legen wollt: Ihr müsst nur noch die Bild-URL, die bei dem href-Attribut in eurem Link-Tag (<a href="URL">) hinterlegt ist auf eure Wunsch-URL umändern.
Hier kommt nun ein abschließendes Beispiel, wo alles Erklärte bentutzt wird.
Links das Bild, rechts der dazugehörige HTML-Code:
<a href="http://buecher-garten.blogspot.de/" >
<img src="http://www.weekendnotes.com/im/008/09/plant-a-tree-free-trees-free-trees-gold-coast.jpg" alt="Beispielbild in gruen mit Blaettern" title="Hier ist ein Beispielbild" height="200" width="200" />
</a>
Das war's auch schon mit den Standartattributen.
Ihr möchtet mehr erfahren?
Im nächsten HTML-Post dreht sich alles um erweiterte HTML-Attribute eines Bildes. Wie mache ich ganz einfach die Ecken meines Bildes rund? Und ganz rund oder nur ein bisschen? Wie füge ich meinem Bild einen Mouseover-Effekt hinzu, uvm.
Ich hoffe ich konnte euch ein paar interessante Sachen über die HTML-Standardfunktionen eines Bildes erzählen. Auch für Blogger, die sich Blogger-Diensten wie blogspot zum Postschreiben bedienen sind die Kenntnisse über den Image-Tag wichtig und nützlich.
Liebe Grüße
Mehr zum Thema findet ihr z.B. hier:
Keine Kommentare:
Kommentar veröffentlichen