Buat Website Pertamamu 🚀

👋 Halo Pasukan Hebat RPL16!

Meskipun Bapak/Ibu Guru hari ini ada keperluan sebentar di luar sekolah, semangat belajar kita tidak boleh padam! Di lab komputer ini, 27 anak hebat RPL16 akan membuktikan bahwa kalian bisa membuat website pertama kalian sendiri hari ini. Nikmati prosesnya, saling membantu sesama teman angkatan, dan mari kita buat keajaiban bersama! 💥❤️

🔍 TAHUKAH KAMU? RAHASIA SUPER TERBESAR DI INTERNET!

Pernahkah kamu penasaran bagaimana website seperti YouTube, Instagram, Mobile Legends, atau Roblox Web dibuat?

Jawabannya 100% SAMA dengan yang akan kamu pelajari hari ini! Mereka SEMUA dibuat dari gabungan dua bahasa ajaib: HTML (pembentuk rangka tulisan) dan CSS (penghias warna-warni)! Hari ini, dalam 120 menit ke depan, kamu akan memegang kunci rahasia para pembuat website dunia itu! 🗝️✨

⚡ Coba Sihirnya Sekarang! (Live Code Playground)

Ketik atau klik tombol preset di bawah untuk melihat keajaibannya!

📝 Kotak Ketik Kode HTML & CSS Live Edit

💻 Tampilan Layar Browser (Hasil Sihirmu!) ● Live Active

Tes Sihir Instan:

🌟 3 ATURAN EMAS PROGRAMMER RPL16 (BACA KETIGA-TIGANYA YA!)

🛡️ 1. Jangan Takut Salah!

Komputer sangat aman! Salah ketik huruf atau kode tidak akan membuat komputer rusak atau meledak. Beranikan dirimu!

Kalau kodenya salah ketik, tinggal hapus atau tekan tombol `Ctrl + Z` di keyboard untuk membatalkan. Programmer paling hebat di dunia pun salah ketik puluhan kali tiap hari!

🔍 2. Boleh Searching Google!

Google adalah teman terbaik anak RPL16! Jika ada kode yang kamu lupa atau ingin warna keren yang kamu tidak tahu cara membuatnya, kamu SANGAT BOLEH membuka tab baru dan mencari di Google!

Contoh di Google: "cara ganti warna background html css". Di RPL, Googling itu bukan mencontek, tapi jurus rahasia profesional! 🦸‍♂️

🎨 3. Bersenang-senang & Happy!

Hari ini kita akan membuat keajaiban kecil di layar monitor. Santai, nikmati prosesnya, dan jangan ragu untuk berkreasi.

Belajar koding itu seperti bermain game LEGO atau Minecraft. Kita sedang menyusun balok kata menjadi tampilan website yang bisa kamu banggakan! 🎉

🤝 Pembagian Komputer & Kerja Sama Pasangan (Pair Programming RPL16)

Karena angkatan RPL16 berjumlah 27 murid dan memiliki 22 unit komputer, beberapa teman akan belajar secara berpasangan. Di perusahaan IT ternama seperti Google atau Tokopedia, ini disebut Pair Programming! Kalian membagi tugas menjadi 2 peran seru:

🧑‍✈️ Pilot (Pengendali Keyboard & Mouse): Mengetik kode di VS Code dan mengeklik tombol mouse.

🧭 Co-Pilot / Navigator (Mata & Pembaca Petunjuk): Membaca halaman web ini dan membimbing Pilot jika ada huruf yang salah ketik.

💡 Rotasi Waktu RPL16: Di menit ke-60 (tengah sesi), kalian akan bertukar peran ya! Yang tadinya Pilot jadi Co-Pilot, biar semua anak RPL16 bisa merasakan mengetik kodingan sendiri!

Sisa Waktu Belajar RPL16

120:00

Kemajuan Misi Kamu

Langkah Selesai: 0 dari 12 • Centang kotak di tiap langkah jika sudah kamu kerjakan!

Misi 0: Mengenal Mouse, Keyboard & Membuka VS Code

⏱️ 15 Menit

1. Mengenal Cara Memegang Mouse & Tombol Penting Keyboard

• Klik Kiri (Telunjuk): Dipakai untuk menekan tombol atau memilih teks di layar.
• Klik Kanan (Jari Tengah): Dipakai untuk memunculkan menu pilihan rahasia.
• Klik 2 Kali Cepat (Double Click): Untuk membuka aplikasi/folder.
• Tombol Keyboard Rahasia RPL16:
    - Backspace / ⌫ = Menghapus huruf di sebelah kiri cursor.
    - Enter / ↵ = Pindah baris baru ke bawah.
    - Spacebar (Tombol Panjang) = Memberi spasi antar kata.

2. Buka Aplikasi VS CODE (Visual Studio Code)

1. Perhatikan layar Desktop di depanmu.
2. Cari gambar ikon berbentuk pita biru berhuruf V bertuliskan Visual Studio Code.
3. Arahkan panah mouse ke sana, lalu Klik Kiri 2x Cepat untuk membukanya!

💡 Apa itu VS Code? VS Code adalah seperti aplikasi Note/Catatan ajaib. Di sinilah tempat anak RPL16 mengetik perintah untuk memerintahkan komputer membuat website!

3. Buat Folder Tempat Menyimpan Projek di Desktop

1. Di VS Code, klik menu di pojok kiri atas: File ➔ Open Folder...
2. Pilih folder Desktop di sebelah kiri.
3. Klik tombol New Folder di atas, beri nama foldermu: web-namamu (Contoh: web-budi atau web-siti).
4. Klik tombol Select Folder.

Misi 1: Membuat File HTML Pertama (Pondasi Rumah Web)

⏱️ 30 Menit

1. Buat File Baru Bernama `index.html`

Di VS Code sebelah kiri (Explorer), arahkan mouse di dekat nama foldermu, lalu klik ikon kertas kecil bertanda plus 📄+ (New File). Ketik nama: index.html kemudian tekan tombol Enter!

⚠️ Aturan Penamaan: Wajib menggunakan huruf kecil semua tanpa spasi ya!

2. Memahami Bahasa HTML (Analogi Tubuh Manusia)

HTML adalah singkatan dari HyperText Markup Language. HTML itu ibarat tulang dan organ tubuh website.
• <head> = Bagian Kepala (Berisi judul tab browser).
• <body> = Bagian Badan (Berisi semua tulisan & gambar yang terlihat oleh manusia di layar).
• Kode HTML selalu punya pintu buka <tag> dan pintu tutup </tag> (ada tanda garis miring /).

3. Salin & Tempel Kode HTML Dasar Ini

Tekan tombol biru Salin Kode di bawah ini, lalu buka layar VS Code-mu dan tekan `Ctrl + V` untuk menempelkan kodenya!

📄 index.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Website Pertama RPL16</title>
</head>
<body>

  <h1>Halo Dunia! Saya Siswa RPL16 🚀</h1>
  <p>Ini adalah website pertama yang saya buat sendiri di komputer lab sekolah!</p>

  <h2>Alasan Saya Masuk RPL16</h2>
  <p>Saya ingin belajar koding agar bisa membuat aplikasi dan game keren!</p>

</body>
</html>

4. Simpan Kodingan (`Ctrl + S`) & Buka di Browser Chrome

1. Di keyboard, tekan bersamaan tombol Ctrl dan S (`Ctrl + S`) untuk menyimpan file.
2. Buka folder web-namamu di Desktop.
3. Klik 2x pada file index.html.
🎉 Sumpah demi apa, websitemu sudah jadi dan tampil di Google Chrome! Selamat anak RPL16!

Misi 2: Memberi Baju & Warna Keren (CSS)

⏱️ 30 Menit

1. Buat File Baru `style.css`

Di VS Code sebelah kiri, klik lagi ikon kertas tambah 📄+, buat file baru dengan nama style.css.

🎨 CSS (Cascading Style Sheets) itu ibarat baju mewah, riasan wajah, dan cat dinding. CSS lah yang menyulap website hitam putih menjadi berwarna-warni!

2. Sambungkan CSS ke HTML

Agar HTML milikmu tahu kalau kodenya mau dihias oleh file CSS, tambahkan baris penghubung ini di bagian dalam <head> file index.html:

📄 Tambahkan di index.html (di dalam head)

<link rel="stylesheet" href="style.css">

3. Tulis Kode Penghias di `style.css`

Salin dan tempelkan kode gaya indah ini ke dalam file style.css:

📄 style.css

/* Mengubah latar belakang layar menjadi gelap elegan */
body {
  background-color: #0f172a; /* Warna biru malam gelap */
  color: #f8fafc;            /* Warna tulisan putih terang */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 50px;
  text-align: center;        /* Tulisan di tengah layar */
}

/* Menghias Judul Utama */
h1 {
  color: #38bdf8;            /* Warna biru langit */
  font-size: 36px;
  margin-bottom: 10px;
}

/* Menghias Paragraf */
p {
  color: #cbd5e1;            /* Warna abu-abu terang */
  font-size: 18px;
}

Jangan lupa tekan Ctrl + S di file `index.html` dan `style.css`. Lalu kembali ke browser Chrome dan tekan tombol F5 (Refresh) di keyboard. Waw! Tampilannya langsung berubah jadi super keren! 😎

Misi 3: Jurus Googling Sakti (Sensasi Programmer Pro RPL16)

⏱️ 15 Menit

Bagaimana Cara Searching di Google Seperti Programmer Asli?

Tahukah kamu? Programmer hebat tidak pernah menghafal semua kode di kepalanya! Jika kamu ingin membuat sesuatu yang tidak ada di contoh ini, buka tab baru di Chrome, lalu ketik kata kunci seperti contoh di bawah ini:

🔍 Contoh Kata Kunci Googling Sakti RPL16:
• "Cara membuat warna teks jadi merah di CSS"
• "Kode warna estetika html css"
• "Cara memasukkan gambar di HTML"
• "Cara membuat garis bawah tulisan di CSS"

✨ Cobalah sekarang! Buka Google di Chrome dan cari 1 warna kesukaanmu dalam bentuk kode HEX (contoh: #ff0055 untuk merah muda menyala), lalu gantikan warna di file `style.css` milikmu!

Misi 4: Tantangan Kreatif - "Kartu Biodata RPL16 Nusantara"

⏱️ 25 Menit

Ubah Isinya Menjadi Profil Unik Dirimu Sendiri!

Anak-anak RPL16 datang dari berbagai daerah indah di Indonesia! Mari buat Kartu Biodata Diri yang unik di file index.html. Masukkan data dirimu:

1. Nama Lengkap & Panggilan
2. Asal Daerah / Kota (Contoh: Sabang, Merauke, Ambon, Toraja, Bandung, Solo, Bali, dll)
3. Makanan / Kebudayaan Khas Daerahmu
4. Hobi Kesukaan
5. Cita-cita impianmu di angkatan RPL16!

💡 Contoh Kodingan Biodata RPL16 (Salin & Edit sesuai dirimu!)

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Kartu Profil Anak RPL16</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Halo! Nama Saya Andi Pratama 👋</h1>
  <p>🏠 Asal Daerah: Makassar, Sulawesi Selatan</p>
  <p>🍲 Makanan Khas favorit: Coto Makassar</p>
  <p>🎮 Hobi: Main Game & Bermusik</p>
  <p>🚀 Cita-cita di RPL16: Ingin Membuat Game Android Sendiri!</p>

  <p style="margin-top: 30px; font-style: italic; color: #f472b6;">
    "Bismillah, bersama angkatan RPL16 saya siap menaklukkan dunia teknologi!"
  </p>

</body>
</html>

Misi 5: Rotasi Peran, Simpan File & Selesai!

⏱️ 5 Menit

1. Simpan Terakhir (Ctrl + S)

Pastikan titik putih kecil di judul tab VS Code sudah hilang (tanda kodinganmu sudah tersimpan aman).

2. Pamerkan ke Teman Sebelah & Beri Tepuk Tangan! 👏

Tunjukkan website indah hasil karya kalian berdua ke teman di komputer sebelah. Kalian hari ini telah resmi melangkah menjadi **Developer Muda RPL16**! Rapikan kembali keyboard dan mouse. Terima kasih atas semangat belajarnya! ❤️

💡 Kamus Ringkas Istilah Web (Cheat Sheet Anak RPL16)

HTML

Tulang & isi tulisan website (Judul, paragraf, gambar).

CSS

Baju & warna-warni yang mempercantik website.

<h1>

Tag untuk membuat Judul Ukuran Besar (Heading 1).

<p>

Tag untuk membuat paragraf / kalimat tulisan biasa.

Ctrl + S

Jurus sakti untuk menyimpan pekerjaanmu di VS Code.

Ctrl + Z

Mesin waktu ajaib untuk membatalkan salah ketik (Undo).