<< zurück zum Index

Schritt-für-Schritt-Anleitungen

---

HTML Goodies fürs Bücherregal und für Bücherjournale auf www.bookcrossing.com.

1. Veränderungen im Text (Fett, Kursiv, Farbe, etc.)

Diese HTML-Codes funktionieren NICHT im Forum, nur im Profil bzw. Journal der Bücher!

 

A. Fettschrift:
HTML: [code] <b>DEIN TEXT</b> [end-code]

CSS: [code] <span style="font-weight:bold;">DEIN TEXT</span> [end-code]
  daraus wird:  DEIN Text

 

B. Kursiv:
HTML: [code] <i>DEIN TEXT</i> [end-code]

CSS: [code] <span style="font-style:italic;">DEIN TEXT</span> [end-code]
  daraus wird:  DEIN Text

 

C. Unterstrichen:
HTML: [code] <u>DEIN TEXT</u> [end-code]

CSS: [code] <span style="text-decoration:underline;">DEIN TEXT</span> [end-code]
  daraus wird:  DEIN Text

 

D. Durchgestrichen:
HTML: [code] <s>DEIN TEXT</s> [end-code]

CSS: [code] <span style="text-decoration:line-through;">DEIN TEXT</span> [end-code]
  daraus wird:  DEIN Text

· 3 von 4 können auch beliebig kombiniert werden (unterstrichen und durchgestrichen geht nicht zusammen ;), allerdings ist dann bei HTML darauf zu achten, daß der zuletzt geöffnete "Tag" zuerst geschlossen wird:

Fett und Kursiv:
HTML: [code] <b><i>DEIN TEXT</i></b> [end-code]
  daraus wird:  DEIN TEXT

· bei CSS, also der Verwendung von style=, brauchst Du nur die verschiedenen style-Definitionen hintereinander zu schreiben, getrennt mit Semikolons (Punkt-Komma, ";"):

Fett und Kursiv:
HTML: [code] <span style="font-weight:bold; font-style:italic;">DEIN TEXT</span> [end-code]
  daraus wird:  DEIN TEXT

HINWEIS: Die HTML-Codes für Unterstrichen <u> ... </u> sowie Durchgestrichen <s> ... </s> sind eigentlich schon lange kein HTML-Standard mehr. Aber da diese immer noch sehr gebräuchlich sind...

 

E1. Farbe:
HTML: [code] <font color="FARBE">DEIN TEXT</font> [end-code]   daraus wird:  DEIN TEXT (Farbe = red)

FARBE kann folgendes sein: red/red (Rot)  |   blue/blue (Blau)  |   green/green (Grün)  |   silver/silver (Silber)  |   yellow/yellow (Gelb)  |   navy/navy (Marineblau, fast schwarz)  |   aqua/aqua (Hellblau)  |   black/black (Schwarz)  |   white/white (Weiß)  |   fuchsia/fuchsia (Dunkelrosa, fuchsienfarbig)  |   gray/gray (Grau)  |   lime/lime (ein helleres Grün mit Gelbanteilen)  |   maroon/maroon (Kastanienbraun)  |   olive/olive (Olivgrün)  |   purple/Purple (purpur, eine Mischung aus Rotlila und Schwarz - in meinen Augen)  |   teal/teal ("Dahlie", ein ziemlich dunkles Grün)

(Mit Dank an BC-Mitglied TelmaVahey für die schönen Farbumschreibungen :-) )

 

E2. Farbe (alternative Möglichkeit):
HTML: [code] <font color="#123456">DEIN TEXT</font> [end-code]
  daraus wird:  DEIN TEXT (Farbe = #CC0033)

· Statt #123456 kommt natürlich ein Wert hinein, welcher "hexadezimal" eine der vielen FarbMöglichkeiten darstellt. Letztendlich ist die Auswahl unbegrenzt, wobei einige Farbkombinationen gegenüber bestimmten Hintergrundfarben keinen Sinn machen (z.B. Marineblau auf Schwarz). Wem also die obige "Standard"-Auswahl der Farben nicht genügt, der hat hiermit zwar mehr Möglichkeiten, dafür muß er sich ein wenig mehr mit der Materie auseinandersetzen. Folgende zwei Links müßten aber Klarheit in dieses System bringen:
Erstmal eine kurze Einführung dieses Zahlensystems auf Deutsch: Farben in HTML (Quelle SelfHTML)
Und hier 2 Seiten, wo Du viele Farbcodierungen siehst sowie damit experimentieren kannst: validhtml.com | 216 Colors

· Natürlich kann die Farbe auch mit Fett, Kursiv und Unterstrichen kombiniert werden; auch hier gilt die gleiche Regel: Der zuletzt geöffnete "Tag" muß zuerst geschlossen werden.

 

F1. Textgröße (Vordefinierte BookCrossing-Werte):
CSS: [code] <span class="WERT">DEIN TEXT</span> [end-code]
  daraus wird:  DEIN Text (WERT = tinysansfixed)

Als WERT kannst Du folgendes einsetzen:
smallsansfixed    (Das sieht so aus)
tinysansfixed    (Das sieht so aus)
xxtiny    (60%)(Das sieht so aus)
xtiny    (70%)(Das sieht so aus)
tiny    (80%)(Das sieht so aus)
sm    (90%)(Das sieht so aus)
med    (100%)(Das sieht so aus)
lg    (115%)(Das sieht so aus)
xlg    (150% + FETT)(Das sieht so aus)
Natürlich gibt es noch einige andere, aber diese sind zu spezifisch, so daß ich sie hier nicht aufliste. Außerdem könnte ich derzeit kein Beispiel zeigen, weil ich diese auch nicht auf der German Support Site eingebunden habe. ;) Doch ich glaube, daß diese Möglichkeiten ausreichen, Profile und Journals zu verschönern...

 

F2. Textgröße (mittels font-size in der style-Definition):
CSS: [code] <span style="font-size:140%;">DEIN TEXT</span> [end-code]
  daraus wird:  DEIN Text

· Nun gibt es mehrere Möglichkeiten, die Größe des Textes festzulegen. Auf alle einzugehen, würde den Rahmen dieser Anleitung sprengen, daher beschränke ich mich auf die Angaben in "Prozent" (%), wobei: je größer der Wert, desto größer der Font. Am besten ein wenig mit den Werten zwischen 60% (seeeeeehhhrr klein) bis 200% (recht groß) experimentieren - und am besten orientierst Du Dich an den BookCrossing-Seiten, damit das Gesamtbild einheitlich wirkt :)

 

G. Textspacing (mittels letter-spacing in der style-Definition):
CSS: [code] <span style="letter-spacing:0.2em;">DEIN TEXT</span> [end-code]
  daraus wird:  DEIN Text

· Auch hier gilt, daß die Maßangabe (0.2em) in verschiedenen Möglichkeiten angegeben werden kann. Da es um ein "Buchstaben-auseinander-Reißen" ;) geht, bleibe ich bei einer Erklärung der Möglichkeiten. Mittels eines Wertes von 0.1em und 0.9em kannst Du die Buchstaben unterschiedlich weit auseinanderziehen. Der Nutzen? Vielleicht für den einen oder andereren Titel :)

· Die class- als die style-Definitionen können gemeinsam in der span-Definition genutzt werden. Natürlich werden ggf. gewisse Werte überschrieben werden, daher solltest Du sehr sorgfältig prüfen, was Du zusammen nutzt. Ein class="xtiny" macht nun mal keinen Sinn zusammen mit einer style="font-size:140%";... (und welcher von beiden sich letztendlich durchsetzt, wird sich dann zeigen. ;)

· Auch können mehrere classes in einer class= kombiniert werden. Die werden dann einfach mit Leerzeichen voneinander getrennt. Ähnlich können auch mehrere styles in einer style= kombiniert werden. Diese werden wiederum mit Semikolons (aka Punkt-Komma = ";") getrennt. In dieser Anleitung wird es bestimmt das eine oder andere kombinierte Beispiel geben, also die Augen aufhalten ;)

 

H. Text ausrichten (Zentriert, Rechtsbündig, Blocksatz):
HTML: Linksbündig
[code] <p>DEIN TEXT</p> [end-code]
CSS: Linksbündig
[code] <p style="text-align:left">DEIN TEXT</p> [end-code]
  daraus wird:  

DEIN Text

HTML: Zentriert
[code] <p align="center">DEIN TEXT</p> [end-code]
CSS: Zentriert
[code] <p style="text-align:center">DEIN TEXT</p> [end-code]
CSS: (nur zentriert ist als CLASS auf BookCrossing.com definiert!)
[code] <p class="centered">DEIN TEXT</p> [end-code]
  daraus wird:  

DEIN Text

HTML: Rechtsbündig
[code] <p align="right">DEIN TEXT</p> [end-code]
CSS: Rechtsbündig
[code] <p style="text-align:right">DEIN TEXT</p> [end-code]
  daraus wird:  

DEIN Text

HTML: Blocksatz
[code] <p align="justify">DEIN TEXT</p> [end-code]
CSS: Blocksatz
[code] <p style="text-align:justify">DEIN TEXT</p> [end-code]
  daraus wird:  

DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text DEIN Text

· Text, der speziell ausgerichtet werden soll, muß immer in einem Absatz <p> ... </p>definiert werden. In HTML wird mittels align="?????" unterschiedlich ausgerichtet und in CSS mittels der class="centered"-Definition (ist von BookCrossing.com definiert) nur zentriert.

HINWEIS: Falls Du noch die Möglichkeit <center> ... </center> kennst - nun, das funktioniert auch. Allerdings ist diese Möglichkeit inzwischen kein Standard mehr, auch wenn dies von vielen Browsen noch verstanden wird.

 

HTML-Goodies:  Veränderungen am Text | Links | Boxen | Select-Boxen | Sonstiges | zurück zum Index | nach oben