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:
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="right"]Es war einmal ein Mann, der...[/p] ergibt rechtsbü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="justify"]Es war einmal ein Mann, der...[/p] ergibt Blocksatz:
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...
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:
tiefgestelltLogische 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, AutorDas 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 ---
blauText in Schriftart AvalonText in Schriftart Wide LatinText in Schriftart VerdanaEs 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 #FFFFFFWeitere Farbencodes:
16 Farben siehe
de.selfhtml.org216 Farben siehe
de.selfhtml.org
