Membuat halaman website sederhana untuk menampilkan biodata diri adalah cara yang bagus untuk memulai belajar HTML. Dengan membuat website biodata, kamu bisa memperkenalkan diri secara online, baik untuk keperluan profesional maupun personal. Artikel ini akan memandu kamu dari awal hingga akhir, mulai dari struktur dasar hingga contoh kode lengkap.
1. Struktur Dasar HTML
Setiap halaman web HTML memiliki struktur dasar yang sama. Kamu akan selalu menemukan deklarasi <!DOCTYPE html>, elemen <html>, <head>, dan <body>.
<!DOCTYPE html>: Deklarasi ini mendefinisikan versi HTML yang digunakan, dalam hal ini adalah HTML5.<html>: Elemen root yang membungkus semua konten di halaman.<head>: Bagian ini berisi metadata tentang halaman web, seperti judul halaman, charset, dan tautan ke file CSS. Konten di dalam<head>tidak ditampilkan di browser.<body>: Bagian ini berisi semua konten yang akan ditampilkan di halaman web, seperti teks, gambar, dan elemen lainnya.
2. Mempersiapkan File
Sebelum memulai coding, buatlah sebuah folder baru di komputer kamu, misalnya “Biodata”. Di dalam folder itu, buat file baru dengan nama index.html. File ini akan menjadi halaman utama website kamu.
3. Contoh Coding HTML Website Biodata
Berikut adalah contoh kode HTML lengkap untuk website biodata sederhana. Kamu bisa langsung menyalin dan menempelkan kode ini ke dalam file index.html yang sudah kamu buat.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biodata Diri Saya</title>
</head>
<body>
<header>
<h1>Profil Diri</h1>
</header>
<main>
<section>
<h2>Tentang Saya</h2>
<p>Halo! Nama saya **[Nama Lengkap Anda]**. Saya seorang mahasiswa [Jurusan] di [Nama Universitas]. Saya tertarik dengan dunia [Sebutkan Minat/Hobi Anda, contoh: desain grafis dan coding].</p>
<p>Saya lahir di [Kota Kelahiran] pada tanggal [Tanggal Lahir]. Saya memiliki impian untuk menjadi [Sebutkan Cita-Cita Anda, contoh: seorang Full Stack Developer yang handal].</p>
</section>
<section>
<h2>Informasi Kontak</h2>
<ul>
<li><strong>Email:</strong> <a href="mailto:nama.anda@email.com">nama.anda@email.com</a></li>
<li><strong>Telepon:</strong> [Nomor Telepon Anda]</li>
<li><strong>Alamat:</strong> [Alamat Lengkap Anda]</li>
<li><strong>LinkedIn:</strong> <a href="https://id.linkedin.com/company/andainc/">linkedin.com/in/nama-anda</a></li>
</ul>
</section>
<section>
<h2>Pendidikan</h2>
<table border="1">
<thead>
<tr>
<th>Tahun</th>
<th>Institusi</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018 - 2021</td>
<td>[Nama Sekolah Menengah Atas]</td>
<td>[Jurusan SMA]</td>
</tr>
<tr>
<td>2021 - Sekarang</td>
<td>[Nama Universitas]</td>
<td>[Jurusan Universitas]</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Hobi dan Minat</h2>
<p>Di waktu luang, saya senang melakukan berbagai aktivitas. Beberapa hobi saya antara lain:</p>
<ul>
<li>Membaca buku fiksi ilmiah.</li>
<li>Bermain alat musik [Sebutkan Alat Musik].</li>
<li>Menjelajahi alam dan hiking.</li>
</ul>
<p>Selain itu, saya juga aktif dalam komunitas [Sebutkan Nama Komunitas atau Organisasi].</p>
</section>
</main>
<footer>
<p>Hak Cipta © 2025 Nama Anda. Semua Hak Dilindungi.</p>
</footer>
</body>
</html>
4. Menjelaskan Elemen HTML yang Digunakan
<header>: Digunakan untuk menampung konten pembuka, seperti judul utama halaman.-
<main>: Elemen ini menampung konten utama dari dokumen. -
<section>: Digunakan untuk mengelompokkan konten yang berhubungan. Dalam contoh ini, setiap bagian biodata (Tentang Saya, Kontak, Pendidikan) berada di dalam elemen<section>yang terpisah. <h1>,<h2>: Elemen heading yang digunakan untuk judul dan subjudul.<h1>adalah judul paling penting, dan<h2>adalah subjudul.<p>: Digunakan untuk paragraf teks.<ul>dan<li>:<ul>adalah unordered list (daftar tanpa nomor), dan<li>adalah list item (item dalam daftar). Cocok untuk daftar hobi atau kontak.<ol>dan<li>:<ol>adalah ordered list (daftar dengan nomor), cocok untuk urutan, atau instruksi.<a>: Elemen anchor untuk membuat hyperlink. Atributhrefdigunakan untuk menentukan URL tujuan.<strong>: Untuk menebalkan teks yang memiliki kepentingan.<table>,<thead>,<tbody>,<tr>,<th>,<td>: Elemen-elemen ini digunakan untuk membuat tabel.<table>adalah container utama,<thead>untuk bagian header tabel,<tbody>untuk isi tabel,<tr>untuk baris,<th>untuk header kolom, dan<td>untuk sel data.<footer>: Digunakan untuk bagian paling bawah halaman, biasanya berisi informasi hak cipta atau tautan penting.
5. Cara Mengubah dan Menjalankan Kode
- Buka file
index.html: Setelah kamu menyimpan kode di atas, cukup buka fileindex.htmlmenggunakan browser web (seperti Google Chrome atau Mozilla Firefox). - Ubah konten: Ganti teks yang berada di dalam tanda kurung siku
[ ]dengan data diri kamu yang sebenarnya. - Simpan dan Muat Ulang: Setelah melakukan perubahan, jangan lupa untuk menyimpan file dan muat ulang (refresh) halaman di browser untuk melihat hasilnya.
Dengan mengikuti langkah-langkah di atas, kamu sudah bisa membuat website biodata sederhana dan mulai memahami dasar-dasar coding HTML. Selamat mencoba!
