## Journal of Community Service
Volume 4, Issue 1, June 2022
P-ISSN 2715-2901 E-ISSN 2715-291X
Open Access at : https://idm.or.id/JCS/index.php/JCS

## PELATIHAN DASAR PEMBUATAN FRAME DAN MARQUEE PADA PEMROGRAMAN WEB

## BASIC TRAINING OF FRAME AND MARQUEE MAKING ON WEB PROGRAMMING
Wulan Dari 1 , Siti Aliyah 2 , Maulidza Zahira 3
1) Sistem Informasi,  Universitas Potensi Utama. E-mail: ulandari2796@gmail.com
2) Sistem Informasi,  Universitas Potensi Utama. E-mail: aliyahsiti478@gmail.com
3) Sistem Informasi,  Universitas Potensi Utama. E-mail: maulidza_za@gmail.com

## INFO ARTIKEL ABSTRAK
Koresponden Wulan Dari ulandari2796@gmail
.com
Kata kunci
Web,  Frame,
Marquee
Website: http://idm.or.id/JCS
Hal: 063 - 072
Situs  web  dapat  menjadi  sebuah  karya  individu,  atau menunjukkan  kepemilikan  Organisasi  atau  perusahaan pemerintah.  Biasanya  mengacu  pada  atau  beberapa  topik,  atau minat  seperti  jasa  online.  Dengan  jaringan  membantu meningkatkan  pengetahuan  pada  web  yang  dapat  dilakukan secara  online  melalui  Web.  HTML merupakan versi yang dapat diterima  secara  luas,  termasuk  dengan  apa  yang  disebut Cascading  Style  Sheets  (CSS)  dengan  bagian  tertentu  dari  kode HTML  yang  di  sebut  tag.  HTML  terdiri  dari  teks,  yang merupakan  isi  dari  halaman  web,  dan  tag  yang  menentukan penampilan  dan  tata  letak  halaman  tersebut.  Melalui pelatihan ini  pada  Sekolah  SMK  Swasta  Harapan  Al-Washliyah, diharapkan dapat meningkatkan pengetahuan dan pengalaman siswa/i dalam membuat web untuk pelatiahn dasar pembuatan frame dan marque pada pemrograman web dengan sangat baik.
Copyright © 2022JCS. All rights reserved .

## ARTICLE INFO ABSTRACT
Keywords:
Wulan  Dari ulandari2796@gma il.com Keywords: Web, Frame, Marquee Website: http://idm.or.id/JCS
Page:  063 - 072
The  website  can  be  an  individual  work,  or  indicate  ownership  of  a government  organization  or  company.  Usually  refers  to  one  or  more topics,  or  interests  such  as  online  services.  With  the  network  helps increase  knowledge  on  the  web  that  can  be  done  online  via  the  Web. HTML  is  a  widely  accepted  version,  including  so-called  Cascading Style  Sheets  (CSS)  with  certain  sections  of  HTML  code  called  tags. HTML  consists  of  text,  which  is  the  content  of  a  web  page,  and  tags that  define  the  appearance  and  layout  of  the  page.  Through  this training  at  the  Harapan  Al-Washliyah  Vocational  School,  it  is  hoped that  it  can  improve  students' knowledge and experience in making web for  basic  training  in  making  frames and marques in web programming very well.
Copyright © 2022JCS. All rights reserved .

## PENDAHULUAN
Pilihan menggunakan program desktop atau program berbasis Web ditentukan oleh kebutuhan  dan  implementasinya.  Jika  implementasinya  hanya  untuk  lingkungan perusahaan yang berada di satu tempat, program sebaiknya menggunakan program berbasis  desktop.  Namun,  jika  perusahaan  memiliki  lokasi  terpisah  di  beberapa daerah, penggunaan program berbasis web lebih tepat.
Situs web dapat menjadi karya individu, atau menunjukkan kepemilikan Organisasi atau perusahaan pemerintah. Biasanya diskusi mengacu pada atau beberapa topik, pembelajaran.  Dengan  jaringan  membantu  meningkatkan  pelatihan  dasar pembuatan  frame  dan  marquee  pada  pemrograman  web.  Merupakan  isi  dari halaman  web,  dan  tag  yang  menentukan  penampilan  dan  tata  letak  halaman tersebut. Lembaga Penelitian dan Pengabdian Masyarakat Universitas Potensi Utama bertanggung  jawab  mengembangkan  dan  menyebarluaskan  ilmu  pengetahuan teknologi  dan  mengupayakan penggunaannya untuk meningkatkan keterampilan masyarakat dalam pengetahuan teknologi tersebut.
Di sini penulis mengajukan diri untuk mengabdikan Pelatihan Web Sebagai Media Pembalajaran Dalam Pembuatan Sistem Penjualan Buku pada sekolah SMK Swasta Harapan  Al-Washliyah sebagai  program  pengabdian  masyarakat.  Lembaga Penelitian  dan  Pengabdian  Masyarakat  Universitas  Potensi  Utama  bertanggung jawab  mengembangkan  dan  menyebarkan  ilmu  pengetahuan  teknologi,  serta mengupayakan penggunaannya untuk meningkatkan taraf kehidupan masyarakat dan  memperkaya  kebudayaan nasional. Dari penjelasan di atas tentu diharapkan agar para siswa/siswi di sekolah SMK Swasta Harapan Al-Washliyah harus selalu
meningkatkan  kualitas  pembelajaran  dan  penggunaan  dalam  menggunakan teknologi.
Berdasarkan  uraian  tersebut  mengapa  pelatihan  ini  penting  dan  perlu  dilakukan kepada siswa/siswi di sekolah SMK Swasta Harapan Al-Washliyah terutama bagi yang belum menguasai penggunaan HTML dalam pembuatan web.

## METODE PELAKSANAAN
Metode  yang  digunakan  dalam  penelitian  ini  adalah metode eksperimen. Metode eksperimen yaitu dalam bentuk pelatihan dasar pembuatan frame dan marquee pada pemrograman  web.  Diharapkan  dengan  adanya  metode  eksperimen  siswa/siswi memiliki kemampuan untuk berlatih merancang dan membuat web secara mandiri. Metode  yang  digunakan  pada  kegiatan  ini  dapat diperinci sesuai dengan Tabel 1 berikut.

## Tabel 1. Metode dan Materi Kegiatan
No Materi Metode Kegiatan 1. Pretest Tes Individu 2. Sekilas tentang internet dan website Ceramah, diskusi 3. Pemahaman tentang HTML dan CSS Ceramah, diskusi
4. Penjelasan menggunakan aplikasi notepad Tutorial, praktek
5. Penjelasan Kode  atau Script
Ceramah, diskusi, Tutorial, praktek
6. Implementasi Script, HTML dan CSS Tutorial, praktek
7. Review  Materi Diskusi, tanya jawab

## HASIL DAN PEMBAHASAN
HTML merupakan sebuah aplikasi versi yang dapat diterima secara luas, termasuk dengan  apa  yang  disebut  Cascading  Style  Sheets  (CSS).  CSS  memastikan  dalam pengembang web untuk menentukan banyak karakteristik gaya seperti font, warna, dan spasi dengan bagian dari kode HTML yang di sebut tag. Hal ini memungkinkan dalam kecepatan, konsisten, yang dapat lihat di seluruh situs web. World Wide Web Consortium  (W3C)  melakukan  pengembangan  standar  HTML  bertujuan  untuk memastikan keseragam di seluruh dunia. HTML terdiri dari teks, yang merupakan isi dari halaman web, dan tag, yang menentukan penampilan dan tata letak halaman tersebut.
Website  adalah  sebuah  kumpulan  halaman pada suatu domain di dalam internet yang  dibuat  dengan  tujuan  tertentu  dan  saling  berhubungan  serta  dapat diakses secara luas melalui halaman depan (home page) menggunakan sebuah browser dan terdiri dari URL.
HTML  sebenarnya  bukanlah  bahasa  pemrograman,  artinya  HTML  tidak  punya kemampuan untuk membuat fungsionalitas yang dinamis.

## 1.Buka file baru pada notepad++
2.Masukkan kode di bawah ini.
3.Save file notepadnya dalam folder pelatihan pembuatan frame dan marquee nama index.html
Contoh kode atau script membuat pelatihan marquee.
<html> <html> <head>
<title>Atribut Width dan Height di Tag Marquee</title> </head> <body> <marquee width="500" height="40">Teks ini berjalan</marquee> </body>
</html>
Setelah  semua  selesai  membuat  script  simpan  dengan  nama  marquee.html, Kemudian buka browser , seperti google atau internet explorer hasilnya akan seperti gambar dibawah ini.
Gambar 1: Tampilan WEB Marquee Tulisan Berjalan
Contoh kode atau script membuat pelatihan frame
<html>
<html>
<head>
<title>Frame Vertical</title>
</head>
<frameset rows="25%, 50%, 25%">
<frame name="frame1" src="frame1.html"> <frame name="frame2" src="frame2.html"> <frame name="frame3" src="frame3.html">
</frameset>
</html>
Setelah  semua  selesai  membuat script simpan  dengan  nama  frame.html,
Kemudian  buka browser ,  seperti google atau internet  explorer hasilnya  akan seperti gambar dibawah ini.

## Gambar 2: Tampilan WEB Frame

## TABEL DAN GAMBAR
Kegiatan PKM yang dilakukan Tim Dosen Universitas Potensi utama Medan yaitu dengan judul Pelatihan Dasar Pembuatan Frame dan Marquee Pada Pemrograman Web berjalan dengan baik. Adapun tahapan dalam pelaksanaan pengabdian tersebut dapat dilihat pada tabel berikut.

## Tabel 2. Jadwal Kegiatan Pelaksanan Pengabdian Kepada Masyarakat
Tanggal Kegiatan Tempat Pemateri Keterangan 10 Juni 2022  Mencari lokasi Abdimas ke sekolah yang ada di Kota Medan SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Menentukan Lokasi Abdimas 14 Juni 2022  Menentukan  dan Menemukan Tempat Adimas dan Judul Abdimas yang diberikan ke kesekolah SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Menemukan Lokasi Abdimas
Lanjutan Tabel 2. Jadwal Kegiatan Pelaksanan Pengabdian Kepada Masyarakat
Tanggal Kegiatan Tempat Pemateri Keterangan 23 Juni 2022 Membuat  Proposal Abdimas SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Proposal Abdimas 25 Juni 2022  Mengajukan Proposal Abdimas Ke  Prodi untuk ditandatangani oleh Dekan Fakultas SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Persetujuan Proposal Abdimas ke Prodi 08 Juli 2022  Menyerahkan Proposal Abdimas yang telah di tandatangani Dekan Fakultas dan Ketua  LPPM Ke Bagian LPPM SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Penyerahan Proposal Abdimas ke Bagian LPPM 18 Juli 2022 Membuat  Modul Materi Abdimas SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Membuat Modul materi Abdimas 22 Juli 2022  Mengambil Surat Permohonan dan Menyerahkan ke  SMK Swasta Harapan Al- Washliyah SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Menyerahkan Surat Permohonan ke klinik 03 Agustus 2022 Mengambil Surat Balasan izin pelaksanaan Abdimas dari SMK Swasta Harapan Al-
Washliyah
untuk diserahkan ke bagian LPPM SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Menyerahkan Surat Balasan dari klinik ke LPPM 04 Agustus 2022 Mengambil Surat Tugas dan Daftar Hadir Peserta Abdimas di LPPM untuk Pelaksanaan Abdimas di SMK  Swasta Harapan Al- Washliyah SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Pengambilan Surat Tugas dan Daftar Hadir Peserta Abdimas 06 Agustus 2022 Pelatihan Dasar Pembutan Frame dan Marquee  pada Pemrograman Web Di
SMK  Swasta Harapan Al-
SMK  Swasta
Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Terlaksana

## Washliyah
Lanjutan Tabel 2. Jadwal Kegiatan Pelaksanan Pengabdian Kepada Masyarakat
Tanggal Kegiatan Tempat Pemateri Keterangan 08 Agustus 2022 Mengambil Surat Keterangan  Selesai Pelaksanaan Abdimas di SMK  Swasta Harapan Al- Washliyah SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Surat Keterangan Selesai 10 Agustus 2022 Membuat  Laporan Kegiatan Abdimas SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Laporan Abdimas 20 Agustus 2022 Menyerahkan Laporan Abdimas ke LPPM SMK  Swasta Harapan Al- Washliyah Wulan Dari, M.Kom,Siti Aliyah, M.Kom, dan Maulidza Zahira Penyerahan Laporan Abdimas

## Tabel 3. Tahapan Kegiatan Pelaksanaan Pengabdian Masyarakat
No Waktu Materi Bentuk Kegiatan Capaian Materi 1 13.00- 13.30WIB MelakukanPerkenalan Kepada Peserta Ceramah Peserta Mengenal Pemateri 2 13.30- 14.10WIB Menjelaskan web Ceramah Peserta Mengetahui dasar frame dan marquee 3 14.10-14.20 WIB Menampilkan Contoh pelatihan dasar pembuatan frame dan marquee pada pemrograman web Ceramah, Praktek  dan Diskusi Peserta Mengetahui dasar pembuatan frame dan marquee 4 14.20-14.25 WIB Menjelaskan Langkah- Langkah dasar pembutan frame dan marquee Ceramah, Praktek  dan Diskusi Peserta Mengetahui Langkah-Langkah Pembuatan frame dan marquee 6 14.25-14.35 WIB Menjalankan web pembutan frame dan marquee Ceramah, Praktek  dan Diskusi Peserta Mengetahui   Cara mengoprasikan dasar frame dan marquee

## Lanjutan Tabel 3. Tahapan Kegiatan Pelaksanaan Pengabdian Masyarakat
No Waktu Materi Bentuk Kegiatan Capaian Materi 7 14.35-15.00 WIB Menjelaskan Cara dasar pembuatan frame dan marquee Ceramah, Praktek  dan Diskusi Peserta Memahami Cara Menggunakan web 8 15.00-15.30 WIB Latihan dasar pembuatan frame dan marquee Ceramah, Praktek  dan Diskusi Peserta Mampu Membuat dasar frame dan marquee 9 15.30-16.00 WIB Penutup Ceramah Peserta dapat Memanfaatkan WEB untuk pelatihan dasar pembutan frame dan marquee
Gambar 2. Kegiatan Foto Bersama dengan Peserta Abdimas Berdasarkan wawancara, tanya jawab dan pengamatan langsung selama kegiatan berlangsung,  kegiatan  pengabdian pada masyarakat ini memberikan hasil sebagai berikut:
a. Meningkatnya pengetahuan dan pemahaman siswa/siswi dalam pelatihan dasar pembuatan frame dan marquee pada pemrograman web.
b. Memberikan  edukasi  dan  pemahaman  pada  siswa/siswi  dalam  manfaat penggunaan web.

## SIMPULAN
Berdasarkan  hasil  pelaksanaan  kegiatan  yang  telah  dilakukan,  dapat  ditarik simpulan sebagai berikut;
1. Pengetahuan  siswa/siswi  sekolah  SMK  Swasta  Harapan  Al-Washliyah tentang  web  secara  umum  tidak  memahami  sebelum  dilaksanakanannya pelatihan.
2. Penyampaian  tentang  web  kepada  peserta  pelatihan  dapat  meningkatkan pengetahuan  agar  para  siswa/siswi  lebih  kreatif  dalam  pelatihan  dasar pembuatan frame dan marquee dengan menggunakan web.

## UCAPAN TERIMAKASIH
Ucapan  terima  kasih  penulis  berikan  kepada  Bapak  Sugeng  Sutaryo,  ST,  selaku Kepala  Sekolah SMK Swasta Harapan Al-Washliyah yang telah memperbolehkan penulis  untu  melaksanakan  kegiatan abdimas di sekolah yang beliau kepalai, dan adek-adeknya  dari  kelas  XII  yang  mau  ikut  serta  berpartisipasi  dalam  kegiatan Abdimas  ini.  Kepada  LPPM  Universitas  Potensi  Uatama  yang  telah  membantu penulis dalam mempersiapkan hal-hal yang berkaitan dengan pelaksanaan Abdimas ini.  Juga  dengan  pihak-pihak  lainnya  yang  sudah  ikut  serta  dalam  pelaksanaan
Abdimas  yang tidak bisa penulis sebutkan satu-persatu, karena telah memberikan banyakan masukkan dan saran-saran dalam penyusunan artikel pengabdian ini.

## DAFTAR PUSTAKA
Nugroho, Bunafit. 2004. PHP dan MySQL dengan Editor Dreamweaver MX, Andi,
Yogyakarta.
Nugroho, Bunafit. 2008. Latihan Membuat Aplikasi Web PHP dan MySQL dengan Dreamweaver MX (6, 7, 2004) dan 8, Gava Media, Yogyakarta.
MADCOMS. 2004. Aplikasi Program PHP + MySQL untuk Membuat Website
Interaktif, Andi, Yogyakarta.
Meissa, Indra. 2009. Bikin Web Asik Ala Joomla  1.5, GagasMedia, Jakarta.
Akbar, Ali. 2005. Menguasai  Internet Plus Pembuatan Web, M2S Bandung, Bandung.
Jasmadi. 2004. Koleksi Template  Web dan Teknik  Pembuatannya, Andi, Yogyakarta.