Cara Menampilkan Gambar di Web HTML

Cara Menampilkan Gambar di Web HTML

Untuk membuat website terlihat cantik dan menarik ada baiknya kita menampatkan gambar berhubungan dengan artikel yang kita buat. HTML mendukung pemasangan gambar dalam format JPG, GIF dan PNG. Untuk memasang gambar pada HTML menggunakan tag <img src="lokasi-file"> tanpa penutup. Atribut src menunjukkan nama file beserta lokasi (jika diperlukan) dan merupakan syarat wajib dalam pemasangan tag. Untuk mengatur tampilan gambar tersedia babarapa atribut lain yang bisa dipakai

Penggunaan dan Atribut Tag Image HTML

Di dalam html gambar di definisikan sebagai tag <img> dimana tag <img> ini tidak di tulis secara berpasangan atau tag tunggal yang tidak memiliki tag penutup sehingga dalam memberian nilai pada tag <img> ini hanya dengan menggunakan atribut bukan elemen, contoh dibawah ini adalah kumpulan atribut standar yang biasa di gunakan untuk menampilkan gambar.

Daftar atribut tag image html
Atribut	Nilai	Keterangan
src	URL	Atribut wajib pada tag html untuk menentukan lokasi gambar yang ingin di tampilkan.
alt	teks	Untuk menentukan alternate text (teks pengganti) apabila gambar tidak dapat tampil di browser.
width	pixels	Digunakan untuk menentukan tinggi gambar.
height	pixels	Digunakan untuk menentukan lebar gambar.

Tabel atribut untuk tag <img> di atas adalah tag yang paling sering di gunakan, sebenarnya masih ada beberapa tag gambar yang bisa di lihat di w3schools.

Dan berikut adalah langkah langkah untuk menampilkan gambar di html.

1.

Yang pertama kalian harus membuat dulu folder daru dimana folder ini untuk tempat menyimpan gambar yang akan kalian masukan ke html, dan disina saya sudah membuat folder yang dinamai CONTOH.

2.

Kedua adalah kalian buka apk notpad++ di pc anda dan akan muncul tampilan seperti gambar di atas yang berwarna pink tapi kalian mungkin tampilannya akan berwarna putih dan tidak akan seperti bpada gambar di atas karna saya sudah mengganti backgroun nya.

3.

Lalu kalian masukan coding di bawah ini pada halaman notpad++ tersebut.

              <tr>

                        <td><img src="uuou.png"width="600" height="500"></td>    

              </tr>

Untuk kata yang bertulisan (uuou.png) itu adalah nama dan format dari gambar yang akan saya telah simpan tadi untuk di masukan ke html.

Kata yang bertulisan (width=”600”) itu adalah untuk lebar nya gambar, dan saya memberikan lebar nya 600.

Dan  kata yang bertulisan (height=”500”) adalah untuk  tinggi nya gambar, dan saya memberikan ltinggi nya 500.

4.

Setelah kalian selesai memasukan coding tadi kemudian kalian klik ctrl+s untuk mengesave nya dan akan muncul tabel putih seperti di atas.

5.

Lalu anda masuk ke folder yang telah dibuat tadi dalam kolom file name anda masukan nama sesuan keinginan.

6.

Setelah kalian memberi nama kalaian jangan dulu mengklik save kalian klik dulu yang dibawah file name kemudian kalian pilih format html dan kalian tinggal mengsave nya.

7.

Untuk membukanya kalian masuk masuk ke file explorer lalu ke folder yang di buat tadi kemudian kelik kanan yang data yang telah di save tadi pilih open with lalu pilih untuk bisa menampilkan gambar nya kalau kain ingin menampilkannya di chrome kalian klik google chrome.

8.

Dan inilah tampilan menggunakan langkah langkalah yang tadi talah kalian baca di web html dengan gambar dan ukuran nya.

Demikian tutorial dalam menampilkan gambar di kode html, sebenarnya masih ada beberapa atribut yang bisa di gunakan pada tag <img> ini, hanya saja atribut-atribut yang di tulis di sini adalah atribut yang umumnya sering di gunakan untuk membuat gambar pada kode html.

Posted in: Tips 1