Logo HTML5

HTSTA - STATISCHE WEBSEITEN

Logo CSS3

Kapitel 03: Hyperlinks

Kursablauf:

Allgemeine Bemerkungen:

NetBeans und die Firefox Add-ons sollen benutzt werden.

Standardverhalten soll besprochen werden: index.html vorhanden oder nicht.

Vorbereitung "Programmieren lernen":
  • Methode anwenden: a-Tag als Klick auf eine Schaltfäche sehen
  • Zeichenketten: Unterscheidung Groß- und Klein-Schrift beim href-Wert
  • Sprung/GoTo: a-Tag mit #-Verweis im href-Attribut
Zu behandelnde Seiten:
S. 54-63
Lesen Hausaufgabe:
S. 54-60
Autonom erarbeiten in der Schule:
S. 60-63

Denke daran die unbekannten Wörter und Ausdrücke aufzuschreiben und nachzuschlagen!

Aufgaben:

  1. Führe die Hands-on Practices 3.1, 3.2, 3.3, 3.4 durch.
  2. Führe die Hands-On Exercises durch.
  3. Führe den Case Study durch.
  4. Ergänze alle Texte in deiner Seite links.html zu einem Hyperlink wenn diese einen Verweis auf eine Internetseite darstellen sollen.
  5. Erstelle die Seite index.html in dem Wurzelverzeichnis deines Blogs. Diese Datei enthält eine Liste mit Verweisen zu den einzelnen Verzeichnissen und "answersXX.html" für jedes Kapitel. Weiterhin sind hier auch die Verweise auf die Spezialdateien (toolbox.html, links.html, ...).
  6. Kopiere die Datei ch02ex09.html und benenne sie ch03ex06.html. Erstelle Verweise vom Inhaltsverzeichnis zu den einzelnen Kapiteltiteln des Levels 1 auf dieser Seite.
  7. Erstelle einen Email-Verweis in der index.html Seite deines Blogs.
  8. Erstelle das Verzeichnis pictures in deinem Blog. Kopiere 2 Bilddateien in unterschiedlichen Formaten in dieses Verzeichnis. Erstelle nun eine HTML-Seite für diese Aufgabe und füge 3 Verweise hinzu:
    1. Verweis auf das Verzeichnis pictures.
    2. Verweis auf die erste Bilddatei.
    3. Verweis auf die zweite Bilddatei.

Verständnisfragen:

  1. Welcher ist der grundlegende Unterschied zwischen dem klassischen a-Tag und dem neuen HTML5 Block-a-Tag?
  2. Nenne 2 Möglichkeiten um den Zugang zu einer Webseite für Behinderte zu verbessern.
  3. Welche Schritte sollte man befolgen wenn ein Hyperlink nicht funktioniert?
  4. Wie positionierst du dich zu der Aussage: "E-Mail Hyperlinks funktionieren immer."?
  5. Welches Attribut darf bei HTML5 nicht mehr benutzt werden, wenn man einen Anker innerhalb einer Seite definieren will?

Zusatzaufgaben:

  1. Erstelle die 3 in den PDFs abgebildeten Dateien. Die Verknüpfungen zwischen den Seiten sind in Fettdruck dargestellt. Die jeweils aktive Seite ist nicht unterstrichen.
  2. Erstelle die im PDF abgebildete Datei. Die Verknüpfungen zeigen auf die einzelnen Titel der Seite.
  3. Füge in den vorher erstellten Dateien diverse Verweise hinzu.