Verlinkungen und Navigation

Vorbereitung für HTML

Nachdem wir nun einige gängigsten HTML - Elemente kennen schauen wir uns an wie man eine HTML - Datei einrichtet.

HTML - Dateien erfordern bestimmte Elemente, um das Dokument richtig einzurichten. Wir können Webbrowser wissen lassen, dass wir HTML verwenden indem wir unser Dokument mit einer Dokumenttypdeklaration beginnen.

Die Deklaration sieht folgendermaßen aus:

Diese Deklaration ist eine Anweisung und muss die erste Codezeile in Ihrem HTML-Dokument sein. Sie teilt dem Browser mit, welche Art von Dokument zu erwarten ist und welche HTML - Version im Dokument verwendet wird. Derzeit geht der Browser korrekt davon aus, dass sich das "html" in <!DOCTYPE html> auf HTML5 bezieht, da dies der aktuelle Standard ist.

In Zukunft kann jedoch ein neuer Standard HTML5 außer Kraft setzen. Um sicherzustellen, dass Ihr Dokument immer richtig interpretiert wird, schließen Sie es immer <!DOCTYPE html> ganz am Anfang Ihrer HTML - Dokumente ein.

Und schließlich wird HTML - Code immer in einer Datei mit der Erweiterung .html gespeichert.

Das <html> Tag (<!DOCTYPE html>)

Die <!DOCTYPE html> Deklaration liefert dem Browser zwei Informationen (den Dokumenttyp und die zu erwartende HTML-Version), fügt jedoch weder HTML-Struktur noch Inhalt hinzu.

Um HTML-Struktur und -Inhalt zu erstellen müssen wir öffnende und schließende <html> Tags nach der Deklaration <!DOCTYPE html>:

Alles zwischen den öffnenden <html> und schließenden </html> Tags wird als HTML-Code interpretiert. Ohne diese Tags ist es möglich, dass Browser Ihren HTML-Code falsch interpretieren.

Der Kopf (<head>)

Bisher haben Sie zwei Dinge getan, um die Datei richtig einzurichten:

Zeigt dem Browser an, dass Ihr Code HTML ist mit <!DOCTYPE html>
Das HTML-Element (<html>) wurde hinzugefügt, das den Rest Ihres Codes enthält.

Wir haben diese Elemente der Webseite hinzugefügt, die Sie zuvor erstellt haben. Nun wollen wir dem Browser auch einige Informationen über die Seite selbst geben. Wir machen das mit dem hinzufügen vom <head> Element.

Erinnern Sie sich an das <body> Tag ? Das <head> Element ist Teil dieser HTML-Metapher. Es steht über unserem <body> Element.

Das <head> Element enthält die Metadaten einer Webseite. Metadaten sind Informationen über die Seite, die nicht direkt auf der Webseite angezeigt werden. Im Gegensatz zu den Informationen innerhalb des <body> Tags sind die Metadaten im Kopf Informationen über die Seite selbst. Ein Beispiel hierfür sehen Sie in der nächsten Übung.

Die öffnenden und schließenden Head-Tags erscheinen normalerweise als erstes Element nach Ihrem ersten HTML-Tag:

Seitentitel (<title>)

Welche Art von Metadaten über die Webseite kann das <head> Element enthalten?

Wenn Sie auf dieser Webseite oben links in Ihrem Browser nachsehen werden Sie die Wörter Einführung | HTML bemerken. Dies ist der Titel der Webseite.

Ein Browser Tab zeigt den Titel der im <title> Tag angegeben ist. Der <title> Tag ist immer innerhalb vom <head>.

Wenn wir eine Datei öffnen würden die den HTML-Code aus dem obigen Beispiel enthält, würde der Browser das Wort Startseite in der Titelleiste (oder im Titel der Registerkarte) anzeigen.

Beispiel:

Bisher haben wir Folgendes gelernt:

<!DOCTYPE html>, die Deklaration, die die HTML-Version für den Browser angibt
Die <html> Tags, die ihren gesamten HTML-Code umschließen
Das <head> Tag, das die Metadaten einer Webseite enthält wie zum Beispiel <title>

Verlinken mit anderen Webseiten

(<a href="#">Webseite</a>)

Einer der leistungsstarken Aspekte von HTML und des Internets ist die Möglichkeit, Links zu anderen Webseiten herzustellen.

Sie fügen Links hinzu über das Ankerelement <a> und den Text des Links zwischen dem Eröffnungs- und Schlusstext.

Technisch gesehen ist der Link im obigen Beispiel unvollständig da man die URL angeben muss wohin der Link führt.

Das Ankerelement Beispiel ist ohne das href Attribut unvollständig. Dieses Attribut steht für Hypertextreferenz und wird verwendet um auf einen Pfad oder die Adresse zu verweisen. Die dem href Attribut angegebenen Pfade sind häufig URL's.

Im obigen Beispiel wurde das href Attribut auf den Wert der URL gesetzt.

<a href="https://wikipedia.org/">https://wikipedia.org/</a>

Das Beispiel zeigt nun die korrekte Verwendung eines Anker-Elements.

Beim Lesen technischer Dokumentationen stoßen Sie möglicherweise auf den Begriff Hyperlink. Keine Sorge, dies ist lediglich der technische Begriff für Link. Dieser Begriff wird häufig als Synonym verwendet.

Links in einem neuen Fenster öffnen (target="_blank")

Haben Sie schon einmal auf einen Link geklickt und beobachtet wie sich die Webseite in einem neuen Browserfenster öffnet? Sie können dem target Attribut des Elements <a> danken.

Das target Attribut gibt an, wie ein Link geöffnet werden soll.

Es ist möglich, dass ein oder mehrere Links auf Ihrer Webseite auf eine ganz andere Webseite verweisen. In diesem Fall möchten Sie vielleicht, dass Benutzer die verlinkte Webseite lesen, hoffen aber, dass sie auf Ihre Webseite zurückkehren. Genau dafür ist das target Attribut nützlich!

Damit ein Link in einem neuen Fenster geöffnet wird, muss das target Attribut den Wert _blank haben. Das target Attribut kann, genau wie das href Attribut, direkt zum öffnenden Tag des Ankerelements hinzugefügt werden.

Im obigen Beispiel weist das Festlegen des target Attributs "_blank" den Browser an, die Wikipedia-Seite in einem neuen Fenster zu öffnen.

In dieser Übung haben wir die Terminologie "In neuem Fenster öffnen" verwendet. Wahrscheinlich verwenden Sie einen modernen Browser, der Webseiten in neuen Tabs statt in neuen Fenstern öffnet. Vor der Einführung von Browsern mit Tabs mussten zusätzliche Browserfenster geöffnet werden, um mehr Webseiten anzuzeigen. Wenn dieses target="_blank" Attribut in modernen Browsern verwendet wird, werden neue Webseiten in einem neuen Tab geöffnet.

Verlinken zur entsprechenden Seite

(<a href="./index.html">index</a>)

Bisher haben Sie gelernt, wie Sie auf externe Webseiten verlinken. Viele Seiten verlinken auch auf interne Webseiten wie "Startseite", "Info" und "Kontakt".

Bevor wir lernen, wie man zwischen internen Seiten verknüpft, legen wir fest, wo unsere Dateien gespeichert sind.

Beim Erstellen mehrseitiger statischer Webseiten speichern Webentwickler HTML-Dateien häufig im Stammverzeichnis oder in einem Hauptordner, in dem alle Dateien für das Projekt abgespeichert sind. Wenn die Größe der von Ihnen erstellten Projekte zunimmt, können Sie zusätzliche Ordner im Hautpprojektordner verwenden, um Ihren Code zu organisieren.

Das obige Beispiel zeigt drei verschiedene Dateien - about.html, Kontakt.html und index.html in einem Ordner.

HTML-Dateien werden oft im selben Ordner gespeichert. Wenn der Browser gerade index.html anzeigt, weiß er auch, dass about.html und Kontakt.html im selben Ordner liegen. Da die Dateien im selben Ordner gespeichert sind, können wir Webseiten über einen relativen Pfad miteinander verknüpfen.

In diesem Beispiel wird das <a> Tag mit einem relativen Pfad verwendet, um von der aktuellen HTML-Datei auf die Kontakt.html Datei im selben Ordner zu verlinken. Auf der Webseite Kontakt wird es als Link angezeigt.

Ein relativer Pfad ist ein Dateiname, der den Pfad zu einer lokalen Datei (einer Datei auf derselben Webseite wie ./index.html), im Gegensatz zu einem absoluten Pfad (einer vollständigen URL, wie https://de.wikipedia.org/wiki die an einem anderen Ort gespeichert ist). Das ./ in ./index.html weist den Browser an, im aktuellen Ordner nach der Datei zu suchen.

Verlinken nach Belieben

Sie haben wahrscheinlich Webseiten besucht, auf denen nicht alle Links aus Text bestanden. Vielleicht waren die Links, auf die Sie geklickt haben, Bilder oder andere Inhalte.

Bisher haben wir Links hinzugefügt die nur aus Text bestanden.

Reine Textlinks würden Ihre Flexibilität als Webentwickler allerdings erheblich einschränken!

Glücklicherweise können Sie im HTML fast jedes Element in einen Link umwandeln, indem Sie es mit einem Ankerelement umschließen. Mit dieser Technik ist es möglich, Bilder in Links umzuwandeln, indem Sie einfach das <img> Element mit einem <a> Element umschließen.

Im obigen Beispiel wurde das Bild eines Porsche 911 in einen Link umgewandelt, indem die Außenseite des <img> Elements mit einem <a> Element umhüllt wurde.

Verlinken zur gleichen Seite

An diesem Punkt haben wir alle gewünschten Inhalte auf unserer Seite. Da wir so viele Inhalte haben, passt nicht alles auf den Bildschirm. Wie können wir es einem Benutzer einfacher machen zu verschiedenen Teilen unserer Seite zu springen?

Wenn Benutzer unsere Seite besuchen, möchten wir, dass sie auf einen Link klicken und die Seite automatisch zu einem bestimmten Abschnitt scrollen lässt.

Um auf ein Ziel auf derselben Seite zu verlinken, müssen wir dem Ziel eine ID geben, etwo so:

In diesem Beispiel wird dem <p> Element der id Wert "oben" und dem <h1> Element "unten" zugewiesen. Den meisten Elementen auf einer Webseite kann ein id Wert hinzugefügt werden.

Ein id sollte beschreibend sein, damit der Zweck eines Links leichter zu merken ist. Der Ziel Link ist eine Zeichenfolge, die das # Zeichen und des Zielelement id enthält.

Im obigen Beispiel sind die Links zu <p id="top"> und <h1 id="bottom"> in eine geordnete Liste eingebettet. Diese Links erscheinen im Browser als nummerierte Linkliste. Ein id ist besonders hilfreich zum Organisieren von Inhalten, die zu einem div gehören!

Leerzeichen

Der Rest dieser Lektion konzentriert sich auf einige Tools, die Entwickler verwenden, um Code leichter interpretierbar zu machen.

Je länger der Code in einer HTML-Datei ist, desto schwieriger wird es, den Überblick zu behalten, wie Elemente verwandt sind. Programmierer verwenden zwei Werkzeuge, um die Beziehung zwischen Elementen zu visualisieren:

Leerzeichen und Einrückungen

Beide Tools nutzen die Tatsache, dass die Position von Elementen in einem Browser unabhängig von der Menge an Leerzeichen oder Einrückungen in der Datei index.html ist.

Wenn Sie beispielsweise den Abstand zwischen zwei Absätzen auf Ihrer Webseite vergrößern möchten, können Sie dies nicht erreichen, indem Sie in der Datei index.html einen Abstand zwischen den Absatzelementen hinzufügen. Der Browser ignoriert Leerzeichen in HTML-Dateien beim Rendern einer Webseite, sodass sie als Tool verwendet werden können, um Code leichter lesbar und verständlich zu machen.

Warum ist das folgende Beispiel schwer lesbar?

Sie müssen die gesamte Zeile lesen, um zu wissen, welche Elemente vorhanden sind. Vergleichen Sie das obige Beispiel mit diesem:

Dieses Beispiel ist leichter zu lesen, da jedes Element in einer Zeile steht. Während Sie im ersten Beispiel die gesamte Codezeile lesen mussten, um die Elemente zu identifizieren, können Sie in diesem Beispiel das Body-Tag und zwei Absätze leicht identifizieren.

Ein Browser stellt beide Beispiele auf die gleiche Weise dar:

In der nächsten Übung erfahren Sie, wie Sie Einrückungen zur Visualisierung verschachtelter Elemente verwenden können.

Vertiefung

Das zweite Werkzeug, das Webentwickler verwenden, um die Struktur des Codes lesbarer zu gestalten, ist die Einrückung. Die Leerzeichen werden mithilfe der Tasten "space" und "tab" auf Ihrer Tastatur eingefügt.

Das World Wide Web Consortium (W3C) ist für die Einhaltung der Stilstandards von HTML verantwortlich. Zum Zeitpunkt der Erstellung dieses Dokuments empfiehlt das W3C beim Schreiben von HTML-Code 2 Leerzeichen Einrückung. Obwohl Ihr Code auch ohne genau zwei Leerzeichen funktioniert, wird dieser Standard von der Mehrheit der professionellen Webentwickler eingehalten. Einrückungen werden verwendet, um leicht zu visualisieren, welche Elemente in anderen Elementen verschachtelt sind.

Im obigen Beispiel sind Absatz 1 und die <div> Tags innerhalb des <body> Tags verschachtelt und daher um zwei Leerzeichen eingerückt. Das Absatz 2 Element ist innerhalb des <div> Tags verschachtelt und daher um zwei weitere Leerzeichen eingerückt.

Kommentare

()

HTML-Dateien ermöglichen Ihnen außerdem das Hinzufügen von Kommentaren zu Ihrem Code.

Kommentare beginnen . Alle dazwischen liegenden Zeichen werden von Ihrem Browser ignoriert.

Das Einfügen von Kommentaren in Ihren Code ist aus vielen Gründen hilfreich:

Sie helfen Ihnen (und anderen), Ihren Code zu besser zu verstehen, wenn Sie sich zu einem viel späteren Zeitpunkt dazu entschließen, darauf zurückzukommen und ihn zu überprüfen.
Sie ermöglichen es Ihnen, mit neuem Code zu experimentieren, ohne alten Code löschen zu müssen.

In diesem Beispiel wird der Kommentar verwendet, um darauf hinzuweisen, dass der folgende Text einen bestimmten Abschnitt der Seite darstellt.

Im obigen Beispiel wurde ein gültiges HTML-Element (ein Absatzelement) "auskommentiert". Diese Vorgehensweise ist nützlich, wenn Sie mit Code experimentieren oder später darauf zurückkommen möchten.

Zusammenfassung

Sie kennen jetzt alle grundlegenden Elemente und Einstellungen, die Sie zum Strukturieren einer HTML-Seite und zum Hinzufügen verschiedener Inhaltstypen benötigen. Mithilfe von CSS werden Sie schon bald schönere Webseiten erstellen!

Während einige Tags einen sehr spezifischen Zweck haben, wie z.B. Bild- und Video-Tags, werden die meisten verwendet, um den Inhalt zu beschreiben, den sie umgeben was uns hilft unseren Inhalt später zu ändern und zu gestalten. Es gibt scheinbar unendlich viele Tags, die man verwenden kann (viel mehr, als wir gelernt haben). Zu wissen, wann man welches verwendet, hängt davon ab, wie Sie den Inhalt Ihres HTML beschreiben möchten. Beschreibende, gut gewählte Tags sind ein Schlüssel zu qualitativ hochwertiger Webentwicklung. Eine vollständige Liste der verfügbaren HTML-Tags finden Sie auf w3schools.com.

Lassen Sie uns noch einmal wiederholen, was Sie in dieser Lektion gelernt haben:

Die <!DOCTYPE html> Deklaration sollte immer die erste Codezeile in Ihrem HTML-Dateien sein. So weiß der Browser, welche HTML-Version zu erwarten ist.
Das <html> Element enthält Ihren gesamten HTML-Code.
Informationen zur Webseite, wie etwa der Titel, gehören in den <head> Text der Seite.
Sie können Ihrer Webseite einen Titel hinzufügen <titel>, indem Sie das Element im Kopf verwenden.
Der Titel einer Webseite wird in der Registerkarte eines Browsers angezeigt.
Anker-Tags (<a>) werden zum Verlinken auf internen Seiten, externen Seiten oder Inhalte auf der gleichen Seite verwendet.
Sie können auf einer Webseite Abschnitte erstellen und mithilfe von Tags zu ihnen springen, indem Sie den <a> Elementen, zu denen Sie springen möchten, id's hinzufügen.
Leerzeichen zwischen HTML-Elementen tragen dazu bei den Code leichter lesbar zu machen, ohne die Darstellung der Elemente im Browser zu verändern.
Einrückungen tragen außerdem dazu bei, dass Code leichter lesbar ist. Sie machen Eltern-Kind-Beziehungen sichtbar.
Kommentare werden in HTML mit folgenden Syntax geschrieben: .

Nehmen Sie sich etwas Zeit, um die einzelnen Punkte gut zu verstehen!

Nächstes Kapitel: Tabellen

Einführung in Tabellen
Tabellenzeilen
Tabellendaten
Tabellenüberschriften
Tabellenränder
Überspannende Spalten
Zeilen Überspannen
Tabellenkörper
Tischkopf (Tabellenkopf)
Tabellenfußzeile
Styling mit CSS

weiter lernen

Page updated

Google Sites

Report abuse