Contoh Coding HTML Website Biodata Sederhana memberikan panduan praktis membangun situs web biodata personal yang menarik dan informatif. Artikel ini akan memandu Anda langkah demi langkah, mulai dari kerangka dasar HTML hingga penambahan konten, styling dengan CSS internal, penggunaan gambar dan link, dan validasi kode. Dengan mengikuti tutorial ini, Anda akan mampu membuat biodata online yang profesional dan mudah diakses.
Pembuatan website biodata dengan HTML kini semakin mudah. Melalui pemahaman dasar HTML, CSS, dan sedikit trik, Anda dapat membangun situs web yang representatif dan memikat calon pemberi kerja atau klien. Artikel ini akan mengupas tuntas setiap tahapan, dari struktur dasar hingga optimasi tampilan responsif, sehingga Anda dapat dengan percaya diri membangun website biodata Anda sendiri.
Membangun Website Biodata dengan HTML: Contoh Coding Html Website Biodata
Membuat website biodata dengan HTML merupakan langkah awal yang baik untuk membangun portofolio online. Artikel ini akan memandu Anda melalui proses pembuatan website biodata sederhana, mulai dari struktur dasar HTML hingga penambahan gaya dengan CSS internal dan validasi kode. Kita akan membangun website yang responsif dan mudah dipahami.
Struktur Dasar Website Biodata HTML
Kerangka dasar HTML untuk website biodata meliputi bagian `
` yang berisi metadata dan informasi tentang halaman, serta bagian `` yang berisi konten yang akan ditampilkan kepada pengguna. Elemen-elemen HTML utama yang dibutuhkan meliputi `
` untuk judul utama, `
` untuk paragraf teks, `![]()
` untuk menampilkan gambar, `
` dan `
` untuk pengelompokan dan styling konten, serta `
` untuk menampilkan data dalam format tabel. Berikut contoh kerangka dasar:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biodata Saya</title>
<style>
/* Style CSS akan diletakkan di sini
-/
</style>
</head>
<body>
<div class="container">
<h1>Nama Lengkap</h1>
<p>Informasi singkat tentang diri Anda.</p>
<img src="foto_profil.jpg" alt="Foto Profil" />
<table>
<thead>
<tr>
<th>Pendidikan</th>
<th>Pengalaman Kerja</th>
<tr>
</thead>
<tbody>
<tr>
<td>Sekolah Dasar</td>
<td>Perusahaan A</td>
<tr>
</tbody>
</table>
</div>
</body>
</html>
Tabel di atas dapat dimodifikasi dengan atribut `colspan` dan `rowspan` untuk mengatur rentang kolom dan baris. Penggunaan `div` dan `span` memungkinkan pengelompokan dan penambahan style spesifik pada bagian-bagian tertentu. Contoh penggunaan CSS inline untuk mengatur style dasar: `
Paragraf berwarna biru
`.
Penambahan Konten Biodata
Setelah kerangka dasar website terbangun, selanjutnya adalah menambahkan konten biodata. Bagian foto profil menggunakan tag ` ![]()
` dengan atribut `src` untuk menentukan lokasi gambar dan `alt` untuk memberikan deskripsi alternatif jika gambar tidak dapat ditampilkan. Informasi kontak seperti nama lengkap, alamat email, dan nomor telepon dapat ditampilkan menggunakan tag `
` atau elemen HTML lainnya. Pendidikan dan pengalaman kerja dapat disajikan secara terstruktur menggunakan tag `
` atau `
` untuk daftar poin dan `
` untuk tabel. Keahlian dan minat juga dapat ditampilkan dengan cara yang sama.
Contoh:
<img src="foto_profil.jpg" alt="Foto profil saya">
<p>Nama: John Doe</p>
<p>Email: [email protected]</p>
<ul>
<li>Pendidikan 1</li>
<li>Pendidikan 2</li>
</ul>
<table>
<tr>
<th>Perusahaan</th>
<th>Posisi</th>
</tr>
<tr>
<td>Perusahaan A</td>
<td>Posisi A</td>
</tr>
</table>
Styling dengan CSS Internal, Contoh Coding Html Website Biodata
CSS internal, ditempatkan di dalam tag `
