Donnerstag, 18. Januar 2007
Mini HTML Tutorial für Blogger
ht82, 14:39h
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.
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.
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 |
| <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.
... link (2 Kommentare) ... comment