Ilustrasi dibuat menggunakan Nano Banana Gemini
Tutorial Kalkulator Umur - Membuat Tampilan dengan HTML dan CSS
- Tutorial |
- Oleh Malik |
- 26 Desember 2024
Saat kita ingin membuat sesuatu, ada baiknya kita melakukan perancangan terlebih dahulu agar proses pembuatan lebih terarah.
Berikut adalah rancangan desain tampilan yang akan kita buat
Dibuat menggunakan aplikasi draw.io
Klik di sini untuk mengunduh file .drawio
Struktur Dasar Tampilan
Dalam file index.html kita ketikkan struktur dasar HTML seperti berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Umur</title>
</head>
<body>
</body>
</html>
Pastikan struktur dasar HTML yang kita miliki harus memiliki tag <meta name="viewport" dengan tambahan atribut dan nilai content="width=device-width, initial-scale=1.0", ini akan membuat ukuran konten dalam halaman website kita menjadi responsif terhadap lebar dari device yang mengaksesnya.
Memasang Pico CSS
Untuk bisa menggunakan Pico CSS di dalam halaman website kita, tentu harus dipasang terlebih dahulu library-nya.
Terdapat beberapa cara untuk memasangnya dan yang paling mudah adalah mengggunakan CDN(Content Delivery Network) yang kita bisa ambil dari dokumentasi resminya di picocss.com/docs.
Kemudian kita bisa memasukkannya ke dalam tag <head></head> di dalam script HTML yang kita miliki, berikut adalah contohnya
. . .
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Umur</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
>
</head>
. . .
Membuat Form
Karena kita menggunakan Pico CSS, tentu tidak akan banyak memanfaatkan kemudahan yang sudah di tawarkan.
<body>
<main class="container">
<article>
<h1>Kalkulator Umur</h1>
<fieldset>
<label>
<input id="darkmode-toggle" name="dark-mode" type="checkbox" role="switch"/>
Dark Mode
</label>
</fieldset>
<p>Kalkulator sederhana untuk menghitung umur kamu sudah berapa tahun, bulan, dan hari.</p>
<article>
<form>
<label for="date">Tanggal Lahir
<input id="date" type="date" name="date">
<small id="help-text"></small>
</label>
<input type="submit" name="submit" value="Hitung">
</form>
<p id="result"></p>
</article>
</article>
</main>
</body>
Berikut adalah penjelasan tentang elemen yang ada pada script tersebut
- Judul aplikasi menggunakan elemen
h1. - Elemen
checkboxdenganrole="switch", berperan sebagai switch untuk mengaktifkan atau menonaktifkan mode gelap. - Di bawah
<input type="date">kita masukkan text keterangan dengan tag<small></small>, dan konten di dalamnya dibiarkan kosong, karena nanti akan digunakan sebagai peringatan pengisian tanggal lahir. - Di bawah formulir terdapat hasil hitungan yang kita akan buat menggunakan elemen
p.
Tidak terlihat ada hal yang aneh dari hasil keluaran dari script tersebut. Namun jika kita perhatikan, lebar konten akan selalu mengikuti lebar dari browser-nya ketika kita ubah, seperti berikut
Sekilas terlihat biasa saja, namun ini kurang baik dilihat, karena konten website yang kita miliki hanya sedikit dan tidak membutuhkan ukuranyan terlalu lebar. Maka kita bisa mengubahnya dengan tambahan syntax CSS untuk membuat ukuran lebar maksimal, sehingga pada saat browser berada pada ukuran yang semakin melebar, konten yang kita miliki hanya akan melebar ke dalam nilai maksimal yang sudah ditentukan.
. . .
<style>
main.container {
max-width: 700px;
}
</style>
</head>
. . .
Dengan cara tersebut, konten kita yang hanya sedikit tidak memerlukan ukuran yang terlalu lebar, sehingga akan terlihat lebih rapi. Berikut adalah hasilnya
Kode lengkap tahap ini dapat dilihat di sini