Schritt-für-Schritt-Anleitungen

HTML Goodies für's Bücherregal und Bücherjournals auf www.bookcrossing.com.

Manch einer hat in seinem Profil, also auf seinem Bücherregal bei www.bookcrossing.com, oder gar in den Journals seiner registrierten Bücher einige Verschönerungen, die im wesentlichen nur aus ein paar Zeilen HTML, der Sprache des Webs, bestehen. Ein paar Sachen davon waren bislang in den FAQ gelistet.

Hier versuche ich nun, diese Verschönerungen verständlich wiederzugeben, so daß Du diese ggf. in Dein Profil/Journale einbinden kannst. Um es Dir so einfach wie möglich zu machen, kannst Du den HTML-Code einfach mittels "copy/paste" (Kopieren/Einfügen) übernehmen, und dann brauchst Du nur noch die Daten an sich zu ändern. Der zu übernehmende Text steht ZWISCHEN [code] ... [end-code].

Bevor nun der HTML-Code kommt, erst noch ein paar wichtige Informationen:

1. Es gibt natürlich mehrere Möglichkeiten, um ein gewisses Resultat zu erreichen. In diesen Beispielen werde ich oft 2 Lösungen anbieten: eine "Standard" HTML-Lösung und/oder eine "Cascade Style Sheet (CSS)"-Lösung, die (zum Teil) auf den CSS-Definitionen von BookCrossing.com basiert. Manche Lösungen werden sogar nur auf diesen CSS-Definitionen basieren.

2. Achte bei dem Beispiel-HTML-Code immer darauf, dass Du diesen KOMPLETT kopierst und beim Einfügen Deiner Daten nicht versehentlich wichtigen HTML-Code löschst! Der zu übernehmende Text steht ZWISCHEN [code] ... [end-code].

3. Die meisten HTML-Befehle bestehen aus jeweils 2 "Tags": einem open-Tag (z.B. <b>, <span>, ...) sowie einem close-Tag (z.B. </b>, </span>, ...). Bei solchen Tags ist es wichtig, jeden geöffneten Tag irgendwann wieder zu schließen - geschieht das nicht, wird der Einfluß des Tags über die gesamte Seite gehen. Wenn Du also z.B. einen Kursiv-Tag (<i>) nicht schließt, erscheint die gesamte BookCrossing-Seite in Kursiv-Schrift!

4. Sowohl im Profil auf dem Bücherregal als auch in den Journals der Bücher wird jeder "Zeilenvorschub", also die Benutzung der "Enter"-Taste bzw. "Return"-Taste bzw. "diese große dicke Taste mit dem Pfeil ;)", in eine neue Zeile verwandelt, welches dem HTML-Code <br> entspricht. Im Normalfall ist das nicht so schlimm, aber wenn Du die HTML-Befehle übersichtlich ordnest, wirst Du diese unötigen "Leerzeilen" im Resultat feststellen.
Dagegen hilft leider nur eins: Die HTML-Befehle eins nach dem anderen schreiben, was den Code sehr unübersichtlich macht, aber dafür das Resultat entsprechend übersichtlicher.

Anmerkung von Mirka: Ich löse das Problem, indem ich den Code als Word-Dokument gespeichert und alles, was zusammengehört, in einer bestimmten Schriftfarbe formatiert habe (z.B. gelesene Bücher blau, TBR rot, Ringe grün, etc.). Dann kopiere ich den Code per Copy/Paste ins System, wobei die verschiedenen Farben oder auch "fett", "kursiv" oder anderes nicht mit übernommen werden und also nicht stören. Das macht den Code für mich sehr viel übersichtlicher.

5. Achtet auf die Gänsefüsschen, also ", die MÜSSEN immer paarweise auftreten, sprich, jedes geöffnete Gänsefüsschen MUSS auch wieder geschlossen werden. Denn sonst verhunzt es Dein Profil/Journal - in seltenen Fällen gibt es danach keinen Zugriff mehr!! (Das soll nun keine Panikmache sein, sondern nur ein Hinweis, da sehr gut drauf zu achten!)

Index

1. Veränderungen im Text

Fett, Kursiv, Farbe, Größe, etc.

2. Links

3. Boxen

4. Selectboxen

5. Sonstiges

Alle Bücher auf einer Seite, Cliff's Wish-list, Bilder einbinden, etc.

Irgendwann kommt auch noch eine Anleitung für Tabellen in HTML. Allerdings wäre es besser, auf Tabellen zu verzichten...

Weiterführende Links zu diesem Thema sind:

· selfhtml (deutsch)
· CSS 4 You (deutsch)
· Farben aussuchen: validhtml.com | (einfache) Farben in HTML

nach oben

Zurück zu der Übersicht.