Membuat Gambar Responsive di HTML
Biotekners - Melanjutkan pembahasan sebelumnya, kali ini kita akan mencoba untuk memasukkan gambar dalam halaman HTML dengan format responsive. Maka langkah awal yang perlu dilakukan adalah dengan memberikan kode berikut pada bagian style:
.img-responsive
{
width: 200px;
height:auto;
max-width:100%;
}
Setelah meletakkan kode pada bagian style, Anda perlu memanggil pada bagian konten dengan kode berikut:
<div><img class="img-responsive" src="../sumberkodegambardikomputer anda"></div>
Maka hasilnya akan muncul gambar yang tetap pada ukuran sama walaupun halaman website diperkecil atau perbesar.
Membuat Menu Navigasi di Halaman HTML
Baik setelah belajar membuat gambar, selanjutnya kita akan mencoba untuk membuat beberapa menu di halaman. Langkah awal sama seperti di atas yaitu kita perlu meletakkan kode di bagian style. Kodenya sebagai berikut (nb: untuk warna, bisa dipilih sesuai selera):
.topnav
{
background-color: #333;
overflow: hidden;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover
{
background-color: #ddd;
color: black;
}
.topnav a.active
{
background-color: #04AA6D;
color: white;
}
Jika sudah meletakkan style, selanjutnya letakkan kode menu berikut pada bagian antara <head> dan </head>:
<div class="topnav">
<a class="active" href="#home">Beranda</a>
<a href="#">Profil Lab</a>
<a href="#">Kontak</a>
<a href="#">Download</a>
</div>
Jika berhasil, maka tampilannya akan keluar seperti di bawah ini:
Untuk bagian href, dapat diisi dengan link tujuan yang diinginkan. Misalnya mau diarahkan untuk halaman baru, download atau menghubungi ke whatsapp. Demikian tutorial part ini, kita akan lanjutkan pada part berikutnya. Terima kasih.
Biotekners
Selasa, 06 September 2022
More From Author
Tutorial