Fertig

Externe Links

Links bestehen aus zwei Elementen, zunächst der sichtbare Ausdruck in eckigen Klammern und dann das Ziel des Links in runden Klammern.

buchner-Seite oder
buchner-Seite oder
buchner-Seite bzw.
buchner-Seite

[buchner-Seite](https://www.buchner.de/ "buchner") oder [buchner-Seite](http://www.buchner.de/ "buchner") oder [buchner-Seite](//www.buchner.de/ "buchner") bzw. [buchner-Seite](//www.buchner.de/)

Externe Links beginnen in der Regel mit https://. Es gibt aber noch unverschlüsselte Seiten, die mit http:// beginnen. Um größtmögliche Fehlertoleranz zu erhalten, kann der Link einfach mit // beginnen. Der Browser fügt dann https: oder http: dazu, je nachdem, ob die Zielseite verschlüsselt ist oder nicht.

Des Weiteren können optional ein Titel und weitere Eigenschaften angehängt werden. Der Titel steht in Anführungszeichen hinter dem Ziel des Links durch ein Leerzeichen getrennt. Weitere Eigenschaften, wie z.B. Klassen oder Eigenschaften, werden in geschweiften Klammern angehängt.

↑

Externe Links im neuen Fenster öffnen

Um einen Link im neuen Tab oder Fenster zu öffnen (je nach Browsereinstellung), bekommt der Link noch das Attribut target="_blank".

buchner-Seite im neuen Tab öffnen.

[buchner-Seite](//www.buchner.de/){:target="_blank"} im neuen Tab öffnen.

Notiz: Hat der Link auch noch z.B. die Farbe rot, würde das wie folgt aussehen.

[buchner-Seite](https://www.buchner.de/){: target="_blank" .text-red}

↑

Externe Links mit Angabe der Domain

Um einen Link anzuzeigen, ist es sinnvoll, zuerst eine kurze Beschreibung zu verfassen, dann ein Doppelpunkt und dann die mit einem Link hinterlegte Domain.

Gute Therapeutensoftware: www.buchner.de/

Gute Therapeutensoftware: [www.buchner.de/](//www.buchner.de/)

↑

Links mit Option in neuem Tab zu öffnen

Manchmal kann es sinnvoll sein, die Option anzubieten einen Link in einem neuen Tab zu öffnen. Entweder wird hinter einem Link noch ein Icon eingebunden, an manchen Stellen könnte es auch genügen, nur das Icon zu platzieren.

Gute Therapeutensoftware: www.buchner.de/

Gute Therapeutensoftware: [www.buchner.de/](//www.buchner.de/) {% include newtab.md link="//www.buchner.de/" %}

Gute Therapeutensoftware gibt es bei buchner

Gute Therapeutensoftware gibt es bei buchner {% include newtab.md link="//www.buchner.de/" %}

↑

Interne Links

Interne Links sind ganz normale Links. Die Adresse beginnt aber nicht mit http, sondern sieht aus wie die Pfadleiste auf der Internetseite.

Relative Pfade

Um größtmögliche Flexibilität zu wahren, ist es sinnvoll, relative Pfade zu verwenden. So kann die Seite später im Hauptverzeichnis einer Domain oder in einem Unterordner liegen. Ein weiterer Vorteil ist die nachträgliche Bearbeitbarkeit. Wird der Ordnername eines Kapitels geändert, müssen nicht alle Links angepasst werden. Die Links beginnen mit ../, um auf die übergeordnete Ebene zu gelangen.

Diese Seite Links liegt im Ordner links, der im Ordner gestaltung-des-inhaltes liegt. Und dieser liegt auf der obersten Ebene.
/gestaltung-des-inhaltes/links/index.html (“index.html” wird in der Adresszeile des Browser nicht unbedingt angezeigt).

Die Seite tabellen, die ebenfalls im Ordner gestaltung-des-inhaltes liegt, wird mit ../tabellen erreicht. Die Seite arbeiten-mit-atom, die im Ordner programme-und-werkzeuge liegt, der wiederum auf der obersten Ebene liegt, wird mit ../../programme-und-werkzeuge/arbeiten-mit-atom erreicht.

Tabellen

[Tabellen](../tabellen/)

Ausfüllhilfe von atom

Der Editor atom hat eine gut funktionierende Ausfüllhilfe. Zuerst wird die eckige Klammer ausgewählt.
[
atom schließt sie automatisch und positioniert den Cursor richtig, sodass gleich weiter geschrieben werden kann.
[|]
Jetzt kann die Beschreibung des Links eingegeben werden.
[Inhalte einbinden]|
Danach wird die runde Klammer eingegeben. atom schließt auch diese und positioniert den Cursor richtig.
[Inhalte einbinden](|)
Jetzt wird das richtige Link-Ziel gesucht. Durch das Eingeben von ./ (ein Punkt) schlägt atom alle Dateien und Ordner vor, die sich im selben Ordner befinden. Die Eingabe von ../ (zwei Punkte) zeigt die Dateien und Ordner, die sich im übergeordneten Ordner befinden.

Gleiche Ebene

Wird der gesuchte Ordner nicht vorgeschlagen, kann die nächste Ebene durch die Eingabe eines weiteren ../ erreicht werden. Mit den Pfeiltasten wird jetzt der Ordner ausgewählt und mit der Eingabetaste bestätigt.

Eine Ebene höher

Durch die Eingabe eines Leerzeichens (auf der obersten Ebene Punkt statt Leerzeichen verwenden) schlägt atom jetzt alle Dateien und Ordner vor, die sich in diesem Ordner befinden.

Ordner auswählen

Durch Navigation mit den Pfeiltasten wird der richtige Ordner ausgewählt und mit der Eingabetaste übernommen.

Link eingegeben

Absolute Pfade

Absolute Pfade, beginnend mit einem Slash /, sollten nicht verwendet werden. Zwar erleichtern sie das Bearbeiten und Verschieben von Unterseiten, haben aber den Nachteil, dass die Seite immer im Hauptverzeichnis einer Domain liegen muss.

Anchor

Wenn der Link zu einem Anchor bzw. einer Überschrift springen soll, muss der Anchor hinter dem Link, verbunden mit einer Raute #, angegeben werden.

Ausrichtung Spalten

[Ausrichtung Spalten](../tabellen/#ausrichtung-des-tabelleninhaltes)

Notiz: Bei Überschriften wird automatisch ein Anchor erzeugt, der in etwa der Überschrift entspricht. Leerzeichen werden zu -, Großbuchstaben werden klein geschrieben, viele Sonderzeichen fallen weg.
Eine Überschrift Überschrift !”§$%&/_ß bekommt den Anchor überschrift-_ß.
> Überschrift

↑

Mailadressen

Um eine E-Mail-Adresse zu verknüpfen, muss, statt einer Domain oder eines internen Links, eine E-Mail-Adresse stehen, die durch ein mailto: aufgerufen wird.

E-Mail an Support

[E-Mail an Support](mailto:test@test.de)

↑

Telefonnummern

Um eine Telefonnummer zu verknüpfen, muss, statt einer Domain oder eines internen Links, eine Telefonnummer stehen, die durch ein tel: aufgerufen wird.

buchner anrufen

[buchner anrufen](tel:08005999666)

↑

Verweise

So sieht ein Verweis auf eine andere Seite aus.

> Überschrift

[> Überschrift](../gliederung/#überschrift){: .text-small }