Bagaimana cara mendapatkan jalur gambar di html?

Question

Pada artikel ini, saya akan membahas Jalur File dalam HTML dengan Contoh. Silakan baca artikel kami sebelumnya di mana kami membahas JavaScript dalam HTML dengan Contoh. Di akhir artikel ini, Anda akan mempelajari segala sesuatu tentang Jalur File HTML dengan Contoh

Jalur Berkas HTML

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.

Table of Contents Show

Bagaimana cara kerja jalur file dalam HTML?
Contoh Jalur File di HTML
Artikel yang Direkomendasikan
Bagaimana cara menemukan jalur gambar dalam HTML?
Bagaimana cara menemukan jalur gambar?

Ketika Anda menjalankan kode HTML di atas, Anda akan mendapatkan output berikut di browser
Jalur File Relatif dalam HTML
Jika 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 Kursus

600+ 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="https://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="https://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="https://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?
  
  Bagaimana cara menemukan jalur gambar?
  Klik tombol Mulai lalu klik Komputer, klik untuk membuka lokasi file yang diinginkan, tahan tombol Shift dan klik kanan file. Copy As Path: Click this option to paste the full file path into a document. Properties: Click this option to immediately view the full file path (location).