
Mapel Kejuruan
Pada akhir fase F peserta didik mampu memahami konsep dan menerapkan perintah HTML, CSS, pemrograman Javascript, bahasa pemrograman server-side serta implementasi framework pada pembuatan web statis dan dinamis untuk beragam kebutuhan yang kontekstual. Selain itu, peserta didik juga mampu mendokumentasikan serta mempresentasikan web statis dan dinamis yang telah dikembangkan.
Panduan Membuat File HTML Menggunakan Acode di Android
Acode adalah editor kode yang sangat mumpuni untuk perangkat Android. Berikut adalah panduan langkah demi langkah untuk membuat file HTML Anda.
1. Persiapan Awal
Unduh dan instal aplikasi Acode dari Google Play Store.
Buka aplikasi dan berikan izin akses penyimpanan (Storage Permission) agar Anda dapat menyimpan file di perangkat Anda.
2. Membuat File Baru
Buka Acode.
Ketuk ikon + (New File) di bagian atas.
Beri nama file Anda dengan akhiran .html (Contoh: index.html).
Klik Save dan pilih folder tempat Anda ingin menyimpan file tersebut.
3. Menulis Kode HTML
Ketik atau tempel kode HTML Anda di ruang kerja. Sebagai contoh, gunakan struktur dasar berikut:
latihan 1 
4. Menguji Hasil (Preview)
Untuk melihat tampilan kode Anda di browser:
Klik ikon tiga titik di pojok kanan atas.
Pilih opsi Open in browser.
Browser akan terbuka dan menampilkan hasil dari kode HTML Anda.
latihan 2
kirimkan Kode dan Hasil
Kegiatan 2 - 3 Agustus 2026
Latihan 1
Latihan 2
Kegiatan 3 - 4 Agustus 2026
C. TUGAS MANDIRI
Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!
1. Sebutkan profesi yang termasuk web master dan jelaskan!
2. Jelaskan konsep world wide web!
3. Jelaskan fungsi web browser!
4. Apa fungsi dari web server?
5. Sebutkan dan jelaskan 3 macam editor text yang biasa digunakan untuk membangun website!6. Sebutkan dan jelaskan 4 editor text yang digunakan untuk membangun website selain yang telah disebutkan pada uraian materi di atas!
7. Jelaskan konsep kerja web server!
8. Sebutkan dan jelaskan 3 jenis web server selain yang telah disebutkan pada materi di atas!
9. Apa sajakah yang menjadi tool pengembang web?
10. Jelaskan sejarah internet!
Kegiatan 4 - 10 Agustus 2026
Aplikasi Kalkulator Gizi Program Makan Bergizi Gratis (MBG) telah dibuat dengan tampilan profesional berstandar institusi (menggunakan desain modern ala dashboard pemerintah/kesehatan dengan Tailwind CSS, dukungan diagram Chart.js, serta fitur kalkulasi gizi otomatis real-time).
Tugas :
1. NASI / KARBOHIDRAT - Option nya di tambah
2. PROTEIN HEWAN - Option nya di tambah
3. PROTEIN NABATI - Option nya di tambah
4. SAYURAN - Option nya di tambah
Link pengumpulan :
https://forms.gle/FmCpy8rWrMFWQPXg6Kegiatan 5 - 18 Agustus 2026
Berikut adalah kode lengkap aplikasi Kalkulator Kasir / Belanjaan Koperasi Desa (Kopdes) yang dirancang dengan antarmuka (UI/UX) terinspirasi dari dashboard profesional kasir modern (seperti sistem POS di Alfamart/Indomaret).
Tugas :
1. 1. Tombol Kategori - button onclick nya di tambah
2. 2. Script Logika Sistem POS - id: 13, name: nya di tambah 4 id lagi
Link pengumpulan :
https://forms.gle/VaFcz14vbZDDHe4c9
Kegiatan 6 - 18 Agustus 2026
Kegiatan 7 - 25 Agustus 2026
Kegiatan 8 - 31 Agustus 2026
Kegiatan 9 - 1 September 2026
Kegiatan 10 - 7 September 2026
Bagian 5: Uji Kompetensi Teknologi Web:
Menjawab 20 Soal Pilihan Ganda: Siswa diwajibkan untuk menjawab 20 pertanyaan pilihan ganda yang telah disediakan secara khusus untuk menguji pemahaman mereka mengenai arsitektur client-server dan ekosistem perangkat lunak web.
Memastikan Kelengkapan Sebelum Mengirim (Submit): Pada bagian petunjuk penyelesaian, siswa ditekankan untuk memastikan bahwa seluruh soal uji kompetensi beserta tabel pengamatan praktikum (dari simulasi di Bagian 3 dan 4) telah terisi dengan lengkap sebelum menekan tombol pengiriman (menyelesaikan LKPD) agar nilai akhir dapat tersimpan dan terekapitulasi dengan baik.
Kegiatan 11 - 8 September 2026Bagian 5: Uji Kompetensi Teknologi Web:
Menjawab 20 Soal Pilihan Ganda: Siswa diwajibkan untuk menjawab 20 pertanyaan pilihan ganda yang telah disediakan secara khusus untuk menguji pemahaman mereka mengenai arsitektur client-server dan ekosistem perangkat lunak web.
Memastikan Kelengkapan Sebelum Mengirim (Submit): Pada bagian petunjuk penyelesaian, siswa ditekankan untuk memastikan bahwa seluruh soal uji kompetensi beserta tabel pengamatan praktikum (dari simulasi di Bagian 3 dan 4) telah terisi dengan lengkap sebelum menekan tombol pengiriman (menyelesaikan LKPD) agar nilai akhir dapat tersimpan dan terekapitulasi dengan baik.
Kegiatan 12 - 14 September 2026
Bagian 5: Uji Kompetensi Teknologi Web:
Menjawab 20 Soal Pilihan Ganda: Siswa diwajibkan untuk menjawab 20 pertanyaan pilihan ganda yang telah disediakan secara khusus untuk menguji pemahaman mereka mengenai arsitektur client-server dan ekosistem perangkat lunak web.
Memastikan Kelengkapan Sebelum Mengirim (Submit): Pada bagian petunjuk penyelesaian, siswa ditekankan untuk memastikan bahwa seluruh soal uji kompetensi beserta tabel pengamatan praktikum (dari simulasi di Bagian 3 dan 4) telah terisi dengan lengkap sebelum menekan tombol pengiriman (menyelesaikan LKPD) agar nilai akhir dapat tersimpan dan terekapitulasi dengan baik.
Kegiatan 13 - 15 September 2026
Bagian 5: Uji Kompetensi Teknologi Web:
Menjawab 20 Soal Pilihan Ganda: Siswa diwajibkan untuk menjawab 20 pertanyaan pilihan ganda yang telah disediakan secara khusus untuk menguji pemahaman mereka mengenai arsitektur client-server dan ekosistem perangkat lunak web.
Memastikan Kelengkapan Sebelum Mengirim (Submit): Pada bagian petunjuk penyelesaian, siswa ditekankan untuk memastikan bahwa seluruh soal uji kompetensi beserta tabel pengamatan praktikum (dari simulasi di Bagian 3 dan 4) telah terisi dengan lengkap sebelum menekan tombol pengiriman (menyelesaikan LKPD) agar nilai akhir dapat tersimpan dan terekapitulasi dengan baik.
Kegiatan 14 - 21 September 2026
MODUL 1: Fondasi Web & Grafis Statis
Fokus Utama: HTML/CSS dasar, sistem koordinat layar, dan pembentukan objek 2D awal.
Materi Pembahasan:
https://simonmurd.github.io/Koding-dan-Kecerdasan-Artificial/modul_1.html•Pengenalan tag dasar & styling (<h1>, background-color).
•Sistem koordinat layar & variabel lokasi (X, Y).
•Perintah gambar 2D awal: fillRect, arc, lineTo, fillText.
Kegiatan 15 - 29 September 2026
MODUL 2: Efisiensi Kode & Detail Visual
🎯 Fokus Utama: Pengorganisasian kode agar tidak berulang dan penambahan batas garis visual.
Materi Pembahasan:
•Penggunaan fungsi modular (Functions, e.g., gambarPohon(x, y)).
•Struktur perulangan (For Loops) untuk penggambaran berulang.
•Pengaturan batas garis visual (stroke(), lineWidth).
Hasil Praktik:
🛠️ Mampu menggambar objek kompleks yang efisien (hutan pohon, langit berbintang) dengan outline yang rapi.
Kegiatan 16 - 5 Oktober 2026
Bab 5: Link dengan HTML
KD: Menerapkan format kaitan (hyperlink) pada halaman web.
Fokus: Menghubungkan halaman web satu dengan yang lain atau merujuk ke sumber/dokumen eksternal menggunakan tag hyperlink.
Kegiatan 17 - 6 Oktober 2026
MODUL 3: Animasi & Pergerakan
🎯 Fokus Utama: Mengubah gambar statis menjadi objek bergerak secara frame-by-frame.
Materi Pembahasan:
•Pembersihan canvas per frame (clearRect()).
•Manajemen loop animasi mulus (requestAnimationFrame()).
•Pembaruan posisi variabel secara kontinu (X += v).
Hasil Praktik:
🛠️ Mampu membuat animasi halus berkecepatan 60 FPS (awan bergeser, matahari terbenam tanpa jejak).