## Perancangan Media Pembelajaran Matematika Berbasis WEB Menggunakan HTML dan CSS Kelas X di MAS M. Nadis bukittinggi
Mutiara Irce Marsela 1 , Gusnita Darmawati 2 , Sarwo Derta 3 , Firdaus Annas 4
1 Mahasiswa, Universitas Islam Negeri Sjech M. Djamil Djambek Bukittinggi ; e-mail: 1 mutiara.ircemarsela@gmail.com 2,3,4 Dosen, Universitas Islam Negeri Sjech M. Djamil Djambek Bukittinggi ; e-mail: 2 gusnitadarmawati@uinbukittinggi.ac.id , 5 sarwoderta75@gmail.com , 4 firdaus@uinbkttinggi.ac.id
(Received: Nopember 2024, Revised : Februari 2024, Accepied : April 2024)
Abstract —  The  need  for  learning  media  to  increase  the motivation  of  students  is  essential  to  make  them  more interested in understanding the material presented. Based on the  interview  results  with  a  Mathematics  teacher  at  MAs M.Nadis Bukittinggi, it was found that current mathematics learning still uses basic media to support learning. However, during the learning process, students tend to feel bored when receiving  the  material  taught,  resulting  in  less  than  optimal delivery of the material by the teacher. Therefore, the author was  interested  in  designing  learning  media  that  could  help students understand the material more easily. The purpose of this research is to produce a web-based Mathematics learning media  using  HTML  and  CSS  for  the  tenth  grade  at  MAs M.Nadis  Bukittinggi.  The  researcher  utilized  the  Research and  Development  (R&D)  approach.  They  applied  the Hannafin  and  Peck  development  model,  which  consists  of three stages: needs analysis, design, and development as well as implementation of learning. In this study, the product was tested through validity, practicality, and effectiveness. Based on  the  research  results,  it  can  be  concluded  that  this  web- based  Mathematics  learning  media  has  been  successfully designed  and  can  be  used  to  support  mathematics  learning. The product testing results conducted by the author showed that the validity test involving 3 experts produced a score of 0.82,  which  can  be  classified  as  a  very  valid  category.  The practicality test involving 2 practitioners produced a score of 0.84, which falls into the very high category. Meanwhile, the effectiveness  test  conducted  with  the  participation  of  11 evaluators  produced a score  of  0.89,  which can  be  classified into the very effective category.
Keyword:  Learning  Media,  HTML  and  CSS,  Research  and Development (R&D) method.
Intisari —  Kebutuhan  akan  media  pembelajaran  untuk meningkatkan  motivasi  belajar  peserta  didik  sangat diperlukan  agar  peserta  didik  lebih  tertarik  memahami materi  yang  disampaikan.  Berdasarkan  hasil  wawancara peneliti  dengan  guru  Matematika  di  MAs  M.Nadis Bukittinggi,  bahwa pembelajaran matematika saat ini masih menggunakan media seadanya dalam menunjang pembelajaran,  namun  dalam  proses  pembelajaran,  peserta didik  cenderung  merasa  jenuh  saat  menerima  materi  yang diajarkan,  sehingga  materi  yang  disampaika  guru  tidak optimal.  Oleh  karena  hal  tersebut,  penulis  merasa  tertarik untuk merancang media pembelajaran yang bisa membantu siswa  dalam  memahami  materi  pelajaran  dengan  lebih mudah.  Adapun  tujuan  penelitian  ini  adalah  untuk menghasilkan  media  pembelajaran  Matematika  berbasis Web menggunakan HTML dan CSS kelas X di MAs M.Nadis Bukittinggi. Peneliti memanfaatkan pendekatan pengembangan  atau  Research  and  Development  (R&D). Mereka  menerapkan  model  pengembangan  Hannafin  dan
Peck, yang terdiri dari tiga tahap: analisis kebutuhan, desain, dan pengembangan serta implementasi pembelajaran. Dalam penelitian  ini,  produk  diuji  melalui  validitas,  praktikalitas, dan  efektivitas.  Berdasarkan  hasil  penelitian  yang  telah dilakukan  dapat  disimpulkan  bahwa    media  pembelajaran matematika  berbasis  Web  ini  telah  berhasil  dirancang  dan dapat digunakan sebagai penunjang pembelajaran matematika.  Hasil  pengujian  produk  yang  dilakukan  oleh penulis menunjukkan bahwa uji validitas yang melibatkan 3 orang  ahli  menghasilkan  skor  sebesar  0,82,  yang  dapat digolongkan  sebagai  kategori sangat  valid.  Uji  praktikalitas dengan  melibatkan  2  praktisi  menghasilkan  skor  sebesar 0,84, yang termasuk dalam kategori sangat tinggi. Sedangkan uji  efektivitas  yang  dilakukan  dengan  partisipasi  dari  11 penilai  menghasilkan  skor  sebesar  0,89,  yang  dapat digolongkan ke dalam kategori sangat efektif.
Kata  Kunci : Media Pembelajaran, HTML dan  CSS,  metode Research and   Development (R&D).

## I. PENDAHULUAN
Pada  era  ini,  perkembangan  yang  menuju  proses teknologi yang serba digital membawa dampak yang cukup kuat  diberbagai lini kehidupan manusia.  Dalam  beberapa tahun  terakhir,  internet  telah  menyebabkan  dampak revolusioner  pada  otomatisasi  kantor  dan  mempengaruhi sistem  otomasi  industry  [1].  Dimasa  mendatang  peranan teknologi merupakan sektor dominan di dalam kehidupan, siapa a yang dapat t menguasai teknologi i maka dialah h yang akan n memimpin  di  dalam  dunia a nantinya  yang  mana teknologi sangat berperan dalam beberapa bidang, baik itu dalam bidang ekonomi, pemerintahan, bidang pendidikan dan lain sebagainya.
Tony y Bates (1995)
menyatakan n bahwa teknologi i dapat meningkatkan kualitas  dan  jangkauan n apabila  dipergunakan n secara bijak k untuk  pendidikan n dan n latihan,  dan mempunyai arti i yang sangat t penting bagi kesejahteraan n ekonomi [2].
Peran  pendidik  sangatlah  perlu  untuk  menguasai seluk  beluk  dalam  pendidikan,  bukan  berarti  semua pendidik  belum  menguasai,  namun  masih  perlu
perkembangan  yang  sesuai  akan  zamannya.  Karena diketahui  bahwa  secara  sistematis  hal  yang  berkaitan dengan  unsur  pendidikan  yaitu  tujuan  dan  metode penyampaian, dalam hal penyampaian diperlukan alat yang dapat  membantu  untuk  mencapai  hasil  yang  diinginkan seperti hardware  dan alat  bantu  software  atau  yang  biasa kita sebut dengan media a pembelajaran [3].
Media a pembelajaran  secara a umum  dapat  dipandang sebagai  alat t untuk  proses s belajar r mengajar.  Selanjutnya,
media a pembelajaran  adalah alat  atau  benda  yang g dapat
dimanfaatkan untuk merangsang
gagasan, p perasaan, p perhatian, dan n bakat atau u keterampilan  siswa  guna  meningkatkan  proses pembelajaran [4].
Menurut Education n Association (NEA),  media pembelajaran  sebagai i objek  yang g dapat t dimanipulasi  , dilihat, d didengar,  dibaca,  atau u didiskusikan,  beserta instrumen yang g digunakan secara a tepat d dalam kegiatan n belajar r mengajar, dapat t mempengaruhi efektivitas s program m pembelajaran [5].
Dengan adanya media pembelajaran maka pekerjaan yang  biasaanya  memerlukan  tenaga  yang  lebih  dalam melaksanakannya maka akan tergantikan dengan teknologi yang  lebih  efesien  seperti    mengandalkan  kemampuan mesin yang disebut dengan komputer [6].
PerkembangannIlmu pengetahuanndannTeknologi
(IPTEK)  saat  iniitidak  dipungkiri  bahwaaMatematika memeganggperan pentinggdalam bidanggpendidikan.
Desain  media  yang  baik  dapat  menunjukkan keefektifan  seorang  guru  dalam  meningkatkan  kualitas pembelajaran siswa, dengan matematika sebagai salahhsatu  disiplin  ilmuuyang  paling  penting g dipelajari.
Matematika a merupakan topik yang g sangat penting dalam kehidupan,  khususnya a dalam  bidang  pendidikan.  Hal l ini disebabkan n oleh fakta bahwa matematika a adalah ilmu u yang  menopang  semua i ilmu  lainnya.  Mengingat pentingnya  matematika a dalam  kehidupan n sehari-hari,
penekanan  yang  lebih  besar  harus  ditempatkan  pada pendidikan  matematika.  Menurut  Dewan  Nasional  Guru Matematika, t tujuan  pembelajaran matematika  di i sekolah adalah h untuk  meningkatkan pemahaman  matematika siswa, kemampuan n mereka untuk memecahkan
masalah h matematika, kepercayaan n diri mereka, sikap p mereka terhadap matematika, dan n tindakan mereka terhadap matematika. Namun karena tuntutan penguasaan matematika  yang  besar,  masih  belum  berhubungan langsung dengan n hasil belajar r matematika a siswa.
Banyak k siswa yang g tidak
menyadari i pentingnya matematika a dan masih h menganggapnya  sebagai i mata pelajaran n yang sulit t dan  menakutkan yang  hanya diperlukan  untuk  kelulusan.  Guru  dapat  menghasilkan pembelajaran  yang  berhasil  dengan  memadukan  teknik, metode,  dan  sumber  belajar  untuk  mengatasi  anggapan tersebut [7].
Fakta  yang  penulis  dapatkan  melalui  wawancara langsung  pada  tanggal  17  Oktober  2022  dengan  guru Matematika  di  MAs  M.Nadis  kelas  X  yaitu  Ibuk  Rhiski Ramadhani,  S.Pd,    bahwa  pembelajaran  matematika  saat ini masih menggunakan media seadanya dalam menunjang pembelajaran kelas X pada pembelajaran Matematika yaitu menggunakan n buku  ajar r dan lembar r kerja  siswa a (LKS).
Sedangkan
dalam m proses
pembelajaran n peserta didik k cendrung  bosan  dalam  menerima  materi i yang disampaikan, sehingga a materi yang disampaika guru tidak optimal.  Kebutuhan  akan  media  pembelajaran n untuk meningkatkan n motivasi belajar r peserta didik k sangat diperlukan agar peserta a didik lebih tertarik memahami i materi i yang disampaikan.
Mengimplementasikan Matematika kedalam proses pembelajaran diperlukan untuk mengembangkan kemampuan berfikir kreatif bagi siswa yang bertujuan agar berkembangnya kemampuan dalam pembelajaran tersebut. Oleh  karna  itu  guru  yang g memiliki  peran n penting untuk k mencapai i tujuan  pendidikan  tidak  hanya  dituntut memiliki  keahlian  khusus  melainkan  juga  menciptakan berbagai inovasi pembelajaran n yang sesuai i dengan kebutuhan n peserta  didik k yang  mana  akan  berdampak terhadap hasil evaluasi siswa yang memuaskan.
Sehubung g dengan  hal l di  atas s maka  penulis tertarik untuk k melakukan sebuah h penelitian n dengan judul: “Perancangan n Media  Pembelajaran Matematika  Berbasis
Web Menggunakan HTML dan CSS Kelas X Di MAs M.
Nadis Bukittinggi”.

## II. TINJAUAN PUSTAKA

## A. Media Pembelajaran
Media  pembelajaran  merupakan  sarana  yang  dapat  di lihat  dan  dirasakan  yang  berguna  untuk  menyampaikan informasi dan materi baik itu berupa buku, film, video dan sebagainya [8].

## B. HTML dan CSS
HyperrText  MarkupllLanguage  (HTML) merupakan bahasayyang  digunakan  untuk  menggambarkansstruktur halaman Web [9].
CascadingssStyle  Sheet  (CSS) Ini  adalah pedomannuntuk  mengaturbberbagai  komponen  dalam sebuahhsitus  web  agarmmenjadi  lebihtterstruktur  dan seragam. [9].

## C. Pembelajaran Matematika
Matematika
memiliki p peran
yang yy signifikan dalam m kehidupan,  terutama  dalam  konteks  pendidikan.
Hal  ini  disebabkan  oleh  peran  fundamental  matematika sebagai  dasar  bagi  berbagai  bidang  ilmu  pengetahuan lainnya  [10].  Matematika  merupakan  disiplin  ilmu  yang dapat  memajukan  kemampuan  berpikir  dan  berargumen, memberikan kontribusi dalam mengatasi tantangan sehari- hari  dan  lingkungan  profesional,  serta  mendukung perkembangan  dalam  berbagai  bidang  ilmu  pengetahuan dan teknologi [11].

## III. METODDOLOGI PENELITIAN

## A. Waktu dan Tempat Penelitian
Penelitian n ini dilakukan di i MAs M. Nadis
Bukittinggi i antara bulan n Maret sampai i dengan Juli 2023.
Lokasi penelitian dipilih berdasarkan keadaan dan fasilitas yang tersedia di sekolah tersebut, yang dapat mendukung pelaksanaan penelitian.

## B. Jenis Penelitian
Penulis melakukan penelitian jenis s penelitian dan n pengembangan, juga dikenal sebagai penelitian n dan pengembangan n (R&D).
R&D a adalah metode
penelitian y yang digunakan n untuk menghasilkam
produk tt tertentu dan menguji k keefektivan metode tersebut [12].
Penelitian
dan p pengembangan (R&D)
diartikan nn sebagai pendekatan pp penelitian yang bertujuan untuk mm menemukan, merancang, memperbaiki,
mengembangkan, menghasilkan, serta menguji efektivitas produk,  model,  metode,  atau  strategi  [13].  Model l pengembangan  yang g digunakan n dalam  penelitian n ini adalah h model pengembangan n Hannafin dan n Peck.
Model p pengembangan
dalam p penelitian ini menggunakan n model  Hannafin d dan  Peck,  model  ini terdiri d dari  tiga t tahap  yaitu a analisis  kebutuhan,  tahap desain n dan tahap p pengembangan dan n implementasi, ketiga a tahap terhubung g dalam kegiatan n “evaluasi dan r revisi” [14].
1. Fase e Analisis Kebutuhan
Tahap pertama dari teknik Hannafin dan Peck adalah analisis kebutuhan. Langkah pertama ini diperlukann untuk menjabarkan persyaratan pembuatan media pembelajaran, yang  meliputi  maksud  dan  tujuan  media  pembelajaran, pengetahuan  dan  keterampilan  yang  dibutuhkan  oleh khalayak  sasaran,  serta  kebutuhan  alat  dan  media pembelajaran.
1. Fase Desain
Tahap  berikutnya  dari  model  Hannafin  dan  Peck adalah tahap perancangan. Informasi i dari langkah analisis diterjemahkan ke e dalam bentuk k dokumen pada tingkat ini untuk  membuat  bahan  pembelajaran.  Tujuan  fase  ini adalah untuk menetapkan dan menjelaskan strategi terbaik untuk  memenuhi  tujuan  produksi  media.  Salah h satu dokumen y yang  dibuat  pada  tahap  ini  adalah  dokumen storyboard , yang mengikuti u urutan kegiatan pembelajaran yang ditentukan pada tahap analisis kebutuhan berdasarkan kebutuhan pembelajaran dan tujuan media pembelajaran.
2. Fase e Pengembangan dan n Implementasi
Tahap pengembangan nn dan implementasi merupakan n langkah
ketiga dalam paradigma
Hannafin dd dan nn Peck. Bahan ajar akan dibuat menggunakan  kertas storyboard .  Tahapan  ini  meliputi evaluasi  dan  pengujian  untuk  menilai  kelancaran  media serta  kesinambungan  koneksinya.  Hasil  penilaian  dan pengujian  metode  ini  akan  dimanfaatkan  dalam  proses peningkatan  guna  mencapai  tingkat  kualitas  media  yang diharapkan.

## C. Tahap Pengembangan
Tahap pengembangan disusun secara metodis dan berisi kegiatan-kegiatan. Beberapa metode pengembangan harus dilakukan dalam model pengembangan Hannafin dan Pack. Mereka adalah sebagai berikut: 1.Tahap Analisis Kebutuhan Padaatahap  iniiada  empatthal  yanggperlu  dianalisis kebutuhan  dilakukan  di  MAs  M.Nadis  Bukittinggi  yakni sebagai  berikut:  Analisis  permasalahan,  analisis  siswa, analisisstujuan, analisis setingppembelajaran. 2.Tahap Desain
Dalam  pembuatan  produk  media  pembelajaran,  langkah desain  dilakukan  setelah tahap  analisis  kebutuhan.  Fokus dari  tahap  perancangan  penelitian  ini  berpusat  pada pembuatan  kerangka  dasar  produk.  Pada  tahap  ini, langkah-langkah  berbagai  jenis telah  dilakukan,  terutama melibatkan  rancangan  struktur  navigasi,  rancangan  cerita visual (storyboard), dan rancangan antarmuka (interface). 3.Tahap Pengembangan dan Implementasi Fase ini dilakukan dengan tahapan sebagai berikut : Tahap Pengembangan  Produk,  testing,  uji  validitas,  uji praktikalitas, uji efektivitas

## D. Teknik Analisis Data
1. Uji v Validitas s Produk Validitas mm merupakan faktor pp pertama yang mempengaruhi kualitas pp produk kkk pembelajaran. Tentukan  tingkat  kebenaran  produk y yang d dihasilkan dengan m menggunakan  validitas ini.  Dalam  penelitian  ini dilakukan  uji  validitas  oleh  berbagai  pakar  (ahli)  guna mengembangkan  produk  berkualitas  yang  siap  untuk diteliti.  Data  angket tt uji  validitas ss diolah  menggunakan rumus s statistik k Aiken's  V dengan  cara  sebagai b berikut [15]:
V v = ∑ s/ s [ n m ( c c – 1)]
Keterangann: s      : t r-lo o lo o : Angka a penelitian validitas s yang g terendah c     : Angka a penelitian validitas s yang g tertinggi r      : Angka a yang diberikan n oleh seorang g penilai n     : Jumlah h penilai Berikut ini adalah tabel untuk menentukan hasil dari Validitas Aiken’s V [16]:
Tabel 1.  Kriteria p penentuan v validitas s Aiken’s V
Presentase % Kriteria a 0,60-1,00 Valid e <0,60 Tidak k Val id
2. Uji p Praktikaliatas p Produk Data h hasil  uji  praktikalitas  dianalisis  dengan presentase p per-ritme nya, seperti pada p persamaan berikut [15]:
Keterangan : k : Moment k kappa yang m menunjukkan tingkat kepraktisan p produk. p :  Proporsi y yang  terealisasi,  dihitung  dengan  cara jumlah n nilai  yang y diberikan  oleh  penguji  dibagi jumlah maksimal.
pe :  Proporsi  yang  belum  terwujud  dapat  dihitung dengan  mengurangkan  jumlah  total  yang  diberikan oleh penguji dari nilai maksimal, lalu hasilnya dibagi dengan nilai maksimal..
Berikut ini adalah tabel untuk menentukan hasil dari praktikalitas s Moment Kappa [17]: Tabel 2. k Kriteria p Penentuan n Praktikalitas s Moment Kappa
l Interval l Kategori o 0,81 – 1,00 o Sangat e tinggi o 0,61 – 0,80 o r Tinggi o 0,41 – 0,60 o e Sedang o 0,21 – 0,40 o e Rendah o 0,01 – 0,20 o Sangat e Rendah o ≤0,00 o Tidak k Praktis 3. Uji e Efektivitas e Produk Hasil angket tt uji efektivitas diolah dd dengan mengacu r rumus s statistik k Richard d R.  Hake  ( G-Score ) sebagai b berikut [15]:
Keterangan n : <g> n : n G-Score <Sf> o : n Score a akhir <Si> n : n Score a awal Kriteria a setiap  indikator r dari ll lembar  uji  sebagai berikut t : “High-g” efektivitas tinggi j jika mempunyai i (g) > 0.7 “Medium-g” efektivitas sedang k jika j mempunyai 0.7 (g) > 0.3;
“Low-g” efektivitas rendah h jika m mempunyai q (g) < 0.3.

## IV. HASIL PENELITIAN DAN PEMBAHASAN
A. Hasil Penelitian
1. Analisis s Kebutuhan
Pada tahap ini, penulis melakukan analisis kebutuhan melalui observasi dan wawancara. Penulis mengamati dan berbicara  dengan  sepuluh  siswa  dari  kelas  X  serta  guru matematika  di  MAs  M.Nadis  Bukittinggi  untuk mendapatkan informasi mengenai jenis media pembelajaran  yang  diperlukan  oleh  siswa  dalam  proses Kegiatan Belajar Mengajar (KBM).
a. Analisis Permasalahan Kegiatan pembelajaran matematika kelas X di MAS M.Nadis  Bukittinggi  kurang  efektif  dengan  hanya mengandalkan  media  LKS.  Dengan  hanya  menggunakan media  LKS  suasana  pembelajaran  membosankan,  siswa cepat merasa jenuh dalam mengikuti proses pembelajaran. b. Analisis Siswa Dengan hanya mengandalkan media buku ajar dan (LKS), Siswa merasa bosan dan kehilangan minat untuk mengikuti proses pembelajaran.
c. Analisis Tujuan Penulis  membuat  bahan  ajar  dengan  maksud  untuk membantu  atau  memperlancar  kegiatan  belajar  mengajar dalam rangka memenuhi tujuan pembelajaran. Membantu atau  memfasilitasi  dalam  konteks  ini  mengacu  pada bagaimana  alat  pendidikan  ini  membantu  guru  dalam membuat  rencana  pelajaran  mereka  lebih  menarik, menyenangkan, dan dapat dipahami oleh siswa mereka.
d. Analisis Seting Pembelajaran
Kegiatan pembelajaran matematika di MAs M.Nadis Bukittinggi  kurang  efektif  dengan  hanya  mengandalkan media  LKS.  Dengan  hanya  menggunakan  media  LKS suasana  pembelajaran  membosankan,  siswa  cepat  merasa jenuh  dalam  mengikuti  proses  pembelajaran.  Sedangkan guru  dituntut  untuk  membuat  suasana  pembelajaran haruslah  tetap  hidup  dan  semangat  siswa  dalam  belajar terus meningkat.

## 2. Desain
Tahap  desain merupakan  tahap  perancangan  produk media  pembelajaran  setelah  melakukan  tahap  analisis kebutuhan.  Tahap  perancangan  dalam  penelitian  ini diarahkan n pada pembuatan n rancangan awal p produk. Pada t tahap ini, dilakukan p perencanaan struktur nn navigasi, pengembangan cc cerita visual
( storyboard ), dan a antarmuka ( interface ). . a. Desain n Struktur r Navigasi Gambar berikut merupakan bentuk susunan struktur n navigasi i menu u utama.
Gambar e 1. s Struktur n navigasi i menu Gambar 1 menjelaskan n struktur navigasi d dari menu yaitu u dimulai dari tampilan m menu utama yang terdiri dari Tujuan Pembelajaran, Materi, Latihan dan Petunjuk.
Gambar  berikut merupakan  bentuk  susunan  struktur navigasi menu materi.
Gambar r 2. s Struktur n Navigasi i Materi
Gambar 2 menjelaskan struktur navigasi materi yaitu dimulai dari menu, materi, sub-sub materi.
b. Desain n Storyboard Storyboard dihasilkan  untuk  memberikan  gambaran tentang adegan, elemen visual yang direncanakan, elemen audio, durasi, skrip tindakan, dan penjelasan lebih lanjut. Hasil  dari  proses  perancangan  storyboard  akan  menjadi panduan dalam mengembangkan tampilan. Tahapan awal dalam storyboard adalah  menu,  diikuti  oleh  adegan pembelajaran,  pemaparan  materi,  latihan,  petunjuk,  dan video.  Rangkuman  perancangan storyboard untuk  setiap adegan dapat ditemukan dalam tabel berikut ini.:
Tabel 2. Storyboard ringkas Scene 1 Menu Scene 2 Tujuan Pembelajaran Scene 3 Materi Scene 4 Latihan Scene 5 Petunjuk Scene 6 Vidio
c. Desain Tampilan ( Interface )
Aplikasi ini ditargetkan untuk digunakan oleh siswa tingkat  SMA  dan  setingkatnya,  sehingga  desain  yang dihasilkan harus menarik agar siswa merasa tertarik dalam menggunakan media pembelajaran informatika ini. Berikut ini  adalah  gambaran  antarmuka  ( interface )  yang direncanakan untuk aplikasi tersebut :
Gambar 3. Scene 1 (Menu)
Gambar 4. Scene 2 (Tujuan pembelajaran)
Gambar 5. Scene 3 (Materi)
Gambar 6. Scene 4 (Latihan) Gambar 7. Scene 5 (Petunjuk) Gambar 8. Scene 6 (Vidio) 3. Pengembangan dan Implementasi
a. Pengembangan Produk
Pada  langkah  ini,  dilakukan  proses  pengembangan setiap  elemen  menjadi  sebuah  produk  pengembangan, yakni  pembuatan  media  pembelajaran  matematika menggunakan  bahasa HTML dan CSS .  Tahap  ini  juga dikenal  sebagai  tahap  produksi,  yang  mengubah  konsep menjadi  program  yang  terdiri  dari  teks,  gambar,  dan animasi.  Dalam  hal  ini,  program  ini  merupakan  hasil produk  media  pembelajaran  matematika  yang  dibuat dengan menggunakan HTML dan CSS .
Gambar  berikut  merupakan  Tampilan  Hasil  Media Pembelajaran Informatika:
Gambar 9. Tampilan menu
Gambar 9 di atas adalah tampilan menu utama. Menu yang terdiri dari Tujuan Pembelajaran, Materi, Latihan dan
Petunjuk.  Terdapat button pencarian  untuk browsing ke internet.
Gambar 10. Tampilan petunjuk Di  dalam  menu  terdapat  berbagai  tombol,  termasuk tombol  yang  disebut  petunjuk.  Jika  tombol  petunjuk  ini diaktifkan  dengan  mengkliknya,  maka  akan  muncul tampilan yang mirip dengan gambar 10 yang terlihat di atas. Pada  petunjuk  tersebut  dijelaskan  petunjuk  penggunaan media  mulai  dari  pertama  kali menjalakan  sampai  keluar dari  media  pembelajaran.  Terdapat button home  dan pencarian untuk browsing ke internet.
Gambar 11. Tampilan menu materi Gambar 11 di atas merupakan tampilan menu materi yang  terdiri  dari  7  materi.  Materi  yang  terdapat  pada tampilan  tersebut  sudah  sesuai  dengan  silabus  mata pelajaran matematika kelas X di MAs M.Nadis Bukittinggi. Terdapat button home untuk kembali ke menu utama dan button pencarian untuk browsing ke internet.
Gambar 12. Tampilan materi 1 Persamaan dan PTLSV Yang Memuat Nilai Mutlak Gambar 12 di atas adalah tampilan dari isi Persamaan dan  PTLSV  Yang  Memuat  Nilai  Mutlak,  pada  tampilan terdapat button materi  untuk  menuju  kemateri  lainya, button  home untuk  kembali  ke  menu  utama, button pencarian  untuk browsing ke  internet  dan button vidio/ youtube yang berada di kiri bawah materi  yang berisi vidio pembelajaran.
Gambar 13. Tampilan Pembelajaran Vidio
Gambar  13  di  atas  merupakan  tampilan  vidio pembelajaran  dimana  jika  dengan  menekan button vidio pada tampilan materi maka  akan  diarahkan  pada youtube tentang  vidio  pembelajaran,  vidio  pembelajaran  ini terdapat dimasing masing materi.
Gambar 14. Tampilan latihan Gambar 14 di atas merupakan tampilan menu latihan. Di dalam menu latihan ini terdapat 7 latihan, siswa dapat menjawab soal essay yang ditampilkan.
b. Testing
Tahap  pengujian  media  pembelajaran  matematika dikenal  sebagai testing .  Jika  terdapat  kekurangan,  maka media  pembelajaran  matematika  akan  direvisi,  dan  jika sudah  berjalan  tanpa  masalah.  Pada  tahap  ini,  media pembelajaran  matematika  diuji  dengan  metode blackbox. Pengujian  dengan  pendekatan blackbox merupakan evaluasi  antarmuka  perangkat  lunak,  dimana  pengujian bertujuan  untuk  memastikan  fungsi-fungsi  beroperasi secara benar. Ini berarti bahwa masukan diterima dengan akurat dan keluaran yang dihasilkan sesuai. Pengujian juga meliputi integrasi  dengan elemen eksternal dan memastikan keterkaitannya berjalan dengan baik. Setelah serangkaian  pengujian  dilakukan,  output  yang  dihasilkan oleh  media  pembelajaran  akan  dievaluasi.  menggunakan HTML dan CSS pada mata pelajaran matematika ini sesuai dengan perancangan.
c. Uji Validitas
Hasil validitas dievaluasi oleh tiga ahli dalam aspek materi media pembelajaran, kebahasaan, dan desain media pembelajaran.  Penilaian  validitas  dari  tiga  ahli  adalah sebagai  berikut:  Bapak  Riri  Okra,  M.Kom,  seorang  ahli dalam ilmu komputer, memberikan skor 0,83; Ibuk Rhiski Ramadhani,  S.Pd,  seorang  ahli  dalam  ilmu  Matematika, memberikan  skor  0,87;  serta  Ibuk  Aksesio  Rizanti,  S.Pd, seorang  ahli  dalam  ilmu  bahasa,  memberikan  skor  0,78. Hasil  dari  lembaran  validitas  yang  diberikan  oleh  ketiga ahli  ini  dihitung  dengan  menggunakan  rumus  statistik Aiken's dan menghasilkan nilai akhir sebesar 0,82. Dengan demikian,  dapat  disimpulkan  bahwa  media  pembelajaran berbasis web ini memiliki validitas yang sangat baik. d. Uji Praktikalitas
Uji  praktikalitas  produk  penelitian  ini  ditujukan kepada  guru  mata  pelajaran  Matematika.  Setelah melakukan perhitungan pada lembar evaluasi praktikalitas yang dilakukan oleh Ibuk Rhiski Ramadhani, S.Pd dengan skor  0,89  dan  Bapak  Fetriadi,  S.Pd  dengan  skor  0,79, diperoleh  nilai  akhir  sebesar  0,84  setelah  penerapan moment  kappa.  Hasil  ini  menunjukkan  bahwa  tingkat praktikalitas produk ini sangat tinggi..
e. Uji e Efektivitas Evaluasi  efektivitas  produk  ini  dilakukan  dengan menerapkan metode statistik Richard R. Hake (G-Sscore). Pengujian  efektivitas  aplikasi  ini  melibatkan  lembar penilaian efektivitas yang dinilai oleh sebelas peserta didik. Dengan  nilai  akhir  efektivitas  mencapai  0,89,  maka
aplikasi berbasis Android ini dianggap memiliki efektivitas yang tinggi.

## 4.1. Pembahasan
Penelitian  ini  berkesesuaian  dengan  kajian  yang dilakukan  oleh  Lalu  Puji  Indra  Kharisma  dan  Yunita Happy Yana, yang juga menerapkan metode penelitian dan pengembangan Research and Development (R&D). Dalam penyelidikan ini, diterapkan model pengembangan DDD- E yang meliputi langkah-langkah decide, design, develop, dan evaluate . Instrumen yang digunakan untuk mengumpulkan  informasi  termasuk  penelaahan  literatur, analisis  sistem,  serta  ujian  perolehan  data.  Output  dari eksplorasi  ini  adalah  produk  dalam  bentuk  media pembelajaran  Matematika  yang  berfokus  pada  aspek bangun  datar  dan  bangun  ruang,  yang  dikembangkan melalui  platform  web  untuk  tingkat  sekolah  dasar. Pembedaan dalam penelitian ini adalah penggunaan model DDD-E  dan  juga  perangkat  CMS  ( Content  Management System ), XAMPP  Control ,  serta Visual  Studio  Code , sedangkan  penulis  studi  ini  menerapkan  model  Hanafin and Peck..
Penelitian  yang  dilakukan  oleh  Prihayuda  Tatang Aditya  menerapkan  metode Research  and  Development (R&D)  yang  telah  dikembangkan  oleh  Sugiyono.  Model pengembangan  penelitian  yang  diterapkan  adalah  model DDD-E  yang  terdiri  dari  tahap-tahap decide,  design, develop ,  dan evaluate .  Hasil  dari  penelitian  ini  berupa produk  media  pembelajaran  Matematika  berbasis  web yang difokuskan pada materi lingkaran untuk siswa kelas VIII. Sementara itu, model pengembangan yang digunakan oleh penulis adalah Hanafin and Peck..
Penelitian  yang  dilakukan  oleh  Rohmad  Wahid Rhomdani merupakan suatu bentuk riset dan pengembangan  ( research  and  development ).  Model pengembangan  yang  diterapkan  dalam  penelitian  ini mengikuti langkah-langkah yang dijelaskan oleh Borg dan Gall, yaitu: (1) Pengumpulan informasi dan data penelitian, (2)  Perencanaan,  (3)  Pembentukan  draf  awal  produk,  (4) Pengujian  lapangan  awal,  (5)  Revisi  utama  berdasarkan hasil  pengujian,  (6)  Pengujian  lapangan  utama,  (7) Peningkatan akhir produk, (8) Penyebaran, publikasi, dan pelaksanaan.
Produk yang dihasilkan dari penelitian ini berbentuk media pembelajaran Matematika dengan pendekatan Web Menggunakan Blogmath (Blogger & Mathjax) di MTsN 5 Arjasa Jember. Sementara itu, model pengembangan yang diterapkan oleh penulis adalah Hanafin and Peck.

## V. PENUTUP
A. Kesimpulan Berdasarkan analisis dan diskusi yang telah dipaparkan pada  bab  sebelumnya,  dapat  disimpulkan  bahwa rancangan  media  pembelajaran  matematika  berbasis web ini  telah  berhasil  dibuat  dengan  menggunakan HTML dan CSS , menghasilkan output berupa tautan ke berkas  Aplikasi.  Kehadiran  media  pembelajaran matematika  ini  diharapkan  mampu  memberikan dukungan kepada para guru dalam menjelaskan konsep matematika,  memberikan  bantuan  kepada  siswa, khususnya  siswa  MAs  M.  Nadis  Bukittinggi,  dalam memahami  pelajaran  matematika,  meningkatkan semangat  siswa  dalam  belajar  matematika,  serta
merangsang  minat  siswa  untuk  mendalami  mata pelajaran matematika.
B. Saran Perlunya  keamanan  system  dalam  berhasil  dibuat dengan  menggunakan HTML dan CSS ,  menghasilkan output berupa tautan ke berkas Aplikasi

## D AFTAR P USTAKA
[1] H.  Sufi,  D.  W.  Utomo,  and  G.  Darmawati,  “Sistem Pakar
Rekomendasi Menu Makanan Sehat Penderita Penyakit dengan Metode Forward Chaining,” J. KomtekInfo , vol. 10, no. 1, pp. 8–14, 2023, doi: 10.35134/komtekinfo.v10i1.320.
[2] T. Nurseto, “Membuat Media Pembelajaran yang Menarik,” J. Ekon.  dan  Pendidik. ,  vol.  8,  no.  1,  pp.  19–35,  2012,  doi: 10.21831/jep.v8i1.706.
[3] I.  Falahudin,  “Pemanfaatan  Media  dalam  Pembelajaran,” J. Lingk. Widyaiswara , vol. 1, no. 4, pp. 104–117, 2014.
[4] P.  N.  Apsari  and  S.  Rizki,  “Media  Pembelajaran  Matematika Berbasis  Android  Pada  Materi  Program  Linear,” J.  Pendidik.
Mat. FKIP , vol. 7, no. 1, pp. 29–32, 2018.
[5] A.  Pratomo  and  A.  Irawan,  “Pengembangan  Media Pembelajaran  Interaktif  Berbasis  Web  Menggunakan  Metode Hannafin dan Peck,” J. Positif , vol. 1, no. 1, pp. 14–28, 2015.
[6] A.  Kausar,  Y.  F.  Sutiawan,  and  V.  Rosalina,  “Perancangan
Video  Company  Profile  Kota  Serang  Dengan  Teknik  Editing
Menggunakan Adobe Premier Pro Cs 5,” J. PROSISKO , vol. 2, no. 1, pp. 19–26, 2015.
[7] M. S.  Mustaqbal, R. F.  Firdaus, and H. Rahmadi, “Pengujian
Aplikasi  Menggunakan  Black  Box  Testing  Boundary  Value Analysis  (Studi  Kasus :  Aplikasi  Prediksi  Kelulusan SNMPTN),” J. Ilm. Teknol. Inf. Terap. , vol. I, no. 3, pp. 31–36, 2015.
[8] N.  L.  P.  Ekayani,  “Pentingnya  Penggunaan  Media Pembelajaran  Untuk  Meningkatkan  Prestasi  Belajar  Siswa,” Researchgate , vol. 5, no. 2, pp. 1–16, 2017, [Online]. Available: https://www.researchgate.net/publication/315105651.
[9] A.  Saputra  and  D.  Y.  Astuti,  “Analisis  Pengaruh  Struktur HTML  Terhadap  Rangking  Search  Engine  Result  Page,” J. Mantik  Penusa ,  vol.  2,  no.  2,  pp.  34–67,  2018,  [Online]. Available: https://google.co.id.
[10] D.  Rosmayanti  and  L.  S.  Zanthy,  “Pengembangan  Media Pembelajaran  Berbasis  Visual  Basic  Application  Powerpoint Pada  Materi  Sistem  Persamaan  Linear  Dua  Variabel,” JPMI
(Jurnal  Pembelajaran  Mat. Inov. ,  vol. 2,  no. 6, p. 401, 2019, doi: 10.22460/jpmi.v2i6.p401-414.
[11] F.  Lismawarti  and  S.  Derta,  “Evaluasi  Pengembangan  LKS
Berbasis  Pendekatan  Problem  Based  Learning  (  PBL  )  Pada Materi  Program  Linear  di  SMA  Muhammadiyah  Padang panjang,” J. Inf. Syst. Educ. Dev. , vol. 1, no. 1, pp. 13–16, 2023.
[12] S. W. Harisa, R. Okra, H. A. Musril, S. Derta, and F. Tarbiyah, “Perancangan  Game  Edukasi  Matematika  Menggunakan Construct 2 Untuk Kelas VII di SMPN 1 Lareh Sago Halaban,” J. Tek. Mesin, Ind. Elektro Dan Inform. , vol. 2, no. 2, pp. 77– 92, 2023.
[13] R. Salfina, H. A. Musril, R. Okra, and S. Derta, “Perancangan
Game  Edukasi  untuk  Mata  Pelajaran  Bahasa  Jepang  Kelas  X Menggunakan Aplikasi Educandy di SMKN 4 Payakumbuh,” J.
Inf. Syst. Educ. Dev. , vol. 1, no. 1, pp. 1–7, 2023.
[14] E. L. Putri, S. Derta, H. A. Musril, and R. Okra, “Perancangan Media Pembelajaran IPA Kelas VII Berbentuk Game Edukasi Menggunakan  Aplikasi Construct 2  di SMPN 7 Bukittinggi,”
Inf. Manag. Educ. Prof. , vol. 7, no. 2, pp. 194–203, 2023.
[15] L.  Efriyanti,  Supriadi,  H.  A.  Musril,  and  S.  M.  Dewi,
“Perancangan  Media Pembelajaran  TIK Kelas XI Menggunakan Google Sites Di SMA Negeri 1 Junjung Sirih,”
J. Ilmu Pendidik. , vol. 2, no. 1, pp. 164–175, 2022.
[16] M. Ikhbal and H. A. Musril, “Perancangan Media Pembelajaran Fisika Berbasis Android,” Inf. Manag. Educ. Prof. , vol. 5, no. 1, pp. 15–24, 2020.
[17] A. N. Khomarudin, L. Efriyanti, and M. Tafsir, “Pengembangan Media  Pembelajaran  Mobile  Learning Berbasis  Android  Pada Mata Kuliah Kecerdasan Buatan,” J. Educ. Stud. , vol. 3, no. 1, pp. 72–87, 2018.