Inhaltsverzeichnis
Einleitung
Im heutigen Blogbeitrag werde ich dir zeigen, wie du mit HTML Links umgehen kannst. Du lernst sowohl, wie du interne Verlinkungen auf deiner eigenen Website erstellst als auch, wie du Links zu externen Webseiten einfügst. Dafür verwenden wir das a-Element, das wir nun genauer betrachten werden. Doch bevor wir starten, möchte ich dir einen kurzen Hinweis geben: Wenn dir unsere Beiträge gefallen, schau unbedingt bei „Programmieren Starten Premium“ vorbei. Dort kannst du unsere umfassende Sammlung von über 30 Programmierkursen mit mehr als 1.500 Videos kostenlos testen. Du lernst dort unter anderem, wie du komplette Webprojekte selbst programmieren kannst. Falls du Fragen hast, steht dir ein deutschsprachiges Community Forum zur Verfügung. Wenn du wirklich das Programmieren lernen möchtest, schau unbedingt bei „Premium“ vorbei.
HTML Links
Im vorherigen Beitrag haben wir eine HTML-Datei mit dem Grundgerüst erstellt. Diese Datei enthält Überschriften und Absätze. Wenn wir die Datei im Browser betrachten, sieht sie wie gewünscht aus. Nun möchten wir mithilfe des a-Elements einen klickbaren Link einfügen. Dazu platzieren wir das a-Element an der gewünschten Stelle im Paragraphen. Das a-Element erzeugt automatisch den öffnenden und schließenden Tag für uns. Zudem können wir dem Öffnungstag ein Attribut hinzufügen, nämlich das href-Attribut. Dieses Attribut weist unserem Link das Ziel zu. Wenn der Link beispielsweise auf „okurs.de“ verweisen soll, kopieren wir einfach die entsprechende URL und fügen sie ein. Nach dem Öffnungstag und vor dem Schließtag geben wir den Link-Text ein, der auf der Webseite angezeigt wird und angeklickt werden kann. Wenn wir die Datei speichern und im Browser öffnen, sehen wir den Link und können darauf klicken. Die Seite von „programmieren-starten.de“ öffnet sich in einem neuen Tab.
<a href="https://okurs.de">OKurs.de</a>Externe Links
Bei Verlinkungen zu externen Seiten ist es üblich, dass sich die Zielseite in einem neuen Tab öffnet, damit der Nutzer nicht von der eigenen Seite verschwindet. Dies können wir ebenfalls mit dem a-Element umsetzen, indem wir das target-Attribut setzen. Hierbei verwenden wir den Wert „_blank“. Nach dem Speichern der Datei und dem Aktualisieren der Seite im Browser wird der Link nun in einem neuen Tab geöffnet.
<a href="https://okurs.de" target="_blank">OKurs.de</a>HTML Links – Das Zielattribut
Das Zielattribut gibt an, wo das verlinkte Dokument geöffnet werden soll.
Das Zielattribut kann einen der folgenden Werte haben:
_self – Standard. Öffnet das Dokument im selben Fenster/Tab, in dem es angeklickt wurde.
_blank – Öffnet das Dokument in einem neuen Fenster oder Tab.
_parent – Öffnet das Dokument im übergeordneten Frame.
_top – Öffnet das Dokument im gesamten Fensterinhalt.
Interne Links
Neben externen Links gibt es auch interne Links. Wenn du eine komplette Website erstellst, bestehen die einzelnen Seiten aus separaten HTML-Dateien. Um von einer Seite auf eine andere zu verlinken, verwenden wir erneut das a-Element. Dieses Mal setzen wir als Zieladresse den Pfad zur gewünschten HTML-Datei. Wenn sich die Dateien im selben Ordner befinden, können wir den Dateinamen direkt angeben. Anschließend speichern wir die Datei und öffnen sie im Browser. Durch Klicken auf den Link gelangen wir zur entsprechenden Seite.
Fazit
Das Setzen von HTML-Links ist eine grundlegende Technik im Webdesign. Mit dem a-Element kannst du sowohl interne als auch externe Verlinkungen erstellen. Durch das Hinzufügen des href-Attributs definierst du das Ziel des Links, während das target-Attribut festlegt, ob sich die Zielseite in einem neuen Tab öffnet oder nicht. Durch geschicktes Verwenden von Links kannst du die Navigation auf deiner Website verbessern und Besuchern eine benutzerfreundliche Erfahrung bieten.
Ich hoffe, dieser Blogbeitrag hat dir geholfen, die Grundlagen des Setzens von HTML-Links zu verstehen. Wenn du weitere Fragen hast oder tiefer in das Thema einsteigen möchtest, stehe ich gerne zur Verfügung. Vielen Dank fürs Lesen und bis zum nächsten Beitrag!
