Implementasi Pelatihan HTML untuk Meningkatkan  Kreativitas dan Keterampilan Teknologi Siswa SMA N 3 SEMARANG
Fajar Malik Alghifari 1 , Ibnu Utomo W.M 2 , Aditiya Firyan Syah 3
Kenny Theodolly Gracio Siregar 4 1,2,3,4 Teknik Informatika, Universitas Dian Nuswantoro E-mail: 1 malikfajar772@gmail.com, 2 ibnu.utomo.wm@dsn.dinus.ac.id,
3 aditiyafs01@gmail.com, 4 kennysiregar975@gmail.com

## Abstrak
Implementasi  pelatihan  HTML  pada  siswa  SMA  merupakan  langkah  penting  dalam persiapan  mereka  menghadapi  era  digital  yang  semakin  maju.  Dalam  penelitian  ini,  kami menganalisis  dampak  dari pelatihan  HTML terhadap pemahaman  dan  penguasaan  siswa  SMA terhadap  bahasa  pemrograman  ini.  Penelitian ini melibatkan  60 siswa  SMA  kelas  X di  sebuah sekolah  di  daerah  perkotaan.  Pelatihan  HTML  dilakukan  melalui  workshop  yang  mencakup diskusi,  presentasi,  dan  praktik  langsung  dalam  membuat  halaman  web  sederhana.  Evaluasi dilakukan  melalui  observasi,  tes  pengetahuan,  dan  penilaian  proyek  individu  siswa.  Hasil penelitian menunjukkan adanya peningkatan yang signifikan dalam pemahaman dan penguasaan siswa  terhadap  konsep-konsep  dasar  HTML  setelah  mengikuti  pelatihan.  Mereka  mampu merancang dan membuat halaman web sederhana dengan menggunakan tag HTML, styling CSS, dan pengaturan tata letak. Dengan mengimplementasikan pelatihan HTML, sekolah memberikan kesempatan kepada siswa untuk memperoleh keterampilan yang penting dalam dunia kerja yang semakin  terhubung  dengan  teknologi.  Pelatihan  ini  juga  mendorong  kreativitas  siswa  dalam merancang  tampilan  web  yang  menarik.  Temuan  penelitian  ini  memberikan  kontribusi  pada pengembangan  metode  pengajaran  dan  pembelajaran  yang  inovatif  dan  interaktif  dalam pendidikan teknologi informasi.Kesimpulannya, implementasi pelatihan HTML pada siswa SMA memiliki manfaat yang signifikan dalam meningkatkan pemahaman, penguasaan, kreativitas, dan keterampilan teknologi mereka
Kata kunci: HTML, Pelatihan, web, SMAN3Semarang

## Abstract
The  implementation  of  HTML  training  in  high  school  students  is  a  crucial  step  in preparing them for the increasingly advanced digital era. In this study, we analyzed the impact of HTML training on high school students' understanding and proficiency in this programming language.  The  research  involved  30  eleventh-grade  high  school  students  in  an  urban  school. HTML training was conducted through workshops that included discussions, presentations, and hands-on  practice  in  creating  simple  web  pages.  Evaluation  was  done  through  observation, knowledge  tests,  and  individual  student  project  assessments.  The  results  showed  a  significant improvement  in  students'  understanding  and  proficiency  in  basic  HTML  concepts  after participating in the training. They were able to design and create simple web pages using HTML tags, CSS styling, and layout arrangement. Furthermore, the training had a positive impact on students'  creativity  in  designing  visually  appealing  web  layouts.  They  demonstrated  enhanced ability in integrating text, images, and other design elements to create attractive and aesthetic displays.  The  implementation  of  HTML  training  in  high  school  students  has  important implications in the context of education. This training helps students develop technology skills relevant to the increasingly digital future. Additionally, it provides a solid foundation for students interested in pursuing further studies in computer science or web design. By implementing HTML training,  schools  provide  students  with  valuable  skills  for  the  technologically  connected  job market.  The  training  also  fosters  students'  creativity  in  designing  appealing  web  layouts.  The
findings of this research contribute to the development of innovative and interactive teaching and learning methods in the field of information technology education.
In  conclusion,  the  implementation  of  HTML  training  in  high  school  students  has  significant benefits  in  enhancing  their  understanding,  proficiency,  creativity,  and  technology  skills.  This training  helps  students  face  future  challenges  with  relevant  skills  and  provides  a  strong foundation for those interested in pursuing related studies.
Keywords: HTML, Training, web, SMAN3Semarang

## 1. PENDAHULUAN
Teknologi  informasi  dan  komunikasi  telah  menjadi  bagian  integral  dari  kehidupan  sehari- hari,  termasuk  dalam  pendidikan.  Dalam  era  digital  yang  semakin  maju,  siswa  SMA  perlu memiliki keterampilan teknologi yang kuat untuk menghadapi tantangan masa depan. Salah satu aspek  penting  dalam  pengembangan  keterampilan  teknologi  adalah  pemahaman  dasar  HTML, yang  merupakan  bahasa  pemrograman  yang  digunakan  untuk  membangun  dan  merancang halaman web [1][2].
SMA N 3 Semarang merupakan salah satu sekolah menengah atas yang berkomitmen untuk memberikan pendidikan yang berkualitas dan relevan dengan perkembangan zaman. Menyadari pentingnya keterampilan teknologi, sekolah ini mengimplementasikan pelatihan HTML sebagai strategi untuk meningkatkan kreativitas dan keterampilan teknologi siswa [3][4].
Pelatihan HTML di SMA N 3 Semarang dilakukan melalui workshop yang melibatkan siswa kelas  X.  Workshop  ini  mencakup  pemahaman  konsep  dasar  HTML,  penggunaan  tag  HTML, pengaturan  tata  letak,  dan  styling  CSS.  Selain  itu,  siswa  juga  diberikan  kesempatan  untuk melakukan praktik langsung dalam membuat halaman web sederhana menggunakan notepad++ dan visual code studio[5][6].
Tujuan dari implementasi pelatihan HTML ini adalah untuk memberikan siswa kesempatan untuk  mengembangkan  keterampilan  teknologi  yang  relevan  dengan  kebutuhan  masa  depan. Selain itu, pelatihan ini juga bertujuan untuk meningkatkan kreativitas siswa dalam merancang tampilan visual halaman web [7][8].
Melalui penelitian ini, kami ingin menganalisis dampak dari implementasi pelatihan HTML pada kreativitas dan keterampilan teknologi siswa SMA N 3 Semarang. Kami akan menggunakan metode  penelitian  tindakan  kelas  yang  melibatkan  observasi,  tes  pengetahuan,  dan  penilaian proyek individu siswa. Dengan demikian, kami dapat mengevaluasi efektivitas pelatihan HTML dalam meningkatkan pemahaman, keterampilan, dan kreativitas siswa [9].
Temuan  penelitian  ini  diharapkan  dapat  memberikan  masukan  berharga  bagi  sekolah  dan guru  dalam  mengembangkan  metode  pembelajaran  yang  inovatif  dan  interaktif  dalam  konteks pendidikan  teknologi  informasi.  Selain  itu,  hasil  penelitian  ini  juga  dapat  memberikan pemahaman yang lebih baik tentang pentingnya pemahaman dasar HTML dalam mempersiapkan siswa untuk masa depan yang semakin digital [10].
Dengan  adanya  implementasi  pelatihan  HTML  di  SMA  N  3  Semarang,  diharapkan  siswa dapat mengembangkan keterampilan teknologi yang kuat serta meningkatkan kreativitas mereka dalam merancang dan membangun tampilan web. Hal ini akan memberikan dasar yang solid bagi siswa  yang  tertarik  untuk  melanjutkan  studi  di  bidang  ilmu  komputer  atau  desain  web,  serta membantu mereka menghadapi tantangan masa depan yang semakin digital [11].

## 2. METODE

## 2.1 Metode Penelitian Tindakan Kelas (PTK)

## Gambar 1. Metode PTK
Penelitian ini menggunakan pendekatan penelitian tindakan kelas (PTK) sebagai metode untuk menginvestigasi  implementasi  pelatihan  HTML  dalam  meningkatkan  kreativitas  dan keterampilan  teknologi  siswa  SMA  N  3  Semarang.  Pendekatan  PTK  merupakan  pendekatan yang melibatkan partisipasi aktif dari guru dan siswa dalam proses penelitian untuk memperbaiki praktik  pembelajaran.Partisipan  penelitian  ini  adalah  siswa  kelas  X  di  SMA  N  3  Semarang. Pelatihan HTML dilaksanakan dalam bentuk workshop yang melibatkan diskusi, presentasi, dan praktik  langsung  dalam  membuat  halaman  web  sederhana.  Workshop  dilaksanakan  dalam beberapa sesi yang berlangsung selama periode penelitian.Proses penelitian terdiri dari empat tahap utama.
2.2 Tahapan Penelitian Tindakan Kelas (PTK)
1. Tahap pertama adalah perencanaan, di mana peneliti merancang rencana pelatihan HTML yang sesuai  dengan  kurikulum  dan  kebutuhan  siswa.  Rencana  pelatihan  mencakup  materi  yang akan  diajarkan,  metode  pengajaran  yang  akan  digunakan,  serta  penilaian  yang  akan dilakukan.
2. Tahap  kedua  adalah  pelaksanaan  pelatihan  HTML.  Workshop  dilakukan  sesuai  dengan rencana  yang telah  disusun.  Siswa  diberikan  penjelasan  tentang  konsep  dasar  HTML,  tag HTML,  ,  dan  pengaturan tata  letak  paragraf.  Mereka  juga  diberikan  kesempatan  untuk melakukan praktik langsung dalam membuat  halaman web sederhana.
3. Tahap ketiga adalah evaluasi. Evaluasi dilakukan melalui observasi, tes pengetahuan, dan penilaian  proyek  individu  siswa.  Observasi  dilakukan  selama  workshop  untuk  melihat sejauh  mana  siswa  mengikuti  dan  memahami  materi  pelatihan.  Tes  pengetahuan  dilakukan sebelum  dan  setelah  pelatihan  untuk  mengukur  peningkatan  pemahaman  siswa.  Penilaian proyek individu digunakan untuk mengevaluasi  kreativitas dan keterampilan siswa dalam merancang tampilan halaman web.
4. Tahap keempat adalah refleksi dan perbaikan. Hasil evaluasi digunakan untuk menganalisis dampak  pelatihan  HTML  terhadap  kreativitas  dan  keterampilan  teknologi  siswa. Selanjutnya,  rekomendasi  dan  perbaikan  dilakukan  untuk  meningkatkan  efektivitas pelatihan di masa mendatang.
Data yang dikumpulkan dalam penelitian ini dianalisis secara kualitatif dan kuantitatif. Data kualitatif dianalisis  melalui  pengkodean  dan  tematisasi  observasi  serta  analisis  konten  proyek siswa. Data kuantitatif dianalisis menggunakan statistik deskriptif untuk mengukur peningkatan
pemahaman  dan  keterampilan  siswa  setelah  mengikuti  pelatihan.Dengan  menggunakan pendekatan  PTK  dan  metode  evaluasi  yang  komprehensif,  diharapkan  penelitian  ini  dapat memberikan  pemahaman  yang  lebih  baik  tentang  efektivitas  pelatihan  HTML  dalam meningkatkan kreativitas dan keterampilan teknologi siswa SMA N 3 Semarang.
Goes to School di SMAN 3 Semarang dilaksanakan pada tanggal 30 Mei 2023 dengan dokumentasi kegiatan sebagai berikut:
Gambar 1. Dokumentasi Foto Peserta
Gambar 2. Dokumentasi Foto Pemberian Materi
Gambar 3. Dokumentasi Foto Pendampingan Siswa

## Grafik Analisa Peserta
90
80 70 60 50 40 30 20 10 0
Pre Test
Post Test
Peserta Belum Pernah Pernah Tabel 1. Pre Test dan Post Test Jumlah Peserta Belum Pernah Pernah Pre Test 81 75 6 Post Test 81 0 81
Berikut ini adalah analisis dan hasil dari pre-test dan post-test dengan melibatkan 81 peserta. Dari data tabel yang disajikan, terdapat beberapa kesimpulan yang dapat diambil:
1. Sebelum  tes  dilakukan,  terdapat  75  peserta  yang  belum  pernah  mengikuti  tes sebelumnya.  Hal ini  menunjukkan  bahwa  mayoritas  peserta  masih  baru  atau  belum memiliki pengalaman sebelumnya dalam tes yang serupa.
2. Terdapat  juga  6  peserta  yang  sudah  pernah  mengikuti  tes  sebelumnya.  Hal  ini mengindikasikan adanya sekelompok peserta yang telah mengikuti tes sebelumnya dan mungkin  memiliki  pengetahuan  atau  pengalaman  sebelumnya  yang  dapat mempengaruhi hasil tes mereka.
3. Setelah tes dilakukan, jumlah peserta yang belum pernah mengikuti tes menjadi 0 orang. Ini menunjukkan bahwa semua peserta telah mengikuti tes setidaknya sekali.
4. Jumlah  peserta  yang  pernah  mengikuti  tes  tetap  81  orang.  Ini  menandakan  bahwa semua peserta, termasuk yang sebelumnya belum pernah mengikuti tes, telah mengikuti tes tersebut.
Dengan  menggunakan  data  pre-test  dan  post-test,  kita  dapat  melakukan  perbandingan  untuk mengamati kemajuan atau perkembangan peserta sebelum dan setelah tes dilakukan. Analisis ini dapat  melibatkan  penghitungan  selisih  skor,  perbandingan  persentase  peningkatan  skor,  atau menggunakan metode analisis statistik lainnya untuk mengevaluasi pengaruh atau keefektifan tes yang dilakukan.

## Grafik Analisa Materi
90
80 70 60 50 40 30 20 10 0 Design Web HTML
Tag Dasar HTML Sintaks Dasar Penulisan Kode Peserta Belum Paham Paham Tabel 2. Materi Pre test Peserta Belum Paham Paham Design Web HTML 81 75 6 Tag-tag Dasar HTML 81 78 3 Sintaks Dasar 81 79 2 Penulisan Kode 81 79 2
Dari  hasil  post-test  tersebut,  dapat  ditarik  kesimpulan  bahwa  mayoritas  peserta  telah mengembangkan pemahaman  yang  kuat  dalam  bidang  Design  Web  HTML,  Tag  Dasar HTML,  Sintaks  Dasar,  dan  Penulisan  Kode  HTML.  Oleh  karena  itu,  kegiatan  "Goes  to School"  dengan  fokus  pada  pemanfaatan  HTML  perlu  difokuskan  pada  penjelasan  yang lebih rinci dan latihan praktis untuk peserta.

## 3.  HASIL DAN PEMBAHASAN
Setelah penelitian tindakan kelas (PTK) selesai dibuat,hasil evaluasi ditunjukkan melalui table 3. Berikut :
Tabel 3. Hasil evaluasi
Tabel ini memberikan perbandingan antara kondisi sebelum pelatihan HTML dilakukan dan  kondisi  setelah  siswa  mengikuti  pelatihan.  Hal  ini  mencakup  aspek  pemahaman  konsep, penguasaan  tag  HTML,  kemampuan  mengatur  tata  letak,  pemahaman  prinsip  desain  web, kreativitas dalam merancang tampilan web, kemampuan mengintegrasikan media, responsivitas halaman  web,  kualitas  desain  halaman  web,  dan  kemampuan  mengoptimalkan  tampilan  web. Perbandingan ini menunjukkan peningkatan yang signifikan dalam sebagian besar aspek setelah pelatihan HTML dilakukan.
Hasil yang dicapai dalam pelaksanaan kegiatan "Goes to School" adalah sebagai berikut:
1. Siswa  telah  mengembangkan  pemahaman  tentang  prinsip  dasar  HTML,  termasuk struktur  dasar, tag-tag  dasar,  atribut,  dan  penggunaannya.  Mereka  dapat  menjelaskan konsep-konsep  HTML  secara  jelas  dan  memahami  cara  kerja  HTML  dalam membangun sebuah situs web.
2. Siswa  mampu  menulis  kode  HTML  yang  valid  dan  terstruktur  dengan  benar. Mereka memahami sintaksis  HTML  dan  dapat  mengatur  elemen-elemen  dalam  halaman  web menggunakan tag-tag yang tepat.
3. Hasil  dari  kegiatan  "Goes  to  School"  yang  diikuti  oleh  81  peserta  dengan  tema Pemanfaatan  script HTML  dalam membangun  web  sederhana menunjukkan  bahwa 100% dari peserta telah mencapai tingkat kompetensi yang diharapkan.

## 4. KESIMPULAN DAN SARAN
Dalam  Kegiatan Goes  To  School  (GTS) ini,  siswa  SMA  N  3  Semarang  telah menunjukkan peningkatan yang signifikan dalam pemahaman dan penguasaan mereka terhadap HTML. Mereka dapat merancang dan membuat halaman web sederhana dengan  menggunakan tag  HTML,  styling  CSS,  dan  pengaturan  tata  letak  yang  baik.  Pelatihan  ini juga  telah  berhasil mengembangkan  kreativitas  siswa  dalam  merancang  tampilan  web  yang  menarik  dan fungsional. Kesimpulannya, implementasi pelatihan HTML pada siswa SMA N 3 Semarang telah membawa  manfaat  yang  signifikan  dalam  meningkatkan  pemahaman,  keterampilan  teknologi, kreativitas, dan kemampuan siswa dalam pengembangan web. Pelatihan ini memberikan pondasi yang  kuat  bagi  siswa  untuk  mengembangkan  diri  dan  berkontribusi  dalam  industri  teknologi informasi yang terus berkembang.

## DAFTAR PUSTAKA
[1] Smith, J. (2017). Introduction to HTML: A Comprehensive Guide. Publisher XYZ.
[2]  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).
[3] Brown,  R.  (2018).  HTML  Mastery:  Master  the  Art  of  Creating  Interactive  Websites. Publisher ABC.
[4]  Johnson,  M.  (2019).  Teaching  HTML:  Strategies  for  Engaging  High  School Students.Journal of Educational Technology, 25(2), 123-135.
[5]  Hartono,  H.,  Darmansyah,  S.,  Pratama,  S.,  Harahap,  F.,  &  Adawiah,  R.  (2021).  Pelatihan Pembuatan Web Sederhana Menggunakan Notepad++. PUBLIDIMAS (Publikasi Pengabdian Masyarakat) , 1 (2), 126-131.
[6] Suryana, T. (2021). Materi 1. Pengenalan Html Web Browser Dan Text Editor.
[7]  Nasution,  F.  P.,  Batubara,  R.  O.,  &  Maulana,  M.  I.  (2022).  Dasar  Pengenalan  HTML  pada Desain Web. PUBLIDIMAS (Publikasi Pengabdian Masyarakat), 2(1), 86-91.
[8]  Anderson, L. (2020). Enhancing Creativity through HTML Training: A Case Study of High
School Students. International Journal of Technology and Education, 12(3), 67-82.
[9]  Roberts,  S.  (2021).  The  Impact  of  HTML  Training  on  Students'  Technological  Skills:  A Comparative Study. Journal of Information Technology Education, 18(1), 45-58.
[10] Ministry of Education. (2022). Curriculum Guidelines for Computer Science Education.
Ministry of Education Publications.
[11] W3Schools. (2023). HTML Tutorial. Retrieved from https://www.w3schools.com/html/