Coding Dan Cara Memasukan Atau Menampilkan Gambar Di WEB Dengan HTML

CODING MENAMPILKAN GAMBAR DI HTML - Huloo semua, salam sejahtera ya. Oke guys kali ini emm kita akan melanjutkan pembelajaran HTML ya, sekarang kita masuk ke bagian #3 yaitu belajar coding memasukan atau menampilkan gambar di HTML sekaligus belajar mengenal atribut pada HTML.

Setelah kita mempelajari struktur html dan apa saja yang harus pertama kali kita tulis di html pada postingan sebelumnya, sekarang kita masuk ke tv -_- masuk ke menampilkan gambar di html gitu. Untuk memuat sebuah gambar pada dokumen html, kita akan menggunakan tag <img>.

Cara Memasukan Gambar Dengan HTML

1.1 Mengenal Atribut HTML

Setiap tag html dapat satu atau lebih atribut, atribut ini berfungsi untuk menyimpan informasi yang berkaitan dengan tag tersebut. Pada tag <img> kita akan menggunakan atribut src untuk menyimpan lokasi gambar.

<img src>

Selanjutnya untuk memasukan nilai pada atribut, kita gunakan operator sama dengan (=) diikuti oleh lokasi gambar yang diapit oleh tanda kutip dua (").

<img src="namagambar.png">

Tag img ini termasuk kedalam tag spesial dan tidak memiliki tag penutup (di sebut juga sebagai cell closed tag), seperti tag-tag lainnya. Ini dikarenakan tag ini tidak memiliki konten seperti :

<title> ini merupakan tag title </title>

Nah, sebagai pengganti kita tambahkan tanda slash (/) sebelum kurung tutup.

<img src="gambar.png" />

Okay, sekarang saatnya kita mencoba memasukan gambar dalam coding html ya.

1. Buka notepad Buat file baru dengan nama latihan2.html lalu save di satu folder khusus ya.

2. Carilah sebuah gambar dan simpan satu folder dengan file latihan2 tadi.

3. Tuliskan coding di bawah ini:

4. Save kembali lalu buka file latihan2.html tadi, maka akan tampil sebuah gambar:

Cara Memasukan Gambar Dengan HTML

Catatan:

Samakan nama gambar dengan yang di tulis di coding html ya berikut format gambarnya, jika gambar formatnya jpg maka tulis jpg, karena format gambar saya png jadi saya tulis format png.

Setiap tag img, selain memiliki atribut src untuk menyimpan lokasi gambar, kita juga harus menyertakan atribut alt yang akan digunakan sebagai text alternatif ketika gambar tidak berhasil dimuat atau gambar hilang.

<img src="namagambar.png" alt="ini adalah gambar alternatif" />

Lalu atribut lainnya adalah atribut width dan higth yang berfungsi untuk menentukan ukuran lebar dan tinggi gambar tersebut. memang hal ini tidak perlu dilakukan karena gambar secara otomatis  akan terload dengan ukuran sebenarnya, namun hal ini sangat di anjurkan  untuk mempercepat proses pemuatan gambar.

<img src="namagambar.png" alt="ini adalah gambar alternatif" width=362 height=123 />

hemmm gimana ? udah? udah? nah sekian dulu deh ya postingan kali ini yaitu tentang bagaimana cara menampilkan gambar di web dengan html, semoga bermanfaat bagi aku, kamu, dan semuanya. Terima kasih sudah berkunjung.