Persiapan
Sebelum memulai coding HTML untuk membuat website biodata, ada beberapa persiapan yang perlu dilakukan:
1. Menyiapkan Editor Teks Favorit Anda
Anda dapat menggunakan editor teks sederhana seperti Notepad atau menggunakan editor khusus HTML seperti Visual Studio Code atau Sublime Text.
2. Membuat Folder Proyek
Buat folder khusus untuk proyek website biodata Anda. Di dalam folder tersebut, buat file dengan ekstensi .html untuk menyimpan kode HTML.
Langkah-langkah Membuat Website Biodata dengan HTML
1. Struktur Dasar HTML
Mulailah dengan menambahkan struktur dasar HTML pada file Anda dengan menggunakan tag <html>, <head>, dan <body>. Ini akan menjadi kerangka dasar dari halaman website.2. Menambahkan Judul Halaman
Gunakan tag <h1> atau <h2> untuk menambahkan judul halaman biodata Anda.
<!DOCTYPE html> <html> <head> <title>Biodata Saya</title> </head> <body> <!-- Isi halaman website --> </body> </html>
2. Menambahkan Judul Halaman
Gunakan tag <h1> atau <h2> untuk menambahkan judul halaman biodata Anda.
<body> <h1>Biodata Saya</h1> <!-- Isi halaman website --> </body>
3. Informasi Pribadi
Tambahkan informasi pribadi Anda seperti nama, alamat, tanggal lahir, atau nomor telepon menggunakan tag <p> atau tag <ul> dan <li> untuk daftar.
<body> <h1>Biodata Saya</h1> <h2>Informasi Pribadi</h2> <p>Nama: John Doe</p> <p>Alamat: Jl. Contoh No. 123</p> <p>Tanggal Lahir: 1 Januari 2000</p> <p>Nomor Telepon: 081234567890</p> </body>
4. Pendidikan
Tambahkan informasi tentang pendidikan Anda menggunakan tag <ul> dan <li>.
<body> <h1>Biodata Saya</h1> <h2>Informasi Pribadi</h2> <!-- Informasi pribadi di sini --> <h2>Pendidikan</h2> <ul> <li>SD XYZ</li> <li>SMP ABC</li> <li>SMA DEF</li> <li>Universitas GHI</li> </ul> </body>
5. Pengalaman Kerja
Tambahkan informasi tentang pengalaman kerja Anda menggunakan tag <ul> dan <li>.
<body> <h1>Biodata Saya</h1> <h2>Informasi Pribadi</h2> <!-- Informasi pribadi di sini --> <h2>Pendidikan</h2> <!-- Informasi pendidikan di sini --> <h2>Pengalaman Kerja</h2> <ul> <li>Perusahaan ABC (2018-2020)</li> <li>Perusahaan XYZ (2020-sekarang)</li> </ul> </body>
6. Minat dan Hobi
Tambahkan informasi tentang minat dan hobi Anda menggunakan tag <p> atau tag <ul> dan <li>.
<body> <h1>Biodata Saya</h1> <h2>Informasi Pribadi</h2> <!-- Informasi pribadi di sini --> <h2>Pendidikan</h2> <!-- Informasi pendidikan di sini --> <h2>Pengalaman Kerja</h2> <ul> <li>Perusahaan ABC (2018-2020)</li> <li>Perusahaan XYZ (2020-sekarang)</li> </ul> </body>
Gabungan Semua Kode HTML
Berikut jika kode-kode di atas kita jadikan dalam satu file.
<!DOCTYPE html>
<html>
<head>
<title>Biodata Saya</title>
<style>
/* Gaya CSS */
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
ul {
list-style-type: disc;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>Biodata Saya</h1>
<h2>Informasi Pribadi</h2>
<p>Nama: John Doe</p>
<p>Alamat: Jl. Contoh No. 123</p>
<p>Tanggal Lahir: 1 Januari 2000</p>
<p>Nomor Telepon: 081234567890</p>
<h2>Pendidikan</h2>
<ul>
<li>SD XYZ</li>
<li>SMP ABC</li>
<li>SMA DEF</li>
<li>Universitas GHI</li>
</ul>
<h2>Pengalaman Kerja</h2>
<ul>
<li>Perusahaan ABC (2018-2020)</li>
<li>Perusahaan XYZ (2020-sekarang)</li>
</ul>
<h2>Minat dan Hobi</h2>
<ul>
<li>Berenang</li>
<li>Membaca buku</li>
<li>Mendengarkan musik</li>
</ul>
</body>
</html>Hasilnya adalah :
Tambahkan CSS Agar Lebih Menarik
Dari gambar di atas kita melihat hasilnya masih sangat sederhana. Supaya lebih menarik dan berwarna kita bisa tambahkan kode-kode CSS. Berikut penambahan kodenya.
<!DOCTYPE html>
<html>
<head>
<title>Biodata Saya</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
padding-top: 30px;
}
h2 {
color: #666;
margin-top: 30px;
}
p {
color: #777;
line-height: 1.5;
}
ul {
list-style-type: disc;
margin-left: 20px;
color: #777;
}
li {
margin-bottom: 10px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Warna-warna tambahan */
.bg-blue {
background-color: #3498db;
color: #fff;
padding: 10px;
margin-bottom: 20px;
}
.bg-green {
background-color: #2ecc71;
color: #fff;
padding: 10px;
margin-bottom: 20px;
}
.bg-orange {
background-color: #e67e22;
color: #fff;
padding: 10px;
margin-bottom: 20px;
}
.bg-purple {
background-color: #9b59b6;
color: #fff;
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="bg-blue">Biodata Saya</h1>
<h2 class="bg-green">Informasi Pribadi</h2>
<p>Nama: John Doe</p>
<p>Alamat: Jl. Contoh No. 123</p>
<p>Tanggal Lahir: 1 Januari 2000</p>
<p>Nomor Telepon: 081234567890</p>
<h2 class="bg-orange">Pendidikan</h2>
<ul>
<li>SD XYZ</li>
<li>SMP ABC</li>
<li>SMA DEF</li>
<li>Universitas GHI</li>
</ul>
<h2 class="bg-purple">Pengalaman Kerja</h2>
<ul>
<li>Perusahaan ABC (2018-2020)</li>
<li>Perusahaan XYZ (2020-sekarang)</li>
</ul>
<h2 class="bg-blue">Minat dan Hobi</h2>
<ul>
<li>Berenang</li>
<li>Membaca buku</li>
<li>Mendengarkan musik</li>
</ul>
</div>
</body>
</html>Kode CSS di atas akan memberikan beberapa gaya tambahan pada elemen-elemen dalam website biodata, seperti warna teks, margin, padding, dan tata letak. Selain itu, elemen <div> dengan kelas .container digunakan untuk mengatur lebar maksimum konten dan memberikan efek bayangan pada kontainer. Simpan file dengan ekstensi .html dan buka dalam peramban web untuk melihat tampilan website biodata yang telah diperbarui dengan gaya yang lebih menarik.
Dalam kode CSS di atas juga, warna tambahan telah ditambahkan menggunakan kelas seperti .bg-blue, .bg-green, .bg-orange, dan .bg-purple. Kode ini memberikan latar belakang dengan warna yang cerah pada elemen-elemen seperti judul halaman dan bagian-bagian penting dalam biodata. Simpan file dengan ekstensi .html dan buka dalam peramban web untuk melihat tampilan website biodata yang telah diperbarui dengan tampilan yang lebih berwarna.
Maka hasilnya adalah :
No comments:
Post a Comment