Informatik · Klasse 7 · Webdesign: Meine erste Webseite · 2. Halbjahr

Hyperlinks und Navigation

Erstellung von internen und externen Hyperlinks zur Navigation innerhalb und zwischen Webseiten.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Modellieren und Implementieren
• KMK: Sekundarstufe I - Kommunizieren und Kooperieren

Über dieses Thema

Hyperlinks dienen der Navigation innerhalb und zwischen Webseiten und sind zentral für das World Wide Web. In Klasse 7 lernen Schüler, interne Hyperlinks für Unterseiten und externe für andere Seiten mit HTML zu erstellen. Sie entwerfen Navigationsstrukturen, die logisch aufgebaut sind, und analysieren, warum aussagekräftige Linktexte die Benutzerfreundlichkeit steigern und Suchmaschinenoptimierung unterstützen. Dies entspricht den KMK-Standards für Sekundarstufe I im Modellieren und Implementieren sowie Kommunizieren und Kooperieren.

Im Kontext der Unit 'Webdesign: Meine erste Webseite' verbindet das Thema technische Umsetzung mit nutzerzentriertem Denken. Schüler modellieren Hierarchien wie Hauptmenü, Unterseiten und Rücklinks, testen Funktionalität und reflektieren Zugänglichkeit. Solche Fähigkeiten fördern digitales Gestalten und kooperatives Arbeiten, da Gruppen Feedback austauschen.

Aktives Lernen ist hier ideal, weil Schüler eigene Seiten bauen, verlinken und navigieren. Praktische Tests enthüllen Fehler sofort, kollaborative Optimierung schult Kommunikation, und sichtbare Erfolge motivieren. So werden abstrakte Konzepte greifbar und langlebig.

Leitfragen

1. Erkläre die Funktion von Hyperlinks für die Navigation im World Wide Web.
2. Entwerfe eine Navigationsstruktur für eine Webseite mit mehreren Unterseiten.
3. Analysiere die Bedeutung von aussagekräftigen Linktexten für die Benutzerfreundlichkeit und Suchmaschinenoptimierung.

Lernziele

• Erklären Sie die Funktion von Hyperlinks für die Navigation im World Wide Web.
• Entwerfen Sie eine Navigationsstruktur für eine Webseite mit mindestens drei Unterseiten.
• Analysieren Sie die Auswirkungen von Linktexten auf die Benutzerfreundlichkeit einer Webseite.
• Erstellen Sie interne und externe Hyperlinks in einem HTML-Dokument.
• Bewerten Sie die Effektivität verschiedener Navigationsdesigns hinsichtlich ihrer Übersichtlichkeit.

Bevor es losgeht

Grundlagen von HTML-Tags

Warum: Schüler müssen grundlegende HTML-Tags wie `<a>` und `href` kennen, um Hyperlinks erstellen zu können.

Dateistruktur und Ordnerverwaltung

Warum: Das Verständnis, wie Dateien und Ordner organisiert sind, ist notwendig, um interne Links korrekt zu setzen.

Schlüsselvokabular

Hyperlink	Ein Verweis in einem digitalen Dokument, der den Benutzer zu einer anderen Stelle im selben Dokument oder zu einem anderen Dokument oder einer Webseite führt.
Interne Verlinkung	Ein Hyperlink, der auf eine andere Seite innerhalb derselben Webseite verweist, z.B. von der Startseite zu einer Unterseite.
Externe Verlinkung	Ein Hyperlink, der auf eine Webseite außerhalb der eigenen Domain verweist, z.B. ein Link zu einer Nachrichten-Webseite.
Linktext (Ankertext)	Der klickbare Text eines Hyperlinks, der dem Benutzer und Suchmaschinen den Inhalt des verlinkten Ziels beschreibt.
Navigationsstruktur	Die Organisation und Anordnung von Links auf einer Webseite, die es Benutzern ermöglicht, sich auf der Seite zurechtzufinden und Inhalte zu entdecken.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Hyperlinks funktionieren nur mit einfachem Text, nicht mit Bildern oder Buttons.

Was Sie stattdessen lehren sollten

Hyperlinks lassen sich auf Bilder, Buttons oder andere Elemente anwenden, indem der HTML-Code angepasst wird. Aktive Experimente in Paaren helfen Schülern, dies selbst zu entdecken, indem sie Links auf verschiedene Elemente setzen und testen. So korrigieren sie ihr Modell durch Beobachtung.

Häufige Fehlvorstellung

Der Linktext spielt keine Rolle, solange die Adresse stimmt.

Was Sie stattdessen lehren sollten

Aussagekräftige Texte verbessern Zugänglichkeit und SEO, da Nutzer und Suchmaschinen Inhalte erkennen. Gruppenfeedback in Aktivitäten zeigt, wie vage Texte verwirren, und motiviert zu besseren Formulierungen.

Häufige Fehlvorstellung

Externe Hyperlinks sind immer gefährlich und sollten vermieden werden.

Was Sie stattdessen lehren sollten

Sichere externe Links erweitern Inhalte wertvoll, wenn Quellen geprüft werden. Praktische Tests in der Klasse lehren Risiken zu erkennen und fördern kritisches Denken durch Diskussion.

Ideen für aktives Lernen

Paararbeit: Interne Hyperlinks bauen

Paare erstellen eine HTML-Hauptseite mit drei Unterseiten und verlinken diese gegenseitig. Sie fügen ein Menü mit Rücklinks hinzu und testen die Navigation im Browser. Abschließend notieren sie Funktionsprobleme.

30 Min.·Partnerarbeit

Kleingruppen: Navigationsstruktur entwerfen

Gruppen skizzieren auf Papier eine Baumstruktur für eine fiktive Webseite mit fünf Seiten. Sie definieren Linktexte und implementieren sie in HTML. Die Klasse testet gegenseitig.

45 Min.·Kleingruppen

Ganzer Unterricht: Externe Links optimieren

Die Klasse recherchiert Quellen zu einem Thema, erstellt externe Hyperlinks mit aussagekräftigen Texten und integriert sie in eine gemeinsame Startseite. Gemeinsam prüfen sie auf Relevanz und Sicherheit.

40 Min.·Ganze Klasse

Individuell: Link-Text-Verbesserung

Jeder Schüler analysiert eine gegebene Webseite, ersetzt vage Linktexte durch präzise und begründet Änderungen. Ergebnisse werden in einer Klassendiskussion geteilt.

20 Min.·Einzelarbeit

Bezüge zur Lebenswelt

• Webdesigner und UI/UX-Entwickler bei Unternehmen wie Zalando oder Otto entwerfen und implementieren Navigationsstrukturen und Hyperlinks, um die Benutzererfahrung auf ihren Online-Shops zu optimieren und Kunden zum Kauf zu leiten.
• Journalisten und Redakteure bei Online-Nachrichtenportalen wie Spiegel Online oder Zeit Online nutzen interne und externe Hyperlinks, um Lesern zusätzliche Informationen, Hintergrundartikel oder Quellenangaben zur Verfügung zu stellen und die Verweildauer auf der Seite zu erhöhen.
• Content-Manager für Bildungsplattformen wie Schlaukopf oder bettermarks erstellen Webseiten mit klaren Navigationspfaden und aussagekräftigen Links, damit Schüler und Lehrer schnell die benötigten Lernmaterialien finden und sich mühelos durch die Lerninhalte bewegen können.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Lassen Sie die Schüler auf einem Zettel zwei Beispiele für aussagekräftige Linktexte aufschreiben und erklären, warum sie besser sind als 'Klicke hier'. Geben Sie ihnen außerdem die Aufgabe, einen internen und einen externen Link für eine fiktive Webseite zu entwerfen.

Gegenseitige Bewertung

Die Schüler erhalten eine einfache Webseite mit einer Navigationsstruktur (z.B. als Skizze oder rudimentäres HTML). Sie tauschen die Webseiten und bewerten gegenseitig die Klarheit der Navigation und die Aussagekraft der Linktexte anhand von zwei Kriterien: 'Ist die Navigation logisch?' und 'Verstehe ich, wohin der Link führt?'. Die Bewertung erfolgt mit 'Ja', 'Teilweise', 'Nein' und einer kurzen Begründung.

Kurze Überprüfung

Stellen Sie den Schülern eine kurze HTML-Code-Sequenz mit Hyperlinks vor. Bitten Sie sie, zu identifizieren, welche Links intern und welche extern sind, und erklären Sie kurz, was die Funktion jedes Links ist. Dies kann mündlich oder schriftlich erfolgen.

Häufig gestellte Fragen

Was sind Hyperlinks und ihre Funktion in der Webnavigation?

Hyperlinks sind anklickbare Verbindungen, die von einer Webseite zu einer anderen oder innerhalb derselben führen. Sie ermöglichen Navigation durch HTML-Attribute wie href. Schüler lernen, interne Links für Unterseiten und externe für andere Domains zu nutzen, was Strukturen wie Menüs schafft. Dies verbessert die Orientierung und bindet zum Webdesign-Standard.

Wie erstelle ich eine Navigationsstruktur für mehrere Webseiten?

Entwerfen Sie eine Hierarchie mit Hauptseite, Unterseiten und Rücklinks. Verwenden Sie ul-Listen für Menüs und relative Pfade für interne Links wie href="unterseite.html". Testen Sie in Kleingruppen, um Lücken zu finden. Dies fördert modellierendes Denken nach KMK-Standards und macht Webseiten benutzerfreundlich.

Warum sind aussagekräftige Linktexte wichtig?

Sie beschreiben den Zielinhalt präzise, steigern Barrierefreiheit für Screenreader und helfen Suchmaschinen bei der Indexierung. Statt 'Klick hier' nutzen Sie 'Mehr zu Klimawandel'. Aktive Optimierungsaufgaben zeigen Schülern den Unterschied in Usability-Tests und verbinden mit SEO-Grundlagen.

Wie kann aktives Lernen das Verständnis von Hyperlinks fördern?

Aktives Lernen macht Konzepte greifbar, indem Schüler selbst Links erstellen, testen und optimieren. Paar- oder Gruppenarbeit deckt Fehler auf, wie tote Links, und schult Problemlösung. Klassendiskussionen vertiefen Reflexion über Benutzerfreundlichkeit. Solche Methoden motivieren, da Erfolge sichtbar sind, und stärken Kooperation nach KMK-Standards. (68 Wörter)