Cara Menampilkan Gambar Menggunakan HTML

Setelah kita mempelajari Struktur Penulisan HTML,ada tiga komponen pembentuk dokumen html yang harus kita ketahui,yaitu Elemen,Tag dan atribut.

Elemen utama dalam html dibagi menjadi dua,yaitu elemen <HEAD> yang berisi informasi tentang file html tersebut,seperti judul dokumen dll. Sedangkan elemen ke dua yaitu <BODY> yang menentukan bagaimana isi file tersebut ditampilkan di browser,seperti paragraf,daftar (list),tabel,gambar dll.
Sedangkan tag dalam html biasanya diikuti dengan atribut untuk memberi nilai dan menyimpan informasi yang berkaitan dengan tag tersebut,misalkan tag <img> di ikuti atribut src yang berfungsi untuk memanggil gambar pada lokasi dimana gambar tersebut disimpan dan di tampilkan pada Browser.

Berikut langkah - langkah menampilkan gambar menggunakan html.

1. Buatlah file HTML baru pada editor kesayangan kalian.

2. Buat folder baru dengan nama latihan html.

3. Buat folder images di dalam folder latihan html untuk menyimpan gambar.

4. Tuliskan kode dibawah ini dan dan beri nama latihan2.html,kalau masih bingung cara penyimpanannya kalian bisa membacanya pada postingan saya sebelumnya disini.

<!DOCTYPE HTML>

<HTML>

<head>

<title>latihan menampilkan gambar</title>

</head>

<body>

<p>ini adalah contoh pemuatan gambar pada file HTML</p>

<img src="images/gambar1.jpg">

</body>

</HTML>

5. Bukalah pada web browser kalian dan lihatlah hasilnya.

Pada latihan ini ada 2 tag yang kita gunakan,yaitu tag <p>.. </p> untuk menampilkan paragraf dan tag <img> untuk menampilkan gambar,tag <img> termasuk "self closed tag " yang tidak memerlukan tag penutup seperti tag - tag lainnya.untuk pemanggilan lokasi gambar,ada beberapa cara:

1. jika gambar kita berada di dalam folder dan folder tersebut satu folder dengan file HTMl kita,sebagai contoh pada latihan ini,gambar1 berada pada folder latihan html folder images maka pemanggilannya adalah :

<img src="images/gambar1.jpg">

2. jika gambar kita berada pada di dalam folder dan didalam folder tersebut ada folder lagi,maka cara memanggilnya adalah:

<img src="images/folder1/folder2/gambar1.jpg">

3. kalian juga bisa menampilkan gambar yang berada di internet pada web kalian,dengan cara hotlingking,misalnya :

Caranya cari gambar di internet,buka gambar dan copy linknya,maka gambar tersebut akan tampil juga di web kalian.

Demikian postingan kali ini,semoga membantu bagi kalian yang baru belajar HTML,jangan lupa untuk mempraktekkannya.Assalamualaikum wr.wb