Verweise

In diesem Kapitel wollen wir uns ansehen, wie wir von formatiertem Text zu einer tatsächlichen Webseite gelangen. Dazu gehören auf jeden Fall das Setzen von Links und das Einbinden von Bildern.

Dass wir beides in diesem Kapitel behandeln, ist kein Zufall. In beiden Fällen müssen wir den Browser nämlich anweisen, noch eine weitere Datei zu betrachten. Entweder zeigen wir ihm die nächste HTML-Datei oder eine Bilddatei, die er gleich einbinden soll.

Hinweis

Neben Bildern können wir auch Videos, Ton, PDF Dokumente und sogar ganze Karten einbinden, das sind aber schon kniffligere Themen.)

Aufbau eines Verweises

Ein Verweis ist genau wie ein Link aufgebaut, den du in die Adressleiste deines Browsers eingibst.

https://apps.informatik.cc/sql/sqlite.php

1. https – Protokoll für eine verschlüsselte Verbindung
2. apps – Subdomain, ein spezieller Bereich innerhalb einer Domain. Früher auch oft www für den Bereich der Webseite für den Browser.
3. informatik.cc – Domainname, welcher es ermöglicht die Adresse des Rechners im Internet zu finden.
4. de - Domainendung - unterhalb dieser befinden sich Domainnamen, welche jeweils eindeutig sein müssen.
5. sql - Ordner auf dem Server
6. sqlite.php – Datei, die der Browser dir zeigen soll. php bedeutet in diesem Fall, dass der Server die Seite noch berechnen muss, ehe er die Webseite an den Browser ausliefern darf.

Aufgabe

Notiere die folgende Domain in deinen Hefter und gib an, was die einzelnen Bestandteile bedeuten:

https://www.tagesschau.de/inland/digitalpakt-bundestag-101.html

Verweisarten

absolute Verweise

Gibst du in deinen Browser einen Verweis ein, musst du immer die vollständige Adresse eingeben, damit dein Rechner weiß, wo er die Webseite herbekommen kann. Dadurch ist es egal, auf welcher Seite du vorher warst. Du kommst immer auf der neuen Adresse an. Das ist ähnlich einer Postanschrift. Hier ist es auch ganz egal, in welchen Briefkasten ich den Brief einwerfe.

https://buch.informatik.cc/html-css/img/2KZfAwi-0W4-unsplash.webp

relative Verweise

Manchmal ist es unpraktisch immer die ganze Adresse anzugeben. Etwa wenn du vorhast den Domainnamen deiner Webseite zu ändern, dann müsstest du auch alle Links anpassen. Dies funktioniert nur, wenn du schon auf einer ganz speziellen Webseite im Internet bist. Das ist wie eine Wegbeschreibung "200m geradeaus und dann scharf links, dann bist du gegen den Laternenpfahl gelaufen.". Du rennst nur gegen den Laternenpfahl, wenn du dich an einer speziellen Position befindest.

/html-css/img/2KZfAwi-0W4-unsplash.webp

Du siehst, dieser relative Verweis ist auch viel kürzer und erspart ein wenig Schreibarbeit. Um zu der Datei zu gelangen, soll der Browser zuerst in den Ordner html-css und dann img gehen und anschließend das Bild 2KZfAwi-0W4-unsplash.webp abrufen.

Merke

Der Ordner .. weist den Browser an einen Ordner über den aktuellen Ordner zu gehen. Und mit / geht es ganz nach oben in das Wurzelverzeichnis oder hier bekannt als Domainname mit Domainendung.

Aufgabe

Notiere in deinem Hefter, was ein relativer und was ein absoluter Verweis (Adresse) ist.

Aufgabe

Gib ein Beispiel, wann eine absolute Adresse im Internet verwendet werden muss.

Aufgabe

Gib ein Beispiel, wann eine relative Adresse verwendet werden kann. Begründe den Vorteil in dieser Situation.

Links

<a href="https://informatik.cc/">Informatik</a>

Aufgabe

Gib den obigen Befehl in den Editor ein und untersuche, was der Befehl bedeutet.

Hier haben wir etwas Neues. Bisher kannten wir nur <a>Informatik</a>. Nun steht im Startelement noch zusätzlich href="https://informatik.cc/". Hierdurch wird das Textelement Link genauer für den Webbrowser beschrieben, was aber so nicht unmittelbar angezeigt wird.

Da es den Link genauer beschreibt, sagt man auch, href ist eine Eigenschaft des Links. Bei HTML heißt Eigenschaft Attribut. "https://informatik.cc/" ist der Wert des Attributes (Attributwert), welcher in Anführungszeichen geschrieben wird.

Aufgabe

Notiere in deinem Hefter, was Attribute in HTML sind. Es könnte praktisch sein, einen Link als Beispiel mit aufzuschreiben.

Bilder

Das Einbinden eines Bildes funktioniert ähnlich wie bei Links, nur dass hier nicht auf das Bild verwiesen wird, sondern es direkt in der HTML-Webseite angezeigt wird:

<img src="https://buch.informatik.cc/html-css/img/2KZfAwi-0W4-unsplash.webp" alt="Kätzchen" />

Aufgabe

Gib den Befehl in den Editor ein.

Aufgabe

Finde mithilfe von selfhtml.org heraus, was src und alt bedeuten.