Cara Membuat Website Biodata Dengan HTML

by

Cara Membuat Website Biodata Dengan HTML – Dalam era digital seperti sekarang, biodata diri menjadi informasi penting untuk memperkenalkan diri kepada orang lain. Bagi yang memiliki keahlian dalam teknologi, membuat biodata diri dengan menggunakan HTML dan CSS dapat menjadi cara yang tepat untuk menunjukkan kecakapan dalam bidang tersebut.

Apa itu HTML dan CSS?

Sobat Tekno, HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) merupakan bahasa pemrograman yang digunakan untuk membangun dan mendesain halaman web. HTML berperan dalam menentukan struktur dan isi halaman web, sedangkan CSS digunakan untuk mengatur tampilan dan layout halaman tersebut.

Salah satu cara efektif untuk memahami konsep dasar HTML adalah melalui praktek langsung. Pembuatan biodata diri menjadi salah satu latihan yang baik dalam proses belajar ini. Sebelum memulai, pastikan Sobat Tekno sudah menyiapkan alat yang diperlukan.

Kamu hanya memerlukan text editor, seperti Notepad atau Sublime Text, dan web browser untuk melihat hasil dari kode yang akan kamu buat. Langsung saja tanpa berlama-lama dibawah ini TeknoTask akan memberikan kode yang bisa kamu pakai untuk membuat web biodata menggunakan HTML dan CSS.

Cara Membuat Website Biodata Dengan HTML dan CSS

1. Persiapkan Struktur Folder

Sobat Tekno, langkah pertama adalah membuat struktur folder untuk proyek website biodata. Struktur folder dapat dibuat seperti berikut:

Proyek Biodata

  • Foto
    – foto_profil.jpg
  • style.css
  • index.html

Untuk gambar foto profilnya, kamu bisa unduh disini.

2. Buat File HTML (index.html)

Buka Sublime Text dan buat file baru dengan nama index.html. Isi file tersebut dengan kode HTML dibawah ini, kode berikut yang akan membentuk dasar dari website biodata.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Biodata</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <div class="container">
        <img src="profil/profil.webp" alt="Foto Profil">
        <h1>Nama Lengkap</h1>
        <p>Deskripsi singkat tentang diri Anda.</p>
    </div>
</header>

<section class="content">
    <div class="container">
        <h2>Profil</h2>
        <p><strong>Tempat, Tanggal Lahir:</strong> Kota, DD/MM/YYYY</p>
        <p><strong>Alamat:</strong> Alamat lengkap Anda</p>
        <p><strong>Email:</strong> [email protected]</p>
        <p><strong>Telepon:</strong> (123) 456-7890</p>
    </div>
</section>

<section class="skills">
    <div class="container">
        <h2>Keterampilan</h2>
        <ul>
            <li>Keterampilan 1</li>
            <li>Keterampilan 2</li>
            <li>Keterampilan 3</li>
        </ul>
    </div>
</section>

<footer>
    <div class="container">
        <p>© 2024 Nama Anda. Hak Cipta Dilindungi.</p>
    </div>
</footer>

</body>
</html>

3. Buat File CSS (style.css)

Buat file baru dengan nama style.css dalam folder proyek. File ini akan berisi kode CSS dibawah ini, kode berikut yang akan mendesain tampilan dari website biodatamu.

<style type="text/css">
    body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 50px 0;
}

header img {
    border-radius: 50%;
    max-width: 150px;
    margin-bottom: 20px;
}

h1 {
    font-size: 2em;
    margin-bottom: 10px;
}

.content, .skills {
    background-color: #ecf0f1;
    padding: 40px 0;
}

.content h2, .skills h2 {
    color: #3498db;
}

footer {
    background-color: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

</style>

4. Jalankan Kode

Buka file index.html menggunakan Sublime Text. Klik kanan di dalam file dan pilih “Open in Browser” untuk melihat hasilnya menggunakan browser default.

Artikel Terkait:   Cara Membuat Web Berita Dengan HTML dan CSS

5. Tampilkan Website

Dengan langkah-langkah ini, Sobat Tekno seharusnya sudah dapat membuat website biodata sederhana dengan HTML dan CSS menggunakan Sublime Text. Selanjutnya, sesuaikan konten dan desain sesuai kebutuhan dan preferensi pribadimu.

Akhir Kata

Dari sekian banyaknya melalui langkah-langkah sederhana untuk membuat web HTML dan CSS diatas, kini kamu bisa mengeksplorasi keunikan diri melalui website biodata yang menarik dan personal. Meskipun menggunakan HTML sebagai dasar, tidak perlu khawatir jika belum mahir dalam pemrograman.