Der WYSIWYG-Editor
Einführung
What you see is what you get (WYSIWYG) ist ein Begriff aus den 1980iger Jahren, sozusagen am Anfang der Computerei, als man versuchte formatierte Texte mit Tabellen und Bildern so auf den Bildschirm zu bekommen, wie sie später auf einem Ausdruck auch auf Papier erscheinen. Das Thema war schnell "State of the Art" und geriet in Vergessenheit.
Heute erlebt WYSIWYG eine Renaissance im Zusammenhang mit web-basierten Editoren, wo es darum geht, formatierte Texte mit Tabellen und Bildern schon im Editor so darzustellen, wie sie später als "HyperText-Markup-Language" (HTML) -Dokument in einem beliebigen Internet-Browser erscheinen.
Man muss sich klarmachen: alles was man in dem Editor im Browser anstellt, muss in einem, möglicherweise weit entfernten, Server umgesetzt und ausgeführt werden. Dabei kommt es natürlich zu längeren Reaktionszeiten.
Besonders spürbar ist das bei der Rechtschreibprüfung und den Suchfunktionen. Darüberhinaus gibt es einige Besonderheiten beim Copy & Paste auf die ich im Folgenden noch näher eingehe.
Gleich zu Beginn sei gesagt das dieser CK-Editor V3.x, wie er offiziell heißt, natürlich auch eine englisch-sprachige Dokumentation hat, auf die Sie gerne zurückgreifen können, falls hier etwas unklar ist oder unerwähnt bleibt.
Bei den Text-Eingabe-Feldern in den Drupal-Formularen kann gewählt werden zwischen
- Klartext
- voll HTML
Klartext
Gezeigt wird ein einfacher Rahmen, in den Sie den Cursor (Zeiger) platzieren können und losschreiben. Die einfachen Textbearbeitungs-Funktionen wie Auswählen, Ausschneiden, Einfügen von Text sind hier natürlich möglich aber jegliche Form von Formatierung gehen für die Darstellung verloren. Bilder, Tabellen, Links etc. sind nicht möglich.
Menü für volles HTML
In der Einstellung "volles HTML" zeigt der CK-Editor dieses Menü:
Es sieht dem vorigen Menü sehr ähnlich und enthält zusätzlich Funktionen für
- Anrisstext-Markierung
- I-Frames
- Schriftart
- Schriftgröße
- Schriftfarbe
Wenn Sie den CK-Editor "voll HTML" betreiben können Sie aus anderen Dokumenten (Writer, Word, Calc, Excel etc. und anderen Internet-Seiten) Inhalte per Drag & Drop in Ihr Dokument kopieren. Dabei wird alles, Textformatierungen, Bilder und Tabellen mitkopiert.
Der CK-Editor ist in der Lage, Bilder auf zwei grundsätzlich unterschiedliche Arten zu behandeln
- Eingebettet (embedded)
- Referenziert
Eingebettet bedeutet, dass jeder einzelne Bildpunkt (Pixel) des Bildes in HTML kodiert wird und mit dem übrigen Inhalten des Dokuments in der Datenbank gespeichert wird. Die Größe eines Eintrags in der Datenbank ist auf 10 Megabyte begrenzt. Das ist mit vielen kleinen, oder wenigen großen Bildern schnell erreicht.
Referenziert heißt, dass ein Bild vorher an eine bestimmte Stelle im Dateisystem des Servers "hochgeladen" wurde. Im aktuell editierten Text wird das Bild über eine Referenz (Link) geladen und dargestellt.
Daraus ergibt sich folgende Regel:
- Eingebettete Bilder sollten ein Höhe/Breite von 300 Pixeln nicht überschreiten
- Größere Bilder müssen erst hochgeladen und später im Dokument unter
"/sites/default/files/" referenziert werden.
Grundsätzlich sollte man mit den Begriffen Fließtext, automatischer Zeilenumbruch und Absatz vertraut sein, bevor man anfängt einen Text im CK-Editor zu schreiben.
Ach und noch etwas Generelles, alle der nachfolgend erklärten Dialoge besitzen einen Steckreiter "Erweitert". Auf diese Möglichkeiten gehe ich im Rahmen diese Tutorials nicht näher ein, da diese Funktionen sehr gute HTML-Kenntnisse voraussetzen.
Steuerfunktionen
QuellcodeAnsicht | Vollbild | BlockAnzeige |
Der CK-Editor erlaubt eine Umschaltung zwischen der WYSIWYG-Darstellung des Dokuments und seiner HTML-Darstellung. Für erfahrenen HTML-Programmierer ist das sicherlich eine gute Möglichkeit irgendwelche speziellen Eigenschaften der HTML-Sprache zu nutzen. Aber in unserem Kontext ist es keine gute Idee im HTML-Code Änderungen vorzunehmen. Die Block Anzeige ist ebenfalls mehr für HTML-Programmierer gedacht.
Eine sehr nützliche Funktion ist Vollbild. Vollbild blendet den Drupal-Kontext komplett aus und stellt das gesamte Browser-Fenster zur Dokumenten-Bearbeitung zur Verfügung. Man darf allerdings nicht vergessen zum Schluss Vollbild wieder abzuschalten und das Drupal-Formular zu speichern.
Die wichtigsten Steuerfunktionen, das Öffnen und das Speichern eines Dokuments sind im CK-Editor nicht möglich!
Zum Öffnen eines Dokumentes müssen Sie in Drupal das Dokument suchen,auswählen und auf Bearbeiten klicken. Damit öffnet sich das entsprechende Drupal Formular, in dem Sie in den Editor gelangen.
Speichern des Dokument erfolgt ausschliesslich über den Speichern-Button des Formulars.
Text bearbeiten
Rückgängig (Undo)
Rückgängig | Wiederherstellen |
Ganz zu Anfang die wichtigste Funktion "Undo", wenn man beim Bearbeiten des Dokuments einen Fehler gemacht hat! Man kann die letzten 20 Aktionen, die man an seinem Dokument durchgeführt hat, rückgängig machen. Die Funktien lässt sich auch mit "Strg-z" aufrufen.
Wiederherstellen nimmt das letzte Rückgängig zurück. Die Funktien lässt sich auch mit "Strg-y" aufrufen.
Markieren
|
|
AllesMarkieren |
Sie müssen immer exakt die Inhalte markieren, die Sie, in welcher Weise auch immer, bearbeiten wollen. Das erfolgt grundsätzlich dadurch, dass Sie bei
- gedrückter linker Maus-Taste (LMT) den Inhalt mit dem Zeiger überstreichen bzw..
- den Zeiger auf den Anfang des Inhalts setzen und das Ende mit Shift-LMT festlegen.
Auf diese Weise lassen sich auch gemischte Inhalte markieren.
Einzelne Worte lassen sich auch per LMT-Doppelklick und ganze Zeilen mit LMT-Dreifachklick markieren. Blockorintierte Einstellungen wie Schriftformat (z.B. Überschrift) oder ein Link lassen sich markieren, indem man innerhalb des Blocks irgendwohin klickt.
Bilder, Tabellen und I-Frames werden mit einfachem LMT- oder RMT-Klick markiert. Bei RMT-Klick öffnet sich zudem noch das kontextabhängige Bearbeitungsmenü. Daneben gibt es die Funktion "Alles markieren" die alle Inhalte des gesamten Dokuments markiert.
Copy & Paste
Ausschneiden | Kopieren | FormatLöschen |
Die Schere (Ausschneiden) oder Strg-x ist die Funktion zum Löschen von, sowohl einzelnen ausgewählten Zeichen, als auch ganzen Passagen ihres Dokuments. Sie können dazu auch die Taste "rückwärts Löschen" oder "Entfernen" benutzen.
Kopieren (Strg-c) bedeutet, den ausgewählten Inhalt in die Zwischenablage nehmen um ihn an anderer Stelle per "Einfügen" wiederverwenden zu können. Ausschneiden, Kopieren und Einfügen werden auch oft über RMT angeboten, beziehen sich auf Server-Aktionen die in unserem Kontext nicht möglich sind.
Einfügen | NurTextEinfügen | AusWordEinfügen |
Bei einem Klick auf Einfügen, "nur Text Einfügen" oder "aus Word Einfügen" öffnet sich der Einfügen-Dialog. Auch hier wird man darauf hingewiesen, dass ein direktes Einfügen kontextbedingt nicht funktioniert und man möge mit Strg-v arbeiten (oder der Taste Einfügen). Allerdings, wenn man sich angewöhnt mit den Strg Kürzeln oder der Tastatur zu arbeiten, braucht man die o.g fünf Symbole auch nicht mehr.
Einzig "Format löschen" ist nützlich, wen man es denn braucht, z.B. man hat etwas per Drag & Drop übernommen und kennt die einzelnen Formatierungen nicht.
Suchen & Ersetzen
Suchen | Ersetzen |
Suchen und Ersetzen benutzen den gleichen Dialog mit zwei Steckreitern. Es ist möglich den Suchtext anzugeben und die Suche zu steuern
- Groß-/Kleinschreibung berücksichtigen
- Nur ganze Worte suchen
- das ganze Dokument durchsuchen
Ersetzen bietet zusätzlich ein Feld für den Ersatztext und die Möglichkeit alle Vorkommen zu ersetzen.
Rechtschreibprüfung
Rechtschreibprüfung | RechtschreibprüfungSCAYT |
Die in den CK-Editor eingebaute Rechtschreibprüfung ist vom deutschen Wortschatz her, nicht besonders leistungsfähig. Zudem verwirrt das Dialog-Fenster auch noch mit Werbung.
Aber es funktioniert, Sie können im Wortschatz nicht vorhandene Wörter
- gemäß der Vorschläge abändern lassen
- das Wort zum Wortschatz hinzufügen
- den Vorschlag ignorieren
- das Wort immer ignorieren
Die Optionen erlauben die Einstellung
- Wörter mit Großbuchstaben nicht ändern
- Wörter mit Zahlen nicht ändern
- Wörter mit Klein- bzw. Großbuchstaben nicht ändern
- Domänennamen nicht ändern
Außerdem gibt es die Möglichkeit ein oder mehrere eigene Wörterbücher anzulegen und zu verwalten, aber das wird über Browser-Cookies realisiert und ist nicht empfehlenswert.
Was auch funktioniert ist die schreib-begleitende Rechtschreibprüfung SCAYT. Sie ist recht unaufdringlich und macht durch rote Unterstreichung auf Fehler aufmerksam. SCAYT liefert keinen Vorschlag zur richtigen Schreibweise.
Text formatieren
Schriftformat
SchriftFormat | Schriftart | Schriftgröße |
Das Schriftformat, die Schriftart und die Schriftgröße lassen sich per Drop down Menü auswählen. Das Schriftformat bezieht sich auf einen gesamten Block, d.h. der Block in dem der Zeiger sich befindet wird umformatiert. Das gilt für Schriftart und Groesse nicht.
Einige Beispiele:
Formate | ||
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet |
Normal | |
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
|
Normal(div) | |
Lorem ipsum dolor sit amet |
Formatiert | |
Lorem ipsum dolor sit amet | Adresse | |
Lorem ipsum dolor sit amet |
H1 |
Überschrift |
Lorem ipsum dolor sit amet |
H2 | Überschrift |
Lorem ipsum dolor sit amet |
H3 | Überschrift |
Schriftarten | ||
Lorem ipsum dolor sit amet |
Arial |
36 |
Lorem ipsum dolor sit amet | Comic Sans MS |
24 |
Lorem ipsum dolor sit amet |
Georgia |
18 |
Lorem ipsum dolor sit amet |
Tahoma | 14 |
Lorem ipsum dolor sit amet |
Times New Roman | 12 |
Lorem ipsum dolor sit amet |
Verdana | 8 |
Schriftfarbe
Schriftfarbe | Schrifthintergrund |
Schriftfarbe und Schrifthintergrund besitzen ein Drop down Menü, wie z.B. Schriftformat, zur schnellen Auswahl einiger vordefinierter Farben. | ||
|
||
Findet man die geeignete Farbe nicht in der Auswahl, so kann man über "Weitere Farben" den "Farbe wählen"- Dialog aufrufen und hat dort eine deutlich größere Wahl. Darüber hinaus ist es möglich in das Eingabefeld des Dialogs einen RGB-Wert einzugeben und somit jede darstellbare Farbe zu erzeugen. |
Zeichenformat
Fett | Kursiv | Unterstrichen | Durchstrichen | Tiefgestellt | Hochgestellt |
Im nachfolgenden Text sind alle o.g. Zeichenformate als Beispiel enthalten:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no na sea takimata sanctus est
Ausrichten
Linksbündig | Zentriert | Rechtsbündig | Blocksatz |
Ausrichten ist eine klare Sache, wenn es um reinen Text geht. Der CK-Editor richtet mit diesen Funktionen auch Bilder und andere Objekte aus. Das ist sehr praktisch, besonders für Tabellenspalten.
Aufzählungen gestalten
AufzählungNummeriert | AufzählungMarkiert |
Sie haben eine gewiße Anzahl von Zeilen, die Sie als Aufzählung (Liste) gestalten wollen. Dazu markieren Sie alle Zeilen Ihrer Aufzählung und klicken Sie dann im Menü auf nummerierte- oder markierte- Aufzählung.
Diese Zeilen befinden sich nun in einem Div-Block (erkennbar durch den geringen Zeilenabstand) und vor jeder Zeile befindet sich ein Punkt bzw. eine lfd. Nummer. Wenn Sie Ihre Aufzählung hierarchisch anordnen möchten, benutzen Sie den nachfolgend beschriebenen Einzug.
Einzug
|
||
EinzugVerkleinern | EinzugVergrößern | Zitatblock |
Um eine Textpassage einzurücken benutzen Sie die Funktion "Einzug vergrößern". dabei wird der gesamte Absatz (Block), in dem sich der Zeiger befindet, eingerückt. Sie können natürlich auch mehrere Absätze markieren und so einrücken. Ebenso können Sie mehrfach den Einzug vergrößern bzw. auch verkleinern. So kann man leicht hierarchische Listen erstellen wie z.B. Inhaltsverzeichnisse.
Zitatblöcke bewirken prinzipiell das Gleiche, für eine Ebene. Sie können Zitatblöcke jedoch nicht für Aufzählungen verwenden.
Dazu noch ein Tipp: hierarchische Nummerierungen/Markierungen lassen sich mit RMT->Listen-Eigenschaften noch anpassen.
Markierung Ende Anrisstext
Anrissmarke |
Der CK-Editor besitzt eine Funktion zum Markieren des Anriss-Textes. Wie wir gelernt haben benutzt Drupal für die kompakte Form der Inhalts-Darstellung entweder eine vorhandene Zusammenfassung oder die ersten n Worte aus dem eigentlichen Text.
Mit dieser Anriss-Marke können Sie Drupal sagen, wo der Anriss-Text aufhört. Wenn Sie eine Zusammenfassung Ihres Textes geschrieben haben ist die Markierung irrelevant.
Schreibrichtung
SchreibrichtungRechts | SchreibrichtungLinks |
Hiermit können Sie Ihre bevorzugte Schreibrichtung festlegen. Von Rechts nach Links oder umgekehrt.
Objekte in den Text einbetten
Bild | Flash-Anim. | Tabelle | I-Frame |
Bild einfügen
Der Bild Eigenschaften - Dialog bietet viele Möglichkeiten
- Referenz (woher) angeben
- Breite und Höhe des Bildes ändern
- soll das Bild einen Rahmen haben (wie dick)
- Text-Umlauf (Art und Abstand)
- Vorschau der Änderungen
- Link (wohin)
Sie können diesen Dialog über das Symbol im Menü aufrufen um ein neues Bild in Ihrem Text zu platzieren oder über das RMT-Menü Bild-Eigenschaften, außerdem, wenn kein Link auf dem Bild liegt auch per Doppelklick.
Die Referenz ist eine URL. Bei diesem Eintrag können Sie das Schema http:// weglassen und Sie können mit relativen Adressen arbeiten. Z.B. wird mit der Drupal-Funktion "Bild hochladen" das Bild auf dem Server unter "/sites/default/files" abgelegt.
Öffnen Sie Bild-Eigenschaften auf einem schon platzierten Bild und es steht "data:image/png;base64,iVBORw..." in dem Feld für die URL dann handelt es sich um ein eingebettetes Bild. In diesem Fall finden Sie die komplette HTML-Darstellung des Bildes in diesem Feld, so groß es auch sein mag - also bitte nicht ändern!
Man kann einen alternativen Text angeben, für den heute seltenen Fall, dass der Browser keine Bilder zulässt und einen Link anlegen, sodass wenn jemand beim Betrachten auf das Bild klickt er zum Link-Ziel weitergeleitet wird. Der Steckreiter Link wird unter dem Thema Link definieren ausführlich behandelt.
Haben Sie die URL eingegeben so bekommen Sie durch Klick auf den blauen Drehpfeil eine Vorschau auf das Bild. ist in der Vorschau ein x auf rotem Grund zu sehen, so stimmt mit Ihrer URL etwas nicht.
Nun können Sie die Größe des Bildes beurteilen bzw. ändern, denn die original-Werte für Breite und Höhe des Bildes sind in den Feldern eingeblendet. Diese Werte können Sie unabhängig (verzerren) voneinander verändern, wenn das nebenstehende blaue Vorhängeschloss offen dargestellt wird. Den Zustand des Schlosses können Sie per Klick ändern. Ist das Schloss geschlossen (unverzerrt), können Sie nur Breite oder Höhe verändern, der jeweils andere Wert wird berechnet.
Das Vorschau-Fenster enthält zu dem Bild einen Beispiel-Text um den Umlauf des Textes zu gestalten zu können. Dafür sind die Felder Rahmen, horizontale-, vertikaler- Abstand und Ausrichtung gedacht. Ausrichtung <nichts> bedeutet "kein Text-Umlauf".
Flash-Animation
Zugegeben das unten gezeigte Bild ist nur ein animiertes Gif-Bild, aber genau das und noch viel mehr können Sie mit Flash Animationen darstellen.
Wenn Sie z.B. vorhaben, ähnlich wie der Landes- oder Bundes-Verband eine Deutschland- oder Bayern-Karte darzustellen, über die man per Mausklick zu anderen VAMV-Verbänden gelangt, dann ist eine Flash-Animation die richtige Wahl. Ich gehe hier nicht weiter auf Einzelheiten dieses Dialogs ein, weil die Einbettung einer Animation ein Fall für den Administrator ist.
Tabellen anlegen
Der nebenstehende Dialog "Tabellen Eigenschaften" bietet gute Möglichkeiten eine Tabelle zu gestalten.
Mit diesem Dialog kann man durch Klick auf das Menüsymbol neue Tabellen anlegen. und bestehende Tabellen ändern über RMT Tabellen Eigenschaften.
Man kann natürlich die Dimension der Tabelle mit Zeile/Spalte definieren und die Gesamtbreite und Gesamthöhe bestimmen. Wenn Sie bei Breite und Höhe nichts eintragen werden diese Werte automatisch ermittelt.
Eine optionale Kopfzeile kann oben oder/und links angeordnet werden. Mit der Definition des Rahmens und der Zellenabstände kann man ein gefälliges Erscheinen erreichen.
Die Ausrichtung steuert wie bei einem Bild auch den Text-Umlauf um die Tabelle. Man kann der Tabelle auch eine Überschrift und eine Zusammenfassung hinzufügen.
Hat man eine Zelle der Tabelle ausgewählt werden für Zeile und Spalte je drei klitzekleine Handles eingeblendet die es ermöglichen vor/nach der ausgewählten Zelle eine Zeile/Spalte einzufügen oder die ausgewählte Zeile/Spalte zu löschen. Diese Funkionen lassen sich auch über RMT wählen. Außerdem kann man mit RMT Zellen verbinden und den Zellen-Eigenschaften Dialog aufrufen. Dieser Dialog bietet eine ganze Reihe von Möglichkeiten u.a. der farblichen Gestaltung des Zellenhintergrundes.
I-Frame
Mit I-Frames kann man einen Rahmen bestimmter Größe definieren in dem dann, zum Zeitpunkt des Betrachtens, eine festgelegte URL dargestellt wird. Ziemlich ungebräuchlich.
Sonderzeichen
Trennstrich | Smiley | Sonderzeichen |
Trennstrich
Der Trennstrich ist bei langen Texten hilfreich. Er schafft ein wenig Überblick. Der Trennstrich ist nicht veränderbar und versucht immer die ganze Zeile zu füllen. Das ist bei vorhanden Objekten natürlich nur teilweise möglich.
Smiley & Sonderzeichen
Zu Smiley und Sonderzeichen gibt es nicht viel zu sagen, durch einen Klick auf das ausgewählte Symbol wird es exakt an der Position des Zeigers eingefügt. Vielleicht noch, dass bei den Sonderzeichen, alleine durch Überstreichen des Zeichens, eine vergrößerte Version angezeigt wird. | ||
Link definieren
LinkSetzen | LinkLöschen | AnkerSetzen |
Die Referenz (Link) ist die Grundidee des Internets überhaupt, das ist ja schließlich mit dem Begriff "Hypertext" gemeint. Links gibt es in vier Versionen:
- absolute Zieladresse (für Ziele im Web)
- relative Zieladresse (für Ziele innerhalb der eig. Domäne)
- Ziel innerhalb des Dokuments
- Email-Adresse
Ein Beispiel für eine absolute Zieladresse ist "http://www.vamv-muenchen.de/portrait", sie besteht aus dem Protokoll (http://), dem Domänenname (www.vamv-muenchen.de) und einem Pfad und Namen eines Inhalts (/portrait). Eine Adresse dieser Form wird auch als Uniform Ressource Locator (URL) bezeichnet.
Bei einer relativen Zieladresse wird das Schema und der Domänenname weggelassen bzw. automatisch hinzugefügt. Das sieht so aus: "/portrait".
Für Sprungziele innerhalb des gleichen Dokuments (z.B. Inhaltsverzeichnis) kann man sog. Anker festlegen, auf die man im Link referenziert.
Eine weitere Möglichkeit eines Links ist die Referenz auf eine Email-Adresse. Eine Email-Adresse sieht prinzipiell so aus: zarda@vamv-muenchen.de, wobei links des @-Zeichens das Postfach angegeben wird und rechts des @-Zeichens steht der Domänenname, oft gekürzt um das führende "www". Ein Link auf eine Email-Adresse setzt einen installierten Email-Client beim Betrachter voraus, was in er Regel der Fall ist. Dieser Email-Client wird durch Klick auf den Link gestartet. Der Betrachter kann eine Nachricht schreiben und absenden. Es ist in dem Link auch möglich den Betreff dieser Email und einen Teil der Nachricht vorzuhalten, sozusagen als Sortierungshilfe.
Das Protokoll des Links kann sein:
- http:// (Hypertext Transfer Protocol)
- https:// (Hypertext Transfer Protocol Secure)
- ftp:// (File Transfer Protocol)
- news:// (NewsTransfer Protocol)
<other>
Der Link-Dialog spiegelt genau diese Möglichkeiten wider. Einzig die Verwendung von relativen Links wird nicht deutlich, aber sie sind möglich und wichtig!
Ebenfalls wichtig ist die Steuerung der Zielseite (Reiter im Dialog). Sie erlaubt uns, zu bestimmen wo, in welcher Form der referenzierte Inhalt dargestellt wird:
- Nicht definiert (_self /Grundeinst.)
- Frame(_frame)
- Popup Fenster
- Neues Fenster(_blank)
- Oberstes Fenster(_top)
- Eigenes Fenster(_self)
- Parent Fenster(_parent)
Einige der Möglichkeiten basieren auf Web-Seiten mit Frames. Das ist bei uns nicht der Fall, daher bleiben nur die Fälle "eigenes Fenster", "neues Fenster" und "popup Fenster".
Eigenes Fenster ersetzt den aktuellen Inhalt der Browserseite mit dem Inhalt des Links.
Neues Fenster öffnet ein neues Fenster mit dem Inhalt des Links. Dies wird von unterschiedlichen Browsern unterschiedlich ausgeführt. Firefox öffnet hierbei z.B. nur einen neuen Tab.
Popup Fenster öffnet bei allen Browsern wirklich ein neues Fenster mit dem neuen Inhalt und laßt sich zudem noch umfangreich konfigurieren.
Der Dialog Anker-Eigenschaften markiert die aktuelle Position des Zeigers mit dem Anker Namen. Auf diese Markierung im Dokument kann man, über den oben gezeigten Dialog "Anker in dieser Seite", referenzieren. Klickt man auf solch einen Link, so springt die Seitenansicht des Browsers vor oder zurück an die markierte Stelle. Mit "Zurück" gelangt man wieder an den Ausgangspunkt.