Kalau Sahabat Qwords lagi ingin punya web profil pribadi yang clean, estetik, dan sangat menggambarkan personamu, membuat skrip HTML biodata diri adalah langkah awal yang bisa dilakukan.
Kabar baiknya, kamu tidak perlu menjadi programmer dulu untuk bisa membuat script HTML biodata diri.
Dengan memahami struktur dasar HTML seperti <html>, <body>, <h1>, dan <h2>, kamu sudah bisa membuat contoh website pribadi sederhana hanya dengan Notepad dan file .html.
Nah, di artikel kali ini kita akan ulas 10 contoh coding HTML biodata diri yang sudah jadi, tinggal copy-paste, edit sedikit, dan langsung bisa kamu gunakan!
Cara Membuat Biodata di HTML
HTML sendiri adalah bahasa markup untuk membangun struktur halaman web. Jadi kamu bisa langsung membuat biodata HTML dengan mengikuti langkah berikut ini.
Berikut ini alur membuat biodata di HTML:
- Pertama, buka Notepad atau VS Code
- Buat file baru, lalu simpan sebagai biodata.html
- Masukkan struktur HTML dasar
- Jalankan di browser
10 Contoh Script HTML Biodata Diri
1. Script HTML Biodata Paling Sederhana
<!DOCTYPE html>
<html>
<head>
<title>Biodata Saya</title>
</head>
<body>
<h1>Biodata Diri</h1>
<p>Nama: Kamu</p>
<p>Umur: 20 Tahun</p>
<p>Alamat: Jakarta</p>
</body>
</html>
Script ini cocok untuk pemula yang baru belajar coding HTML biodata diri.
2. Contoh HTML Biodata dengan Heading Rapi
<h1>Biodata Saya</h1>
<h2>Informasi Pribadi</h2>
<p>Nama: Kamu</p>
<p>Email: kamu@email.com</p>
Menggunakan tag <h1> dan <h2> bisa membuat struktur biodatanya lebih SEO-friendly dan clean.
3. Biodata dengan List
<ul>
<li>Nama: Kamu</li>
<li>Hobi: Membaca</li>
<li>Skill: Writing</li>
</ul>
Script satu ini cocok untuk web profil pribadi minimalis.
4. Biodata dengan Tabel
<table border=”1″>
<tr>
<td>Nama</td>
<td>Kamu</td>
</tr>
<tr>
<td>Umur</td>
<td>20</td>
</tr>
</table>
Ini adalah contoh tabel biodata klasik yang masih sering dipakai.
5. Biodata Tanpa Tabel
<p><b>Nama:</b> Kamu</p>
<p><b>Jurusan:</b> Informatika</p>
Lebih modern dibanding tabel.
6. Biodata dengan Foto
<img src=”foto.jpg” width=”150″>
<p>Nama: Kamu</p>
Tambahkan foto supaya situsmu terasa seperti website profil pribadi profesional.
7. Biodata dengan CSS
<style>
body {
font-family: Arial;
background-color: #f4f4f4;
}
</style>
CSS ini bisa membuat tampilan biodetamu lebih stylish dan premium.
8. Template Biodata Card Style
<div style=”border:1px solid #ccc; padding:20px; width:300px;”>
<h2>Kamu</h2>
<p>Content Writer</p>
</div>
Script ini sudah masuk kategori contoh web pribadi modern.
9. Biodata dengan Link Sosial Media
<a href=”https://instagram.com”>Instagram</a>
Kode ini penting untuk personal branding kamu, terutama yang ingin menghubungkannya dengan media sosial yang dimiliki.
10. Contoh Coding HTML Website Biodata Lengkap
<!DOCTYPE html>
<html>
<head>
<title>Biodata</title>
</head>
<body>
<h1>Biodata Saya</h1>
<h2>Informasi Pribadi</h2>
<p>Nama: Kamu</p>
<p>Alamat: Bandung</p>
<h2>Pendidikan</h2>
<ul>
<li>SMA</li>
<li>Kuliah</li>
</ul>
</body>
</html>
Html biodata ini sudah mencakup:
- Struktur dasar HTML
- Informasi pribadi
- Pendidikan
Tips Supaya Biodata HTML Kamu Makin Stand Out
- Gunakan CSS supaya tidak flat
- Tambahkan foto dan icon
- Gunakan warna yang estetik
- Buat versi PDF dari web kamu
- Upload jadi website dan bisa langsung dishare
Website biodata diri dengan HTML dan CSS adalah langkah awal untuk membangun personal brand digital kamu.
Dari 10 contoh di atas, kamu bisa mulai dari yang paling basic sampai yang lebih aesthetic sesuai value kamu.
Untuk hasil lebih maksimal, jangan lupa siapkan web hosting andal agar website biodata-mu tidak lemot saat diakses.
Dengan memilih layanan seperti Qwords, kamu bisa menikmati performa cepat berkat teknologi seperti LiteSpeed dan Ultrafast SSD, uptime stabil hingga 99,99%, serta dukungan teknis 24/7 yang siap membantu kapan pun kamu butuh.
Jangan sekadar punya website, tapi pastikan juga pengalaman pengunjungnya tetap lancar, profesional, dan premium persis seperti personal brand yang ingin kamu tampilkan.
Saatnya tampil profesional di dunia digital!
FAQ
Umumnya, biodata berisi: Nama lengkap, Alamat dan kontak, Pendidikan, Skill atau keahlian, Pengalaman (opsional), dan Foto. Informasi ini membantu membangun personal branding kamu secara digital.
Keduanya bisa digunakan, tergantung style yang kamu inginkan. Tabel cocok untuk tampilan klasik dan terstruktur. Sementara tampilan tanpa tabel punya kesan lebih modern, clean, dan fleksibel. Untuk kamu yang lebih suka tampilan estetik, tampilan tanpa tabel lebih baik.
HTML sudah cukup untuk membuat struktur dasar. Tapi kalau ingin tampilan lebih menarik, kamu bisa menambahkan CSS untuk styling dan membuat website terlihat lebih profesional.
