Lokasi file di folder situs web ditentukan menggunakan jalur file HTML. Untuk browser web, jalur file identik dengan alamat file. Dengan menggunakan jalur file, kita dapat menambahkan sumber daya eksternal apa pun ke file HTML kita, seperti foto, file, file CSS, file JS, video, dan sebagainya.
- Ketika Anda menjalankan kode HTML di atas, Anda akan mendapatkan output berikut di browser
Jalur File Relatif dalam HTMLJika gambar sudah ada di sistem kami, kami hanya perlu memasukkan jalur gambar sebagai nilai di dalam atribut src; . Sebaiknya gunakan URL relatif untuk menghindari kesalahan
Ketika Anda menjalankan kode HTML di atas, Anda akan mendapatkan output berikut di browser
Dalam hal URL absolut, jika gambar dihapus dari situs web sumber kami, kami tidak akan dapat menampilkannya di layar. Jadi, dalam kasus URL absolut, kami bergantung pada sumber eksternal untuk menampilkan gambar di layar, sedangkan URL relatif tidak bergantung pada sumber eksternal mana pun untuk menampilkan gambar di layar. Inilah keunggulan URL relatif dibandingkan URL absolut
Pada artikel selanjutnya, saya akan membahas Tata Letak dalam HTML dengan Contoh. Di sini, di artikel ini, saya mencoba menjelaskan Jalur File dalam HTML dengan Contoh dan saya harap Anda menikmati artikel Jalur File HTML dengan Contoh ini
Jalur File adalah konsep yang digunakan dalam HTML untuk menentukan jalur file ke dalam struktur folder situs web masing-masing. Ini secara khusus digunakan untuk menemukan lokasi yang tepat dari file dari folder yang diinginkan artinya persis berfungsi sebagai pedoman atau alamat file tertentu yang akan dipanggil oleh browser web. Konsep ini dalam HTML terutama digunakan untuk mendeteksi jalur file gambar, Halaman Web, dan file, file CSS, file Script, file media seperti video, dll. Seseorang dapat menemukan jalur file dengan menggunakan dua atribut yang disebut src atau href. Atribut tersebut membantu kami melampirkan file atau sumber eksternal dengan dokumen HTML kami
Sintaksis
Mulai Kursus Pengembangan Perangkat Lunak Gratis Anda
Pengembangan web, bahasa pemrograman, pengujian Perangkat Lunak & lainnya
Penting untuk mengetahui jalur file yang akan disertakan di halaman web
Paket Pengembangan Perangkat Lunak Semua dalam Satu(600+ Kursus, 50+ proyek)
Harga
Lihat Kursus600+ Kursus Daring. 50+ proyek. 3000+ Jam. Sertifikat yang Dapat Diverifikasi. Akses Seumur Hidup
4. 6 (86.007 peringkat)Jadi inilah sintaks untuk memasukkan file-file ini di halaman web sebagai berikut
Sintaksis
<img src="" alt="">Ini digunakan untuk menyisipkan gambar ke halaman web kami
Berikut ini adalah daftar beberapa jalur dengan uraiannya adalah sebagai berikut
- Sedangkan jalur File Relatif digunakan untuk menentukan jalur khusus ke file di mana sebenarnya semua gambar berada sehubungan dengan folder saat ini
Sintaksis
src="img_folder/img_name" or src="/img_folder/img_name" or src=""../img_folder/img_name or_Di sini kita akan menyertakan contoh yang memiliki semua cara yang mungkin untuk menampilkan path file menggunakan Relative File Path seperti yang disertakan di bawah ini
<!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="//cdn.educba.com/images/Candle.jpg" alt="Image demo "style="width:80px; height:80px; "> </body> </html>Itu selalu dianggap praktik yang baik untuk menggunakan jalur file Relatif daripada konsep jalur file absolut
Contoh Jalur File di HTML
Berikut adalah contoh-contoh berikut yang disebutkan di bawah ini
Contoh 1
Ini adalah contoh yang akan menunjukkan bagaimana Absolute File Path akan Bekerja. Kode untuk itu sebagai berikut
Kode
<!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="//www.nearbuy.com/mumbai/educba-andheri-east/photos/Photos.jpg" alt="Mountain"> </body> </html>_Keluaran
Contoh #2
Kode
<!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="//cdn.educba.com/images/flag.png" alt="Image demo "style="width:100px; height:100px; "> </body> </html>Keluaran
Contoh #3
Kode
<!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>_Keluaran
Kesimpulan
Dari semua informasi di atas, kami menyadari bahwa file HTML digunakan untuk menentukan alamat atau jalur file atau gambar di mana mereka sebenarnya disimpan dalam struktur situs web.
Jalur file itu ditampilkan dalam dua cara yang memungkinkan. Jalur File Absolut, di mana yang lain untuk Jalur File Relatif, seperti yang kita lihat pada informasi di atas
Artikel yang Direkomendasikan
Ini adalah panduan untuk File Path di HTML. Di sini kita membahas bagaimana cara kerja jalur file dalam HTML bersama dengan contoh dan hasilnya. Anda juga dapat melihat artikel berikut untuk mempelajari lebih lanjut –
Bagaimana cara menemukan jalur gambar dalam HTML?
LIHAT SEMUA