Bagian 2: Call-to-Action

Call-to-action (CTA) adalah bagian terpenting landing page: elemen yang meminta pengunjung melakukan tindakan, misalnya mendaftar kelas. Bagian ini meninjau ulang seluruh CTA pada kerangka Bagian 1, menambahkan CTA baru di footer, dan mengisi section #daftar dengan form langganan email — tujuan akhir dari semua tautan “Daftar” yang berulang. Di sini kita juga menimbang keputusan kecil yang sering salah dipilih: kapan memakai a, kapan memakai button.

Memilih antara Link dan Button #

Dua elemen itu terlihat mirip setelah ditata CSS, tetapi semantiknya berbeda:

Situasi CTA	Elemen yang tepat	Alasan
Memindahkan pengunjung ke bagian atau halaman lain	`a` dengan `href`	Tautan adalah navigasi; tujuannya berupa alamat atau fragment
Menjalankan aksi pada halaman, misalnya mengirim form	`button` dengan `type="submit"`	Tombol berpartisipasi dalam perilaku form tanpa membawa alamat tujuan
Tautan yang ingin tampak seperti tombol	`a` dengan class CSS	Tampilan diubah stylesheet; semantiknya tetap tautan

Pada halaman ini CTA “Daftar” selalu berupa a karena tugasnya menavigasi menuju fragment #daftar, sedangkan tombol pengirim form adalah button type="submit" karena tugasnya menjalankan aksi form. Menukar keduanya membuat navigasi kehilangan alamat tujuan atau membuat form kehilangan pengirimnya.

Menambahkan Form Langganan Email #

File berikut melengkapi landing.html dari Bagian 1 dengan form pendaftaran dan CTA di footer:

html
landing-cta.html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Kelas Web Dasar: kelas daring gratis empat pekan dari Komunitas Belajar Web. Daftarkan diri untuk gelombang berikutnya.">
  <title>Kelas Web Dasar — Komunitas Belajar Web</title>
</head>
<body>
  <header>
    <p class="logo">Kelas Web Dasar</p>
    <nav aria-label="Navigasi utama">
      <a class="tombol" href="#daftar">Daftar</a>
    </nav>
  </header>
  <main>
    <section class="hero">
      <div>
        <h1>Belajar Membangun Halaman Web dari Nol</h1>
        <p>Kelas daring gratis selama empat pekan untuk memahami HTML dan CSS, dipandu mentor Komunitas Belajar Web. Setiap pekan berisi satu sesi langsung, satu latihan, dan satu diskusi bersama.</p>
        <a class="tombol" href="#daftar">Daftar Gelombang 7</a>
      </div>
      <img src="../assets/ilustrasi-hero.svg" alt="Ilustrasi jendela browser dengan halaman web yang sedang disusun" width="320" height="240">
    </section>
    <section id="daftar">
      <h2>Daftar Gelombang 7</h2>
      <p>Pendaftaran dibuka sampai 30 September 2025 untuk 40 kursi. Bila kuota terisi, pendaftaran dialihkan ke Gelombang 8 yang dimulai Januari 2026.</p>
      <form id="form-daftar" action="www.example.com/daftar" method="post">
        <label for="email">Alamat email</label>
        <input type="email" id="email" name="email" autocomplete="email" placeholder="[email protected]" required>
        <button type="submit">Daftar Sekarang</button>
        <p class="catatan">Kami mengirim satu surel konfirmasi dan satu pengingat sebelum kelas dimulai; tidak ada pesan lain.</p>
      </form>
    </section>
    <section id="fitur">
      <h2>Apa yang Dipelajari</h2>
      <div>
        <h3>Materi Terstruktur</h3>
        <p>Empat pekan berurutan: struktur dokumen, teks dan tautan, tabel dan form, lalu styling dasar.</p>
      </div>
      <div>
        <h3>Mentor Pendamping</h3>
        <p>Setiap peserta bergabung ke kelompok kecil berisi lima orang dengan satu mentor.</p>
      </div>
      <div>
        <h3>Proyek Akhir</h3>
        <p>Pekan terakhir menutup dengan satu halaman profil pribadi yang diulas mentor.</p>
      </div>
    </section>
    <section id="testimoni">
      <h2>Kata Peserta Sebelumnya</h2>
      <blockquote>
        <p>"Sesi langsungnya santai tetapi terarah; latihan tiap pekan membuat materi menempel."</p>
        <footer>— Dewi, peserta Gelombang 6</footer>
      </blockquote>
      <blockquote>
        <p>"Proyek akhir saya kini dipakai sebagai halaman profil di komunitas tempat saya belajar."</p>
        <footer>— Raka, peserta Gelombang 5</footer>
      </blockquote>
    </section>
  </main>
  <footer>
    <p><a class="tombol" href="#daftar">Daftar Gelombang 7</a></p>
    <p>&copy; 2025 Komunitas Belajar Web</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text
Di antara hero dan section fitur kini tampil section "Daftar Gelombang 7":
  - Satu paragraf batas waktu dan kuota
  - Kolom alamat email berlabel "Alamat email"
  - Tombol "Daftar Sekarang" dan satu kalimat catatan pengiriman surel
Pada footer:
  - Tombol tautan "Daftar Gelombang 7" tampil di atas baris hak cipta
Klik tombol submit saat kolom kosong:
  - Browser menolak mengirim dan menampilkan pesan "Please fill out this field"

Mari kita bedah bagian yang baru:

Baris 25-27: section#daftar membuka dengan h2 dan satu paragraf yang menyebut batas waktu serta kuota secara faktual — dasar urgensi yang jujur, bukan kalimat panik.
Baris 28-33: form membawa action="www.example.com/daftar" (alamat server fiktif sesuai konvensi proyek, tanpa skema) dan method="post". Di dalamnya ada label dengan pasangan for/id, input type="email", tombol submit, dan satu paragraf catatan.
Baris 30: type="email" membuat browser memeriksa format surel sebelum data dikirim; autocomplete="email" membantu pengisi otomatis; required menandai kolom wajib; placeholder="[email protected]" hanya memberi contoh, bukan pengganti label.
Baris 62-65: footer kini memuat CTA berulang — pengunjung yang selesai membaca seluruh halaman tidak perlu menggulir kembali ke atas.

Urgency yang Jujur #

Paragraf urgensi pada Bagian 2 ini memakai tiga fakta nyata: tanggal penutupan (30 September 2025), jumlah kuota (40 kursi), dan tanggal gelombang berikutnya (Januari 2026). Angka-angka itu menjelaskan konsekuensi tanpa memaksa; pengunjung bebas memutuskan. Kebalikannya — kalimat panakut seperti “segera sebelum kehabisan” tanpa bukti — merusak kepercayaan dan mudah terbaca sebagai clickbait. Ketika data kelasnya nyata, cukup tampilkan datanya.

Pemeriksaan Hasil Tahap Ini #

Buka landing-cta.html di browser, lalu tekan tombol submit dengan kolom kosong; browser harus menolak mengirim dan menampilkan pesan kolom wajib.
Isi kolom dengan teks tanpa tanda @, lalu submit kembali; pesan format surel harus muncul.
Klik CTA di header, hero, dan footer; ketiganya menggulir ke section form.
Buka tests/cek-struktur.html, lalu centang butir-butir CTA dan form yang telah dipenuhi.

Seluruh CTA kini berfungsi, tetapi tampilannya masih gaya bawaan browser. Bagian berikutnya menatanya dengan stylesheet proyek: hero bergradien dan tombol yang benar-benar menonjol.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Kelas Web Dasar: kelas daring gratis empat pekan dari Komunitas Belajar Web. Daftarkan diri untuk gelombang berikutnya.">
  <title>Kelas Web Dasar — Komunitas Belajar Web</title>
</head>
<body>
  <header>
    <p class="logo">Kelas Web Dasar</p>
    <nav aria-label="Navigasi utama">
      <a class="tombol" href="#daftar">Daftar</a>
    </nav>
  </header>
  <main>
    <section class="hero">
      <div>
        <h1>Belajar Membangun Halaman Web dari Nol</h1>
        <p>Kelas daring gratis selama empat pekan untuk memahami HTML dan CSS, dipandu mentor Komunitas Belajar Web. Setiap pekan berisi satu sesi langsung, satu latihan, dan satu diskusi bersama.</p>
        <a class="tombol" href="#daftar">Daftar Gelombang 7</a>
      </div>
      <img src="../assets/ilustrasi-hero.svg" alt="Ilustrasi jendela browser dengan halaman web yang sedang disusun" width="320" height="240">
    </section>
    <section id="daftar">
      <h2>Daftar Gelombang 7</h2>
      <p>Pendaftaran dibuka sampai 30 September 2025 untuk 40 kursi. Bila kuota terisi, pendaftaran dialihkan ke Gelombang 8 yang dimulai Januari 2026.</p>
      <form id="form-daftar" action="www.example.com/daftar" method="post">
        <label for="email">Alamat email</label>
        <input type="email" id="email" name="email" autocomplete="email" placeholder="[email protected]" required>
        <button type="submit">Daftar Sekarang</button>
        <p class="catatan">Kami mengirim satu surel konfirmasi dan satu pengingat sebelum kelas dimulai; tidak ada pesan lain.</p>
      </form>
    </section>
    <section id="fitur">
      <h2>Apa yang Dipelajari</h2>
      <div>
        <h3>Materi Terstruktur</h3>
        <p>Empat pekan berurutan: struktur dokumen, teks dan tautan, tabel dan form, lalu styling dasar.</p>
      </div>
      <div>
        <h3>Mentor Pendamping</h3>
        <p>Setiap peserta bergabung ke kelompok kecil berisi lima orang dengan satu mentor.</p>
      </div>
      <div>
        <h3>Proyek Akhir</h3>
        <p>Pekan terakhir menutup dengan satu halaman profil pribadi yang diulas mentor.</p>
      </div>
    </section>
    <section id="testimoni">
      <h2>Kata Peserta Sebelumnya</h2>
      <blockquote>
        <p>"Sesi langsungnya santai tetapi terarah; latihan tiap pekan membuat materi menempel."</p>
        <footer>— Dewi, peserta Gelombang 6</footer>
      </blockquote>
      <blockquote>
        <p>"Proyek akhir saya kini dipakai sebagai halaman profil di komunitas tempat saya belajar."</p>
        <footer>— Raka, peserta Gelombang 5</footer>
      </blockquote>
    </section>
  </main>
  <footer>
    <p><a class="tombol" href="#daftar">Daftar Gelombang 7</a></p>
    <p>&copy; 2025 Komunitas Belajar Web</p>
  </footer>
</body>
</html>