Tutorial zum Erlernen von HTML-Webseiten-Hyperlink-Tags
Attribute von Link-Tags
Links sind eines der wichtigsten Elemente einer Webseite und die Seele einer Website. Eine Website besteht aus mehreren Seiten, und die Seiten sind auf Links angewiesen, um die gegenseitige Navigationsbeziehung zu bestimmen. Jede Webseite hat eine eindeutige Adresse, die URL (Uniform) genannt wird
Ressource
Locator: Universal Resource Identifier). Geben Sie http://www.jb51.net in die Adressleiste ein und drücken Sie die Eingabetaste. Die Hauptseite der Script House-Website wird geöffnet. Wie Sie sehen, gibt es auf der Seite mehrere Spalten, mehrere Nachrichten usw. Die verschiedenen Spalten oben sind Textlinks.
Obwohl das
-Link-Tag eine unersetzliche Position im Website-Design und in der Produktion einnimmt, gibt es nur ein Tag, und das ist das -Tag. Die auf dieser Website vorgestellten Linkanwendungen basieren alle auf dem -Tag.
Die Attribute des Link-Tags werden in der folgenden Tabelle angezeigt.
Attributbeschreibung href gibt den Namen der Linkadresse an. Namen. Der Linktitel gibt den Link-Eingabeaufforderungstext an
Ziel gibt das Zielfenster des Link-Accesskey-Link-Hotkeys an
Über den Pfad
Jede Datei hat ihren eigenen Speicherort und Pfad. Das Verständnis der Pfadbeziehung zwischen einer Datei und der zu verknüpfenden Datei ist die Grundlage für die Erstellung einer Verknüpfung. URL – Uniform Resource Locator, bezieht sich auf die unabhängige Adresse, die jede Website hat. Jede Webseite unter derselben Website gehört zu derselben Adresse. Beim Erstellen einer Webseite ist es jedoch weder möglich noch erforderlich, für jeden Link die vollständige Adresse einzugeben. Wir müssen nur die relative Pfadbeziehung zwischen dem aktuellen Dokument und dem Stammverzeichnis der Site bestimmen. Daher können Links in die folgenden drei Typen unterteilt werden:
Absoluter Pfad
wie z. B. http://www.jb51.net Relativer Pfad
wie z. B. news/default.htm Stammpfad
Zum Beispiel /website/news/default.htm
Bevor Sie diese drei Adressformen verstehen, müssen Sie zunächst zwei andere Konzepte verstehen: interne Links und externe Links
Intern und extern beziehen sich auf den Site-Ordner. Wenn der Link auf eine Datei im Site-Ordner verweist, handelt es sich um einen internen Link. Wenn der Link außerhalb des Site-Ordners zeigt, wird er als externer Link bezeichnet. Beim Hinzufügen externer Links wird die unten genannte absolute Adresse verwendet; beim Hinzufügen interner Links werden die unten genannte relative Adresse des Stammverzeichnisses und die relative Dateiadresse verwendet.
Diese drei Arten von Links werden im Folgenden vorgestellt:
Absoluter Pfad
Absoluter Pfad bietet einen vollständigen Pfad zur Datei, einschließlich angepasster Protokolle, wie z als http, FTP, RTSP usw. Gängige sind:
http://www.sohu.com
ftp://202.136.1
Bei der Verlinkung auf Dateien auf anderen Websites müssen absolute Links verwendet werden. Relative Pfade
Relative Links eignen sich am besten für interne Links auf einer Website. Solange sie sich auf derselben Website befinden, auch wenn sie sich nicht im selben Verzeichnis befinden, sind relative Links sehr gut geeignet. Dateirelative Adressen sind eine ideale Form zum Schreiben interner Links. Relative Adressen können Links zwischen Dateien erstellen, solange sie sich in einem Site-Ordner befinden. Diese Adressform nutzt die relative Beziehung zwischen den beiden Dateien, die den Link aufbauen, und wird nicht durch den Serverstandort des Site-Ordners beeinflusst. Bei dieser Schreibweise wird daher derselbe Teil der absoluten Adresse weggelassen. Dies hat den Vorteil, dass bei einer Änderung der Serveradresse, auf der sich der Site-Ordner befindet, alle internen Links des Ordners (sofern diese Adressform verwendet wird) keine Probleme verursachen.
Die Methode zur Verwendung relativer Links ist: Wenn Sie auf dasselbe Verzeichnis verlinken, geben Sie einfach den Namen des zu verlinkenden Dokuments ein. Um eine Verknüpfung zu einer Datei in einem Verzeichnis auf niedrigerer Ebene herzustellen, geben Sie einfach den Verzeichnisnamen ein, gefolgt von „/“ und dann dem Dateinamen. Wenn Sie eine Verknüpfung zu einer Datei im übergeordneten Verzeichnis herstellen möchten, geben Sie zuerst „.../“ und dann den Verzeichnisnamen und den Dateinamen ein. Root-Pfad
Root-relative Adressen eignen sich ebenfalls zum Erstellen interner Links, in den meisten Fällen ist diese Adressform jedoch nicht zu empfehlen. Es wird in den folgenden Situationen verwendet: Wenn die Site sehr groß ist und auf mehreren Servern gehostet wird Wenn mehrere Sites gleichzeitig auf einem Server platziert werden
Gegenwärtig ist die Webseitentechnologie in eine neue Phase eingetreten. Die heutigen Webseiten sind keine Ansammlung von Bildern und langweiligen Texten mehr. Was die Menschen jetzt anstreben, ist die dynamische Wirkung und Interaktivität von Webseiten. Die drei Musketiere der Webdesign-Software Dreamweaver, Flash und Fireworks sind herausragende Vertreter des interaktiven Webdesigns. Die neueste Version ist mx
2004 übernimmt die Vorteile der Vorgängerversion und integriert weitere Funktionen, was sich sehr gut für die Anforderungen von Webdesign und Website-Erstellung eignet.
Die Schreibweise der relativen Adresse des Stammverzeichnisses ist ebenfalls sehr einfach. Zuerst wird mit einem Schrägstrich begonnen, der das Stammverzeichnis darstellt, dann wird der Ordnername geschrieben und schließlich wird der Dateiname geschrieben . Der Root-Pfad beginnt mit „/
„Start, dann der Verzeichnisname unter dem Stammverzeichnis.
#p#
Interne Links erstellen
Die sogenannten internen Links beziehen sich auf die Linkbeziehungen zwischen verschiedenen HTML-Seiten innerhalb derselben Website. Bei der Einrichtung interner Links auf einer Website sollte darauf geachtet werden, dass die Links eine klare Navigationsstruktur aufweisen, damit Benutzer die HTML-Dateien der benötigten Inhalte leicht finden können.
Als nächstes erstellen wir auf der ersten 8-1.htm-Seite Links zu den beiden Seiten 8-1-1.htm und 8-1-2.htm und fügen diese zu den beiden Seiten hinzu ein Link zurück zur 8-1.htm-Seite von jeder verlinkten Seite. Die Verzeichnisbeziehung der drei Seiten ist wie folgt:
8-1.htm und 8-1-1.htm werden im Stammverzeichnis der Website gespeichert, und 8-1-2.htm wird im Testverzeichnis gespeichert. Grundlegende Syntax LinktextErklärung der Syntax
Geben Sie die Adresse über das href-Attribut an, Dateiname ist der Pfad der zu verknüpfenden Datei und „Linktext“ ist der mit der Maus angeklickte Textinhalt. Dateibeispiel: 8-1.htm
Erstellen Sie zwei Links über das -Tag, die jeweils auf zwei andere HTML-Seiten verweisen.
01
02
03
04
05
06
07
08
09
10
Mainstream-Webdesign-Software
11
12 Webseiten-Erstellungssoftware Dreamweaver mx 2004
13
14
Webanimationssoftware Flash mx 2004
15
16 Dateibeschreibung
Zeile 12 definiert den Link zur Geschwisterseite von 8-1-1.htm und Zeile 14 definiert den Link zur Seite 8-1-2.htm im Testverzeichnis. Dateibeispiel: 8-1-1.htm
Bei dieser Datei handelt es sich um die Seite „Webpage Production Software Dreamweaver mx 2004“, und über das Tag wird ein Link zurück zur Seite 8-1.htm hergestellt.
01
02
03
04
05
06
07
08
09
10 Dreamweaver mx 2004
11 Dreamweaver mx
Als Vertreter der Webdesign-Software hat 2004 zwei Kernfunktionen: Site-Management und Seitenproduktion. Wenn auch Sie das Ideal des Traumwebens haben, dann ist diese Software zweifellos die beste Möglichkeit, Ihnen bei der Verwirklichung Ihres Traums zu helfen. Vollständige visuelle Bearbeitung, hervorragende Codekontrolle, vollständige Site-Planung und -Verwaltung sowie außergewöhnliches dynamisches Effektdesign bieten Designern eine bequeme Möglichkeit. Die MX-Version der Software integriert dynamische Website- und traditionelle statische Seitenfunktionen weiter, was zweifellos mehr Implementierungsmethoden für die Erstellung von Websites bietet.
12
13 Return
14
15
Dateibeschreibung
Zeile 13 definiert den Link zur Seite derselben Ebene von 8-1.htm. Dateibeispiel: 8-1-2.htm
Diese Datei ist die Seite „Web Animation Software Flash mx 2004“, und über das Tag wird ein Link zurück zur Seite 8-1.htm hergestellt.
01
02
03
04
05
06
07
08
09
10
Flash mx 2004
11 Flash-Mix
Als Vertreter der interaktiven Animationssoftware für Webvektoren bietet 2004 drei Hauptfunktionen: grafisches Zeichnen, Animationsproduktion und Interaktion. Sobald Sie den Kern dieser Software beherrschen, können Sie beim Surfen im Internet als Flash-Benutzer agieren. Immer mehr private und kommerzielle Websites nutzen Flash-Technologie, Werbebanner, animierte Titel, MTV und interaktive Spiele. Die breiten Anwendungen bieten Flash-Lernenden eine breite Entwicklungsplattform zum Erlernen von Flash.
Die MX 2004-Software ist ein noch verlockenderer Prozess.
12
13 Return
14
15
Zeile 13 definiert den Link zur vorherigen Seite von 8-1.htm.
#p#
Legen Sie das Zielfenster des Links fest
Nachdem Sie auf den Link geklickt haben, ist das Standardbrowserfenster das Originalfenster. Wir können das durch diesen Link geöffnete Zielfenster angeben, z. B. ein neues Fenster usw. Grundlegende Syntax LinktextSyntaxerklärung
Definieren Sie das Zielfenster über target. Der Wert von value ist in der folgenden Tabelle dargestellt
Öffnet im vorherigen Fenster. Frames, die im Allgemeinen Framing verwenden, verwenden häufig _blank, um in einem neuen Fenster zu öffnen, und _self, um im selben Frame oder Fenster zu öffnen. Dies muss im Allgemeinen nicht auf _top gesetzt werden
Im gesamten Fenster des Browsers öffnen, alle Frames ignorieren: Dateibeispiel: 8-2.htm
Legen Sie das Zielfenster des Links über das Zielattribut fest.
01
02
03
04
05
06
07
08
09
10
Mainstream-Webdesign-Software
11
Gegenwärtig ist die Webseitentechnologie in eine neue Phase eingetreten. Die heutigen Webseiten sind keine Ansammlung von Bildern und langweiligen Texten. Was die Menschen jetzt anstreben, ist die dynamische Wirkung und Interaktivität von Webseiten. Die drei Musketiere der Webdesign-Software Dreamweaver, Flash und Fireworks sind herausragende Vertreter des interaktiven Webdesigns. Seine neueste Version, mx
2004 übernimmt die Vorteile der Vorgängerversion und integriert weitere Funktionen, was sich sehr gut für die Anforderungen von Webdesign und Website-Erstellung eignet.
12 Webseiten-Erstellungssoftware Dreamweaver mx 2004
13
14 Webanimationssoftware Flash mx
2004
15
16
Zeile 12 definiert die Linkseite, die im Originalfenster angezeigt werden soll, und Zeile 14 definiert die Linkseite, die im neuen Fenster angezeigt werden soll.
#p#
Lesezeichen-Link erstellen
Wenn Sie beim Durchsuchen einer Seite viel Inhalt haben und die Seite zu lang ist, müssen Sie beim Durchsuchen ständig die Bildlaufleiste ziehen, was sehr unpraktisch ist, wenn Sie bestimmte Inhalte finden möchten unbequemer. Wenn zu diesem Zeitpunkt ein Inhaltsverzeichnis auf dieser Webseite oder einer anderen Seite erstellt werden kann, kann der Betrachter durch Klicken auf ein Element im Katalog automatisch zur entsprechenden Position der Webseite springen. und es kann auch auf der Seite ein Link wie „Zurück zur Startseite“ definiert werden. Dies wird als Lesezeichen-Link bezeichnet.
Es gibt zwei Schritte zum Einrichten eines Lesezeichen-Links: Der erste besteht darin, ein Lesezeichen zu erstellen, und der andere besteht darin, einen Link für das Lesezeichen zu erstellen.
Lassen Sie uns eine Software-Einführungsseite erstellen, die den Inhalt der „Drei Musketiere des Webdesigns“ enthält, und ein Lesezeichen für jede Software erstellen. Dieses Lesezeichen ist der Ort, zu dem Sie später springen werden. Mit anderen Worten: Dieses Lesezeichen bestimmt die Linkführungsbasis innerhalb einer Seite. Grundlegende Syntax TextDateibeispiel: 8-3.htm
Erstellen Sie Lesezeichen-Links für die drei Absätze des Titeltexts auf der Seite .
01
02
03
04
05
06
07
08
09
10 Mainstream-Webdesign-Software
11 Dreamweaver mx 2004
12
Dreamweavermx
Als Vertreter der Webdesign-Software hat 2004 zwei Kernfunktionen: Site-Management und Seitenproduktion. Wenn auch Sie das Ideal des Traumwebens haben, dann ist diese Software zweifellos die beste Möglichkeit, Ihnen bei der Verwirklichung Ihres Traums zu helfen. Vollständige visuelle Bearbeitung, hervorragende Codekontrolle, vollständige Site-Planung und -Verwaltung sowie außergewöhnliches dynamisches Effektdesign bieten Designern eine bequeme Möglichkeit. Die MX-Version der Software integriert dynamische Website- und traditionelle statische Seitenfunktionen weiter, was zweifellos mehr Implementierungsmethoden für die Erstellung von Websites bietet.
13
14 Flash mx
2004
15 Flash mx
Als Vertreter der interaktiven Animationssoftware für Webvektoren bietet 2004 drei Hauptfunktionen: grafisches Zeichnen, Animationsproduktion und Interaktion. Sobald Sie den Kern dieser Software beherrschen, können Sie beim Surfen im Internet als Flash-Benutzer agieren. Immer mehr private und kommerzielle Websites nutzen Flash-Technologie, Werbebanner, animierte Titel, MTV und interaktive Spiele. Die breiten Anwendungen bieten Flash-Lernenden eine breite Entwicklungsplattform zum Erlernen von Flash.
Die MX 2004-Software ist ein noch verlockenderer Prozess.
16
17 Fireworks mx 2004
18 Fireworks mx
Als Vertreter der Web-Bilddesign-Software hat 2004 die Grafikzeichnungs- und Seitenspezialeffektfunktionen der Vorgängerversion übernommen und gleichzeitig die Bitmap-Bildverarbeitungsfunktionen erheblich weiterentwickelt. Dies gibt dieser Software zweifellos mehr Kapital, um Photoshop und seine vielen Funktionen herauszufordern Anwendungen im Webdesign werden von keiner Software erreicht. Mit Dreamweaver
Die Integration von mx 2004 spielte und spielt weiterhin eine unverzichtbare Rolle im professionellen Website-Bildgestaltungsprozess.
19
20
21 Dateibeschreibung
Die Zeilen 11, 14 und 17 definieren jeweils die Lesezeichennamen dw, fl und fw des 3-Absatz-Titeltextes.
#p#
Lesezeichen auf derselben Seite verknüpfen
Als nächstes erstellen wir Links für die von uns erstellte Datei 8-3.htm. Wir hoffen, am Anfang der Seite drei Links erstellen zu können, die auf jede Software-Einführungsposition verweisen. Grundlegende Syntax TextlinkGrammatikerklärung
Lesezeichenname ist der soeben definierte Lesezeichenname. Dateibeispiel: 8-4.htm
Erstellen Sie drei Links zu den Lesezeichenpositionen der drei Absätze des Titeltexts in
01
02
03
04
05
06
07
08
09
10 Mainstream-Webdesign-Software
11 Dreamweaver mx 2004
12 Flash mx
2004
13 Fireworks mx 2004
14 Dreamweaver mx 2004
15
Dreamweavermx
Als Vertreter der Webdesign-Software hat 2004 zwei Kernfunktionen: Site-Management und Seitenproduktion. Wenn auch Sie das Ideal des Traumwebens haben, dann ist diese Software zweifellos die beste Möglichkeit, Ihnen bei der Verwirklichung Ihres Traums zu helfen. Vollständige visuelle Bearbeitung, hervorragende Codekontrolle, vollständige Site-Planung und -Verwaltung sowie außergewöhnliches dynamisches Effektdesign bieten Designern eine bequeme Möglichkeit. mx
Die Version 2004 der Software integriert dynamische Website- und traditionelle statische Seitenfunktionen weiter, was zweifellos mehr Implementierungsmethoden für die Erstellung von Websites bietet.
16
17
Flash mx 2004
18 Flash mx
Als Vertreter der interaktiven Animationssoftware für Webvektoren bietet 2004 drei Hauptfunktionen: grafisches Zeichnen, Animationsproduktion und Interaktion. Sobald Sie den Kern dieser Software beherrschen, können Sie beim Surfen im Internet als Flash-Benutzer agieren. Immer mehr private und kommerzielle Websites nutzen Flash-Technologie, Werbebanner, animierte Titel, MTV und interaktive Spiele. Die breiten Anwendungen bieten Flash-Lernenden eine breite Entwicklungsplattform zum Erlernen von Flash.
Die MX 2004-Software ist ein noch verlockenderer Prozess.
19
20 Fireworks mx 2004
21 Feuerwerkmx
Als Vertreter der Web-Bilddesign-Software hat 2004 die Grafikzeichnungs- und Seitenspezialeffektfunktionen der Vorgängerversion übernommen und gleichzeitig die Bitmap-Bildverarbeitungsfunktionen erheblich weiterentwickelt. Dies gibt dieser Software zweifellos mehr Kapital, um Photoshop und seine vielen Funktionen herauszufordern Anwendungen im Webdesign werden von keiner Software erreicht. Mit Dreamweaver
Die Integration von mx 2004 spielte und spielt weiterhin eine unverzichtbare Rolle im professionellen Website-Bildgestaltungsprozess.
22
23
24 Dateibeschreibung
Die Zeilen 11, 12 und 13 definieren Lesezeichen-Links zum Text von jeweils drei Absatztiteln.
#p#
Link zu Lesezeichen auf anderen Seiten
Zwischen den Seiten können Sie den Vorgang des Springens zu einer bestimmten Stelle auf einer anderen Seite auch abschließen. Dazu müssen Sie die verknüpfte Seite und den Speicherort des verknüpften Lesezeichens angeben. Grundlegende Syntax TextlinkGrammatikerklärung
Dateiname ist der Seitenpfad, zu dem gesprungen werden soll, Lesezeichenname ist der definierte Lesezeichenname. Dateibeispiel: 8-5.htm
Erstellen Sie eine neue Seite, die 3 Links enthält, die jeweils auf die Position des Lesezeichens der drei Absätze des Titeltexts auf der Seite 8-4.htm verweisen.
01
02
03
04
05
06
07
08
09
10 Mainstream-Webdesign-Software
11
Gegenwärtig ist die Webseitentechnologie in eine neue Phase eingetreten. Die heutigen Webseiten sind keine Ansammlung von Bildern und langweiligen Texten. Was die Menschen jetzt anstreben, ist die dynamische Wirkung und Interaktivität von Webseiten. Die drei Musketiere der Webdesign-Software Dreamweaver, Flash und Fireworks sind herausragende Vertreter des interaktiven Webdesigns. Die neueste Version ist mx
2004 übernimmt die Vorteile der Vorgängerversion und integriert weitere Funktionen, was sich sehr gut für die Anforderungen von Webdesign und Website-Erstellung eignet.
12 Dreamweaver mx 2004
13 Flash mx 2004
14 Fireworks mx 2004
15
16
Dateibeschreibung
Die Zeilen 12, 13 und 14 definieren jeweils Lesezeichen-Links zum Titeltext mit drei Absätzen auf der Seite 8-4.htm.
#p#
Externer Link
Der sogenannte externe Link bezieht sich auf die Verknüpfung zwischen dem Sprung auf die Außenseite der aktuellen Website und Seiten oder anderen Elementen auf anderen Websites. Für diese Art von Link ist im Allgemeinen das Schreiben einer absoluten Linkadresse erforderlich.
Verwenden Sie beim Erstellen externer Links URL-Uniform-Resource-Locators, um World-Wide-Web-Informationen zu finden. Diese Methode kann den Speicherort der Informationen präzise, klar und genau beschreiben. Das gebräuchlichste URL-Format ist „http://“, weitere Formate sind in der Tabelle aufgeführt.
URL-Format
Dienst-URL-Format Beschreibung www http:// Rufen Sie die World Wide Web-Site auf. Ftp ftp://
Geben Sie den Dateiübertragungsserver ein. News news:// Startet die News-Diskussionsgruppe Telnet telnet:// Startet den Telnet-Modus Gopher gopher://
Greifen Sie auf einen Gopher-Server zu. E-Mail an mailto:// E-Mail starten
Link zu einer externen Website
Häufig verwendete benutzerfreundliche Links auf der Seite können häufig angeklickt werden, um die Websites anderer Personen zu besuchen und den Zweck des Informationsaustauschs untereinander zu erreichen. So erstellen Sie Links zu externen Websites. Grundlegende Syntax Textlink Grammatikerklärung
Was nach „http://“ steht, ist die Adresse der Website. Dateibeispiel: 8-6.htm
Erstellen Sie Links zu externen Websites.
01
02
03
04
05
06
07
08
09
10
Link zur Script House-Website
11
12 Dateibeschreibung
Zeile 10 definiert den Link zur Script House-Website.
#p#
E-Mail senden
Auf der HTML-Seite können Sie einen E-Mail-Link erstellen. Wenn der Betrachter auf den Link klickt, aktiviert das System die Standard-E-Mail für den E-Mail-Versand. Im Windows-System, wenn der Benutzer E-Mail-Software wie Outlook eingerichtet hat, Outlook
Express usw. Wenn Sie im Browser auf den E-Mail-Link klicken, wird automatisch ein neues E-Mail-Fenster geöffnet und die Adressleiste fügt automatisch die E-Mail-Adresse zum E-Mail-Link hinzu. Grundlegende Syntax Textlink
href="Mailto://a@b.c?subject=content">text link
wobei a@b.c die E-Mail-Adresse ist und die folgenden Parameter wie in der folgenden Tabelle aufgeführt sind: E-Mail-Parameter
Parameter Beschreibung Betreff E-Mail-Betreff cc
Cc-Empfänger Bcc Bcc-Empfänger
Wenn Sie mehrere Parameter gleichzeitig schreiben möchten, verwenden Sie das Symbol „&“, um die Parameter zu trennen, z. B.:
Textlink
Dateibeispiel: 8-7.htm
Erstellen Sie einen E-Mail-Link.
01
02
03
04
05
06
