Belajar Menyisipkan Gambar Dengan HTML

Rabu, 11 Januari 2023

Menyisipkan gambar pada halaman web menggunakan Tag <img> yang berfungsi untuk menyematkan gambar dalam dokumen HTML. Ini adalah tag pembuka & penutup sendiri, yang artinya tidak memiliki tag penutup.

Sumber foto: www.pexels.com (oleh Miguel Á. Padriñán)

Berikut adalah script dasar untuk tag <img>:

<img src="gambar.jpg" alt="Teks Alt">

Atribut src menentukan sumber gambar berupa link url gambar, yang dapat berupa file di web sendiri atau URL dari sumber lain. Atribut alt menyediakan teks alternatif untuk gambar, yang ditampilkan jika gambar tidak dapat ditampilkan karena beberapa alasan (seperti saat pengguna menggunakan pembaca layar).

Berikut adalah contoh penggunaan tag <img> untuk menyisipkan gambar ke dalam dokumen HTML:

<html> <body> <h1>Belajar Menyisipkan Gambar</h1> <img src="https://images.pexels.com/photos/1591061/pexels-photo-1591061.jpeg" alt="Contoh Gambar"> </body> </html>

Anda juga dapat menggunakan atribut width dan height untuk menentukan ukuran gambar, serta atribut style untuk menerapkan gaya CSS pada gambar.

Berikut adalah contoh penggunaan atribut lebar (width) dan tinggi (height) untuk mengubah ukuran gambar:

<html> <body> <h1>Belajar Menyisipkan Gambar</h1> <img src="https://images.pexels.com/photos/1591061/pexels-photo-1591061.jpeg" alt="Contoh Gambar" width="400" height="250"> </body> </html>

Dan berikut adalah contoh penggunaan atribut style, yaitu float untuk memunculkan gambar dari sisi kiri, Salin semua kode di bawah ini dan save dengan nama picture.html (untuk menuliskan kode HTML ini dapat menggunakan notepad):

Dokumen HTML ini memiliki judul, heading, paragraf, dan image. Ketika halaman web ini dijalankan di browser web (untuk menjalankannya klik file picture.html yang telah dibuat di atas), akan terlihat hasilnya seperti:

Anda Mungkin Menyukai Postingan Terkait:

Belajar Menyisipkan Gambar Dengan HTML

Tidak ada komentar:

Posting Komentar