In diesem Lab werden die Teilnehmer lernen, wie man mit HTML-A-Tags Hyperlinks und Navigation erstellt. Der Schwerpunkt liegt auf dem Aufbau einer umfassenden Webseitenstruktur und der Implementierung verschiedener Verlinkungstechniken. Das Lab führt die Schüler durch die Einrichtung einer einfachen HTML-Seite, das Erstellen von Navigationslinks zwischen Seiten, die Implementierung von Kontaktlinks, die Entwicklung von Dokumenten-Lesezeichen und die Untersuchung des Link-Verhaltens mit Zielattributen.
Die Teilnehmer beginnen mit dem Aufbau einer grundlegenden HTML5-Dokumentstruktur und verbessern dann schrittweise ihre Fähigkeiten, indem sie verschiedene Arten von Hyperlinks hinzufügen, darunter interne Seitennavigation, E-Mail- und Telefon-Kontaktlinks sowie Referenzen zwischen verschiedenen Seiten. Am Ende des Labs werden die Schüler ein solides Verständnis dafür haben, wie man Anker-Tags effektiv einsetzt, um interaktive und gut strukturierte Webseiten zu erstellen.
Einrichten der grundlegenden HTML-Seitenstruktur
In diesem Schritt lernen Sie, wie Sie eine grundlegende HTML-Seitenstruktur erstellen, die als Grundlage für das Hinzufügen von Hyperlinks und Navigation dient. HTML (HyperText Markup Language) ist die Standard-Markup-Sprache für das Erstellen von Webseiten.
Öffnen Sie zunächst die WebIDE und navigieren Sie zum Verzeichnis ~/project. Erstellen Sie eine neue Datei namens index.html, indem Sie mit der rechten Maustaste im Dateiexplorer klicken und "Neue Datei" auswählen.
Erstellen wir ein einfaches HTML5-Dokument mit der wesentlichen Struktur:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>
This is a basic HTML page structure that we'll use to create hyperlinks.
</p>
</body>
</html>
Lassen Sie uns die wichtigsten Komponenten dieser HTML-Struktur analysieren:
<!DOCTYPE html> deklariert, dass es sich um ein HTML5-Dokument handelt
<html> ist das Wurzelelement der HTML-Seite
<head> enthält Metainformationen über das Dokument
<meta charset="UTF-8"> gibt die Zeichensatzkodierung an
<meta name="viewport"> sorgt für eine korrekte Darstellung auf Mobilgeräten
<title> legt den Seitentitel fest, der in der Browser-Symbolleiste angezeigt wird
Beispielausgabe, wenn Sie diese Datei in einem Browser öffnen:
Erstellen von Seiten-zu-Seiten-Navigationslinks
<a>-Tags werden in HTML verwendet, um Hyperlinks zu erstellen. Die grundlegende Syntax für die Erstellung eines Hyperlinks lautet <a href="URL">Link-Text</a>.
In diesem Schritt lernen Sie, wie Sie mit HTML-Anker-Tags (<a>) Navigationslinks zwischen verschiedenen Seiten erstellen. Zunächst erstellen wir zusätzliche HTML-Dateien, um die Navigation zwischen Seiten zu demonstrieren.
Erstellen Sie zwei neue Dateien im Verzeichnis ~/project: about.html und contact.html.
Aktualisieren Sie die Datei index.html, um Navigationslinks hinzuzufügen:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<h1>Welcome to My Website</h1>
<p>This is the home page with navigation links.</p>
</body>
</html>
Das Attribut <a href="..."> gibt die Zielseite an.
Verwenden Sie relative Dateipfade, wenn Sie zwischen Seiten im selben Verzeichnis verlinken.
Jede Seite enthält ein konsistentes Navigationsmenü.
Beispielausgabe in einem Webbrowser:
Implementieren von E-Mail- und Telefon-Kontaktlinks
In diesem Schritt lernen Sie, wie Sie mit HTML-Anker-Tags anklickbare E-Mail- und Telefonnummer-Links erstellen. Öffnen Sie die Datei contact.html und aktualisieren Sie sie mit speziellen Link-Typen.
Aktualisieren Sie die Datei contact.html mit folgendem Inhalt:
Das Präfix mailto: erstellt einen E-Mail-Link, der den Standard-E-Mail-Client öffnet.
Das Präfix tel: erstellt einen Telefonnummer-Link, der auf Mobilgeräten funktioniert.
Diese Links ermöglichen es Benutzern, Sie mit einem einzigen Klick zu kontaktieren.
Beispielausgabe in einem Webbrowser:
Erstellen von Dokument-Lesezeichen auf einer einzelnen Seite
In diesem Schritt lernen Sie, wie Sie mit HTML-Anker-Tags interne Seiten-Lesezeichen erstellen. Erstellen Sie eine neue Datei namens long-document.html im Verzeichnis ~/project mit folgendem Inhalt:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document with Bookmarks</title>
<style>
body {
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
section {
height: 500px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Table of Contents</h1>
<nav>
<a href="#section1">Section 1</a> | <a href="#section2">Section 2</a> |
<a href="#section3">Section 3</a>
</nav>
<section id="section1">
<h2>Section 1: Introduction</h2>
<p>
This is the first section of our long document. Click the links above to
navigate quickly.
</p>
</section>
<section id="section2">
<h2>Section 2: Main Content</h2>
<p>This is the second section with more detailed information.</p>
</section>
<section id="section3">
<h2>Section 3: Conclusion</h2>
<p>This is the final section of the document.</p>
</section>
<a href="#" style="position: fixed; bottom: 20px; right: 20px;"
>Back to Top</a
>
</body>
</html>
Wichtige Punkte zu Dokumenten-Lesezeichen:
Der <style>-Block fügt CSS für die Gestaltung des Dokuments hinzu, einschließlich der Höhe und der Abstände der Abschnitte. Sorgen Sie sich vorerst nicht um CSS, wir werden es in späteren Labs behandeln.
max-width: 600px; legt die maximale Breite des Dokuments fest.
margin: 0 auto; zentriert das Dokument horizontal.
line-height: 1.6; legt die Zeilenhöhe für eine bessere Lesbarkeit fest.
section { height: 500px; margin-bottom: 20px; } legt die Höhe und den Abstand für jeden Abschnitt fest.
Verwenden Sie id-Attribute, um Lesezeichen-Ziele zu erstellen.
Erstellen Sie Links mit href="#elementId", um zu bestimmten Abschnitten zu springen.
Das #-Symbol gefolgt von der id erstellt einen internen Seiten-Link.
Fügen Sie die Datei long-document.html am Ende der Navigationslinks hinzu, damit Sie das Dokument vorschauen können.
Beispielausgabe in einem Webbrowser:
Verwenden von Target-Attributen für das Link-Verhalten
In diesem Schritt lernen Sie über HTML-Link-Target-Attribute, die steuern, wie Links geöffnet werden. Erstellen Sie eine neue Datei namens link-targets.html im Verzeichnis ~/project:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Link Target Attributes</title>
</head>
<body>
<h1>Link Target Demonstration</h1>
<h2>Default Link Behavior</h2>
<p>
<a href="https://www.example.com">Normal Link</a>
(Opens in the same window)
</p>
<h2>Target Attribute Examples</h2>
<p>
<a href="https://www.example.com" target="_blank">New Tab Link</a>
(Opens in a new tab)
</p>
<h2>Multiple Target Demonstrations</h2>
<p>
<a href="https://www.example.com" target="_self">Same Window</a> |
<a href="https://www.example.com" target="_blank">New Tab</a> |
<a href="https://www.example.com" target="_parent">Parent Frame</a> |
<a href="https://www.example.com" target="_top">Full Browser Window</a>
</p>
<h2>Named Window Target</h2>
<p>
<a href="https://www.example.com" target="myWindow"
>Open in Named Window</a
>
</p>
</body>
</html>
Wichtige Punkte zu Link-Target-Attributen:
_blank: Öffnet den Link in einem neuen Tab oder Fenster.
_self: Standardverhalten, öffnet den Link im selben Fenster.
_parent: Öffnet den Link im übergeordneten Frame.
_top: Öffnet den Link im gesamten Browserfenster.
Benutzerdefinierte benannte Ziele können spezifisches Fensterverhalten erzeugen.
Kopieren Sie die URL des Webservers und fügen Sie /link-targets.html an das Ende der URL an, um die Seite anzuzeigen (neuer Tab).
Beispielausgabe in einem Webbrowser:
Zusammenfassung
In diesem Lab haben die Teilnehmer gelernt, wie man umfassende HTML-Webseiten erstellt und verschiedene Hyperlink-Techniken implementiert. Das Lab begann mit der Einrichtung einer grundlegenden HTML5-Seitenstruktur und demonstrierte essentielle Elemente wie DOCTYPE, Meta-Tags und die grundlegende Organisation von Inhalten. Die Teilnehmer haben die Erstellung von Navigationslinks zwischen mehreren Seiten untersucht und HTML-Anker-Tags verwendet, um verschiedene Abschnitte einer Website zu verbinden.
Das Lab hat die Hyperlink-Funktionalitäten weiter erweitert, indem es fortgeschrittene Techniken wie die Implementierung von E-Mail- und Telefon-Kontaktlinks, die Erstellung von Dokumenten-Lesezeichen auf einer einzigen Seite und das Verständnis des Link-Verhaltens über Target-Attribute eingeführt hat. Diese praktischen Übungen haben die Teilnehmern die Möglichkeit gegeben, praktische Erfahrungen im Aufbau interaktiver und gut strukturierten Webseiten mit HTML-Link-Mechanismen zu sammeln.
