Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Membuat biodata diri dengan HTML dan CSS adalah salah satu cara untuk memperkenalkan diri kepada dunia melalui dunia digital. Dengan menggunakan bahasa pemrograman ini, kamu dapat menampilkan informasi tentang diri kamu dengan desain yang menarik dan profesional. Berikut adalah langkah-langkah yang dapat kamu ikuti untuk membuat biodata diri dengan HTML dan CSS.
Sebelum memulai, pastikan kamu sudah memiliki text editor seperti Sublime Text, Notepad++, atau Visual Studio Code. Kamu juga akan membutuhkan web browser untuk melihat hasil dari kode yang kamu buat.
Langkah pertama dalam membuat biodata diri adalah membuat struktur HTML. Berikut adalah contoh struktur HTML sederhana :
<!DOCTYPE html>
<html>
<head>
<title>Biodata Diri</title>
</head>
<body>
<h1>Biodata Diri</h1>
<p>Nama: [Nama Kamu]</p>
<p>Tempat, Tanggal Lahir: [Tempat], [Tanggal Lahir]</p>
<!--Tambahkan lebih banyak detail sesuai keinginan-->
</body>
</html>Gantilah bagian [Nama Kamu], [Tempat], dan [Tanggal Lahir] dengan informasi pribadi kamu.
Setelah struktur HTML selesai, langkah selanjutnya adalah menambahkan desain dengan CSS. Kamu bisa menambahkan CSS di dalam file HTML kamu atau membuat file CSS terpisah dan menghubungkannya dengan HTML.
Berikut adalah contoh desain dengan CSS :
body {
font-family: Arial, sans-serif;
padding: 10px;
}
h1 {
color: navy;
}
p {
color: grey;
}Gantilah color dan font-family sesuai dengan keinginan kamu.
Jika kamu membuat file CSS terpisah, kamu perlu menghubungkannya dengan HTML. Kamu bisa melakukannya dengan menambahkan kode berikut di dalam tag <head> :
<link rel="stylesheet" type="text/css" href="namafile.css">Gantilah namafile.css dengan nama file CSS yang telah kamu buat.
Setelah menyelesaikan semua langkah di atas, biodata diri dengan HTML dan CSS kamu sudah siap untuk dilihat. Jangan lupa untuk terus eksplorasi dan bereksperimen dengan kode kamu untuk membuat desain yang lebih menarik dan unik. Happy coding!
Link terkait: