Mini HTML Tutorial für Blogger
Ein Tutorial für Textgestaltung in Blogeinträgen


Um Blogeinträge besser zu gestalten und um genau das ausdrücken zu können was man will, ist es sehr ratsam, sich wenige html-Befehle anzuschauen und zu merken - oder zumindest zu bookmarken. Daher stelle ich nun die wichtigsten HTML-Befehle (auch Tags genannt) für Blogger vor:




Umschließende Tags für Textformatierung:

Diese beschreiben das Textaussehen (Fett, Kursiv, Unterstrichen) in einem bestimmten Bereich. Also gibt es einen Start- und einen End-Tag; alles was dazwischen steht, wird entsprechend dargestellt.

Tag Was er tut Wie's aussieht
<b>Text</b> Stellt "Text" fett dar Text wird zu Text
<i>Text</i> Stellt "Text" kursiv dar Text wird zu Text
<u>Text</u> Stellt "Text" unterstichen dar Text wird zu Text
<strike>Text</strike>  Stellt "Text" durchgestrichen dar Text wird zu Text
<sup>Text</sup> Stellt "Text" hochgestellt dar Text wird zu Text
<sub>Text</sub> Stellt "Text" tiefgestellt dar Text wird zu Text
<small>Text</small> Stellt "Text" kleiner dar Text wird zu Text
<big>Text</big> Stellt "Text" größer dar Text wird zu Text
<tt>Text</tt> Stellt "Text" in dicktengleicher Schrift dar Text wird zu Text


Außerdem lassen sich die umschließenden Tags schachteln und kombinieren; demnach wird aus "Peter sagte <b><i><u>nichts</u></i></b>." folglich "Peter sagte nichts".





Umschließender Tag für Links:

Um Links einzubinden, braucht man den <a>-Tag. Dieser muss durch Attribute definiert werden, die sagen wohin der Link zeigen soll und wo er geöffnet werden soll. Das ganze lässt sich an einem Beispiel am besten erklären:

Wenn man "Das ist <a href="http://wgleben.blogger.de/" target="_blank">die WG</a>!" schreibt, wird daraus "Das ist die WG!"

Also gibt href das Linkziel an und target legt fest, wo das ganze geöffnet wird. "_blank" bedeutet neues Fenster, und das sollte immer so drinstehen, sonst kommen die meisten Leute nicht mehr auf den Blog zurück. Auch der Unterstrich ist wichtig, sonst wird der Link in einem Fenster mit dem Namen "blank" geöffnet, was natürlich auch Mumpitz ist. Der <a>-Tag selbst umschließt den Text, der angezeigt wird.




Stand-Alone-Tags

Stand-Alone-Tags beschreiben im Gegensatz zu den umschließenden Tags keinen Bereich, sondern ein punktuelles Element, wie z.B. ein Bild. Dies sei auch der einzig hier erwähnte Stand-Alone-Tag. der Bild-Tag lautet <img>. Wohlgemerkt; da es kein umschließender Tag ist, sondern ein Stand-Alone-Tag gibt es keinen End-Tag namens </img> - bitte nie verwenden.

Um ein Bild einzubinden braucht man die Bildadresse und die Größe des Bildes. Ein Beispiel dazu:

<img src="http://www.nutmountain.de/Galerie/data/media/129/DSCF6399.jpg" border="0" width="448" height="336"> bindet dieses Bild ein:


Wohingegen <img src="http://www.nutmountain.de/Galerie/data/media/129/DSCF6511.jpg" border="0" width="448" height="336"> uns dieses zeigt:


"border" gibt dabei den Bildrahmen an, und den wollen wir nicht. Durch die Attribute "width" und "height" kann man nun die Größe der Bilder einstellen. Wichtig ist nur, dass man das Seitenverhältnis eines Bildes beibehält. So kann ich die beiden Bilder oben mit den Seitenmaßen 100x75 als Minibilder anzeigen; <img src="http://www.nutmountain.de/Galerie/data/media/129/DSCF6399.jpg" border="0" width="100" height="75"> und <img src="http://www.nutmountain.de/Galerie/data/media/129/DSCF6511.jpg" border="0" width="100" height="75"> zeigt

und

Gibt man nun aber falsche Verhältnisse an (jetzt 470x50), sieht es nicht mehr so gut aus:





Wichtig: In jedem Blog gibt es ein bestimmtes Layout, daher ist es meist sinnvoll Bilder mit einer bestimmten maximalen Breite (hier im Beispiel 470) einzubinden. Die Höhe ist in den meisten Blogplattformen egal - die muss wie gesagt nur im richtigen Verhältnis zur Breite stehen. Außerdem sollte niemals Hotlinks auf Bilder von anderen Servern setzen, es sei denn das ist dort ausdrücklich erlaubt. Im allgemeinen ist das nämlich verboten.



Der <img>-Tag lässt sich auch gut mit dem <a>-Tag verbinden; sehr praktisch ist das für die Einbindung von flickr-Bildern. Dort ist nämlich hotlinking genau dann erlaubt, wenn das Bild mit einem Backlink auf flickr versehen ist. Dazu ein Beispiel:
Schreibe ich <a href="http://www.flickr.com/photos/ht82/360116045/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/124/360116045_2a5e464586_o.jpg" width="470" height="627" alt="Zigarettensession 2" border="0"></a>, wird dieses Bild angezeigt und "klicklich":

Zigarettensession 2

Die Originalseitenverhältnisse von flickr waren b1 x h1 = 600 x 800.
Die neue Breite (hier b2 = 470) muss ich des Blogdesigns halber wählen, die neue Höhe (h2 = 627) errechnet sich aus
h2 = (b2 / b1) x h1, also hier h2 = (470 / 600) x 800.


Vergessen Sie nicht, diese Seite zu bookmarken, wenn Ihnen das Tutorial gefallen hat.

Fehler: RSS-Feed konnte nicht gelesen werden...

Fehler: keine Produkte im RSS-Feed gefunden...



Bitte besucht auch
diesen T-Shirt Shop


Fehler: RSS-Feed konnte nicht gelesen werden...

Fehler: keine Produkte im RSS-Feed gefunden...



Bitte besucht auch
diesen T-Shirt Shop


Fehler: RSS-Feed konnte nicht gelesen werden...

Fehler: keine Produkte im RSS-Feed gefunden...



Bitte besucht auch
diesen T-Shirt Shop


Fehler: RSS-Feed konnte nicht gelesen werden...

Fehler: keine Produkte im RSS-Feed gefunden...



Bitte besucht auch
diesen T-Shirt Shop