Links und Bilder sind zwei der am häufigsten verwendeten Ressourcen, die Sie Ihren Webseiten hinzufügen, daher ist es entscheidend zu wissen, wie man sie richtig adressiert.
Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.
Jede Website muss auf bestimmte Ressourcen verweisen, unabhängig davon, ob es sich um Bilder, Dateien oder andere Webseiten handelt. Die Entscheidung, wie mit anderen Dateien verlinkt werden soll, ist äußerst wichtig, um sicherzustellen, dass Browser sie korrekt finden.
Sie können mit einer relativen oder absoluten URL auf Ressourcen verlinken. Dies gilt sowohl für lokale Dateien auf einem Computer als auch für protokollbasierte URLs, auf die über das Internet zugegriffen wird.
So verwenden Sie einen absoluten URL-Pfad
Eine absolute URL enthält den vollständigen Pfad zu einem bestimmten Dateispeicherort. Beispiele hierfür sind der vollständige Pfad zu Dateien auf Ihrem Computer:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Ein weiteres Beispiel enthält eine vollständige Protokoll-URL, die Sie verwenden können, um eine Ressource zu identifizieren, die über das Internet gesendet werden soll. Am häufigsten beginnen diese mit "https" oder "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Die absolute URL enthält alle Informationen, die zum Auffinden der Datei oder Ressource erforderlich sind, auf die Sie zugreifen möchten. Dies ist erforderlich, wenn Sie auf eine externe Website verlinken.
- Erstellen Sie eine einfache Website in HTML indem Sie einen neuen Ordner erstellen und zwei neue Dateien mit dem Namen hinzufügen index.html Und Stile.css.
- In index.html, fügen Sie etwas HTML-Code hinzu, um eine einfache Website zu erstellen:
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Titel> Meine Webseite </title>
<Metazeichensatz="UTF-8">
<metaname="Ansichtsfenster" Inhalt="width=Gerätebreite, initial-scale=1">
<link rel="Stylesheet" href="Stile.css" />
</head>
<Körper>
<div-Klasse="Container">
<h1> Meine Webseite </h1>
<P> Willkommen auf meiner Website. </P>
</div>
</body>
</html> - In Stile.css, fügen Sie der Webseite ein Styling hinzu.
Körper {
Schriftfamilie: Arial, Helvetica, serifenlos;
}.Container {
Anzeige: Flex;
Biegerichtung: Säule;
Ausrichtungselemente: Mitte;
}.mb28 {
Rand unten: 28px;
} - In index.html, füge ein hinzu -Tag innerhalb des Container-Div und fügen Sie die absolute URL zur Hauptseite von Google hinzu ( https://www.google.com).
<ein href="https://www.google.com" Klasse="mb28">Google.com</A> - Sie können auch online auf Bilder zugreifen, indem Sie den vollständigen absoluten Pfad zur gespeicherten Datei verwenden. Sie können auch zusätzliche Schritte unternehmen, um sicherzustellen, dass Sie hinzugefügt haben Responsive Bilder zu Ihrem HTML Website.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit = zuschneiden&w=3870&q=80" alt="Süßes Vogelfoto" Klasse="mb28" Breite ="900" Höhe ="600"> - Klick auf das index.html Datei, um sie in einem Browser zu öffnen und das von ihrem externen Speicherort abgerufene Bild anzuzeigen.
- Erstellen Sie im Stammordner Ihrer Website einen neuen Ordner zum Speichern von Bildern mit dem Namen Bilder. Fügen Sie im Ordner ein neues Bild hinzu und geben Sie ihm einen Namen, z Süßer Vogel.jpg.
- Identifizieren Sie den absoluten Pfad zu der gerade hinzugefügten Bilddatei. Sie können dies tun, indem Sie es im Navigationspfad der Dateimanager-App Ihres Betriebssystems finden. Sie müssen auch den Dateinamen am Ende des Pfads hinzufügen. Beispiel: „C:\Benutzer\Sharl\Desktop\Website\Bilder\CuteBird.jpg“
- In index.html, ersetzen Sie Ihr Bild-Tag durch ein neues Bild, das den absoluten Pfad verwendet, der auf die verweist Süßer Vogel.jpg auf Ihrem Computer gespeicherte Datei. Denken Sie daran, das Präfix file:// hinzuzufügen, um eine lokale Dateisystemressource anzugeben. Unter Unix und macOS können Sie dann den absoluten Pfad anhängen, den Sie im vorherigen Schritt identifiziert haben. Unter Windows müssen Sie umgekehrte Schrägstriche durch Schrägstriche ersetzen und einen zusätzlichen Schrägstrich vor dem Laufwerksbuchstaben einfügen, zum Beispiel:
- Klick auf das index.html Datei, um sie in einem Browser zu öffnen und das auf Ihrem Computer gespeicherte Bild anzuzeigen.
So verwenden Sie einen relativen URL-Pfad
Eine relative URL speichert nur einen Teil der URL oder des Pfads und ist normalerweise relativ zum Speicherort der aktuellen Datei oder des Abschnitts einer Website.
Im obigen Beispiel zum Zugriff Logo.ico aus index.html Bei Verwendung einer relativen URL würden Sie den Pfad "Images/Icons/Logo.ico" verwenden. Weitere Beispiele sind:
- Seiten/Vogel1.html
- Bilder/Süßer Vogel.jpg
- Stile.css
Wenn Sie dieselbe Ordnerstruktur auf einem anderen Computer verwenden, kann die Website die Datei dennoch abrufen. Wenn Sie über das Internet weiterleiten, verwenden Sie anstelle des vollständigen Links wie " https://example.com/about", Sie können stattdessen relatives Routing verwenden:
- /about
- /contact
- /projects/local-clients
Sie können eine relative URL verwenden, um Links zu erstellen oder auf Bilder innerhalb Ihrer HTML-Webseite zu verweisen.
- Erstellen Sie im Stammverzeichnis Ihrer Website einen neuen Ordner mit dem Namen Seiten.
- Erstellen Sie im neuen Pages-Ordner eine neue Datei mit dem Namen Vogel1.html.
- Bevölkern Vogel1.html mit HTML-Code, um die Seite zu erstellen.
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Titel> Vogel 1 </title>
<Metazeichensatz="UTF-8">
<metaname="Ansichtsfenster" Inhalt="width=Gerätebreite, initial-scale=1">
<link rel="Stylesheet" href="../styles.css" />
</head>
<Körper>
<div-Klasse="Container">
<h1> Kaffee </h1>
<P> Kaffee ist ein süßer Vogel, der gerne spielt! </P>
</div>
</body>
</html> - Fügen Sie innerhalb des Container-Div ein Bild-Tag hinzu und verwenden Sie eine relative URL, um auf die zu verlinken Süßer Vogel.jpg Bild.
<img src="../Images/CuteBird.jpg" alt="Süßes Vogelfoto" Klasse="mb28" Breite ="900" Höhe ="700"> - Im index.html Datei, entfernen Sie den vorhandenen Inhalt im Container div. Ersetzen Sie es durch ein einzelnes A -Tag, das einen relativen Link zum Öffnen der Vogel1.html Datei.
<div-Klasse="Container">
<h1> Meine Webseite </h1>
<P> Willkommen auf meiner Website. </P>
<ein href="Seiten/Vogel1.html" Klasse="mb28">Vogel 1: Kaffee</A>
</div> - Klick auf das index.html Datei, um sie in einem Browser zu öffnen, und klicken Sie auf den neuen Link, um dorthin zu navigieren Vogel1.html.
Jetzt können Sie den Unterschied zwischen absoluten und relativen URLs feststellen. Sie können jetzt besonders darauf achten, dass Ihre Ressourcen immer abgerufen werden.
Sie sollten auch immer sicherstellen, dass alle Links, auf die Ihre Benutzer zugreifen können, sicher und geschützt sind.
