Registrieren/Anmelden

Eine Frage stellen

Thema erstellen

In HTML Links einfügen und dein erstes HTML-Spiel: <a>

Lerne, wie wir in HTML Links einfügen, seien es absolute Links, relative Links oder auch interne Links (Sprungmarken) - und programmiere dein erstes Spiel!
(Letztes Update von Niklas Baumgärtler am 9.9.2020)

Am Ende wirst du:

  • Absolute, relative und interne Links setzen können
  • Ein "Wer wird Millionär?"-Spiel programmiert haben
  • Einiges über die richtige Schreibweise bei Bezeichnungen erfahren haben
Diese Einheit überspringen

Willkommen zurück zur nächsten Lektion dieses Kurses! Dieses Mal werden wir uns mit dem HTML-Element beschäftigen das aus einer Serie von getrennten Einzel-HTML-Seiten eine ganze Webseite macht – und in weiterer Folge das erschafft, was wir heute das Internet nennen: das <a>-Tag. Wir werden heute lernen, wie wir in HTML Links einfügen. Wir beginnen mit absoluten Links, die sind am einfachsten und geläufigsten:

1. In HTML absolute Links einfügen

Kannst du dich noch an die <img>-Tags erinnern, mit denen man Bilder in HTML einfügt? Die gingen ja z.B. so:

<img src='bild2.jpg'>

Das src-Attribut des <img>-Tags hat dabei bestimmt, von wo der Browser das Bild laden soll – in diesem Fall soll er im selben Ordner in der sich auch die .html-Datei befindet in der dieser Befehl steht nach einer Bilddatei suchen, die ‘bild2.jpg’ heißt.

Links funktionieren vom Prinzip her sehr ähnlich wie das Einfügen von Bildern. Auch bei Links müssen wir eine Datei oder einen Pfad angeben – nämlich das Ziel, wohin uns der Browser bringen soll, sobald wir auf den Link klicken.

Ein sehr einfacher Link wäre z.B. folgender, der dich beim Draufklicken auf www.bunterrichten.com bringt:

<a href='https://www.bunterrichten.com'>Klicke hier, um auf www.bunterrichten.com zu gelangen!</a>

Das Ergebnis: Klicke hier, um auf www.bunterrichten.com zu gelangen!

Beim <a>-Tag, ist das “a” eine Abkürzung für “anchor”, Anker. Man kann es sich so vorstellen, dass ein Anker an dem Ort festgezurrt ist auf den das <a>-Tag verweist, damit der Browser sich dann gewissermaßen über das Seil des Ankers zu seinem Ziel hin bewegen kann.

Das <a>-Tag ist wieder ein Tag der zweiten Gruppe, das bedeutet du brauchst ein öffnendes <a> und ein schließendes </a> um einen Link zu setzen. Aber ähnlich wie beim <img>-Tag vom letzten Mal das dir erlaubt Bilder einzufügen braucht der Browser jetzt noch die Information wohin er uns denn über den Link bringen soll. Beim <img>-Tag haben wir dazu ein Attribut verwendet das “src” hieß, und auch hier verwenden wir wieder ein Attribut – nur heißt dieses “href”.

Das href-Attribut haben wir auf “https://www.bunterrichten.com” gesetzt, und alles was zwischen dem öffnenden <a> und dem schließenden </a>-Tag steht ist dann der Link-Text. Da kann man dann drauf klicken und wird vom Browser dort hingebracht wohin das href-Attribut eben zeigt.

Das Gleiche funktioniert übrigens auch, wenn zwischen dem <a> und dem </a> z.B. ein Bild eingefügt worden ist. Dann bringt dich der Browser bei einem Klick auf das Bild zu der Seite die du im href-Attribut festgelegt hast. Das könnte dann z.B. so aussehen:

<a href='https://www.bunterrichten.com'>
<img src='bild2.jpg'>
</a>

Das Ergebnis ist ein klickbares Bild:

Bild 2 zum Testen

Statt https://www.bunterrichten.com kannst du natürlich auch jede beliebige andere Webseite wählen, wie z.B. https://derstandard.at, oder auch eine genauere Unter-Seite wie z.B. ‘https://www.bunterrichten.com/lerneinheiten/in-html-links-einfuegen/’ – wichtig ist dabei nur, dass du am Anfang das ‘http://’ bzw. das ‘https://’ nicht vergisst. Sonst kennt sich der Browser nicht aus.

Aber wann sollen wir nun ‘http://’ und wann ‘https://’ hinschreiben, und was ist das überhaupt?

Das bringt uns zum Thema SSL:

1.1 Einige Definitionen: http://, https:// und SSL

Die Zusätze http:// und https:// sind Abkürzungen für die Art und Weise wie Computer miteinander kommunizieren. Ausgeschrieben bedeutet http “Hypertext transfer protocol”, aber den Begriff brauchst du dir nicht merken.

Wichtig für dich zu wissen ist der Unterschied zwischen http:// und https://. Der Unterschied besteht darin, dass in der Variante https:// ein sogenanntes SSL-Zertifikat dafür sorgt, dass eingegebene Daten verschlüsselt übertragen werden. Eine Webseite mit SSL-Zertifikat ist somit sicherer als eine ohne SSL-Zertifikat.

Das hat Auswirkungen darauf wie Suchmaschinen wie Google deine Webseite bewerten, Seiten die SSL verwenden werden höher in den Ergebnissen gereiht. Was SSL ausgeschrieben heißt brauchst du dir aber wiederum nicht merken. Falls es dich doch interessiert: Es heißt “Secure Socket Layer”.

Wie aber erkennst du nun, ob eine Webseite ein SSL-Zertifikat hat? Ganz einfach: an dem ‘s’ bei ‘https://’ am Anfang der Web-Adresse. Wenn das nicht dabeisteht, dann hat die Webseite kein entsprechendes Zertifikat, und du kannst sie auch nicht mit https:// aufrufen bzw. bekommst dann von deinem Browser eine Warnung, dass die Webseite nicht sicher ist. Allerdings kommt das im Jahr 2020 kaum noch vor, weil sich SSL-Zertifikate eigentlich schon Standard sind.

Für dich wichtig: Vor Domains immer https:// oder http:// dazuschreiben (je nachdem, ob die Webseite eben ein SSL-Zertifikat hat oder nicht).

Du kannst Links mit https:// oder http:// davor (der Einfachheit halber schreibe ich ab jetzt nur noch https://, aber beide sind gemeint) sowohl auf andere Webseiten verlinken als auch auf andere Unterseiten deiner eigenen Webseite:

<a href='https://derstandard.at'>Bring mich zur Standard-Zeitung!</a>

Das Ergebnis: Bring mich zur Standard-Zeitung!

<a href='https://www.bunterrichten.com/lerneinheiten/html-text-formatierung/'>Bring mich zur Lektion mit der Text-Formatierung!</a>

Das Ergebnis: Bring mich zur Lektion mit der Text-Formatierung!

Was wir bis jetzt gelernt haben, waren sogenannte absolute Links. Bei diesen muss man immer die ganze Web-Adresse angeben.

Aber weil das nicht immer zielführend ist, kommen wir nun zu den relativen Links.

2. Relative Links in HTML einfügen

Relative Links funktionieren im Grunde genau gleich wie die <img>-Tags – auch hier brauchen wir nur den Dateinamen und bisweilen noch Pfade.

Der einfachste relative Link führt uns z.B. von unserer index.html zu einer anderen HTML-Datei, nennen wir sie test.html, die sich im gleichen Ordner wie unsere index.html befindet:

<a href='test.html'>Bring mich zur anderen Seite!</a>

Wenn wir den obigen Code in unsere index.html einfügen und eine weitere .html-Datei erstellen die test.html heißt und sich im selben Ordner befindet, bringt uns der Link zu der anderen Datei.

Genau wie bei den Bildern funktioniert das aber nur, wenn die Datei zu der uns der Link hinführen soll sich im gleichen Ordner befindet wie die Datei in der der Programmier-Code mit dem Link steht.

Wenn sich die Datei test.html stattdessen in einem Unter-Ordner befinden würde der “test-Ordner” heißt, brauchen wir wieder unsere Pfade:

<a href='./test-Ordner/test.html'>Bring mich zur anderen Seite!</a>

Und  befindet sich die Datei test.html im übergeordneten Ordner, brauchen wir unsere 2 Punkte wieder:

<a href='../test.html'>Bring mich zur anderen Seite!</a>

Du siehst, in HTML Links einfügen ist gar nicht so schwer. So, nun wissen wir genug über HTML-Links, um unser erstes HTML-Spiel zu programmieren – das “Wer wird Millionär”-Spiel 🙂

3. Ein “Wer wird Millionär”-Spiel mit HTML-Links programmieren

Jetzt da wir wissen wie Links funktionieren können wir uns bald daran machen eine “richtige” Webseite mit klickbaren Unterseiten zu bauen. Aber zuvor werden wir noch unser erstes kleines Spiel programmieren. Und zwar ist es ein Rate-Spiel nach dem Muster von “Wer wird Millionär?”. Das sieht dann in etwa so aus:

Wer wird Millionär programmieren

Falls du die Fernseh-Show nicht kennst: Es geht darum dass ein Kandidat eine Reihe von Fragen gestellt bekommt auf die es jeweils 4 Antworten gibt, nämlich A, B, C oder D. Entscheidet sich der Kandidat richtig, kommt er in die nächste Runde und bekommt mehr Preisgeld. Liegt er aber falsch, so verliert er einen Großteil des Preisgeldes wieder.

Funktional betrachtet handelt es sich dabei um eine sehr einfache Programmier-Aufgabe. Eine Frage und vier klickbare Antworten müssen angezeigt werden. Wenn man auf die richtige Antwort klickt wird man zu einer “Du hast gewonnen”-Seite weitergeleitet, klickt man auf eine der falschen Antworten wird man auf eine “Du hast leider verloren”-Seite geleitet.

Zusätzlich könnte man auf den Ergebnis-Seiten noch einen Link einbauen der zurück zum Spiel-Start bringt (nochmal versuchen), oder auf der “Du hast gewonnen”-Seite einen Link zur nächsten Frage, jeweils wieder mit Antworten, und so weiter.

3.1 Die Wer wird Millionär-Frage-Seite programmieren

Wir brauchen also eine Start-Bildschirm-Seite, auf der die Frage und unsere vier Antwortmöglichkeiten zu finden sind. Wir ändern also unsere index.html um auf den folgenden Source-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Wer wird Millionär?</title>
</head>
<body>
<h1 style='text-align: center;'>Wer wird Millionär?</h1>
<h2 style='text-align: center'><b>Frage 1:</b> Wobei besteht die oberste Schicht meist aus dem sogenannten Fondant?</h2>
<p style='text-align:left; margin-top: 50px; margin-left: 100px;'>
<a href='falsch.html'><b>A:</b> Straßenbelag</a><br>
<a href='richtig.html'><b>B:</b> Festtagstorte</a><br>
<a href='falsch.html'><b>C:</b>Kaltschaummatratze</a><br>
<a href='falsch.html'><b>D:</b> Komposthaufen</a>
</p>
</body>
</html>

3.2 Die Wer wird Millionär-Antwortseiten programmieren

Nun haben wir eine Fragestellung und vier Antwort-Möglichkeiten, wobei drei davon auf die HTML-Datei falsch.html zeigen und eine davon auf die HTML-Datei richtig.html – diese beiden Datein legen wir als nächstes an. Weißt du noch wie du HTML-Dateien in Eclipse erstellst? Rechtsklick auf den Project Explorer, New->File und einen passenden Namen geben. Hier der Code für die falsch.html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Wer wird Millionär?</title>
</head>
<body>
<h1 style='text-align: center;'>FALSCH!!!</h1>
<a style='text-align: center;' href='index.html'>Zurück zum Start</a>
</body>
</html>

Wer wird Millionär programmieren falsch

Dann brauchen wir noch die Datei richtig.html, die erstellst du ebenso im Project Explorer von Eclipse, und fügst diesen Code ein:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Wer wird Millionär?</title>
</head>
<body>
<h1 style='text-align: center;'>RICHTIG!!!</h1>
<a style='text-align: center;' href='index.html'>Zurück zum Start</a>
</body>
</html>

Wer wird Millionär programmieren richtig

Wenn du nun die index.html in deinem Browser öffnest, kannst du dein erstes selbst-programmiertes Spiel spielen! Man könnte jetzt beispielsweise die richtig.html so umschreiben dass dort die 2. Frage gestellt wird, die wenn man richtig liegt z.B. auf eine richtig2.html mit der nächsten Frage führt und so weiter. Oder Bilder einfügen etc. Sei gerne kreativ und experimentiere ein wenig herum, du kannst ja nichts kaputt machen, nur lernen 🙂

Und dann gibt es noch diese ziemlich coole Funktion, die du vielleicht von der einen oder anderen Webseite kennst, wo es einen Link gibt, der dich nach dem Lesen eines langen Textes wieder zurück zum Anfang der Seite bringt. Der ist auch nicht sehr schwierig einzufügen, den lernen wir jetzt auch noch: es ist ein interner Link, auch Sprungmarke genannt.

4. Einen internen HTML-Link einfügen

Ein interner Link bringt dich nicht auf eine andere Unterseite, sondern auf einen anderen Bereich der Seite, auf der du dich schon befindest. Du kennst das vielleicht aus dem Programm Word, mit dem anklickbaren Inhaltsverzeichnis. Oder von Webseiten, wo es einen Button gibt, der dich wieder ganz nach oben bringt.

Ein interner Link funktioniert vom Programmieren her im Grunde nicht sehr viel anders als ein relativer oder ein absoluter Link, aber er macht ein bisschen mehr Arbeit. Doch keine Angst, wir schaffen das!

4.1 Das Attribut id

Als erstes müssen wir bei einem internen HTML-Link definieren wohin der Browser uns bringen soll. Bei relativen und absoluten Links ist das recht einfach, da brauchen wir nur den Namen der Datei bzw. den Link auf eine bestimmte Unterseite angeben. Bei internen Links geht es darum in welchen Unterbereich einer einzelnen Seite uns der Browser bringen soll. Den müssen wir ihm definieren.

Damit wir das tun können, lernen wir jetzt ein neues Attribut, und das heißt “id” (im Fließtext meist ID geschrieben). Das steht für Identifier, oder zu Deutsch Identifikator, und ist ein sehr spezielles Attribut. Man kann einem jeden HTML-Element eine ID zuweisen, aber jede id darf im ganzen HTML-Dokument nur genau ein Mal vorkommen.

Die Zuweisung einer id funktioniert genau gleich wie bei anderen Attributen, und zwar so:

<p id='guterAbsatz'>
Das ist ein Absatz
</p>

Nun hat der Absatz die ID ‘guterAbsatz’ bekommen und ist somit über diese ID eindeutig identifizierbar.

4.2 Den internen HTML-Link einfügen

Ab jetzt können wir diese ID mit einer vorangesetzten Raute (#) verwenden, um einen internen Link auf diese ID zu setzen (Das #-Zeichen findest du rechts neben dem Ä auf der Tastatur):

<a href='#guterAbsatz'>Drück hier dann kommst du zum guten Absatz</a>

Wenn nun jemand auf den Link klickt dann scrollt der Browser automatisch zu dem HTML-Element mit der im href-Attribut des Links angegebenen ID. Wichtig ist dabei das Rautezeichen #, dann weiß er Browser dass er nach einer ID suchen soll.

Damit lassen sich z.B. relativ einfach klickbare Inhaltsverzeichnisse wie im Programm Word erstellen, was ich auch auf dieser Webseite gemacht habe. Allerdings siehst du das Inhaltsverzeichnis nur dann, wenn du einen kostenlosen Account erstellt hast. Dann kannst du rechts (bzw. am Handy oben) auf das Aufzählungs-Symbol klicken, dann sollte das Klickbare Inhaltsverzeichnis eingeblendet werden. Probiers doch gerne mal aus 🙂

5. Einige Worte zu Schreibweisen beim Programmieren

Es gibt zahlreiche verschiedene Programmier-Sprachen, in manchen ist es egal ob man Worte klein oder groß schreibt, in anderen nicht (z.B. PHP).

5.1 Schreibweisen von HTML-Tags und CSS-Befehlen

HTML gehört grundsätzlich zu den Sprachen, in denen man die einzelnen HTML-Tags groß, klein oder auch durcheinander schreiben kann. Das bedeutet, dass der Browser ein <img>-Tag erkennt, egal ob du <img>, <IMG>, <Img> oder auch <iMg> schreibst. Es ist aber ratsam, dir gleich von Anfang an eine Schreibweise anzugewöhnen, die dir dann nicht bei anderen Programmier-Sprachen im Weg sein wird. Ich empfehle grundsätzlich die Kleinschreibung bei den HTML-Tags durchzuziehen, auch bei CSS-Befehlen macht das Sinn.

5.2 Schreibweisen von HTML-Pfaden, auch URL oder URI genannt

Hier ist es nicht egal, ob du Dateinamen klein oder groß schreibst. Ein href-Attribut, das auf eine Datei index.html zeigt, wird eine Datei nicht finden, die Index.html heißt (der Unterschied liegt in diesem Fall im groß geschriebenen I). Wenn du dir von Anfang an angewöhnst, nicht zwischen den Schreibweisen zu wechseln, sparst du dir später viel Zeit, weil du dann nicht ständig vermeidbare Fehler ausbesserst.

Überall wo es in der Programmierung nicht egal ist wie man etwas schreibt, gibt es im Grunde drei verbreitete Arten etwas zu schreiben:

  • Kleinschreibung (z.B. index.html): einfach, aber problematisch bei längeren Bezeichnungen wie “getthisfromthat”.
  • Kleinschreibung mit – oder _ (z.B. get_this_from_that): gut leserlich, aber Bezeichnungen können sehr lang werden. Wichtig dabei ist es durchgängig entweder _ oder – zu verwenden und die beiden nicht zu mischen.
  • Camelback-Schreibweise (z.B. getThisFromThat): klein geschrieben beginnen, immer ein Großbuchstabe beim Anfang des nächsten Wortes das in der Bezeichnung drinsteckt. Damit wird die Bezeichnung nicht ganz so lang.

Für welche du dich entscheidest ist im Grunde egal. Wichtig ist nur dass du sie möglichst durchgängig verwendest. Sonst rastest du bei größeren Projekten früher oder später aus, weil dein Source-Code so verwirrend wird 😉

Aber ich denke, das Grundprinzip wie man HTML-Links einfügt, hast du nun im Großen und Ganzen verstanden. Dann werden wir uns in der nächsten Lektion damit beschäftigen wie wir <div>-Tags verwenden können, um unserer Webseite ein schönes Layout zu verpassen. Du wirst sehen: Die nächsten Lektionen bringen Quantensprünge für das Aussehen unserer Webseite 🙂

Du hast nun:

  • gelernt wie man relative, absolute und interne Links setzt
  • Dein erstes Spiel im Stil von "Wer wird Millionär?" programmiert
  • Einiges über Groß- und Kleinschreibung in der Programmierung erfahren
Diese Einheit abschließen

Mit deinem kostenlosen Account kannst du:

  • deine selbst programmierte Webseite auf verschiedenen Geräten ansehen und auch deinen Freunden zeigen
  • Fragen an mich und die Community stellen
  • mehr Hilfsmittel benutzen, um dich besser im Kurs zu orientieren