.jpeg "Cara Menambahkan Gambar di Html")
Disini saya akan memberikan tutorial cara menambahkan gambar pada sebuah website. Pada umumnya website dibuat dengan bahasa html, jadi kita akan menambahkan gambar pada html. Untuk menambahkan gambar di html sebenarnya tidaklah sulit. Bagaimana caranya ? Simak tutorial nya dibawah ini
Cara Menambahkan Gambar di Html
Untuk menambahkan gambar di html, kita bisa menggunakan dua cara. Cara pertama adalah menggunakan url gambar dan cara yang kedua adalah menggunakan gambar yang ada dalam directory file manager. Pada tutorial kali ini, saya akan membahasnya satu per satu. Untuk menambahkan gambar dalam html, kita bisa menggunakan tag <img>. Berikut ini adalah contoh kodingan untuk menambahkan gambar di html.
<!DOCTYPE html>
<html>
<head>
<title> Cara Menambahkan Gambar di Html </title>
</head>
<body>
<img src="linkgambar.jpg">
</body>
</html>
1. Cara Menambahkan Gambar dengan URL di Html
- Pertama kita kunjungi website https://imgbb.com dan klik Mulai Mengunggah
- Kemudian kita pilih gambar yang ingin dijadikan link
- Kemudian kita klik Unggah dan pada bagian Kode cantumkan kita pilih Tautan gambar kecil Html
- Jika sudah, tinggal kita salin codingan nya dan selesai.
Itu adalah contoh menambahkan gambar di html jika gambarnya menggunakan URL. Setelah ini kita akan membahas cara menambahkan gambar di html jika gambarnya berada di penyimpanan file manager.
2. Cara Menambahkan Gambar dengan File di Html
- Cara yang pertama adalah kita harus menyiapkan gambar nya dan file html nya. Contohnya seperti ini
- Contoh nama file nya saya beri nama index.html . Mengapa index.html ? Kenapa tidak dengan nama lain ? Karena index.html merupakan sebuah file yang menunjukkan bahwa halaman itu adalah halaman utama.
- Kemudian contoh kodingan nya seperti dibawah ini
<!DOCTYPE html> <html> <head> <title> Cara Menambahkan Gambar di Html </title> </head> <body> <img src="jerry.jpg"> </body> </html>- Untuk nama gambarnya bisa kamu ubah sesuai dengan gambar yang ingin kamu tampilkan. Contoh diatas saya memberi nama file gambar nya adalah jerry.jpg . Maka, dalam kodingan nya juga harus disesuaikan. Contoh hasilnya adalah seperti dibawah ini
- Kamu juga bisa mengubah ukuran gambar nya. Kamu cukup menambahkan attribute . Berikut ini adalah contoh kodingan nya
width="ukuran-lebar-gambar" height="ukuran-panjang-lebar"
<!DOCTYPE html> <html> <head> <title> Cara Menambahkan Gambar di Html </title> </head> <body> <img src="jerry.jpg" width="400px" height="400px"> </body> </html>- Hasilnya seperti dibawah ini
- Seperti itulah cara menambahkan gambar di html. Sampai bertemu di materi selanjutnya. Sekian terimakasih.
