Heim > Artikel > Web-Frontend > Dateipfad in HTML
Dateipfad in HTML
- WBOYOriginal
- 2024-09-04 16:50:591014Durchsuche
Ein Dateipfad ist ein Konzept, das in HTML verwendet wird, um den Pfad der Datei in der Ordnerstruktur der jeweiligen Website zu definieren. Dies wird speziell verwendet, um den genauen Speicherort der Datei im gewünschten Ordner zu ermitteln, d. h. es dient genau als Richtlinie oder Adresse einer bestimmten Datei, die der Webbrowser aufrufen wird. Dieses Konzept in HTML wird hauptsächlich zum Erkennen von Dateipfaden von Bildern, Webseiten und Dateien, CSS-Dateien, Skriptdateien, Mediendateien wie Videos usw. verwendet. Der Pfad der Datei kann mithilfe von zwei Attributen namens src oder href ermittelt werden. Diese Attribute helfen uns, eine externe Datei oder Quelle an unser HTML-Dokument anzuhängen.
Syntax
Es ist wichtig, den Pfad der Dateien zu kennen, die in Webseiten eingefügt werden.
Hier ist also die Syntax zum Einbinden dieser Dateien in Webseiten wie folgt:
Syntax:
<img src="" alt="">
Dies wird verwendet, um das Bild in unsere Webseite einzufügen.
Hier ist eine Liste einiger Pfade mit der Beschreibung wie folgt:
-
: Dies wird verwendet, wenn wir ein Bild aus demselben Ordner verwenden möchten, der wie die aktuelle Seite behandelt wird. -
: Wird verwendet, um anzuzeigen, dass das angegebene Bild im Bildordner im selben Website-Ordner gespeichert ist. -
: Dies wird verwendet, um zu definieren, dass jeweils im Bildordner des Stammverzeichnisses gespeichert wird, in dem sich der aktuelle Webordner befindet. -
: Dieser Typ teilt dem Benutzer mit, dass das angegebene Bild genau eine Ebene höher vom aktuellen Ordner der Website gespeichert ist.
Diese Dateipfade werden im Code immer dann verwendet, wenn externe Dateien wie Webseiten, Bilder, Stildateien, Skriptdateien usw. hinzugefügt werden müssen.
Beim Definieren des Dateipfads ist es immer notwendig, die genaue URL, den richtigen Dateinamen und den genauen Bildnamen mit der richtigen Erweiterung anzugeben. Wenn all diese Dinge ordnungsgemäß eingebunden sind, wird die eingebundene Datei oder das eingebundene Bild ordnungsgemäß auf der Webseite angezeigt.
Die obige Syntax ist in zwei Typen unterteilt. Einer davon ist der absolute Dateipfad, der auf der URL-Adresse basiert. Eine andere Möglichkeit betrifft den relativen Dateipfad, bei dem wir die Adresse von Dateien und Bildern definieren können, indem wir einfach ihren Namen oder Ordnerpfad angeben, um von dort aus auf Inhalte zuzugreifen.
Wir werden beide Arten des Dateipfads im folgenden Abschnitt im Detail sehen und zeigen, wie es tatsächlich funktioniert.
Wie funktioniert der Dateipfad in HTML?
Es gibt zwei Arten von Dateipfaden: den absoluten Dateipfad und einen anderen, den relativen Dateipfad.
Der absolute Dateipfad wird immer dann verwendet, wenn wir eine vollständige URL-Adresse zum Definieren des Dateipfads verwenden.
Syntax: src=“url“;
Beispiel: Hier ist der eigentliche Code, um zu definieren, wie der absolute Dateipfadcode in der Website-Struktur funktionieren soll:
<!DOCTYPE html> <html> <head> <title>Absolute file path</title> </head> <body> <img src="https://www.BeautyofNatur /image.png" alt="My Image" style="width:400px"> </body> </html>
Während der relative Dateipfad verwendet wird, um einen bestimmten Pfad zu der Datei zu definieren, in der sich tatsächlich alle Bilder in Bezug auf den aktuellen Ordner befinden.
Syntax:
src="img_folder/img_name" or src="/img_folder/img_name" or src=""../img_folder/img_name or
Hier werden wir ein Beispiel einfügen, das alle möglichen Möglichkeiten zur Anzeige des Dateipfads mithilfe des relativen Dateipfads zeigt, wie unten aufgeführt:
<!DOCTYPE html> <html> <head> <title>Relative file path Demo Example</title> </head> <body> <h4>Example showing file in same folder </h4> <img src="images/Candle.jpg" alt="Image demo "style="width:80px; height:80px; "> <h4>Example showing file present in a folder above its current folder </h4> <img src="../images/Candle.jpg" alt="Image demo "style="width:80px; height:80px; "> <h4>Example showing file available in a folder, which is exactly located at root position of its current sub folder </h4> <img src="https://cdn.educba.com/images/Candle.jpg" alt="Image demo "style="width:80px; height:80px; "> </body> </html>
Es wird immer als gute Praxis angesehen, einen relativen Dateipfad anstelle eines absoluten Dateipfadkonzepts zu verwenden.
Beispiele für Dateipfade in HTML
Hier sind die folgenden Beispiele aufgeführt
Beispiel #1
Dies ist das Beispiel, das zeigen wird, wie der absolute Dateipfad funktioniert. Code dafür wie folgt:
Code:
<!DOCTYPE html> <html> <head> <title>Absolute file path</title> </head> <h2>Absolute File Path</h2> <p> This is example of Absolute file path. In this concept we are going to use Specific "URL" address of file. So we can easily add this file or image on their website.</p> <body> <img src="https://www.nearbuy.com/mumbai/educba-andheri-east/photos/Photos.jpg" alt="Mountain"> </body> </html>
Ausgabe:
Beispiel #2
Code:
<!DOCTYPE html> <html> <head> <title>Relative file path Demo Example</title> </head> <body> <h2>Relative File Path</h2> <p>In This Example we are going to see how Relative File Path going to work on same image.<br> So we are taking one image here stored at one specific website folder , so it will display same thing using different path</p> <h4>Relative File path with image in same folder </h4> <img src="images/flag.png" style="width:100px; height:100px; "> <h4>Relative File path with image present in a folder above its current folder </h4> <img src="../images/flag.png" alt="Image demo "style="width:100px; height:100px; "> <h4>Relative File path with image available in a folder, which is exactly located at root position of its current sub folder</h4> <img src="https://cdn.educba.com/images/flag.png" alt="Image demo "style="width:100px; height:100px; "> </body> </html>
Ausgabe:
Beispiel #3
Code:
<!DOCTYPE html> <html> <head> <title>Relative file path Demo Example</title> </head> <body> <h2>Relative File Path</h2> <p>In This Example we are going to see how Relative File Path going to work on Image as well as on files also<br> So we are adding HTML File, CSS File and image also to see the actual result</p> <h4>Relative File path with image in same folder </h4> <img src="images/EDUCBA.png" style="width:250px; height:150px; "> <h4>Relative File path with HTML file present in the folder </h4> <a href="index.html"> HTML file </a> <h4>One can give Style path through Absolute or Relative position. Here we are using relative file path</h4> <a href="main.css"> CSS file </a> </body> </html>
Ausgabe:
Fazit
Aus all den oben genannten Informationen haben wir erkannt, dass die HTML-Datei verwendet wird, um die Adresse oder den Pfad von Dateien oder Bildern zu definieren, wo sie tatsächlich in der Website-Struktur gespeichert werden.
Dieser Dateipfad wird auf zwei mögliche Arten angezeigt: Absoluter Dateipfad, wobei eine andere für den relativen Dateipfad steht, wie wir in den obigen Informationen gesehen haben.
Das obige ist der detaillierte Inhalt vonDateipfad in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!