Belajar HTML: Menampilkan Gambar pada HTML Lengkap

Halo semuanya pada artikel alafgani.web.id, kali ini kita membahas bagaimana cara Menampilkan Gambar Pada HTML? Mari kita simak tutorialnya.

Website tidak lepas dari adanya gambar, jika website tidak memiliki salah satu gambar yang tidak ditampilkan. akan begitu kurang rasanya. HTML memberikan tag untuk menampilkan gambar. agar website terlihat menarik.

Table of Contents

Menampilkan Gambar

Sebelum memasukkan gambar ke dalam HTML, pastikan Anda memiliki file gambar yang ingin digunakan. Pastikan gambar tersebut tersedia di komputer Anda dan di dalam folder proyek Anda.

Menggunakan elemen img HTML menyediakan elemen <img> yang digunakan untuk menyisipkan gambar ke dalam halaman.

Berikut ini adalah contoh penggunaan elemen <img>:

<img src="folder/gambar.jpg" alt="Deskripsi gambar" height="300" width="500">

Pada contoh di atas, atribut src digunakan untuk menentukan lokasi atau URL gambar. Anda harus menggantinya dengan lokasi atau URL yang sesuai dengan lokasi gambar di komputer Anda atau di internet, jika gambar tersebut tidak berada di komputer Anda.

Note: Dalam Penulisan src sebaiknya diperhatikan, Kita kadang terkecoh oleh Penulisan atribut src, sering gambar gagal tampil karena kita salah ketik atribut src menjadi “scr”.

Atribut alt digunakan untuk memberikan deskripsi alternatif gambar. Ini penting untuk aksesibilitas web dan akan ditampilkan jika gambar gagal dimuat atau untuk membantu pengguna dengan keterbatasan visual. Pastikan memberikan deskripsi yang relevan dan deskriptif untuk gambar Anda.

Menyesuaikan Gambar Anda dapat menyesuaikan tampilan gambar dengan menggunakan atribut-atribut tambahan pada elemen <img>.

Berikut adalah beberapa atribut yang sering digunakan:

width dan height: Mengatur lebar dan tinggi gambar dalam piksel. Misalnya, <img src=”nama_gambar.jpg” alt=”Deskripsi gambar” width=”500″ height=”300″>
style: Anda juga dapat menggunakan atribut style untuk menetapkan gaya langsung pada elemen <img>. Misalnya, <img src=”nama_gambar.jpg” alt=”Deskripsi gambar” style=”border: 1px solid black;”> akan menampilkan gambar dengan bingkai hitam.
class dan id: Menggunakan atribut class atau id pada elemen <img> memungkinkan Anda untuk menerapkan gaya CSS tertentu atau memanipulasi gambar dengan JavaScript.

Contoh

Berikut adalah contoh dalam menampilkan gambar pada html.

HTML

<!DOCTYPE html>
<html>
<body>

<img src="https://alafgani.web.id/wp-content/uploads/2023/05/hacker-g66bc81e3c_1920.jpg" alt="Deskripsi gambar" height="300" width="500">

</body>
</html>

RESULT

Semoga panduan ini membantu Anda memasukkan gambar ke dalam HTML. Dengan menggunakan elemen <img> dan atribut-atribut yang sesuai, Anda dapat menyisipkan gambar dengan mudah ke dalam halaman web Anda. Jangan lupa untuk memberikan deskripsi alternatif pada gambar untuk meningkatkan aksesibilitas web. Selamat mencoba dan semoga berhasil!

Apakah kamu ingin mempelajari dasar-dasar HTML, membangun halaman web yang menarik, atau mengembangkan keahlian dalam pengkodean web?

e-Book kami memberikan panduan langkah demi langkah yang mudah diikuti, dilengkapi dengan contoh kode dan penjelasan yang jelas.

Apa yang akan kamu dapatkan dari eBook ini:

Penjelasan mendalam tentang tag-tag HTML dan fungsinya.
Petunjuk praktis untuk membangun struktur dasar halaman web.
Cara mengatur tata letak dan gaya menggunakan CSS.
Teknik dasar untuk menambahkan gambar, tautan, dan multimedia ke dalam halaman web.
Tips dan trik untuk mengoptimalkan kode HTML Anda.

Jangan lewatkan kesempatan ini untuk meningkatkan pengetahuan dan keterampilan kamu dalam Pengembangan Web. Unduh eBook “Panduan Pemula HTML: Menguasai Dasar-Dasar Pengembangan Web” secara gratis sekarang juga!

Download Disini