Notification texts go here Contact Us Buy Now!

Progress Bar

Beranda
Html

Cara Menambahkan Gambar di Html

Jika kamu mengunjungi sebuah situs website, tentu kamu akan menemukan gambar gambar pada website tersebut. Fungsi dari gambar tersebut adalah untuk memperindah tampilan website tersebut. Selain untuk memperindah tampilan website, fungsi website adalah agar pengunjung website mengetahui fitur fitur yang terdapat dalam website tersebut. Contohnya jika ingin menghubungi admin website, pengunjung bisa klik gambar WhatsApp ataupun gambar profile yang tersedia dalam website.

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
- Kunjungi website Image Uploader (Website untuk upload gambar), contohnya disini saya menggunakan website https://imgbb.com
- Kemudian kalian tinggal pilih gambar yg ingin di upload
- Jika sudah, kamu bisa memilih gambar tersebut jangan dihapus otomatis atau dihapus dalam jangka waktu tertentu. Seperti dibawah ini
- Jika sudah di unggah, kalian pilih Tautan gambar kecil HTML
- Jika sudah, kalian tinggal salin codingan nya. Berikut ini adalah contoh codingan nya 
<!DOCTYPE html>
<html>
  <head>
    <title> Cara Menambahkan Gambar di Html </title>
  </head>
  <body>
    <img src="https://i.ibb.co.com/W4fxZh9s/Fanta.png">
  </body>
</html>
Demo

2. Cara Menambahkan Gambar dengan File di Html
- Kamu harus menyiapkan file html dan gambar yg ingin digunakan. Contohnya seperti dibawah ini
- File html nya disarankan menggunakan nama index.html dikarenakan sudah menjadi standar utama nya. Jadi ketika kita mengunjungi website, kita akan diberikan halaman utama nya atau index.html
- Cara menampilkan gambarnya sama seperti diatas, jadi kita tinggal mengganti url gambar nya menjadi nama file nya. Contoh codingan nya seperti dibawah ini. 
<!DOCTYPE html>
<html>
    <head>
        <title> Cara Menambahkan Gambar di Html </title>
    </head>
    <body>
        <img src="fanta.png">
    </body>
</html>
- Jika sudah berhasil, maka hasilnya seperti dibawah ini
- Ukuran gambar nya masih default, jadi kamu bisa ubah ukuran gambar nya sesuai dengan kebutuhan masing masing.
- Jika kamu ingin mengubah ukuran gambar nya, bisa menggunakan attribute tambahan di dalam tag <img> nya. Berikut ini adalah attribute nya. 
width="ukuran-lebar-gambar" height="ukuran-panjang-lebar"
- Berikut ini adalah contoh codingan nya. 
<!DOCTYPE html>
<html>
    <head>
        <title> Cara Menambahkan Gambar di Html </title>
    </head>
    <body>
        <img src="fanta.png" width="400px" height="400px">
    </body>
</html>
- Dan untuk hasilnya seperti dibawah ini
#Html

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.