Script HTML Biodata Sederhana

Diposting Dylan Daniswara Santosa, S.Kom.

Biodata adalah alat efektif dalam memperkenalkan diri, baik dalam lingkungan pribadi maupun profesional. Di era digital saat ini, membuat biodata dalam format online atau digital bisa memberikan sentuhan kreatif dan modern pada cara kita mempresentasikan diri. Dalam kesempatan ini akan membahas cara menciptakan biodata sederhana dengan menggunakan kode HTML.

Alasan Menggunakan Format HTML untuk Biodata

Menyusun biodata dengan kode HTML memiliki sejumlah kelebihan. Pertama, kita memiliki kendali penuh terhadap tampilan dan desain biodata. Warna, tata letak, dan elemen visual lainnya bisa disesuaikan dengan kepribadian dan preferensi masing-masing. Kedua, biodata dalam format HTML mudah untuk dishare secara online melalui tautan atau diunggah ke situs pribadi, memberikan kesan profesional dan modern kepada mereka yang ingin lebih mengenal kita.

Panduan Membuat Biodata Sederhana dengan Kode HTML

Berikut adalah langkah-langkah untuk membuat biodata menarik menggunakan kode HTML:

1. Memulai dengan Struktur Dasar HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Biodata Sederhana</title>
    <link rel="stylesheet" href="styles.css"> <!-- Opsional: gunakan stylesheet untuk styling -->
</head>
<body>
    <!-- Bagian konten biodata akan ditempatkan di sini -->
</body>
</html>

2. Menambahkan Informasi Pribadi

Masukkan elemen-elemen seperti foto profil, nama, pekerjaan, serta informasi kontak.

<div class="profile">
    <img src="foto-profil.jpg" alt="Foto Profil">
    <h1>Dylan Daniswara Santosa</h1>
    <p>Mahasiswa</p>
    <p>Email: contact@dylanpedia.com</p>
    <p>Telepon: 088211273148</p>
</div>

3. Sertakan Deskripsi Diri

Tambahkan deskripsi singkat mengenai diri kita.

<div class="description">
    <h2>Profil Singkat</h2>
    <p>Saya adalah individu yang antusias terhadap teknologi, senang menciptakan solusi kreatif untuk masalah yang rumit.</p>
</div>

4. Daftar Keahlian atau Prestasi

Jika kita memiliki keahlian atau pencapaian khusus, tampilkan melalui elemen daftar.

<div class="skills">
    <h2>Keahlian</h2>
    <ul>
        <li>Pengembangan Web</li>
        <li>Desain Grafis</li>
        <li>Problem Solving Kreatif</li>
    </ul>
</div>

5. Tampilkan Riwayat Pendidikan dan Pengalaman Kerja

Menampikan riwayat pendidikan dan pengalaman kerja kita.

<div class="experience">
    <h2>Riwayat Pendidikan</h2>
    <p>Gelar Sarjana Teknik Informatika - Universitas Indraprasta PGRI (2022-2023)</p>
</div>
<div class="experience">
    <h2>Pengalaman Kerja</h2>
    <p>Web Developer di PT Milik Sendiri (2023-Sekarang)</p>
</div>

6. Gaya Tampilan dengan CSS (Opsional)

Apabila ingin menambahkan sentuhan desain, gunakan CSS untuk styling. Buatlah file styles.css terpisah dan sambungkan seperti dijelaskan pada langkah pertama.

/* Contoh gaya dasar */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

.profile img {
    width: 150px;
    border-radius: 50%;
}

.profile h1 {
    margin: 10px 0;
}

/* Tambahkan gaya lain sesuai selera */

Kesimpulan

Membuat biodata sederhana dengan kode HTML adalah metode menarik untuk mempresentasikan diri secara online. Kita bisa menyesuaikan tampilan dan desain sesuai dengan preferensi kita, dan menambahkan elemen-elemen kreatif untuk memberikan kesan profesional. Tetap perhatikan tata letak yang teratur dan mudah dibaca, dan masukkan informasi yang akurat serta relevan tentang diri kita.

Widget HTML #1