Cara Membuat Kode Banner HTML Lengkap dengan CSS

Kali ini kita akan belajar Cara Membuat Kode Banner HTML versi yang standar (cuma display gambar di kode html dan link) serta dengan versi lengkap dengan CSS. Jika kita sering berselancar di internet pasti selalu mendapatkan halaman website yang kita kunjungi penuh dengan iklan, baik itu iklan teks, gambar maupun banner.

Cara Membuat Kode Banner HTML Lengkap dengan CSS

Pertama saya asumsikan kalian sudah memiliki kode editor seperti notepad, visual studio code, atau yang lainnya. Nah setelah itu tinggal buka saja kode editor favorite kalian dan buat file baru.

<img src="https://raylight.digitalkit.id/wp-content/uploads/2023/02/ads-2.png"></img>

Pertama diatas adalah contoh kode banner html sederhana, hanya menampilkan gambar saja, tanpa link tujuan, nah berikut adalah contoh kode banner html dengan atribut a href:

<a href="#link"><img src="https://newsray.digitalkit.id/wp-content/uploads/2022/08/ads.png"></a>

Bedanya di kode banner html dengan link adalah di atributr <a> … </a> dan dibagian #link ini bisa disesuaikan dengan link tujuan ketika banner tersebut di klik. Misal mau ngarahin ke blog digitalkit atau ke halaman lain.

Membuat Banner HTML dengan CSS

Selanjutnya jika kamu ingin memodifikasi ukuran, tampilan, dan latar belakang, misal menambah warna kamu bisa memanfaatkan css, berikut contohnya:

<div class="image-link">
  <a href="#">
    <img src="https://newsray.digitalkit.id/wp-content/uploads/2022/08/ads.png" alt="Advertisement">
  </a>
</div>

<style>

  .image-link img {
    max-width: 50%;
    max-height: 100%;
  }

</style>

Disana kita mengatur lebar dan tinggi dari class image-link, jadi ketika ada gambar pada class tersebut akan otomatis lebar menjadi 50% dari ukuran asli, dan tingginya 100%.

Penutup

Mungkin sekian cara membuat banner html sederhana dengan tambahan css, sisanya tinggal kamu sesuaikan saja dengan kebutuhan website mu.