Cara Menampilkan Gambar dengan HTML

Masdita.com, menampilkan gambar dengan html bisa dibilang bagian yang sangat vital dalam membuat sebuah website. Kenapa bisa dibilang vital? Sekarang kita lihat saja setiap website pasti ada gambarnya? Itu membuat tampilan website menjadi menarik. Coba saja kita bayangkan jika website tanpa ada gambar? Pasti akan terkesan monoton bahkan bisa dikatakan juga sangat jelek selain itu juga tidak user friendly. Pada tutorial kali ini saya akan menjelaskan bagiamana cara menampilkan gambar dengan html pada halaman website kita.

Di html ada sebuah tag yang berfungsi menampilkan gambar yaitu tag “<img>”. Tag <img> bisa untuk menampilkan gambar di website kita dengan ekstensi jpg,png, gif dan lain lain.

Cara Menampilkan gambar dengan html

Diatas tadi sudah dijelaskan bahwa untuk memasukkan gambar kita bisa menggunakan tag “<img>” kemudian didalam tag <img> di masukan atribut “src=”, atribut src singkatan dari source atau dalam bahasa indonesia berarti sumber yang artinya mengambil sumber gambar. Jika sumber gambar terletak dalam folder image berarti di dalam atribut src nanti akan menjadi seperti <img src=”image/nama_file”>. Dan jika file gambar diluar dari folder html kita tinggal tambahkan perintah “../” jika dimplementasikan mejadi “<img src=”../image/nama_file”>”.

Artikel terkait : Membuat tabel dengan html

Supaya sobat lebih jelas berikut saya berikan contoh sederhananya untuk cara menampilkan gambar dengan html

index.html

<!DOCTYPE html>

<html>

<head>

<title>Cara menampilkan gambar dengan html</title>

</head>

<body>

<h2>

Cara menampilkan gambar dengan html

<br>

masdita.com

</h2>

</body>

</html>

Struktur foldernya :

Hasilnya :

Nah diatas adalah contoh pemanggilan gambar di dalam satu folder, bagaimana jika gambar kita berada didalam folder yang berbeda? Gampang sekali tinggal tambahi letak foldernya di tag src, kodenya seperti di bawah ini