Erstellen eines Buttons, der zum Seitenanfang zurück verlinkt

[marctrix]

Hej Fabienne,

Ich programmiere in der Schule gerade eine Homepage mit Phase5.

Schade, dass man in Schulen immer mit so altem Kram arbeiten muss. Ich hoffe, da wird sich in Zukunft mal was verbessern.

Ich wollte fragen wie ich einen “Knopf” oder Pfeil programmieren kann, der mich am Ende der Seite wieder zum Seitenanfang verlinkt, wenn ich ihn drücke.

Zunächst einmal etwas Grundwissen. Offenbar wird nicht nur bei Euch in der Schule nicht mit den ersten Dingen begonnen.

HTML steht für Hyper-Text Markup Language, also auf deutsche Hyper-Text Auszeichnungssprache. Das heißt, HTML dient dazu eine reine Text-Datei mit Informationen zur Bedeutung der enthaltenen Texte anzureichern.

Dafür stellt HTML einen Satz an Elementen bereit und definiert in der Spezifikation die Bedeutung diese Elemente.

Das Element button dient dazu eine interaktive Schaltfläche auszuzeichnen. Drückt man eine solche Schaltfläche, wird eine Aktion ausgelöst und etwas ändert sich auf der Seite, Daten werden verschickt, es wird etwas gespeichert - was auch immer.

Das Element a in Kombination mit dem Attribut href dient dazu, an eine andere Stelle springen - auf eine andere Seite im Web, auf eine andere Seite in deinem Webauftritt (in einem von beiden vielleicht an eine bestimmte Stelle) oder an eine bestimmte Stelle in der aktuell geöffneten Seite. Zum Beispiel nach "oben".

Wenn du von Button oder Pfeil sprichst, höre ich da raus, dass euch das obige nicht beigebracht wurde, weil du optisch "denkst". Du solltest in HTML rein logisch denken: welche Bedeutung hat ein Text — nur so findest du heraus, welches Element du benötigst.

Nachdem nun klar ist, dass das a-Element benötigt wird, komme ich zu einer Erklärung, warum ich "oben" in Anführungszeichen gesetzt habe. Bisher wissen wir nämlich nicht, was oben ist. Daher kommen auch Lösungsvorschlägen, die vielleicht ungeeignet sind. So der folgende bereits genannte:

<a href="#">nach oben</a>

Der bringt dich nämlich nicht an einen bestimmten Punkt im Dokument, sondern springt einfach ganz an den Anfang und ich vermute, kaum einer weiß, was das bedeutet (z.B. für Screenreader-Nutzer. Wohin führt dieser Link? Zum title-Element, zum html-Element oder vielleicht doch direkt zum body?)…

Besser ist es daher, selber zunächst den Zielpunkt festzulegen, indem du einem bereits vorhandenen Element die id top mitgibst, um überhaupt mal zu definieren, wo "oben" überhaupt ist. Meiner Meinung nach sollte das in fast allen Fällen der Anfang des Artikels sein. Aber wir haben hier schon gehört, der Link kann auch genutzt werden, um die Hauptnavi erreichbar zu machen.

Was mich dazu führt mal darüber nachzudenken, was man denn konzeptionell überhaupt vorbereitet hat und wie sich der Link nach "oben" in diese Konzept einfügt. Leider bereiten die meisten Lehrer überhaupt kein Konzept vor, sondern zeigen nur die Technik (oder noch schlimmer, überlassen es den Schülern herauszufinden, was passiert, ohne zu erklären, welche Vor- und Nachteile verschiedene Ansätze haben und wann welcher gewählt werden sollte - dann gilt womöglich auch das absolut absurde Vorgehen als korrekte Lösung, einen Button mit JavaScript zum Seitenanfang zu verlinken).

Was meine ich mit Konzept?

Es gilt als best practice am Seitenanfang ein paar Links anzufügen, direkt am Anfang des body, mit denen ein bis drei besonders wichtige Stellen im Dokument direkt angesprungen werden können. Das erleichtert vor allem denjenigen die Benutzung, die sich mit der Tabulator-Taste durch die Seiten bewegen. Die müssen dann nämlich nicht jedesmal durch die ganze Navigation tabben, wenn sie Hauptinhalt kommen wollen.

Diese Links springen sinnvollerweise die Hauptnavigation an (wenn die nicht direkt danach eh kommt), die Suche und/ oder den Hauptinhalt — nicht mehr einbauen, wenn die Liste zu lang wird, ist die schon wieder lästig.

Meiner Meinung nach wäre es — wenn so eine Liste mit Sprunglinks vorhanden ist, an diese Liste zu springen, wenn man "nach oben" anklickt - weil dann kann man von hier aus wieder schnell sowohl an den Anfang des Hauptinhaltes, zur Navigation oder zur Suche.

Erst wenn man sich ein paar Gedanken gemacht hat, kann man zu einer sinnvollen Lösung kommen, die die Seite besser nutzbar macht.

Hier der Code zu meiner Lösung:

<body>
  <ul id="ID_top">
    <li><a href="#ID_main-nav">zur Hauptnavigation</a></li>
    <li><a href="#ID_main-search">zur Suche</a></li>
    <li><a href="#ID_main-content">zum Inhalt</a></li>
  </ul>

[…]Viel anderer Code[…]

<p><a href="#ID_top">zurück nach oben</a>
</body>

Wie das dann aussieht (wie ein Link belassen, wie ein Button oder wie ein Pfeil) regelst du dann über CSS — aber das ist dann schon eine ganz andere Frage. 😉

edit: da fehlten ein paar # im Code, wodurch der nicht funktioniert hätte, selbst wenn (hoffentlich) die entsprechenden Elemente (Haupnavi, Suche, Inhalt) mit IDs ausgezeichnet worden wären.

PS: Wie ihr seht, mag ich es, meine eigenen Namen - zumindest im Fall von IDs, weil die doch etwas besonderes sind und ich die selten nutze - mit einem Kennzeichner zu versehen (nämlich ID_). Bei top mache ich das - bis jetzt - aus alter Gewohnheit nicht (fällt mir jetzt erst auf). Wie es zu dieser Gewohnheit kommt, hat Auge gut erklärt. Wer sich daran stört (mich stört es hier in dem Beispiel das jetzt so zu sehen auch) - soll der Konsistenz halber konsequenterweise auch das Ziel für den nach-oben-Link ID_top nennen - oder kennt jemand einen Browser, der von sich aus noch etwas mit nur top macht? - Wobei man das ja mit meiner Lösung wohl ausschließen möchte. Insofern: ich ändere das jetzt auch noch und mache aus top ID_top. Das PS hier lasse ich stehen, damit die Änderungen am Beitrag nachvollziehbar bleiben.

Marc