Tuliskan tag program untuk menampilkan gambar pada html

Pada pertemuan sebelumnya saya telah membahas tentang cara membuat tulisan miring dan tebal dengan HTML. Pada kesempatan kali ini saya akan membahas tentang cara menampilkan gambar pada HTML.

Table of Contents Show

Cara Menggunakan Tag <img>
Bagaimana cara menampilkan gambar di HTML?
Tag apa saja yang ada di HTML?
Apa HTML yang benar untuk menyisipkan gambar latar?

Manfaat menampilkan gambar pada HTML sangat variatif, selain untuk memperindah tampilan website, gambar akan memberikan kesan visualisasi pada tulisan di website, dimana peran gambar ini seperti menjadi pesan hidup pada sebuah tulisan. Bisa kita bayangkan jika suatu website tanpa adanya gambar, pasti akan terlihat kurang menarik dan membosankan.

Untuk menampilkan sebuah gambar, HTML menyediakan sebuah tag khusus, yaitu tag “<img>”. Tag <img> digunakan untuk menampilkan gambar dengan berbagai ekstensi, seperti jpg, png, bmp dan lain-lain.

Cara Menggunakan Tag <img>

Tag <img> memiliki banyak atribut, diantaranya src, alt, width, height, dan title. Untuk mengetahui fungsi atribut tersebut, Anda bisa melihatnya pada gambar dibawah ini:

Tabel atribut untuk tag <img> diatas adalah atribut yang paling sering di gunakan, sebenarnya masih ada beberapa tag gambar yang belum saya masukan ke tabel tersebut.

Untuk menggunakan tag <img>, siapkan terlebih dahulu sebuah gambar yang akan di tampilkan. Kemudian buat sebuah file HTML dengan nama “gambar.html“.

Pastikan gambar dan file HTML tersimpan dalam satu folder agar lebih mudah. Jika sudah siap silahkan tulis kode HTML dibawah ini dengan editor kesayangan Anda.

Dari kode HTML diatas, tag <img> terletak pada baris no. 7, yaitu <img src=”matahari.jpg” alt=”gambar matahari” title=”gambar matahari” width=”200px” height=”200px” />. Pada tag <img> tersebut terdapat beberapa atribut, yaitu src, alt, title, width dan height, yang perlu diperhatikan yaitu pada atribut src. Pastikan sesuai dengan nama gambar yang Anda gunakan, atribut src berisi nama beserta format gambar yang berada dalam satu folder dengan file gambar.html. Untuk pengisian atribut src seperti yang sudah saya jelaskan sebelumnya bisa menggunakan alamat gambar absolute atau relatif, yang intinya sama seperti saat mengisi atribut href pada tag link. Untuk format gambar bisa berupa png, jpg atau yang lainnya, bisa disesuaikan dengan file gambar yang Anda gunakan.

Pada atribut width dan height, saya menentukan ukuran gambar dengan lebar gambar 200px dan tinggi 200px. Untuk menentukan ukuran suatu gambar selain menggunakan atribut width dan height juga bisa memalui CSS. Sangat di rekomendasikan bahwa untuk menentukan ukuran suatu gambar lebih baik melalui CSS. Jika tidak terjadi kesalahan maka akan muncul tampilan seperti dibawah ini.

Dari gambar diatas kita bisa melihat bahwa penggunaan tag <img> beserta atributnya telah berhasil. Demikianlah tutorial tentang cara menampilkan gambar pada HTML. Silahkan bagikan atau share artikel ini jika dirasa ada yang membutuhkan.

Sunday, 27 October 2019

Tuesday, 1 October 2019

Tuesday, 1 October 2019

Seseorang yang suka belajar sesuatu yang baru, terutama tentang pemrograman web. Senang berbagi tentang pengetahuan dan belajar dari yang lain.

Bagaimana cara menampilkan gambar di HTML?

Dalam HTML, tag yang berfungsi untuk menampilkan gambar adalah tag <img>, singkatan dari image. Tag <img> merupakan jenis tag yang berdiri sendiri atau dalam konteks elemen, merupakan elemen tanpa tag penutup (empty element). Tag <img> memiliki atribut khusus yaitu src singkatan dari source yang berarti sumber.

Tag apa saja yang ada di HTML?

Berikut ini daftar tag yang wajib ada di HTML:.

<! DOCTYPE html> — untuk deklarasi type dokumen;.

<html> — tag utama dalam HTML;.

<head> — untuk bagian kepala dari dokumen;.

<title> — untuk judul web;.

<body> — untuk bagian body dari dokumen..

Apa HTML yang benar untuk menyisipkan gambar latar?

Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.