Cara Menampilkan Gambar pada Halaman Web atau File HTML

Media gambar memiliki peran yang sangat penting dalam sebuah website.

Jika situs web Anda menyajikan gambar-gambar yang menarik, otomatis pengunjung pun akan cenderung untuk memilih tetap tinggal dan berlama-lama melihat website Anda.

Website dan gambar, kedua hal ini sangat sulit untuk dipisahkan. Bahkan situs web tanpa gambar adalah sesuatu yang hampir tidak pernah ditemukan.

Tidak peduli dengan jenis website Anda, media gambar ini tetaplah menjadi salah satu kebutuhan pokok situs web Anda.

Bagaimana caranya menyisipkan gambar pada halaman web atau HTML?

Untuk menampilkan gambar pada sebuah halaman web, tentunya Anda harus menyisipkan tag <img> pada file HTMLnya.

Didalam tag <img> ini terdapat beberapa atribut yang bisa Anda gunakan untuk menyesuaikan tampilan gambar pada halaman web tersebut.

Berikut ini adalah beberapa atribut yang sering digunakan didalam tag <img> :
  • src (source)
    Atribut src merupakan atribut utama dalam tag img, yang berfungsi untuk mengisi alamat atau URL file gambar yang akan ditampilkan.

    File gambar yang sering digunakan biasanya berekstensi .jpeg, .jpg, .png, .gif dan lain-lain.

  • alt (alternative description)
    Atribut ini digunakan untuk menambahkan keterangan pada gambar.

    Apabila gambar tersebut gagal ditampilkan atau tidak bisa diterjemahkan oleh browser, maka value yang ada pada atribut inilah yang akan tampil.

    Selain itu, atribut alt juga berperan penting dalam hal pengoptimalan halaman web Anda di mesin pencari. Terutama Google.

    Pada dasarnya, Google meng-index atau merayapi seluruh situs dengan cara memproses tulisan yang ada pada web tersebut.

    Google tidak memahami isi dari gambar Anda tanpa adanya bantuan deskripsi yang ditulis dalam atribut alt ini.

  • width dan height
    Atribut width berfungsi untuk mengatur lebar dari sebuah gambar, sedangkan height berfungsi untuk mengatur tinggi gambar.

    Lebar dan tinggi gambar biasanya ditulis dalam satuan pixel (px) atau persentase (%).

Cara menampilkan gambar pada halaman web atau file HTML

Seperti yang sudah kita sepakati bersama bahwa struktur dasar dari file HTML ini terdiri dari beberapa tag dasar.

Sedangkan media gambar merupakan isi dari halaman web yang akan ditampilkan.

Oleh karena itu, letakkan tag <img> ini setelah tag <body> atau sebelum tag </body>.

Baca juga :
Pengertian dan Struktur Dasar Hypertext Markup Language (HTML)

Berikut ini adalah beberapa contoh penulisan tag <img> yang dilengkapi dengan tiga atribut diatas :

1. Menampilkan gambar standar
Gambar standar artinya gambar akan ditampilkan apa adanya. Ukuran, posisi, border, dan lainnya akan tampil sama dengan aslinya.
<img src="https://4.bp.blogspot.com/-s-UMQtQIZ_s/Wh5K5N_LhkI/AAAAAAAAK5I/OZ3rfRH_FhwaGWJPauGdUEDU0XsmxvkLgCLcBGAs/s320/blog.jpg" alt="Contoh gambar" />

2. Memperkecil atau memperbesar gambar
Tampilan gambar akan terlihat tidak proporsional, jika Anda terlalu memaksanya dengan cara memberi nilai atribut width atau height yang tidak sesuai.

Oleh karenanya, untuk memperbesar ataupun memperkecil gambar namun tampilannya tetap proporsional, maka cantumkan hanya salah satu atribut saja (width saja atau height saja).

Misalkan jika Anda menetapkan atribut width=180px tanpa mencantumkan height, maka web browser akan menampilkan gambar dengan lebar 180px dan menghitung secara otomatis tinggi gambar sehingga tampilan gambar Anda tetap proporsional.
<img src="https://4.bp.blogspot.com/-s-UMQtQIZ_s/Wh5K5N_LhkI/AAAAAAAAK5I/OZ3rfRH_FhwaGWJPauGdUEDU0XsmxvkLgCLcBGAs/s320/blog.jpg" width="180" alt="Contoh gambar" />

3. Menampilkan gambar sebagai link
Link atau hypertext dalam HTML merupakan sebuah teks yang ketika di klik maka akan berpindah dari suatu halaman ke halaman lainnya.

Membuat link tidak hanya dengan teks saja, akan tetapi bisa juga dengan menggunakan gambar sebagai pengganti teks.

Artinya, ketika gambar tersebut Anda klik maka Anda juga akan berpindah ke halaman lain.

Untuk menampilkan gambar sebagai link, kita akan menambahkan tag <a> dengan atribut href. Atribut ini berfungsi untuk memberi informasi pada browser link mana yang akan dituju.

Berikut adalah contoh penulisan link menggunakan gambar pada HTML :
<a href="http://www.sejutatips.com"><img src="https://4.bp.blogspot.com/-s-UMQtQIZ_s/Wh5K5N_LhkI/AAAAAAAAK5I/OZ3rfRH_FhwaGWJPauGdUEDU0XsmxvkLgCLcBGAs/s320/blog.jpg" alt="Contoh gambar"/></a>

Nilai atribut href pada contoh diatas adalah "http://www.sejutatips.com". Oleh karenanya, jika gambar tersebut Anda klik, maka Anda akan dialihkan ke url tersebut.

Perhatikan penulisan tag <img> pada contoh diatas, tag tersebut tidak memiliki pasangan sehingga langsung ditutup dengan tag />.

Beda halnya dengan tag <a> yang digunakan untuk membuat link, tag ini memiliki pasangan penutupnya, yaitu: tag </a>.

Demikianlah sedikit ulasan tentang cara menampilkan atau menyisipkan media gambar pada halaman web atau file HTML.

Kolom komentar selalu terbuka bagi Anda yang kurang paham atau ingin menambahkan. Terimakasih

0 Response to "Cara Menampilkan Gambar pada Halaman Web atau File HTML"

Post a Comment

Kata-kata dan bahasa Anda adalah gambaran kualitas diri Anda...