Kategorie Archives: Bloggen

Verlinkung mit anderen Webseiten

Die Verknüpfung im HTML-Code erfolgt mit dem Anker-Tag, dem -Tag. Dem Buchstaben „A“ im Tag folgt dann ein Attribut. Bei einem Link zu einer anderen Webseite wird das „A“ von „HREF“ gefolgt. Um ein Lesezeichen auf der gleichen Seite zu setzen, folgt auf das „A“ das „NAME“, das Sie später sehen werden.

Werfen Sie einen Blick auf dieses Beispiel, das einen Link zur beliebten Suchmaschine Google darstellt:

Google Suchmaschine

Beachten Sie, wo sich alle Winkel (< >) im Link befinden. Nach dem ersten haben wir den „A“-Teil des Tags. Dann haben wir den HREF-Teil, was einen Link zu einer anderen Webseite bedeutet. Danach kommt ein Gleichheitszeichen (=). Nach dem Gleichheitszeichen kommt die Adresse der Webseite selbst. Die Adresse ist Groß-/Kleinschreibung beachten, wenn also ein Großbuchstabe in der Adresse enthalten ist, vergewissern Sie sich, dass sie angegeben ist. Diese Adresse www.google.com unterscheidet sich von dieser Adresse www.gOOgle.com.

Nach der Adresse kommt die rechte spitze Klammer ( >). Als nächstes kommt der Text, den die Leute sehen, der Text, auf den sie klicken sollen. Um einen Ankerlink zu schließen, verwenden Sie den Endanker-Tag. Was auch immer das ist:

Aber lassen Sie uns etwas praktische Arbeit erledigen

Öffnen Sie Ihre Vorlagen-Textdatei. Klicken Sie im Menü im Notepad (oder einem anderen Texteditor, den Sie verwenden) auf Datei > Speichern unter. Wenn das Dialogfeld Speichern unter erscheint, navigieren Sie zu Ihrem HTML-Ordner:

Ordnerstruktur der Website

Also werden wir die neue Webseite außerhalb des Seitenordners speichern.

Geben Sie im Feld Dateiname index.html ein. Stellen Sie sicher, dass im Bereich Save As Type alle Dateien angezeigt werden, wenn Sie Windows verwenden. Bevor Sie auf die Schaltfläche Speichern klicken, sollte Ihr Explorer-Fenster so aussehen:

Erstellen einer index.html-Seite

Wenn Sie auf die Schaltfläche Speichern klicken, sollten Sie dann eine Webseite mit dem Namen index.html im HTML-Ordner haben:

Was wir tun werden, ist, einen Hyperlink auf unserer Indexseite zu platzieren. Wenn auf diesen Hyperlink geklickt wird, weisen wir den Browser an, eine Seite namens about.html zu laden. Wir werden diese neue Übersichtsseite in unserem Seitenordner speichern.

Verwenden Sie also Ihre Vorlagen-Textdatei, um eine neue Webseite zu erstellen. Wenn Sie die Seite speichern, doppelklicken Sie auf den Seitenordner, um ihn zu verschieben. Geben Sie im Feld Dateiname about.html ein. Dann speichere deine Seite:

Erstellung einer Über uns Webseite

So haben wir eine Webseite im HTML-Ordner und eine Webseite im Seitenordner. Wir müssen sie jetzt miteinander verbinden.

  • Öffnen Sie Ihren Code für die index.html-Seite. Fügen Sie die folgende Zeile zwischen die beiden BODY-Tags ein:
  • Über diese Seite
  • Dein Code sollte so aussehen (wir haben einen TITEL hinzugefügt):
  • HTML-Code zur Erstellung eines Hyperlinks

Speichern Sie Ihre Arbeit und laden Sie die Seite in Ihren Browser. Du solltest das sehen:

Ein HTML-Hyperlink auf der Indexseite

Und das ist ein Hyperlink! Beachten Sie, dass das Einzige, was auf der Seite für den Besucher sichtbar ist, der Text „Über diese Seite“ ist. Der von uns geschriebene Code verwandelt ihn vom normalen Text in einen Link, auf den man klicken kann. Der Code selbst war folgender:

Über diese Seite

Um also Text in einen Link zu verwandeln, beginnen Sie mit einer spitzen Klammer gefolgt von dem Buchstaben A. Nach einem Leerzeichen geben Sie HREF ein. Als nächstes kommt ein Gleichheitszeichen. Die Seite, auf die Sie verlinken möchten, steht zwischen Anführungszeichen. Aber beachten Sie, dass wir mit dem Ordnernamen begonnen haben: pages/about.html. Darin steht: „Suchen Sie nach einer Seite namens about.html. Diese Seite befindet sich im Seitenordner“.

Geben Sie eine rechtwinklige Winkelhalterung ein, um den ersten Teil des Linkcodes zu beenden. Der Text, den die Leute sehen sollen, kommt als nächstes „Über diese Seite“. Um das Ganze abzuschließen, benötigen Sie das schließende Hyperlink-Tag : .

Wenn Sie auf Ihren Link klicken, sollten Sie im Browser eine leere Seitenladung finden. Wenn Sie sich die Adressleiste ansehen, sollten Sie sehen, dass am Ende über.html steht. Du hast erfolgreich auf eine neue Seite verlinkt!

Um zur Indexseite zurückzukehren, benötigen Sie einen weiteren Link.

Öffnen Sie Ihren Code für die Seite about.html. Für die Über-Seite müssen wir das richtige HREF erstellen. Wir können das nicht machen:

Zu der Startseite gehen

Das obige HREF zeigt auf eine Indexseite im Ordner pages. Aber unsere Indexseite befindet sich nicht in diesem Ordner. Es befindet sich im HTML-Ordner, der ein Ordner ist, der von Seiten nach oben zeigt. Genau wie bei Bildern können wir zwei Punkte und einen Schrägstrich verwenden:

Zwei Punkte und ein Schrägstrich bedeuten „Einen Ordner nach oben gehen“.