Menampilkan gambar pada website menggunakan HTML




 Assalamu'alaikum teman-teman KWP semua😊🙏,

Salam sejahtera bagi kita semua, semoga kita tetap dalam lindungan Tuhan Yang Maha Esa da diberikan pemahaman yang baik untuk memahami artikel yang saya buat kali ini.


Pada artikel kali ini saya ingin memberikan sebuah materi tentang Cara Menampilkan Gambar Pada Website menggunakan HTML. Setiap website pasti memiliki gambar untuk ditampilkan diwebsitenya agar pengunjung website mengetahui tujuan pembuatan website tersebut. Akan tetapi ada juga website yang tidak menampilkan gambar seperti website yang isinya hanya tulisan biasa saja. Ya, sebenarnya gak harus juga sih menampilkan gambar, tetapi kebanyakan website di internet rata-rata selalu menampilkan gambar pada websitenya agar diketahui tujuan dia membuat website dan untuk apa gambar tersebut di masukkan kedalam website. Gambar merupakan bagian terpenting dalam pembuatan sebuah website agar dapat memperindah website dan menjadi icon bagi website itu.

Mungkin kalian sudah paham apa saja kegunaan gambar untuk ditampilkan di halaman website.

Pertama kita akan belajar memasukkan gambar + menentukan ukuran gambar yang kita masukkan ke website. Silahkan ikuti langkah-langkah dibawah ini agar dapat memahami kegunaan dan cara memasukkan gambar kedalam website.

<html>
<head>
<title>Menampilkan Gambar</title>
</head>
<body>
<h1>Menampilkan gambar diwebsite</h1>
<p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWrMVfmUI7jOPDOfnJYOK1FIM7Gn1wcyuBURgAdYJe2VTaUwOvMpk5RiZzRGyBrR7BUVtbHRTIFnzy7xSEaNNOY6tVYIkisr78z4plJWfOrvJ9naw2YFx6D0nIdxJkpgVTIVX8afmFuaj/w1684-h1069-p-k-no-nu/WhatsApp+Image+2020-12-03+at+14.27.05.jpeg" width="200px" height="100px"><br>
<br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWrMVfmUI7jOPDOfnJYOK1FIM7Gn1wcyuBURgAdYJe2VTaUwOvMpk5RiZzRGyBrR7BUVtbHRTIFnzy7xSEaNNOY6tVYIkisr78z4plJWfOrvJ9naw2YFx6D0nIdxJkpgVTIVX8afmFuaj/w1684-h1069-p-k-no-nu/WhatsApp+Image+2020-12-03+at+14.27.05.jpeg" width="200px" height="200px">
</p>
</body>
</html>

Keterangan: width untuk menentukan panjang gambar sedangkan height untuk menentukan lebar gambar.

  • Silahkan simpan code diatas pada sublime text atau text editor kemudian buka dibrowser. Maka tampilannya seperti dibawah ini.

Bisa dilihat perbedaan dari kedua gambar yang ditampilkan. Pada gambar pertama kita menentukan ukuran panjangnya 200px dan lebarnya 100px sehingga gambar yang ditampilkan dalam bentuk persegipanjang, sedangkan pada gambar kedua kita menentukan panjang dan lebarnya 200px sehingga gambar yang ditampilkan dalam bentuk persegi.


Yang ke dua kita akan menentukan posisi gambar yang akan kita upload atau Image Alignment dengan posisi kiri, tengan, dan kanan.
  • Silahkan ketikkan code dibawah ini
<html>
<head>
<title>Image Alignment</title>
</head>
<body>
<h1>Image Alignment</h1>
<p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWrMVfmUI7jOPDOfnJYOK1FIM7Gn1wcyuBURgAdYJe2VTaUwOvMpk5RiZzRGyBrR7BUVtbHRTIFnzy7xSEaNNOY6tVYIkisr78z4plJWfOrvJ9naw2YFx6D0nIdxJkpgVTIVX8afmFuaj/w1684-h1069-p-k-no-nu/WhatsApp+Image+2020-12-03+at+14.27.05.jpeg" width="100px" height="100px" align="left"><br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWrMVfmUI7jOPDOfnJYOK1FIM7Gn1wcyuBURgAdYJe2VTaUwOvMpk5RiZzRGyBrR7BUVtbHRTIFnzy7xSEaNNOY6tVYIkisr78z4plJWfOrvJ9naw2YFx6D0nIdxJkpgVTIVX8afmFuaj/w1684-h1069-p-k-no-nu/WhatsApp+Image+2020-12-03+at+14.27.05.jpeg" width="100px" height="100px" align="center"><br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWrMVfmUI7jOPDOfnJYOK1FIM7Gn1wcyuBURgAdYJe2VTaUwOvMpk5RiZzRGyBrR7BUVtbHRTIFnzy7xSEaNNOY6tVYIkisr78z4plJWfOrvJ9naw2YFx6D0nIdxJkpgVTIVX8afmFuaj/w1684-h1069-p-k-no-nu/WhatsApp+Image+2020-12-03+at+14.27.05.jpeg" width="100px" height="100px" align="right"></p>
</body>
</html>

Keterangan: align berguna sebagai penentu Posisi Gambar

  • Simpan dan jalankan pada browser kalian maka tampilannya akan seperti gambar dibawah ini


Yang terakhir kita akan membuat border alias bingkai pada gambar.
  • Silahkan ketikkan code HTML dibawah ini

<html>
<head>
<title>Border Image</title>
</head>
<body>
<h1>Border Image</h1>
<p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWrMVfmUI7jOPDOfnJYOK1FIM7Gn1wcyuBURgAdYJe2VTaUwOvMpk5RiZzRGyBrR7BUVtbHRTIFnzy7xSEaNNOY6tVYIkisr78z4plJWfOrvJ9naw2YFx6D0nIdxJkpgVTIVX8afmFuaj/w1684-h1069-p-k-no-nu/WhatsApp+Image+2020-12-03+at+14.27.05.jpeg" width="200px" height="200px" border="3">
</p>
</body>
</html>

Keterangan: Border berguna sebagai penentu tebal bingkai yang akan kita buat, Kalia bisa rubah-rubah aja tebal bingkainya dengan merubah angkanya.

  • Simpan code diatas dan jalankan dibrowser kalian. Maka, tampilannya akan seperti gambar dibawah ini





Oke, teman-teman KWP tigas materi diatas merupakan inti pembahasan dari artikel saya kali ini.

Semoga bermanfaat bagi kalian semua,


Semangat Otodidak💪💪




Komentar

Posting Komentar

Postingan Terpopuler

Cara ngoding HTML di Android

Gambar
  Assalamu'alaikum teman-teman, salam sejahtera bagi kita semua. Banyak diantara kita bertanya-tanya, apakah bisa kita ngoding di android? Jawabannya pasti bisa, karena sudah banyak aplikasi legal yang tersebar di app store atau playstore di Android kalian. Karena saya bukan user atau pengguna android untuk ngoding jadi saya full ngoding di komputer atau laptop saja. Sebenernya ngoding diandroid bisa juga sih, cuman ram android saya 2GB dan sekarang sudah kepenuhan jadi saya tidak bisa pakai android untuk ngoding, karena banyak file penting di handphone saya, hehehehehe... Mungkin saya hanya share pengalaman saya aja nih, karena waktu itu saya juga pernah menjadi programmer yang menggunakan android ya, meskipun cuman ngoding HTML aja sih, apa salahnya jika saya ingin berbagi ilmu buat kalian yang mau ngoding HTML di android.  Yang pernah saya coding di android itu bukan HTML aja sih, CSS dan JavaScript pernah, karena HTML, CSS, JavaScript itu tidak perlu banyak bahan, hanya pe...
Baca selengkapnya

Tulisan berjalan dan menampilkan video dari youtube ke website menggunakan HTML

Gambar
 Assalamu'alaikum sahabat KWP semua🙏😊, Salam sejahtera bagi kita semua, Semoga kita tetap dalam lindungan Tuhan Yang Maha Esa. Driartikel kali ini saya ingin memberikan kalian sebuah materi yaitu tentang Tulisan berjalan dan cara menampilkan video dari youtube ke website milik kita menggunakan HTML. Pastinya kalian pernah melihat tulisan-tulisan berjalan pada sebuah website yah dan juga ada video dari youtube yang ditampilkan pada sebuah website. Untuk tulisan berjalan pada website biasanya para Programmer menyebutnya Marquee , Karena tulisan yang berjalan itu pastinya menggunakan tag Marquee untuk membuat tulisan tersebut berjalan.  Pertama kita akan membuat tulisan yang berjalan dari kanan ke kiri atau Marquee Default . Silahkan ketikkan Code HTML dibawah ini pada Text Editor kalian  <html> <head> <title>Marquee</title> </head> <body> <h1>Marquee</h1> <p> <marquee>Tulisan Ini Berjalan</marquee> </p...
Baca selengkapnya

Perkenalan

Gambar
  Assalamu'alaikum Warahmatullahi Wabarokatuh Perkenalkan nama saya Muhammad Ibnu Zein. Dinisi saya sebagai pendiri Forum Koding Web Programming. Dimana forum tersebut adalah tempat untuk mempelajari tentang Web Developing dari awal. Di postingan pertama saya diblog ini saya hanya memperkenalkan saya dan yang akan dibahas di blog ini saja. Diblog ini saya akan menyampaikan berbagai macam materi tentang dunia Web Developing yang terpenting adalah Start up pertama kali kita mulai belajar tentang Web Developing.  Ada pun materi terpenting yang akan saya bahas di blog ini adalah: 1. HTML Dasar 2. CSS Dasar 3. Praktek Pembuatan Website berbasis HTML & CSS 4. PHP Dasar 5. JavaScript Dasar 6. Mysql Database 7. Tambahan info materi tentang Web Developing.
Baca selengkapnya