Dutormasi.com -HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. Bahasa ini menggunakan tag atau kode-kode tertentu yang digunakan untuk menandai atau memformat elemen-elemen dalam halaman web seperti teks, gambar, dan hyperlink. Dengan HTML, kita dapat membuat halaman web yang interaktif dan dinamis.
Sedangkan Biodata adalah informasi singkat mengenai identitas seseorang. Biasanya, biodata terdiri dari informasi seperti nama lengkap, alamat, nomor telepon, email, dan sebagainya. Biodata digunakan untuk keperluan administratif seperti dalam surat lamaran kerja atau pendaftaran akademik.
Pada kesempatan ini dutormasi akan memberikan tutorial bagaimana membuat biodata diri dengan HTML secara sederhana.
Berikut ini adalah cara membuat biodata diri dengan HTML
1. Buat file HTML kosong
Pertama-tama, buat file HTML kosong dengan menggunakan text editor seperti Notepad atau Sublime Text. Kemudian, simpan file tersebut dengan ekstensi “.html”.
<!DOCTYPE html>
<html>
<head>
<title>Biodata Diri</title>
</head>
<body>
</body>
</html>
2. Tambahkan judul halaman dan informasi biodata
Tambahkan judul halaman dan informasi biodata di dalam elemen <body>. Informasi biodata dapat berupa foto, nama, alamat, nomor telepon, email, dan sebagainya.
<!DOCTYPE html>
<html>
<head>
<title>Biodata Diri</title>
</head>
<body>
<h1>Biodata Diri</h1>
<img src="foto.jpg" alt="Foto Profil">
<p>Nama: John Doe</p>
<p>Alamat: Jl. Sudirman No. 123</p>
<p>Nomor Telepon: 081234567890</p>
<p>Email: johndoe@mail.com</p>
</body>
</html>
3. Tambahkan styling dengan CSS
Tambahkan styling untuk mempercantik tampilan biodata dengan CSS. Buat file baru dengan ekstensi “.css”, lalu simpan di dalam folder yang sama dengan file HTML.
body {
font-family: sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
img {
border-radius: 50%;
width: 200px;
height: 200px;
object-fit: cover;
margin-top: 20px;
}
p {
margin-top: 20px;
font-size: 20px;
}
4. Sambungkan file CSS ke dalam file HTML
Sambungkan file CSS ke dalam file HTML dengan menambahkan tag <link> di dalam elemen <head>.
<!DOCTYPE html>
<html>
<head>
<title>Biodata Diri</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Biodata Diri</h1>
<img src="foto.jpg" alt="Foto Profil">
<p>Nama: John Doe</p>
<p>Alamat: Jl. Sudirman No. 123</p>
<p>Nomor Telepon: 081234567890</p>
<p>Email: johndoe@mail.com</p>
</body>
</html>
5. Simpan dan buka file HTML di browser
Simpan file HTML dan CSS, lalu buka file HTML di browser untuk melihat tampilan biodata diri.
Demikianlah cara membuat biodata diri dengan HTML sederhana beserta codingannya. Dengan HTML, kita dapat membuat berbagai macam halaman web dengan mudah dan cepat.
 adalah bahasa markup yang digunakan untuk membuat halaman web. Berikut kode Biodata Diri dengan HTML){kind=link}