Abdimas Galuh

Volume 6, Nomor 1, Maret 2024, 453-461

Pelatihan Pembuatan Website dengan Menggunakan HTML dan Javascript

Untuk SMK Media Informatika di Tangerang

Website Development Training Using HTML and Javascript

for SMK Media Informatika in Tangerang

Prya Artha Widjaja*, Ary Budi Warsito, Nico Abel Laia, Jose Ryu Leonesta,
Eveline Valencia Anthony, Yonathan Arya Dhamma

Jurusan Teknik Informatika, Fakultas Sains, Teknologi dan Matematika, Universitas Matana,
Jl. CBD Barat Kav.1. Gading Serpong. Tangerang – 15810.
*Email: [Link]@[Link]
(Diterima 08-01-2024; Disetujui 01-03-2024)

ABSTRAK
Dunia digital saat ini sudah menjadi bagian dalam kehidupan sehari-hari. Masyarakat semakin terbiasa dengan
aplikasi teknologi informasi. Semasa pandemi peranan teknologi informasi sangat terasa dalam kehidupan di
semua bidang. Untuk membuat perangkat lunak yang digunakan dibutuhkan para ahli pemrograman. Saat ini
Indonesia dan juga di dunia masih mengalami kekurangan programmer. Masih banyak yang berpikir bahwa
membuat program itu sulit. Pelatihan ini ditujukan untuk siswa/i SMA dan SMK untuk menarik minat mereka
dalam belajar pemrograman. Siswa/i diperkenalkan dengan pemrograman web yang sederhana. Tujuannya
supaya mereka dapat mencoba sendiri membuat web dengan HTML dan melihat hasilnya. Pemrograman web
sendiri bersifat interaktif dan para siswa/i dapat melihat hasilnya secara langsung. Dari pelaksanaan pelatihan
ini didapatkan hasil yang cukup memuaskan. Beberapa siswa/i tertarik untuk mempelajari pemrograman lebih
lanjut. Diharapkan semakin banyak yang berminat sehingga dapat menghasilkan programmer yang baik.

Kata kunci: teknologi informasi, web, HTML, pemrograman

ABSTRACT
The digital world has now become a part of everyday life. Society is increasingly accustomed to information
technology applications. During the pandemic, the role of information technology is greatly felt in all fields of
life. To create the software used, programming experts are needed. Currently, Indonesia and the world are
still experiencing a shortage of programmers. Many still think that making a program is difficult. This training
is aimed at high school and vocational high school students to attract their interest in learning programming.
Students are introduced to simple web programming. The goal is for them to be able to try to create a web with
HTML and see the results. Web programming itself is interactive and students can see the results directly.
From the implementation of this training, quite satisfactory results were obtained. Some students are interested
in learning programming further. It is hoped that more and more people are interested so that they can produce
good programmers.

Keywords: information technology, be, HTML, programming

PENDAHULUAN
Saat ini perkembangan di dalam bidang teknologi informasi sangat cepat. Banyak
negara termasuk Indonesia membutuhkan tenaga ahli di bidang teknologi informasi.
Pemanfaatan teknologi informasi ini sangat terasa terutama pada masa pandemi. Banyak
peralatan pengajaran berbasis teknologi seperti Quizziz digunakan (Rahayu, 2020). Selain
penggunaan perangkat lunak, sistem pembelajaran hybrid juga mulai digunakan (Adhani,
2020) dan semakin berkembang luas. Untuk mewujudkan semua itu dibutuhkan tenaga ahli
di bidang pemrograman. Lulusan sarjana teknologi informasi memang banyak, tetapi jumlah
lulusan tidak sebanding dengan kualitas yang dibutuhkan. Untuk meningkatkan kualitas

453
Pelatihan Pembuatan Website dengan Menggunakan HTML dan Javascript Untuk SMK Media Informatika di Tangerang
Prya Artha Widjaja, Ary Budi Warsito, Nico Abel Laia, Jose Ryu Leonesta, Eveline Valencia Anthony, Yonathan
Arya Dhamma

maka pemahaman mengenai bahasa program harus diberikan dari bangku sekolah. Langkah
awal yang perlu dilakukan adalah menarik minat para siswa untuk mempelajari
pemrograman. Berdasarkan kurikulum SMA tahun 2013 (SMAN1, 2013) tidak ada pelajaran
komputer yang diberikan. Dalam kurikulum Merdeka 2022 ([Link], 2022)
pelajaran informatika di berikan pada kelas X, tetapi di kelas XII dan XII pelajaran
informatika ini menjadi mata pelajaran pilihan. Bagi sekolah yang masih menerapkan
kurikulum 2013 maka para siswa tidak mendapatkan pelajaran pemrograman. Untuk sekolah
yang menerapkan kurikulum merdeka, para siswa hanya mendapatkan pelajaran informatika
di satu tahun pertama, dua tahun selanjutnya mereka tidak harus mengambil mata pelajaran
informatika. Para siswa-siswi hanya bisa belajar pemrograman jika di sekolahnya dibuka
kegiatan ekstrakurikuler, tetapi tidak semua sekolah menyelenggarakan kegiatan
etrakurikuler yang berhubungan dengan pemrograman. Oleh karena itu, sebagian besar
siswa-siswinya tidak mengenal perkembangan dunia teknologi informasi dan juga teknik
pemrograman yang baik. Pelatihan yang dipilih pada tahap awal adalah pembuatan website
dengan menggunakan HTML dan Javascript. Pemrograman website dipilih karena mudah
dipelajari dan bersifat interaktif. Diharapkan dengan pemrograman web dapat menarik minat
para siswa untuk mempelajari pemrograman lebih jauh lagi. Pemrograman website ini
pernah dilakukan oleh penulis di sekolah lain untuk menarik minat belajar pemrograman dan
cukup berhasl (Widjaja, 2023).

BAHAN DAN METODE

Pelaksanaan pelatihan pembuatan website dilaksanakan sebanyak dua kali. Pertemuan
pertama dilakukan pada tanggal 12 Mei 2023 di sekolah Media Informatika, dan pertemuan
kedua dilakukan pada 23 Mei 2023 di Universitas Matana. Pelatihan kedua dilakukan di
Matana karena komputer yang terbatas jika dibandingkan dengan jumlah peserta yang ikut.
Pelatihan dilakukan oleh dosen yang dibantu oleh mahasiswa. Mahasiswa yang terlibat
dalam pelaksanaan pengabdian masyarakat ini berasal dari prodi Teknik Informatika
angkatan 2020 dan 2021. Suasana pelatihan juga dibuat aktif dan menarik, dimana seluruh
peserta diberikan kesempatan untuk praktik langsung membuat website sederhana
menggunakan tools yang telah ditentukan. Setiap siswa yang menjadi peserta dan ikut
kegiatan pelatihan ini akan menghasilkan sebuah website sederhana yang responsive. Contoh
tampilan website sederhana yang akan dibuat dapat dilihat pada gambar 1 dan juga pada
tautan berikut ini: [Link] Seluruh materi dan bahan yang diperlukan
pada pelatihan tersebut dapat diakses oleh setiap siswa pada link berikut: untuk slides dapat

454
 Abdimas Galuh
Volume 6, Nomor 1, Maret 2024, 453-461

diakses melalui tautan [Link] . Untuk asset yang digunakan disediakan

tautan [Link]

Gambar 1. Tampilan website yang akan dibuat

Dalam setiap pertemuan, materi yang diberikan saling berkelanjutan, pada pertemuan
pertama seluruh peserta diberikan dasar-dasar membuat website menggunakan HTML dan
pada pertemuan kedua seluruh peserta diberikan materi tambahan mengenai CSS dan
Javascript, sehingga pada akhirnya seluruh peserta dapat menghasilkan sebuah website
sederhana sesuai dengan contoh yang diberikan.
Pada pertemuan pertama, seluruh siswa diminta untuk mengisi Pre-Test untuk
mengetahui seberapa dalam pengetahuan mereka mengenai Web Development Dasar.
Setelah seluruh peserta menyelesaikan Pre-Test, selanjutnya akan dijelaskan mengenai
pengertian sebuah website, bagaimana cara website bekerja, dan tools yang dibutuhkan
untuk membuat sebuah website.

Gambar 2. Materi dasar

Setelah siswa paham mengenai sebuah website, selanjutnya pengajar menjelaskan
mengenai pemrograman web menggunakan HTML. Peserta dibekali ilmu-ilmu struktur
HTML yang terdiri atas header, body, main, dan footer yang digunakan untuk membuat
sebuah website sederhana. Pengajar juga memperkenalkan syntax HTML sederhana
sehingga setiap siswa dapat memahami tiap syntax yang dibutuhkan untuk pembuatan
website sederhana.

455
Pelatihan Pembuatan Website dengan Menggunakan HTML dan Javascript Untuk SMK Media Informatika di Tangerang
Prya Artha Widjaja, Ary Budi Warsito, Nico Abel Laia, Jose Ryu Leonesta, Eveline Valencia Anthony, Yonathan
Arya Dhamma

Gambar 3. Materi HTML

Pada praktik pertemuan pertama, peserta diajak untuk membuat seluruh struktur
website sederhana menggunakan Visual Studio Code yang terdiri atas header, body, main,
dan footer. Setiap peserta diberikan contoh penulisan kode dan dibantu oleh dosen serta
mahasiswa sehingga peserta tidak merasa kesulitan dalam praktik. Setelah menyelesaikan
praktik, peserta juga diberikan kesempatan untuk bertanya mengenai materi yang telah
diajarkan agar mereka benar benar memahami materi yang diberikan.
Pada pertemuan kedua peserta melanjutkan materi yang telah diberikan pada
pertemuan pertama, yaitu mengenai pengembangan web menggunakan CSS dan Javascript.
Di awal kegiatan peserta akan diberikan penjelasan menganai dasar dasar dari CSS hingga
kegunaannya pada sebuah website. Dari pelatihan pertama, terlihat bahwa masih ada peserta
yang tertinggal. Supaya semua peserta dapat mengikuti pelatihan kedua dengan baik, maka
disediakan template yang sudah disusun berdasarkan hasil pelatihan dari pertemuan pertama.
Peserta diajarkan teknik-teknik untuk mengaplikasikan CSS untuk mempercantik
sebuah tampilan website yang telah dibuat menggunakan HTML. Seperti menggunakan
styling pada sebuah elemen HTML berdasarkan ID, Class, dan Tag HTML. Peserta juga
diberikan contoh untuk setiap teknik yang digunakan sehingga mereka memiliki gambaran
yang lebih jelas.

Gambar 4. Materi CSS

456
 Abdimas Galuh
Volume 6, Nomor 1, Maret 2024, 453-461

Setelah peserta dibekali dasar-dasar CSS beserta kegunaannya, seluruh peserta diajak
untuk praktek mengimplementasikan CSS kedalam sebuah halaman website yang telah
mereka buat pada pertemuan pertama. Setiap peserta diberikan contoh penulisan kode dan
dibantu oleh para mentor jika mengalami kesulitan.
Saat peserta melakukan praktik, pengajar juga menjelaskan kegunaan dari setiap syntax
CSS yang mereka tulis. Seperti konsep positioning dalam CSS, yaitu flexbox, dan grid,
peserta juga diberi penjelasan untuk mengatur sisi seperti margin, padding, dan line height.
Selain itu, peserta juga diajarkan bagaimana untuk membuat sebuah website menjadi
responsif dan lebih cantik dengan menggunakan media query.
Langkah selanjutnya adalah memberikan penjelasan dan gambaran mengenai tiap bagian
dari website yang telah dibuat menggunakan HTML dan CSS. Pada materi terakhir siswa
dibekali ilmu mengenai Javascript dasar dan penggunaannya pada sebuah website, baik pada
sisi Front End dan Back End. Pada bagian akhir siswa diajak untuk melakukan praktik
dengan cara menuliskan kode javascript yang telah disediakan kedalam file HTML untuk
membuat carousel sederhana pada halaman website yang telah dibuat sebelumnya dengan
dibantu oleh dosen dan juga mahasiswa.
Di akhir kegiatan seluruh peserta diberikan kesempatan untuk bertanya mengenai materi
yang telah diajarkan dari pertemuan pertama sampai pertemuan kedua. Setelah sesi tanya
jawab selesai dilakukan, peserta diberikan quiz singkat mengenai pemrograman web untuk
mengingat kembali materi yang telah diajarkan. Sebelum kegiatan ditutup dosen
memberikan kesimpulan dari seluruh kegiatan yang telah dilakukan, kemudian dilanjutkan
pengisian Post-Test guna mengetahui hasil dari pelatihan yang telah dilakukan. Setelah
mengisi Post-Test, semua siswa diminta untuk mengisi survey yang diberikan melalui
Google Form.

Semua data yang digunakan dalam pelatihan ini, baik berupa gambar, kode HTML, kode
CSS dan lainnya dapat diakses oleh para peserta di Github walaupun pelatihan telah selesai.
Slide presentasi juga dapat diakses oleh para peserta setelah pelatihan berakhir. Diharapkan
para peserta yang tertinggal atau mau belajar lebih lanjut dapat mengakses data yang ada.

HASIL DAN PEMBAHASAN

Pelatihan dilaksanakan sebanyak dua kali. Pelatihan pertama dilaksanakan di aula
SMK Media Informatika dan pelatihan kedua dilaksanakan di laboratorium komputer di
Universitas Matana. Suasana pelatihan dapat dilihat pada gambar 5 dan 6.

457
Pelatihan Pembuatan Website dengan Menggunakan HTML dan Javascript Untuk SMK Media Informatika di Tangerang
Prya Artha Widjaja, Ary Budi Warsito, Nico Abel Laia, Jose Ryu Leonesta, Eveline Valencia Anthony, Yonathan
Arya Dhamma

Gambar 5. Suasana pelatihan Pertama

Gambar 6. Suasana pelatihan kedua

Sebelum pelatihan diberikan pre-test dengan tujuan mengetahui kemampuan para

peserta. Setelah pelatihan dilakukan post-test dan survey untuk melihat apakah pelatihan
yang diberikan mencapai target yang sudah ditentukan. Soal yang diberikan pada saat pre-
test dan post-test sama dan bertujuan untuk mengetahui apakah pelatihan berhasil
meningkatkan kemampuan para peserta. Soal diberikan melalui google form dan hasil
jawaban tidak diberitahukan ke semua peserta. Berikut adalah grafik dari Pre-Test (gambar
7) dan Post-Test (gambar 8), parameter pertama merupakan nilai yang didapat oleh siswa,
sementara parameter kedua adalah total nilai maksimum, sebagai contoh (80/100) berarti
siswa tersebut mendapatkan nilai sebesar 80 dari 100.

Gambar 7. Hasil Pre-Test

458
 Abdimas Galuh
Volume 6, Nomor 1, Maret 2024, 453-461

Gambar 8. Hasil Post-Test

Dari hasil pre-test dan post-test terlihat bahwa pemahaman peserta semakin baik
setelah mengikuti pelatihan. Ini menunjukan materi yang diberikan dapat dipahami oleh
peserta dengan baik. Dari hasil tes ini dapat dilihat juga bahwa banyak siswa-siswi dari SMK
Media Informatika yang belum pernah belajar pemrograman. Hanya sebagian kecil saja yang
sudah mengenal dan menguasai pemrograman.
Jika dilihat dari hasil survey yang dilaksanakan maka sebagian besar peserta
merasakan manfaat dari pelatihan ini. Banyak dari peserta mulai tertarik dengan
pemrograman dan berniat mengikuti pelatihan seperti ini jika diadakan lagi. Pemilihan
pengembangan web sebagai pembelajaran awal pemrograman tampaknya berhasil karena
sebagian besar siswa yang tertarik untuk mempelajari pemrograman memilih untuk
mendalami pemrograman web.

KESIMPULAN DAN SARAN

Pelatihan yang dilakukan secara umum berhasil menarik minat para siswa untuk
membuat website. Banyak siswa yang bertanya dan berusaha mengembangkan aplikasi yang
dibuat dengan mencari-cari caranya di internet. Untuk kedepannya pengenalan
pemrograman ini bisa dilakukan secara rutin dan materi yang disampaikan bisa lebih
beragam, tidak hanya membuat website sederhana tapi bisa juga aplikasi lain yang lebih
rumit. Sebaiknya tetap diusahakan menggunakan perangkat yang sederhana dan bisa dilihat
hasilnya secara visual dengan segera.

UCAPAN TERIMA KASIH

Penulis mengucapkan terima kasih kepada rekan dosen dan rekan mahasiswa yang telah
membantu terlaksananya pengabdian Masyarakat ini. Penulis juga mengucapkan terima
kasih kepada SMK Media Informatika yang telah menyiapkan tempat dan siswa/i untuk

459
Pelatihan Pembuatan Website dengan Menggunakan HTML dan Javascript Untuk SMK Media Informatika di Tangerang
Prya Artha Widjaja, Ary Budi Warsito, Nico Abel Laia, Jose Ryu Leonesta, Eveline Valencia Anthony, Yonathan
Arya Dhamma

mengikuti pelatihan ini. Ucapan terima kasih yang sebesar-besarnya penulis haturkan untuk
Universitas Matana yang telah menyediakan dana dan tempat sehingga pengabdian
masyarakat ini dapat terlaksana.

DAFTAR PUSTAKA
Adhani, A., & Nursia, N. (2020). Edukasi Model Pembelajaran Blended Learning Bagi Guru
SMA Sebagai Salah Satu Solusi Pembelajaran Efektif Di Era New Normal. Jurnal
Pengabdian Masyarakat Borneo, 4(2), 123-127.
Agung, B. (2017, July 28). “Indonesia Darurat Programmer”. CNN Indonesia. Retrieved
September 5, 2022, from [Link]
185-230919/indonesia-darurat-tenaga-programmer
Budiman, A., Suprayogi, S., & Pranoto, B. E. (2021). Pendampingan dan Pelatihan
Pengelolaan Website Sma Negeri 1 Semaka Tanggamus. Journal of Social Sciences
and Technology for Community Service (JSSTCS), 2(2), 150-159.
Donahue, L., and Hartl, M. (2022). “Learn Enough HTML, CSS and Layout to be
Dangerous: An Introduction to Modern Website Creation and Templating Systems”.
Addison-Wesley
Farisi, A., Rachmat, N., & Al Rivan, M. E. (2022). Pelatihan Pembuatan Website Portal
dengan Menggunakan Wordpress untuk Siswa/Siswi SMA Negeri 6
Palembang. Jurdimas (Jurnal Pengabdi. Kpd. Masyarakat) R, 5(1), 25-32.
[Link]. (2022, December 4). Struktur Kurikulum Merdeka Belajar SMA 2022
Lengkap. [Link]. [Link]
belajar-sma-2022/
Huzaeni, H., Mahdi, M., & Ismaniar, I. (2019). Pelatihan Web Design Bagi Siswa SMK
Negeri 5 Kecamatan Blang Mangat Kota Lhokseumawe. In Prosiding Seminar
Nasional Politeknik Negeri Lhokseumawe (Vol. 3, No. 1).
Infragistics. (2022, February 10). New reveal survey finds "skilled developer shortage"
among top challenges for 2022. GlobeNewswire News Room. Retrieved September 5,
2022, from [Link]
release/2022/02/10/2382917/0/en/New-Reveal-Survey-Finds-Skilled-Developer-
[Link]
Izzah, N. (2020). Pelatihan membuat dan mengelola website sekolah. Jurnal Abdimas Bina
Bangsa, 1(2), 247-256.
Kelana, I. (2021, February 21). Kebutuhan programmer Makin Meningkat. Republika
Online. Retrieved September 5, 2022, from
[Link]
meningkat
Rahayu, S. W., & Widyawati, E. (2020). Workshop Pembelajaran Berbantu Software
Quizizz Untuk Meningkatkan Inovasi Dalam Pembelajaran Daring Di Masa Pendemi
Covid-19. Jurnal Pengabdian Masyarakat Borneo, 4(2), 107-111.
Sloyan, T. (2022, April 14). Council post: Is there a developer shortage? yes, but the
problem is more complicated than it looks. Forbes. Retrieved September 5, 2022, from
[Link]
shortage-yes-but-the-problem-is-more-complicated-than-it-looks/?sh=4fa773b13b8e
SMAN 1 Pare. (2013, March 28). Struktur Kurikulum 2013 SMA | Informasi SMA Negeri 1
Pare - Kediri Terbaru. Retrieved March 1, 2023, from
[Link]

460
 Abdimas Galuh
Volume 6, Nomor 1, Maret 2024, 453-461

Widjaja, P. A., Barus, S. P., Warsito, A. B., Leonesta, J. R., Amalia, S. Y., Ardilla, V. Y., &
Laia, N. A. (2023). Web Training by Using HTML and CSS to Attract Interest in
Learning Programming for High School Students. Jurnal Pengabdian Masyarakat
Bestari, 2(6), 463-470.

461