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 cara menampilkan
gambar pada html ini 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
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
Perhatikan letak gambar di atas. saya memiliki file gambar dengan nama
malasngoding.png. maka berikut ini cara menampilkan gambar dengan html.
malasngoding.png. maka berikut ini cara menampilkan gambar dengan html.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | www.belajarngodingg.my.id</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | /www.belajarngodingg.my.id</h1>
<img src="Belajar coding.png">
</body>
</html>
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.
height=”” untuk mengatur tinggi gambar, dan menambahkan aribut width=”” untuk menentukan
lebar gambar yang tampil.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<img src="" height="300px" width="500px;">
</body>
</html>
Pelajari Tag Iframe HTML dalam HTML
iframe adalah tag html yang digunakan untuk menampilkan halaman
website tanpa membuka website. Jadi jika Anda ingin menampilkan situs
di halaman Anda, Anda kemudian dapat menggunakan tag <iframe> untuk
tunjukkan itu. Caranya sangat sederhana, cukup tambahkan src="" pada atributnya
<iframe> Tag pembuka menempatkan tautan url situs web yang ingin Anda tampilkan. metode
Penulisan tag iframe dimulai dengan tag iframe pembuka "<iframe>" dan diakhiri dengan tag
Tutup iframe </iframe>.
Lihat di bawah untuk contoh dan petunjuk tentang cara menggunakan tag <iframe>.
iframe adalah tag html yang digunakan untuk menampilkan halaman
website tanpa membuka website. Jadi jika Anda ingin menampilkan situs
di halaman Anda, Anda kemudian dapat menggunakan tag <iframe> untuk
tunjukkan itu. Caranya sangat sederhana, cukup tambahkan src="" pada atributnya
<iframe> Tag pembuka menempatkan tautan url situs web yang ingin Anda tampilkan. metode
Penulisan tag iframe dimulai dengan tag iframe pembuka "<iframe>" dan diakhiri dengan tag
Tutup iframe </iframe>.
Lihat di bawah untuk contoh dan petunjuk tentang cara menggunakan tag <iframe>.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Tag Iframe Pada HTML | www.belajarngodingg.my.id</title>
</head>
<body>
<h1>Belajar HTML Tag Iframe Pada HTML | www.belajarngodingg.my.id</h1>
<iframe src="hhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjduOENm6Tz2zR2-jRl3NFwoV0tn496Gd9C80YCq4SYVz4mGS4gdguj4IP6UJH0YDKRtvnjQBtBd1X2eYaY1Cx4kAhp5mAD2r2jnZgvzJK3ydz1VsjY-cx2F2Q_dxXAqm1VaLMYqqc_4-XeCZN6VPotPY8c49WEzzJIoky7rOQsdrL5NjW9lOTFWXewEA/s500/Belajar%20coding(1).png" height="500px" width="1000px"></iframe>
</body>
</html>
Perhatikan pada contoh di atas. untuk membuat atau menggunakan tag <iframe> untuk
menampilkan halaman website ada halaman web anda anda bisa menggunakan tag <iframe> dan
kemudian memberikan atribut src=”” untuk meletakkan url dari halaman website yang ingin
anda tampilkan. pada contoh ini kita akan menampilkan halaman website.
menampilkan halaman website ada halaman web anda anda bisa menggunakan tag <iframe> dan
kemudian memberikan atribut src=”” untuk meletakkan url dari halaman website yang ingin
anda tampilkan. pada contoh ini kita akan menampilkan halaman website.
www.belajarngodingg.my.id sehingga contoh nya seperti berikut. Belajar HTML Tag Iframe Pada
HTML
<iframe src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjduOENm6Tz2zR2-jRl3NFwoV0tn496Gd9C80YCq4SYVz4mGS4gdguj4IP6UJH0YDKRtvnjQBtBd1X2eYaY1Cx4kAhp5mAD2r2jnZgvzJK3ydz1VsjY-cx2F2Q_dxXAqm1VaLMYqqc_4-XeCZN6VPotPY8c49WEzzJIoky7rOQsdrL5NjW9lOTFWXewEA/s500/Belajar%20coding(1).png" height="500px" width="1000px"></iframe>
Atribut height dan width pada contoh di atas untuk menentukan tinggi dan lebar iframe.
tapi anda bisa menggunakan css untuk mengatur ukuran tinggi dan lebar iframe. klik di
sini untuk mambaca tutorial css.
Sekian lah tutorial belajar HTML tag iframe pada HTML. Pada tutorial selanjutnya akan
di jelaskan tentang pengertian class dan id pada html. apa kegunaan dari class dan id? serta
bagaimana cara penggunaannya ?. setelah pengenalan class dan id pada HTML kemudian akan
di jelaskan tentang cara menghubungkan HTML dan css dan bagaimana penggunaan dasar CSS
pada HTML.
HTML
<iframe src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjduOENm6Tz2zR2-jRl3NFwoV0tn496Gd9C80YCq4SYVz4mGS4gdguj4IP6UJH0YDKRtvnjQBtBd1X2eYaY1Cx4kAhp5mAD2r2jnZgvzJK3ydz1VsjY-cx2F2Q_dxXAqm1VaLMYqqc_4-XeCZN6VPotPY8c49WEzzJIoky7rOQsdrL5NjW9lOTFWXewEA/s500/Belajar%20coding(1).png" height="500px" width="1000px"></iframe>
Atribut height dan width pada contoh di atas untuk menentukan tinggi dan lebar iframe.
tapi anda bisa menggunakan css untuk mengatur ukuran tinggi dan lebar iframe. klik di
sini untuk mambaca tutorial css.
Sekian lah tutorial belajar HTML tag iframe pada HTML. Pada tutorial selanjutnya akan
di jelaskan tentang pengertian class dan id pada html. apa kegunaan dari class dan id? serta
bagaimana cara penggunaannya ?. setelah pengenalan class dan id pada HTML kemudian akan
di jelaskan tentang cara menghubungkan HTML dan css dan bagaimana penggunaan dasar CSS
pada HTML.