-

Belajar HTML Part 14 : Menampilkan Gambar Pada HTML


Menampilkan Gambar Pada HTML

Menampilkan gambar pada html termasuk yang bisa di bilang terpenting dalam membuat website atau membuat aplikasi berbasis web, bayangkan apa jadinya jika website tanpa gambar, maka akan terasa sangat membosankan. oleh karena itu teknik menampilkan gambar pada HTML termasuk ke dalam teknik yang perlu bahkan wajib. pada tutorial edisi HTML dasar ini yaitu Belajar HTML Menampilkan gambar pada html akan di jelaskan tentang cara menampilkan gambar pada halaman website menggunakan HTML.

HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image. tag HTML yang berfungsi untuk menampilkan gambar adalah tag ” <img> “.  tag <img> di gunakan untuk menampilkan gambar atau image dengan berbagai ekstensi, bisa itu jpg, png, gif, bmp, ico dan lain-lain.

Cara Menampilkan Gambar Pada HTML

Untuk menampilkan gambar dengan HTML anda bisa menggunakan tag <img>. kemudian masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan dengan file gambar, jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file gambar. jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan gambar ini maka kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan tersebut pada atribut src ini. tetapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya “nama_folder/filegambar”. dan jika file gambar berada di luar folder file html  yang menampilkan gambar maka anda bisa menambahkan perintah “../”.

perhatikan contoh berikut untuk cara menampilkan gambar dengan HTML. di sini saya sudah menyediakan sebuah file gambar yang berekstensi .png

menampilkan gambar pada html

menampilkan gambar pada html

perhatikan letak gambar di atas.  saya memiliki file gambar dengan nama malasngoding.png. maka berikut ini cara menampilkan gambar dengan html.

index.html

cara menampilkan gambar dengan html

cara menampilkan gambar dengan html

dan gambar pun berhasil tampil.

anda bisa menentukan ukuran gambar yang tampil dengan menambahkan atribut height=”” untuk mengatur tinggi gambar, dan menambahkan aribut width=”” untuk menentukan lebar gambar yang tampil.

tetapi cara ini sangat tidak di rekomendasikan karena anda harus memberikan atribut height dan width pada semua gambar yang anda tampilkan. jadi cara untuk mengatur ukuran gambar yang benar anda bisa menambahkan class atau id pada tag <img> dan kemudian mengatur tinggi dan lebarnya menggunakan CSS.

index.html

style.css

See the Pen eJWKKP by Malas Ngoding (@malasngoding) on CodePen.0

Sekian tutorial menampilkan gambar dengan HTML.

Tutorial HTML Dasar Lainnya

Belajar HTML Part 1 : Pengertian HTML
Belajar HTML Part 2 : Memilih Text Editor
Belajar HTML Part 3 : Mengenal Tag, Element, Atribut HTML
Belajar HTML Part 4 : Heading Pada HTML
Belajar HTML Part 5 : Format Text Pada HTML
Belajar HTML Part 6 : Membuat Paragraf Pada HTML
Belajar HTML Part 7 : Membuat Table Pada HTML
Belajar HTML Part 8 : Membuat Hyperlink Pada HTML
Belajar HTML Part 9 : Membuat List Pada HTML
Belajar HTML Part 10 : Membuat Format Code Pada HTML
Belajar HTML Part 11 : Membuat Form Pada HTML
Belajar HTML Part 12 : Atribut Form Pada HTML
Belajar HTML Part 13 : Membuat Symbol Pada HTML
Belajar HTML Part 14 :Menampilkan Gambar Pada HTML
Belajar HTML Part 15 : Tag Iframe Pada HTML
Belajar HTML Part 16 : Menghubungkan HTML dengan CSS
Belajar HTML Part 17 : Mengenal Class dan Id Pada HTML


Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tutorial Menarik Lainnya

Membuat Menu Navbar Responsive
Contoh website html biodata sederhana
Membuat fitur show hide password di HTML
Membatasi Jumlah Karakter Input HTML

Membatasi Jumlah Karakter Input HTML

Halo sobat malasngoding.com pada artikel kali ini Kita akan pelajari bagaimana cara membatasi jumlah karakter yang di input kedalam form menggunakan HTML. Dalam membuat form ...

Diskusi

2 Komentar
  • Tutorial Bootstrap 4 #8 : Menampilkan Gambar Dengan Bootstrap 4 – Malas Ngoding 5 years ago

    […] Cara Menampilkan Gambar Pada HTML […]

  • nania 3 years ago

    permisi mau tanya, kalau cari www. image nya dimana ya? terimakasih

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD