Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MEMBUAT BIODATA DIRI DENGAN HTML DAN CSS

Artikel ini akan menjelaskan cara membuat biodata diri dengan HTML dan CSS. Pelajari langkah-langkahnya dan mulai membuat biodata diri yang menarik sekarang juga.

Daftar Isi:

Persiapkan Tools yang Diperluk...
Membuat Struktur HTML
Membuat Desain dengan CSS

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.

Persiapkan Tools yang Diperlukan

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.

Membuat Struktur HTML

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.

Membuat Desain dengan CSS

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.

Menghubungkan File CSS dengan HTML

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!

cover kelas Kelas membuat website dengan HTML dan CSS
Kelas membuat website dengan HTML dan CSS

belajar membuat website kamu dari nol. Cocok untuk pemula

Lihat Kelas

Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding