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
perhatikan letak gambar di atas. saya memiliki file gambar dengan nama malasngoding.png. maka berikut ini cara menampilkan gambar dengan html.
index.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.malasngoding.com</h1>
<img src="malasngoding.png">
</body>
</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.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.malasngoding.com</h1>
<img src="malasngoding.png" height="300px" width="500px;">
</body>
</html>
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
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.malasngoding.com</h1>
<img class="gambar" src="malasngoding.png">
</body>
</html>
style.css
1
2
3
4
.gambar{
height: 300px;
width: 500px;
}
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
Incoming search terms:
- cara menampilkan gambar di html
- cara menampilkan gambar html
- cara menampilkan gambar pada html
- menampilkan gambar di html
- tag html untuk menampilkan gambar
- cara menampilkan gambar di html notepad
- menampilkan gambar html
- menampilkan gambar pada html
- cara menampilkan gambar di php
- menampilkan gambar
- SHARE :
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.
- Author's profile
- All posts by Diki Alfarabi Hadi
Tags: belajar menampilkan gambar html, cara membuat gambar dengan html, cara membuat html, Cara menampilkan gambar, cara menampilkan gambar dengan html, cara menampilkan gambar di html, contoh menampilkan gambar dengan HTML, directory gambar html, kegunaan tag, kode warna html, kumpulan kode html, pengertian tag pada html
Tutorial HTML Dasar
- #1. Pengertian HTML
- #2. Memilih Text Editor
- #3. Mengenal Tag, Element dan Atribut
- #4. Mengenal Heading HTML
- #5. Format Text HTML
- #6. Paragraf HTML
- #7. Membuat Tabel HTML
- #8. Link / Hyperlink HTML
- #9. List HTML
- #10. Format Code
- #11. Form HTML
- #12. Atribut Form HTML
- #13. Simbol HTML
- #14. Menampilkan Gambar HTML
- #15. Iframe HTML
- #16. Menghubungkan HTML dan CSS
- #17. Mengenal Class dan Id
- #18. Baris Baru (Tag BR)
Tutorial HTML Lanjutan
- #1. Favicon
- #2. Pemutar Video HTML
- #3. Tutorial HTML Lainnya
Produk
- Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
- Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
- Source Code Toko Sport PHP dan MySQLi Rp 200,000
- Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000
Tutorial Terbaru
- Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
- Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
- Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
- Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
- Membuat QR Code Dengan PHP August 3, 2022
Toko Kami
SOCIAL
Malas Ngoding
TUTORIAL MENARIK LAINNYA
Selamat datang kembali di website malasngoding.com. Pada materi tutorial ini kita akan belajar tentang cara menampilkan file PDF di HTML di Website. Seperti yang kita ketahui, ... Diki Alfarabi HadiMenampilkan PDF Di HTML Dengan Mudah
12 August 2020
Membuat Game Snake Dengan HTML5 dan JQuery – Selamat datang di tutorial cara membuat game dengan html5. seperti pada judul tutorial ini, kita akan membahas ... Diki Alfarabi HadiMembuat Game Snake Dengan HTML5 dan JQuery
14 May 2017
Membuat Baris Baru atau Enter di HTML – hai teman-teman semuanya apakabar ? assalamualaikum.. kembali lagi di www.malasngoding.com. situs penyedia tutorial-tutorial seputar pemrograman yang berkualitas ... Diki Alfarabi HadiMembuat Baris Baru atau Enter di HTML
10 April 2017
Selamat datang kembali di www.malasngoding.com. situs yang fokus membahas tentang tutorial pemograman web, mobile dan desktop. Sesuai dengan judul “Cara Disable Resize Form Textarea Dengan ...Cara Disable Resize Form Textarea Dengan CSS
31 March 2017Bagaimana cara menampilkan gambar di HTML?
Bagaimana cara menampilkan gambar di website?
Kenapa gambar tidak bisa muncul di HTML?
Element HTML apa saja?