JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 1-6
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
PENINGKATAN KOMPETENSI SISWA SEKOLAH MENENGAH KEJURUAN MELALUI
PELATIHAN PEMROGRAMAN WEB BERBASIS HTML.
CSS.
DAN JAVASCRIPT
Darmansah1.
Koko Handoko2.
Novri Adhiatma3.
Erlin Elisa4 Sistem Informasi.
Universitas Putera Batam.
Batam.
Indonesia Teknik Informatika.
Universitas Putera Batam.
Batam.
Indonesia
1,3,4
Email, darmansah071@gmail.
com1, kokohandoko01@gmail.
com2, ad.
novri@gmail.
elin210110@gmail.
Abstrak: Perkembangan teknologi digital menuntut peningkatan kompetensi peserta didik dalam bidang pemrograman sebagai bagian dari penguatan literasi digital.
Namun, pembelajaran teknologi informasi di SMA/SMK biasanya terbatas pada penggunaan perangkat lunak dasar dan pemrograman web.
Tujuan dari kegiatan pengabdian kepada masyarakat ini adalah untuk meningkatkan kemampuan siswa SMK Kolese Tiara Bangsa Batam dengan mengajarkan mereka dasar pemrograman web yang menggunakan HTML.
CSS, dan JavaScript.
Kegiatan dilaksanakan dalam empat tahap yaitu persiapan, pelatihan intensif berbasis praktek langsung dan pembelajaran berbasis proyek.
evaluasi melalui pre-test dan post-test dan tindak lanjut program.
Hasil evaluasi menunjukkan bahwa nilai rata-rata meningkat sebesar 61,6% dari 52,4 pada pre-test menjadi 84,7 pada post-test.
Selain itu, 86% peserta dapat menyelesaikan proyek website sederhana secara mandiri.
Tingkat kepuasan peserta terhadap pelatihan sangat baik.
Hasilnya menunjukkan bahwa pendekatan pelatihan berbasis praktik efektif dalam meningkatkan pemahaman konseptual dan keterampilan teknis siswa dalam pengembangan website.
Sebagai model untuk penguatan kompetensi digital siswa secara berkelanjutan, program ini dapat diterapkan di sekolah lain.
Kata Kunci: PKM, pemrograman web.
HTML.
CSS.
JavaScript, kompetensi digital siswa Abstract: The development of digital technology demands increased student programming competency as part of strengthening digital literacy.
However, information technology learning in high schools (SMA/SMK) is usually limited to the use of basic software and web programming.
The purpose of this community service activity is to improve the skills of SMK Kolese Tiara Bangsa Batam students by teaching them the basics of web programming using HTML.
CSS, and JavaScript.
The activity was carried out in four stages: preparation, intensive hands-on training, and project-based learning.
Evaluation was carried out through pre-tests and post-tests, and program follow-up.
The evaluation results showed that the average score increased by 61.
4 in the pre-test to 84.
7 in the post-test.
In addition, 86% of participants were able to complete a simple website project independently.
The level of participant satisfaction with the training was very good.
The results indicate that the practice-based training approach is effective in improving students' conceptual understanding and technical skills in website development.
As a model for continuously strengthening students' digital competencies, this program can be implemented in other schools.
Keywords: PKM, web programming.
HTML.
CSS.
JavaScript, student digital competency Mitra pengabdian pada masyarakat yaitu Sekolah SMK Kolese Tiara Bangsa Batam.
Keywords: Pengabdian Masyarakat.
SMK.
Kolese Submitted: 2026-02-13 Ai Accepted: 2026-03-05 Ai Published: 2026-04-01 Pendahuluan Pada era digital, kemajuan dalam teknologi informasi dan komunikasi telah membawa perubahan besar dalam berbagai aspek kehidupan, termasuk Pendidikan (Darmansah.
Novri Adhiatma.
Rika Harman 2.
Di tengah transformasi digital, siswa tidak hanya harus menjadi pengguna teknologi, tetapi juga harus memahami dan mengembangkan teknologi secara produktif (Devintya Putriana et al.
Kemampuan dasar pemrograman web adalah kompetensi yang relevan dengan kebutuhan tersebut, yang mencakup kemampuan untuk menguasai HTML.
CSS, dan JavaScript sebagai dasar pengembangan aplikasi berbasis web (Mufidah Karimah,Christien Rozali 2.
Kemampuan ini sangat penting karena website adalah salah satu media utama untuk menyebarkan informasi, membangun bisnis digital, dan melakukan inovasi kreatif di berbagai bidang (Supiyandi et al.
Sekolah Menengah Atas (SMA) dan Kejuruan (SMK) bertanggung jawab secara strategis untuk menentukan kesiapan siswa untuk menghadapi kemajuan teknologi JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 1-6
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
dan ilmu pengetahuan.
Namun, penggunaan teknologi informasi di sekolah menengah umumnya berfokus pada penggunaan aplikasi perkantoran dan keterampilan digital dasar (Pradana.
Kartikowati, and Maulida Sebagian besar kurikulum sekolah masih tidak memprioritaskan pembelajaran pemrograman yang bersifat aplikatif dan berbasis praktik (Nurtrisha.
Thohiroh, and Ardianti 2.
Kondisi ini membuat siswa tidak memahami proses pengembangan web secara mandiri, terutama tentang struktur dasar pemrograman Hasil observasi dan diskusi yang di lakukan TIM Pengabdian Univeristas Putera Batam dengan sekolah menunjukkan bahwa siswa di SMK Kolese Tiara Bangsa Batam tertarik pada teknologi informasi, khususnya pembuatan website.
Namun, kendala untuk meningkatkan kemampuan siswa adalah kurangnya fasilitas pembelajaran praktis, kurangnya pelatihan terstruktur, dan kurangnya pendampingan pemrograman.
Sebaliknya.
Kota Batam membutuhkan sumber daya manusia dengan kemampuan digital yang tinggi karena merupakan wilayah ekonomi dan perdagangan.
Jika kondisi ini tidak diatasi, akan ada perbedaan antara kemampuan lulusan sekolah menengah atas dan kebutuhan industri.
Ini akan menyebabkan perbedaan antara pendidikan tinggi berbasis teknologi dan kemampuan lulusan SMK.
Beberapa kegiatan pengabdian kepada masyarakat sebelumnya telah dilakukan dalam bidang peningkatan literasi digital dan pengenalan pengembangan website pada siswa sekolah menengah (Saputra et al.
Dalam kebanyakan program pengabdian tersebut, peserta hanya diajarkan teknologi web menggunakan platform siap pakai seperti Content Management System (CMS), atau mereka menerima instruksi melalui seminar dan workshop singkat (Hardian Oktavianto et al.
Meskipun kegiatan tersebut memiliki kemampuan untuk meningkatkan pengetahuan siswa tentang teknologi web, sebagian besar siswa tidak memahami struktur dasar bahasa pemrograman web.
Selain itu, metode pelatihan yang tidak sepenuhnya menggunakan pendekatan praktik langsung dan berbasis proyek menyebabkan keterampilan teknis siswa tidak berkembang dengan baik (Nugroho et al.
Berdasarkan analisis perbedaan tersebut.
TIM Pengabdian Universitas Putera Batam merasa perlu memberikan program pengabdian masyarakat yang berfokus pada sosialisasi dan pengembangan keterampilan praktis melalui pendekatan pembelajaran berbasis proyek khusus nya pada SMK Kolese Tiara Bangsa Batam.
Pelatihan dasar pemrograman web menggunakan HTML.
CSS, dan JavaScript dianggap sebagai langkah strategis untuk mengajarkan siswa pemahaman yang mendalam tentang cara membuat website secara mandiri (P et al.
Metode ini diharapkan dapat meningkatkan keterampilan konseptual dan teknis siswa secara berkelanjutan.
Tujuan dari pengabdian masyarakat ini adalah untuk meningkatkan kemampuan siswa SMK Kolese Tiara Bangsa Batam dalam pemrograman web dasar dan memperoleh keterampilan praktis dalam membuat situs web menggunakan HTML.
CSS, dan JavaScript.
Tujuan lain dari kegiatan ini adalah untuk mendorong minat dan motivasi siswa dalam teknologi informasi serta mempersiapkan mereka untuk pendidikan lanjutan dan dunia kerja yang berbasis digital.
Diharapkan siswa dapat membuat produk web sederhana sebagai bentuk implementasi hasil pembelajaran melalui kegiatan pelatihan yang terstruktur dan berbasis praktik.
Metode Pelaksanaan pengabdian kepada masyarakat ini dilaksanakan di SMK Kolese Tiara Bangsa Batam dengan sasaran siswa kelas X dan XI yang memiliki minat terhadap bidang teknologi informasi.
Metode pelaksanaan dirancang secara sistematis dan partisipatif dengan pendekatan pembelajaran berbasis proyek dan Ini memastikan bahwa peserta tidak hanya memperoleh pemahaman teoretis, tetapi juga mendapatkan pengalaman praktis dalam pengembangan website.
Berikut ini adalah tahapan tahapan dari metode pelaksanaan kegiatan ini yang bisa dilihat pada bagan 1 dibawah ini:
JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 1-6
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
Bagan 1.
Metode Pelaksanaan Metode pelaksanaan kegiatan pengabdian kepada masyarakat ini dirancang secara sistematis dan berkelanjutan dengan mengacu pada empat tahapan utama, yaitu Persiapan.
Pelatihan Intensif.
Evaluasi, dan Tindak Lanjut.
Tujuan dari model ini adalah untuk memastikan bahwa kegiatan tidak hanya bersifat seremonial, tetapi juga mampu meningkatkan kompetensi siswa secara terukur dan berkelanjutan, berikut ini adalah penjelasan lebih rinci:
Tahap Persiapan Tahap persiapan merupakan fondasi utama dalam menjamin efektivitas pelaksanaan program.
Kegiatan pada tahap ini meliputi:
a Koordinasi dengan Pihak Sekolah Tim pengabdian berkolaborasi secara formal dengan kepala sekolah dan guru pendamping untuk menentukan waktu dan jumlah kegiatan, serta ketersediaan laboratorium komputer dan prosedur pelaksanaan kegiatan.
Koordinasi formal ini juga bertujuan untuk menyesuaikan program dengan kebutuhan sekolah.
b Analisis Kebutuhan (Needs Assessmen.
Analisis kebutuhan dilakukan melalui observasi awal dan diskusi dengan guru serta siswa untuk mengidentifikasi tingkat pemahaman awal peserta terhadap pemrograman web.
Hasilnya menunjukkan bahwa sebagian besar siswa belum memiliki pengalaman dalam membangun website berbasis coding.
sebagai hasilnya, instruksi difokuskan pada level dasar, atau fundamental.
c Penyusunan Modul Pelatihan Tim membuat modul pelatihan yang terorganisir yang mencakup konsep dasar website dan struktur HTML, pengaturan tampilan menggunakan CSS, dan dasar JavaScript untuk membuat interaksi.
Untuk memastikan bahwa peserta dapat menerapkan setiap materi yang diberikan secara langsung, modul ini dirancang dengan fokus pada praktik.
d Instalasi dan Persiapan Software Sebelum memulai, perangkat lunak pendukung seperti Visual Studio Code dan browser kontemporer diinstal pada perangkat yang akan digunakan.
Tujuannya adalah untuk mengurangi hambatan teknis selama pelatihan.
Tahap perencanaan ini memastikan bahwa operasi berjalan secara teratur dan memenuhi kebutuhan mitra.
Tahap Pelatihan Intensif Kegiatan pengabdian terdiri dari tahap pelatihan.
Pelatihan dilakukan secara tatap muka di laboratorium komputer sekolah menggunakan pendekatan pembelajaran berbasis proyek dan praktik mandiri.
Ceramah interaktif, demonstrasi langsung, dan praktik mandiri digunakan sebagai metode JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 1-6
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
Materi instruksional diberikan secara bertahap seperti HTML (HyperText Markup Languag.
CSS (Cascading Style Sheet.
JavaScript dan Hands-on Practice.
Tahap Evaluasi Evaluasi dilakukan untuk mengukur efektivitas program secara objektif dan terukur.
Metode evaluasi yang digunakan meliputi Pre-test dan Post-test.
Penilaian Proyek.
Kuesioner Kepuasan Peserta dan Analisis Peningkatan Kompetensi.
Tahap Tindak Lanjut Untuk memastikan bahwa dampak program akan bertahan, tahap tindak lanjut dilakukan, yang mencakup.
Refleksi Kegiatan.
Penyusunan Laporan Akhir.
Rekomendasi Program dan Pembentukan Komunitas Coding.
Hasil dan Pembahasan Hasil dan diskusi ini menampilkan hasil empiris dari pelaksanaan pelatihan.
Hasil ini dievaluasi menggunakan indikator keberhasilan yang telah ditetapkan sebelumnya.
Pembahasan difokuskan pada tingkat peningkatan kemampuan siswa, efektivitas teknik pelatihan, dan dampak program terhadap meningkatkan literasi digital di lingkungan sekolah.
Adapun rincian dari hasil dan pembahasan seperti berikut ini:
Hasil Pelaksanaan Kegiatan Kegiatan pengabdian kepada masyarakat yang dilaksanakan di SMK Kolese Tiara Bangsa Batam diikuti oleh 30 siswa kelas X dan XI yang memiliki minat terhadap bidang teknologi informasi.
Pelatihan diberikan di laboratorium komputer sekolah secara tatap muka dan menggunakan pendekatan pembelajaran berbasis proyek.
a Peningkatan Kompetensi Kognitif (Pre-test dan Post-tes.
Pre- dan post-test dilakukan sebelum kegiatan untuk mengetahui seberapa efektif pelatihan.
Pemahaman dasar tentang struktur HTML, fungsi CSS, dan konsep JavaScript adalah bagian dari instrumen tes.
Hasil evaluasi menunjukkan informasi dapat dilihat pada tabel 1 berikut ini:
Tabel 1.
Pre- dan post-test Indikator Pre-test Post-test Peningkatan Nilai Rata-rata 32,3 poin .
,6%) Hasil menunjukkan bahwa pemahaman siswa setelah pelatihan meningkat secara signifikan.
Peningkatan sebesar 61,6% menunjukkan bahwa pelatihan berbasis praktik efektif dalam meningkatkan kompetensi kognitif peserta.
Secara konseptual, peningkatan ini terjadi karena siswa tidak hanya mempelajari materi secara teoritis, tetapi juga menerapkan ide-ide tersebut dalam kehidupan nyata.
Hasil Penilaian Proyek Sebagai bagian dari penilaian keterampilan praktis, peserta diminta untuk membuat proyek akhir yang terdiri dari situs web sederhana yang menggabungkan HTML.
CSS, dan JavaScript.
Penilaian dilakukan berdasarkan empat elemen utama Kesesuaian dengan struktur HTML, kreativitas dan kerapian desain CSS, penerapan fungsi interaktif menggunakan JavaScript, dan integrasi dan kerapian tampilan.
Hasil menunjukkan bahwa 86% peserta dapat menyelesaikan proyek secara mandiri, 10% hanya membutuhkan bantuan kecil, dan 4% mengalami kesulitan teknis tetapi masih memahami konsep dasar.
Hasil menunjukkan bahwa sebagian besar peserta telah mencapai kompetensi dasar dalam pembuatan website statis interaktif.
Respon dan Kepuasan Peserta Hasil kuesioner evaluasi kepuasan menghasilkan kesimpulan dapat dilihat pada tabel 2 dibawah ini berikut:
JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 1-6
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
Tabel 2.
Pre- dan post-test Aspek Penilaian Persentase Kepuasan Kualitas Materi Metode Penyampaian Kejelasan Modul Kebermanfaatan Program Tingkat kepuasan peserta rata-rata 90% dan ini bisa dikatakan "Sangat Baik", menunjukkan bahwa metode pelatihan yang digunakan relevan dan memenuhi kebutuhan siswa.
Pembahasan Hasil kegiatan menunjukkan bahwa memberikan instruksi dasar pemrograman web berbasis HTML.
CSS, dan JavaScript meningkatkan kemampuan siswa SMK Kolese Tiara Bangsa Batam.
Pembelajaran berbasis praktik, atau pembelajaran pengalaman, lebih efektif daripada metode ceramah konvensional.
Peningkatan skor post-test yang signifikan menunjukkan ini.
Pendekatan pelatihan berbasis coding fundamental yang digunakan dalam kegiatan ini memberikan pemahaman yang lebih mendalam tentang struktur dan logika pengembangan website.
Pendekatan ini berbeda dengan beberapa kegiatan pengabdian sebelumnya yang lebih menekankan pada penggunaan platform instan atau Content Management System (CMS).
Siswa tidak hanya mempelajari cara membuat situs web, tetapi mereka juga mempelajari bagaimana struktur dan tampilan situs web dibangun dari awal.
Hal ini sejalan dengan gagasan bahwa penguatan kompetensi digital bergantung pada literasi teknologi daripada literasi pengguna.
Selain itu, terbukti bahwa pembelajaran berbasis proyek meningkatkan partisipasi aktif siswa selama proses pembelajaran.
Peserta tidak hanya menerima informasi, tetapi mereka juga menjadi aktor penting dalam proses pembelajaran.
Dalam menyusun struktur kode, model ini meningkatkan kreativitas, kemampuan memecahkan masalah, dan kemampuan berpikir logis.
Rekomendasi untuk membentuk komunitas coding di sekolah merupakan langkah strategis untuk menjaga keberlanjutan program.
Peningkatan kemampuan yang telah dicapai dapat menurun jika tidak ada tindak lanjut yang terorganisir.
Oleh karena itu, kerja sama antara sekolah dan perguruan tinggi sangat penting untuk menghasilkan hasil yang bertahan lama.
Secara keseluruhan, kegiatan pengabdian ini meningkatkan keterampilan teknis siswa selain meningkatkan literasi digital mereka.
Ini juga membantu mereka mempersiapkan diri untuk menghadapi tantangan di sekolah tinggi dan dunia kerja berbasis Program ini dapat diterapkan pada sekolah lain dengan fitur serupa karena model pelaksanaan yang sistematis dan berbasis evaluasi terukur.
Berikut ini salah satu dokumentasi pada kegiatan tersebut yang bisa dilihat pada gambar 1 dibawah ini:
Gambar 1.
Dokumentasi Kegiatan Kesimpulan Sebagai hasil dari kegiatan pengabdian kepada masyarakat yang dilakukan di SMK Kolese Tiara Bangsa Batam, dapat disimpulkan bahwa memberikan instruksi dasar pemrograman web berbasis HTML.
JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 1-6
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
CSS, dan JavaScript meningkatkan kemampuan kognitif dan praktis siswa.
Ada peningkatan pemahaman konseptual siswa tentang struktur dan logika dasar pengembangan website, seperti yang ditunjukkan oleh peningkatan rata-rata skor setelah tes dibandingkan dengan tes sebelumnya.
Selain itu, sebagian besar peserta mampu menyelesaikan proyek akhir secara mandiri.
Ini menunjukkan peningkatan kemampuan teknis dalam mengintegrasikan elemen struktur, desain, dan interaktivitas ke dalam situs web.
Pembelajaran berbasis proyek dan pendekatan praktik praktis terbukti efektif dalam meningkatkan partisipasi aktif siswa selama proses pembelajaran.
Pendekatan berbasis coding fundamental dalam kegiatan ini memberikan pemahaman yang lebih mendalam dan berkelanjutan dibandingkan dengan model pelatihan yang berfokus pada penggunaan platform instan.
Model pembelajaran ini tidak hanya berfokus pada transfer pengetahuan tetapi juga meningkatkan kemampuan pemecahan masalah, pemikiran logis, dan kreativitas digital.
Secara keseluruhan, tujuan dari kegiatan ini telah dicapai.
Tujuannya adalah untuk meningkatkan kemampuan siswa SMK dalam pemrograman web dasar serta meningkatkan literasi digital mereka untuk menghadapi tantangan yang dihadapi oleh kemajuan teknologi.
Selain itu, penelitian ini menunjukkan bahwa kolaborasi antara sekolah menengah dan perguruan tinggi dapat menjadi pendekatan yang efektif untuk mentransfer teknologi dan ilmu pengetahuan kepada masyarakat secara praktis dan dapat diukur.
Ucapan Terima Kasih Tim pengabdian kepada masyarakat menyampaikan apresiasi dan terima kasih yang sebesar-besarnya kepada Kepala Sekolah SMK Kolese Tiara Bangsa Batam serta semua guru dan karyawan yang telah memberikan izin, mendukung kegiatan ini.
Referensi