Contoh Coding HTML Website Biodata, Dan Cara Membuatnya

admin

03 July 2026, 23:07 WIB

Daftar Isi

Membuat Website Biodata Dengan HTML dan CSS
Contoh Coding HTML Website Biodata
Menyiapkan File Gambar Untuk Foto
Desain Halaman Website Dengan CSS
Penjelasan
Membuat Website Responsive
Penutup

Dari semua tutorial dasar HTML yang telah teman-teman pelajari di malasngoding.com, teman-teman bisa mencoba membuat halaman website sederhana untuk latihan.

Pada tutorial ini saya akan membuatkan contoh website sederhana yang akan kita buat hanya menggunakan HTML dan CSS.

Tampilan website biodata yang kita buat ini memiliki tampilan yang simpel, sederhana, clean, moden. akan tetapi tetap responsive jika di buka dari smartphone atau tablet.

Teman-teman bisa mendownload source code website sederhana ini di akhir artikel setelah teman-teman membaca panduannya terlebih dulu.

Adapun contoh coding website HTML sederhana yang akan kita buat di sini adalah contoh coding HTML website biodata.

Membuat Website Biodata Dengan HTML dan CSS

Website biodata sederhana yang akan kita buat ini sangat cocok untuk studi kasus setelah teman-teman menyelesaikan tutorial HTML dasar di malasngoding.com

Karena isi dari halaman website biodata ini mencakup elemen HTML yang sudah kita bahas sebelumnya. diantaranya tutorial yang berkaitan adalah :

Menampilkan gambar dengan HTML
Mengatur text ke tengah Pada HTML dengan CSS
Membuat table dengan HTML
Membuat list dengan HTML
Desain halaman website dengan html CSS
Membuat tulisan tebal (bold) pada HTML
Membuat tulisan miring (italic) pada HTML

Yuk masuk ke materi

Contoh Coding HTML Website Biodata

Untuk memulai membuat halaman website biodata, silahkan siapkan folder proyek dengan nama “biodata-html“.

Kemudian buat sebuah file baru dengan nama index.html di dalamnya.

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Biodata Saya - www.malasngoding.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="kotak">

		<div class="judul">
			<h1>BIODATA DIRI</h1>
		</div>

		<div class="blok">

			<h2>Informasi</h2>			
			
			<div class="kiri">
				<img src="foto.jpg">				
			</div>

			<div class="kanan">
				<table>
					<tr>
						<th>Nama</th>
						<th>:</th>
						<td>Santono Sujatmiko</td>
					</tr>
					<tr>
						<th>Tempat</th>
						<th>:</th>
						<td>Medan</td>
					</tr>
					<tr>
						<th>Tgl.Lahir</th>
						<th>:</th>
						<td>15 September 1994</td>
					</tr>
					<tr>
						<th>Agama</th>
						<th>:</th>
						<td>Islam</td>
					</tr>
					<tr>
						<th>Alamat</th>
						<th>:</th>
						<td>Jl. Merpati Putih, No. 187, Blok - Cimahi, Bandung</td>
					</tr>
					<tr>
						<th>Email</th>
						<th>:</th>
						<td>[email protected]</td>
					</tr>
					<tr>
						<th>No.HP</th>
						<th>:</th>
						<td>+62812-3456-7890</td>
					</tr>
					<tr>
						<th>Website</th>
						<th>:</th>
						<td><a href="https://www.malasngoding.com">www.malasngoding.com</a></td>
					</tr>
				</table>
				
			</div>

		</div>		

		<div class="blok">

			<h2>Pendidikan</h2>			
			
			<div>
				<ul>
					<li><b>2000 - 2006</b> SD 1 Negeri Medan</li>
					<li><b>2006 - 2009</b> SMP 1 Negeri Jakarta</li>
					<li><b>2009 - 2012</b> SMA 1 Negeri Jakarta</li>
					<li><b>2012 - 2016</b> Universitas Indonesia</li>
				</ul>
			</div>

		</div>

		<div class="blok">

			<h2>Pengalaman Kerja</h2>
			
			<div>
				<ul>
					<li>
						<b>2017 - 2019</b> - <i>Back-End Developer</i> - di Di PT. Teknologi Indonesia
					</li>
					<li>
						<b>2020 - Now</b> - <i>Full Stack Developer</i> - di Di PT. BOX Tech AI Indonesia
					</li>
				</ul>
			</div>

		</div>

		<div class="blok">

			<h2>Keahlian</h2>			
			
			<div>
				<ul>
					<li>HTML</li>
					<li>CSS</li>
					<li>JavaScript</li>
					<li>PHP</li>
					<li>CodeIgniter</li>
					<li>Laravel</li>
					<li>NodeJS</li>					
				</ul>
			</div>

		</div>
	</div>
</body>
</html>

Simpan.

Menyiapkan File Gambar Untuk Foto

Karena kita akan menampilkan foto pada website biodata kita, maka siapkan foto terbaik kamu dan ubah namanya menjadi foto.jpg.

Letakkan dalam folder “biodata-html“.

Seperti gambar berikut.

membuat website sederhana dengan HTML dan CSS

Oke, lanjut ke membuat desain halaman dengan CSS.

Desain Halaman Website Dengan CSS

Perhatikan pada file index.html, kita memanggil file css dengan nama style.css.

Karena kita akan menggunakan penulisan CSS dengan metode external css.

Buat sebuah file CSS dengan nama style.css. dan letakkan dalam folder “biodata-html”.

style.css

body{
	font-family: monospace;
	font-size: 13pt;
}

th{
	text-align: left;
}

img{
	width: 100%;
	margin-bottom: 10px;
}

.kotak{
	border: 1px solid black;
	width: 60%;
	margin: 10px auto;
	padding: 20px;
}

.judul{
	text-align: center;
        background: yellow;
}

.blok{
	overflow: hidden;
}

.kiri{
	width: 20%;
	float: left;
}

.kanan{
	width: 70%;
	padding:0px 20px;	
	float: left;
}

@media only screen and (max-width: 768px) {
	.kotak{
		width: 100%;
		padding: 0px;
		border: none;
	}
	
	.kiri{
		width: 100%;
	}

	.kanan{
		width: 100%;
		padding: 0;
	}
}

Dan jalankan file index.html maka hasilnya akan seperti berikut.

Penjelasan

Semua yang kita tulis, baik itu kode HTML atau CSS sudah pernah kita bahas dan pelajari pada tutorial HTML dasar di malasngoding.com

Saya yakin teman-teman masih ingat dan masih familiar.

Kita tinggal pengolahan dan penempatan elemennya saja agar membentuk struktur halaman website.

Membuat Website Responsive

Jika teman-teman perhatikan, pada code CSS kita menggunakan perintah @media untuk mengatur perintah CSS yang dijalankan pada saat website diakses menggunakan ukuran layar tertentu.

Di sini kita mengatur jika website diakses dari layar yang berukuran 768px (ukuran tablet ke bawah), maka kita ubah ukuran width pada class .kiri dan .kanan menjadi 100%.

Agar tidak berantakan.

@media only screen and (max-width: 768px) {
	.kotak{
		width: 100%;
		padding: 0px;
		border: none;
	}
	
	.kiri{
		width: 100%;
	}

	.kanan{
		width: 100%;
		padding: 0;
	}
}

Lihat hasilnya jika diakses dari smartphone atau tablet.