Contoh Coding HTML Website Biodata, Dan Cara Membuatnya adalah topik favorit bagi pemula yang ingin memamerkan profil pribadi secara rapi dan profesional langsung di web.
Halo teman-teman, semoga kalian tetap semangat belajar coding! Pada artikel ini kodelyly.com akan membahas bagaimana membuat halaman biodata sederhana yang mobile-friendly, dilengkapi contoh kode HTML lengkap, struktur elemen yang tepat, serta tips tampilan dan SEO agar portofolio kalian makin meyakinkan.
Contoh Coding HTML Website Biodata, Dan Cara Membuatnya
Membangun halaman biodata tidak harus rumit. Kunci utamanya adalah struktur HTML yang bersih, semantik, dan mudah dibaca. Dengan menempatkan informasi seperti foto, nama, kontak, dan keahlian di dalam elemen yang tepat, halaman akan terlihat rapih serta mudah diindeks mesin pencari. Pastikan juga halaman terasa nyaman di layar ponsel melalui layout responsif. Berikut gambaran elemen yang sering dipakai dan fungsinya:
| Elemen | Kegunaan Singkat |
|---|---|
<header> | Menampilkan judul halaman dan deskripsi singkat |
<main> | Wadah utama seluruh konten biodata |
<section> | Mengelompokkan bagian seperti profil, informasi, dan kontak |
<table> | Menyusun data pribadi agar mudah dibaca |
<a> | Menyediakan tautan email, telepon, atau media sosial |
<img> | Menampilkan foto profil dengan atribut alt untuk aksesibilitas |
Contoh Kode HTML Lengkap
Berikut template HTML biodata sederhana yang bisa langsung kalian salin, simpan sebagai biodata.html, lalu buka di browser:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Biodata Saya</title>
<meta name="description" content="Contoh coding HTML website biodata sederhana dan cara membuatnya." />
<style>
:root {font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif; line-height:1.6;}
body{margin:0;background:#f6f7f9;}
.container{max-width:880px;margin:auto;padding:24px;}
.card{background:#fff;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.08);overflow:hidden;}
.header{padding:24px 24px 8px;}
.header h1{margin:0;font-size:28px}
.profile{display:flex;gap:16px;align-items:center;padding:0 24px 16px}
.profile img{width:88px;height:88px;border-radius:50%;object-fit:cover}
.info{padding:0 24px 24px}
.info table{width:100%;border-collapse:collapse}
.info th,.info td{padding:12px;border-bottom:1px solid #e8e8ee;text-align:left}
.info th{width:28%}
.actions{padding:16px 24px 24px}
.actions a{display:inline-block;padding:10px 16px;border-radius:12px;text-decoration:none;background:linear-gradient(135deg,#4f46e5,#06b6d4);color:#fff}
@media (max-width:600px){.profile{flex-direction:column;align-items:flex-start}}
</style>
</head>
<body>
<main class="container">
<article class="card">
<header class="header">
<h1>Biodata Saya</h1>
<p>Ringkasan profil singkat.</p>
</header>
<section class="profile">
<img src="https://via.placeholder.com/88" alt="Foto Profil">
<div>
<strong>Nama:</strong> Putri Nurhaliza<br>
<strong>Profesi:</strong> Web Developer
</div>
</section>
<section class="info">
<table>
<tr><th>Tempat, Tanggal Lahir</th><td>Bandung, 05-05-2000</td></tr>
<tr><th>Alamat</th><td>Jl. Mawar No. 5, Bandung</td></tr>
<tr><th>Email</th><td><a href="mailto:putri@example.com">putri@example.com</a></td></tr>
<tr><th>Telepon</th><td>0812-3456-7890</td></tr>
<tr><th>Keahlian</th><td>HTML, CSS, JavaScript</td></tr>
</table>
</section>
<section class="actions">
<a href="#kontak">Hubungi Saya</a>
</section>
</article>
</main>
</body>
</html>
Cara Membuat Website Biodata
- Siapkan folder proyek dan buat berkas
biodata.html. Kalian boleh menambahkan folderimguntuk menyimpan foto profil. - Tulis struktur dasar HTML berisi
<!DOCTYPE html>,<html>,<head>,<body>, lalu aktifkan meta viewport agar responsif di ponsel. - Buat bagian header untuk judul, lalu susun elemen profil menggunakan
<section>agar semantik jelas dan mudah dipelihara. - Tempatkan foto dengan
<img>dan isialtyang deskriptif untuk aksesibilitas sekaligus SEO gambar. - Susun detail biodata di
<table>agar rata dan mudah dipindai. Gunakan baris berbeda untuk tiap informasi penting. - Tambahkan gaya sederhana di
<style>agar tampilan rapi, gunakan radius, bayangan, dan media query untuk antarmuka yang ramah. - Terakhir, uji di berbagai ukuran layar dan cek tautan email serta telepon berfungsi.
Tips Tampilan & SEO
- Pakai judul halaman yang mengandung kata kunci, misalnya “Biodata [Nama] – Web Developer”.
- Isi atribut
meta descriptiondengan ringkasan yang natural dan mengandung kata kunci utama. - Gunakan heading berurutan (
h1untuk judul, kemudianh2) agar struktur mudah dipahami crawler. - Optimalkan ukuran gambar agar halaman cepat dimuat di jaringan seluler.
- Pastikan kontras warna cukup dan ukuran teks nyaman dibaca untuk meningkatkan pengalaman pengguna.
Baca Juga:
Membuat Navbar Responsive dengan HTML dan CSS
Kesimpulan
Contoh Coding HTML Website Biodata, Dan Cara Membuatnya dapat direalisasikan dengan struktur semantik yang rapi, CSS ringan, serta perhatian pada responsivitas dan SEO. Dengan template di atas, kalian bisa langsung memublikasikan profil pribadi yang profesional sekaligus mudah dikembangkan.
Sekian artikel dari kodelyly.com, semoga bermanfaat dan selamat mencoba! Jika ada bagian yang ingin kalian kustom, beri tahu ya.