Die WG

Oder: Ein Tutorial für Textgestaltung in Blogeinträgen (schwarte-Proof)

Damit die Blogeinträge in Zukunft so richtig supertoll werden, und damit ab jetzt wirklich jeder genau das ausdrücken kann was er will, stelle ich nun die wichtigsten HTML-Befehle (auch Tags genannt) für Blogger vor:

Umschließenden 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 Schreibmaschinenschrift 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>, einfach <b><i><u>nichts</u></i></b>." folglich "Peter sagte nichts, einfach 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="https://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 das einzig hier erwähnte. 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:

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


"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 unserem Blog bitte Bilder mit einer maximalen Breite von 470 einbinden. Die Höhe ist egal - die muss wie gesagt nur im richtigen Verhältnis zur Breite stehen. Außerdem bitte kein Hotlink von Bildern von anderen Servern, 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":



Die Originalseitenverhältnisse von flickr waren b x h = 600 x 800.
Die neue Breite b = 470 muss ich wegen unserem Blogdesign wählen, die neue Höhe h = 627 errechnet sich aus
h = (470 / 600) x 800.

Servus Hannes
Sehr löblich, denn so ein hoffnungsloser Fall, wie ich, hat es soagr verstanden. Kriegst n Daumen =)