Warum hat Yogalehrer-Online keinen zeitgemäßen, grafischen Editor?

Transkript

1 Befehlsübersicht Das sind die Befehle, die man im Editor verwenden kann Stand: 19. Mai 2010 Allgemeines Die hier aufgeführten Befehle ersetzen meistens ähnlich lautende HTML-Befehle. Es gibt aber auch Befehle, die es sonst nirgends gibt und die nützliche Funktionen in die Webseite rufen, wie z.b. der Befehl [stundenplan]. Wer in Foren unterwegs ist, kennt vielleicht schon einige der Befehle, wie z.b. [b], um Wörter fett auszugeben. Diese Art der Befehle nennt man bulletin-board-code (Forum-Code) oder schlicht BBCode. Warum hat Yogalehrer-Online keinen zeitgemäßen, grafischen Editor? Das ist eine gute Frage. Jeder, der hier zum ersten Mal hinkommt, stellt sich vermutlich genau diese Frage. Die Antwort: Yogalehrer-Online hat keinen grafischen Editor mehr. Experimente mit diversen, vielversprechenden grafischen Editoren brachten alle das selbe Ergebnis: Eine immer mehr zunehmende, nicht mehr behebbare Vermüllung des Quelltextes der Seiten. Immer mehr Fehler, die zum Schluß dazu führten, dass sich entweder der Browser aufhing oder die Seite nur in Teilen, aber in jedem Fall nicht so wie erwartet, angezeigt wurde. Mit BBCode hat man die Chance, seine Fehler wieder zu beheben. Mit grafischen Editoren nicht. Seite 1 von 34

2 Die allgemeine Syntax (Sprachregeln) von BBCode BBCode hält sich im allgemeinen an das Vorbild HTML. Es gilt die Reihenfolge: [Anfangsbefehl] zu formatierender Text [/Endbefehl] Der Endbefehl lautet wie der Anfangsbefehl, hat aber einen Schrägstrich. Beginn der Formatierung: Eckige Klammer auf Befehlskürzel Optionale Argumente Eckige Klammer zu [ B ] --- zu formatierender Text --- Ende der Formatierung: Eckige Klammer auf Schrägstrich Befehlskürzel Eckige Klammer zu [ / B ] Das ist [b] fettgeschriebener Text [/b]. Normaler Text. Ergebnis: Das ist fettgeschriebener Text. Normaler Text. Die Faulenzer-Syntax von Yogalehrer-Online Manche Befehle haben einen Faulenzer-Modus. Hierbei umschließen die eckigen Klammern den gesamten, zu formatierenden Bereich. Das ist [b fettgeschriebener Text]. Normaler Text. Die Faulenzer-Syntax ist nicht so bekannt wie die normale Syntax. Es gibt sie in Yogalehrer-Online, weil sie die Arbeit mit den Webseiten beschleunigen kann und übersichtlich aussieht. In der nun folgenden Befehlsübersicht werden die Faulenzer mit ausgegeben. Das Zurechtklicken der Befehle mit dem Editor erzeugt immer den offiziellen Code, die Faulenzer sind nur über die Handeingabe möglich. Den Faulenzer gibt es nur für ein paar häufig gebrauchte Befehle. Seite 2 von 34

3 Stichwortverzeichnis B b...4 big...5 bild...5 bildgalerie...5f. block...6 C center...7 code...7 D div...7 divbox...8 divclass...9 download...10 E F f...10f. fieldset...11 flag...11 G gbild...12 goname...12 H h h h3...13f. hr...14 html...14 I i...14 K k...15 kontakt...15 kurse...15f. L lbild...16 left...17 lgbild...17 li...18 lkontakt...18f. lmap...19 lrollbox...20 M map...20 N name...21 O orte...22 Q q...22 R rbild...23 rgbild...23f. right...24 rkontakt...25 rmap...25 rollbox...26 rrollbox...26 S small...27 stop...27 stundenplan...28 style...28f. styleclass...29 T table...30 td...30, 33 termine...31 tr...31 U u...32 url...32f. W wiki...33f....4!!...4 Seite 3 von 34

4 !(Buchstabe) (Leerzeichen)!G roße!a nfangsbuchstaben Ergebnis: Großer Erstbuchstabe Große Anfangsbuchstaben (Das Aussehen des Ergebnisses ändert sich in jedem Design) Ein Ausrufezeichen wird ohne Zwischenraum an einen Buchstaben gestellt. Danach kommt ein Leerzeichen. Technik: Dadurch wird der Buchstabe mit der CSS-Klasse firstletter ausgestattet. Abhängig vom gewählten Design sieht der Buchstabe dann jeweils anders aus. Das Aussehen der Klasse firstletter kann im CSS-Modul geändert werden. [ ] Hartes Leerzeichen Normalerweise werden alle aufeinander folgenden Whitespace-Zeichen wie Leerzeichen, Zeilenumbrüche oder Tabulatoren im Browser zu einem einzigen Leerzeichen komprimiert. Das macht nicht etwa Yogalehrer-Online, das machen alle Browser so. Es ist eine Vorgabe in der Definition von HTML. Die Browser müssen das so machen, es ist eine Vorschrift. Das harte Leerzeichen wird nicht komprimiert, es gilt nicht als Whitespace-Zeichen, sondern als Buchstabe. Benutze das harte Leerzeichen, um Abstände zwischen einzelne Worte zu bekommen: Ich brauche mehr[][][][]abstand Ergebnis: Ich brauche mehr Abstand Falsch: Ich brauche mehr Abstand Ergebnis: Ich brauche mehr Abstand [b] text [/b] [b text ] Beispiele: <b> Fetter Text Seite 4 von 34

5 [b]dieser Text wird fettgeschrieben[/b] [b dieser Text wird fettgeschrieben] [big] text [/big] [big text ] <big> Text etwas größer machen [big] macht den Text etwas größer, als er im Moment ist. Das ist normaler Text. [big] Dieser Text wird etwas größer. [/big] Das ist normaler Text. Das ist normaler Text. [big Dieser Text wird etwas größer.] Das ist normaler Text. Das ist normaler Text. Dieser Text wird etwas größer. Das ist normaler Text. [bild (Bildnummer)] <img> Bild als eigene Zeile einbauen Das Bild muss vorher auf der Seite, auf der es verwendet werden soll, hochgeladen werden. Die Bildnummer steht dann in der Übersicht der hochgeladenen Bilder an jedem Bild dran. Jede Seite mit hochgeladenen Bildern hat ein eigenes Bild 1. So wird das erste Bild eingebaut: [bild 1] [bildgalerie (Bildnummer)] <img>+javascript+css Vorschau-Dia für Galeriebild mit jquery-lightbox. Schwebt immer nach links. Seite 5 von 34

6 Siehe auch: [stop] [bildgalerie] stellt ein Bild als Dia in eine Lightbox-Bildergalerie. Javascript muss aktiviert sein. Die Bilder müssen vorher auf der Seite, auf der sie verwendet werden sollen, hochgeladen werden. Die Bildnummer steht dann in der Übersicht der hochgeladenen Bilder an jedem Bild dran. Jede Seite mit hochgeladenen Bildern hat ein eigenes Bild 1. Die Bilder sollten in der größtmöglichen Größe hochgeladen werden, die Yogalehrer-Online zuläßt. So werden die ersten drei Bilder als Dias gezeigt, die beim Draufklicken mit der jquery-lightbox auf die hochgeladene Größe vergrößert werden: [bildgalerie 1][bildgalerie 2][bildgalerie 3] Ergebnis: [block] text [/block] <div style= textalign:justify > Blocksatz, Absatz wird rechtsund linksbündig gleichzeitig [block] macht sowohl die linke, als auch die rechte Kante des Absatzes glatt. So sieht der Text in Büchern und Zeitungen aus. [block]lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo.[/block] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo. Siehe auch: [left], [right] und [center] Seite 6 von 34

7 [center] text [/center] <div style= textalign:center > [center] zentriert den eingeschlossenen Absatz. Absatz zentrieren [center]lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo.[/center] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo. Siehe auch: [left], [right] und [block] [code] text [/code] [code text ] Beispiele: <code> Schreibmaschinentext Das wird [code] Schreibmaschinentext [/code] werden. Das wird [code Schreibmaschinentext] werden. Das wird Schreibmaschinentext werden. [div (style)] bereich [/div] <div> Formatierter Layer [div] umschließt einen rechteckigen Bereich des sichtbaren Bereichs. Es ist die 1:1 Umsetzung des HTML-Befehls <div style= style-anweisungen > Wenn ein bestimmter Bereich einmalig (nicht wiederholend) formatiert werden soll. Alle CSS- Anweisungen sind möglich. Seite 7 von 34

8 [div background-color:white;color:navy;padding:1em;border:solid 3px red]das ist ein Bereich mit blauer Schrift und rotem Rand[/div] [divbox caption ] text [/divbox] <div class= divbox ><div class= divboxhead ><h2> caption </h2><div class= divboxbody > 3 verschachtelte DIV- Anweisungen, die äußere hat die Klasse divbox [divbox] ist für werdende CSS-Experten, die Text in grafisch besonders ausgestalteten Bereichen darstellen wollen. Durch die Verschachtelung ist es möglich, z. B. Grafiken mit runden Ecken als Hintergrundbilder zu benutzen. Im CSS-Modul müssen die Klassen divbox, divboxhead und divboxbody definiert werden. Im Download-Modul müssen die grafischen Hintergrundbilder hinterlegt werden, auf die das CSS dann zugreift. Ist das CSS einmal definiert, kann man diese Box beliebig oft auf allen Seiten verwenden. Damit man sieht, wie das gemeint ist, gibt es ein funktionerendes Beispiel mit dem benötigten CSS und ein paar Grafiken, die man an seine eigenen Bedürfnisse anpassen kann. Viele profesionelle Seiten nutzen ähnliche Techniken der Gestaltung von Informationskästchen. Es ist deutlich mehr Firlefanz möglich, als nur runde Ecken! Die Beschreibung der CSS-Technik: [divbox Das ist eine DivBox]Das ist die Standard-Divbox in Gelb. [/divbox] Die Standard-Divbox, die eigentlich zu keinem Design wirklich gut passt, ist bereits definiert. Bevor man sich den divbox-lehrgang antut, sollte man divclass verstanden und erfolgreich eingestzt haben. Seite 8 von 34

9 Aussehen Standard-Divbox: Mögliches Aussehen mit eigenem CSS: Die Standard-Divbox ist nur auf weißem Hintergrund schön anzusehen, denn der Hintergrund ist Teil des Bildes. Hintergrund: Das selbe Problem. [divclass (Klasse)] text [/divclass] <div class= (Klasse) > Eigene CSS-Klasse auf einen rechteckigen Bereich wirken lassen. [divclass] holt beliebige, selbst definierte CSS-Klassen in die Webseiten. Die im CSS-Modul definierten Klassen gelten für alle Webseiten. Eine Beispiel-Definition im CSS-Modul:.wichtig{ background-color: white; color: red; padding: 1em; font-size: 1.2em; border: solid 3px navy; text-align:center; } Aufruf im Seiteninhalt: [divclass wichtig] Das hier ist sehr wichtig![/divclass] Seite 9 von 34

10 [download (Name)] <a href=... > Downloads zur Verfügung stellen [download] stellt dem Seitenbesucher eine zuvor hochgeladene Datei zur Verfügung. Die Datei muss zuerst unter Arbeitsbereich > Homepage > Downloads hochgeladen werden. Am unteren Ende des Moduls hängt ein Waschzettel, in dem die aktuelle Anleitung zum Hochladen und Benutzen von Downloads findet. In diesem Modul steht der Befehl zum Bereitstellen eines Downloads in der Spalte [download...]. Einfach in das Feld klicken, den Feldinhalt kopieren und in dem Webseiteneditor an der gewünschten Stelle einfügen. [download profiwissen.pdf] [ (Mailadresse)] <a href= mailto:... > Geschützter -Link [ ] erzeugt einen -Link, der beim Anklicken das Mailprogramm des Seitenbesuchers starten will. Der Link ist mit Javascript schwach gegen -Ernteskripte geschützt. Die meisten -Ernter versuchen gar nicht, irgendeinen Schutz zu knacken, deshalb ist der damit gewährte Schutz bei fast 100%. Allerdings: Die -Adresse kann natürlich von Hand übernommen oder von Besuchern in ihr Adressbuch gesammelt werden. Viele Computerviren durchsuchen gezielt die Adressbücher der befallenen Rechner nach -Adressen... [ Aussehen ohne Javascript: ganesha ( Bitte einfügen ) yogalehrer-online.de Aussehen mit Javascript: ganesha@yogalehrer-online.de [f] text [/f] <b> Fetter Text Beispiele: Seite 10 von 34

11 [f]dieser Text wird fettgeschrieben[/f] [f dieser Text wird fettgeschrieben] [fieldset (Bezeichnung)] <fieldset><legend> Umrandung mit Bezeichnung um Inhalte Mit [fieldset] kann man einen Bereich umranden. Die Bezeichnung des umrandeten Bereichs steht dann oben links in der Umrandung drin. [fieldset Überschrift]Das ist ein umrandeter Bereich mit Überschrift[/fieldset] [flag <code> <size>] <img> Eine kleine Flagge [flag] gibt eine kleine Flagge aus. Damit kann man im Text z. B. Fremdsprachige Abschnitte markieren. Der Code ist der gleiche Wert, wie er auf den Nationalitätsplaketten von Kraftfahrzeugen steht. Size ist die Höhe der Flagge (die Breite ändert sich ebenfalls). Erlaubt sind Größen von 8 bis 20. Werden größere oder kleinere Werte angegeben, dann wird auf den erlaubten Wert eingeschränkt. Die Flagge ist 35 Pixel breit und 20 Pixel hoch. Beispiele: [flag d12] [flag gb12] [flag f12] [flag se 20] [flag e 111] Seite 11 von 34

12 [gbild (Bildnummer)] <img> Yogalehrer-Online Galeriebild als eigene Zeile einbauen Mit [gbild] kann man eines der bereits vorhandenen Bilder aus der Galerie von Yogalehrer- Online für die Webseite übernehmen. Die Bilder sind im Balken Yogalehrer-Online Galerie Bilder enthalten und können dort angesehen werden. Man muss sich die Nummer des gewünschten Bildes merken. [gbild 19] [goname (Zielname) (Beschriftung)] <a href= #(Bezeichnung) > Seiteninternes Linkziel anspringen [goname] erzeugt einen seiteninternen Link auf einen anderen Teil der selben Webseite. Man benötigt auch noch den Befehl [name] im Zielbereich, um das Ziel zu definieren. Der Zielname darf keine Umlaute und keine Leerzeichen enthalten. Am einfachsten ist es, wenn man nur Ziffern und Buchstaben verwendet. Alles nach dem Zielnamen ist Beschriftung. Dadurch kann man den seiteninternen Link in den fließenden Text der Seite einbauen. Seite 12 von 34

13 Beachten Sie auch unsere [goname neuheiten neuen Angebote] für den Sommer. Beachten Sie auch unsere neuen Angebote für den Sommer. Wirkung: Beim Klick auf den Link neuen Angebote wird der Teil der Webseite mit den neuen Angeboten ins Blickfeld gescrollt. Damit das Beispiel funktioniert, muss an der Stelle mit den neuen Angeboten auf der selben Seite der Befehl [name neuheiten] stehen. Siehe auch: [name] [h1] text [/h1] [h1 text ] <h1> Überschrift 1 [h1] ist die größte Überschrift. [h2] und [h3] fallen jeweils etwas kleiner aus. Jede Seite sollte mit einer großen Überschrift beginnen. Der danach folgende Text darf dann auch mit kleineren Überschriften gegliedert sein. Überschriften werden von Suchmaschinen bevorzugt untersucht: Ist da etwa ein Keywort drin? Je nach gewähltem Design kann eine Überschrift auch mit grafischer Schriftart ersetzt werden. Beispiele: [h1]das ist eine große Überschrift[/1] [h1 Das ist eine große Überschrift] Das ist eine große Überschrift [h2] text [/h2] [h2 text ] <h2> Überschrift 2 [h2] ist etwas kleiner als [h1]. Siehe auch [h1] [h3] text [/h3] [h3 text ] <h3> Überschrift 3 Seite 13 von 34

14 [h3] ist etwas kleiner als [h2]. Siehe auch [h1] oder [h2] [hr] <hr> Horizontale Trennlinie [hr] bedeutet horizontal ruler und macht ein horizontales Lineal. Gemeint ist die horizontale Trennlinie. Das Aussehen der Trennlinie kann im CSS-Modul geändert werden. [hr] (Beachte den Strich über diesem Satz) [html] html-code [/html] Echtes HTML eingeben. [html] erlaubt es, richtigen Quelltext in die Seite einzubauen. So gibt es Webseiten, die sogenannte Badges oder andere Widgets zur Verfügung stellen. Üblicherweise handelt es sich um ein Stückchen Javascript-Code, der etwas von einer anderen Webseite lädt und auf der eigenen Webseite anzeigt. Bei der Eingabe ist zu beachten, dass einfache Anführungszeichen ' innerhalb des HTML- Bereiches dazu führen, dass die Seite nicht gespeichert wird. [i] text [/i] [i text ] Beispiele: <i> Kursiver Text Normal: Mitten im Satz soll [i]kursiver Text[/i] stehen. Faulenzer: Mitten im Satz soll [i kursiver Text] stehen. Seite 14 von 34

15 Mitten im Satz soll kursiver Text stehen. [k] text [/k] [k text ] Beispiele: <i> Kursiver Text Normal: Mitten im Satz soll [k]kursiver Text[/k] stehen. Faulenzer: Mitten im Satz soll [k kursiver Text] stehen. Mitten im Satz soll kursiver Text stehen. [kontakt] Erklärung Interaktives Kontaktformular [kontakt] fügt ein Kontaktformular in die Seite ein. Das Aussehen und Verhalten des Kontaktformulars kann man im Arbeitsbereich > Homepage > Kontaktformular festlegen. Die aktuelle Anleitung befindet sich im Waschzettel am Seitenende des Moduls. [kontakt] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. [kurse] Modul Kursliste ausgeben Erlklärung: Seite 15 von 34

16 [kurse] gibt alle aktuellen Kurse in der selben Art aus, wie die Kursliste in der offenen Yogaliste angezeigt wird. Das Aussehen kann sich je nach gewähltem Design leicht ändern. Damit man die Veranstaltungsorte über die Links anspringen kann, muss noch [orte] am Seitenende aufgerufen werden, um die Liste der Trainingsorte auszugeben und damit der Link zum Trainingsort in der Kurstabelle sein Ziel auf der selben Seite findet. [h2 Die aktuellen Kurse] [kurse] [h2 Veranstaltungsort] [orte] Siehe auch: [orte], [stundenplan] [lbild (Bildnummer)] <img> Bild nach links schweben lassen, Text ist rechts davon. Siehe auch: [bild], [stop] [lbild] fügt ein bereits hochgeladenes Bild in die Seite ein. Das Bild schwebt nach links, der Rest der Seite ordnet sich rechts davon an. Man kann diesen Befehl dazu verwenden, um ein Bild mit Text zu erklären oder einfach, um den laufenden Text mit einem Bild aufzulockern. [lbild] und [rbild] sollten am Zeilenanfang stehen. [lbild 1]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros Seite 16 von 34

17 metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. [left] text [/left] <div style= textalign:left > Text linksbündig [left] macht einen linksbündigen Absatz. (Das ist eigentlich das normale Absatzformat.) [left]lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo.[/left] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo. Siehe auch: [right], [center] und [block] [lgbild (Bildnummer)] <img> Yogalehrer-Online Galeriebild nach links schweben lassen, Text ist rechts davon. [lgbild] fügt ein Bild aus der Galerie von YO in die Seite ein. Das Bild schwebt nach links, der Rest der Seite ordnet sich rechts davon an. Man kann diesen Befehl dazu verwenden, um den Seite 17 von 34

18 laufenden Text mit einem Bild aufzulockern. [lgbild] und [rgbild] sollten am Zeilenanfang stehen. [lgbild 19]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. Siehe auch: [gbild], [stop] [li] <li> Listenelement für [ol] und [ul] [li] fügt ein Listenelement in eine [ol] oder [ul] Liste ein. [ol][li]erstes Element [li] zweites [li] das Letzte [/ol] 1. erstes Element 2. zweites 3. das Letzte [lkontakt] Erklärung Kontaktformular links schwebend. Seite 18 von 34

19 [lkontakt] fügt ein nach links schwebendes Kontaktformular in die Seite ein. Nachfolgender Text wird rechts daneben angeordnet. Das Aussehen und Verhalten des Kontaktformulars kann man im Arbeitsbereich > Homepage > Kontaktformular festlegen. Die aktuelle Anleitung befindet sich im Waschzettel am Seitenende des Moduls. [lkontakt] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. Siehe auch: [stop] [lmap] Google-Map links schwebend einbauen [lmap] bringt die selbe Google-Map, wie sie in der offenen Yogaliste ist, in die Webseite und läßt sie nach links schweben. Folgender Text wird rechts davon angeordnet. Leider klappt die Google- Map nur in etwa 95% der Fälle, die geografischen Daten der Firma Tele Atlas haben noch viele Löcher und sind nicht 100% zuverlässig. [lmap] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. Die Map schwebt nach links, der folgende Text wird rechts daneben angeordnet. [lmap] verhält Seite 19 von 34

20 sich wie [lbild]. Es ist sinnvoll, am Ende des Textes den Befehl [stop] einzugeben, um wieder einen sauberen Neuanfang zu haben. [lrollbox] Animierten Bereich links schwebend einfügen. [lrollbox] baut einen animierten Bereich in die Webseite ein und läßt ihn nach links schweben. Nachfolgender Text ordnet sich rechts daneben an. Die Rollbox muss zuvor im Arbeitsbereich > Homepage > Rollbox definiert werden. Die aktuelle Anleitung zur Rollbox findest du im Waschzettel am Seitenende des Moduls Rollbox. [lrollbox] Vergleichbar mit [lbild]. Siehe auch: [stop] [map] Google-Map einbauen [map] bringt die selbe Google-Map, wie sie in der offenen Yogaliste ist, in die Webseite. Leider klappt die Google-Map nur in etwa 95% der Fälle, die geografischen Daten der Firma Tele Atlas haben noch viele Löcher und sind nicht 100% zuverlässig. [lmap] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. Seite 20 von 34

21 Die Google-Map wird wie der [bild]-befehl in den Text eingefügt und steht für sich alleine. [name (bezeichnung)] <a name= (bezeichnung) > Ziel für seiteninternes Verlinken festlegen. [name] legt das Ziel für einen [goname] Link fest. Es wird keine grafische Ausgabe erzeugt. Dieser Befehl hat keine Ausgabe, man sieht ihn auf der Webseite nicht mehr. Deshalb kann man [name] mitten im Seiten-Text dort ausbringen, wo für goname interessante Ziele erwähnt werden. [name neuheiten][h3 Die neuen Sommerkurse: Sonne, Sand und Yoga] Die neuen Sommerkurse: Sonne, Sand und Yoga (Man sieht es nicht!) Siehe auch: [goname] [ol] liste [/ol] <ol> Nummerierte Liste OL bedeutet: Ordered List. Eine nummerierte Liste erzeugen. Innerhalb des [ol] [/ol] Konstrukts dürfen nur mit [li] angekündigte Elemente auftauchen. Seite 21 von 34

22 [ol][li]erstes Element [li] zweites [li] das Letzte [/ol] 4. erstes Element 5. zweites 6. das Letzte [orte] Alle Trainingsorte auflisten. [orte] wird gebraucht, um für [kurse], [termine] und [stundenplan] das Ziel für den Link zum Trainingsort bereit zu stellen. Immer, wenn [kurse], [termine] oder [stundenplan] auf einer Seite benutzt wird, muss auf der selben Seite irgendwo der Befehl [orte] stehen. [orte] [q] text [/q] [q text ] <blockquote> Eingerückter Text [q] (Quote) ist an sich schon ein Faulenzer für den HTML-Befehl blockquote. Dieser wird wenig genutzt, wohl weil seine HTML-Bezeichnung blockquote zu lang geraten ist, für das Wenige, das er tut. [q] ist verwandt mit [ol] und [ul], die beide ebenfalls einrücken. Normaler Text [q eingerückter Text] und nochmal normaler Text. Seite 22 von 34

23 Normaler Text eingerückter Text und nochmal normaler Text. [rbild (Bildnummer)] <img> Bild nach rechts schweben lassen, Text ist links davon. Siehe auch: [stop] [rbild] fügt ein bereits hochgeladenes Bild in die Seite ein. Das Bild schwebt nach rechts, der Rest der Seite ordnet sich links davon an. Man kann diesen Befehl dazu verwenden, um ein Bild mit Text zu erklären oder einfach, um den laufenden Text mit einem Bild aufzulockern. [rbild] und [lbild] sollten am Zeilenanfang stehen. [rbild 1]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. [rgbild (Bildnummer)] <img> Yogalehrer-Online Galeriebild nach rechts schweben lassen, Text ist links davon. Siehe auch: [stop] Seite 23 von 34

24 [rgbild] fügt ein Bild aus der Galerie von YO in die Seite ein. Das Bild schwebt nach rechts, der Rest der Seite ordnet sich links davon an. Man kann diesen Befehl dazu verwenden, um den laufenden Text mit einem Bild aufzulockern. [rgbild] und [lgbild] sollten am Zeilenanfang stehen. [rgbild 19]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. [right] text [/right] <div style= textalign:right > Text rechtsbündig [right] macht den markierten Absatz rechtsbündig. [right]lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo.[/right] Seite 24 von 34

25 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo. Siehe auch: [left], [center] und [block] [rkontakt] Erklärung Kontaktformular rechts schwebend [rkontakt] fügt ein nach rechts schwebendes Kontaktformular in die Seite ein. Nachfolgender Text wird links daneben angeordnet. Das Aussehen und Verhalten des Kontaktformulars kann man im Arbeitsbereich > Homepage > Kontaktformular festlegen. Die aktuelle Anleitung befindet sich im Waschzettel am Seitenende des Moduls. [rkontakt] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. Siehe auch: [stop] [rmap] Google-Map rechts schwebend einbauen [rmap] bringt die selbe Google-Map, wie sie in der offenen Yogaliste ist, in die Webseite und läßt sie nach links schweben. Folgender Text wird rechts davon angeordnet. Leider klappt die Google- Map nur in etwa 95% der Fälle, die geografischen Daten der Firma Tele Atlas haben noch viele Löcher und sind nicht 100% zuverlässig. Seite 25 von 34

26 [rmap] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. Die Map schwebt nach rechts, der folgende Text wird links daneben angeordnet. [rmap] verhält sich wie [rbild]. Es ist sinnvoll, am Ende des Textes den Befehl [stop] einzugeben, um wieder einen sauberen Neuanfang zu haben. [rollbox] Animierten Bereich einfügen [rollbox] baut einen animierten Bereich in die Webseite ein. Die Rollbox muss zuvor im Arbeitsbereich > Homepage > Rollbox definiert werden. Die aktuelle Anleitung zur Rollbox findest du im Waschzettel am Seitenende des Moduls Rollbox. [rollbox] Vergleichbar mit [bild] [rrollbox] Animierten Bereich rechts schwebend einfügen. [rrollbox] baut einen animierten Bereich in die Webseite ein und läßt ihn nach rechts schweben. Nachfolgender Text ordnet sich links daneben an. Die Rollbox muss zuvor im Arbeitsbereich > Homepage > Rollbox definiert werden. Die aktuelle Anleitung zur Rollbox findest du im Waschzettel am Seitenende des Moduls Rollbox. Seite 26 von 34

27 [rrollbox] Vergleichbar mit [rbild]. Siehe auch: [stop] [small] text [/small] [small text ] <small> Text etwas kleiner machen. [small] macht den Text etwas kleiner, als er im Moment ist. Das ist normaler Text. [small] Dieser Text wird etwas kleiner. [/small] Das ist normaler Text. Das ist normaler Text. [small Dieser Text wird etwas kleiner.] Das ist normaler Text. Das ist normaler Text. Dieser Text wird etwas kleiner. Das ist normaler Text. [stop] <div style= clear:both ></ div> Beendet Schwebezustände von Bildern und Textbereichen [stop] beendet Schwebezustände von Seitenbereichen und erlaubt einen sauberen Neuanfang, ohne dass sich schwebende Bereiche ineinander verhaken und einen Treppeneffekt erzeugen. Eine einfache Aufgabe ist es, das Bild eines Yogatrainers nach links schweben zu lassen und rechts daneben die Vita des Trainers als Text auszugeben. Das klappt natürlich. Unter dieser Bild- Textkombination soll der nächste Trainer in gleicher Weise ausgegeben werden. Was passiert? Das nächste Bild hängt irgendwo weiter links, der Vita-Text zum Bild ist noch weiter nach rechts verschoben. Es sieht greulich aus. Wenn man genügend oft die Eingabetaste zwischen den beiden Trainerabsätzen drückt, dann sieht es irgendwann normal aus. Bis der Text wieder geändert wird. Mit [stop] nach jedem Trainertext kommt das nächste [lbild] sofort freiwillig ganz nach links. Das Problem liegt darin, dass HTML den hinter einem mit float:left ins Schweben geratenen Seite 27 von 34

28 Seiteninhalt einfach ebenfalls nach links schweben läßt. [stop] erzeugt einen neuen, leeren Absatz, der den style clear:both enthält. Clear:both bedeutet: Lösche beide Schwebezustände (links und rechts). [stundenplan] Interaktiven Stundenplan ausgeben. [stundenplan] ersetzt [kurse] und [termine] und gibt einen interaktiven Stundenplan aus, der die Kurse und Termine wochenweise anzeigt. Auf der selben Seite muss noch der Befehl [orte] angegeben werden, damit der Link zum beschriebenen Ort auch funktioniert. [h2 Die aktuellen Kurse und Termine] [stundenplan] [h2 Veranstaltungsort] [orte] Das Aussehen des Stundenplans ändert sich mit dem gewählten Design. Siehe auch: [orte], [kurse] und [termine] [style (Argumente)] text [/style] <span style= (Argumente) > Einen Teil des Textes formatieren. Seite 28 von 34

29 [style] formatiert einen Textbereich, ohne dass ein neuer Absatz angelegt wird. Mit [style] kann man mitten im Text die Formatierung ändern. Die Argumente sind durch Semikolon voneinander getrennte CSS-Anweisungen. Mitten im Satz steht hier [style color:red]roter Text[/style], der sich vom Rest abhebt. Mitten im Satz steht hier roter Text, der sich vom Rest abhebt. [styleclass (klasse)] <span class= klasse > Eine CSS-Klasse auf einen Bereich mitten im Text wirken lassen. [styleclass] holt beliebige, selbst definierte CSS-Klassen in die Webseiten. Im Gegensatz zu [divclass] macht [styleclass] keinen neuen Absatz. Die im CSS-Modul definierten Klassen gelten für alle Webseiten. Eine Beispiel-Definition im CSS-Modul:.wichtig{ background-color: white; color: red; padding: 1em; font-size: 1.2em; border: solid 3px navy; text-align:center; } Aufruf im Seiteninhalt: Das hier ist Text davor. [styleclass wichtig] Das hier ist sehr wichtig![/styleclass] Das hier ist Text danach. Siehe auch [divclass] Anmerkung: Die im Beispiel definierte Klasse wichtig kann sowohl für [divclass] als auch für [styleclass] verwendet werden. Man muss die Klasse nicht zweimal definieren. Seite 29 von 34

30 [table] tr td [/table] <table> Tabelle [table](=tabelle) ist ein HTML-Befehl, mit dem man eine Tabelle erzeugen kann. Jeder Inhalt in [table] muss in einer [tr] (table row = Tabellenzeile) stehen. Jeder Inhalt in einer [tr] muss in einer [td] (table definition = Tabelleninhalt, Zelle) stehen. [table][tr][td] Spalte 1[td] Spalte 2 [td] spalte 3 [tr][td] bla bla [td] mittlere Spalte [td] rechte Spalte[/table] [td] <td> Tabellenzelle [td] (table definition=tabelleninhalt) ist eine Tabellenzelle und führt alle Inhalte der Tabelle an. Alle Zellen-Inhalte müssen mit [td] eingeläutet werden. Alle [td] in einer Tabelle müssen von einem [tr] gestartet werden, sie müssen Teil einer Tabellenzeile sein. [table][tr][td] Spalte 1[td] Spalte 2 [td] spalte 3 [tr][td] bla bla [td] mittlere Spalte [td] rechte Spalte[/table] Seite 30 von 34

31 [termine] Erlklärung: Terminliste ausgeben [termine] gibt alle aktuellen Termine in der selben Art aus, wie die Terminliste in der offenen Yogaliste angezeigt wird. Das Aussehen kann sich je nach gewähltem Design leicht ändern. Damit man die Veranstaltungsorte über die Links anspringen kann, muss noch [orte] am Seitenende aufgerufen werden, um die Liste der Trainingsorte auszugeben und damit der Link zum Trainingsort in der Kurstabelle sein Ziel auf der selben Seite findet. [h2 Die aktuellen Termine] [termine] [h2 Veranstaltungsort] [orte] Siehe auch: [kurse], [stundenplan] [tr] <tr> Tabellenzeile [tr] (table row=tabellenzeile) kündigt eine Tabellenzeile an. [tr] muss innerhalb eines [table] [/table] Konstrukts auftauchen. Die einzelnen Zellen werden mit [td] angekündigt. [tr] enthält meistens mehrere [td] Zellen. Seite 31 von 34

32 [table][tr][td] Spalte 1[td] Spalte 2 [td] spalte 3 [tr][td] bla bla [td] mittlere Spalte [td] rechte Spalte[/table] [u] text [/u] [u text ] Beispiele: <u> Unterstrichener Text Normal: Mitten im Satz soll [u] unterstrichener Text[/u] stehen. Faulenzer: Mitten im Satz soll [u unterstrichener Text] stehen. Mitten im Satz soll unterstrichener Text stehen. Anmerkung: Unterstrichener Text in Webseiten wird vom Seitenbesucher als Link zum Anklicken verstanden. Deshalb sollte man auf das Unterstreichen verzichten und den Text auf andere Art und Weise hervorheben. [url (link) (bezeichnung)] <a href= (link) >(bezeic hnung)</a> Anklickbarer Link. (bezeichnung) = sichtbar, (link) wird ausgeführt. [url] erzeugt einen Link auf eine andere Webseite. Wenn der Link nicht mit beginnt, wird das Ziel in der eigenen Domäne gesucht. Das zu vergessen, ist der häufigste Fehler, der beim Eingeben eines externen Links gemacht wird. Syntax: [url <Linkziel> <Anzuklickender Text>] Seite 32 von 34

33 Das ist ein Link zu [url Google]. Das ist ein Link zu Google. Fehler: Das ist kein Link zu [url Google]. (Es fehlt das ) [wiki (wikiwort) (bezeichnung)] <a href=... > Wikipedia-Link zu de.wikipedia.org. Manchmal ist ein Link zu einem Eintrag bei Wipipedia die leichteste Art, ein kompliziertes Thema erklären zu lassen. Als wikiwort bezeichne ich das Wiki-interne Schlagwort, mit dem man das Thema bei Wikipedia.org findet. Mit bezeichnung ist der allgemein gebräuchliche Name des gesuchten Themas gemeint. Die Kunst ist es, das wikiwort zu finden, das manchmal ganz anders aussieht, als man denkt. Wikiwort finden: Ich möchte auf meiner Homepage den Begriff CSS (Cascaded Style Sheets) mit Wikipedia verlinken. Damit das klappt, muss ich erstmal die Wikipedia-Seiten besuchen und mich nach CSS umschauen. Also ab nach de.wikipedia.org. Oben links in der Ecke befindet sich das Suchfeld, wo ich meinen zu erklärenden Begriff eingebe. Ich tippe CSS und klicke dann dann auf Artikel. Ich bekomme eine neue Seite und stelle fest, dass CSS für etwa 25 verschiedene Begriffe in den Sparten Computer, Medizin, Musik und Sonstiges verwendet wird. Mein gesuchter Begriff ist ganz oben: Cascading Style Sheets. Ich klicke drauf und bekomme die gesuchte Seite mit den Erläuterungen und weiteren, hilfreichen Links zum Thema CSS. In der Adresszeile des Browsers steht nun: Die Zeichenfolge hinter wiki/ ist das gesuchte Wikiwort. Seite 33 von 34

34 Hier ist die [wiki Cascading_Style_Sheets Erklärung zum Thema CSS]. Das Aussehen ändert sich je nach gewähltem Design. Seite 34 von 34