Tipps zur Erstellung von Inhalten

Eingabeformate:
  • Filtered HTML:
    • Internet- und E-Mail-Adressen werden automatisch umgewandelt.

    • Zulässige HTML-Tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>

      Diese Website erlaubt HTML-Inhalte. Obwohl das Erlernen aller HTML-Befehle abschreckend erscheint, ist es sehr einfach, nur eine kleine Anzahl der grundlegendsten HTML-„Tags“ zu lernen. Diese Tabelle enthält Beispiele für jedes Tag, das auf dieser Website erlaubt ist.

      Weitere Informationen zu HTML sind in SelfHTML erhältlich oder können mit Suchmaschinen im Internet auch an anderer Stelle gefunden werden.

      Tag-BeschreibungEingegebenErgebnis
      Anker werden benutzt um Links zu anderen Seiten zu erstellen.<a href="http://kogentis.de">kogentis </a>kogentis
      Hervorgehoben<em>Hervorgehoben</em>Hervorgehoben
      Stark<strong>Stark</strong>Stark
      Zitat<cite>Zitat</cite>Zitat
      Kodierter Text um Quelltexte anzuzeigen<code>Code</code>Code
      Ungeordnete Liste – <li> verwenden, um mit ein Listeneintrag zu beginnen<ul> <li>Erster Eintrag</li> <li>Zweiter Eintrag</li> </ul>
      • Erster Eintrag
      • Zweiter Eintrag
      Geordnete Liste – <li> verwenden, um mit ein Listeneintrag zu beginnen<ol> <li>Erster Eintrag</li> <li>Zweiter Eintrag</li> </ol>
      1. Erster Eintrag
      2. Zweiter Eintrag
      Definitionslisten sind ähnlich zu anderen HTML-Listen. <dl> leitet die Definitionsliste ein, <dt> enthält den zu definierenden Begriff und <dd> enthält die Definitionsbeschreibung.<dl> <dt>Erste Bedingung</dt> <dd>Erste Definition</dd> <dt>Zweiter Begriff</dt> <dd>Zweite Definition</dd> </dl>
      Erste Bedingung
      Erste Definition
      Zweiter Begriff
      Zweite Definition

      Die meisten Sonderzeichen können problemlos direkt eingegeben werden.

      Falls Probleme auftreten, sollten HTML-Entitäten verwendet werden. Ein Beispiel ist &amp; für ein kaufmännisches &. Eine vollständige Liste stellt SelfHTML bereit. Einige Zeichen sind:

      ZeichenbeschreibungEingegebenErgebnis
      kaufm. Und&amp;&
      Größer als&gt;>
      Kleiner als&lt;<
      Anführungszeichen&quot;"
    • Zeilenumbrüche und Absätze werden automatisch erkannt. Die Tags für Zeilenumbrüche (<br />) und Absätze (<p></p>) werden automatisch eingefügt. Wenn Absätze nicht erkannt werden, sollten noch einige Leerzeilen eingefügt werden.
  • Full HTML:
    • Zeilenumbrüche und Absätze werden automatisch erkannt. Die Tags für Zeilenumbrüche (<br />) und Absätze (<p></p>) werden automatisch eingefügt. Wenn Absätze nicht erkannt werden, sollten noch einige Leerzeilen eingefügt werden.

    • Syntax highlighting of source code can be enabled with the following tags:

      • Generische Syntaxhervorhebungstags: "<code>", "<blockcode>".
      • Sprachspezifische Syntaxhervorhebungstags: "<c>" for C source code, "<cpp>" for C++ source code, "<c#>" for C# source code, "<drupal5>" for Drupal 5 source code, "<drupal6>" for Drupal 6 source code, "<html>" for HTML source code, "<java>" for Java source code, "<javascript>" for Javascript source code, "<oc>" for Objective-C source code, "<perl>" for Perl source code, "<php>" for PHP source code, "<python>" for Python source code, "<ruby>" for Ruby source code, "<vb>" for Visual Basic source code, "<vbnet>" for vb.net source code.

      Optionen und Tips:

      • The language for the generic syntax highlighting tags can be specified with one of the attribute(s): type, lang, language, class. The possible values are: „c“ (für C), „c#“ (für C#), „cpp“ (für C++), „csharp“ (für C#), „drupal5“ (für Drupal 5), „drupal6“ (für Drupal 6), „html“ (für HTML), „html4strict“ (für HTML), „java“ (für Java), „javascript“ (für Javascript), „objc“ (für Objective-C), „oc“ (für Objective-C), „perl“ (für Perl), „php“ (für PHP), „python“ (für Python), „ruby“ (für Ruby), „vb“ (für Visual Basic), „vbnet“ (für vb.net).
      • The supported tag styles are: <foo>, [foo].
      • Line numbering can be enabled/disabled with the attribute "linenumbers". Possible values are: "off" for no line numbers, "normal" for normal line numbers and "fancy" for fancy line numbers (every nth line number highlighted). The start line number can be specified with the attribute "start", which implicitly enables normal line numbering. For fancy line numbering the interval for the highlighted line numbers can be specified with the attribute "fancy", which implicitly enables fancy line numbering.
      • If the source code between the tags contains a newline (e.g. immediatly after the opening tag), the highlighted source code will be displayed as a code block. Otherwise it will be displayed inline.
      • A title can be added to a code block with the attribute "title".

      Standards:

      • Default highlighting mode for generic syntax highlighting tags: when no language attribute is specified, no syntax highlighting will be done.
      • Standardmäßige Zeilennummerierung: Normale Zeilennummern.

      Beispiele:

      EingegebenErgebnis
      <code>foo = "bar";</code>Inline code with the default syntax highlighting mode.
      <code>
      foo = "bar";
      baz = "foz";
      </code>      		Code block with the default syntax highlighting mode.
      <code lang="vbnet" linenumbers="normal">
      foo = "bar";
      baz = "foz";
      </code>      		Code block with syntax highlighting for vb.net source code
      and normal line numbers.
      <code language="vbnet" start="23" fancy="7">
      foo = "bar";
      baz = "foz";
      </code>      		Code block with syntax highlighting for vb.net source code,
      line numbers starting from 23
      and highlighted line numbers every 7th line.
      <c>
      foo = "bar";
      baz = "foz";
      </c>      		Code block with syntax highlighting for C source code.
      <c start="23" fancy="7">
      foo = "bar";
      baz = "foz";
      <c>      		Code block with syntax highlighting for C source code,
      line numbers starting from 23
      and highlighted line numbers every 7th line.

    • Zum Betrachten der Bilder mit Lightbox, fügen Sie das rel="lightbox" Attribut in einen beliebigen Link-Tag hinzu. Zum Beispiel:

      <a href="bild-1.jpg" rel="lightbox">Bild #1</a>

      <a href="bild-1.jpg" rel="lightbox[][ihre beschriftung]">Bild #1</a>

      To show a caption either use the title attribute or put in the second set of square brackets of the rel attribute.

      Wenn Sie zusammengehörige Bilder zu einer Gruppe zusammenfassen wollen, dann müssen Sie einen Gruppennamen in eckigen Klammern in das rel-Attribut einfügen. Zum Beispiel:

      <a href="bild-1.jpg" rel="lightbox[rundreise]">bild #1</a>
      <a href="bild-2.jpg" rel="lightbox[rundreise][beschriftung 2]">bild #2</a>
      <a href="bild-3.jpg" rel="lightbox[rundreise][beschriftung 3]">bild #3</a>

      Es gibt keine Begrenzung für die Anzahl der Bilder pro Seite oder wie viele Bilder in einem Set zulässig sind.

      Wenn Sie die Beschriftung in einen Hyperlink umwandeln möchten, formatieren Sie ihre Beschriftung in folgender Weise:

      <a href="bild-1.jpg" rel='lightbox[][<a href="http://www.ihrlink.de">Bilddetails anschauen</a>]' >Bild #1</a>

    • Verlinkte Bilder von G2 werden für den Gebrauch mit Lightbox2 formatiert

    • Um eine Lightbox-Slideshow zu Ihren Bildern hinzuzufügen, fügen Sie das rel="lightshow[Slideshowname][Slideshowbeschriftung]" Attribut zu irgendein Link-Tag zum Aktivieren der Slideshow hinzu. Als Beispiel:

      <a href="bild-1.jpg" rel="lightshow[show1]">Bild #1</a>
      <a href="bild-2.jpg" rel="lightshow[show1]">Bild #2</a>
      <a href="bild-3.jpg" rel="lightshow[show1]">Bild #3</a>

      Der Titelattribut in dem Link-Tag ist optional. Jedoch wird durch diesen Attribut die Anzeige einer Bildbeschriftung in der Lightbox ermöglicht.

      Es gibt keine Begrenzung für die Anzahl der Bilder einer Slideshow oder wie viele Bilder in einem Slideshow zulässig sind.

      Wenn Sie die Beschriftung in einen Hyperlink umwandeln möchten, formatieren Sie ihre Beschriftung in folgender Weise:

      <a href="bild-1.jpg" rel='lightshow[show1][<a href="http://www.ihrlink.de">Bilddetails anschauen</a>]'>bild #1</a>

    • Es ist möglich Websites durch IFrames in der Lightbox anzuzeigen. In diesem Fall muss das rel-Attribute auf "lightframe" gesetzt sein. Es ist auch möglich diese Websites zu gruppieren, (z.B. lightframe[suche][beschriftung]) und zusätzlich ist es möglich einige der IFrame-Eigenschaften zu kontrollieren. Unter anderen kann die 'Breite', 'Höhe' und die 'Scroll' Eigenschaft von dem IFrame gesetzt werden. Diese Eigenschaften werden von dem Gruppenname mit ein | getrennt, z.B. lightframe[suche|width:100px;][beschriftung]. Wenn keine Gruppierung benutzt wird, dann wird die | trotzdem verwendet und das Format würde wie folgend sein lightframe[|width:100px;]. Diese Eigenschaften sollten im folgenden Format sein "Eigenschaft: Wert;" - vergessen Sie das schließende Semikolon nicht. Wenn keine IFrame-Eigenschaft gesetzt wurde, dann wird die Standard Breite und Höhe von 400px verwendet. Für detailliertere Beispiele siehe unten.

      Einfaches Beispiel:
      <a href="http://www.google.de" rel="lightframe">Google Suche</a>

      Beispiel für das Gruppieren:
      <a href="http://www.google.de" rel="lightframe[suche][beschriftung]">Google Suche</a>
      <a href="http://de.yahoo.com/" rel="lightframe[suche]">Yahoo Suche</a>

      Beispiel mit Kontrolle über die IFrame Eigenschaften:
      <a href="http://www.google.de" rel="lightframe[|width:400px; height:300px; scrolling: auto;][beschriftung]">Google Suche</a>

      Beispiel mit Kontrolle über die IFrame Eigenschaften, wenn gruppiert:
      <a href="http://www.google.de" rel="lightframe[suche|width:400px; height:300px; scrolling: auto;]">Google Suche</a>
      <a href="http://de.yahoo.com" rel="lightframe[suche|width:400px; height:300px;]">Yahoo Suche</a>

    • It's possible to show video content in the lightbox. In this case the "rel" attribute should be set to lightvideo. It's possible to group videos and to control the size of the lightbox by setting the "width" and "height" properties. The properties can be configured like lightvideo[group|width:300px; height: 200px;][caption]. The properties should all be of the format "property: value;" - note the closing semi-colon. If no properties are set, then the default width and height of 400px will be used. See below for more detailed examples.

      Einfaches Beispiel:
      <a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo">Google Video Beispiel - Standardgröße</a>

      Beispiel für eine kontrollierte Größe der Lightbox:
      <a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo[group|width:400px; height:300px;][caption]">Google video example - custom size</a>

      Unterstützte Video Formate sind asx, wmv, mov und swf. Ebenso werden einige Video-Hoster unterstützt, z.B. YouTube und Google Video. Für eine ausführliche Liste der unterstützten Video-Hoster, schauen Sie bitte in die Online Dokumentation.

    • Es ist möglich HTML-Snippets in der Lightbox anzuzeigen, die mit der gleichen Domain zu erreichen sind. In diesem Fall muss das rel-Attribut auf "lightmodal" gesetzt sein. Es ist auch möglich diese Inhalte zu gruppieren,(z.b. lightmodal[gruppe][beschriftung])und zusätzlich ist es möglich einige der Modal-Eigenschaften zu kontrollieren. Unter anderen kann die 'Breite', 'Höhe' und die 'Scroll' Eigenschaft von dem Modal gesetzt werden. aber es ist möglich die Größe der Lightbox zu kontrollieren, durch ändern der Eigenschaften für die "Breite" und "Höhe". Diese Eigenschaften werden von dem Gruppenname mit ein | getrennt, z.B. lightmodal[gruppe|width:100px;][beschriftung]. Wenn keine Gruppierung benutzt wird, dann wird der | trotzdem verwendet und das Format würde folgend sein lightmodal[|width:100px;]. Diese Eigenschaften sollten im folgenden Format sein "Eigenschaft: Wert;" - vergessen Sie das schließende Semikolon nicht. Wenn keine Modal-Eigenschaft gesetzt wurde, dann wird die Standard Breite und Höhe von 400px verwendet. Für detailliertere Beispiele siehe unten.

      Einfaches Beispiel:
      <a href="suche.php" rel="lightmodal">Suche</a>

      Beispiel für das Gruppieren:
      <a href="suche.php" rel="lightmodal[suche][beschriftung 1]">Suche</a>
      <a href="suche.php?status=1" rel="lightmodal[suche]">Suche veröffentlicht</a>

      Beispiel mit Kontrolle über die Modal-Eigenschaften:
      <a href="suche.php" rel="lightmodal[|width:400px; height:300px; scrolling: auto;][beschriftung]">Suche</a>

      Beispiel mit Kontrolle über die Modal-Eigenschaften, wenn gruppiert:
      <a href="suche.php" rel="lightmodal[suche|width:400px; height:300px; scrolling: auto;]">Suche</a>
      <a href="suche.php?status=1" rel="lightmodal[suche|width:400px; height:300px;]">Suche veröffentlicht</a>