Panduan Penyerahan Makalah Ilmiah dengan Ukuran Huruf untuk

ISSN : 2301-9425
Pelita Informatika Budi Darma, Volume III, Maret 2013
PERANCANGAN APLIKASI PEMBELAJARAN CASCADING STYLE
SHEETS DENGAN METODE COMPUTER BASED INTRUCTION
Guidio Leonarde Ginting
Dosen Tetap STMIK Budi Darma Medan
Jl. Sisingamangaraja No. 338 Simpang Limun Medan
www.stmik-budidarma.ac.id//Email:[email protected]
Abstrak
Website atau situs dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data
gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis
maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing
dihubungkan dengan jaringan-jaringan halaman (hyperlink,) membuat website dengan desain yang baik,
memperhatikan audiens, dan beberapa aspek desain lainnya seperti layout composition, color, texture,
typography, dan imagery. Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk
mengatur tampilan suatu dokumen dalam bahasa website, baik tata letak, warna dan semua yang berhubungan
dengan tampilan. Dalam belajar CSS tentunya calon peserta didik lebih dituntut untuk praktek daripada teoritis
tentunya dalam hal ini waktu yang dibutuhkan untuk belajar lebih banyak, untuk itu diperlukan sara/media yang
dapat digunakan untuk melengkapi proses pembelajaran konvensiol yang tidak terbatas oleh jarak dan waktu.
Pembelajaran berbasis komputer atau lebih dikenal didengar dengan e-learning merupakan salah satu cara untuk
meningkatkan kualitas pembelajaran. Berbagai jenis metoda yang dapat diaplikasikan dalam pembelajaran
berbasis komputer, misalnya Computer Based Instruction (CBI) yaitu pembelajaran berbantuan komputer
dimana secara keseluruhan dari komponen pembelajaran konvensional digantikan dengan komputer, karena
dalam pembelajaran konvensional masih terdapat banyak kekurangan misalnya waktu, buku, pengajar, dan jarak.
Kata kunci: Cascading Style Sheets, Computer Based Instruction, Pembelajaran
1.
Pendahuluan
Sebuah website haruslah memiliki tampilan yang
baik, website desain memiliki peran yang sangat vital
bagi peserta didik untuk dapat mengembangankan
sebuah web yang memiliki nilai estetika, teknis,
hingga navigasi yang baik. Kegiatan pembelajaran
konvensional tidak cukup untuk melakukan proses
belajar mengajar web desain karena tidak semua
peserta didik dapat, berani atau mempunyai
kesempatan untuk mengajukan pertanyaan ataupun
menyampaikan pendapatnya di dalam diskusi mata
pelajaran. Waktu yang terbatas juga menjadi penyebab
kurang maksimalnya penyampaian materi bahan ajar
pengajar kepada peserta didik, sehingga berakibat
kurangnya daya serap peserta didik terhadap materi
yang diajarkan. Oleh karena itu perlu dibuat satu
sarana/media yang dapat digunakan untuk melengkapi
proses pembelajaran konvensional yang tidak terbatas
oleh jarak, tempat dan waktu. Maka penulis membuat
aplikasi pembelajaran yang bisa digunakan oleh
pengajar dan peserta didik tanpa terbatas dengan
waktu dan tempat yang berbeda atau sering disebut
dengan asynchronous e-learning.
Cascading Style Sheets (CSS) adalah suatu bahasa
stylesheet yang digunakan untuk mengatur tampilan
suatu dokumen dalam bahasa website, baik tata letak,
warna dan semua yang berhubungan dengan tampilan.
Dalam belajar CSS tentunya calon peserta didik
lebih dituntut untuk praktek daripada teoritis tentunya
dalam hal ini waktu yang dibutuhkan untuk belajar
lebih banyak, untuk itu diperlukan sara/media yang
dapat
digunakan
untuk
melengkapi
proses
pembelajaran konvensiol yang tidak terbatas oleh jarak
dan waktu.
2.
Landasan Teori
2.1. Aplikasi Web
Pada awalnya aplikasi web dibangun dengan
hanya menggunakan bahasa yang disebut HTML
(HyperText Markup Langauge). Pada perkembangan
berikutnya, sejumlah skrip dan objek dikembangkan
untuk memperluas kemampuan HTML seperti PHP
dan ASP pada skrip dan Apllet pada objek. Aplikasi
Web dapat dibagi menjadi dua jenis yaitu aplikasi web
statis dan dinamis. Web statis dibentuk dengan
menggunakan HTML. Kekurangan aplikasi seperti ini
terletak pada keharusan untuk memelihara program
secara terus menerus untuk mengikuti setiap
perkembangan yang terjadi. Kelemahan ini diatasi
oleh model aplikasi web dinamis. Pada aplikasi web
dinamis, perubahan informasi dalam halaman web
dilakukan tanpa perubahan program tetapi melalui
perubahan data.
Diterbitkan Oleh : STMIK Budi Darma Medan
15
Pelita Informatika Budi Darma, Volume III, Maret 2013
Sebagai implementasi, aplikasi web dapat
dikoneksikan ke basis data sehingga perubahan
informasi dapat dilakukan oleh operator dan tidak
menjadi tanggung jawab dari webmaster.
Arsitektur aplikasi web meliputi klien, web
server, middleware dan basis data. Klien berinteraksi
dengan web server. Secara internal, web server
berkomunikasi dengan middleware dan middleware
yang berkomunikasi dengan basis data. Contoh
middleware adalah PHP dan ASP. Pada mekanisme
aplikasi web dinamis, terjadi tambahan proses yaitu
server menerjemahkan kode PHP menjadi kode
HTML. Kode PHP yang diterjemahkan oleh mesin
PHP yang akan diterima oleh klien. (Abdul Kadir,
2009)
2.2. Pembelajaran
Pembelajaran adalah proses interaksi peserta
didik dengan pendidik dan sumber belajar pada suatu
lingkungan belajar. Pembelajaran merupakan bantuan
yang diberikan pendidik agar dapat terjadi proses
pemerolehan ilmu dan pengetahuan, penguasaan
kemahiran dan tabiat, serta pembentukan sikap dan
kepercayaan pada peserta didik. Dengan kata lain,
pembelajaran adalah proses untuk membantu peserta
didik agar dapat belajar dengan baik. Sedangkan
mengajar sendiri memiliki pengertian sebagai berikut :
1. Upaya guru untuk “membangkitkan” yang berarti
menyebabkan atau mendorong seseorang (siswa)
belajar. (Rochman Nata Wijaya,1992)
2. Menciptakan lingkungan yang memungkinkan
terjdinya proses belajar. (Hasibuan J.J,1992)
3. Suatu usaha untuk membuat siswa belajar, yaitu
usaha untuk terjadinya perubahan tingkah laku.
(Gagne)
Pembelajaran yang di identikkan dengan kata
“mengajar” berasal dari kata dasar “ajar” yang berarti
petunjuk yang diberikan kepada orang supaya
diketahui (diturut) ditambah dengan awalan “pe” dan
akhiran “an” menjadi “pembelajaran”, yang berarti
proses, perbuatan, cara mengajar atau mengajarkan
sehingga anak didik mau belajar.
Pembelajaran adalah proses interaksi peserta
didik dengan pendidik dan sumber belajar pada suatu
lingkungan belajar. Pembelajaran merupakan bantuan
yang diberikan pendidik agar dapat terjadi proses
pemerolehan ilmu dan pengetahuan, penguasaan
kemahiran dan tabiat, serta pembentukan sikap dan
kepercayaan pada peserta didik. Dengan kata lain,
pembelajaran adalah proses untuk membantu peserta
didik agar dapat belajar dengan baik. (2011:
id.Wikipedia.org/pembelajaran)
Proses pembelajaran dialami sepanjang hayat
seorang manusia serta dapat berlaku di manapun dan
kapanpun. Pembelajaran mempunyai pengertian yang
mirip dengan pengajaran, walaupun mempunyai
ISSN : 2301-9425
konotasi yang berbeda. Dalam konteks pendidikan,
guru mengajar supaya peserta didik dapat belajar dan
menguasai isi ajaran hingga mencapai sesuatu objektif
yang ditentukan (aspek kognitif), juga dapat
mempengaruhi perubahan sikap (aspek efektif), serta
keterampilan (aspek psikomotor) seseorang peserta
didik. Pengajaran memberi kesan hanya sebagai
pekerjaan satu pihak, yaitu pekerjaan guru saja.
Sedangkan pembelajaran juga menyiratkan adanya
interaksi antara guru dengan peserta didik.
Instruction atau pembelajaran adalah suatu
sistem yang bertujuan untuk membantu proses belajar
siswa, yang berisi serangkaian peristiwa yang
dirancang,
disusun
sedemikian
rupa
untuk
mempengaruhi dan mendukung terjadinya proses
belajar siswa yang bersifat internal. Gagne dan Briggs
(1979:3)
Kegiatan belajar mengajar adalah satu kesatuan
dari dua kegiatan yang searah. Kegiatan belajar adalah
kegiatan primer, sedangkan mengajar adalah kegiatan
sekunder yang dimaksudkan agar terjadi kegiatan
secara optimal. Dan dapat ditarik kesimpulan bahwa
Pembelajaran adalah usaha sadar dari guru untuk
membuat siswa belajar, yaitu terjadinya perubahan
tingkah laku pada diri siswa yang belajar, dimana
perubahan itu dengan didapatkannya kemampuan baru
yang berlaku dalam waktu yang relative lama dan
karena adanya usaha. Dengan demikian dapat
diketahui bahwa kegiatan pembelajaran merupakan
kegiatan yang melibatkan beberapa komponen :
1.
Siswa, Seorang yang bertindak sebagai pencari,
penerima, dan penyimpan isi pelajaran yang
dibutuhkan untuk mencapai tujuan.
2.
Guru, Seseorang yang bertindak sebagai
pengelola, katalisator, dan peran lainnya yang
memungkinkan
berlangsungnya
kegiatan
belajar mengajar yang efektif.
3.
Tujuan, Pernyataan tentang perubahan perilaku
(kognitif, psikomotorik, afektif) yang diinginkan
terjadi pada siswa setelah mengikuti kegiatan
pembelajaran.
4.
Isi Pelajaran, Segala informasi berupa fakta,
prinsip, dan konsep yang diperlukan untuk
mencapai tujuan.
5.
Metode, Cara yang teratur untuk memberikan
kesempatan kepada siswa untuk mendapat
informasi yang dibutuhkan mereka untuk
mencapai tujuan.
6.
Media, Bahan pengajaran dengan atau tanpa
peralatan yang digunakan untuk menyajikan
informasi kepada siswa.
7.
Evaluasi, Cara tertentu yang digunakan untuk
menilai suatu proses dan hasilnya.
2.2.1. Teori-Teori Pembelajaran
1. Berhavioristik
Pembelajaran selalu memberi stimulus kepada
siswa agar menimbulkan respon yang tepat seperti
Diterbitkan Oleh : STMIK Budi Darma Medan
16
Pelita Informatika Budi Darma, Volume III, Maret 2013
2.
3.
4.
yang kita inginkan. Hubungan stimulus dan
respons ini bila diulang kan menjadi sebuah
kebiasaan. selanjutnya, bila siswa menemukan
kesulitan atau masalah, guru menyuruhnya untuk
mencoba dan mencoba lagi (trial and error)
sehingga akhirnya diperoleh hasil.
Kognitivisme
Pembelajaran adalah dengan mengaktifkan indera
siswa agar memeperoleh pemahaman sedangkan
pengaktifan indera dapat dilaksanakan dengan
jalan menggunakan media/alat Bantu. Disamping
itu penyampaian pengajaran dengan berbagai
variasi artinya menggunakan banyak metode.
Humanistic
Dalam pembelajran ini guru sebagai pembimbing
memberi pengarahan agar siswa dapat
mengaktualisasikan dirinya sendiri sebagai
manusia yang unik untuk mewujudkan potensipotensi yang ada dalam dirinya sendiri. Dan siswa
perlu melakukan sendiri berdasarkan inisisatif
sendiri yang melibatkan pribadinya secara utuh
(perasaan maupun intelektual) dalam proses
belajar, agar dapat memperoleh hasil.
Sosial/Pemerhatian/permodelan
Proses pembelajaran melalui proses pemerhatian
dan pemodelan Bandura (1986) mengenal pasti
empat unsur utama dalam proses pembelajaran
melalui pemerhatian atau pemodelan, iaitu
pemerhatian (attention), mengingat (retention),
reproduksi (reproduction), dan penangguhan
(reinforcement) motivasi (motivion). Implikasi
daripada kaedah ini berpendapat pembelajaran
dan pengajaran dapat dicapai melalui beberapa
cara yang berikut:
a. Penyampaian harus interktif dan menarik
b. Demonstasi guru hendaklah jelas, menarik,
mudah dan tepat
c. Hasilan guru atau contoh-contoh seperti
ditunjukkan hendaklah mempunyai mutu
yang tinggi.
2.2.2.
Ciri-Ciri Pembelajaran
Menurut Eggen & Kauchak (1998)
Menjelaskan bahwa ada enam ciri pembelajaran yang
efektif, yaitu:
1.
Siswa menjadi pengkaji yang aktif terhadap
lingkungannya
melalui
mengobservasi,
membandingkan,
menemukan
kesamaankesamaan dan perbedaan-perbedaan serta
membentuk
konsep
dan
generalisasi
berdasarkan
kesamaan-kesamaan
yang
ditemukan,
2.
Guru menyediakan materi sebagai fokus
berpikir dan berinteraksi dalam pelajaran,
3.
Aktivitas-aktivitas
siswa
sepenuhnya
didasarkan pada pengkajian,
4.
5.
6.
ISSN : 2301-9425
Guru secara aktif terlibat dalam pemberian
arahan dan tuntunan kepada siswa dalam
menganalisis informasi,
Orientasi
pembelajaran
penguasaan
isi
pelajaran dan pengembangan keterampilan
berpikir, serta
Guru menggunakan teknik mengajar yang
bervariasi sesuai dengan tujuan dan gaya
mengajar guru.
Adapun ciri-ciri pembelajaran yang menganut
unsur-unsur dinamis dalam proses belajar siswa
sebagai berikut :
1. Motivasi belajar
Motivasi dapat dikatakan sebagai serangkaian
usaha untuk menyediakan kondisi kondisi tertentu,
sehingga seseorang itu mau dan ingin melakukan
sesuatu, dan bila ia tidak suka, maka ia akan berusaha
mengelakkan perasaan tidak suka itu. Jadi, motivasi
dapat dirangsang dari luar, tetapi motivasi itu tumbuh
di dalam diri seseorang. Dalam kegiatan belajar, maka
motivasi dapat dikatakan sebagai keseluruhan daya
penggerak di dalam diri seseorang/siswa yang
menimbulkan kegiatan belajar, yang menjalin
kelangsungan dan memberikan arah pada kegiatan
belajar sehingga tujuan yang dihendaki dapat dicapai
oleh siswa (Sardiman, A.M. 1992)
2. Suasana belajar
Suasana yang dapat menimbulkan aktivitas atau
gairah pada siswa adalah apabila terjadi :
a. Adanya komunikasi dua arah (antara gurusiswa maupun sebaliknya) yang intim dan
hangat, sehingga hubungan guru-siswa yang
secara hakiki setara dan dapat berbuat
bersama.
b. Adanya kegairahan dan kegembiraan belajar.
Hal ini dapat terjadi apabila isi pelajaran yang
disediakan berkesusaian dengan karakteristik
siswa.
Kegairahan dan kegembiraan belajar juga dapat
dari media, selain isi pelajaran yang disesuaiakan
dengan karakteristik siswa, juga didukung oleh factor
intern siswa yang belajar yaitu sehat jasmani, ada
minat, perhatian, motivasi, dan lain sebagainya.
3. Kondisi siswa yang belajar
Mengenai kondisi siswa, adapat dikemukakan di
sini sebagai berikut :
a. Siswa memiliki sifat yang unik, artinya
anatara anak yang satu dengan yang lainnya
berbeda.
b. Kesamaan siswa, yaitu memiliki langkahlangkah perkenbangan, dan memiliki potensi
yang
perlu
diaktualisasikan
melalui
pembelajaran. Kondisi siswa sendiri sangat
dipengaruhi oleh factor intern dan juga faktor
luar, yaitu segala sesuatu yang ada di luar diri
siswa, termasuk situasi pembelajaran yang
Diterbitkan Oleh : STMIK Budi Darma Medan
17
ISSN : 2301-9425
Pelita Informatika Budi Darma, Volume III, Maret 2013
diciptakan guru. Oleh Karena itu kegiatan
pembelajaran lebih menekankan pada
peranan dan partisipasi siswa, bukan peran
guru yang dominan, tetapi lebih berperan
sebagai
fasilitator,
motivator,
dan
pembimbing.
2.2.3.
Implementasi Pembelajaran
Meskipun implementasi sistem pembelajaran
yang ada sekarang ini sangat bervariasi, namun
semua itu didasarkan atas suatu prinsip atau konsep
bahwa e- learning dimaksudkan sebagai upaya
pendistribusian materi pembelajaran melalui media
elektronik atau Internet sehingga peserta didik dapat
mengaksesnya kapan saja dari seluruh penjuru
dunia. Ciri pembelajaran dengan e-leaning adalah
terciptanya lingkungan belajar yang flexible dan
distributed.
Fleksibilitas menjadi kata kunci dalam
sistem Pembelajaran. Peserta didik menjadi sangat
fleksibel dalam memilih waktu dan tempat belajar
karena mereka tidak harus datang di suatu tempat
pada waktu tertentu. Dilain pihak, dosen dapat
memperbaharui materi pembelajarannya kapan saja
dan dari mana saja. Dari segi isi, materi
pembelajaranpun dapat dibuat sangat fleksibel mulai
dari bahan kuliah yang berbasis teks sampai materi
pembelajaran yang sarat dengan komponen
multimedia. Namun demikian kualitas pembelajaran
dengan Pembelajaran pun juga sangat fleksibel atau
variatif, yakni bisa lebih jelek atau lebih baik dari
sistem pembelajaran tatap muka (konvensional).
Untuk mendapatkan sistem Pembelajaran yang baik
diperlukan perancangan yang baik pula. Distributed
learning menunjuk pada pembelajaran dimana
pengajar, mahasiswa, dan materi pembelajaran
terletak di lokasi yang berbeda, sehingga mahasiswa
dapat belajar kapan saja dan dari mana saja.
Dalam merancang sistem Pembelajaran perlu
mempertimbangkan dua hal, yakni peserta didik yang
menjadi target dan hasil pembelajaran yang
diharapkan. Pemahaman atas peserta didik sangatlah
penting, yakni antara lain adalah harapan dan tujuan
mereka
dalam
mengikuti
Pembelajaran,
kecepatan dalam mengakses internet atau jaringan,
keterbatasan bandwidth, biaya untuk akses internet,
serta latar belakang pengetahuan yang menyangkut
kesiapan dalam mengikuti pembelajaran. Pemahaman
atas
hasil pembelajaran diperlukan
untuk
menentukan cakupan materi, kerangka penilaian hasil
belajar, serta pengetahuan awal.
Sistem Pembelajaran dapat diimplementasikan
dalam bentuk asynchronous, synchronous, atau
campuran antara keduanya. Contoh Pembelajaran
asynchronous banyak dijumpai di Internet baik
yang sederhana maupun yang terpadu melalui
portal
Pembelajaran.
Sedangkan
dalam
Pembelajaran synchronous, pengajar dan siswa
harus berada di depan komputer secara bersamasama karena proses pembelajaran dilaksanakan secara
live, baik melalui video maupun audio conference.
Selanjutnya dikenal pula istilah blended learning
yakni pembelajaran yang menggabungkan semua
bentuk pembelajaran misalnya on-line, live, maupun
tatap muka (konvensional).
2.3. Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) adalah salah satu
bahasa pemrograman desain web (style sheet
language) yang mengontrol format tampilan sebuah
halaman web yang ditulis dengan menggunakan
bahasa penanda (markup language). Biasanya CSS
digunakan untuk mendesain sebuah malam HTML
dan XHTML, tetapi sekarang bahasa pemrograman
CSS bisa diaplikasikan untuk segala dokumen XML,
termasuk SVG dan XUL.
CSS dibuat untuk memisahkan kontek utama
(biasanya dibuat dengan menggunakan bahasa HTML
dan sejenisnya) dengan tampilan dokumen yang
meliputi layout, warna dan font. Pemisahan ini dapat
meningkatkan daya akses konten pada web,
menyediakan lebih banyak fleksibilitas dan kontrol
dalam spesifikasi dari sebuah karakteristik dari sebuah
tampilan, memungkinkan untuk membagi banyak
halaman untuk sebuah formating dan mengurangi
kerumitan dalam penulisan kode dan struktur dari
konten, contohnya teknik tables pada layout desain
web (layout tanpa tabel)
CSS adalah rekomendasi dari W3C (World Wide
Web
Consortium).
W3C
adalah
sebuah
konsorsium/gabungan dari pemilik web, universitas,
perusahaan seperti Microsoft, Netscape, Apple, Opera,
Mozilla, dan Macromedia serta juga para juga para
ahli dalam bidang web. W3C dapat dikatakan sebagai
acuan dalam menentukan teknologi paling mutahir
pada web. W3C yang diprakarsai oleh TIM BennersLee juga juga bertujuan untuk mempertahankan World
Wide Web serta mengembangkannya lebih jauh.
Style Sheet adalah sebuah text file yang
sederhana (dimana berekstensi .css), ditulis menurut
aturan bahasa yang dipaparkan pada rekomendasi
CSS1 atau CSS2. Berikut contoh file CSS :
Diterbitkan Oleh : STMIK Budi Darma Medan
Body { Font-family: Helvetica, sans-Serif;
Font-size: 12pt; Text-align: justify;
}
h2 {
Font-family: Arial, sans-serif;
Font-size: 14pt;
}
code{
18
ISSN : 2301-9425
Pelita Informatika Budi Darma, Volume III, Maret 2013
font-family: Curier, sans-serif;
font-size: 12pt;
}
.note{
Background-color: #cbcbcb;
}
Cara kerja CSS dengan menggunakan dua buah
elemen penting untuk pemformatan tampilannya,
diantaranya selektor dan deklarator. Dua buah elemen
ini berfungsi sebagai penentu format tampilan dan
lainnya menempatkan format tampilan tersebut.
Deklarator berisi beberapa perintah-perintah CSS
untuk menentukan format dari sebuah elemen pada
halaman web. Sedangkan selektor adalah sebuah
perintah lanjut dari deklarator dan berfungsi
menempatkan format tampilan dari deklarator.
Dalam Cascading Style Sheets ada dua cara
menghubungkan sebuah dokumen HTML dengan CSS
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Selector class
Selector ID
Selector Descendant (turunan)
Selector Link Pseudo Class
Selector Pseudo elemen
Selector dynamic pseudo class
Selector languange
Selector child
Selector first-child
Selector adjacent (berdekatan)
2.3.1.
4.
5.
6.
7.
8.
Komponen CSS dan Properti
Untuk mengaplikasi CSS pada halaman web,
kita juga perlu mengenal properti. Properti merupakan
bagian penting dalam CSS. Properti biasanya berada
dalam bagian deklarator. Properti biasanya akan
diikuti dengan value-nya (nilainya). Ada beberapa tipe
yang berbera dari nama properti yang dapat
dikelompokkan menjadi beberapa jenis sebagai
berikut :
1. Properti Text Style (Gaya Tulisan)
Properti Text style ini berpengaruh terhadap jenis
dan gaya tulisan pada halaman HTML. Jika
tampilan hanya berdasarkan design HTML, maka
text style yang kita dapat hanya seperti font, font
color, font size dan font weight, tetapi dengan
menggunakan CSS, kita mendapatkan design
untuk gaya tulisan lebih luas dan lebih
mempunyai kontrol terhadap gaya tulisan lebih
mendalam.
2. Properti Text Layout (Tampilan Tulisan)
Group properti ini mempunyai efek bagaimana
sebuah tulisan tersebut tampil pada halaman web.
Properti ini lebih terfokus pada text, bagaimana
penempatannya dan tampilannya pada halaman
web seperti tinggi garis (line-height) dan jarak
spasi antar huruf (letter spacing)
3. Properti Background (Tampilan Latar Belakang)
Properti background berpengaruh pada bagaimana
sebuah elemen tersebut tampil pada halaman web.
Tidak seperti pada halaman HTML biasa, dengan
CSS, semua elemen bisa mempunyai background
dengan gambar atau warna.
Properti Border (Garis)
Dengan menggunakan CSS, setiap elemen akan
mempunyai garis dengan berbagai variasi lebar,
warna dan gaya tampilan. Elemen bisa
mempunyai setiap garis (atas, kiri, kanan, atas)
gaya, lebar dan warna yang berbeda.
Properti Margin (Ruang/Jarak Pembatas)
Setiap elemen dapat memiliki margin. Margin
adalah ruang atau jarak batasan antar elemen dan
antara elemen dengan bagian atas, kiri bawah dan
kanan dari elemen itu sendiri.
Properti Padding
Setiap elemen bisa mempunyai padding. Padding
adalah ruang antara sisi sebuah elemen (garis
luarnya) dengan konten di dalamnya. terdapat
beberapa padding diantaranya, padding-left,
padding-top, padding-right, padding-bottom.
Properti Tipe Elemen
Jika anda sudah secara mendalam memahami
HTML, maka anda akan mengetahui ada
beberapa tipe yang berlainan dari elemen. Tipe
utama dari elemen-elemen diantaranya inline,
block dan list item
Properti User Interface (Tampilan Pengguna)
CSS2 memperkenalkan properti user interface,
dimana properti ini memperbolehkan bentuk dari
kursor untuk diatur tergantung pada objek yang
dihover oleh kursor ini dan properti ini juga dapat
digunakan untuk mendefenisikan outline dari
sebuah elemen.
2.4. Computer Base Intruction
Menurut Criswell (1989: 1) menyatakan
bahwa computer base instruction (CBI) merupakan
penggunaan komputer untuk menyajikan materi
pembelajaran yang memberikan kesempatan kepada
peserta didik untuk berpartisipasi secara aktif dan
merespon aktivitas peserta didik. Pendapat lain
dikemukakan oleh Kemp dan Dayton (1985: 40)
sebagai berikut: Computer Based Instruction refers to
any application of computer technology to the
instructional process. It includes using a computer to
present information, to tutor a learner, to provide
practice for developing a skill, to simulate a process
which is being studied, and manipulate to solve
problem.
Istilah computer based instruction (CBI)
umumnya menunjuk pada semua software pendidikan
yang diakses melalui komputer dimana peserta didik
dapat berinteraksi dengannya. Sistem komputer
menyajikan serangkaian program pengajaran kepada
Diterbitkan Oleh : STMIK Budi Darma Medan
19
ISSN : 2301-9425
Pelita Informatika Budi Darma, Volume III, Maret 2013
peserta didik baik berupa informasi maupun latihan
soal untuk mencapai tujuan pengajaran tertentu dan
peserta didik melakukan aktivitas belajar dengan cara
berinteraksi dengan sistem komputer. Berdasarkan
uraian tersebut dapat disimpulkan bahwa media
pembelajaran berbasis komputer adalah penggunaan
komputer sebagai media penyampaian informasi
pembelajaran, latihan soal, umpan balik, dan skor
jawaban peserta didik. Komputer berfungsi sebagai
sumber belajar yang dapat digunakan secara mandiri
oleh peserta didik.
Menurut Alessi & Trollip (1985: 60) bahwa program
CBI yang baik haruslah meliputi empat aktivitas,
yaitu:
1. Informasi (materi pelajaran) harus diberikan,
2. Peserta didik harus diarahkan,
3. Peserta didik diberi latihan-latihan,
Berbagai hasil penelitian eksperimen
menunjukkan bahwa belajar dengan menggunakan alat
bantu komputer dalam bentuk program CBI ternyata
lebih efektif dibanding dengan alat bantu lainnya.
Menurut Ehman & Glenn (Shaver, 1991: 516)
beberapa penelitian (Bradley, 1983; Marsh, 1984,
1986; Bellows, 1987; Feldhausen, 1985) menyatakan
bahwa penggunaan media berbasis komputer sangat
potensial untuk menciptakan pembelajaran yang
efektif.
Ada beberapa keuntungan dalam mendayagunakan
komputer dalam pembelajaran, yaitu:
1. Membangkitkan motivasi kepada peserta didik
dalam belajar,
2. Warna, musik, dan grafis animasi dapat
menambahkan kesan realisme,
3. Menghasilkan penguatan yang tinggi,
4. Kemampuan memori memungkinkan penampilan
peserta didik yang telah lampau direkam dan
dipakai dalam merencanakan langkah-langkah
selanjutnya di kemudian hari,
5. Berguna sekali untuk peserta didik yang lamban,
6. Kemampuan daya rekamnya memungkinkan
pengajaran individual bisa dilaksanakan,
7. Rentang pengawasan guru diperlebar sejalan
dengan banyaknya informasi yang disajikan
dengan mudah yang diatur oleh guru, dan
membantu pengawasan lebih dekat kepada kontak
langsung dengan para peserta didik.
Dari uraian-uraian diatas terdapat model-model CBI
sebagai berikut:
1. Tutorial,
2. Drill and practice,
3. Simulasi,
4. Game, dan
5. Hybrid (model gabungan).
Beberapa hal yang perlu diperhatikan dalam
merancang desain visual, yaitu:
1. Kejelasan tampilan visual,
2. Energi
yang
diperlukan
untuk
menginterprestasikan pesan,
3. Keterlibatan keaktifan peserta didik dalam
belajar, dan
4. Fokus perhatian pada bagian penting dari pesan.
Terdapat macam desain Computer Based Instruction
(CBI), yaitu:
1. Desain dokumentasi,
2. Desain navigasi, dan
3. Desain grafis.
Berbagai macam pendekatan instruksional
yang dikemas dalam bentuk program pembelajaran
berbasis komputer atau Computer Based Instruction
(CBI) seperti: drill and practice, simulasi, tutorial dan
permainan. Media pembelajaran berbasis komputer
yang dikembangkan, jika dimanfaatkan dengan baik
akan dapat meningkatkan hasil belajar siswa.
Sebelum topik IMK dianggap sebagai obyek
penelitian yang cukup penting, banyak penelitian telah
dilakukan untuk mengetahui bagaimana siswa
berinteraksi
dengan
system
instruksional
terkomputerisasi. Perkembangannya:
1. CMI (Computer Managed Instruction), suatu
komponen
yang
melakukan
pekerjaan
administratif seperti penyimpanan rekord, update
data, pendaftaran menggunakan komputer.
Material presentasi diberikan dalam bentuk
dengan komputer atau dengan pengajaran
tradisional atau dalam grup diskusi.
2. CAI (Computer Assisted Instruction), disini
komputer mengambil lebih banyak bagian dari
pekerjaan seorang instruktur. Seluruh material
dapat
dipresentasikan
dengan
komputer
sementara sebagian lain material masih dapat
dipresentasikan oleh instruktur.
ICAI (Intelligent CAI), dilakukan dengan teknik
kecerdasan buatan. Tutorial, tanyajawab dalam bahasa
natural, dan petunjuk dilakukan komputer.
3.
Algoritma dan Implementasi
3.1. Algoritma Simulasi Materi
Simulasi materi digunakan untuk menampilkan
hasil dari penggunaan property yang telah disedikan
berdasarkan materi. Algoritma Simulasi Materi
Selektor Link Pseudo Class dapat diuraikan sebagai
berikut :
Input
: bgColor, text, ahover, active, avisited,
fFamily, fsize
Output
: Selektor link
Proses
: var csstext = <style type="text/css">
Diterbitkan Oleh : STMIK Budi Darma Medan
20
ISSN : 2301-9425
Pelita Informatika Budi Darma, Volume III, Maret 2013
csstext = body {background-color:
txt.value;
csstext = color: txt.value;
csstext
=
fontfamily:txt.options.selectedIndex.text;
csstext = font-size:txt.value
txt.[options[txt].selectedIndex].text;
csstext = margin-top:txt.value
txt.[options[txt].selectedIndex].text;
csstext = margin-left:txt.value
txt.[options[txt].selectedIndex].text;
csstext = margin-right:txt.value
txt[options[txt.selectedIndex].text;
csstext = margin-bottom:txt.value
txt[options[txt.selectedIndex].text;
csstext = };
csstext = p{
csstext
=
fontfamily:txt.options[txt.selectedIndex].text;
csstext = font-size: txt.value +
txt[options[txt.selectedIndex].text;
csstext = };
csstext = a:link {color: txt.value};
csstext = a:visited {color: txt.value};
csstext = a:hover {color: txt.value};
csstext = a:active {color: txt[3].value };
csstext = </style>;
Gambar 1 : Tampilan Menu Utama
b. Halaman Forum
Halaman Forum merupakan kumpulan dari
beberapa pertanyaan dari peserta didik atau
administrator. Halaman Forum dapat dilihat pada
gambar 2 :
Implementasi Program
Pembelajaran Casscading Style Sheets (CSS)
yang
telah
dirancang
merupakan
aplikasi
pembelajaran
yang
menggunakan
bahasa
pemrograman PHP, dimana untuk mengetik listing
program dilakukan pada Macromedia Dreamweaver 8
yang merupakan perangkat lunak editor untuk
pembuatan web dan untuk aplikasi databasenya
penulis menggunakan PHP Triad.
Pembelajaran Casscading Style Sheets yang
dirancangan menggunakan metode Computer Based
Instruction (CBI), dimana pada metode tersebut
berguna agar peserta didik yang menggunakan
aplikasi tersebut dapat melakukan simulasi dari
program materi yang telah diberikan. Berikut hasil
dari implementasi program keseluruhan yang telah
dirancang:
Gambar 2 : Halaman Forum
c. Halaman Materi
a. Halaman Utama
Halaman utama dapat dikatakan sebagai antar
muka (user interface) antara user dengan program.
Halaman utama menampilkan pilihan menu yang
tersedia pada program. Pada Halaman utama tersedia
lima pilihan menu yaitu Home, Artikel, Forum,
Register dan Login. Gambar untuk tampilan Halaman
utama dapat dilihat pada gambar 1 :
Diterbitkan Oleh : STMIK Budi Darma Medan
Pada halaman ini berisikan pengelajasan dari
kategori materi yang telah dipilih, peserta didik
juga dapat mempraktekkan langsung dari materi
yang telah dijelaskan dengan cara mengklik menu
coba sekarang, dapat dilihat pada gambar 3 :
21
Pelita Informatika Budi Darma, Volume III, Maret 2013
ISSN : 2301-9425
pada pembelajaran sudah disediakan properti yang
akan digunakan. Metode Computer Based Instuction
(CBI) diterapkan pada pembelajaran Casscading Style
Sheets (CSS) untuk mempermudah peserta didik
dalam memahami CSS tanpa terbatas oleh waktu dan
jarak.
Gambar 3 : Halaman Materi Peserta Didik
d.
Daftar Pustaka
[1]. http://staff.uny.ac.id/sites/default/files/1315683
00/ pembelajaranberbantuan komputer.
[2]. http://repository.upi.edu/operator/upload/s_ktp
_
060110_chapter2.pdf
[3]. http://www.sabah.edu.my/skpmtdon/notes/Teori
model p p.pdf.
[4]. Wiratmoko Yumono, Pemrograman Web PHPOracle.
[5]. Modul Pemrograman Web PPPG Kesenian
Yogyakarta, Rusfansyah.
[6]. Toturial Cascading Style Sheet, Copyright©2003
Ilmu Komputer.com
Halaman Simulasi Materi
Pada gambar 4 Menampilkan halaman simulasi
dari materi yang telah dipilih, dimana peserta didik
dapat melakukan menampilkan langsung dari
source code yang telah disediakan dan dapat juga
memodifikasi sesuai keinginan peserta didik.
Gambar 4 : Halaman Simulasi Materi
4. Kesimpulan
Perbandingan dapat memberikan perbaikanperbaikan pada masa yang akan datang, Adapun
kesimpulan yang penulis peroleh adalah Cascading
Style Sheets (CSS) dapat membantu dalam mendesian
web, sesuai dengan yang direkomendasikan oleh W3C
(World Wide Web Consortium). Penerapan metode
Computer Based Instuction (CBI) pada pembelajaran
Cascading Style Sheets (CSS) dapat membantu para
peserta didik dalam penggunaan properti CSS karena
Diterbitkan Oleh : STMIK Budi Darma Medan
22