Nasional

Tutorial Buat Halaman Website Responsif dengan HTML dan CSS, Jangan Lupa Gunakan Media Query Juga!

Damar Emas
  • Kamis, 20 April 2023 | 15:00
Ilustrasi cara membuat halaman website menjadi responsif (Pexels / Pixabay)

Sekarang akan menambahkan beberapa kode CSS ke dalam media query kita untuk membuat halaman web responsif.

Kita dapat menggunakan properti CSS seperti margin, padding, dan font-size untuk memastikan bahwa konten kita terlihat baik di berbagai layar.

<html>
<head>
<title>Halaman Web Responsif</title>
<style>
@media (min-width: 600px) {
h1 {
margin: 0;
padding: 0;
font-size: 24px;
}
p {
margin: 0;
padding: 0;
font-size: 16px;
}
img {
width: 100%;
}
a {
font-size: 12px;
}
}
</style>
</head>
<body>
<h1>Halaman Web Responsif</h1>
<p>Ini adalah halaman web responsif yang dibuat menggunakan HTML dan CSS.</p>
<img src="gambar.jpg" alt="Gambar Responsif">
<a href="http://example.com">Kunjungi website ini</a>
</body>
</html>

Langkah 4: Uji Coba Halaman Web Anda

Sekarang kita telah menyelesaikan halaman website responsif. Kita dapat menguji halaman dengan membukanya di berbagai layar untuk memastikan bahwa halaman terlihat baik di berbagai ukuran.

Dengan mengikuti tutorial ini, Anda telah mempelajari cara membuat halaman website responsif menggunakan HTML dan CSS. Selamat dicoba!


Gabung juga di kanal Telegram dengan klik link https://t.me/networknewsupdate, kemudian join dan nantikan berita update terbaru setiap jamnya.***

Rekomendasi Untuk Anda

Berita Terkait

Berita Lainnya