Preload, atau halaman loading, adalah elemen penting dalam desain web modern. Ini memberikan pengguna kesan bahwa situs web sedang memuat, sambil memberikan waktu bagi konten sebenarnya untuk dimuat. Dalam artikel ini, kita akan membahas cara membuat preload dengan menggunakan HTML tanpa CSS atau JavaScript tambahan.
Cara Membuat Preload (Halaman Loading) Menggunakan HTML Beserta Contohnya :
1. Membuat HTML Dasar:
Pertama, kita perlu membuat struktur dasar HTML untuk halaman web kita. Berikut adalah contoh elemen dasar:
html :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Preload (Halaman Loading) Menggunakan HTML</title>
</head>
<body>
<!– Konten halaman web Anda akan ada di sini –>
</body>
</html>
2. Tambahkan Preload dengan HTML:
Preload yang dibuat dengan HTML umumnya lebih sederhana daripada yang menggunakan CSS atau JavaScript. Salah satu pendekatan yang umum adalah dengan menggunakan gambar GIF animasi preload. Anda dapat menemukan banyak gambar preload animasi gratis di internet.
html :
<body>
<!– Preload (Halaman Loading) dengan Gambar GIF Animasi –>
<div style=”text-align: center; margin-top: 20%;”>
<img src=”preload.gif” alt=”Preload (Halaman Loading)”>
</div>
<!– Konten sebenarnya dari halaman web Anda akan ada di sini –>
</body>
Dalam contoh di atas, kami menyertakan gambar GIF animasi “preload.gif” sebagai elemen preload. Gambar ini akan diputar secara otomatis saat halaman dimuat.
Kesimpulan:
Membuat preload (halaman loading) dengan HTML adalah cara sederhana untuk memberikan pengguna kesan bahwa situs web sedang memuat. Ini tidak memerlukan kode CSS atau JavaScript tambahan. Anda hanya perlu menyertakan gambar GIF animasi preload yang sesuai dengan desain dan kebutuhan situs web Anda. Preload membantu meningkatkan pengalaman pengguna dengan memberikan kesan profesional saat halaman web dimuat.