In diesem Blogartikel erkläre ich was Links bzw. Hyperlinks sind. Ebenso wird erklärt was eine Navigation ist.
Links bzw. Hyperlinks (<a href=““>)
Links bzw. Hyperlinks sind grundlegende Elemente in HTML, die es ermöglichen, von einer Seite zu einer anderen zu wechseln. Sie werden mit dem <a>-Tag erstellt. Der href-Attribut gibt die Adresse (URL) an, zu der der Link führt.
Eine URL (Uniform Resource Locator) ist eine Zeichenfolge oder eine Adresse, die verwendet wird, um Ressourcen im Internet zu identifizieren und zu lokalisieren. Sie dient dazu, spezifische Inhalte wie Webseiten, Bilder, Videos oder Dateien im Netzwerk zu finden.
Beispiel:
<a href="https://www.beispielseite.de">Besuche Beispielseite</a>
In diesem Beispiel führt der Link zu „https://www.beispielseite.de“ und der Text „Besuche Beispielseite“ wird als anklickbarer Link angezeigt.
Wenn eine Webseite mehrere Seiten hat, können diese Seiten nur erreicht, angeschaut und gelesen werden, wenn es Links zu diesen Seiten gibt. Hyperlinks verbinden die verschiedenen Seiten einer Webseite miteinander und ermöglichen es den Benutzern, leicht von einer Seite zur nächsten zu navigieren. Ohne Links wären die zusätzlichen Seiten zwar vorhanden, aber für die Besucher der Webseite unsichtbar und unzugänglich.
Interne vs. externe Links
Es gibt zwei Haupttypen von Hyperlinks: interne Links und externe Links.
Interne Links
Diese führen zu anderen Seiten innerhalb derselben Webseite. Sie verwenden relative URLs.
Beispiel:
<a href="seite2.html">Gehe zu Seite 2</a>
Dieser Link führt zu einer anderen Seite innerhalb derselben Webseite.
Externe Links
Diese führen zu Seiten auf anderen Webseiten. Sie verwenden absolute URLs.
Beispiel:
<a href="https://www.anderewebseite.de">Besuche eine andere Webseite</a>
Dieser Link führt zu einer anderen Webseite.
Aufschlüsselung des Codes
Das `<a>`-Tag steht für „anchor“ (Anker) und wird verwendet, um Hyperlinks zu erstellen. Ein Hyperlink ist ein anklickbares Element, das den Benutzer zu einer anderen Webseite oder einer anderen Stelle innerhalb derselben Seite führt.
`href` steht für „hypertext reference“ (Hypertext-Verweis).
Das `href`-Attribut gibt die URL (Uniform Resource Locator) an, zu der der Link führt.
In diesem Fall ist die URL „https://www.anderewebseite.de“, was bedeutet, dass der Link den Benutzer zu dieser externen Webseite führt, wenn er angeklickt wird.
Linktext: Zwischen den öffnenden `<a>`-Tag und dem schließenden `</a>`-Tag befindet sich der Text „Besuche eine andere Webseite“.
Dieser Text wird im Browser als anklickbarer Link angezeigt. Das bedeutet, dass Benutzer diesen Text sehen und anklicken können, um zur angegebenen URL zu gelangen.
Wenn Sie einen Link setzen zu einer anderen Webseite, sollten Sie dafür sorgen, dass diese Webseite in einem neuen Browserfenster geöffnet wird. Dies können Sie mit dem target=“_blank“-Attribut erreichen.
Beispiel:
<a href="https://www.anderewebseite.de" target="_blank">Besuche eine andere Webseite</a>
Verwendung von Anker-Links (`<a name=““>` oder `id`)
Anker-Links ermöglichen es, zu einer bestimmten Stelle auf derselben Seite zu springen. Dazu wird ein `id`-Attribut oder das veraltete `name`-Attribut verwendet.
Beispiel mit `id`: Erstellen einer Sprungmarke
<h2 id="abschnitt1">Abschnitt 1</h2>
Verlinke zur Sprungmarke
<a href="#abschnitt1">Gehe zu Abschnitt 1</a>
Wenn der Link „Gehe zu Abschnitt 1“ angeklickt wird, springt die Seite zu der Stelle, an der sich die Überschrift mit der `id=“abschnitt1″` befindet.
Navigation
Navigation ist ein wesentlicher Bestandteil jeder Webseite, da sie den Benutzern hilft, sich leicht auf der Seite zu bewegen. Eine gut strukturierte Navigation verbessert die Benutzerfreundlichkeit und das Nutzererlebnis. Das HTML-Tag `<nav>` wird verwendet, um den Navigationsbereich einer Webseite zu kennzeichnen.
Beispiel einer einfachen Navigation
<nav> <ul> <li><a href="index.html">Startseite</a></li> <li><a href="ueber-uns.html">Über uns</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> </nav>
In diesem Beispiel erstellt das `<nav>`-Tag einen Bereich für die Navigation. Innerhalb dieses Bereichs gibt es eine ungeordnete Liste (`<ul>`) mit Listenelementen (`<li>`), die jeweils einen Hyperlink (`<a>`) zu den verschiedenen Seiten der Webseite enthalten.
Die Navigation einer Webseite befindet sich entweder oben oder auf der linken Seite. Wenn die Navigation oben ist, ist sie für Links- und Rechtshänder gleich gut erreichbar. Wenn es jedoch zu viele Links gibt, sollten Sie die Navigation auf der linken Seite platzieren.
Komplettbeispiel: Navigation und Links
Hier der komplette HTML-Code einer HTML-Datei:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Webseite mit Navigation</title>
</head>
<body>
<header>
<h1>Willkommen auf meiner Webseite</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Über Uns</a></li>
<li><a href="#services">Dienstleistungen</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
<section id="home">
<h2>Home</h2>
<p>Willkommen auf der Startseite unserer Webseite.</p>
</section>
<section id="about">
<h2>Über Uns</h2>
<p>Erfahren Sie mehr über unser Unternehmen und unsere Geschichte.</p>
</section>
<section id="services">
<h2>Dienstleistungen</h2>
<p>Entdecken Sie unsere vielfältigen Dienstleistungsangebote.</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<p>Betrachten Sie einige Beispiele unserer bisherigen Arbeiten.</p>
</section>
<section id="contact">
<h2>Kontakt</h2>
<p>Kontaktieren Sie uns für weitere Informationen oder Anfragen.</p>
</section>
</body>
</html>
Erklärung
HTML-Struktur:
- Die HTML-Datei beginnt mit `<!DOCTYPE html>` und enthält dann das `<html>`, `<head>` und `<body>` Element.
- Im `<head>` sind Meta-Tags für die Zeichenkodierung, die Ansichtsgröße und der Titel der Webseite definiert.
- Im `<body>` gibt es einen `<header>` für die Hauptüberschrift und ein `<nav>` für die Navigationsleiste.
Navigation (`<nav>`):
- Die Navigation ist als ungeordnete Liste `<ul>` organisiert, wobei jedes Listenelement `<li>` einen Link `<a>` enthält.
- Jeder Link führt zu einer bestimmten Sektion innerhalb der Webseite, die durch die `id` Attribute in den `<section>` Elementen definiert ist (`#home`, `#about`, `#services`, `#portfolio`, `#contact`).
Diese Struktur bietet eine grundlegende Webseite mit einer klaren Navigation, die nur HTML verwendet. Benutzer können zwischen verschiedenen Abschnitten der Seite navigieren, indem sie die Links oben anklicken.
Schlussbemerkung
Links und Navigation sind das Rückgrat einer jeden Webseite. Sie ermöglichen es den Besuchern, sich problemlos durch die Inhalte zu bewegen und wichtige Informationen schnell zu finden. Durch klare und gut strukturierte Navigationssysteme und sinnvoll platzierte Links wird die Benutzerfreundlichkeit erhöht und das gesamte Nutzererlebnis verbessert. Denken Sie daran, dass eine gut gestaltete Navigation sowohl für die Nutzer als auch für Suchmaschinen von großer Bedeutung ist, um Ihre Webseite effektiv zu präsentieren und zu navigieren.
Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .
Ein Gedanke zu „HTML lernen leicht gemacht: Links und Navigation“