JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 36-41
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
PELATIHAN PEMBUATAN WEBSITE PROFIL SEDERHANA MENGGUNAKAN HTML DAN
CSS BAGI SISWA TINGKAT SLTA
Muhammad Alam Pujianto Universitas Dian Nusantara.
Program Studi Teknik Informatika.
Jakarta.
Indonesia 41119117@mahasiswa.
Abstrak: Rendahnya literasi digital siswa Sekolah Menengah Kejuruan (SMK), khususnya dalam bidang pengembangan website, menjadi permasalahan yang perlu diselesaikan melalui kegiatan pengabdian kepada masyarakat.
Kegiatan ini bertujuan untuk meningkatkan pengetahuan dan keterampilan siswa SMK Putra Satria Jakarta dalam membuat website profil sederhana menggunakan HTML dan CSS.
Metode yang diterapkan meliputi ceramah interaktif, demonstrasi langsung, praktik terbimbing, serta evaluasi melalui pre-test dan post-test.
Kegiatan dilaksanakan selama tiga hari pada tanggal 25Ae27 Februari 2026 dengan melibatkan sekitar 20 siswa sebagai peserta.
Hasil kegiatan menunjukkan peningkatan signifikan pada seluruh indikator penilaian: pemahaman konsep dasar website meningkat dari 42 menjadi 86, kemampuan menulis struktur HTML dari 36 menjadi 82, penggunaan elemen dasar HTML dari 38 menjadi 83, serta penerapan CSS sederhana dari 28 menjadi 78.
Rata-rata ketercapaian tujuan pelatihan mencapai 81,6% dari target 100%, dengan seluruh indikator masuk kategori Baik hingga Sangat Baik.
Kegiatan ini terbukti efektif meningkatkan literasi digital, kepercayaan diri, dan motivasi belajar teknologi peserta.
Pelatihan lanjutan dengan materi yang lebih mendalam sangat direkomendasikan sebagai tindak lanjut.
Kata Kunci: HTML.
CSS.
website profil.
literasi digital Abstract: The low level of digital literacy among Vocational High School (SMK) students, especially in website development, is a problem that needs to be addressed through community service activities.
This activity aims to improve the knowledge and skills of students at SMK Putra Satria Jakarta in creating simple profile websites using HTML and CSS.
The methods applied include interactive lectures, live demonstrations, guided practice, and evaluation through pre-test and post-test.
The activity was conducted over three days on February 25Ae27, 2026, involving around 20 students as participants.
The results showed significant improvements in all assessment indicators: understanding of basic website concepts increased from 42 to 86, ability to write HTML structure from 36 to 82, use of basic HTML elements from 38 to 83, and application of simple CSS from 28 to The average goal attainment of the training reached 81.
6% of the 100% target, with all indicators in the Good to Very Good This activity was proven effective in improving participantsAo digital literacy, self-confidence, and motivation to learn Advanced training with more in-depth material is highly recommended as a follow-up.
Keywords: HTML.
CSS.
profile website.
digital literacy Mitra Pengabdian: SMK Putra Satria Jakarta, berlokasi di Jl.
Ciledug Raya No.
Petukangan Utara.
Pesanggrahan.
Jakarta Selatan.
Sekolah Menengah Kejuruan ini memberikan dukungan penuh terhadap pelaksanaan pelatihan sebagai bagian dari upaya peningkatan kompetensi teknologi informasi siswa.
Submitted: 2026-03-04 Accepted: 2026-03-12 Published: 2026-04-02 Pendahuluan Perkembangan teknologi informasi yang pesat pada era digital saat ini menuntut setiap individu untuk memiliki kemampuan literasi digital yang memadai (Nisrina et al.
, 2.
Salah satu keterampilan dasar yang kini semakin dibutuhkan adalah kemampuan membuat dan mengelola konten digital, termasuk pembuatan website.
Website telah menjadi media penting dalam kehidupan modern, baik untuk keperluan personal, pendidikan, maupun profesional (Kharchenko & Semerikov, 2.
Namun demikian, kemampuan pengembangan website di kalangan siswa tingkat Sekolah Lanjutan Tingkat Atas (SLTA) masih sangat terbatas.
Sebagian besar siswa belum terpapar dengan keterampilan pemrograman dasar, termasuk HTML dan CSS, yang merupakan fondasi utama dalam pembuatan website.
Kondisi ini disebabkan oleh berbagai faktor, antara lain keterbatasan materi kurikulum sekolah, minimnya fasilitas praktik, serta kurangnya tenaga pengajar yang kompeten di bidang teknologi web (Fauzi et al.
, 2.
Hal ini sejalan dengan temuan Erwadi et al.
yang menyatakan bahwa kesenjangan literasi digital di kalangan siswa SMK masih cukup lebar, terutama dalam aspek pengembangan web.
Kegiatan Pengabdian Kepada Masyarakat (PKM) menjadi salah satu solusi strategis untuk menjembatani kesenjangan tersebut.
Melalui pelatihan yang terstruktur dan berbasis praktik, mahasiswa dan dosen perguruan tinggi dapat berkontribusi langsung dalam peningkatan kompetensi digital masyarakat, khususnya generasi muda (Nofriadi et al.
, 2.
Pendekatan seperti ini telah terbukti efektif dalam berbagai penelitian sebelumnya, di mana JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 36-41
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
pelatihan berbasis proyek nyata mampu meningkatkan pemahaman peserta secara signifikan dalam waktu yang relatif singkat (Anwar & Suharto, 2.
Pelatihan HTML dan CSS dinilai sangat tepat sebagai titik masuk literasi digital karena kedua teknologi tersebut merupakan dasar dari seluruh pengembangan web modern.
HTML (HyperText Markup Languag.
berfungsi sebagai kerangka struktur halaman web, sementara CSS (Cascading Style Sheet.
mengatur tampilan visual halaman tersebut (Ramadhani & Putra, 2.
Penguasaan keduanya membuka peluang bagi siswa untuk mengembangkan kompetensi lebih lanjut di bidang teknologi informasi, termasuk JavaScript dan framework modern (Susanto & Widodo, 2.
Berdasarkan identifikasi kebutuhan yang dilakukan di SMK Putra Satria Jakarta, ditemukan bahwa sebagian besar siswa belum memiliki pengetahuan dan keterampilan dalam membuat website.
Siswa menunjukkan minat yang tinggi untuk mempelajari teknologi web, namun tidak mendapatkan kesempatan yang memadai dalam pembelajaran formal di sekolah.
Oleh karena itu, kegiatan pengabdian kepada masyarakat berupa pelatihan pembuatan website profil sederhana menggunakan HTML dan CSS dinilai sangat relevan dan dibutuhkan.
Kegiatan ini bertujuan untuk memberikan pengetahuan dan keterampilan dasar kepada siswa tingkat SLTA dalam membuat website profil sederhana menggunakan HTML dan CSS, sehingga dapat meningkatkan literasi digital mereka dan membuka peluang pengembangan diri di bidang teknologi informasi (Nofriadi et al.
, 2.
Selain itu, kegiatan ini juga bertujuan untuk menumbuhkan kepercayaan diri dan motivasi siswa dalam menghadapi tantangan era digital yang terus berkembang (Prasetyo & Handayani, 2.
Metode Kegiatan pengabdian kepada masyarakat ini menggunakan pendekatan Service Learning yang mengintegrasikan kegiatan pelatihan langsung dengan evaluasi hasil belajar peserta.
Kegiatan dilaksanakan di SMK Putra Satria Jakarta.
Jl.
Ciledug Raya No.
Petukangan Utara.
Pesanggrahan.
Jakarta Selatan pada tanggal 25Ae27 Februari Subjek kegiatan adalah siswa SMK Putra Satria Jakarta yang berjumlah sekitar 20 peserta.
Pelaksanaan kegiatan terdiri atas tiga tahap utama yang saling berkesinambungan, sebagaimana digambarkan dalam bagan alur berikut:
Bagan 1.
Alur Pelaksanaan Kegiatan Pengabdian Kepada Masyarakat JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 36-41
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
Tahap Persiapan Pada tahap ini dilakukan penentuan tema dan materi pelatihan, penyusunan modul pembelajaran, serta koordinasi dengan pihak SMK Putra Satria Jakarta terkait teknis pelaksanaan, jadwal pelatihan, jumlah peserta, dan fasilitas Tim pelaksana melakukan survei awal ke lokasi dan berkomunikasi intensif dengan guru koordinator melalui platform WhatsApp untuk memastikan kesiapan kegiatan.
Materi pelatihan disusun secara bertahap mulai dari pengenalan konsep website, struktur dasar HTML, hingga pengaturan tampilan halaman menggunakan CSS.
Tahap Pelaksanaan Pelaksanaan pelatihan menggunakan metode ceramah interaktif, demonstrasi langsung menggunakan proyektor, dan praktik terbimbing.
Pemateri menyampaikan materi menggunakan media presentasi di depan kelas, dilanjutkan dengan sesi tanya jawab dan praktik langsung oleh peserta dalam membuat website profil sederhana.
Sebelum materi disampaikan, peserta diberikan pre-test untuk mengukur pengetahuan awal mereka.
Tahap Pendampingan.
Evaluasi, dan Dokumentasi Peserta melaksanakan praktik pembuatan website profil dengan bimbingan langsung dari tim pelaksana.
Tim memberikan arahan dan bantuan secara individual maupun kelompok kepada peserta yang mengalami kendala.
Evaluasi dilakukan melalui pengamatan langsung terhadap hasil pekerjaan peserta serta pelaksanaan post-test untuk mengukur peningkatan pemahaman.
Dokumentasi kegiatan berupa foto pelaksanaan pelatihan dilakukan sebagai bukti pelaksanaan program pengabdian.
Data yang diperoleh dianalisis menggunakan analisis deskriptif komparatif dengan membandingkan nilai rata-rata pre-test dan post-test peserta pada empat indikator penilaian: .
pemahaman konsep dasar website, .
kemampuan menulis struktur HTML, .
penggunaan elemen dasar HTML, dan .
penerapan CSS sederhana.
Hasil dan Pembahasan Kegiatan pelatihan pembuatan website profil sederhana menggunakan HTML dan CSS berlangsung selama tiga hari, dari tanggal 25Ae27 Februari 2026 di SMK Putra Satria Jakarta.
Secara keseluruhan, pelaksanaan kegiatan berjalan sesuai rencana dengan tingkat kesesuaian yang tinggi pada aspek jadwal .
%), materi .
%), metode .
%), partisipasi peserta .
%), dan ketersediaan sarana .
%).
Pelaksanaan Kegiatan Pelatihan Kegiatan pelatihan diawali dengan sesi penyampaian materi oleh pemateri di depan kelas menggunakan media presentasi dan proyektor.
Peserta terlihat sangat antusias mengikuti penjelasan yang diberikan.
Setelah sesi ceramah, peserta langsung mempraktikkan pembuatan kode HTML dan CSS di bawah bimbingan tim pelaksana.
Gambar 1.
Pemateri Menyampaikan Materi Pelatihan kepada Peserta JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 36-41
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
Proses pendampingan dilakukan secara individual maupun kelompok untuk memastikan setiap peserta dapat mengikuti alur praktik dengan baik.
Tim pelaksana berkeliling memberikan bantuan kepada peserta yang mengalami kesulitan dalam penulisan kode program.
Gambar 2.
Proses Pendampingan Praktik Pembuatan Website Peningkatan Pemahaman Peserta Berdasarkan hasil pre-test dan post-test yang dilakukan selama kegiatan, terdapat peningkatan signifikan pada seluruh indikator penilaian.
Data perbandingan nilai rata-rata peserta sebelum dan sesudah pelatihan disajikan pada Tabel 1 berikut.
Tabel 1.
Perbandingan Nilai Rata-Rata Peserta Sebelum dan Sesudah Pelatihan Indikator Penilaian Sebelum Sesudah Peningkatan Pemahaman Konsep Dasar Website Kemampuan Menulis Struktur HTML Penggunaan Elemen Dasar HTML Penerapan CSS Sederhana Tabel 1 menunjukkan bahwa seluruh indikator mengalami peningkatan yang signifikan, berada dalam kategori Baik hingga Sangat Baik setelah pelatihan berlangsung.
Peningkatan tertinggi terjadi pada indikator penerapan CSS sederhana ( 50 poi.
, yang mengindikasikan efektivitas metode praktik langsung dalam menyampaikan materi yang bersifat teknis.
Temuan ini sejalan dengan penelitian Anwar & Suharto .
yang menyatakan bahwa pembelajaran berbasis praktik langsung .
ands-on learnin.
terbukti secara signifikan meningkatkan pemahaman siswa terhadap materi teknis dibandingkan metode pembelajaran konvensional.
Kondisi Peserta Sebelum dan Sesudah Kegiatan Selain aspek kognitif, kegiatan ini juga berdampak positif pada perubahan kondisi afektif peserta.
Data perubahan kondisi peserta secara keseluruhan menunjukkan: pengetahuan tentang website meningkat dari skor 30 menjadi 85, kemampuan membuat HTML dari 25 menjadi 80, kemampuan menerapkan CSS dari 20 menjadi 75, kepercayaan diri dalam coding dari 28 menjadi 82, dan motivasi belajar teknologi dari 45 menjadi 90.
Hasil ini membuktikan bahwa kegiatan pelatihan tidak hanya meningkatkan kemampuan teknis, tetapi juga berhasil membangun kepercayaan diri dan motivasi peserta dalam bidang teknologi informasi.
Temuan ini relevan dengan hasil penelitian Prasetyo & Handayani .
yang menunjukkan bahwa pendekatan pelatihan berbasis praktik proyek nyata secara signifikan meningkatkan self-efficacy dan motivasi belajar teknologi JPMTT (Jurnal Pengabdian Masyarakat Teknologi Terbaruka.
Volume: 06.
Nomor:01.
Tahun: 2026.
halaman: 36-41
E-ISSN : 2776-2858 | P-ISSN : 2797-3158
pada siswa SMK.
Selain itu, pendampingan langsung yang diterapkan dalam kegiatan ini sesuai dengan prinsip scaffolding dalam teori belajar Vygotsky, di mana peserta memperoleh bantuan yang disesuaikan dengan kebutuhan masing-masing individu (Ramadhani & Putra, 2.
Ketercapaian Tujuan Kegiatan Evaluasi ketercapaian tujuan kegiatan menunjukkan bahwa dari lima tujuan yang ditetapkan, rata-rata ketercapaian mencapai 81,6% dari target 100%.
Tujuan dengan ketercapaian tertinggi adalah pemahaman konsep dasar pembuatan website .
%) dan penggunaan elemen HTML yang benar .
%), sedangkan tujuan yang masih perlu ditingkatkan adalah pembuatan website profil biodata secara utuh .
%) dan penerapan CSS sederhana .
%).
Dua tujuan yang belum mencapai target 100% dianalisis disebabkan oleh keterbatasan waktu sesi CSS dan tingkat kompleksitas materi yang lebih tinggi dibandingkan HTML.
Materi CSS membutuhkan pemahaman yang lebih intuitif dan latihan berulang dibandingkan HTML, sehingga alokasi waktu yang tersedia belum optimal (Susanto & Widodo, 2.
Sebagai rekomendasi perbaikan, perlu dialokasikan sesi khusus CSS minimal 2 jam, disertai modul latihan mandiri dan video tutorial sebagai pelengkap.
Secara umum, tingkat ketercapaian sebesar 81,6% ini menunjukkan keberhasilan program pelatihan yang cukup Kondisi ini sejalan dengan temuan Mulyana & Rusmawan .
yang menyatakan bahwa program pelatihan pengembangan web bagi pemula dengan capaian di atas 80% dapat dikategorikan berhasil dan efektif dalam mencapai tujuan pembelajaran yang ditetapkan.
Kesimpulan Permasalahan rendahnya literasi digital siswa SMK Putra Satria Jakarta dalam bidang pengembangan website telah berhasil diatasi melalui kegiatan pelatihan pembuatan website profil sederhana menggunakan HTML dan CSS.
Berdasarkan hasil evaluasi pre-test dan post-test, terjadi peningkatan signifikan pada seluruh indikator penilaian, dengan rata-rata peningkatan nilai sebesar 46,25 poin dan rata-rata ketercapaian tujuan pelatihan mencapai 81,6% dari target 100%.
Seluruh indikator hasil belajar berada pada kategori Baik hingga Sangat Baik, yang membuktikan bahwa metode ceramah interaktif, demonstrasi langsung, dan praktik terbimbing yang diterapkan terbukti efektif dalam meningkatkan kompetensi teknis peserta.
Selain peningkatan kemampuan teknis, kegiatan ini juga berhasil meningkatkan kepercayaan diri peserta dalam bidang coding .
ari 28 menjadi .
dan motivasi belajar teknologi .
ari 45 menjadi .
Hal ini menunjukkan bahwa program pengabdian tidak hanya menjawab permasalahan kompetensi teknis, tetapi juga memberikan dampak positif terhadap aspek afektif peserta yang sangat penting untuk keberlanjutan belajar mandiri di masa mendatang.
Terdapat dua tujuan yang belum mencapai target optimal, yaitu penerapan CSS sederhana .
%) dan pembuatan website profil biodata secara utuh .
%).
Hal ini disebabkan keterbatasan durasi sesi dan kompleksitas materi CSS.
Untuk itu, sangat direkomendasikan agar kegiatan serupa di masa mendatang dilaksanakan dengan alokasi waktu yang lebih panjang, sesi khusus CSS minimal 2 jam, penyediaan modul latihan mandiri, serta tindak lanjut berupa pelatihan lanjutan yang mencakup JavaScript dan pengembangan website yang lebih kompleks.
Ucapan Terima Kasih Penulis mengucapkan terima kasih kepada pihak Universitas Dian Nusantara atas dukungan dan kesempatan yang diberikan dalam pelaksanaan program pengabdian kepada masyarakat ini.
Terima kasih juga disampaikan kepada Kepala Sekolah dan seluruh civitas akademika SMK Putra Satria Jakarta yang telah memberikan izin, fasilitas, dan dukungan penuh selama pelaksanaan kegiatan pelatihan.
Apresiasi yang sebesar-besarnya juga diberikan kepada seluruh peserta pelatihan yang telah berpartisipasi dengan penuh antusias serta semua pihak yang telah turut berkontribusi demi kelancaran kegiatan ini.
Referensi