Setiap Perubahan Yang Terjadi Adalah Pilihan Ku Untuk Semakin Berkembang Dan Terus Berkembang.
Dan aku yakin ini memang benar jalan yang seharus nya aku tempuh saat ini.
haloo GuySss,,
ketemu lagi ini sama aq, kali ini kita akan membahas pembelajaran html dengan penggunaan konsep diskon, jadi ntar kalu kalian melakukan pembelian di atas harga tertentu maka secara otomatis billing pay akan memberikan potongan harga diskon bagi pembelinya. naHh, asyikk kaNn...
tentunya semua tetep pake html doonk, hehe, moga kalian nggak bosen dalam belajar menggunakan script html, kan enak tu seandainya kallian bisa membuat halaman website yg bisa di akses banyak orang, ya kaNn???? ( mimpi kali ) bukan suatu hal yang nggak mungikin guyss, semua serba bisa di capai..
kali ini ini script saya di dukung oleh developt javaScript tetep, kan kita pake combine dengan javascript juga ini ntar...
langsung aja ya, ayok kita liat script nya, pertama jelas kita buat script javascriptnya dahulu, kita buat dah itu semua function nya. untuk file saya ini bernama " pemesanan.js " inini guYys sciptnya :
function totalHarga(){
var harga;
var pesanan;
var total = 0;
for(i = 0; i < 12; i += 2){
harga = parseInt(document.pemesanan[i].value);
pesanan = parseInt(document.pemesanan[i + 1].value);
if(pesanan > 0){
total = total + (harga * pesanan);
}
document.pemesanan.total.value = total;
}
}
function diskon(){
var total = parseInt(document.pemesanan.total.value);
var diskon;
if (total > 50000){
diskon = 10000;
}else{
diskon = 0;
}
document.pemesanan.diskon.value = diskon;
}
function jumlahBayar(){
var total = parseInt(document.pemesanan.total.value);
var diskon = parseInt(document.pemesanan.diskon.value);
var bayar = total - diskon;
document.pemesanan.bayar.value = bayar;
}
function proses(){
totalHarga();
diskon();
jumlahBayar();
}
function reset(){
var elemen = document.pemesanan;
elemen.pesan1.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.pesan6.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}
var harga;
var pesanan;
var total = 0;
for(i = 0; i < 12; i += 2){
harga = parseInt(document.pemesanan[i].value);
pesanan = parseInt(document.pemesanan[i + 1].value);
if(pesanan > 0){
total = total + (harga * pesanan);
}
document.pemesanan.total.value = total;
}
}
function diskon(){
var total = parseInt(document.pemesanan.total.value);
var diskon;
if (total > 50000){
diskon = 10000;
}else{
diskon = 0;
}
document.pemesanan.diskon.value = diskon;
}
function jumlahBayar(){
var total = parseInt(document.pemesanan.total.value);
var diskon = parseInt(document.pemesanan.diskon.value);
var bayar = total - diskon;
document.pemesanan.bayar.value = bayar;
}
function proses(){
totalHarga();
diskon();
jumlahBayar();
}
function reset(){
var elemen = document.pemesanan;
elemen.pesan1.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.pesan6.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}
Nahh lanjutnya kita panggil dan permak dah semua scipt javascript yg udah kita buat sebelumnya, dan kita buat model tampilannya sekalian, hehHeee
inini file html buat manggil semua script .js yg udah kita buat,
untuk kali ini file html saya bernama " form_pemesanan.html
<!DOCTYPEhtml>
<html lang="en">
<head>
<title>Form Pemesanan</title>
<script language="JavaScript" type="text/javascript" src="pemesanan.js"></script>
</head>
<body>
<hr width="505px" size="7" color="maroon" align="left">
<h2>*** <blink> Form Pemesanan Buku: Andi House </blink> ***</h2>
<hr width="505px" size="7" color="maroon" align="left">
<form name="pemesanan" action="#">
<table border="3">
<tr bgcolor="pink">
<th>No</th>
<th>Nama Buku</th>
<th>Harga</th>
<th> Jumlah Pemesanan</th>
</tr>
<tr>
<td align="center">1</td>
<td>Bola News - Sport</td>
<td>@<input type="text" name="harga1" value="12000" onchange="proses()" /></td>
<td><input type="text" name="pesan1" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">2</td>
<td>InfoKom - IT.Center</td>
<td>@<input type="text" name="harga2" value="10000" onchange="proses()" /></td>
<td><input type="text" name="pesan2" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">3</td>
<td>PhotoShop - TipsNgetricks</td>
<td>@<input type="text" name="harga3" value="15000" onchange="proses()" /></td>
<td><input type="text" name="pesan3" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">4</td>
<td>WebDesign - WebCom</td>
<td>@<input type="text" name="harga4" value="5000" onchange="proses()" /></td>
<td><input type="text" name="pesan4" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">5</td>
<td>html ceria - voice Html</td>
<td>@<input type="text" name="harga5" value="7000" onchange="proses()" /></td>
<td><input type="text" name="pesan5" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">6</td>
<td>VisualBasic.2008 - VB.NET comp</td>
<td>@<input type="text" name="harga6" value="500" onchange="proses()" /></td>
<td><input type="text" name="pesan6" onchange="proses()" /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Jumlah Total</td>
<td><input type="text" name="total" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Diskon</td>
<td><input type="text" name="diskon" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Jumlah Dibayar</td>
<td><input type="text" name="bayar" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()" />
</form><br>
<font size="2px">
<b>Ketentuan Diskon :</b><br>
- Diskon Rp. 10.000,00 untuk Pemebelian diatas Rp 50.000,00<br>
<br>
<font size="3" color="blue">© 2011, CopyRight by andibayu - 2009533420400</font>
<hr color="maroon" width="300px" size="5px" align="left"></hr>
</body>
<hr width="505px" size="7" color="maroon" align="left">
</body>
</html>
<html lang="en">
<head>
<title>Form Pemesanan</title>
<script language="JavaScript" type="text/javascript" src="pemesanan.js"></script>
</head>
<body>
<hr width="505px" size="7" color="maroon" align="left">
<h2>*** <blink> Form Pemesanan Buku: Andi House </blink> ***</h2>
<hr width="505px" size="7" color="maroon" align="left">
<form name="pemesanan" action="#">
<table border="3">
<tr bgcolor="pink">
<th>No</th>
<th>Nama Buku</th>
<th>Harga</th>
<th> Jumlah Pemesanan</th>
</tr>
<tr>
<td align="center">1</td>
<td>Bola News - Sport</td>
<td>@<input type="text" name="harga1" value="12000" onchange="proses()" /></td>
<td><input type="text" name="pesan1" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">2</td>
<td>InfoKom - IT.Center</td>
<td>@<input type="text" name="harga2" value="10000" onchange="proses()" /></td>
<td><input type="text" name="pesan2" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">3</td>
<td>PhotoShop - TipsNgetricks</td>
<td>@<input type="text" name="harga3" value="15000" onchange="proses()" /></td>
<td><input type="text" name="pesan3" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">4</td>
<td>WebDesign - WebCom</td>
<td>@<input type="text" name="harga4" value="5000" onchange="proses()" /></td>
<td><input type="text" name="pesan4" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">5</td>
<td>html ceria - voice Html</td>
<td>@<input type="text" name="harga5" value="7000" onchange="proses()" /></td>
<td><input type="text" name="pesan5" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">6</td>
<td>VisualBasic.2008 - VB.NET comp</td>
<td>@<input type="text" name="harga6" value="500" onchange="proses()" /></td>
<td><input type="text" name="pesan6" onchange="proses()" /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Jumlah Total</td>
<td><input type="text" name="total" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Diskon</td>
<td><input type="text" name="diskon" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Jumlah Dibayar</td>
<td><input type="text" name="bayar" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()" />
</form><br>
<font size="2px">
<b>Ketentuan Diskon :</b><br>
- Diskon Rp. 10.000,00 untuk Pemebelian diatas Rp 50.000,00<br>
<br>
<font size="3" color="blue">© 2011, CopyRight by andibayu - 2009533420400</font>
<hr color="maroon" width="300px" size="5px" align="left"></hr>
</body>
<hr width="505px" size="7" color="maroon" align="left">
</body>
</html>
NaHh, selesai dah coding kita sekarang, so kalian tinggal liat hasilnya aja kaNn..
kayak gini tampilan dari script yg udah aq share sama kalian guySs :
NaHh, siipp kaNnn...
selamat mencoba ya Guyss kalian, moga ilmu yg saya share bermanfaat bagi kalian semuaa,, amiiiNnn... hIhiiii
Gud LuccKkkk guyysss....
Kali ini kita akan belajar mengenai bagaiman caranya membuat kalkukator sederhana dari sebuah halaman html guys,,, jadi bisa nggak yah?? sebuah halaman html dijadikan itungan kaya kalkulator sederhana gitu??? kalu ngak di combine dengan script java script, ya tentunya kita akan kerepotan guySs,
so, kalli ini saya akan menShare ilmu baru saya bagaimana caranya membuat aplikasi tampilan kalkulatro sederhana yg di kombinasikan dengan script javascript sebagai penyimpan function nya,
NiHh aq di dukung ma developt java script guyss, hehHehee
Suport by :
pertama saya akan buat script javascripnya dulu guys, kita tentuin semua function nya dulu, keys.. JANGAN LUPA, ntar scripnya dikasih nama dengan tipe file " .js "
kaytak script Q dibawah ini aq kasih nama "kalkulator.js"
nih scriptnya :
function penjumlahan(){
var komponen = document.calc;
var bil1 = parseInt(komponen.bil1.value);
var bil2 = parseInt(komponen.bil2.value);
var op = komponen.op.value;
var hasil;
hasil = bil1 + bil2;
komponen.hasil.value = hasil;
}
function pengurangan(){
var komponen = document.calc;
var bil1 = parseInt(komponen.bil1.value);
var bil2 = parseInt(komponen.bil2.value);
var op = komponen.op.value;
var hasil;
hasil = bil1 - bil2;
komponen.hasil.value = hasil;
}
function perkalian(){
var komponen = document.calc;
var bil1 = parseInt(komponen.bil1.value);
var bil2 = parseInt(komponen.bil2.value);
var op = komponen.op.value;
var hasil;
hasil = bil1 * bil2;
komponen.hasil.value = hasil;
}
function pembagian(){
var komponen = document.calc;
var bil1 = parseInt(komponen.bil1.value);
var bil2 = parseInt(komponen.bil2.value);
var op = komponen.op.value;
var hasil;
hasil = bil1 / bil2;
komponen.hasil.value = hasil;
}
function bersih(){
var elemen = document.calc;
elemen.bil1.value = "";
elemen.bil2.value = "";
elemen.hasil.value = "";
}
lanjutNya tentu kita buat script htmlnya untuk memanggil function yang udah kita buat pada script html nya itu tadi guySs,,,
untuk kali ini saya menamai file html yaitu " simple_kalkulator.html "
dan ini sciptnya guys :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aplikasi Calculator</title>
<script language="JavaScript" type="text/javascript" src="kalkulator.js"></script>
</head>
<hr color="red" width="300px" size="10px" align="left" />
<font size="4" color="blue"> Aplikasi Kalkulator dengan Java Script</font>
<hr color="red" width="300px" size="10px" align="left" /><br>
<form name="calc" action="#">
Masukkan Bilangan Pertama
<br><input type="text" size="25" name="bil1" /><br>
Masukkan Bilangan Kedua
<br><input type="text" size="25" name="bil2" /><br>
<input name="op" type="button" value="+" onclick="penjumlahan()" />
<input name="op" type="button" value="-" onclick="pengurangan()" />
<input name="op" type="button" value="x" onclick="perkalian()" />
<input name="op" type="button" value="/" onclick="pembagian()" /><br>
<br>Hasil Perhitungan
<br><input type="text" size="25" name="hasil" readonly /><br>
<br><input name="op" type="button" value="reset" onclick="bersih()" /><br>
<br><hr color="brown" width="300px" size="10px" align="left"></hr>
<font size="3" color="blue">© 2011, CopyRight by andibayu - 2009533420400</font>
<hr color="brown" width="300px" size="10px" align="left"></hr>
</body>
</html>
<html lang="en">
<head>
<title>Aplikasi Calculator</title>
<script language="JavaScript" type="text/javascript" src="kalkulator.js"></script>
</head>
<hr color="red" width="300px" size="10px" align="left" />
<font size="4" color="blue"> Aplikasi Kalkulator dengan Java Script</font>
<hr color="red" width="300px" size="10px" align="left" /><br>
<form name="calc" action="#">
Masukkan Bilangan Pertama
<br><input type="text" size="25" name="bil1" /><br>
Masukkan Bilangan Kedua
<br><input type="text" size="25" name="bil2" /><br>
<input name="op" type="button" value="+" onclick="penjumlahan()" />
<input name="op" type="button" value="-" onclick="pengurangan()" />
<input name="op" type="button" value="x" onclick="perkalian()" />
<input name="op" type="button" value="/" onclick="pembagian()" /><br>
<br>Hasil Perhitungan
<br><input type="text" size="25" name="hasil" readonly /><br>
<br><input name="op" type="button" value="reset" onclick="bersih()" /><br>
<br><hr color="brown" width="300px" size="10px" align="left"></hr>
<font size="3" color="blue">© 2011, CopyRight by andibayu - 2009533420400</font>
<hr color="brown" width="300px" size="10px" align="left"></hr>
</body>
</html>
nah itulah semua scipt untuk membuat file html guys, semoga bermanfaat bagi kalian semua. dan lanjutnya mari kita liat tampilannya bareng2 yoKk...
inini jadi nya guySs..
Ya begitulah serangkaian acara pembelajaran kita hari ini, moga bermanfaat ya GuySs..
selamat mencoba dan moga berhasil..
salam kenal dari saya..
Ketika banyak orang menggunakan media blog, sebagai sarana dalam berbagi ilmu (share) dari semua penulis yang di tujujukan kepada pembaca, dari situ saya berusaha menuliskan apa pentingnya sebuah blog, ketika dapat di representasikan dalam media pembelajaran
Dalam hal ini, saya menuangkan nya dalam bentuk makalah sederhana guySs, moga dapat menjadi wacana, dan ilmu yg saling kita share dapat bermanfaat sebagaimana mestinya,, hehe
Makalah Suport By :
BAB I
PENDAHULUAN
1.1 Latar Belakang
Perkembangan ilmu dan teknologi merupakan salah satu produksi dari manusia yang terdidik, dan pada gilirannya manusia-manusia itu perlu lebih mendalami dan mampu mengambil manfaat dan bukan menjadi korban dari perkembangan ilmu dan teknologi sendiri. Mendalami serta mengambil manfaat dari perkembangan ilmu dan teknologi tidak mungkin dilakukan oleh semua manusia dengan kadar waktu yang sama. Keterbatasan manusia dan waktu menuntut adanya spesialisasi yang semakin mendalam.
Pembelajaran dewasa ini menghadapi dua tantangan, tantangan yang pertama datang dari adanya perubahan persepsi tentang belajar itu sendiri dan tantangan yang kedua datang dari adanya teknologi informasi dan telekomunikasi yang memperlihatkan perkembangan yang luar biasa. Konstruktivisme pada dasarnya telah menjawab tantangan yang pertama dengan meredefinisi belajar sebagai proses konstruktif di mana informasi diubah menjadi pengetahuan melalui proses interpretasi, korespondensi, representasi, dan elaborasi. Sementara itu, kemajuan teknologi informasi dan telekomunikasi yang begitu pesat yang menawarkan berbagai kemudahan-kemudahan baru dalam pembelajaran memungkinkan terjadinya pergeseran orientasi belajar pada masyarakat. Lebih dari itu, teknologi ini ternyata turut pula memainkan peran penting dalam memperbarui konsepsi pembenaran yang semula fokus pada pembelajaran sebagai semata-mata suatu penyajian berbagai pengetahuan menjadi pembelajaran sebagai suatu bimbingan agar mampu melakukan eksplorasi sosial-budaya yang kaya akan pengetahuan.
Permasalahan yang sering muncul berkenaan dengan penggunaan media pembelajaran,
yakni ketersediaan dan pemanfaatan. Ketersediaan media, masih sangat kurang sehingga para
pengajar menggunakan media secara minimal. Media yang sering digunakan adalah media cetak (diktat, modul, hand out, buku teks, majalah, surat kabar, dan sebagainya), dan didukung dengan alat bantu sederhana yang masih tetap digunakan seperti papan tulis/white board dan kapur/spidol. Sedangkan media audio dan visual (kaset audio, siaran TV/Radio, overhead transparency, video/film,), dan media elektronik (komputer, internet) masih belum secara intensif dimanfaatkan. Masalah kedua, pemanfaatan media. Media cetak merupakan media yang paling sering digunakan oleh pengajar, karena mudah untuk dikembangkan maupun dicari dari berbagai sumber. Namun, kebanyakan media cetak sangat tergantung pada verbal symbols (kata-kata) yang bersifat sangat abstrak, sehingga menuntut daya imajinasi yang sangat tinggi dari pebelajar, hal inilah yang dapat menyulitkan mereka untuk memahami informasi yang terkandung didalamnya. Karena itu dalam pemanfaatan media ini, diperlukan kreativitas dan juga pertimbangan instruksional yang matang dari pengajar. Kenyataan yang sering terlihat adalah, banyak pengajar menggunakan media pembelajaran seadanya tanpa pertimbangan pembelajaran.
Salah satu media yang sangat menarik untuk dimanfaatkan dalam pembelajaran adalah media Web Blog atau biasa disebut dengan Blog. Menurut wikipedia.com, Blog adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian.
Blog sebagai salah satu layanan aplikasi dari internet dapat dimanfaatkan oleh pengajar dan pebelajar sebagai sumber belajar yang tidak terbatas. Pengajar dapat meng-upload semua informasi yang berkaitan dengan materi pembelajaran yang diajarkan dengan menambahkan multimedia (gambar, animasi, efek suara dan video) agar menarik dan lebih mudah dipelajari. Dilihat dari pihak lain, pebelajar dapat men-download informasi yang sesuai dengan topik dan tujuan yang diinginkan.
Penggunaan Blog sebagai sebagai media pembelajaran sekaligus sebagai sumber belajar sedikitnya akan mengubah cara belajar dan teknik pembelajaran agar tidak monoton sehingga dapat memotivasi pebelajar dalam mempelajari sesuatu.
1.2 Rumusan Masalah
Dari latar belakang yang telah diuraikan di atas dapat dkemukakan rumusan masalah, sebagai berikut:
1.2.1 Apakah yang dimaksud dengan Blog?
1.2.2 Bagaimana sejarah munculnya Blog?
1.2.3 Bagaimana pemanfaatan Blog sebagai sumber belajar?
1.3 Tujuan
Adapun tujuan dari makalah ini adalah:
1.3.1 Untuk mengetahui pengertian Blog.
1.3.2 Untuk mengetahui sejarah munculnya Blog.
1.3.3 Untuk mengetahui pemanfaatan Blog sebagai sumber belajar.
1.4 Manfaat
Makalah ini diharapkan dapat memberi manfaat yaitu sebagai bahan masukan bagi para pengajar dan pihak yang berkecimpung dalam dunia pendidikan dalam menggunakan media pembelajaran yang menarik yang nantinya dapat menunjang pembelajaran di masyarakat.
pengajar menggunakan media secara minimal. Media yang sering digunakan adalah media cetak (diktat, modul, hand out, buku teks, majalah, surat kabar, dan sebagainya), dan didukung dengan alat bantu sederhana yang masih tetap digunakan seperti papan tulis/white board dan kapur/spidol. Sedangkan media audio dan visual (kaset audio, siaran TV/Radio, overhead transparency, video/film,), dan media elektronik (komputer, internet) masih belum secara intensif dimanfaatkan. Masalah kedua, pemanfaatan media. Media cetak merupakan media yang paling sering digunakan oleh pengajar, karena mudah untuk dikembangkan maupun dicari dari berbagai sumber. Namun, kebanyakan media cetak sangat tergantung pada verbal symbols (kata-kata) yang bersifat sangat abstrak, sehingga menuntut daya imajinasi yang sangat tinggi dari pebelajar, hal inilah yang dapat menyulitkan mereka untuk memahami informasi yang terkandung didalamnya. Karena itu dalam pemanfaatan media ini, diperlukan kreativitas dan juga pertimbangan instruksional yang matang dari pengajar. Kenyataan yang sering terlihat adalah, banyak pengajar menggunakan media pembelajaran seadanya tanpa pertimbangan pembelajaran.
Salah satu media yang sangat menarik untuk dimanfaatkan dalam pembelajaran adalah media Web Blog atau biasa disebut dengan Blog. Menurut wikipedia.com, Blog adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian.
Blog sebagai salah satu layanan aplikasi dari internet dapat dimanfaatkan oleh pengajar dan pebelajar sebagai sumber belajar yang tidak terbatas. Pengajar dapat meng-upload semua informasi yang berkaitan dengan materi pembelajaran yang diajarkan dengan menambahkan multimedia (gambar, animasi, efek suara dan video) agar menarik dan lebih mudah dipelajari. Dilihat dari pihak lain, pebelajar dapat men-download informasi yang sesuai dengan topik dan tujuan yang diinginkan.
Penggunaan Blog sebagai sebagai media pembelajaran sekaligus sebagai sumber belajar sedikitnya akan mengubah cara belajar dan teknik pembelajaran agar tidak monoton sehingga dapat memotivasi pebelajar dalam mempelajari sesuatu.
1.2 Rumusan Masalah
Dari latar belakang yang telah diuraikan di atas dapat dkemukakan rumusan masalah, sebagai berikut:
1.2.1 Apakah yang dimaksud dengan Blog?
1.2.2 Bagaimana sejarah munculnya Blog?
1.2.3 Bagaimana pemanfaatan Blog sebagai sumber belajar?
1.3 Tujuan
Adapun tujuan dari makalah ini adalah:
1.3.1 Untuk mengetahui pengertian Blog.
1.3.2 Untuk mengetahui sejarah munculnya Blog.
1.3.3 Untuk mengetahui pemanfaatan Blog sebagai sumber belajar.
1.4 Manfaat
Makalah ini diharapkan dapat memberi manfaat yaitu sebagai bahan masukan bagi para pengajar dan pihak yang berkecimpung dalam dunia pendidikan dalam menggunakan media pembelajaran yang menarik yang nantinya dapat menunjang pembelajaran di masyarakat.
BAB II
PEMBAHASAN
2.1 Pengertian Blog
Di zaman yang serba modern ini, hampir setiap pengguna internet di Indonesia membicarakan mengenai Blog. Istilah Weblog yang kemudian disingkat menjadi Blog sebenarnya mulai dikenal sejak tahun 1997, namun baru populer pada tahun 2000. Blog adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian.
Saat ini, Blog sudah menjadi bagian tak terpisahkan dari dunia WWW dan dunia per-internet-an. Blog sudah mulai dijadikan sebagai sumber berita oleh koran-koran, majalah, radio, bahkan televisi juga sudah menyiarkan beritanya lewat Blog mereka. Dunia pendidikan pun sudah banyak menampilkan materi pendidikan di dalam Blog yang telah dibuat khusus maupun tidak khusus untuk dunia pendidikan.
Didalam Blog para pengajar maupun pihak yang berkecimpung dalam dunia pendidikan dapat mem-posting materi-materi yang mereka anggap berguna bagi para pencari informasi pendidikan. Sedangkan pencari informasi pendidikan pun dapat berpartisipasi mengembangkan maupun sekedar memberikan komentar dari isi Blog yang telah dilihat.
2.2 Sejarah Lahirnya Blog
Di masa lalu, dunia web masih memiliki tampilan yang sederhana, dengan warna background yang tidak menarik, teks warna hitam, dan link berwarna biru. Kemudian berangsur-angsur muncullah gambar, suara, animasi, dan video yang membuat tampilan web menjadi lebih menarik. Walaupun demikian, tampilan halaman web masih terlihat statis. Walaupun sudah ada pendekatan untuk memisahkan data dengan tampilan web dengan cara menyimpan data ke database, namun tetap saja tampilannya berubah jika ada yang meng-update-nya secara manual.
Pada akhir tahun 1990-an mulai muncul software untuk membuat Blog dan muncul juga layanan-layanan lain yang mmbuat orang mudah membuat website dan meng-update-nya secara kontinyu. Fasilitas-fasilitas ini mulai berevolusi hingga menjadi layanan Blog seperti sekarang ini. Dengan menggunakan layanan blogging, seseorang tidak perlu melakukan koding HTML secara manual untuk menentukan letak isi artikel-artikel. Pengguna hanya perlu mengisikan isi artikel ke sebuah form dan menyimpannya, maka isi artikel tersebut otomatis akan ditampilkan oleh software blogging tersebut. Dengan dimikian, proses penggantian konten website menjadi lebih mudah, cepat, dan tidak mahal.
2.3 Pemanfaatan Blog Sebagai Sumber Belajar
2.3.1 Pengertian Pemanfaatan
Dalam kehidupan sehari-hari manusia tidak akan dapat terlepas dari kata belajar, baik itu belajar dalam lingkungan formal maupun belajar di lingkungan non-formal. Saat manusia belajar sesuatu maka mereka secara sadar maupun tidak sadar telah memanfaatkan sumber belajar yang ada berupa buku, tv, radio, manusia, bahkan internet.
Purwanto dalam blognya memberikan pengertian pemanfaatan yaitu sebagai aktivitas menggunakan proses dan sumber belajar. Ada lima aspek dalam pemanfaatan, yaitu:
a. Media sebagai teknologi mesin
b. Media sebagai tutor
c. Media sebagai pemotivasi belajar
d. Media sebagai alat berpikir dan memecahkan masalah
2.3.2 Pengertian Sumber Belajar
Sumber belajar adalah apa saja (orang, bahan, alat, teknik, lingkungan) yang mendukung serta memungkinkan memberikan kemudahan dan kelancaran terjadinya belajar, serta memungkinkan terjadinya interaksi antara pebelajar dengan sumber belajar tersebut.
Sumber belajar dapat dikelompokan menjadi dua bagian, yaitu :
a. Sumber belajar yang sengaja direncanakan (learning resources by design), yakni semua sumber yang secara khusus telah dikembangkan sebagai komponen sistem instruksional untuk memberikan fasilitas belajar yang terarah dan bersifat formal Contohnya adalah : buku pelajaran, modul, program audio, transparansi (OHT).
b. Sumber belajar yang karena dimanfaatkan (learning resources by utilization), yakni sumber belajar yang tidak secara khusus didisain untuk keperluan pembelajaran namun dapat ditemukan, diaplikasikan, dan dimanfaatkan untuk keperluan belajar. Contohnya: pejabat pemerintah, tenaga ahli, pemuka agama, guru, olahragawan, kebun binatang, waduk, museum, film, sawah, terminal, surat kabar, siaran televisi, internet (dalam hal ini berupa Blog) dan masih banyak lagi yang lain.
Media massa adalah suatu jenis komunikasi yang ditujukan kepada sejumlah khalayak yang tersebar, heterogen, dan anonim melewati media cetak atau elektronik, sehingga pesan informasi yang sama dapat diterima secara serentak dan sesaat. Pengertian "dapat" di sini menekankan pada pengertian, bahwa jumlah sebenarnya penerima pesan informasi melalui media massa pada saat tertentu tidaklah esensial. Adapun bentuk media massa, secara garis besar, ada dua jenis, yaitu : media cetak (surat kabar dan majalah, termasuk buku-buku) dan media elektronik (televisi dan radio, termasuk internet)
Agar bisa terjadi kegiatan belajar pada si pebelajar, maka pebelajar harus secara aktif melakukan interaksi dengan berbagai sumber belajar. Perubahan perilaku sebagai hasil belajar hanya mungkin terjadi jika ada interaksi antara pebelajar dengan sumber-sumber belajar. Inilah yang seharusnya diusahakan oleh setiap pebelajar (instructor, guru) dalam kegiatan pembelajaran. Oleh karena itu para pendidik maupun yang berkompeten dalam hal itu dituntut untuk kreatif dalam menciptakan sumber belajar yang dapat dimanfaatkan oleh pebelajar dalam memahami materi tertentu.
Sumber belajar memiliki fungsi :
a. Meningkatkan produktivitas pembelajaran dengan jalan: (a) mempercepat laju belajar dan membantu guru untuk menggunakan waktu secara lebih baik dan (b) mengurangi beban guru dalam menyajikan informasi, sehingga dapat lebih banyak membina dan mengembangkan gairah.
b. Memberikan kemungkinan pembelajaran yang sifatnya lebih individual, dengan cara: (a) mengurangi kontrol guru yang kaku dan tradisional; dan (b) memberikan kesempatan bagi siswa untuk berkembang sesuai dengan kemampuannnya.
c. Memberikan dasar yang lebih ilmiah terhadap pembelajaran dengan cara: (a) perancangan program pembelajaran yang lebih sistematis; dan (b) pengembangan bahan pengajaran yang dilandasi oleh penelitian.
d. Lebih memantapkan pembelajaran, dengan jalan: (a) meningkatkan kemampuan sumber belajar; (b) penyajian informasi dan bahan secara lebih kongkrit.
e. Memungkinkan belajar secara seketika, yaitu: (a) mengurangi kesenjangan antara pembelajaran yang bersifat verbal dan abstrak dengan realitas yang sifatnya kongkrit; (b) memberikan pengetahuan yang sifatnya langsung.
f. Memungkinkan penyajian pembelajaran yang lebih luas, dengan menyajikan informasi yang mampu menembus batas geografis.
2.3.3 Pemanfaatan Blog Sebagai Sumber Belajar
Di tengah dunia yang semakin modern ini pemanfaatan teknologi dalam dunia pendidikan pun tidak dielakkan lagi. Dengan adanya teknologi modern, arus informasi semakin tak dapat terbendung lagi. Semua orang diseluruh dunia dapat mengetahui apa yang mereka inginkan melalui internet. Internet dapat menghilangkan batas ruang dan waktu sehingga siapa pun dapat memanfaatkanya.
Pemanfaatan internet dalam dunia pendidikan telah gencar dilakukan diberbagai negara. Bahkan internet sudah menjadi bagian yang tidak dapat dipisahkan dalam dunia pendidikan. Blog salah satu produk yang dihasilkan oleh internet dapat dimanfaatkan sebagai sumber belajar karena Blog dapat dibuat oleh siapa pun dengan sangat mudah dan yang paling penting Blog dapat dibuat dengan gratis.
Fakta di lapangan tentang penggunaan internet di kalangan para siswa dan pelajar, lebih banyak dimanfaatkan untuk melakukan hal-hal yang kurang produktif, seperti terlalu banyak chatting, friendster-an, bermain game online, dan mengakses pornografi. Blog yang jumlahnya berlipat 2 setiap 6 bulan, yang pemiliknya dari kalangan siswa dan remaja jumlahnya sangat signifikan, hal ini merupakan fenomena yang harus dimanfaatkan untuk meningkatkan kualitas pendidikan yaitu dengan membuat Blog yang berkualitas agar masyarakat pebelajar dapat dengan mudah memperoleh informasi yang dibutuhkan. Selain berkualitas, Blog yang dibuat harus juga menarik agar pebelajar makin betah belajar didunia maya.
Berbagai referensi, jurnal, maupun hasil penelitian dapat dengan mudah di download diberbagai Blog di seluruh dunia. Cukup memanfaatkan search engine, materi-materi yang dibutuhkan dapat diperoleh dengan cepat. Selain menghemat tenaga dan biaya dalam mencarinya, materi-materi yang dapat ditemui cenderung lebih up to date. Adapun manfaat Blog bagi pebelajar adalah sebagai berikut:
a. meningkatkan pengetahuan,
b. berbagi sumber diantara rekan sejawat,
c. bekerjasama dengan pengajar di luar negeri,
d. kesempatan mempublikasikan informasi secara langsung,
e. mengatur komunikasi secara teratur, dan
f. berpartisipasi dalam forum-forum lokal maupun internasional.
Di samping itu para pengajar juga dapat memanfaatkan Blog sebagai sumber bahan mengajar dengan mengakses rencana pembelajaran atau silabus online dengan metodologi baru, mengakses materi kuliah yang cocok untuk mahasiswanya, serta dapat menyampaikan ide-idenya. Sementara itu mahasiswa juga dapat menggunakan internet untuk belajar sendiri secara cepat, sehingga akan meningkatkan dan memperluas pengetahuan, belajar berinteraksi, dan mengembangkan kemampuan dalam bidang penelitian.
Blog juga dapat dimanfaatkan oleh para guru untuk media pembelajaran, yaitu Blog guru sebagai pusat pembelajaran. Guru dapat menuliskan materi belajar, tugas, maupun bahan diskusi di blognya, kemudian para muridnya bisa berdiskusi dan belajar bersama-sama di blog gurunya tersebut. Selain itu blog guru dan murid juga dapat saling berinteraksi. Guru, yang harus memiliki Blog, mengharuskan murid memiliki blognya masing-masing, sebagai sarana mengerjakan tugas-tugas yang diberikan oleh gurunya. Metode ini bisa memacu iklim kompetisi antar siswa, karena tentu saja para siswa ingin blognya menjadi yang terbaik. Setelah semua siswa memiliki Blog dibuatlah suatu komunitas blogger pebelajar. Ada sebuah Blog sebagai pusat pembelajaran (bisa berupa blog aggregator atau blog dengan beberapa kontributor), dengan guru-guru dan siswa dari berbagai sekolah bisa tergabung dalam komunitas blogger pebelajar tersebut.
BAB III
PENUTUP
3.1 Kesimpulan
Blog adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Didalam Blog para pengajar maupun pihak yang berkecimpung dalam dunia pendidikan dapat mem-posting materi-materi yang mereka anggap berguna bagi para pencari informasi pendidikan. Sedangkan pencari informasi pendidikan pun dapat berpartisipasi mengembangkan maupun sekedar memberikan komentar dari isi Blog yang telah dilihat. Berbagai referensi, jurnal, maupun hasil penelitian dapat dengan mudah di download diberbagai Blog di seluruh dunia. Cukup memanfaatkan search engine, materi-materi yang dibutuhkan dapat diperoleh dengan cepat. Selain menghemat tenaga dan biaya dalam mencarinya, materi-materi yang dapat ditemui cenderung lebih up to date. Untuk menunjang pendidikan sebaiknya Blog yang dibuat harus berkualitas dan menarik agar pebelajar dapat memperoleh informasi yang bermanfaat.
3.2 Saran
Sebagai seorang yang bergerak di dunia pendidikan baik itu sebagai guru, dosen, penulis, maupun pustakawan sebaiknya lebih memperhatikan penggunaan teknologi canggih yang memiliki manfaat lebih seperti Blog dalam menyebarkan segala informasi yang bersifat mendidik masyarakat, selain menghemat biaya juga dapat menghemat ruang dan waktu yang tersedia.
NaHh, kawaNn jumpa lagi daHh,, makin rumit aja ini pembelajaran html kita..
heHheee,,
masalahnya kita harus combine script html kita dengan menggunakan CSS.
pada dasarnya ini semua masih pada program latihan saja..
sponsored by :
aq sih pengen nampilin halaman seperti inini guyss,, jadi ntar kalian tinggal nginputin content, terserah dah mau diisi apa'an, sekaligus pengen kasih link event
terserah dehh, suka suka kalian ntar yang ngebuat nya.. hehe
nihh halaman nya guYyss..
bnernya sih tampilan diatas itu belum sesuai sama apa yg aq inginkan guyss, tapi ntar biar aq perbaikin lagiduludah,, g penting aq ingin ngeshare ilmunya dulu sama kalian kalu kita pengen mendisain halaman web dengan CSS.
petama,
buat script CSS nya kawaNn..
nih script nya guys..
body{
margin : 10px auto;
width : 900px;
}
header, logo, um, te, nav, search, box, section, pict, article, event, footer{
display : block;
}
header{
height: 90px;
width: auto;
background-image : url(images/A.jpeg);
}
logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/c.jpg);
}
te{
padding: 30px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
um{
float: right;
margin-right : 2px;
margin-top : 30px;
height : 70px;
width : 100px;
background-image : url(images/c.jpg);
}
nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}
home, news, tutorial, tips, download{
display: block;
float: left;
background-color: #316bff;
margin-top: 0px;
float: left;
text-align : center;
color : #ffffff;
font-size: 14px;
font-family: times new roman;
font-weight: bold;
}
home{
float: left;
margin-left: 287px;
width: 50px;
height: 23px;
}
news{
float: left;
margin-left: 2px;
width: 110px;
height: 23px;
}
tutorial{
float: left;
margin-left: 2px;
width: 60px;
height: 23px;
}
tips{
float: left;
margin-left: 2px;
width: 90px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 900px;
height : 450px;body{
margin : 10px auto;
width : 900px;
}
header, logo, um, te, nav, search, box, section, pict, article, event, footer{
display : block;
}
header{
height: 90px;
width: auto;
background-image : url(images/d.JPG);
}
logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/c.jpg);
}
te{
padding: 30px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
um{
float: right;
margin-right : 2px;
margin-top : 30px;
height : 70px;
width : 100px;
background-image : url(images/b.jpg);
}
nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}
home, news, tutorial, tips, download{
display: block;
float: left;
background-color: #316bff;
margin-top: 0px;
float: left;
text-align : center;
color : #ffffff;
font-size: 14px;
font-family: times new roman;
font-weight: bold;
}
home{
float: left;
margin-left: 287px;
width: 50px;
height: 23px;
}
news{
float: left;
margin-left: 2px;
width: 110px;
height: 23px;
}
tutorial{
float: left;
margin-left: 2px;
width: 60px;
height: 23px;
}
tips{
float: left;
margin-left: 2px;
width: 90px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 900px;
height : 450px;
background-color : #bbdefb;
}
pict{
float: left;
width: 300px;
height: 450px;
background-image : url(images/c.jpg);
}
article{
float : left;
text-align: center;
margin-left: 10px;
width: 580px;
height: 310px;
background-color : #ffffff;
font-size : 11px;
font-family : Lucida Console;
}
info{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-top: 1px;
margin-left: 10px;
width: 580px;
height: 20px;
background-color : #dcf4ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 10px;
width: 580px;
height: 115px;
background-color : #bbdefb;
}
footer{
clear : both;
height : 35px;
background-image : url(d.JPG);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}
linkmenu a{
padding: 2px 0px 2px 5px; display: block;
margin: 0px 0px 1px; color: #ffffff;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:#fffff;
}
list{
list-style-position: inside;
}
background-color : #bbdefb;
}
pict{
float: left;
width: 300px;
height: 450px;
background-image : url(b.jpg);
}
article{
float : left;
text-align: center;
margin-left: 10px;
width: 580px;
height: 310px;
background-color : #ffffff;
font-size : 11px;
font-family : Lucida Console;
}
info{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-top: 1px;
margin-left: 10px;
width: 580px;
height: 20px;
background-color : #dcf4ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 10px;
width: 580px;
height: 115px;
background-color : #bbdefb;
}
footer{
clear : both;
height : 35px;
background-image : url(e.JPG);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}
linkmenu a{
padding: 2px 0px 2px 5px; display: block;
margin: 0px 0px 1px; color: #ffffff;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:#fffff;
}
list{
list-style-position: inside;
}
margin : 10px auto;
width : 900px;
}
header, logo, um, te, nav, search, box, section, pict, article, event, footer{
display : block;
}
header{
height: 90px;
width: auto;
background-image : url(images/A.jpeg);
}
logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/c.jpg);
}
te{
padding: 30px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
um{
float: right;
margin-right : 2px;
margin-top : 30px;
height : 70px;
width : 100px;
background-image : url(images/c.jpg);
}
nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}
home, news, tutorial, tips, download{
display: block;
float: left;
background-color: #316bff;
margin-top: 0px;
float: left;
text-align : center;
color : #ffffff;
font-size: 14px;
font-family: times new roman;
font-weight: bold;
}
home{
float: left;
margin-left: 287px;
width: 50px;
height: 23px;
}
news{
float: left;
margin-left: 2px;
width: 110px;
height: 23px;
}
tutorial{
float: left;
margin-left: 2px;
width: 60px;
height: 23px;
}
tips{
float: left;
margin-left: 2px;
width: 90px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 900px;
height : 450px;body{
margin : 10px auto;
width : 900px;
}
header, logo, um, te, nav, search, box, section, pict, article, event, footer{
display : block;
}
header{
height: 90px;
width: auto;
background-image : url(images/d.JPG);
}
logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/c.jpg);
}
te{
padding: 30px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
um{
float: right;
margin-right : 2px;
margin-top : 30px;
height : 70px;
width : 100px;
background-image : url(images/b.jpg);
}
nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}
home, news, tutorial, tips, download{
display: block;
float: left;
background-color: #316bff;
margin-top: 0px;
float: left;
text-align : center;
color : #ffffff;
font-size: 14px;
font-family: times new roman;
font-weight: bold;
}
home{
float: left;
margin-left: 287px;
width: 50px;
height: 23px;
}
news{
float: left;
margin-left: 2px;
width: 110px;
height: 23px;
}
tutorial{
float: left;
margin-left: 2px;
width: 60px;
height: 23px;
}
tips{
float: left;
margin-left: 2px;
width: 90px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 900px;
height : 450px;
background-color : #bbdefb;
}
pict{
float: left;
width: 300px;
height: 450px;
background-image : url(images/c.jpg);
}
article{
float : left;
text-align: center;
margin-left: 10px;
width: 580px;
height: 310px;
background-color : #ffffff;
font-size : 11px;
font-family : Lucida Console;
}
info{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-top: 1px;
margin-left: 10px;
width: 580px;
height: 20px;
background-color : #dcf4ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 10px;
width: 580px;
height: 115px;
background-color : #bbdefb;
}
footer{
clear : both;
height : 35px;
background-image : url(d.JPG);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}
linkmenu a{
padding: 2px 0px 2px 5px; display: block;
margin: 0px 0px 1px; color: #ffffff;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:#fffff;
}
list{
list-style-position: inside;
}
background-color : #bbdefb;
}
pict{
float: left;
width: 300px;
height: 450px;
background-image : url(b.jpg);
}
article{
float : left;
text-align: center;
margin-left: 10px;
width: 580px;
height: 310px;
background-color : #ffffff;
font-size : 11px;
font-family : Lucida Console;
}
info{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-top: 1px;
margin-left: 10px;
width: 580px;
height: 20px;
background-color : #dcf4ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 10px;
width: 580px;
height: 115px;
background-color : #bbdefb;
}
footer{
clear : both;
height : 35px;
background-image : url(e.JPG);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}
linkmenu a{
padding: 2px 0px 2px 5px; display: block;
margin: 0px 0px 1px; color: #ffffff;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:#fffff;
}
list{
list-style-position: inside;
}
lalu kita panggil script di atas menggunakan script HTML sperti yg kita ketahui bersama guySs,,
dan ini untuk script HTML nya guyss..
<!Doctype HTML>
<html lang="en">
<HEAD>
<TITLE>Your Title</TITLE>
<link rel="stylesheet" href="rumah4.css" type="text/css" />
</HEAD>
<BODY>
<HEADER>
<LOGO></LOGO>
<TE>WEB DESIGN</TE>
</HEADER>
<NAV><SEARCH>Search</SEARCH><BOX>
<INPUT type="text" size="20" />
</BOX>
<LINKMENU>
<HOME><a href="#">Home</a></HOME>
<NEWS><a href="#">News & Media</a></NEWS>
<TUTORIAL><a href="#">Tutorial</a></TUTORIAL>
<TIPS><a href="#">Tips & Trick</a></TIPS>
<DOWNLOAD><a href="#">Download</a></DOWNLOAD>
</LINKMENU>
</NAV>
<SECTION>
<PICT></PICT>
<ARTICLE>
Kamu dapat berkreasi sesuai dengan apa yg kalian mau pada halaman ini, seperti pada halaman web pada umumnya jadi kita menyediakan sebuah konten yg nantinya dapat kita gunakan untuk memberikan sebuah informasi bagi pengunjung.
</ARTICLE>
<INFO>Your_Information</INFO>
<EVENT><B>ELECTRO EVENT :</B>
<ul><li><a href="#">FUTSAL COMPETITION</a></li>
<li><a href="#"">ELEKTRO BAND</a></li>
<li><a href="#">LINE TRACER RoBOTIC</a></li>
<li><a href="#">WEB DESIGN</a></li>
</ul>
</EVENT>
</SECTION>
<FOOTER>
Home | News & Media | Tutorial | Tips & Tricks | Download
<BR>© CopyRight andibayu 2011
</FOOTER>
</BODY>
</HTML>
<html lang="en">
<HEAD>
<TITLE>Your Title</TITLE>
<link rel="stylesheet" href="rumah4.css" type="text/css" />
</HEAD>
<BODY>
<HEADER>
<LOGO></LOGO>
<TE>WEB DESIGN</TE>
</HEADER>
<NAV><SEARCH>Search</SEARCH><BOX>
<INPUT type="text" size="20" />
</BOX>
<LINKMENU>
<HOME><a href="#">Home</a></HOME>
<NEWS><a href="#">News & Media</a></NEWS>
<TUTORIAL><a href="#">Tutorial</a></TUTORIAL>
<TIPS><a href="#">Tips & Trick</a></TIPS>
<DOWNLOAD><a href="#">Download</a></DOWNLOAD>
</LINKMENU>
</NAV>
<SECTION>
<PICT></PICT>
<ARTICLE>
Kamu dapat berkreasi sesuai dengan apa yg kalian mau pada halaman ini, seperti pada halaman web pada umumnya jadi kita menyediakan sebuah konten yg nantinya dapat kita gunakan untuk memberikan sebuah informasi bagi pengunjung.
</ARTICLE>
<INFO>Your_Information</INFO>
<EVENT><B>ELECTRO EVENT :</B>
<ul><li><a href="#">FUTSAL COMPETITION</a></li>
<li><a href="#"">ELEKTRO BAND</a></li>
<li><a href="#">LINE TRACER RoBOTIC</a></li>
<li><a href="#">WEB DESIGN</a></li>
</ul>
</EVENT>
</SECTION>
<FOOTER>
Home | News & Media | Tutorial | Tips & Tricks | Download
<BR>© CopyRight andibayu 2011
</FOOTER>
</BODY>
</HTML>
Soo, begitulah kawaNn cara kerja kita klau meng combine script css dengan script html,
benernya gambar diatas masih kurang dari sempurna sih, keburu aq upload aja di blogQ, hehHeeee
ntar pasti aq perbaikin kok,, update info dari blog ini yahh guySs..
Coba dulu daHh..
Gud Luck guyysss..
Hai kawaNn,,
balik lagi kita belajar HTML yapSs..
kali ini kita akan membuat suatu bangun dngak kreasi baru, aslinya sih cuma coba2 aja kok guySs.. hehe jadi juga ternyata..
Sponsored by :
Ok guys ini nantinya gambar yg pingin aq share sama kalian semua, maksud aq bentuk jadinya sih cuman bentuk bangun sederhana seperti ini aja.. hehe
Nah simpel kan ternyata gambarnya.. so, ini dia guys scriptnya buat ngebuat gambar seperti gambar di atas : rumit
juga kalu mikir buat dari 0 gitu itu, hehe
<title>Studi Kasus</title>
<style type="text/css">
<!--
.andi {
background-color: cyan;
-moz-border-radius: 700px;
-webkit-border-radius: 150px;
border: 10px solid #000000;
padding: 50px;
width: 200px;
height: 200px;
}
.bayu {
padding: 50px;
border: 10px solid teal;
width: 200px;
height: 50px;
background: lime;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
}
.sulistiya {
padding: 50px;
border: 5px solid red;
-moz-box-shadow: 10px 10px 10px rgba(125, 0, 255, 255);
width: 200px;
height: 50px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
}
-->
</style>
<div align="center" class="andi">
Yang ini border lingkaran.
Gawenen..
OJO ONLEN AE!!!</div>
<div align="center" class="bayu">
KOtaKk.........</div>
<div align="center" class="sulistiya">
efeeKk shadoWw....</div>
naHh, silahkan di coba guYyss,, moga kalian berhasil yaa...
banyak latihan makin pintar dah kaliaNn.. hehe
gimana kabar kalian?? ready buat belajar VB.NET lagi??? (^_^')
jadi, untuk kali ini kita akan membahas mengenai bagaimana memanfaatkan toolbox radio button yg sekaligus kita rangkai dan susun dengan berbagai event dan prosedur, sehingga dapat menjadi program sederhana yg sekiranya bisa membantu kalian dalam menyelesaikan persoalan mgkin yg berkaitan dengan tugas2 anda mengenai prosedur pada VB.NET
suport by :
jadi saya mulai dengan menampilkan scriptnya ya kawaNn :
jadi pertama saya buat class dulu kawan, cara nya di toolbar project kemudian langsung aja add class, dan inilah scriptnya pada class tersebut :
Public Class rumus_volume Sub Balok()
Dim panjang, lebar, tinggi, volume As Integer
panjang = InputBox("Panjang")
lebar = InputBox("Lebar")
tinggi = InputBox("Tinggi")
volume = panjang * lebar * tinggi
MessageBox.Show("Panjang: " & panjang & vbCrLf & "Lebar: " & lebar & vbCrLf & "Tinggi: " & tinggi & vbCrLf & "Volume= " & volume)
End Sub
Sub prismasegi3()
Dim alas, tinggiS, tinggiP, Volume As Integer
alas = InputBox("Alas Seg3")
tinggiS = InputBox("Tinggi Segi3")
tinggiP = InputBox("Tinggi Prisma")
Volume = 1 / 2 * (alas * tinggiS) * tinggiP
MessageBox.Show("Alas: " & alas & vbCrLf & " Tinggi Segitiga: " & tinggiS & vbCrLf & "Tinggi Prisma: " & tinggiP & vbCrLf & "Volume: " & Volume)
End Sub
Sub limassegi3()
Dim alasS, tinggiS, tinggiL, volume As Integer
alasS = InputBox("Alas Segi3")
tinggiS = InputBox("Tinggi Segi3")
tinggiL = InputBox("Tinggi Limas")
volume = 1 / 3 * 1 / 2 * alasS * tinggiS * tinggiL
MessageBox.Show("Alas: " & alasS & vbCrLf & " Tinggi Segitiga: " & tinggiS & vbCrLf & "Tinggi Limas: " & tinggiL & vbCrLf & "Volume: " & volume)
End Sub
Sub bola()
Dim r, t, volume As Integer
r = InputBox("Jari-Jari")
volume = 3 / 4 * 3.14 * r * r * r
MessageBox.Show("Kalikan: 3/4" & vbCrLf & "Jari-jari: " & r & vbCrLf & "Phi: 3.14" & vbCrLf & "Volume: " & volume)
End Sub
End Class
------>>>>>>>>--------
lanjutnya kawaNn, saya tampilkan script pada event2 yg ada dan sesuai dengan form. lembar kerja saya.
ini scrptnya :
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Me.Text = "Hitung Volume:..."
End Sub
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
If RadioButton1.Checked = True Then
Dim Vbalok As New rumus_volume
Vbalok.Balok()
ElseIf RadioButton2.Checked = True Then
Dim Vprisma As New rumus_volume
Vprisma.prismasegi3()
ElseIf RadioButton3.Checked = True Then
Dim Vlimas As New rumus_volume
Vlimas.limassegi3()
ElseIf RadioButton4.Checked = True Then
Dim Vbola As New rumus_volume
Vbola.bola()
End If
End Sub
Private Sub RadioButton1_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles RadioButton1.CheckedChanged
End Sub
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
End
End Sub
End Class
dari script di atas, maka tampilan program nya, bisa seperti ini : ( ini sih cuma kreasi biasa aja ) silahkan berkreasi dengan khayalanmu mengenai tampilan nya, hehe
jadi saya akan menampilkan untuk menghitung volume bola aja ya kawaNn :
lanjutnya kita akan di suruh untuk menginputkan nilai panjang, lebar, tinggi, jangan lupa kalian klik radioButton nya dulu ya Guyyss.. hehe
ini adalah tampilan kita menginputkan nilai nya :
silahkan mencoba dan moga berhasil,,
silahkan kasih kritik dan saran jika ada yg salah dari ilmu yg sudah saya share kan..
Karena saya yakin dengan kita menularkan ilmu yg kita punya bukan lawan yg muncul , dibalik itu semua ada berkah yg membuat kita semakin Terampilll.....
OK,
Gud Luck GuySs...
Langganan:
Postingan (Atom)
