Hallo, heute werden wir über Hyperlinks sprechen, oder Links,
wie sie häufiger genannt werden.
Und wie Sie sie verwenden können, um Ihr Dokument mit anderen zu verknüpfen.
Jetzt sind Links wirklich das, was das Web zu einem Web macht.
Es ist diese ganze Idee, dass verschiedene zusammengebaute Links diese Art von
Wissen schaffen, das Suchmaschinen oder Sie selbst
gewinnen können, indem Sie von Seite zu Seite gehen, und mit hoffentlich verwandtem Material.
Lassen Sie uns also direkt darauf eingehen, wie Sie einen Link auf Ihrer Seite erstellen.
Links werden Ankerlinks genannt und das ist, wo wir die a für in der a -Tag bekommen.
Wenn Sie ein Anker-Tag verwenden,
müssen Sie mit dem a -Tag sicherstellen, dass Sie zwei verschiedene Teile haben.
Sie benötigen eine Hyperreferenz und Sie benötigen Inhalte.
Die Hyperreferenz ist also nur der Verweis auf die Position
des neuen Inhalts.
Also in diesem Fall habe ich http://www.umich.edu verwendet.
Das sagt einem Browser,
wenn jemand auf diesen Link klickt, möchte ich die neue Seite anfordern.
Wir müssen auch Inhalte haben.
Der Inhalt ist, was wir den anklickbaren Teil nennen.
In diesem Fall ist es Text.
Ich würde tatsächlich auf einen unterstrichenen Text klicken, der besagt, University of Michigan.
Aber in einigen Fällen könnte es stattdessen ein Bild sein.
Welche Arten von Links können wir haben?
Einige der häufigsten werden absolute Links genannt.
Wir haben auch relative Links.
Interne
Links und grafische Links und ich werde Ihnen Beispiele von jedem dieser zeigen.
Mit einer absoluten Referenz im a href Abschnitt müssen wir eine vollständig gebildete URL einfügen.
Sie müssen die http oder https die Adresse und
jede Art von zusätzlichen Dokumentnamen haben, die Sie möchten.
Wenn Sie sich daran erinnern, dass es drei Teile zu URL gibt,
haben Sie das Protokoll, den Host und das Dokument.
Sie müssen alle einschließen, wenn Sie eine absolute Referenz haben, oder?
Alles andere ist immer noch so ziemlich gleich.
Für eine relative Referenz ändern wir etwas, was in die href geht.
Anstatt auf eine externe oder
sogar interne Webseite zu verlinken, werden wir nur setzen, in diesem Fall, den Dateinamen.
Also in diesem Fall werden wir auf page2.html verlinken.
Möglicherweise erhalten Sie etwas tiefer als das,
wo Sie auch eine Art Ordnernamen einfügen können.
Also in diesem Fall würden wir zu der Datei namens page2.html gehen, aber
es ist in einem anderen Ordner namens docs die dritte
Möglichkeit, eine relative Referenz zu verwenden, ist das, was wir nennen, verwenden Sie das ID-Tag.
Wenn Sie also href gleich Hash-Pfund oder Geschichte haben,
sagen wir, dass es einen anderen Speicherort in derselben Datei gibt und es Geschichte genannt wird.
Also, absolute versus relative Verbindungen.
Wann würden Sie absolute Links im Vergleich zu wann verwenden Sie relative Links?
Mit absoluten Links, sagen Sie im Grunde, ich bin nicht verantwortlich für diese Seite,
jemand anderes ist.
Wenn Sie also auf die Seite einer anderen Person verlinken,
verwenden Sie unbedingt den absoluten Link mit dem vollständigen Verweis dort.
Für relative ist, wenn Sie Ihre eigene Website entwickeln.
Und es ist wirklich hilfreich, relative Links anstelle von absolut zu verwenden.
Wenn Sie also Ihre Seite auf einen anderen Server
verschieben oder sie in einen anderen Ordner verschieben, müssen Sie nicht alles umbenennen.
Und so sind das einige der Vorteile für die Verwendung von lokalen Links,
ist nur die Idee, dass Sie nicht so viel aktualisieren müssen.
Nun, eines der Dinge, die Sie sicherstellen müssen, dass Sie nie tun,
ist eine Verknüpfung zu haben, die eine Art von Dateistruktur enthält, wir werden es nennen.
Also überprüfe deine Links.
Stellen Sie sicher, dass C:page oder MyDocumentsPage oder
irgendetwas, das für Ihren Computer sehr spezifisch ist, nicht angezeigt wird.
Der Grund, warum du das nicht willst, ist.
Wenn Sie Ihre Seite im Web.
Wenn Sie fertig sind, haben Sie es auf einem Server oder einem Hosting installiert und
Sie möchten, dass andere Personen klicken.
Nun, es macht keinen Sinn, dass sie in der Lage wären, auf Seiten zuzugreifen, die sich auf
Ihrem Computer befinden. Haben
Sie also nie eine Referenz, die etwas Lokales auf Ihrem Computer enthält.
In Ordnung? Eines der anderen Dinge, die Sie tun können, ist, dass
Sie Bilder als Link verwenden können.
Die anklickbare Komponente muss also kein Text sein. Das
hast du schon viel gesehen.
Es können Symbole, Bilder sein.
verschiedene Dinge entlang dieser Linie.
In diesem Fall ging ich hinein und benutze die reguläre H-Referenz und
was wir jetzt ändern, ist nicht die h-Referenz, sondern der
Inhalt, der zwischen dem öffnenden und schließenden Tag geht.
und ich habe voran gegangen und ich habe stattdessen in ein Bild gesetzt.
Stellen Sie sicher, dass Sie den Alt-Text verwenden, um mit dem Bild zusammen zu gehen.
Und ein anderer Fall, den ich etwas sehr Ähnliches gemacht habe
, der einzige Unterschied ist, anstatt eine lokale Referenz hier für
das Bild zu verwenden, habe ich eine absolute Referenz verwendet.
Ich habe die gesamte URL eingegeben.
Lassen Sie uns also Usability-Probleme und Probleme mit der Barrierefreiheit sprechen.
Wenn Sie eine anklickbare Komponente verwenden möchten,
möchten Sie sicherstellen, dass sie einen informativen Namen hat.
Es gibt Software da draußen, die alle Links innerhalb einer Seite für
Leute auflisten kann, die nach Dingen suchen, die nicht typisch verwenden können.
typische Mittel für den Zugriff auf die Seite.
Es ist überhaupt nicht hilfreich, wenn alle Links beschriftet sind, klicken Sie hier, klicken Sie hier,
klicken Sie hier, klicken Sie hier, oder?
Du willst ihm einen informativen Namen geben.
Sie möchten auch sicherstellen, dass, wenn Sie ein Bild für
den anklickbaren Teil Ihres Links verwenden.
Dieses Bild muss eine Art Alt-Text oder
andere Informationen für diejenigen, die das Bild nicht sehen können, zur Verfügung haben.
Also, lassen Sie mich Ihnen ein codiertes Beispiel für diese Arten von Links zeigen.
In Ordnung?
Wie Sie hier sehen können, habe ich einen Verweis auf absolute Referenzen,
relative Referenzen, Bilder als Links und dann auch auf einige eingebettete Links.
Also, wenn ich auf Washtenaw Dairy oder Rosie's Coffee Bar und Bäckerei oder
Dexters Bäckerei usw. klicken würde, würde es mich tatsächlich auf ihre Seiten bringen.
Vorwärts zurück.
Einer der Tricks, auf die ich hinweisen möchte, ist,
da ich den Mauszeiger über jeden dieser Links führe, wenn Sie sich den ganz,
ganz unten in meinem Browser ansehen und ich nicht wirklich gleichzeitig anzeigen kann, aber wenn
Sie es hervorheben, zeigt es Ihnen, welche URL Sie gehen.
Und ich denke, das ist sehr wertvoll für
die Leute zu wissen, denn wenn Sie jemals über einen Link schweben, und
die Informationen, die Sie unten auf der Seite sehen, stimmen nicht mit dem überein, was Sie gesagt haben.
Absolute Referenzen nehmen Sie also weg von Ihrer Website.
Relative Referenzen können Sie zu etwas führen, das sich in Ihrem Ordner befindet.
Genau hier habe ich ein Bild von Donuts, und ich habe weitergemacht und
sie sind in meinem Ordner in meiner Akte.
So war ich in der Lage, mit ihnen nur den Bildnamen zu verknüpfen.
In Ordnung?
Wir können Bilder auch als Links verwenden.
Anstatt Donuts aus dem Squire Shop zu schreiben, ging ich voran und
machte es so, dass Sie auf das Bild klicken können, um zur größeren Ansicht zu gelangen.
Diese letzte Idee von eingebetteten Links ist ein wenig interessant.
Also lass mich dich für eine Sekunde zum Code bringen und es dir zeigen.
Schreiben Sie hier auf,
ich habe etwas, das relative Referenzen mit einer ID gleich relativ genannt wird.
Ich habe Links mit einer ID eingebettet, die eingebettet und
hier oben sagt, ganz am Anfang kann man sehen, dass ich div id = „absolut“ habe.
Mit eingebetteten Links kann ich auf einen dieser Links klicken und innerhalb derselben Seite navigieren.
Also werde ich nicht auf eine andere Seite gehen.
Ich werde keinen neuen Tab öffnen.
Stattdessen werde ich an verschiedene Stellen innerhalb der Seite springen.
Also ging ich zum absoluten.
Ich ging jetzt zum Verwandten, wenn ich versuche, eingebettete Referenzen zu machen,
sieht es nicht so aus, als hätte es sich bewegt, aber es tat es wirklich.
Es ist nur so, dass wir schon da sind.
Alles klar, so funktionieren diese Art von eingebetteten oder internen Links, richtig?
Jetzt, wenn Sie zu irgendeinem Zeitpunkt verwirrt werden, wie Code funktioniert.
Ich möchte Sie nur daran erinnern, dass sie immer zur Ansicht gehen können.
Entwickler und View-Quelle, um wirklich eine bessere Vorstellung
davon zu bekommen, wie Menschen ihre Seiten und ihre Links erstellen.
Als nächstes reden wir über Ziele, in Ordnung?
Anker können auch ein anderes Zielattribut annehmen.
Wir haben die Quelle, lassen Sie uns Anker hinzufügen.
Also sind wir Ziel.
So haben Sie vielleicht Ziel gleich Selbst.
Dies ist eine Art der Standardaktion.
Das wird passieren, wenn Sie überhaupt nichts setzen.
Wenn Sie nicht einmal Ziel, und was es bedeutet, ist, wenn Sie auf einen Link klicken,
öffnen Sie in der gleichen Registerkarte oder Fenster, die Sie gerade sehen.
Wenn Sie Ziel gleich leer setzen.
Sie verlassen die aktuelle Seite, auf der Sie sich befinden, genau dieselbe, und
öffnen eine neue Registerkarte oder ein neues Fenster, wo die neue Seite geöffnet werden soll.
Jetzt hat das seinen Auf- und Nachteil.
Der Nachteil ist, dass Ihre Website immer noch im Fenster einer Person geöffnet ist.
Der Nachteil ist, dass viele Leute es nicht mögen, wenn es immer wieder hinzufügt und
hinzufügt, und wenn
sie durch Ihre Seite fortschreiten, machen Sie sie öffnen mehr und mehr Registerkarten.
Es gibt zwei andere Optionen, über die wir hier nicht wirklich sprechen werden, aber
Sie können sie in der Lesung sehen, und das sind top und parent, und
das befasst sich mit, wenn Sie wirklich in die Idee kommen, mehrere Fenster
, Frames usw. geöffnet zu haben.
Also, lassen Sie uns vorgehen und überprüfen, denn sicherzustellen, dass Sie Links verstehen, ist für
Ihren Erfolg in diesem Kurs oder sogar für das Verständnis von HTML von entscheidender Bedeutung.
Also, das erste, was Sie wissen müssen, ist eine Seite ohne Links ist extrem selten.
Und um ehrlich zu sein, es ist fast nicht einmal eine Webseite.
Es ist nur ein Dokument.
Links können absolut, relativ und intern sein.
Und intern war wieder die Art, in der es das Hash-Zeichen darin hatte.
Ich denke, ich habe sie vielleicht als relativ bezeichnet, aber
ich möchte sicherstellen, dass ich klar bin, dass das Hash-Zeichen es intern macht.
Sie möchten Vorsicht walten lassen, wenn Sie Bilder in Links verwenden.
Es ist nicht so, dass sie keine tolle Sache sind, und ich sage nicht, dass du es tun solltest.
Ich sage nur, stellen Sie sicher, dass Sie es sorgfältig tun, um sicherzustellen, dass jeder, der
Ihre Seite ansieht, den gleichen Inhalt und die gleiche Erfahrung wie alle anderen erhalten kann.