Blog

Web Development

10 Cara Membuat Biodata di HTML Mudah untuk Pemula

Irhan Hisyam Dwi Nugroho

•

21 September 2023

•

32733

Catatan Redaksi:

Artikel ini pertama kali diterbitkan pada September 2023 dan diperbarui pada 17 April 2025 untuk memastikan informasi tetap akurat dan relevan.

Cara Membuat Biodata di HTML bisa jadi tantangan, Warga Bimbingan, apalagi kalau kamu baru belajar HTML. Bingung mulai dari mana atau harus menulis apa?

Tanpa keterampilan ini, kamu akan kesulitan membuat biodata digital yang menarik dan profesional untuk portofolio atau lamaran kerja. Jangan biarkan kesempatan terlewat hanya karena tidak tahu caranya!

MinDi di sini untuk membantu! Di artikel ini, kamu akan belajar 10 cara membuat biodata di HTML yang mudah dan cocok untuk pemula. Yuk, simak!

Cara Membuat Biodata di HTML untuk Pemula

Warga Bimbingan, siap belajar cara membuat biodata di HTML? MinDi akan bantu kamu dengan 10 langkah sederhana untuk memulai!

1. Persiapan

Sebelum mulai membuat biodata di HTML, hal pertama yang perlu kamu lakukan adalah menentukan elemen-elemen apa saja yang ingin dimasukkan.

Pastikan kamu memiliki informasi lengkap yang akan ditampilkan, seperti nama, foto profil, pendidikan, pengalaman kerja, keterampilan, dan lainnya.

Persiapan ini sangat penting agar ketika menulis kode HTML, kamu tahu dengan jelas bagian mana yang harus disusun terlebih dahulu dan informasi apa saja yang perlu dimasukkan.

Persiapan yang perlu dilakukan:

Tentukan elemen yang ingin dimasukkan: nama, alamat, kontak, dan lainnya.
Siapkan foto profil dengan ukuran yang sesuai.
Kumpulkan data pendidikan dan pengalaman kerja.
Siapkan link sosial media dan keterampilan yang relevan.

2. Membuat Struktur Dasar HTML

Langkah pertama dalam membuat biodata di HTML adalah menyiapkan struktur dasar HTML. Struktur ini adalah pondasi yang akan menampung seluruh konten biodata kamu.

Dimulai dengan tag HTML yang mengatur seluruh halaman, kemudian bagian <head> untuk metadata dan judul, serta bagian <body> untuk konten utama yang akan ditampilkan di halaman.

Dengan struktur dasar ini, kamu akan memiliki kerangka yang rapi untuk menambahkan elemen-elemen lainnya.

<!DOCTYPE html>

<head>

<title>Biodata Saya</title>

</head>

<body>

</body>

</html>

Penjelasan Struktur Dasar HTML:

<!DOCTYPE html>: Menyatakan bahwa ini adalah dokumen HTML5.
<head>: Bagian untuk metadata, termasuk pengaturan charset dan judul halaman.
<title>Biodata Saya</title>: Menentukan judul halaman yang muncul di tab browser.
<body>: Bagian utama untuk menempatkan konten yang akan ditampilkan di halaman web.

3. Menambahkan Informasi Pribadi

Setelah membuat struktur dasar HTML, langkah selanjutnya adalah menambahkan informasi pribadi seperti nama, alamat, nomor telepon, dan email.

Gunakan tag <p> atau <div> untuk menampilkan informasi ini dengan rapi. Bagian ini sangat penting agar biodata kamu memberikan gambaran jelas tentang siapa kamu.

<p><strong>Alamat:</strong> Jl. Contoh No. 123, Jakarta</p>

<p><strong>Nomor Telepon:</strong> +62 812-3456-7890</p>

<p><strong>Email:</strong> johndoe@example.com</p>

Penjelasan Codingan:

<p>: Digunakan untuk menampilkan teks dalam paragraf.
<strong>: Menebalkan teks untuk memberi penekanan pada label seperti “Nama”, “Alamat”, dan lainnya.
Konten dalam <p>: Menampilkan informasi pribadi yang relevan, seperti nama, alamat, nomor telepon, dan email.

4. Menambahkan Foto Profil

Menambahkan foto profil adalah langkah berikutnya dalam membuat biodata di HTML. Foto ini memberikan sentuhan personal dan profesional pada halaman biodata kamu.

Gunakan tag <img> untuk menampilkan gambar profil, dan pastikan gambar yang digunakan memiliki ukuran yang sesuai agar tampilan lebih menarik.

Penjelasan Codingan:

<img>: Tag yang digunakan untuk menampilkan gambar pada halaman HTML.
src="foto-profil.jpg": Atribut src digunakan untuk menentukan lokasi gambar. Gantilah dengan URL gambar yang sesuai.
alt="Foto Profil": Atribut alt digunakan untuk memberikan teks alternatif jika gambar gagal dimuat atau untuk aksesibilitas.
width="150" height="150": Menentukan ukuran gambar, memastikan foto profil ditampilkan dengan ukuran yang proporsional.

5. Menambahkan Pendidikan

Sumber: Canva

Bagian pendidikan sangat penting dalam biodata karena menunjukkan latar belakang pendidikan yang dimiliki.

Gunakan tag <ul> dan <li> untuk membuat daftar pendidikan dengan menyebutkan nama sekolah, universitas, dan tahun kelulusan. Ini memberikan gambaran tentang perjalanan akademik kamu.

<h2>Pendidikan</h2>

<ul>

<li>Universitas ABC - Sarjana Teknik Informatika (2020)</li>

<li>SMA Negeri 1 Jakarta - IPA (2016)</li>

</ul>

6. Menambahkan Pengalaman Kerja

Pengalaman kerja menggambarkan keahlian praktis yang dimiliki dan kontribusi yang telah diberikan dalam pekerjaan sebelumnya.

Gunakan tag <ul> dan <li> untuk membuat daftar pengalaman kerja yang mencakup posisi, perusahaan, dan durasi kerja. Ini memberikan informasi lebih lanjut mengenai kredibilitas kamu.

<h2>Pengalaman Kerja</h2>

<ul>

<li>Web Developer - PT Teknologi Digital (2021 - Sekarang)</li>

<li>Internship - ABC Corp (2020 - 2021)</li>

</ul>

7. Menambahkan Keterampilan

Sertakan keterampilan yang relevan dengan pekerjaan atau bidang yang kamu tekuni.

Keterampilan ini dapat meliputi kemampuan dalam teknologi tertentu, bahasa pemrograman, atau keahlian lainnya. Gunakan tag <ul> dan <li> untuk menampilkan keterampilan yang dimiliki.

<h2>Keterampilan</h2>

<ul>

<li>HTML, CSS, JavaScript</li>

<li>PHP, MySQL</li>

<li>WordPress, React</li>

</ul>

8. Menambahkan Tautan Sosial Media

Jika kamu memiliki akun sosial media profesional, seperti LinkedIn, GitHub, atau Instagram, tambahkan tautannya di biodata kamu.

Gunakan tag <a> untuk membuat tautan ke akun sosial media. Ini membantu orang lain untuk lebih mengenal kamu secara online.

<h2>Sosial Media</h2>

<ul>

<li><a href="https://linkedin.com/in/johndoe" target="_blank">LinkedIn</a></li>

<li><a href="https://github.com/johndoe" target="_blank">GitHub</a></li>

<li><a href="https://instagram.com/johndoe" target="_blank">Instagram</a></li>

</ul>

9. Menyusun dan Menata Halaman dengan CSS

Setelah menambahkan semua informasi, sekarang saatnya menata dan mempercantik tampilan biodata menggunakan CSS.

CSS (Cascading Style Sheets) memungkinkan kamu untuk mengatur warna, margin, font, dan layout halaman agar lebih menarik dan responsif.

Dengan menambahkan beberapa aturan CSS, halaman biodata akan terlihat lebih rapi dan profesional.

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

background-color: #f9f9f9;

}

.container {

max-width: 800px;

margin: auto;

background-color: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}

h1 {

text-align: center;

color: #333;

}

h2 {

font-size: 1.5em;

margin-top: 20px;

color: #555;

}

ul {

list-style-type: none;

padding-left: 0;

}

li {

margin-bottom: 8px;

}

a {

color: #007bff;

text-decoration: none;

}

</style>

10. Contoh Biodata dengan Kodingan Lengkap

Untuk membuat biodata di HTML, Warga Bimbingan, kamu dapat mengikuti langkah-langkah yang sudah dijelaskan.

Agar lebih mudah, kamu bisa mengunduh contoh kode lengkap yang telah disiapkan. Kode ini sudah mencakup semua elemen penting seperti informasi pribadi, foto profil, pendidikan, pengalaman kerja, keterampilan, dan tautan sosial media.

Kamu bisa mengunduhnya langsung di sini dan sesuaikan dengan data pribadimu.

Berikut adalah hasil compile dari kode tersebut ketika dibuka di browser:

Halaman biodata yang terstruktur rapi dan siap digunakan sebagai portofolio atau aplikasi pekerjaan!

Tingkatkan Kemampuan Web Developmentmu dengan Bootcamp di dibimbing.id!

Setelah belajar membuat biodata di HTML, Warga Bimbingan, saatnya melangkah lebih jauh dan menguasai keterampilan pengembangan web secara profesional!

Di Bootcamp Web Developer dibimbing.id, kamu akan belajar dari mentor berpengalaman dan mempelajari berbagai teknologi web, termasuk HTML, CSS, JavaScript, dan framework populer lainnya.

Dengan kurikulum aplikatif dan praktis, serta kesempatan untuk membangun portofolio yang menarik, kamu akan siap memasuki dunia kerja di bidang pengembangan web.

Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 95%, peluang kariermu di dunia IT semakin terbuka lebar!

Jadi, tunggu apa lagi? Daftar sekarang di sini dan mulai perjalananmu menjadi seorang Web Developer profesional! #BimbingSampeJadi!

Referensi

HTML: HyperText Markup Language [Buka]