Zum Inhalt springen
  • Anleitung TYPO3
  • Login / Account
  • Funktionen / Extensions
  • Audio / Video
  • Dig. Barrierefreiheit
  • Nutzungsbedingungen
  • FAQ
  • Zentrale Informationstechnik (TYPO3-Team)
  • IT-Servicezentrum (ITSZ)
  • Technische Universität München
Technische Universität München
  • Startseite
  • Webauftritte
    • Nichtfakultäre Einrichtungen
    • TUM School of CIT
    • TUM School of ED
    • TUM School of LS
    • TUM School of MGT
    • TUM School of MH
    • TUM School of NAT
    • TUM School of SOT
    • TUM Graduate School (GS)
    • Integrative Research Institutes (IRI)
    • Technology Core Facilities (TCF)
    • Wissenschaftliche Zentralinstitute (WZI)
    • Hochschule für Politik
    • TYPO3 Web-Archiv
  • Service
    • Umfang
    • Nutzungsbedingungen
    • Anforderung
  • Anleitung
    • TYPO3 Grundlagen
      • Begriffe
      • Modulleiste
      • Seitenbaum
      • Filelist
      • Registrierung und Login ins Backend
      • Berechtigungskonzept
        • Groupdelegation
    • Arbeiten mit Seiten
      • Seitentypen
      • Seite anlegen
      • Seiten verbergen/sichtbar machen
      • Seiten sortieren/kopieren
      • Seiten löschen
      • Seite zeitsteuern
      • Seiten-Layout ändern
    • Arbeiten mit Seiteninhalten
      • Seiteninhaltstypen
      • Seiteninhalte anlegen
      • Überschriften
      • Text & Media
        • Bilder
        • Bildergalerie
        • Slideshow
        • Alternativtexte für Bilder schreiben
      • Audio & Video
        • Audiodateien einbinden
        • Video einbinden
      • Tabellen
      • File Links
      • Menu
      • Insert Records
      • Rich Text Editor (RTE)
      • Links setzen
      • Abstand zwischen Inhaltselementen
      • Mehrspaltiger Content
      • Akkordeon-Funktion
      • Rahmen & Boxen
      • Social Media Box
    • Extensions
      • CurlContent
      • TUM MemberList
      • TUMcourses
      • TUMvCard
      • News
      • iFrame with consent
      • T3UP Carousel
    • Englischsprachige Seite
    • Kontaktbereich
    • Rechtliches
    • Lageplan
      • Lageplan mit Google Maps
      • Lageplan mit dem BayernAtlas
  • Digitale Barrierefreiheit
    • Barrierefreie Inhalte mit TYPO3
    • Schnelleinstieg für Redakteure
    • Leichte Sprache
  • FAQs
  • Kontakt
  • Sitemap
  1. Startseite
  2. Anleitung
  3. Arbeiten mit Seiteninhalten
  4. Links setzen

Links

Ein "Hyperlink", abgekürzt mit "Link", verknüpft Webseiten, Videos, PDFs oder andere Dokumente miteinander. Links können in Texte, Überschriften oder auch Bilder eingebaut werden.

  • Überschriften verlinken
  • Texte verlinken
  • Bilder verlinken
  • Links ändern/löschen
  • Link auf eine interne Seite oder direkt auf ein Inhaltselement
  • Link auf eine interne Datei
  • Link auf auf externe Webseiten
  • Link auf eine Emailadresse
  • Link auf passwortgeschützen Bereich

Überschriften verlinken

Screenshot: Überschriften (Header) verlinken
Bild 1: Überschriften (Header) verlinken
  • Klicken Sie auf das Icon rechts neben dem Link-Feld auf (Bild 1 No.1). 
  • Es öffnet sich der Link Browser (Bild 1 No.2) wo Sie die Link-Adresse eintragen.

Texte verlinken

Screenshot: "Link" Button
Bild 2: "Link" Button
Screenshot: Link Browser
Bild 3: Link Browser
  • Markieren Sie den Textabschnitt, der verlinkt werden soll (Bild 2 No.1).
  • Klicken Sie auf das Icon Link (Bild 2 No.2).

Es öffnet sich der Link Browser (Bild 3). Hier haben Sie folgende Link-Optionen:

  • Page: für Links innerhalb Ihrer Webseite.
  • File: für Links auf eine Datei in Ihrer Filelist.
  • External URL: Links auf externe Webauftritte.
  • Telephone: zum Verlinken von Telefonnummern (z.B. interessant für Smartphones).
  • Email: zum Verlinken von Email-Adressen.
  • News: zum Verlinken von Newsbeiträgen (nur wenn die News-Extension bei Ihnen implementiert ist).

Bilder verlinken

Screenshot: Bilder verlinken
Bild 4: Bilder verlinken
  • Klicken Sie auf das Icon rechts neben dem Link-Feld (Bild 4). 
  • Es öffnet sich der Link Browser wo Sie die Link-Adresse eintragen.

Option "no-hint"

Screenshot: css-class: no-hint eintragen
Bild 5: css-class: no-hint eintragen
Screenshot: Bild mit Pfeil / ohne Pfeil
Bild 6: Bild mit Pfeil / ohne Pfeil

Bilder mit einer Verlinkung werden mit einem kleinen Pfeil-Icon dargestellt. In manchen Fällen, z. B. bei Logos oder Icons, sind diese Pfeile störend. Sie können den Pfeil ausschalten:

  • Tragen Sie im Link-Browser im Feld CSS-Class den Wert "no-hint" (ohne die Anführungszeichen) (Bild 5 No.2 ) ein und clicken Sie auf den Button Update.

Links ändern/löschen

Screenshot: Links ändern/löschen
Bild 7: Links ändern/löschen

Um einen vorhandenen Link zu bearbeiten:

  • Setzen Sie den Cursor in den verlinkten Text.
  • Klicken auf das Icon Edit Link (Bild 7 No.2).
  • Mit dem Icon Unlink löschen Sie einen bereits vorhandenen Link (Bild 7 No.3).

Aussagekräftige Linktexte verfassen

Verlinken Sie immer aussagekräftige Begriffe oder Wortgruppen. Gut geeignet ist der Titel des verlinkten Dokumentes oder der verlinkten Website. Ziel und Zweck eines Links müssen immer aus dem Linktext selbst ersichtlich sein.

In den folgenden Beispielen ist der verlinkte Text jeweils mit eckigen Klammern markiert:

  • Falsch: Weitere Informationen finden sie [hier].
  • Richtig: Weitere Informationen zum [Dialogorientierten Serviceverfahren – DoSV].
     
  • Falsch: [Weitere Informationen]
  • Richtig: Für weitere Informationen gehen Sie zur Seite [Bachelorstudiengang Schritt für Schritt].

Vermeiden Sie Worte wie „hier" oder „mehr“ zu verlinken. Screenreader-Nutzer lassen sich oft nur die Linktexte vorlesen. Ohne aussagekräftigen Text, müssen sie sich zusätzlich den umliegenden Text vorlesen lassen. Ganz besonders schwierig wird es, wenn mehrere Links hintereinander einfach nur mit „Hier“ bezeichnet wurden.

Aussagekräftige Linktexte verbessern die Benutzbarkeit ihrer Website für alle Nutzer und die Indizierung durch Suchmaschinen wie Google. Der Linktext wird von der Suchmaschine bei der Bewertung des verlinkten Inhalts als Keyword (Schlagwort) behandelt.

Link auf eine interne Seite oder direkt auf ein Inhaltselement

Screenshot: Interner Link
Bild 8: Interner Link

Link auf eine Seite innerhalb Ihres Webauftritts: 

  • Im Link Browser, im Tab Page sehen Sie die Navigationsstruktur Ihres Webauftritts. 
  • Wählen sie die Zielseite  (Bild 8 No.2).  und klicken Sie auf das Kettensymbol beim Seitentitel (Bild 8 No.1). 

Direkt auf ein Inhaltselement verlinken: 

  • Klicken Sie dafür auf den Seitentitel (Bild 8 No.2). Die Inhaltselemente dieser Seite werden in der rechten Spalte gelistet. 
  • Durch Klick auf das gewünschte Inhaltselement (Bild 8 No.3), wird der Link generiert.

Weitere Optionen: 

  • Der Link öffnet sich im selben Fenster, wenn Sie das Feld (Bild 8 No.4) leer lassen oder "Top" auswählen. 
  • Wenn Sie "New window" wählen, öffnet sich die Seite in einem neuen Fenster bzw. Tab (Bild 8 No.4).

Link auf eine interne Datei

Screenshot: Link auf interne Datei
Bild 9: Link auf interne Datei

Im Link Browser, im Tab File können Sie eine Datei (z.B. PDF) auswählen, die sich in der Filelist Ihres Webauftritts befindet:

  • Klicken Sie auf den entsprechenden Ordner und dann auf die gewünschte Datei. 
  • Statt einen Textabschnitt mit einer Datei zu verlinken, können Sie das Content Element File Links verwenden womit Sie unterschiedliche Gestaltungsmöglichkeiten haben.

Link auf auf externe Webseiten

Screenshot: Link auf externe URL
Bild 10: Link auf externe URL
  • Wechseln Sie im Link Browser auf den Tab External URL.
  • Geben Sie dort die komplette URL (unbedingt mit "htttps://") in das gleichnamige Feld ein und klicken Sie anschließend auf Set Link.
  • Der Link öffnet sich im selben Fenster, wenn Sie das Feld leer lassen oder "Top" auswählen. 
  • Wenn Sie "New window" wählen, öffnet sich die Seite in einem neuen Fenster bzw. Tab.

Link auf eine Emailadresse

Screenshot: E-Mail-Adresse verlinken
Bild 11: E-Mail-Adresse verlinken

Um eine Email zu verlinken, klicken Sie im Link Browser auf den Tab Email:

  • Geben Sie im Feld Email adress die gewünschte E-mail Adresse an und bestätigen mit Set Link.
  • Optional können Sie die zusätzlichen Felder befüllen.
  • Sie können die Emailadresse zusätzlich mit einem Icon versehen (Bild 12 No.4).

Link auf passwortgeschützen Bereich

Screenshot: Locked URL
Bild 12: Locked URL

Wenn Sie auf eine Datei, Webseite, etc. verlinken, auf der ein Passwortschutz liegt, empfehlen wir Ihnen diesen mit dem Icon "Locked URL” zu kennzeichnen:

  • Klicken Sie in den verlinkten Textabschnitt (Bild 12 No.1).
  • Wählen Sie in der Menüleiste des RTE, unter Styles (Bild 12 No.2) das “Locked URL” (Bild 12 No.3).
  • Der Link wird mit einem Icon gekennzeichnet.
  • Vergessen Sie nicht zu speichern.
To top

TUM TYPO3 (ZIT)

Technische Universität
München

Richard-Wagner-Str. 18
80333 München
typo3(at)tum.de

TYPO3 v12

Änderungen in TYPO3 v12 gegenüber der bisherigen Version 10

  • Datenschutz
  • Impressum
  • Barrierefreiheit