Im Blogger-Blogg kann man ganz einfach drauf los schreiben (Editierfenster Verfassen), man kann den Eintrag aber auch mit HTML Codes individuell gestalten (Editierfenster Html bearbeiten).
Letzteres hat Tücken, weil bei jedem Wechsel von Verfassen nach Html bearbeiten vorhandener Code interpretiert und "übersetzt" wird.

Der HTML-Code "<" und ">" ist (aus diesem Grunde) in weiterer Folge durch "[" und "]" dargestellt.

Die Zeilenschaltung (enter) wird im Editierfenster Html bearbeiten nicht wie sonst üblich neutral interpretiert, sondern als Absatzschaltung [/p].
HTML Code darf deshalb im Editierfenster Html bearbeiten nicht mittels Zeilenschaltung strukturiert werden!
Jede Zeilenschaltung im HTML-Code erzeugt im Blogger-Blog eine SICHTBARE, und mitunter ungewollte Leerzeile.

Absätze:

[p]Es war einmal ein...[/p] erzeugt einen Absatz:

Es war einmal ein...

Abweichend von der "üblichen" HTML Praxis definiert auch die normale Zeilenschaltung enter im Blogger-Blog einen Absatz.

Absätze ausrichten:

[p align="left"]Es war einmal ein Mann, der...[/p] ergibt linksbündig:

Es war einmal ein Mann, der hatte einen Schwamm. Der Schwamm war ihm zu nass, da legt er sich ins Gras. Das Gras war ihm zu grün, da fuhr er nach Berlin. Berlin war ihm zu groß, da kauft er sich ein Schloss. Das Schloss war ihm zu klein, da kauf er sich ein Schwein. Das Schwein war ihm zu fett...

[p align="center"]Es war einmal ein Mann, der...[/p] ergibt zentriert:

[p align="right"]Es war einmal ein Mann, der...[/p] ergibt rechtsbündig:

[p align="justify"]Es war einmal ein Mann, der...[/p] ergibt Blocksatz:

Beeinflussung der Schrift

:
HTML lässt 2 Methoden der Schriftbeeinflussung zu:
Die physische Textauszeichnung definiert die Schriftart unmittelbar, zB als fett oder kursiv.
Die logische Textauszeichnung gibt Hinweise auf deren Inhalt, zB empathisch oder stark betont. Der Web-Browser entscheidet darüber, wie er diese Inhalte darstellt. Durch Verwendung von Stylesheets kann die logische Textauszeichnung nach Wunsch formatiert werden.

Physische Auszeichnung:

[b]fett[/b] ergibt: fett
[i]kursiv[/i] ergibt: kursiv
[tt]dickengleich (Teletyper)[/tt] ergibt: dickengleich (Teletyper)
[u]unterstrichen[/u] ergibt: unterstrichen
[strike]durchgestrichen[/strike] ergibt: ~~durchgestrichen~~
[s]durchgestrichen[/s] ergibt: ~~durchgestrichen~~
[big]größer als normal[/big] ergibt: größer als normal
[small]kleiner als normal[/small] ergibt: kleiner als normal
[sup]hochgestellt[/sup] ergibt: ^hochgestellt
[sub]tiefgestellt[/sub] ergibt: _tiefgestellt

Logische Auszeichnung:

[em]empathisch; betont[/em] ergibt: empathisch; betont
[strong]stark betont[/strong] ergibt: stark betont
[code]Quelltext[/code] ergibt: Quelltext
[samp]Beispiel[/samp] ergibt: Beispiel
[kbd]Benutzereingabe[/kbd] ergibt: Benutzereingabe
[var]Variable[/var] ergibt: Variable
[dfn]Definition[/dfn] ergibt: Definition
[abbr]Abkürzung[/abbr] ergibt: Abkürzung
[acronym]Akronym[/acronym] ergibt: Akronym
[cite]Quelle, Autor[/cite] ergibt: Quelle, Autor
Das eigentliche Zitat wird mit [q] oder [blockquote]ausgezeichnet:
[q cite="Quelle"]Zitat mit Quellangabe[/q] ergibt: Zitat mit Quellangabe
Der Inhalt "Quelle" bleibt ein Hinweis im HTML-Code. Er wird vom Browser nicht angezeigt.
[blockquote][p]Absatz für Zitate[/p][/blockquote] ergibt:

Absatz für Zitate

Überschriften:

HTML unterscheidet 6 Überschriftenebenen:
[h1]1. Gliederungsebene[/h1] ergibt:

1. Gliederungsebene

Man sieht nichts! Ich vermute, die 1. Gliederungsebene ist für den Titel des Postings reserviert.

[h2]2. Gliederungsebene[/h2] ergibt:

2. Gliederungsebene

[h3]3. Gliederungsebene[/h3] ergibt:

3. Gliederungsebene

[h4]4. Gliederungsebene[/h4] ergibt:

4. Gliederungsebene

[h5]5. Gliederungsebene[/h5] ergibt:

5. Gliederungsebene

[h6]6. Gliederungsebene[/h6] ergibt:

6. Gliederungsebene

Die Eingabehilfe des Blogger-Blog hält immer wieder Überraschungen für den HTMLler bereit. Wie schon weiter oben angemerkt, wird beim Wechsel vom Fenster Verfassen nach Html bearbeiten das Geschriebene interpretiert. Im Zuge dessen wird unter Anderem die Physische Textauszeichnung in Logische Textauszeichnung übersetzt.
Wer beispielsweise Text mit [i]Text[/i] als kursiv codiert, der möge sich nicht wundern, wenn er bei einer späteren Überarbeitung seines Eintrags stattdessen [em]Text[/em] vorfindet.

Schriftarten

[font].....[/font] definiert den Bereich, für den eine Schriftformatierung gilt.
Das Element darf streng nach HTML nur Line-Elemente beinhalten (solche, die keinen Absatz erzeugen), und keine Block-Elemente. Das heißt, zwischen [p].....[/p] muss der Fond immer wieder neu festgelegt werden.
Folgende Attribute definieren den Font:
size .. Zahl zwischen 1 und 7 (3=normal) bzw +Zahl oder -Zahl für relative Unterschiede,
color .. Schriftfarbe; Code analog Farbe von Linien (siehe weiter unten)
face .. Schriftart; Name einer oder mehrerer Schriftarten getrennt durch Kommata; Der Browser stellt die erste dar, die er darstellen kann.

Das Element basefont definiert die Formatierung für alle weiteren Elemente, bis zum Ende des Dokuments oder bis es durch ein neues basefont-Element abgelöst wird.
basefont ist "inhaltsleer", der korrekte Syntax lautet: [basefont ...../]
Als Attribute gelten jene von [font].

Beispiele:
font size 7 --- font size 1 --- font size +1 --- font size -2 --- rot --- grün --- blau
Text in Schriftart Avalon
Text in Schriftart Wide Latin
Text in Schriftart Verdana
Es werden nur verfügbare Schriftarten angezeigt, sonst bleibt face wirkungslos.

Diverse Listen:

Aufzählliste:

[ul][li]Listeneintrag[/li][li]Listeneintrag[/li][/ul] ergibt:

Listeneintrag
Listeneintrag

Bullet Circle:

[ul type="circle"][li]Listeneintrag[/li][li]Listeneintrag[/li][/ul] ergibt:

Listeneintrag
Listeneintrag

Bullet Square:

[ul type="square"][li]Listeneintrag[/li][li]Listeneintrag[/li][/ul]

Listeneintrag
Listeneintrag

Bullet Disc:

[ul type="disc"][li]Listeneintrag[/li][li]Listeneintrag[/li][/ul] ergibt:

Listeneintrag
Listeneintrag

Nummerierte Liste:

[ol][li]Listeneintrag[/li][li]Listeneintrag[/li][/ol] ergibt:

Listeneintrag
Listeneintrag

Alphabetische Liste (a):

[ol type="a"][li]Listeneintrag[/li][li]Listeneintrag[/li][/ol] ergibt:

Listeneintrag
Listeneintrag

Alphabetische Liste (A):

[ol type="A"][li]Listeneintrag[/li][li]Listeneintrag[/li][/ol] ergibt:

Listeneintrag
Listeneintrag

Römische Liste (i):

[ol type="i"][li]Listeneintrag[/li][li]Listeneintrag[/li][/ol] ergibt:

Listeneintrag
Listeneintrag

Römische Liste (I):

[ol type="I"][li]Listeneintrag[/li][li]Listeneintrag[/li][/ol] ergibt:

Listeneintrag
Listeneintrag

Trennlinie und ihre Eigenschaften

:
[hr/] ergibt:

Die Trennlinie kann beeinflusst werden:
Syntax: [hr width="Breite" size="Höhe" align="Ausrichtung"]
Für Breite eine Zahl wie z.B. 200 für Anzahl Pixel oder einen Prozentwert wie z.B. 50% angeben.
Für Höhe eine Zahl wie z.B. 8 für Anzahl Pixel angeben.
Für Ausrichtung einen der folgenden Werte notieren:
left = linksbündig,
center = zentriert,
right = rechtsbündig.
Beispiel:
[hr size="8"] ergibt eine 8 Pkt dicke Linie über die volle Weite:

[hr width="50%" align="center"] ergibt eine Linie mit 50% Weite:

[hr width="200" align="center"] ergibt eine zentrierte Linie mit 200 Pkt Weite:

[hr color="00ff00"] ergibt Limegrün (hexadezimal #00FF00):

Weitere Farbencodes:
black #000000
gray #808080
maroon #800000
red #FF0000
green #008000
lime #00FF00
olive #808000
yellow #FFFF00
navy #000080
blue #0000FF
purple #800080
fuchsia #FF00FF
teal #008080
aqua #00FFFF
silver #C0C0C0
white #FFFFFF

Weitere Farbencodes:
16 Farben siehe de.selfhtml.org
216 Farben siehe de.selfhtml.org

nach forschen

Donnerstag, 16. April 2009

HTML Textstruktur im Blogger-Blog