## Abdimas Galuh

## 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: prya.artha@matanauniversity.ac.id (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
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  (Gurudikmen.com,  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: https://matanapkm.netlify.app/ . Seluruh materi dan bahan yang diperlukan pada pelatihan tersebut dapat diakses oleh setiap siswa pada link berikut: untuk slides dapat

## Abdimas Galuh
diakses melalui tautan https://bit.ly/matana-slides . Untuk asset yang digunakan disediakan tautan https://bit.ly/matana-assets.
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.

## 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
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.

## 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 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
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 https://www.cnnindonesia.com/teknologi/20170728094848- 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. Gurudikmen.com.  (2022,  December  4). Struktur  Kurikulum  Merdeka  Belajar  SMA  2022 Lengkap .  gurudikmen.com. https://gurudikmen.com/struktur-kurikulum-merdeka- 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 https://www.globenewswire.com/en/news- release/2022/02/10/2382917/0/en/New-Reveal-Survey-Finds-Skilled-Developer- Shortage-Among-Top-Challenges-for-2022.html
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 https://www.republika.co.id/berita/qovm59374/kebutuhan-programmer-makin- 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 https://www.forbes.com/sites/forbestechcouncil/2021/06/08/is-there-a-developer- 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 https://sman1pare.sch.id/2013/03/28/struktur-kurikulum-2013-sma.html
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.