.jpeg "Path File dalam Html")
Hai semuanya, kali ini saya akan membagikan tentang Path File dalam Html. Sebelum itu, tahukah kamu apa itu Path File ? Path File atau bisa kita sebut sebagai jalur direktori yang mendefinisikan letak dari file. Jika kamu belum mengetahui tentang path file, maka kamu harus mempelajarinya terlebih dahulu. Karena hampir semua bahasa pemrograman harus menggunakan path file agar lebih mudah. Contohnya seperti bahasa Html, CSS, Python, Java dan bahasa pemrograman lainnya. Agar lebih jelasnya, mari kita pelajari bersama tentang Path File ini.
1. Pertama kita akan membahas file yang berada dalam satu folder. Perhatikan contohnya seperti gambar dibawah ini
2. Contoh saya akan menuliskan codingan nya di file index.html. Kemudian file gambar yang akan saya gunakan berada dalam satu folder dengan index.html, yaitu folder Alat. Untuk menampilkan gambar nya, kita bisa menuliskan codingan nya seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Path File dalam Html</title>
</head>
<body>
<h1>Ini Contoh Heading</h1>
<p>Ini Contoh Paragraf</p>
<img src="image.png" width="324px" height="232px">
</body>
</html>Karena file gambar dengan file index berada dalam satu folder, jadi path nya adalah langsung menuliskan nama file gambar nya. Untuk width dan height nya bisa kamu sesuaikan dengan gambar milikmu, karena setiap gambar memiliki ukuran yang berbeda.
Hasilnya seperti dibawah ini
3. Yang kedua sekarang kita akan mencoba menampilkan gambar yang berada di dalam folder. Contohnya seperti ini
4. Nah sekarang kita akan mencoba akan menampilkan file yang images.png, karena sebelumnya kita sudah menampilkan file image.png. Berikut ini adalah codingan nya
<!DOCTYPE html>
<html>
<head>
<title>Contoh Path File dalam Html</title>
</head>
<body>
<h1>Ini Contoh Heading</h1>
<p>Ini Contoh Paragraf</p>
<img src="img/images.png" width="320px" height="230px">
</body>
</html>Karena lokasi file images.png berada di dalam folder img, maka penulisan nya harus menyertakan nama folder/namafile.png
Hasilnya seperti dibawah ini
5. Sekarang saya akan coba untuk menampilkan gambar dari folder yang berbeda dari file index nya. Contohnya seperti dibawah ini
6. Nah sekarang file index.html nya sudah saya masukkan ke dalam folder main dan saya akan menampilkan file img.jpg. Contoh codingan nya seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Contoh Path File dalam Html</title>
</head>
<body>
<h1>Ini Contoh Heading</h1>
<p>Ini Contoh Paragraf</p>
<img src="./img/img.jpg" width="450px" height="250px">
</body>
</html>Fungsi kode ./ pada codingan diatas adalah untuk keluar folder yang berisi file index.html. Karena letak file gambar nya berada dalam folder img sedangkan file index berada dalam folder main, jadi saya berikan kode ./ untuk keluar dari folder main dan memilih folder yang berisikan file img.jpg.
Hasilnya seperti dibawah ini
7. Bagaimana ? Mudah kan ? Jika kamu masih belum mengerti, silahkan bertanya di kolom komentar. Sekian dan terimakasih.