Mini Project HTML: Membuat Halaman Profil Sederhana

Buat Folder Project#

Kita mulai dengan membuat folder baru.

Namanya bebas.

Misalnya:

1
profil-saya

Di dalam folder tersebut, buat file:

1
index.html

Jadi struktur project kita sekarang sangat sederhana:

1
profil-saya/
2
└── index.html

Kalau lupa bagaimana membuat dan membuka file HTML, Gabuters bisa melihat kembali artikel pertama dalam series ini.

Sekarang buka index.html menggunakan VS Code.

Mulai dari Struktur Dasar#

Isi file dengan struktur HTML dasar:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6

7
  <title>Profil Saya</title>
8
</head>
9
<body>
10

11
</body>
12
</html>

Simpan.

Lalu buka index.html di browser.

Masih kosong?

Bagus.

Bukan error.

Memang belum kita isi apa-apa. 😄

Sekarang kita mulai membangun halaman tersebut sedikit demi sedikit.

Buat Bagian Pembuka#

Kita ingin bagian paling awal memperkenalkan siapa pemilik halaman.

Di dalam <body>, tambahkan:

1
<header>
2
  <h1>BapakGabut</h1>
3

4
  <p>
5
    Ngoding, main game, dan ngulik apa saja.
6
  </p>
7
</header>

Silakan ganti:

1
BapakGabut

dengan nama Gabuters sendiri.

Deskripsinya juga bebas.

Misalnya:

1
<p>
2
  Suka ngoding, main game, dan minum kopi.
3
</p>

Atau:

1
<p>
2
  Programmer pemula yang masih sering bertanya
3
  kenapa kodenya tidak jalan.
4
</p>

Halaman profil ya harus terasa seperti punya kita sendiri.

Jangan cuma menyalin punya BapakGabut. 😄

Tambahkan Navigasi#

Halaman kita nanti memiliki beberapa bagian.

Supaya lebih mudah dinavigasi, kita tambahkan menu sederhana.

Masih di dalam <header>, setelah paragraf tadi, tambahkan:

1
<nav>
2
  <a href="#tentang">Tentang</a>
3
  <a href="#belajar">Sedang Dipelajari</a>
4
  <a href="#kontak">Kontak</a>
5
</nav>

Perhatikan nilai:

1
#tentang
2
#belajar
3
#kontak

Kali ini link kita tidak menuju website lain.

Link tersebut akan menuju elemen pada halaman yang memiliki id yang sesuai.

Sebentar lagi kita buat.

Struktur header kita sekarang menjadi:

1
<header>
2
  <h1>BapakGabut</h1>
3

4
  <p>
5
    Ngoding, main game, dan ngulik apa saja.
6
  </p>
7

8
  <nav>
9
    <a href="#tentang">Tentang</a>
10
    <a href="#belajar">Sedang Dipelajari</a>
11
    <a href="#kontak">Kontak</a>
12
  </nav>
13
</header>

Coba klik link-nya sekarang.

Mungkin belum terasa melakukan apa-apa.

Karena tujuannya memang belum kita buat.

Buat Konten Utama#

Setelah </header>, tambahkan:

1
<main>
2

3
</main>

Semua konten utama halaman profil kita akan berada di sini.

Sekarang kita mulai dari bagian Tentang Saya.

Bagian Tentang Saya#

Di dalam <main>, buat:

1
<section id="tentang">
2
  <h2>Tentang Saya</h2>
3

4
  <p>
5
    Halo! Saya BapakGabut.
6
    Saat ini saya sedang belajar membuat website
7
    menggunakan HTML.
8
  </p>
9

10
  <p>
11
    Saya suka ngulik programming, main game,
12
    dan mempelajari hal-hal menarik lainnya.
13
  </p>
14
</section>

Nah, sekarang kita punya:

1
id="tentang"

Ingat navigasi tadi?

1
<a href="#tentang">Tentang</a>

Sekarang coba klik Tentang.

Browser akan membawa kita menuju elemen dengan:

1
id="tentang"

Jadi pasangan sederhananya:

1
href="#tentang"
2
       │
3
       ▼
4
id="tentang"

Kita baru saja membuat navigasi di dalam halaman tanpa JavaScript.

HTML saja sudah bisa melakukan ini.

Tambahkan Foto Profil#

Halaman profil rasanya agak aneh kalau tidak punya foto.

Siapkan sebuah gambar.

Misalnya:

1
foto-profil.jpg

Simpan di folder yang sama dengan index.html.

Struktur project menjadi:

1
profil-saya/
2
├── index.html
3
└── foto-profil.jpg

Kemudian di dalam section Tentang Saya, tambahkan:

1
<img
2
  src="foto-profil.jpg"
3
  alt="Foto profil BapakGabut"
4
  width="200"
5
>

Silakan sesuaikan alt dengan foto yang Gabuters gunakan.

Kalau fotonya tidak muncul, periksa lagi:

• nama file;
• ekstensi file;
• lokasi gambar;
• nilai src.

Komputer cukup patuh.

Kalau kita menulis:

1
foto-profil.jpg

sementara nama filenya:

1
foto-profil.JPG

atau ternyata berada di folder lain, browser tidak akan menebak maksud kita. 😄

Apa yang Sedang Dipelajari?#

Sekarang kita buat section kedua.

Setelah section Tentang Saya, tambahkan:

1
<section id="belajar">
2
  <h2>Yang Sedang Saya Pelajari</h2>
3

4
  <ul>
5
    <li>HTML</li>
6
    <li>CSS</li>
7
    <li>JavaScript</li>
8
  </ul>
9
</section>

Di sini kita menggunakan list.

<ul> berarti unordered list.

Sedangkan setiap item dibuat menggunakan:

1
<li>

Ini sedikit materi baru, tapi konsepnya masih sama dengan nesting yang sudah kita pelajari.

Strukturnya:

1
<ul>
2
│
3
├── <li>HTML</li>
4
├── <li>CSS</li>
5
└── <li>JavaScript</li>

Silakan ganti isinya.

Tidak harus programming.

Misalnya:

1
<ul>
2
  <li>HTML</li>
3
  <li>Main Go</li>
4
  <li>Masak nasi goreng</li>
5
</ul>

Ini halaman Gabuters.

Isinya tidak harus terlihat seperti CV perusahaan. 😄

Tambahkan Link Favorit#

Masih di dalam <main>, kita buat section lagi:

1
<section>
2
  <h2>Link Favorit</h2>
3

4
  <ul>
5
    <li>
6
      <a href="https://www.bapakgabut.com">
7
        BapakGabut
8
      </a>
9
    </li>
10

11
    <li>
12
      <a href="https://github.com">
13
        GitHub
14
      </a>
15
    </li>
16
  </ul>
17
</section>

Sekarang kita kembali menggunakan atribut:

1
href

yang sudah pernah kita pelajari.

Kalau Gabuters punya website, profil GitHub, atau halaman lain yang ingin ditampilkan, silakan ganti link tersebut.

Untuk link eksternal pada latihan ini, tidak perlu menambahkan atribut lain yang belum kita pelajari.

Fokus kita tetap pada dasar HTML.

Tambahkan Form Kontak#

Sekarang kita gunakan kembali materi form dari artikel sebelumnya.

Tambahkan:

1
<section id="kontak">
2
  <h2>Hubungi Saya</h2>
3

4
  <form>
5
    <label for="nama">Nama</label>
6
    <input
7
      type="text"
8
      id="nama"
9
      name="nama"
10
      required
11
    >
12

13
    <label for="email">Email</label>
14
    <input
15
      type="email"
16
      id="email"
17
      name="email"
18
      required
19
    >
20

21
    <label for="pesan">Pesan</label>
22
    <textarea
23
      id="pesan"
24
      name="pesan"
25
      required
26
    ></textarea>
27

28
    <button type="submit">
29
      Kirim
30
    </button>
31
  </form>
32
</section>

Kita tidak akan membahas ulang setiap elemennya.

Karena Gabuters sudah pernah membuatnya.

Kalau lupa, itu normal.

Developer juga tidak menghafal semua hal.

Lihat dokumentasi, buka kode lama, baca artikel sebelumnya, lalu lanjut lagi.

Yang penting sekarang kita mulai bisa mengenali:

1
label
2
input
3
textarea
4
button

tanpa merasa semuanya seperti bahasa alien.

Form ini juga masih belum mengirim data ke backend.

Kita hanya menggunakan kembali struktur form HTML yang sudah dipelajari.

Tutup dengan Footer#

Setelah </main>, tambahkan:

1
<footer>
2
  <p>© 2026 BapakGabut</p>
3
</footer>

Ganti namanya dengan nama Gabuters.

Sekarang kita sudah punya:

1
header
2
│
3
├── judul
4
├── deskripsi
5
└── nav
6

7
main
8
│
9
├── section Tentang
10
├── section Yang Dipelajari
11
├── section Link Favorit
12
└── section Kontak
13

14
footer

Mulai terlihat seperti struktur halaman sungguhan, kan?

Gabungkan Semuanya#

Sekarang index.html lengkap kita kurang lebih menjadi:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6

7
  <title>Profil Saya</title>
8
</head>
9
<body>
10
  <header>
11
    <h1>BapakGabut</h1>
12

13
    <p>
14
      Ngoding, main game, dan ngulik apa saja.
15
    </p>
16

17
    <nav>
18
      <a href="#tentang">Tentang</a>
19
      <a href="#belajar">Sedang Dipelajari</a>
20
      <a href="#kontak">Kontak</a>
21
    </nav>
22
  </header>
23

24
  <main>
25
    <section id="tentang">
26
      <h2>Tentang Saya</h2>
27

28
      <img
29
        src="foto-profil.jpg"
30
        alt="Foto profil BapakGabut"
31
        width="200"
32
      >
33

34
      <p>
35
        Halo! Saya BapakGabut.
36
        Saat ini saya sedang belajar membuat website
37
        menggunakan HTML.
38
      </p>
39

40
      <p>
41
        Saya suka ngulik programming, main game,
42
        dan mempelajari hal-hal menarik lainnya.
43
      </p>
44
    </section>
45

46
    <section id="belajar">
47
      <h2>Yang Sedang Saya Pelajari</h2>
48

49
      <ul>
50
        <li>HTML</li>
51
        <li>CSS</li>
52
        <li>JavaScript</li>
53
      </ul>
54
    </section>
55

56
    <section>
57
      <h2>Link Favorit</h2>
58

59
      <ul>
60
        <li>
61
          <a href="https://www.bapakgabut.com">
62
            BapakGabut
63
          </a>
64
        </li>
65

66
        <li>
67
          <a href="https://github.com">
68
            GitHub
69
          </a>
70
        </li>
71
      </ul>
72
    </section>
73

74
    <section id="kontak">
75
      <h2>Hubungi Saya</h2>
76

77
      <form>
78
        <label for="nama">Nama</label>
79
        <input
80
          type="text"
81
          id="nama"
82
          name="nama"
83
          required
84
        >
85

86
        <label for="email">Email</label>
87
        <input
88
          type="email"
89
          id="email"
90
          name="email"
91
          required
92
        >
93

94
        <label for="pesan">Pesan</label>
95
        <textarea
96
          id="pesan"
97
          name="pesan"
98
          required
99
        ></textarea>
100

101
        <button type="submit">
102
          Kirim
103
        </button>
104
      </form>
105
    </section>
106
  </main>
107

108
  <footer>
109
    <p>© 2026 BapakGabut</p>
110
  </footer>
111
</body>
112
</html>

Tidak perlu langsung copy-paste bagian ini kalau Gabuters tadi sudah membuatnya sedikit demi sedikit.

Justru coba bandingkan dengan kode sendiri.

Apakah strukturnya sama?

Kalau berbeda sedikit, belum tentu salah.

Yang penting kita memahami kenapa setiap bagian dibuat.

Coba Halamannya#

Simpan file.

Buka index.html di browser.

Sekarang coba:

• klik navigasi Tentang;
• klik Sedang Dipelajari;
• klik Kontak;
• buka salah satu link;
• isi form;
• kosongkan field required lalu tekan Kirim;
• periksa apakah foto muncul.

Kalau semuanya bekerja, berhenti sebentar dan lihat halaman yang baru saja Gabuters buat.

Memang tampilannya masih…

ya…

HTML banget. 😄

Teks hitam.

Background putih.

Form standar browser.

Link biru.

Tapi coba lihat dari sisi lain.

Kita sudah membuat:

• struktur dokumen HTML;
• heading dan paragraf;
• gambar;
• link;
• navigasi dalam halaman;
• list;
• form;
• Semantic HTML.

Dan semuanya berada dalam satu halaman yang kita buat sendiri.

Itu sudah jauh berbeda dibanding ketika kita memulai series ini dengan file HTML kosong.

Jangan Berhenti di Versi Saya#

Mini project akan jauh lebih berguna kalau Gabuters mengubahnya menjadi halaman sendiri.

Coba modifikasi:

• nama;
• deskripsi;
• foto;
• daftar minat;
• link;
• isi form;
• judul section.

Boleh juga menambahkan section baru.

Misalnya:

1
<section>
2
  <h2>Game Favorit</h2>
3

4
  <ul>
5
    <li>Zelda</li>
6
    <li>Mario Kart</li>
7
    <li>Minecraft</li>
8
  </ul>
9
</section>

Atau:

1
<section>
2
  <h2>Target Belajar</h2>
3

4
  <ol>
5
    <li>Menyelesaikan HTML</li>
6
    <li>Belajar CSS</li>
7
    <li>Belajar JavaScript</li>
8
  </ol>
9
</section>

Di sini kita bertemu <ol>.

Kalau <ul> adalah unordered list, <ol> adalah ordered list.

Browser akan memberi nomor pada setiap item.

Tidak perlu menghafal.

Coba saja.

Lihat hasilnya.

Ubah lagi.

Kalau Rusak, Bagus#

Saat mencoba memodifikasi halaman sendiri, sangat mungkin sesuatu akan rusak.

Gambar tidak muncul.

Link salah tujuan.

Elemen masuk ke tempat aneh.

Ada tag yang lupa ditutup.

Itu bukan tanda bahwa Gabuters gagal belajar HTML.

Justru di situlah latihan sebenarnya mulai terjadi.

Kalau semua yang kita lakukan hanya copy-paste kode yang sudah benar, kita memang melihat hasilnya.

Tapi belum tentu memahami kenapa hasil tersebut bisa muncul.

Jadi silakan rusakkan halaman ini.

Lalu coba perbaiki lagi. 😄

Kita Sudah Sampai Mana?#

Coba ingat artikel pertama series ini.

Saat itu target kita sederhana:

1
<h1>Halo, dunia!</h1>

Sekarang kita sudah bisa membaca kode seperti:

1
<section id="kontak">
2
  <h2>Hubungi Saya</h2>
3

4
  <form>
5
    <label for="email">Email</label>
6
    <input
7
      type="email"
8
      id="email"
9
      name="email"
10
      required
11
    >
12

13
    <button type="submit">
14
      Kirim
15
    </button>
16
  </form>
17
</section>

dan kurang lebih memahami apa yang sedang terjadi.

Itulah progres yang kita cari.

Bukan menghafal semua tag HTML.

Bukan bisa menulis seluruh dokumentasi HTML dari kepala.

Tapi ketika melihat struktur HTML, kita sudah tidak merasa sedang melihat kode misterius.

HTML-nya Sudah Ada. Kok Masih Jelek?#

Sekarang ada satu masalah yang cukup jelas.

Halaman profil kita bekerja.

Strukturnya juga sudah lumayan.

Tapi tampilannya masih menggunakan gaya bawaan browser.

Kalau kita ingin:

• mengganti warna;
• mengatur ukuran teks;
• memberi jarak;
• membuat card;
• mengatur posisi elemen;
• membuat halaman lebih nyaman dilihat;

HTML bukan alat utamanya.

Kita membutuhkan sesuatu yang memang bertugas mengatur tampilan halaman.

Namanya:

CSS.

Kalau HTML membantu kita menentukan:

1
Ini judul.
2
Ini paragraf.
3
Ini navigasi.
4
Ini form.
5
Ini footer.

CSS nantinya membantu menentukan:

1
Judulnya sebesar apa?
2
Warnanya apa?
3
Jaraknya berapa?
4
Posisinya di mana?
5
Tampilannya seperti apa?

Dan halaman profil yang baru kita buat akan menjadi bahan latihan yang bagus untuk itu.

Untuk sekarang, simpan project ini.

Jangan dibuang.

Karena ketika kita mulai belajar CSS, kita sudah punya sesuatu yang bisa dipercantik.

Sampai sini, fondasi HTML kita sudah terbentuk.

Dan yang paling penting:

Gabuters sudah membuat halaman web sendiri.