Pengertian event dalam Javascript

<div style="text-align: justify;"> <b>Interaksi User</b><br />Adanya interaktifitas dalam aplikasi akan membantu menarik minat pengguna untuk menggunakan aplikasi yang dikembangkan. Di banyak bahasa pemrograman pengolahan interaksi ini dikenal sebagai teknik penanganan event. Event dalam Javascript adalah sebuah kejadian interaksi antara user dengan halaman web. Bentuk interaksi ini dapat digambarkan seperti pada saat user melakukan klik pada tombol ataupun link, mengetik username dan password dan sebagainya.<br /><br />Event ini pada HTML ditambahkan dalam bentuk atribut dari elemen yang ada. Program javascript yang ditempatkan pada atribut tersebut akan dijalankan pada saat interaksi yang bersesuaian terjadi. Berikut ini merupakan daftar atribut yang dapat digunakan untuk mengolah interaksi user<br /></div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwxERItrLeXpUe2F8I13k1CVQ_TfVhnQM1tqYeyM8AWf_CGt_RsyitkMP_dg-PqpS0eAnIarh7odwYZOZ8GjG7dRvFGkwLR45bxp-BBhzQP6qmgF88tZ7b5I0-tTA7kX6tS9HuOKQq72t/s1600/at.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwxERItrLeXpUe2F8I13k1CVQ_TfVhnQM1tqYeyM8AWf_CGt_RsyitkMP_dg-PqpS0eAnIarh7odwYZOZ8GjG7dRvFGkwLR45bxp-BBhzQP6qmgF88tZ7b5I0-tTA7kX6tS9HuOKQq72t/s400/at.png" width="400" /></a></div> <div style="text-align: justify;"> </div> <br /> <br /> <div style="text-align: justify;"> </div> <div class="separator" style="clear: both;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlhaMaAvjw4CdBWYhCYaqvcrjvTJ_9c0KX1_Gv76NIRwNVvJxB22UokrqjhkeTC-2GMDjZGmjzJ1pBDfVab9rFcUHuD3YBzVaTQKfCE29L1mgazKbXc2Y2QuUjC0Vz4zf5KV0K2FrImnQj/s1600/at+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlhaMaAvjw4CdBWYhCYaqvcrjvTJ_9c0KX1_Gv76NIRwNVvJxB22UokrqjhkeTC-2GMDjZGmjzJ1pBDfVab9rFcUHuD3YBzVaTQKfCE29L1mgazKbXc2Y2QuUjC0Vz4zf5KV0K2FrImnQj/s400/at+2.png" width="290" /></a></div> <br /> <div class="separator" style="clear: both;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvon06nPKLlywix2drmPZGXRz7zax8SunM_DJFrKR-EBkm2cxuNPDxeZiP6p0_29bwtXcIhYBzIQbls_XwNwAwErSl1tL3eQ3gofDEsVKPpscsZg4aSK-ONXYI83agazM5ONZVpIt4AnE5/s1600/at+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvon06nPKLlywix2drmPZGXRz7zax8SunM_DJFrKR-EBkm2cxuNPDxeZiP6p0_29bwtXcIhYBzIQbls_XwNwAwErSl1tL3eQ3gofDEsVKPpscsZg4aSK-ONXYI83agazM5ONZVpIt4AnE5/s320/at+3.png" width="320" /></a></div> Format penerapan kode Javascript pada atribut event diatas sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><tag atribut-event=”kode javascript;;” … > … </tag></span><br />atau untuk tag tanpa penutup<br /><span style="font-family: "Courier New",Courier,monospace;"><br /><tag atribut-event=”kode javascript;;” … /></span><br />Contoh program penerapan event pada halaman web.<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><a href=”http://kompas.com” onclick=”alert(‘Link ini akan<br />membuka halaman Kompas.com’);;”>Link 1</a></span><br /><br />Pada contoh diatas, apabila user melakukan klik pada Link 1, maka akan ditampilkan alert(). Selanjutnya pada contoh berikut ini sudah melibatkan fungsi di Javascript. Dimana apabila nilai dari input text berubah, maka alert() akan tampil dengan mengambil nilai yang diketikkan oleh user.<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><script><br />function sayHalo(){<br />var nm = document.getElementById('nama').value;<br />alert("Halo, " + nm);<br />}<br /></script><br /><input type="text" id="nama" onchange="sayHalo();" /></span><br /><br />Pernyataan document.getElementById(‘id elemen’).value adalah perintah javascript untuk mengambil nilai input dari elemen form.<br />

Interaksi UserAdanya interaktifitas dalam aplikasi akan membantu menarik minat pengguna untuk menggunakan aplikasi yang dikembangkan. Di banyak bahasa pemrograman pengolahan interaksi ini dikenal sebagai teknik penangan…

PBO Pemrograman Berbasis Prototipe

Pemrograman Berorientasi Obyek (PBO)<br /> Pemrograman berorientasi obyek adalah sebuah paradigma dalam pemrograman yang mengelompokkan fungsi, prosedur, variabel ataupun konstanta terkait dalam satu kesatuan (kelas) seperti obyek dalam dunia nyata. Obyek sendiri merupakan wujud dari kelas, secara umum dikenal dengan nama instan. Teknik-teknik dalam pemrograman ini merupakan pengembangan dari teknik sebelumnya seperti modularitas, polimorfisme, dan enkapsulasi. Saat ini ada banyak bahasa pemrograman yang telah mendukung pemrograman berorientasi obyek ini, seperti C++, C#, Java, Javascript, PHP, Python, Ruby, dan Objective C<br /> <br /> Dalam PBO setiap program akan menyatakan kumpulan dari obyek dan bukan lagi kumpulan fungsi ataupun kumpulan baris kode. Pada PBO ini setiap obyek memiliki kemampuan untuk menerima pesan, memproses data dan mengirim data ke obyek lainnya. Setiap obyek dapat dilihat sebagai program sendiri yang memiliki peran dan tanggungjawab masing-masing. Pengembangan program dengan menggunakan teknik PBO ini populer dalam program berskala besar karena fleksibel dan memudahkan dalam perbaikan.<br /> <br /> PBO: Pemrograman Berbasis Prototipe<br /> Javascript menggunakan PBO dengan model pemrograman berbasis prototipe. Model ini tidak mengenal kelas, yang ada adalah obyek. Obyek dalam model ini dapat dimodifikasi secara runtime seperti penambahan variabel (properti) ataupun metode (fungsi/prosedur). Model ini juga dikenal dengan istilah pemrograman PBO tanpa kelas, berorientasi prototipe atau berbasis instan.<br /> <br /> Javascript Object Oriented Programming<br /> <br /> <br /> Obyek Utama (Bawaan) Javascript memiliki banyak obyek bawaan seperti Math, Array, String dan Object. Setiap obyek dalam Javascript adalah instan dari obyek Object, sehingga ==memiliki semua properti dan metode yang ada.<br /> <br /> Obyek Buatan<br /> Javascript merupakan bahasa PBO yang menggunakan kata kunci function untuk mendefinisikan suatu kelas. Oleh karena itu, pembuatan kelas sama dengan pembuatan fungsi dalam Javascript. Berikut ini merupakan format yang dapat digunakan untuk mendefinisikan kelas pada javascript.<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;">function NamaKelas () {<br />}<br /><br />Atau dalam bentuk yang lebih lengkap<br /><br />function NamaKelas (argumen1, argumen2, …, argumenN)<br />{<br />this.namavar1 = nilaiInisial;<br />this.namavar2 = nilaiInisial;<br />…<br />this.namaFungsi1 = function(parameter1, parameter2, …,<br />parameterN){<br />…<br />}<br />…</span><br /> }<br /> <br /> Hal yang dapat diperhatikan pada format diatas adalah namavar1 dan namavar2 merupakan properti dari kelas tersebut. Pembuatan properti dari suatu obyek dilakukan dengan menambahkan kata kunci this di awal dari nama properti tersebut, seperti diperlihatkan dalam format diatas. Sedangkan pembuatan metode atau fungsi dari obyek dilakukan dengan cara yang sama hanya dengan properti dengan menambahkan definisi fungsinya dengan menggunakan kata kunci function. Pembuatan obyek dari kelas yang telah didefinisikan diatas dapat dilakukan dengan menggunakan format berikut.<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;">var namaObyek = new NamaKelas ( ) ;</span><br /> <br /> Kemudian untuk mengakses properti ataupun metode yang dimiliki oleh suatu obyek dapat dengan menggunakan operator titik (.) setelah nama obyek diikuti nama properti atau metodenya. Mengenai aturan penamaan kelas dapat mengikuti aturan penamaan fungsi pada materi sebelumnya, contohnya ditunjukan dibawah ini.<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;"><script><br />function SegiEmpat(){<br />this.panjang = 0;<br />this.lebar = 0;<br />this.hitungLuas = function(){<br />var luas = this.panjang * this.lebar;<br />return luas;<br />}<br />this.hitungKeliling = function(){<br />var kel = 2 * (this.panjang + this.lebar);<br />return kel;<br />}<br />}<br />// contoh pengunaannya<br />var s = new SegiEmpat();<br />s.panjang = 4;<br />s.lebar = 3;<br />alert(s.hitungLuas());<br />alert(s.hitungKeliling());<br /></script></span><br /> <br /> Apabila pembuatan dilakukan dengan menggunakan format yang pertama, bentuk definisinya akan seperti berikut.<br /> <span style="font-family: "courier new" , "courier" , monospace;"><br /><script><br />function SegiEmpat(){ }<br />SegiEmpat.prototype.panjang = 0;<br />SegiEmpat.prototype.lebar = 0;<br />SegiEmpat.prototype.hitungLuas = function(){<br />var luas = this.panjang * this.lebar;<br />return luas;<br />}<br />SegiEmpat.prototype.hitungKeliling = function(){<br />var kel = 2 * (this.panjang + this.lebar);<br />return kel;<br />}<br />// contoh pengunaannya<br />var s = new SegiEmpat();<br />s.panjang = 4;<br />s.lebar = 3;<br />alert(s.hitungLuas());<br />alert(s.hitungKeliling());<br /></script</span>><br /> <br /> Dari contoh diatas dapat dilihat ada penggunaan kata kunci prototype pada obyek yang dibuat untuk menambahkan properti ataupun metodenya<br /> <br />

Pemrograman Berorientasi Obyek (PBO) Pemrograman berorientasi obyek adalah sebuah paradigma dalam pemrograman yang mengelompokkan fungsi, prosedur, variabel ataupun konstanta terkait dalam satu kesatuan (kelas) seperti o…

Bentuk-bentuk dari blok fungsi dalam pemrograman

<div style="text-align: justify;"> Fungsi dalam pemrograman merupakan suatu mekanisme yang digunakan untuk mengelompokkan program dalam menyelesaikan suatu kasus, proses atau rumus aritmatika tertentu. Dengan pengertian yang sama pengelompokkan kode ini juga sering disebut subprogram (program bagian), prosedur ataupun metode. Dalam javascript semuanya itu disebut fungsi, karena Javascript hanya menyediakan satu kata kunci untuk membuat fungsi ini, yaitu function.<br /><br />Fungsi dalam proses pemanggilannya (eksekusi) ada yang membutuhkan data tertentu agar dapat berjalan. Data tertentu yang perlu diberikan saat pemanggilan fungsi ini dikenal dengan nama parameter. Setiap fungsi dapat tidak memiliki atau memiliki lebih dari satu parameter.<br />Aturan penamaan fungsi mengikuti aturan penamaan variabel. Bentuk dari blok fungsi adalah sebagai berikut<br /><br /><span style="font-family: "Courier New",Courier,monospace;">function nama_fungsi ( parameter1, parameter2, ...,<br />parameterN )<br />{<br />kode program sebagai definisi fungsi<br />return nilai_balik_jika_ada;<br />}</span><br />Keterangan :<br />nama_fungsi: nama dari fungsi yang akan dibuat parameter1...N: merupakan syarat yang diperlukan oleh fungsi tersebut untuk dapat berjalan. Suatu fungsi juga dapat tidak memiliki parameter, artinya dapat dijalankan tanpa syarat. return: perintah untuk membelikan hasil operasi dari fungsi ke user. nilai_balik_jika_ada: nilai hasil operasi dari fungsi. Suatu fungsi dapat juga tidak memiliki nilai balik. Jika tidak memiliki nilai balik maka pernyataan return dapat ditiadakan. Untuk menjalankan program yang ada dalam fungsi tersebut kita dapat memanggilnya dengan cara, sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">varHasil = nama_fungsi ( nilai_parameter1, nilai_parameter2,<br />..., nilai_parameterN ) ;</span><br />Keterangan :<br />varHasil: variabel yang dapat digunakan untuk menampung nilai balik dari fungsi yang dipanggil bila ada.<br />Dilihat dari hasil akhirnya fungsi dalam javascript dibedakan jadi dua, yakni fungsi yang memiliki nilai balik dan tidak. Nilai balik disini maksudnya adalah nilai hasil operasi yang dijalankan didalam fungsi diberikan ke bagian program lainnya untuk diproses lebih lanjut. Nilai balik dalam javascript dinyatakan dengan menggunakan kata kunci return. Contoh kasusnya dalam program penghitung luas dan volume limas. Dimana dalam perhitungan volume juga terdapat menyertakan perhitungan luas didalamnya. Dengan kata lain untuk menghitungvolume limas kita harus menghitung luas alasnya terlebih dahulu. Dalam program, proses ini diterjemahkan sebagai berikut.<br /><br /><span style="font-family: "Courier New",Courier,monospace;">var panjang = 5;<br />var lebar = 3;<br />var tinggi = 4;<br />var luasAlas;<br />var volume;<br />luasAlas = panjang * lebar;<br />volume = luasAlas * tinggi / 2;</span><br />Apabila diubah dalam bentuk fungsi program diatas akan menjadi<br /><br /><span style="font-family: "Courier New",Courier,monospace;">function hitungLuasAlas ( p, l ) {<br />var luas = p * l;<br />return luas;<br />}<br />function hitungVolume ( la, t ) {<br />var vol = la * t / 2;<br />return vol;<br />}<br />var panjang = 5;<br />var lebar = 3;<br />var tinggi = 4;<br />var luasAlas;<br />var volume;<br />luasAlas = hitungLuasAlas(panjang, lebar);<br />volume = hitungVolume(luasAlas, tinggi);<br />alert(luasAlas);<br />alert(volume);</span><br /><br />Contoh : fungsi tanpa nilai balik<br /><br /><span style="font-family: "Courier New",Courier,monospace;">function sapa(nama){<br />alert("Halo, " + nama);<br />}<br />sapa(“bintang”);</span><br /><br />Contoh fungsi tanpa parameter.function sayHalo(){</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <span style="font-family: "Courier New",Courier,monospace;">alert("Halo");<br />}<br />sayHalo();</span></div>

Fungsi dalam pemrograman merupakan suatu mekanisme yang digunakan untuk mengelompokkan program dalam menyelesaikan suatu kasus, proses atau rumus aritmatika tertentu. Dengan pengertian yang sama pengelompokkan kode ini …

Struktur kontrol Perulangan for, while dan do-while untuk menjalankan kode program

<div style="text-align: justify;"> <b>Struktur Kontrol Perulangan</b><br />Perulangan merupakan struktur yang memungkinkan untuk menjalankan kode program yang sama beberapa kali dengan menggunakan suatu kondisi tertentu. Perulangan dalam javascript memiliki tiga bentuk, yakni perulangan for, while dan  do-while.<br /><br />Perulangan for<br />Perulangan ini memiliki bentuk sebagai berikut<br /><br /><span style="font-family: "Courier New",Courier,monospace;">for ( inisialisasi; kondisi; peubah ) {<br />baris program 1;<br />baris program 2;<br />…<br />}</span><br /><br />Perulangan while<br />Perulangan ini memiliki bentuk sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">while ( kondisi ) {<br />kode program yang ingin dijalankan berkali-kali;<br />}</span><br /><br />Perulangan do-while<br />Perulangan ini memiliki bentuk sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">do {<br />kode program yang ingin dijalankan berkali-kali;<br />} while( kondisi );</span><br /><br />Dari ketiga bentuk perulangan diatas hanya for yang memerlukan pernyataan inisialisasi dan peubah. Inisialisasi disini digunakan sebagai bagian penentuan variabel yang akan digunakan untuk mengendalikan jumlah perulangan yang akan dilakukan. Peubah adalah operasi aritmatika yang dapat dilakukan untuk mengubah nilai variabel penentu tersebut. Sedangkan kondisi disini digunakan untuk menentukan kapan suatu blok perulangan dijalankan berdasarkan nilai dari variabel penentu tersebut. Cara kerja dari perulangan for tersebut dapat digambarkan dengan menggunakan diagram alur berikut</div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYTkI_JKElycwEbojaQ-QGa8QejeUIK7Mo05BCJyegC8Pfoy-KuuIUkftIYgrt2-r4FG0BScm9x0hq4hJxV7WufYQgfUZVeX2gf9p6Ln1LwMyXAd_OZOWH76QY0BnJFn-je665sBzSdo-t/s1600/per.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYTkI_JKElycwEbojaQ-QGa8QejeUIK7Mo05BCJyegC8Pfoy-KuuIUkftIYgrt2-r4FG0BScm9x0hq4hJxV7WufYQgfUZVeX2gf9p6Ln1LwMyXAd_OZOWH76QY0BnJFn-je665sBzSdo-t/s320/per.png" width="283" /></a></div> <div style="text-align: justify;"> Secara umum untuk setiap kasus perulangan dapat diterapkan dengan menggunakan ketiga bentuk tersebut. Contohnya, kita dapat membuat perulangan untuk menampilkan pesan "Halo javascript" hingga 3 kali dengan menggunakan ketiga perulangan tersebut.<br /><br /><span style="font-family: "Courier New",Courier,monospace;">for (var i = 0; i < 3; i++) {<br />document.write("Halo javascript 1<br>");<br />}<br />var j = 0;<br />while ( j < 3 ) {<br />document.write("Halo javascript 2<br>");<br />j += 1;<br />}<br />var k = 0;<br />do {<br />document.write("Halo javascript 3<br>");<br />k++;<br />} while ( k < 3 );</span></div>

Struktur Kontrol PerulanganPerulangan merupakan struktur yang memungkinkan untuk menjalankan kode program yang sama beberapa kali dengan menggunakan suatu kondisi tertentu. Perulangan dalam javascript memiliki tiga bent…

Bentuk format switch dalam pencabangan program

Switch<br />Switch merupakan bentuk lain dari percabangan. Konsep ini berguna apabila kondisi yang akan ditentukan memiliki nilai tertentu. Format dari switch adalah sebagai berikut <br /><br /><span style="font-family: "Courier New",Courier,monospace;">switch(variabel) {<br />case nilai1:<br />kode program jika nilai variabel sama dengan nilai1;<br />break;<br />case nilaiN:<br />kode program jika nilai variabel sama dengan nilaiN;<br />break;<br />default:<br />kode program jika nilai tidak sesuai;<br />break;<br />}</span><br /><br />Contoh kasus untuk format ini adalah pada pemilihan menu layanan isi ulang, seperti contoh berikut :<br /><br /> <span style="font-family: "Courier New",Courier,monospace;">var pilihan = prompt("Pilihan untuk cek pulsa\n1. Informasi<br />pulsa anda\n2.<br />Informasi masa aktif dan masa tenggang anda");<br />pilihan = parseInt(pilihan);<br />switch(pilihan) {<br />case 1:<br />alert("Jumlah pulsa anda adalah sembilan belas<br />ribu<br />rupiah");<br />break;<br />case 2:<br />alert("Masa aktif kartu anda hingga 7 Agustus<br />2019");<br />break;<br />default:<br />alert("Pilihlah sesuai nomor yang ada");<br />break;<br />}</span><br /><br />Pada contoh program diatas apabila user memilih 1, maka akan ada pesan<br />"Jumlah pulsa anda adalah sembilan belas ribu rupiah" yang ditampilkan. Apabila  pilihannya tidak ada dalam blok switch-case tersebut maka bagian default yang akan dijalankan.<br /><br />Pernyataan break pada program diatas digunakan untuk keluar dari blok case atau default yang terpilih. Apabila tidak terdapat break maka blok case dan/atau default dibawahnya akan turut dieksekusi

SwitchSwitch merupakan bentuk lain dari percabangan. Konsep ini berguna apabila kondisi yang akan ditentukan memiliki nilai tertentu. Format dari switch adalah sebagai berikut switch(variabel) {case nilai1:kode program j…

Konsep percabangan dalam pemprograman

<div style="text-align: justify;"> Struktur Percabangan<br /> Konsep percabangan dalam pemrograman mirip seperti konsep percabangan di jalan raya, yang penentuan arahnya ditentukan berdasarkan tujuan dari user. Arah disini menunjukkan bagian program yang akan dieksekusi, sedangkan tujuan merupakan data masukan yang digunakan percabangan untuk mengambil keputusan. Secara umum percabangan digambarkan sebagai berikut.</div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirfvVlJH5diBeBtvXRiB2YVsl2bhhiM2sevmnQhL439ZjdUA2ZDqxtWS94SocFMD-d52KI3vECpPzjPwHgZxFEjx23p87tj9kgGdQGcr5GriTdNoFQfKa-opwJH1AVFGR_ZOh5EnbLNYzj/s1600/p.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirfvVlJH5diBeBtvXRiB2YVsl2bhhiM2sevmnQhL439ZjdUA2ZDqxtWS94SocFMD-d52KI3vECpPzjPwHgZxFEjx23p87tj9kgGdQGcr5GriTdNoFQfKa-opwJH1AVFGR_ZOh5EnbLNYzj/s320/p.png" width="320" /></a></div> <div style="text-align: justify;"> Dari gambar diatas dapat dilihat, bahwa apabila suatu kondisi terpenuhi maka blok program dalam kondisi tersebut akan dijalankan. Jika dituliskan dalam format kode program dinyatakan seperti berikut ini :<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;">if ( kondisi ) {<br />kode program yang akan dijalankan jika kondisi terpenuhi;<br />}</span><br /> <br /> Terpenuhinya suau kondisi ini secara pemrograman berarti bahwa kondisi tersebut memiliki nilai boolean true. Blok program yang akan dijalankan ditempatkan di dalam kurung kurawal. Berikut ini merupakan contoh program dengan kondisi yang akan menghasilkan nilai true atau false sesuai input umuryang diberikan.<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;">var umur;<br />umur = prompt("masukkan umur anda?");<br />umur = parseInt(umur);<br />if ( umur < 20 ) {<br />alert ( "Kamu belum dapat mengikuti pemilu" );<br />}</span><br /> <br /> Kondisi pada program diatas menunjukkan bahwa apabila input dari user bernilai  lebih kecil dari 20, maka kode dalam blok if tersebut akan dijalankan, yaknimenampilkan pesan "Kamu belum dapat mengikuti pemilu" tanpa tanda kutip. Pembuatan kondisi dilakukan dengan menggunakan operator logika. Daftar operator logika dapat dilihat kembali pada tabel operator logika di materi tentang Dasar Pemrograman Web Klien. Pembuatan kondisi lebih dari satu dapat dilakukan dengan menggunakan kombinasi operator logika yang ada, misalnya kita ingin menampilkan pesan "Kamu mungkin adalah siswa SMA/K" apabila umur dari siswa tersebut lebih besar dari 15 dan lebih kecil dari 21 atau dapatjuga dikatakan bahwa umurnya diantara 16-20, programnya dituliskan seperti  beriku<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;">var umur;<br />umur = prompt("masukkan umur anda?");<br />umur = parseInt(umur);<br />if ( umur > 15 && umur < 21 ) {<br />alert ( "Kamu mungkin adalah siswa SMA/K" );<br />}</span><br /> Contoh program lainnya<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;">var olahraga;<br />olahraga = prompt("masukkan olahraga yang kamu sukai?");<br />if ( olahraga == "terjun payung" || olahraga == "sepeda<br />gunung" || olahraga == "panjat tebing" )<br />{<br />alert("Kamu menyukai olahraga ekstrim");<br />}</span><br /> Berikut ini merupakan format lainnya yang dapat digunakan untuk menerima kondisi yang tidak sesuai<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;">if (kondisi) {<br />kode program;<br />}<br />else {<br />kode program jika kondisi tidak terpenuhi;<br />}</span><br /> Untuk kondisi yang lebih dari satu dapat juga dibuat menggunakan format berikut.<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;">if (kondisi 1) {<br />kode program jika kondisi 1 terpenuhi;<br />}<br />else if (kondisi 2){<br />program jika kondisi 2 terpenuhi;<br />}<br />else if (kondisi n){<br />kode program jika kondisi n terpenuhi;<br />}<br />else {<br />kode program jika kondisi tidak terpenuhi;<br />}</span></div>

Struktur Percabangan Konsep percabangan dalam pemrograman mirip seperti konsep percabangan di jalan raya, yang penentuan arahnya ditentukan berdasarkan tujuan dari user. Arah disini menunjukkan bagian program yang akan …

Pengertian variabel Array dalam kode javascript

<div style="text-align: justify;"> Variabel-variabel di JavaScript hanya bisa menyimpan satu data pada suatu saat. Adanya kecenderungan yang besar untuk memanipulasi sejumlah data dalam satu variabel membuat konsep variabel tersebut menjadi tidak cukup. Sebagai solusinya, JavaScript menghadirkan struktur data yang memungkinkan menyimpan himpunan/kelompok data dalam satu variabel khusus yang disebut Array. </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Array, adalah satu variabel yang dapat berisi banyak data yang independent. Data yang disimpan diberikan indeks tertentu atau menggunakan nomer urut mulai dari 0.Indeks ini nantinya dapat digunakan untuk mengakses data yang disimpan dalam array tersebut.<br /> </div> <div style="text-align: justify;"> JENIS-JENIS ARRAY<br />Array Multidimensi<br />Array yang hanya berisikan nilai-nilai tunggal disebut sebagai array monodimensi atau unidimensi. Berikut merupakan ilustrasi dari array monodimensi tersebut.</div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVA_j6rIOPqFiwGznWCQe11_C-QgIjcnh3N91a1DQSyAxIwWk1gzbJOZyt50N9i3V3zQJ6LAEHo7CYYKSgbRYKuoRLeO4qq5ITKMh35tAvSlIH-oUuwOBCR1nR2bNuJSCOKFkRU0YxpUJW/s1600/ARAY+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVA_j6rIOPqFiwGznWCQe11_C-QgIjcnh3N91a1DQSyAxIwWk1gzbJOZyt50N9i3V3zQJ6LAEHo7CYYKSgbRYKuoRLeO4qq5ITKMh35tAvSlIH-oUuwOBCR1nR2bNuJSCOKFkRU0YxpUJW/s400/ARAY+1.png" width="400" /></a></div> <div style="text-align: justify;"> Perhatian :<br />Indeks ini akan diberikan secara otomatis oleh interpreter javascript, dimulai dari elemen/data pertama dengan indeks 0. Dalam suatu array dengan n elemen, maka elemen ke-n akan mempunyai indeks n-1.<br /><br />Jika elemen suatu array berisikan array lainnya, maka array tersebut termasuk array multidimensi. Berikut ilustrasinya.</div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1EunHqsjl1RlUZPQSdbNJm4lC2Lfro_jIy3vaR_yy5AUzfod6DRSPxPCyW7ajMiAQmKq0IHWRI8fvFDpm14__EC1c_pYZiHP6DnDsy-XzyYOG4hMpIbBX_lu0Cl6U9kcJ1HDx2ss8wRyK/s1600/ARAY+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="47" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1EunHqsjl1RlUZPQSdbNJm4lC2Lfro_jIy3vaR_yy5AUzfod6DRSPxPCyW7ajMiAQmKq0IHWRI8fvFDpm14__EC1c_pYZiHP6DnDsy-XzyYOG4hMpIbBX_lu0Cl6U9kcJ1HDx2ss8wRyK/s320/ARAY+2.png" width="320" /></a></div> <div style="text-align: justify;"> Array Asosiatif<br />Indek dalam array selain ditentukan secara otomatis oleh sistem dan selalu dimulai dari 0, juga dapat dimodifikasi dengan menggunakan kata (string) atau nilai tertentu. Tabel dengan indeks termodifikasi ini kita kenal dengan nama array asosiatif. Berikut adalah ilustrasinya<br /> </div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmlDut6dGn2Yw-KAJljZhs32jN7kp4PQ89eEkz2-LK9P2sQh8f9fpr9zCIpVrgl1ZquDICCBafIpV-OMgU6nYEDWDMs6602UjRDbM-5ezx-Y-4_YP1eLtzwZA5e0AXsAi-ZscrYFVo9l2Y/s1600/ARAY+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmlDut6dGn2Yw-KAJljZhs32jN7kp4PQ89eEkz2-LK9P2sQh8f9fpr9zCIpVrgl1ZquDICCBafIpV-OMgU6nYEDWDMs6602UjRDbM-5ezx-Y-4_YP1eLtzwZA5e0AXsAi-ZscrYFVo9l2Y/s400/ARAY+3.png" width="400" /></a></div> <div style="text-align: justify;"> PEMBUATAN ARRAY<br />Terdapat beberapa cara yang dapat digunakan untuk membuat array di Javascript.<br /><br /><span style="font-family: "Courier New",Courier,monospace;">var TabelKu = ["data 1", "data 2", "data 3", "data 4"];<br />var TabelKu = new Array("data 1", "data 2", "data 3", "data<br />4");<br />var TabelKu = new Array();</span><br /><br />Dua cara yang pertama menunjukkan bahwa array dibuat dengan langsung memberikan nilainya, sedangkan pada cara yang terakhir array dibuat tanpa data.<br /></div>

Variabel-variabel di JavaScript hanya bisa menyimpan satu data pada suatu saat. Adanya kecenderungan yang besar untuk memanipulasi sejumlah data dalam satu variabel membuat konsep variabel tersebut menjadi tidak cukup. …

Konversi jenis variabel secara paksa. parseInt() dan parseFloat() Javascript

<div style="text-align: justify;"> KONVERSI JENIS VARIABEL<br />Meskipun Javascript memungkinkan pengaturan perubahan jenis variabel secara transparan,kadang kadang kita perlu juga untuk melakukan konversi jenis variabel secara paksa. parseInt() dan parseFloat() merupakan dua fungsi yang dapat digunakan untuk konversi ini. </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <b>Fungsi parseInt() </b></div> <div style="text-align: justify;"> Fungsi ini mungkinkan merubah satu variabel yang dilewatkan dengan parameter tertentu (bisadalam bentuk string ataupun dalam bentuk bilangan dalam basis yang disebutkan di parameterkedua) menjadi bilangan bulat. Sintaksnya adalahsebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">parseInt(string[, basis]);</span><br /><br />Agar supaya fungsi parseInt() mengembalikan nilai bilangan bulat, maka parameter yangdilewatkan harus dimulai dengan karakter bilangan [0-9], prefiks hexadesimal 0x, dan/ataukarakter +,-,e,dan E. Selain daripada itu maka fungsi parseInt() akan mengembalikan nilai NaN(Not a Number). Jika karakter berikutnya tidak valid, maka akan diabaikan oleh fungsiparseInt(), dan akan ditampilkan terpotong jika di bagian depan karakter valid dan bagianbelakang karakter tidak valid.Berikut ini salah satu contoh penggunaan fungsi parseInt() :<br /> </div> <div style="text-align: justify;"> <span style="font-family: "Courier New",Courier,monospace;">var a = "123";<br />var b = "456";<br />document.write(a+b + "<BR>"); // hasil 123456<br />document.write(parseInt(a)+parseInt(b) + "<BR>"); // hasil<br />579</span></div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4JonxL9S-9KeRAbBp1BtdkX3IZEEg1yptRGqV5dM_-ZWPiaDLSLl2fnxr70wSQWBj7OZ3GGH61UPYhp7BXetQsJR2fjgsnzTTs4WuVv1IAAEI0f46ixhLoeY5Pq8UV_RBcOl_3frGdZNl/s1600/var+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="347" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4JonxL9S-9KeRAbBp1BtdkX3IZEEg1yptRGqV5dM_-ZWPiaDLSLl2fnxr70wSQWBj7OZ3GGH61UPYhp7BXetQsJR2fjgsnzTTs4WuVv1IAAEI0f46ixhLoeY5Pq8UV_RBcOl_3frGdZNl/s400/var+1.png" width="400" /></a></div> <div style="text-align: justify;"> Fungsi parseFloat()<br /> </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Zz4lOt9WObLMe2b7vZDphD3u9wb9sKdvHQArN4cyJkhX9R7yYtKRH1gTwTiht8QHj2vbE04Vmi7FSvaikL2t_8s74vskE9YF5MzX_Y_3Oyms3etFbhI2b0a_fp1ihc77utZKzQJzXbgs/s1600/var+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Zz4lOt9WObLMe2b7vZDphD3u9wb9sKdvHQArN4cyJkhX9R7yYtKRH1gTwTiht8QHj2vbE04Vmi7FSvaikL2t_8s74vskE9YF5MzX_Y_3Oyms3etFbhI2b0a_fp1ihc77utZKzQJzXbgs/s320/var+2.png" width="320" /></a></div> <div style="text-align: justify;"> Adalah satu fungsi dasar dari Javascript yang memungkinkan merubah variabel yang dilewatkandengan parameter tertentu menjadi bilangan desimal, Sintaks dari fungsi parseFloat() adalah sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">parseFloat(string);</span></div>

KONVERSI JENIS VARIABELMeskipun Javascript memungkinkan pengaturan perubahan jenis variabel secara transparan,kadang kadang kita perlu juga untuk melakukan konversi jenis variabel secara paksa. parseInt() dan parseFloat…

Penulisan variabel Javascript

<div style="text-align: justify;"> PEMBUATAN VARIABEL<br />Penulisan variabel Javascript sangatlah fleksibel, dan tidaklah terlalu rumit dan ketat, sehingga akan jarang menerima pesan error karena variabel yang tidak sesuai. Ada dua istilah yang biasa digunakan dalam pembuatan variabel, yakni deklarasi dan inisialisasi. Deklarasi digunakan untuk menunjukkan proses permintaan alokasi memori oleh Javascript ke sistem operasi. Sedangkan inisialisasi digunakan untuk memberikan nilai awal bagi variabel tersebut.<br /><br />Format deklarasi (pembuatan) variabel di Javascript adalah sebagai berikut :<br /><span style="font-family: "Courier New",Courier,monospace;">var nama_variabel_nya ;</span><br /><br />atau, dengan tambahan inisialisasi<br /><br /><span style="font-family: "Courier New",Courier,monospace;">var nama_variabel = nilai ;</span><br /><br />atau untuk deklarasi variabel lebih dari satu dalam satu baris perintah :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">var nama_variabel1, nama_variabel3 = nilai_var_3, …,<br />nama_variabelN ;</span><br /><br /><span style="font-family: "Courier New",Courier,monospace;">contoh :<br />var umur;<br />var panjang = 23;<br /><br />var alas, tinggi;<br /><script language="javascript"><br />var nilai;<br />var nilai2 = 3;<br />nilai = 2;<br />document.write(nilai * nilai2);<br /></script</span>><br /><br />TIPE DATA<br />Di javascript data yang dapat disimpan dalam suatu variabel dikelompokkan menjadi tiga jenis, yaitu :<br />- Bilangan/numerik, bulat atau desimal, yang kita sebut sebagai integer atau float<br />- Kata/kalimat (kumpulan huruf/karakter) : kita sebut string<br />- Boolean : suatu variabel yang mempunyai dua nilai dan berfungsi untuk memeriksa suatu kondisi :<br />- true : jika kondisinya benar<br />- false : jika kondisinya salah<br /><br />INTEGER (BILANGAN BULAT)<br />bilangan bulat dapat ditampilan dalam beberapa basis berikut ini :</div> <ul style="text-align: justify;"> <li>Basis desimal, integer di tuliskan dalam urutan unit bilangan (dari 0 sampai dengan 9), permulaan bilangan tidak boleh dimulai oleh angka 0.</li> <li>Basis heksadesimal, dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampaidengan f), permulaan bilangan dimulai oleh 0x atau 0X.</li> <li> Basis oktal, dituliskan dalam urutan unit angka dari 0 sampai dengan 7, permulaan bilangan dimulai dengan angka 0.</li> </ul> <div style="text-align: justify;"> <br />FLOAT (BILANGAN DESIMAL)<br />Bilangan desimal biasa disebut juga sebagai bilangan pecahan atau bilangan yang dapatdituliskan menggunakan tanda koma. Bilangan ini juga bisa di tuliskandenganbeberapa cara berikut :<br /><br />Bilangan bulat desimal : 895<br />- Bilangan dengan tanda koma : 895,12<br />- Bilangan pembagian : 27/11<br />- Bilangan eksponensial : bilangan dengan tanda koma, kemudian diikuti oleh huruf e(atau E), kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau -, pangkat postitif atau negatif), contoh :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">var a = 2.75e-2 ;<br />var b = 35.8E+10 ;<br />var c = .25e-2 ;</span><br /><br />STRING<br />String adalah kumpulan dari karakter/huruf, nilai variabel string selalu diapit dengan tanda (') atau ("), kedua tanda tersebut harus digunakan secara berpasangan dan tidak bisa digunakan secara sendiri-sendiri atau bersilangan. Berikut ini adalah beberapa cara untuk mendeklarasikan variabel string :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">var a = "Hallo";<br />var b = 'Sampai Ketemu Lagi !';</span></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan bagian dari karakter yang tidak terlihat (non visual) dan juga untukmenghindarkan kemungkinan browser "mengalami kebingungan" dalam membedakan antara string dan skripnya sendiri, karakter spesial inimenggunakan simbol antislash (\), beberapa contoh karakter spesial tersebut:<br />- \n: kembali ke baris awal<br />- \r: menekan tombol ENTER<br />- \t: tab<br />- \": tanda petik ganda<br />- \': tanda petik tunggal<br />- \\: karakter antislash<br /><br />Contoh, misalnya kita ingin menyimpan kalimat berikut ini :<br /><span style="font-family: "Courier New",Courier,monospace;">Ada apa di dalam "c:\windows\"</span><br />Kita harus menuliskannya dalam bentuk berikut ini di dalam Javascript :<br /><span style="font-family: "Courier New",Courier,monospace;">var Judul = "Ada apa di dalam \"c:\\windows\\\"";</span><br />Atau bisa juga dengan cara berikut ini (menggunakan tanda petik tunggal) :<br /><span style="font-family: "Courier New",Courier,monospace;">Judul = 'Ada apa di dalam "c:\\windows\\"';</span><br /> </div> <div style="text-align: justify;"> Memanipulasi variabel String, dapat dilakukan dengan menggunakan metodemetode yang ada pada variabel string tersebut. Metode-metodenya dapat dilihat pada materi tentang Fungsi.<br /><br />BOOLEAN<br />boolean adalah satu variabel khusus yang berguna untuk mengevaluasi suatu kondisi tertentu, oleh karenanya boolean mempunyai dua nilai :<br />- True : diwakili oleh nilai 1<br />- False : diwakili oleh nilai 0<br /></div>

PEMBUATAN VARIABELPenulisan variabel Javascript sangatlah fleksibel, dan tidaklah terlalu rumit dan ketat, sehingga akan jarang menerima pesan error karena variabel yang tidak sesuai. Ada dua istilah yang biasa digunaka…

Pengenalan variabel java script

<div style="text-align: justify;"> VARIABEL<br />Variable adalah suatu obyek yang berisi data data, yang mana dapat dimodifikasi selama eksekusi program. Di Javascript terdapat beberapa kriteria untuk penamaan variabel, seperti ditunjukkan berikut ini.</div> <ul style="text-align: justify;"> <li> Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter _ (garis bawah).</li> <li>Nama variabel bisa terdiri dari kombinasi huruf, angka atau karakter _ dan $ (spasi kosong tidak diperbolehkan</li> <li> Nama variabel tidak boleh memakai nama-nama yang termasuk ke dalam kata kunci bahasa Javascript. Berikut ini merupakan daftar kata kunci yang ada di Javascript. </li> </ul> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhroC75ly9oWeVkYPdnl7LKp7yjeL3b40HBoDq9PCgcFi_tGuZqaak7e_PN1VDhTCTRtjNLUILhUsO__1eSoNmhk4QvpyGj9JAOJXgEajHvmHHkCcm5ET13V81kC6jEGw7wgncT56DNlRsP/s1600/variabel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhroC75ly9oWeVkYPdnl7LKp7yjeL3b40HBoDq9PCgcFi_tGuZqaak7e_PN1VDhTCTRtjNLUILhUsO__1eSoNmhk4QvpyGj9JAOJXgEajHvmHHkCcm5ET13V81kC6jEGw7wgncT56DNlRsP/s1600/variabel.png" /></a></div> <div style="text-align: justify;"> Sumber: kompilasi https://developer.mozilla.org dan http://msdn.microsoft.com. Berikut ini adalah contoh pemberian nama variabel yang benar dan tidak benar:Nama variabel yang benar<br />- umur<br />- namaLengkap<br />- luas_lingkaran<br />- jari2<br />- _7an<br />- $biaya<br /><br />Nama variabel yang tidak benar<br />- Nama Lengkap - Ada spasi kosong<br />- 7ruangan - Dimulai dgn angka<br />- email@website.com - Karakter @<br />- top-level-domain - Karakter -<br />- function - Kata kunci Javascript<br /><br />Di Javascript kita menggunakan sistem case sensitive yang artinya membedakan nama variabel dengan huruf besar dan huruf kecil, oleh karena itu biasakanlah memberikan nama variabel dengan aturan yang sama. Ada beberapa teknik pemberian nama yang dapat digunakan, diantaranya adalah<br /><br />Camel Case, dengan teknik untuk nama variabel yang lebih dari satu kata akan digabungkan tanpa garisbawah dan setiap huruf pertama dari tiap kata dituliskan dalam huruf kapital. Sedangkan untuk huruf pertama dari kata pertama dapat juga ditulisakan menggunakan huruf kecil. Contoh: AsalSekolah, SuhuUdara, luasPersegiPanjang, namaLengkap, dan sebagainya.<br />- Notasi Hungaria, disini diawal dari nama variabel akan ditambahkan tipe data yang ditampungnya, seterusnya dapat menggunakan notasi camel case. Contoh: stringNamaLengkap (atau lebih pendek, strNamaLengkapstring menunjukkan variabel ini berisi data alfanumerik), intUmur (int menunjukkan variabel ini menyimpan bilangan bulat), dan sebagainya.<br />- Selain dengan camel case, variabel dengan nama lebih dari satu kata dapat juga dibuat dengan menambahkan garisbawah sebagai penghubung antar katanya. Contoh: asal_sekolah, luas_persegi, nama_lengkap, dan sebagainya.</div>

VARIABELVariable adalah suatu obyek yang berisi data data, yang mana dapat dimodifikasi selama eksekusi program. Di Javascript terdapat beberapa kriteria untuk penamaan variabel, seperti ditunjukkan berikut ini.  Nama v…

Penerapan textarea dengan atribut name pada form html

<div style="text-align: justify;"> Komponen text area multiline<br />Komponen text area merupakan area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text dalam bentuk dan format text. Untuk menampung input teks yang panjang dan mungkin tersusun atas lebih dari 1 baris, maka digunakan komponen input ‘textarea’. TEXTAREA dapat digabungkan dengan tag FORM untuk menjadi inputan yang akan diolah oleh file pemroses sebagaimana seperti yang telah dijelaskan pada tag FORM tersebut.<br />Format umum penulisan text area multiline<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><textarea atribute=”atribute"></span><br /> </div> <div style="text-align: justify;"> Terdapat beberapa atribut dari text area, diantaranya row,col dan lain sebagainya. Pada HTML 5 menyediakan banyak 6 atribut baru textarea<br /><br />NAME<br />Atribut ini digunakan untuk meemberikan nama dari TEXTAREA. Atribut ini akan sangat berguna jika tag TEXTAREA digabungkan dengan tag FORM.<br />NAME<br />Atribut ini digunakan untuk meemberikan nama dari TEXTAREA. Atribut ini akan sangat berguna jika tag TEXTAREA digabungkan dengan tag FORM<br /><br />Contoh penulisan :<br /><span style="font-family: "Courier New",Courier,monospace;"><!DOCTYPE html><br /><html><br /><head><br /><title>cek form </title><br /></head><br /><body><br /><p> Silahkan diisi pada teks area yang tersedia</p><br /><p><textarea NAME=”papantulis” COLS=40 ROWS=6><br /></textarea></p><br /></body><br /></html></span><br /></div> <div style="text-align: justify;"> <br /></div> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: 0px; margin-right: 0px; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkCVa0Q2tFKW-5kbB95eKYqLjkNYoIpirojecVKnOv34EVZufaTIqK6wWIitj2Avf9RtF1TPPCw9I03RW6fIaj5C5vWd5xGfhK8eslEHCyv7tIdS1nI9Q6dGyceExUzXkgugWU4xgAJ336/s1600/nme.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkCVa0Q2tFKW-5kbB95eKYqLjkNYoIpirojecVKnOv34EVZufaTIqK6wWIitj2Avf9RtF1TPPCw9I03RW6fIaj5C5vWd5xGfhK8eslEHCyv7tIdS1nI9Q6dGyceExUzXkgugWU4xgAJ336/s320/nme.png" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">penerapan textarea dengan atribut name</td></tr> </tbody></table> <div style="text-align: justify;"> Bila listing kode diatas dijalankan akan menghasilkan tampilan pada halaman web seperti berikut<br /><br /></div>

Komponen text area multilineKomponen text area merupakan area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text dalam bentuk dan format text. U…

Alat bantu dalam mengembangan aplikasi web

<div style="text-align: justify;"> Alat Bantu Pengembangan<br />Dalam mengembangan aplikasi web ada beberapa persiapan yang perlu dilakukan, diantaranya adalah menentukan browser dan editor yang akan digunakan. Saat ini sudah banyak bermunculan varian browser, yang paling umum diantaranya Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Opera, dan Apple Safari. Hampir semuanya mendukung penggunaan<br /><br />Javascript. Pemilihan browser dapat disesuaikan dengan selera masingmasing. Namun, ada baiknya menginstal lebih dari satu browser untuk mengetahui apakah aplikasi web yang dibuat didukung oleh sebagian besar browser tersebut atau tidak.<br /><br />Selain browser yang bervariasi, editor pun demikian, sekarang sudah banyak program editor web baik yang tekstual maupun grafis. Diantaranya yang gratis ada Notepad2, Notepad++, Sublime Text, Aptana dan Expression Web 4 atau yang berbayar dengan Adobe Dreamweaver dan Visual Studio. Bagi pengguna Linux dapat menggunakan Gedit, Geany atau Sublime Text. Dalam pengembangan aplikasi web kali ini penulis akan menggunakan Notepad++, aplikasinya dapat didownload pada alamat http://notepad-plus-plus.org. Panduan Pengembangan di Windows Agar dapat memaksimalkan penggunaan Notepad++ di Windows, dapat mengikuti panduan berikut ini</div> <ol style="text-align: justify;"> <li>Pastikkan pada komputer telah terinstall aplikasi browser untuk melihat halaman web yang dihasilkan. Kalau belum bisa coba install browser Mozilla Firefox atau Google Chrome.Tentukan lokasi tempat semua file aplikasi web akan dikembangkan. Misal, di folder D:\PemrogramanWeb.</li> <li>Untuk Windows, pastikkan sistem menampilkan ekstensi file. Jika belum, lakukan langkah berikut:</li> </ol> <div style="text-align: justify;"> i. Untuk Windows 8 keatas: Buka Explorer, pilih menu View kemudian klik Options.<br />ii. Untuk Windows 7 kebawah: Buka Explorer, akses menu Tools dan pilih Folder Options.<br />iii. Pada window yang tampil pilih tab View, hapus centang pada opsi Hide extensions for known file types.<br />iv. Terakhir klik OK.</div> <div class="separator" style="clear: both; text-align: justify;"> </div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_gdH1__br9Vz3EB4DGJh9CLqAKn8SFnuS_73L1tUqEuobTh4JCACPgLvyvgffVqQ677KEsSdJngnNzq-VZ4OUrHl-4j4nNSO_uwbgE0r_yOhJtv7TLZIe-JXZHAHaMmH6gsjnNCPUPjNz/s1600/n.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_gdH1__br9Vz3EB4DGJh9CLqAKn8SFnuS_73L1tUqEuobTh4JCACPgLvyvgffVqQ677KEsSdJngnNzq-VZ4OUrHl-4j4nNSO_uwbgE0r_yOhJtv7TLZIe-JXZHAHaMmH6gsjnNCPUPjNz/s1600/n.png" /></a></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ZLPn9pvJM1XmUBVRpVGZciAlioJDjQtFTSTjonbJofr2tQhRDv4HzqGka-v1tRLhp2xmAq1vmrvsi3TZyXWoCzK-07AMMGfvSkushwoIq_TCeJgala5NRIzuoA5QHQkLCwqX4XChkgrh/s1600/n+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ZLPn9pvJM1XmUBVRpVGZciAlioJDjQtFTSTjonbJofr2tQhRDv4HzqGka-v1tRLhp2xmAq1vmrvsi3TZyXWoCzK-07AMMGfvSkushwoIq_TCeJgala5NRIzuoA5QHQkLCwqX4XChkgrh/s320/n+2.png" width="320" /></a></div> <div style="text-align: justify;"> d. Setiap kali akan mencoba/membuat program Javascript. Buat terlebih dahulu filenya pada lokasi </div> <div style="text-align: justify;">     yang sudah ditentukan diatas. Di Windows dapat dengan klik kanan, trus pilih menu New > </div> <div style="text-align: justify;">     Text Document dan ganti namanya sesuai program yang akan dibuat, misalnya: halojavascript.html.<br />e. Buka file tersebut dengan Notepad++ dan ketikkan programnya.<br />f. Setelah selesai membuat program, untuk melihat hasilnya klik menu Run > pilih salah satu menu </div> <div style="text-align: justify;">     misalnya Launch in Firefox untuk menjalankan file dalam browser Firefox.<br /><br /><br /></div>

Alat Bantu PengembanganDalam mengembangan aplikasi web ada beberapa persiapan yang perlu dilakukan, diantaranya adalah menentukan browser dan editor yang akan digunakan. Saat ini sudah banyak bermunculan varian browser,…

Contoh skrip Javascript didalam suatu dokumen HTML

<div style="text-align: justify;"> Dokumentasi Program<br />Seperti dalam banyak bahasa pemrograman lainnya, sangat dianjurkan untuk menambahkan komentar-komentar di dalam skrip atau kode program yang dibuat untuk keperluan dokumentasi pengembangan. Hal ini berguna antara lain </div> <ol style="text-align: justify;"> <li>. sebagai pengingat bagian-bagian khusus di dalam skrip tersebut, jika akan merubah sesuatu di dalamnya, mungkin beberapa bulan kemudian sudah tidak ingat lagi dengan detail dan alur dari skrip tersebut</li> <li>. untuk membuat orang yang tidak tahu program yang dibuat jadi mengerti dengan membaca petunjuk-petunjuk yang dibuat melalui komentar-komentar</li> </ol> <div style="text-align: justify;"> Penulisan komentar di Javascript, kita bisa menggunakan cara yang sama dengan aturan yang ada di bahasa C/C++ ataupun Java.<br />a. Untuk menulis komentar dalam satu baris kita gunakan karakter garis miring ganda (//). // semua</div> <div style="text-align: justify;">      karakter di belakang // tidak akan di eksekusi<br />b. Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /* dan */<br />    /* Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh<br /><br />kompilator */<br />Contoh program Javascript<br />Pada contoh berikut ini adalah contoh skrip Javascript didalam suatu dokumen HTML, disini kita akan membuat satu program untuk menampilkan satu kotak dialog pada saat kita membuka dokumen HTML.file: halo.html<br /><span style="font-family: "Courier New",Courier,monospace;"><br /><html><br /><head><br /><title>contoh program javascript</title><br /></head><br /><body><br /><script language="javascript"><br />alert("Hallo !");<br /></script><br /></body><br /></html></span><br /><br />Saat program ini dijalankan melalui browser, maka akan ditampilkan satu dialog berisikan pesan "Hallo !" tanpa tanda kutip. Selain dengan bentuk lengkap seperti diatas, kita juga dapat menuliskannya seperti berikut dengan hasil yang sama.<br /><span style="font-family: "Courier New",Courier,monospace;"> </span></div> <div style="text-align: justify;"> <span style="font-family: "Courier New",Courier,monospace;">file: halo_alternatif.html<br /><script language="javascript"><br />alert("Hallo !");<br /></script></span></div>

Dokumentasi ProgramSeperti dalam banyak bahasa pemrograman lainnya, sangat dianjurkan untuk menambahkan komentar-komentar di dalam skrip atau kode program yang dibuat untuk keperluan dokumentasi pengembangan. Hal ini be…

Penulisan kode Javascript di dalam dokumen/halaman HTML

<div style="text-align: justify;"> Penulisan Kode Javascript<br />Ada beberapa cara untuk menuliskan kode Javascript di dalam dokumen/halaman HTML, yakni menggunakan tag <script>, menggunakan file eksternal, dan melalui event tertentu.<br />Menggunakan tag <SCRIPT><br />Kode javascript dalam HTML dituliskan dengan menggunakan tag <script> dengan format sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><script language=”javascript”><br />......<br /></script></span><br />Atribut language di dalam tag <SCRIPT> menunjukkan jenis bahasa yang digunakan dan versinya, contohnya “Javascript“, “Javascript1.1“,“Javascript1.2“ untuk bahasa Javascript atau bahasa lainnya, contohnya “VBScript“. Jika kita ingin menggunakan beberapa versi Javascript di dalam satu halaman HTML (untuk menyesuaikan dengan kompatibilitas navigator) , maka kita hanya perlu meletakkankode-kode Javascript tersebut (berdasarkan versinya) kedalam beberapa tag <SCRIPT> dengan mencantumkan versi Javascriptnya.<br /><br /><br /><b>Menggunakan file eksternal</b><br />Cara berikutnya adalah menuliskan kode program Javascript dalam suatu file teks dan kemudian file teks yang berisi kode Javascript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas). Kode yang kita sisipkan kedalam dokumen HTML adalah sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><script language=”javascript” src=”lokasi/file.js”></script></span><br /><br />dimana lokasi/file.js adalah adalah lokasi dan nama file yang berisi kode Javascript, jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script.<br /><br />Melalui event tertentu<br />Event adalah sebutan dari satu aksi yang dilakukan oleh user, contohnya seperti klik tombol mouse, pembahasan lebih lanjut ada di materi lainnya. Kodenya dapat di tulis sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><tag eventHandler="kode Javascript yang akan dimasukkan"></span><br />dimana eventHandler adalah nama dari event tersebut.</div>

Penulisan Kode JavascriptAda beberapa cara untuk menuliskan kode Javascript di dalam dokumen/halaman HTML, yakni menggunakan tag , menggunakan file eksternal, dan melalui event tertentu.Menggunakan tag Kode javascript d…

Membuat style CSS pada input yang bertipe pilihan radiobutton

Cascading style sheet padaradio button<br />Radio button merupakan bagian dari elemen input form. Saat ingin memberikan style pada radio button dapat menggunakan selector input.selector. Contoh berikut adalah style CSS pada input yang bertipe pilihan radiobutton :<br /><br /><<span style="font-family: "Courier New",Courier,monospace;">HTML><br /><HEAD><br /><TITLE>Pengaturan pada Form</TITLE><br /><STYLE ="text/css"><br />INPUT.rb1{ background: blue ;<br />border-color:white;<br />font-family:verdana;<br />font-size:12px; }<br />INPUT.rb2{ background: green ;<br />border-color:white;<br />font-family:verdana;<br />font-size:12px;}<br /><br /></STYLE><br /></HEAD><br /><BODY><br /><form name="form1" method="post" action=""><br /><TABLE bordercolor="1"><br /><TR><br /><TD width="58" >Kelamin</TD><br /><TD width="230" >:<br /><input type="radio" name="radiobutton"<br />value="radiobutton" class="rb1"><br />Pria /Male</TD><br /><br /></TR><br /><TR><br /><TD width="58">&nbsp;</TD><br /><TD width="230" >&nbsp;<br /><input type="radio" name="radiobutton"<br />value="radiobutton" class="rb2"><br />Wanita/Famale </TD><br /></TR><br /></TABLE><br /></form><br /></BODY><br /></HTML></span><br /><br />Untuk menerapkan style input.rd1 dan input.rd2 maka pada tag <input type="radio" > perlu memanggil style tersebut dengan cara class=”rd1” dan class=”rd2” .<br /> <br /> <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_71_BF5wdx-fM6V7BViVEr6xywDe8CYvQlkj3tq9ss6gXhtiv3MkejFrgYuRYX-gvRMlUp4uIwX1MKWuEOEXFiUxb7c3V7kODwSuqYfkHzz8A4wEivBeGanXDiJozGTglJkekuaT_6Lby/s1600/ri.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_71_BF5wdx-fM6V7BViVEr6xywDe8CYvQlkj3tq9ss6gXhtiv3MkejFrgYuRYX-gvRMlUp4uIwX1MKWuEOEXFiUxb7c3V7kODwSuqYfkHzz8A4wEivBeGanXDiJozGTglJkekuaT_6Lby/s320/ri.png" width="320" /></a></div> Sehingga ketika listing kode diatas dijalankan akan muncul tampilan radio button seperti berikut ini gambar diatas.

Cascading style sheet padaradio buttonRadio button merupakan bagian dari elemen input form. Saat ingin memberikan style pada radio button dapat menggunakan selector input.selector. Contoh berikut adalah style CSS pada in…

Contoh penggunaan CSS pada tombol flat button

Cascading style sheet pada button<br />Button merupakan tombol yang dapat diklik. Pada tombol, baik submit, reset maupun button, style CSS dapat digunakan untuk menimbulkan efek pipih (flat) pada tombol. Berikut ini adalah contoh penggunaan CSS pada tombol flat :<br /><span style="font-family: "Courier New",Courier,monospace;"><br /><html><br /><head><br /><title>pengaturan pada form tombol</title><br /><style ="text/css"><br />input.button { color:#000000;<br />background: lightblue ;<br />border-color:white;<br />border-bottom-color:black;<br />border-top:1px dotted;<br />border-bottom:1px dotted;<br />border-left: 1px dotted;<br />border-right:1px dotted;<br />font-family:verdana;<br />font-size:12px; }<br /></style><br /></head><br /><body><br /><form name="form1" method="post" action=""><br /><table ><br /><tr><br /><td width="58" >nama </td><br /><td width="230" >:<br /><input type="text" name="nama"><br /></td><br /></tr><br /><tr><br /><td width="58">alamat</td><br /><td width="230" >:<br /><input type="text" name="alamat"><br /></td><br /></tr><br /><tr><br /><td></td><br /><td ><input class="button" type="submit" name="submit"<br />value="simpan"><br /><input class="button" type="submit" name="submit2"<br />value="submit"><br /></td><br /></tr><br /></table><br /></form><br /></body><br /></html></span><br /><br />Bila listing kode diatas dijalankan akan menampilkan style button dengan efek flat/pipih seperti berikut ini :<br /><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmsQueCWH7wu_DgC0s5rcqAiSgMaQRgfS_P3ycyTCfUASE5UO2Bkt528maiF_wwhCu2SYZm6kbzkAyuC-_-HwMD1Cy5jQ0baLlwwp8HqJZua9V0vJUGgfxgf47zhZCYMYj1iDbf_uNlaVx/s1600/button+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmsQueCWH7wu_DgC0s5rcqAiSgMaQRgfS_P3ycyTCfUASE5UO2Bkt528maiF_wwhCu2SYZm6kbzkAyuC-_-HwMD1Cy5jQ0baLlwwp8HqJZua9V0vJUGgfxgf47zhZCYMYj1iDbf_uNlaVx/s320/button+1.png" width="320" /></a></div> Efek style juga bisa diberikan saat button dilewati mouse. Untuk memberikan efek berbeda saat button dilewati mouse dapat menggunakan selector CSS input.button:hover . Untuk listing kode lengkapnya adalah sebagai berikut<br /> <div class="separator" style="clear: both; text-align: center;"> </div> <br /><span style="font-family: "Courier New",Courier,monospace;"><HTML><br /><HEAD><br /><TITLE>Pengaturan Pada Form Tombol</TITLE><br /><STYLE ="text/css"><br />input.button<br />{ color: #fff;<br />background: #ffa20f;<br />border: 2px outset #BBD16D;<br />font-family: "calibri", Times, serif;<br />font-size: 14px;<br />font-weight: bold;<br />width : auto; }<br />input.button:hover<br />{ color: #fff;<br />background: #0c62a4; /*biru kayak judul header*/<br />border: 2px outset #ffa20f;<br />font-family: "calibri", Times, serif;<br />font-size: 14px;<br />font-weight: bold;}<br /></STYLE><br /></HEAD><br /><BODY><br /><TR><br /><TD width="58" >Nama </TD><br /><TD width="230" >:<br /><input type="text" name="nama"><br /></TD><br /></TR><br /><TR><br /><TD width="58">Alamat</TD><br /><TD width="230" >:<br /><input type="text" name="alamat"><br /></TD><br /></TR><br /><TR><br /><TD></TD><br /><TD ><input class="button" type="submit" name="Submit"<br />value="Simpan"><br /><input class="button" type="submit" name="Submit2"<br />value="Submit"><br /></TD><br /></TR><br /></TABLE><br /></form><br /></BODY><br /></HTML></span><br /><br />Bila listing tersebut dijalankan akan muncul tampilan form dengan keadaan<br />yang berbeda saat mouse berada melewatinya dan tidak melewatinya. Dibawah<br />ini keadaan button ketika mouse tidak berada diatasnya. Style button yang<br />bekerja saat mouse tidak melewati button<br /><br /><span style="font-family: "Courier New",Courier,monospace;">input.button<br />{ color: #fff;<br />background: #ffa20f;<br />border: 2px outset #BBD16D;<br />font-family: "calibri", Times, serif;<br />font-size: 14px;<br />font-weight: bold;<br />width : auto;}</span><br />Sehingga muncul tampilan sebagai berikut<br /><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpEBFFQufRkg_HfvFLTYf7KcpTxZiVhchpkCFFIdfEPmj5FNt-jUAC1B7OJLO8XO4geefGEzVVY9tkn4kmhNGgK-ikJOVa5o_JbjtSB5d7VaiuttkeXG2wWIOSdgr4w-tD_k-GPcZClq45/s1600/button+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpEBFFQufRkg_HfvFLTYf7KcpTxZiVhchpkCFFIdfEPmj5FNt-jUAC1B7OJLO8XO4geefGEzVVY9tkn4kmhNGgK-ikJOVa5o_JbjtSB5d7VaiuttkeXG2wWIOSdgr4w-tD_k-GPcZClq45/s320/button+2.png" width="320" /></a></div> Saat mouse melewatinya, button yang semula berwarna orange berubah menjadi biru. Style untuk memberikan perubahan saat mouse melewati button adalah<br /> <br /><span style="font-family: "Courier New",Courier,monospace;">input.button:hover<br />{ color: #fff;<br />background: #0c62a4; /*biru kayak judul header*/<br />border: 2px outset #ffa20f;<br />font-family: "calibri", Times, serif;<br />font-size: 14px;<br />font-weight: bold;}</span><br /><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgehYaJIp-HgvqhKABwBs8eMLaqqRQCbsfP3CsbePRkzhsJxy3RSNChzQxFaHFA-7vjqtEpFfUL45r7qSRoXSGDvSyqMFsj4Cm-bVjFpXFIiM5HQ14w7BBc1NX3RkFi5m5wreOrU6CWN21t/s1600/button+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgehYaJIp-HgvqhKABwBs8eMLaqqRQCbsfP3CsbePRkzhsJxy3RSNChzQxFaHFA-7vjqtEpFfUL45r7qSRoXSGDvSyqMFsj4Cm-bVjFpXFIiM5HQ14w7BBc1NX3RkFi5m5wreOrU6CWN21t/s320/button+3.png" width="320" /></a></div> Sehingga menghasilkan efek sebagai berikut

Cascading style sheet pada buttonButton merupakan tombol yang dapat diklik. Pada tombol, baik submit, reset maupun button, style CSS dapat digunakan untuk menimbulkan efek pipih (flat) pada tombol. Berikut ini adalah con…

Membuat CSS kode pada text field menjadi seperti sisi formulir cetakan

Cascading style sheet pada text field<br />Textfield mendefinisikan kontrol input text pada form. Berikut ini adalah contoh format CSS pada input yang membuat efek dari input textfield menjadi seperti sisi formulir cetakan. CSS untuk textfield menggunakan selector input. Style yang diberikan pada input textfield diantaranya warna, background, border, jenis serta ukuran font dan masih banyak atribut lainya yang bisa digunakan untuk style textfield.<br /><br /><br /><span style="font-family: "Courier New",Courier,monospace;">HEAD><br /><TITLE>Pengaturan pada Form</TITLE><br /><STYLE ="text/css"><br />input {color:#000000;<br />background:white;<br />border-color:white;<br />border-bottom-color:black;<br />border-top:0px solid;<br />border-bottom:2px dotted;<br />border-left: 0px solid;<br />border-right:0px solid;<br />font-family:tahoma,Arial;<br />font-size:11px;}<br /></STYLE><br /></HEAD><br /><BODY><br /><form name="form1" method="post" action=""><TABLE><br /><TR><br /><TD width="58" >Nama </TD><br /><TD width="230" >:<br /><input type="text" name="nama"><br /></TD><br /></TR><br /><TR><br /><TD width="58">Alamat</TD><br /><TD width="230" >:<br /><input type="text" name="alamat"><br /></TD><br /></TR><br /></TABLE><br /></form><br /></BODY><br /></HTML></span><br /><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLCVjA113LfT47kfL_uTsJdCdqAYSFFdfrzfAyC924uoCxXdJRX5CmoA0LJG9mmGnQIRBSbmU4kg45ji3ZI7GWbWlK8EUGUO9M5tN21TFs5yk9lo51uq9gUUZpueMg36WxIDWjLd5OwDH2/s1600/v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLCVjA113LfT47kfL_uTsJdCdqAYSFFdfrzfAyC924uoCxXdJRX5CmoA0LJG9mmGnQIRBSbmU4kg45ji3ZI7GWbWlK8EUGUO9M5tN21TFs5yk9lo51uq9gUUZpueMg36WxIDWjLd5OwDH2/s400/v.png" width="400" /></a></div> Bila listing kode dijalankan akan menampilkan tampilan berikut pada gambar diatas<br /><br />

Cascading style sheet pada text fieldTextfield mendefinisikan kontrol input text pada form. Berikut ini adalah contoh format CSS pada input yang membuat efek dari input textfield menjadi seperti sisi formulir cetakan. CS…

Penerapan css pada textarea

Cascading style sheet pada input text<br />Textarea mendefinisikan kontrol input berupa area teks pada form .Elemen form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}. Berikut contoh penerapan CSS untuk elemen textarea.<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><HTML><br /><HEAD><br /><TITLE>Pengaturan Pada Form Text Area</TITLE><br /><STYLE ="text/css"><br />TEXTAREA<br />{ COLOR : white ;background-color : #FF9933 ; }<br /></STYLE><br /></HEAD><br /><BODY><br /><form name="form1" method="post" action=""><br /><TABLE bordercolor="1"><br /><TR><br /><TD width="50" >Nama </TD><br /><TD width="175" ><br /><textarea name="textarea"<br />cols=50></textarea></TD><br /></TR><br /><TR><br /><TD width="50" >Pesan </TD><br /><TD width="175" ><br /><textarea name="textarea"cols=50 rows=14 ><br /></textarea></TD><br /></TR><br /></TABLE><br /></form><br /></BODY><br /></HTML></span><br /><br /><br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiba1Vg5GyyAIl1zB_1yGTS5CFVRQsiSCqWZcJ4APhsDuzkyhmVqxdtKbbRhBf9F9pXruLBDSLs3eZcs0KcMAu6fINBn32A0YhqJbGtJLU7LJIJpjvCRLTDrwIhf5OVe9aTFYNF-BXRwY89/s1600/teks.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiba1Vg5GyyAIl1zB_1yGTS5CFVRQsiSCqWZcJ4APhsDuzkyhmVqxdtKbbRhBf9F9pXruLBDSLs3eZcs0KcMAu6fINBn32A0YhqJbGtJLU7LJIJpjvCRLTDrwIhf5OVe9aTFYNF-BXRwY89/s1600/teks.png" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">penerapan css pada textarea</td></tr> </tbody></table> Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut.<br /><br />

Cascading style sheet pada input textTextarea mendefinisikan kontrol input berupa area teks pada form .Elemen form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}. Berikut contoh penerapan CSS unt…

Cascading style sheet pada elemen form dengan css

Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS di dalamnya. Style CSS dapat digunakan di berbagai komponen input di dalam form. Dengan menggunakan style CSS akan mengurangi beban halaman dan konsumsi bandwidth.<br /><br /> <b>Cascading style sheet pada elemen form</b><br />Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS. Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background \ dari form. Sebenarnya masih banyak style lain yang bisa diberikan ke form<br /><br /><span style="font-family: "Courier New",Courier,monospace;">Form<br />{ border:1px solid #666666;<br />width : 480; /*lebar form*/<br />margin-left:0; /*jarak dari batas kiri layout*/<br />background-color:#ffff66;}</span><br /><br />Bila style form diatas di embedkan ke dalam file html akan listing kodenya<br />seperti berikut ini :<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><HTML><br /><HEAD><br /><TITLE>Pengaturan Pada Form Text Area</TITLE><br /><STYLE ="text/css"><br />form{ border:1px solid #666666;<br />width : 70%;<br />margin-left:0; /*jarak fieldset dari batas kiri<br />layout*/<br />background-color:#ffff66;}<br /></STYLE><br /></HEAD><br /><BODY><br /><form name="form1" method="post" action=""><br /><table><TR><br /><TD width="50" >Nama </TD><br /><TD width="175" ><br /><textarea name="textarea"<br />cols=50></textarea></TD><br /></TR><br /><TR><br /><TD width="50" >Pesan </TD><br /><TD width="175" ><br /><textarea name="textarea"cols=50 rows=14><br /></textarea></TD><br /></TR></table><br /></form><br /></BODY><br /></HTML></span><br /> <br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA1IEMYSYnsM1Oi0__CevfDfou_zzEnnWoIfthw96YuYguOQdYqEEQGocRKiX0KSjGG-UshfqMU2k4wjkmwp-Lx-KnpHpxAwH20iqmz4H9X_n-niCysi6rGZY2VVE1eb-x8pZ7BgA7xvLR/s1600/form.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA1IEMYSYnsM1Oi0__CevfDfou_zzEnnWoIfthw96YuYguOQdYqEEQGocRKiX0KSjGG-UshfqMU2k4wjkmwp-Lx-KnpHpxAwH20iqmz4H9X_n-niCysi6rGZY2VVE1eb-x8pZ7BgA7xvLR/s1600/form.png" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">form dengan CSS</td></tr> </tbody></table> Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut<br />

Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS di dalamnya. Style CSS dapat digunakan di berbagai komponen input di dalam form. Dengan menggunakan style CSS akan mengurangi beban halaman dan kons…

Cara pengaturan warna pada table pada CSS html

Pengaturan warna pada table<br />Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks,background maupun border<br />table, td, th<br /><span style="font-family: "Courier New",Courier,monospace;"> </span><br /> <span style="font-family: "Courier New",Courier,monospace;">{ border:1px solid green; }</span><br /><br />Style diatas akan memberikan efek warna green pada border table,data (td) dan header tabel (th). Style warna juga bisa diberikan hanya pada bagian tertentu saja, misalnya bagian header tabel (th) seperti pada listing css dibawah<br /><br /><span style="font-family: "Courier New",Courier,monospace;">Th<br />{ background-color:green;<br />color:white; }</span><br /><br />Header tabel akan berwarna green dan teksnya berwarna putih. Penerapan style diatas pada sebuah tabel akan terlihat pada contoh berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><html><br /><head><br /><style><br />table, td, th<br />{ border:1px solid green; }<br />th<br />{ background-color:green;color:white;}<br /></style><br /></head><br /><body><br /><table><br /><tr><br /><th>Nama Depan</th><br /><th>Nama</th><br /></tr><br /><tr><br /><td>Adelin</td><br /><td>Larasati</td><br /></tr><br /><tr><br /><td>Novero</td><br /><td>Dayandra</td><br /></tr><br /><tr><br /><td>Adika</td><br /><td>Dayandra</td><br /></tr><br /></table><br /></body><br /></html></span><br /><br />Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtdw6WZtNAyS38CSKATNLt2UGNgOyxxCY5eue9Bo3xpEhPHUEDZZoqU6nMOXFIXKPz1l7uo4pMJNGVF_z8-trOw0kWsQOR1kQxiTMK-V9urdUgZE9gjvOyUCu9526alwremXn4E-xUKMO-/s1600/tabq.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://kom-tekno.blogspot.com/2016/05/cara-pengaturan-warna-pada-table-pada-css-html.html" border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtdw6WZtNAyS38CSKATNLt2UGNgOyxxCY5eue9Bo3xpEhPHUEDZZoqU6nMOXFIXKPz1l7uo4pMJNGVF_z8-trOw0kWsQOR1kQxiTMK-V9urdUgZE9gjvOyUCu9526alwremXn4E-xUKMO-/s320/tabq.png" title="http://kom-tekno.blogspot.com/2016/05/cara-pengaturan-warna-pada-table-pada-css-html.html" width="320" /></a></div> Ketika pada td tidak diberi style seperti pada style berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><style><br />table,th<br />{ border:1px solid green; }<br />th<br />{ background-color:green;color:white; }<br /></style></span><br /> <br /><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5oLqAEECjFglw1-CgWF-k8U7i6avYUOTkyAKGRRQNS48Jh_YbArTqgYUrYjNSPpyL8URrXbhyYh0NjoOAIiurC2TroQH17H6km5CdZ5udfh_ZCVCcnqrM_IwRo4lm3Az2hHv5qp2A7JSl/s1600/tabq.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://kom-tekno.blogspot.com/2016/05/cara-pengaturan-warna-pada-table-pada-css-html.html" border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5oLqAEECjFglw1-CgWF-k8U7i6avYUOTkyAKGRRQNS48Jh_YbArTqgYUrYjNSPpyL8URrXbhyYh0NjoOAIiurC2TroQH17H6km5CdZ5udfh_ZCVCcnqrM_IwRo4lm3Az2hHv5qp2A7JSl/s320/tabq.png" title="http://kom-tekno.blogspot.com/2016/05/cara-pengaturan-warna-pada-table-pada-css-html.html" width="320" /></a></div> Akan menghasilkan tampilan tabel seperti berikut gambar diatas

Pengaturan warna pada tablePewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks,background maupun bordertable, td, th  { border:1px solid green; }Style diatas akan memberikan efek warna green pada border t…

Pengaturan text-align pada tabel pada style dasar CSS

Pengaturan text-align pada tabel<br />Teks dalam tabel diatur dengan properti.text-align dan vertical-align . Nilai dari properti text-align untuk horizontal alignment adalah left, right, atau center<br /><br />Td<br />{ text-align:right; }<br /><br />Nilai dari properti text-align untuk horizontal alignment adalah top, bottom, or<br />middle<br /><br />Td<br />{ height:50px;vertical-align:bottom; }<br /><br />Berikut ini penerapan style text-align dalam sebuah tabel, dimana teks diatur dengan posisi rata kanan<br /><br /><html><br /><head><br /><style><br />table,td,th<br />{ border:1px solid black; }<br />td<br />{ <body> text-align:right;height:50px;<br />vertical-align:bottom;}<br /></style><br /></head><br /><table><br /><tr><br /><th>Nama Depan</th><br /><th>Nama</th><br /></tr><br /><tr><br /><td>Adelin</td><br /><td>Larasati</td><br /></tr><br /><tr><br /><td>Novero</td><br /><td>Dayandra</td><br /></tr><br /><tr><br /><td>Adika</td><br /><td>Dayandra</td><br /></tr><br /></table><br /></body><br /></html><br /><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQhOmwIrcASaKLRQQ9LWocg1mWruPvp4ehG-c84jqmvoBn_LcUBz4mJ_IxzLRw2X-9jbOiby8cDlkCD-dAVByz-EjzmpA-ejEp8LqRjBqwJ6MJBp63WGdx4Yu2eTxF8qB3NcNo15SLdim8/s1600/al.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQhOmwIrcASaKLRQQ9LWocg1mWruPvp4ehG-c84jqmvoBn_LcUBz4mJ_IxzLRw2X-9jbOiby8cDlkCD-dAVByz-EjzmpA-ejEp8LqRjBqwJ6MJBp63WGdx4Yu2eTxF8qB3NcNo15SLdim8/s320/al.png" width="320" /></a></div> Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :<br /><br />

Pengaturan text-align pada tabelTeks dalam tabel diatur dengan properti.text-align dan vertical-align . Nilai dari properti text-align untuk horizontal alignment adalah left, right, atau centerTd{ text-align:right; }Nila…

Pengaturan lebar dan tinggi tabel dalam property width dan height css html

<b>Pengaturan lebar dan tinggi tabel</b><br />Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height Contoh berikut ini mengatur lebar tabel 100% dan tinggi dari elemen th adalah<br />50px.<br /><br />table<br />{width:100%; }<br />th<br />{ height:50px; }<br /><br />Berikut ini penerapan style width dan height dalam sebuah tabel<br /><br /><html><br /><head><br /><style><br />table,td,th<br />{ border:1px solid black; }<br />table<br />{ width:100%; }<br />th<br />{ height:50px; }<br /></style><br /></head><br /><body><br /><table><br /><tr><br /><th>Nama Depan</th><br /><th>Nama</th><br /></tr><br /><tr><br /><td>Adelin</td><br /><td>Larasati</td><br /></tr><br /><tr><br /><td>Novero</td><br /><td>Dayandra</td><br /></tr><br /><tr><br /><td>Adika</td><br /><td>Dayandra</td><br /></tr><br /></table><br /></body><br /></html><br /><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0I4rypEErMmzE9MJDeP4hEsm9nFbitdHBeNw33rHa4gldKbSvZgAS5LLDZHLyG3qwbAzpO54hHEcsGYCcE_ZIhyWZeawmVH2ChEswJA9DsLAEcOWRfrnzBVXEwPFBaiHDWeIuszwdAMb/s1600/s.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0I4rypEErMmzE9MJDeP4hEsm9nFbitdHBeNw33rHa4gldKbSvZgAS5LLDZHLyG3qwbAzpO54hHEcsGYCcE_ZIhyWZeawmVH2ChEswJA9DsLAEcOWRfrnzBVXEwPFBaiHDWeIuszwdAMb/s400/s.png" width="400" /></a></div> Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :<br /><br /> <br /> <br />

Pengaturan lebar dan tinggi tabelLebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height Contoh berikut ini mengatur lebar tabel 100% dan tinggi dari elemen th adalah50px.table{width:100%; }th{ h…

Penerapan style border pada tabel pada CSS HTML

Pengaturan border tabel<br />CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel. Format yang dapat dilakukan meliputi jenis garis (dotted, solid, dan lainlain), warna border, ketebalan garis tepi dan sebagainya. Demikian pula warna dari sebuah sel, dapat diatur dengan CSS.<br />Berikut adalah contoh penerapan style border pada tabel dengan style sebagaiberikut {border:1px solid black;} dan listing kode lengkapnya seperti dibawah ini<br /><br /><br /><html><br /><head><br /><style><br />table,th,td<br />{ border:1px solid black; }<br /></style><br /></head><br /><body><br /><table><br /><tr><br /><th>Nama Depan</th><br /><th>Nama</th><br /></tr><br /><tr><br /><td>Adelin</td><br /><td>Larasati</td><br /></tr><br /><tr><br /><td>Novero</td><br /><td>Dayandra</td><br /></tr><br /><tr><br /><td>Adika</td><br /><td>Dayandra</td><br /></tr><br /></table><br /></body><br /></html><br /><br />Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai<br />berikut :<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5-gPEbL2DZmo7AC-LMh8RV-ee-MBvSUMNskSXUuxHHtjOtpEwjeQq7OmM6OgcvwwXwJWQ7f24jbqPz94nvIjziS6giISFHIi5wqC5dQD6nCklbdlMd5Al8AsbGMVq0xSZJfBgYGWEvQ6/s1600/tabel+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5-gPEbL2DZmo7AC-LMh8RV-ee-MBvSUMNskSXUuxHHtjOtpEwjeQq7OmM6OgcvwwXwJWQ7f24jbqPz94nvIjziS6giISFHIi5wqC5dQD6nCklbdlMd5Al8AsbGMVq0xSZJfBgYGWEvQ6/s320/tabel+1.png" width="320" /></a></div> Berikut ini contoh pengaturan property<br /><br /> border-collapse:collapse;<br /><br />yang menghasilkan tampilan garis single pada tabel<br /><br /><html><br /><head><br /><style><br />table<br />{ border-collapse:collapse; }<br />table, td, th<br />{ border:1px solid black; }<br /></style><br /></head><br /><body><br /><table><br /><tr><br /><th>Nama Depan</th><br /><th>Nama</th><br /></tr><br /><tr><br /><td>Adelin</td><br /><td>Larasati</td><br /></tr><br /><tr><br /><td>Novero</td><br /><td>Dayandra</td><br /></tr><br /><tr><br /><td>Adika</td><br /><td>Dayandra</td><br /></tr><br /></table><br /></body><br /></html><br /><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYh5KdIlWbPQ_J0Y6hviwfuXCvJXrslYhJlHmteL8_OQZhuFQBDLaqEjUX5jveya9VfEzuIAXyx45F-jmk9l6R9NEgDe2l1Qo5kylI_5dJxDC4On4f4Jv-ripKhqaoNPwEPHwi9rprFyFB/s1600/tabel+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYh5KdIlWbPQ_J0Y6hviwfuXCvJXrslYhJlHmteL8_OQZhuFQBDLaqEjUX5jveya9VfEzuIAXyx45F-jmk9l6R9NEgDe2l1Qo5kylI_5dJxDC4On4f4Jv-ripKhqaoNPwEPHwi9rprFyFB/s320/tabel+2.png" width="320" /></a></div> Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :<br /><br /><br />

Pengaturan border tabelCSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel. Format yang dapat dilakukan meliputi jenis garis (dotted, solid, dan lainlain), warna border, ketebalan garis tepi dan …

Cascading style sheet untuk menyisipkan gambar dan tampilan video

Cascading style sheet untuk menyisipkan gambar<br />Adakala saat membuat halaman web yang berisi artikel diperlukan gambar yang mendukung artikel tersebut. Agar terlihat rapi dan menarik maka gambar yang disisipka perlu diberi CSS.<br /><br /><html><br /><head><br /><title><br />CSS image placement<br /></title><br /><style ><br />#headline1 { background-image: url(kiwi.jpg);<br />background-repeat: no-repeat;<br />background-position: left top;<br />padding-top:68px;<br />margin-bottom:50px; }<br />#headline2 { background-image: url(kiwi.jpg);<br />background-repeat: no-repeat;<br />background-position: left top;<br />padding-top:68px; }<br /></style><br /></head><br /><body><br /><div id="headline1">CSS (versi sekarang adalah CSS3)<br />banyak dilibatkan dalam dokumen Web.<br />Kegunaannya adalah untuk memformat dokumen.<br />Sebagai contoh, warna teks atau bahkan warna<br />latarbelakang bisa diatur melalui CSS.<br /></div><br /><div id="headline2">Namun, tentu saja kegunaan CSS jauh<br />lebih<br /><br />Bila listing kode dijalankan akan menghasilkan tampilan sebagai berikut :<br /><b> </b><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lbS43PGw1Xcp5W15MhIw_lk6EUofbOLrt0aYBwfi9hWArwTPC2vAJVbi1a7Jy0r67Zvs_Pba_qdJwjb_kbkMzm8wIhZnQEviWlpV2X8rwpFNMRIbLZCJE7GAP62WApBSakzEw1op90Rl/s1600/video+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lbS43PGw1Xcp5W15MhIw_lk6EUofbOLrt0aYBwfi9hWArwTPC2vAJVbi1a7Jy0r67Zvs_Pba_qdJwjb_kbkMzm8wIhZnQEviWlpV2X8rwpFNMRIbLZCJE7GAP62WApBSakzEw1op90Rl/s1600/video+2.png" /></a></div> <b>Cascading style sheet pada tampilan video</b><br />Untuk penerapan Cascading style shee pada elemen video dapat dituliskan  secara inline seperti contih berikut ini :<br /><br /><br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br /><video controls="controls" style="display:block; margin:<br />0 auto; width:400px ; heigth:400;" ><br /><source src="movie.mp4" type="video/mp4" /><br />Your browser does not support the video tag.<br /></video><br /></body><br /><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwHimRahBdQgsE9bEfBBYTvaMOKJLnESNw5sX1-VamvGihlY944LC9-v2wvWs5aGJBM6cspoD1yJe0y_gm660L0wwt09WbQvygq5MiFYHLF_J-uvlOIS08zpdu5USPov5r9gdAjjoiMgnq/s1600/video+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwHimRahBdQgsE9bEfBBYTvaMOKJLnESNw5sX1-VamvGihlY944LC9-v2wvWs5aGJBM6cspoD1yJe0y_gm660L0wwt09WbQvygq5MiFYHLF_J-uvlOIS08zpdu5USPov5r9gdAjjoiMgnq/s1600/video+1.png" /></a></div> Bila listing program diatas dijalankan akan menghasilkan tampilan video yang di atur tampil “center” dengan atribut width:400px dan height:400px seperti pada tampilan berikut ini.

Cascading style sheet untuk menyisipkan gambarAdakala saat membuat halaman web yang berisi artikel diperlukan gambar yang mendukung artikel tersebut. Agar terlihat rapi dan menarik maka gambar yang disisipka perlu diberi…

Cascading style sheet Gambar untuk background dengan kode html

<b>Cascading style sheet Gambar untuk background</b><br />Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font<br /><br /><span style="color: #444444;">div { background: url(“latar.png”);;<br />background-image: url(“latar.png”);;}</span><br /><br />kesalahan tersebut bekerja, simpan dan jalankan kode Namun, penambahan gambar dengan cara di atas akan memberikan masalah ketika ukuran gambar tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, secara horizontal maupun vertikal, jika ukuran elemen lebih besar dari ukuran gambar. Untuk dapat melihat bagaimana berikut :<br /><br /><span style="color: #444444;"><html><br /><head><br /><title>Background Image Goes Wrong</title><br /><style type="text/css"><br />#utama{backgroundimage:<br />url(kiwi.jpg);height:600px;width:800px;}<br /></style><br /></head><br /><body><br /><div id="utama"><br /></div><br /></body><br /></html></span><br /><br />Gambar asli yang digunakan sebagai background dengan ukuran 50px X 50px<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXc8eFdc-dszf952bvN0dd-FfYxBUrlERQPXt6Q9mgS7h1UxZEGWb7-gQJW9gvVBn0aPn77n7aLi2lnMs6Ht3oFeHIvcBkHlyk4RMbuzXoQSHjmvqphWEpR_2SjCV2-YWSQoj7tuFUsKDq/s1600/background+1+-+Copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXc8eFdc-dszf952bvN0dd-FfYxBUrlERQPXt6Q9mgS7h1UxZEGWb7-gQJW9gvVBn0aPn77n7aLi2lnMs6Ht3oFeHIvcBkHlyk4RMbuzXoQSHjmvqphWEpR_2SjCV2-YWSQoj7tuFUsKDq/s1600/background+1+-+Copy.png" /></a></div> Karena ukuran asli gambar adalah 50px X 50px sedangkan ukuran background yang diinginkan adalah 800px X 600px maka gambar akan ditampilkan berulang-ulang sampai terpenuhi ukuran background 800px X 600px seperti pada gambar berikut :<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVpR7_s6q8FaE_MLYldMg5fLlkXGo5jvOn8aHWrMKvW4_My9lU6Y_I4WzFtr-kkKNjESv2IRqILUwypTz4NNNa9hn2P5YarLodeNW3DiLz20RTOP_YLykUyQGK4b18MB3EGmACWs8Sh6S/s1600/background+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVpR7_s6q8FaE_MLYldMg5fLlkXGo5jvOn8aHWrMKvW4_My9lU6Y_I4WzFtr-kkKNjESv2IRqILUwypTz4NNNa9hn2P5YarLodeNW3DiLz20RTOP_YLykUyQGK4b18MB3EGmACWs8Sh6S/s1600/background+2.png" /></a></div> Adakalanya perulangan tampilan gambar otomatis ini tidak diinginkan. Untuk itu dapat menggunakan properti background-repeat untuk mengatur bagaimana perulangan kode ingin dilakukan. Terdapat empat nilai yang dapat diisikan pada properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. Seperti namanya, no-repeat menghilangkan perulangan, repeat-x memberikan perulangan hanya pada sumbu x (horizontal), dan repeat-y memberikan   perulangan hanya pada sumbu y (vertikal). Listing Kode CSS di bawah akan menghilangkan perulangan pada sumbu x dan sumbu y, sehingga kiwi,jpg hanya akan ditampilkan satu kali<br /><br /><span style="color: #444444;">#utama {background-image: url(kiwi.jpg);<br />background-repeat: no-repeat;<br />height: 600px;width: 800px;}</span>

Cascading style sheet Gambar untuk backgroundSeperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan unt…

Penerapan Cascading style sheet pada tampilan gambar dielemen kode html

<b> Cascading style sheet pada tampilan gambar</b><br />CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur  gambar dapat dituliskan secara inline seperti contoh berikut :<br /><br /><span style="color: #444444;"><img src="nama-file-gambar" width="lebar" height="tinggi"<br />alt="text" title="text" border="1" /></span><br /><br />Selain dengan cara inline , stlyle CSS dapat diberikan secara embed ataupun eksternal CSS. Berikut terdapat tiga gambar yang diberi style dimana ukuran ketiga gambar dibuat sama 200 x 200 dan margin atas gambar adalah 10px sehingga antar gambar terlihat ada jarak<br /><span style="color: #444444;"><br /><! DOCTYPE HTML><br /><html><br /><head><br /><tittle>Contoh CSS</tittle><br /><style><br />Img { Margin-top: 10px;<br />Float: left;<br />Clear: both;<br />width:200px;<br />height:200px;}<br /></style><br /></head><br /><body><br />Contoh CSS pada gambar (img)<br><br /><img src="brokoli.jpg" ><br /><img src="tomat.jpg"><br /><img src="paprika.jpg"><br /></body><br /></html></span><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqoKVfgeQlvEm3sk_rWN7hXBvYWGl-7FBpTjnYcgvOA8dnFJC-F6rr2jdsdK-QGTZPbMWGC7MQ3ERzvXCtmTWV1GUWIReL94wObncd3yQ7jNdHQHIUNNprZm5iuUU1x8iCB4YfXazP4PSC/s1600/gambar+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqoKVfgeQlvEm3sk_rWN7hXBvYWGl-7FBpTjnYcgvOA8dnFJC-F6rr2jdsdK-QGTZPbMWGC7MQ3ERzvXCtmTWV1GUWIReL94wObncd3yQ7jNdHQHIUNNprZm5iuUU1x8iCB4YfXazP4PSC/s1600/gambar+1.png" /></a></div> Bila listing kode diatas dijalankan maka akan menghasilkan tampilan gambar seperti berikut ini gambar diatas.<br /><br />

 Cascading style sheet pada tampilan gambarCSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan h…

Pengaturan Text Alignment<br />Properti text-align digunakan untuk mengatur alignment horizontal teks. Teks dapat ditulis rata kiri, rata kanan, rata kanan kiri ataupun ditulis center. Ketika text-align diset “justify", setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar). Format penulisan CSS untuk text alignment<br /><br />selector {text-align:nilai text-align;}<br /><br />Berikut adalah contoh dari penulisan style text-align yang disisipkan di selector h1 dan paragraf<br />h1 {text-align:center;}<br />p.tanggal {text-align:right;}<br />p.utama {text-align:justify;}<br /><br />pada selector p.tanggal dan p.utama artinya CSS akan diberikan ke paragraf dengan pemanggilan kelas “tanggal” dan “utama”. Untuk lebih lengkapnya dapat dilihat pada contoh berikut :<br /><br /><!DOCTYPE html><br /><html><br /><head><br /><style><br />h1 {text-align:center;}<br />p.tanggal {text-align:right;}<br />p.utama {text-align:justify;}<br /></style><br /></head><br /><body><br /><h1>Contoh CSS text-align</h1><br /><p class="tanggal">07 Desember 2013</p><br /><p class="utama">Properti text-align digunakan untuk<br />mengatur alignment horizontal teks.<br />Teks dapat ditulis rata kiri, rata kanan, rata kanan<br />kiri ataupun ditulis center. Ketika text-align diset<br />“justify", setiap baris memiliki lebar yang sama, dan<br />margin kiri dan kanan lurus (seperti di majalah dan surat<br />kabar).<br />Format penulisan CSS untuk text alignment.selector {textalign:<br />nilai text-align;}<br />Berikut adalah contoh dari penulisan style text-align<br />yang disisipkan di selector h1 dan paragraf.<br />h1 {text-align:center;}<br />p.tanggal {text-align:right;}<br />p.utama {text-align:justify;}<br />pada selector p.tanggal dan p.utama artinya CSS akan<br />diberikan ke paragraf dengan pemanggilan kelas “tanggal”<br />dan “utama”. Untuk lebih lengkapnya dapat dilihat pada<br />contoh berikut :</p><br /><p><b>Catatan:</b> Baris ini adalah contoh penulisan tanpa<br />CSS</p><br /></body><br /></html><br /><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcjYO9vnaBxr4GkiP83eN2c5VB62l51gS_IEyTCjRbiK0P6VFtGA47SVebVfkX1iLRyTXwkrEDhlpXVcEXhoIh97gZW9azsIIX2ppK5iF1jc-KjhkQgV5TUXFMW2VqJOi9Yi9-IT7wV5Zy/s1600/c.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcjYO9vnaBxr4GkiP83eN2c5VB62l51gS_IEyTCjRbiK0P6VFtGA47SVebVfkX1iLRyTXwkrEDhlpXVcEXhoIh97gZW9azsIIX2ppK5iF1jc-KjhkQgV5TUXFMW2VqJOi9Yi9-IT7wV5Zy/s400/c.png" width="400" /></a></div> Bila listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut diatas

Pengaturan Text AlignmentProperti text-align digunakan untuk mengatur alignment horizontal teks. Teks dapat ditulis rata kiri, rata kanan, rata kanan kiri ataupun ditulis center. Ketika text-align diset “justify", setiap…

Pengubahan huruf besar dan huruf kecil dari sebuah teks/texttransform

Pengubahan huruf besar dan huruf kecil dari sebuah teks/texttransform<br /> Teks-transform properti digunakan untuk menentukan huruf besar dan kecil dalam teks. Format penulisan CSS untuk pengaturan text indent adalahsebagai berikut :<br /><br />selector { text-transform:nilai text transform}<br /><br />Nilai text transform dapat diisi dengan uppercase,lowercase, capital. Pada listing kode berikut terlihat CSS dituliskan dalam bentuk CLASS p.besar, p.kecil dan p.kapital. Hal ini bertujuan untuk memberikan pengaturan yang berbedapada paragrafnya.<br /><br /><span style="color: #444444;"><STYLE ="text/css"><br />p.besar {text-transform: uppercase}<br />p.kecil {text-transform: lowercase}<br />p.kapital {text-transform: capitalize}<br /></STYLE</span>><br /><br />Berikut ini adalah contoh penerapan dari style tersebut :<br /><span style="color: #444444;"><HTML><br /><HEAD><br /><TITLE>Format Text </TITLE><br /><STYLE ="text/css"><br />p.besar {text-transform: uppercase}<br />p.kecil {text-transform: lowercase}<br />p.kapital {text-transform: capitalize}<br /></STYLE><br /></HEAD><br /><BODY><br /><p class="besar"><br />pengubahan menjadi huruf Besar (Kapital)<br /></p><br /><p class="kecil"><br />PENGUBAHAN MENJADI HURUF KECIL<br /></p><br /><p class="kapital"><br />huruf kapital pada setiap awal kata<br /></p><br /></BODY><br /></HTML></span><br /><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wli-J1fOWr6FoGUfUbYN3mWiaG903jD1F0KO5JAwRBJGPyzgOfzmHk07_wsRmlVqp5r-A0FsjFQd14-SByW-0M4oiCQG4JFMtmyrZQ1O4hjRITSswYvNnL84bk_MhVXV3cW_K2tkgOEK/s1600/be.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Wli-J1fOWr6FoGUfUbYN3mWiaG903jD1F0KO5JAwRBJGPyzgOfzmHk07_wsRmlVqp5r-A0FsjFQd14-SByW-0M4oiCQG4JFMtmyrZQ1O4hjRITSswYvNnL84bk_MhVXV3cW_K2tkgOEK/s400/be.png" width="400" /></a></div> Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut<br />

Pengubahan huruf besar dan huruf kecil dari sebuah teks/texttransform Teks-transform properti digunakan untuk menentukan huruf besar dan kecil dalam teks. Format penulisan CSS untuk pengaturan text indent adalahsebagai b…

Pengaturan bentuk teks menggunakan properti text-decoration pada penulisan CSS

Pengaturan bentuk-bentuk teks/decoration<br /> Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks. Format penulisan CSS untuk mengaturan dekorasi teks adalah sebagai berikut<br /> <br /> <br />  selector {text-decoration : nilai text-decoration }<br /> <br /> Nilai dari text-decoration dapat berupa overline, line-through, underline dan none yang berarti tanpa dekorasi . Berikut ini adalah contoh penerapan dari style tersebut :<br /> <span style="color: #444444;"><br /><span style="color: black;"><HTML><br /><HEAD><br /><TITLE>Format Text </TITLE><br /><STYLE ="text/css"><br />em {text-decoration : overline}<br />h2 {text-decoration: line-through}<br />h3 {text-decoration: underline}<br />a {text-decoration: none}<br /></STYLE><br /></HEAD><br /><BODY><br /><em>Bentuk Overline</em><br /><h2>Header 2, Bentuk Line-through</h2><br /><h3>Header 3,Bentuk Underline</h3><br /><p><a href="http://www.bem.akakom.ac.id"><br />Penggunaan Dalam Link,Nilai NONE</a></p><br /></BODY><br /></HTML></span></span><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLq6fK-JGvrmhehdzPTVBkVok9VX9cOPKvA8nH2q4VvNqm7yXSlapEiic8bHsQmDGQbroGeG0We4DibHa0kDST1oGeZy5a737ReqKSRe4PuEwgLp9W7vj76SlR3G1unIt0DO5CVpM58wD/s1600/hea.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLq6fK-JGvrmhehdzPTVBkVok9VX9cOPKvA8nH2q4VvNqm7yXSlapEiic8bHsQmDGQbroGeG0We4DibHa0kDST1oGeZy5a737ReqKSRe4PuEwgLp9W7vj76SlR3G1unIt0DO5CVpM58wD/s400/hea.png" width="400" /></a></div> <br /> Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut

Pengaturan bentuk-bentuk teks/decoration Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks. Format penulisan CSS untuk mengaturan dekorasi teks adalah …

Pengaturan spasi antar karakterf/letter-spacing pada style css

Pengaturan spasi antar karakterf/letter-spacing<br />Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk memberikan jarak (spasi) antar karakter atau huruf. Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut<br /><br />selector { letter-spacing:nilai spasi;}<br /><br />Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini adalah contoh penerapan dari style tersebut<br /><br />HTML><br /><HEAD><br /><TITLE>Format Text </TITLE><br /><STYLE ="text/css"><br />p {letter-spacing: 0.5cm}<br />h4 {letter-spacing: -2px}<br /></STYLE><br /></HEAD><br /><BODY><br /><p>Pengaturan Spasi Pada Paragraph</p><br /><h4> Header 4</h4><br /></BODY><br /></HTML><br /><br /><br /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJO4looQ4s1lxP1fn5qUKZEb0PupF1eB6f4WvbmgFZM4sqLJ-mqmxuaL50l7jTsbN3Zw_EXpAeTSHthcInGOJzUX_zoXAg1Bu2qoB8-6y1SBr9NJt9PbovJYg239dwAJZlCMRsMfBnKo8/s1600/spasi+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJO4looQ4s1lxP1fn5qUKZEb0PupF1eB6f4WvbmgFZM4sqLJ-mqmxuaL50l7jTsbN3Zw_EXpAeTSHthcInGOJzUX_zoXAg1Bu2qoB8-6y1SBr9NJt9PbovJYg239dwAJZlCMRsMfBnKo8/s1600/spasi+1.png" /></a></div> <div class="separator" style="clear: both; text-align: center;"> </div> Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut gambar diatas

Pengaturan spasi antar karakterf/letter-spacingSalah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk memberikan jarak (spasi) antar karakter atau huruf. Format penulisan CSS untuk pengaturan jarak (s…

Pengaturan warna teks dengan CSS pada web

Pengaturan warna pada teks/color<br />CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS dapat menggunakan nilai warna sebagai berikut :<br /> <ul> <li> nilai HEX - misalnya, "#ff0000"</li> <li> nilai RGB-misalnya, "rgb(255,0,0)</li> <li> nama dari warna tersebut-misalnya "red"</li> </ul> Format penulisan untuk pemberian warna pada text menggunakan CSS adalah<br />sebagai berikut<br /><br /><span style="color: #444444;">selector {color:nilai warna}</span><br /><br />Berikut adalah contoh penulisan warna pada teks yang dituliskan secara embeded<br /><br /><span style="color: #444444;"><!DOCTYPE html><br /><html><br /><head><br /><br /><style><br />body {color:red;}<br />h1 {color:#00ff00;}<br />p.ex {color:rgb(0,0,255);}<br /></style><br /><br /></head><br /><body><br /><h1>ini adalah heading 1</h1><br /><p>ini adalah paragraph, ditulis dengan warna merah.<br />Default text-color didefinisakan pada body<br />selector.</p><br /><p class="ex">ini adalah paragraph with class="ex".<br />dan warna teks biru.</p><br /></body><br /></html></span><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZ_n7L3jcgdgH6j3EnpUywEkcq-m7GWGE7o5kTkE-hdhd9qFqLGkh1VoZC3aTwTfjfxSi6fsaRvd6z6a7ZRSsOTEAqjvVYVFLpcaYIicJrRRyxuth2emo-D9pBhlES2ZwwKfFnaRD60f8/s1600/css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZ_n7L3jcgdgH6j3EnpUywEkcq-m7GWGE7o5kTkE-hdhd9qFqLGkh1VoZC3aTwTfjfxSi6fsaRvd6z6a7ZRSsOTEAqjvVYVFLpcaYIicJrRRyxuth2emo-D9pBhlES2ZwwKfFnaRD60f8/s320/css.png" width="320" /></a></div> <br /> Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut, secara otomatis ketika terdapat teks pada tag <body., <h1> dan <p> terkena style pewarnaan

Pengaturan warna pada teks/colorCSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS dapat menggunakan nilai warna sebagai berikut :  nilai HEX - misalnya, "#ff0000"  nilai RGB-misalnya, "r…

Menerapkan style pada file CSS

External Style Shee<br /> CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten<br /> <br /> <input type="submit" value="Login" class="btn"<br /> onClick=parent.location="Home_Iframe.htm" /><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYzdlYjRU1kefB8GIVT6z51tshGoUpiGz9HTtLgqPblTLSCQiYdVrD8De0QzbJ2v3j1t25c-5uR3bNcqCJItsWB7swXO2sOGvU_87Z8PxZ_IpoEuHhSRDEPlKjc1SGDBQeXBAA-rhA-CD/s1600/K+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYzdlYjRU1kefB8GIVT6z51tshGoUpiGz9HTtLgqPblTLSCQiYdVrD8De0QzbJ2v3j1t25c-5uR3bNcqCJItsWB7swXO2sOGvU_87Z8PxZ_IpoEuHhSRDEPlKjc1SGDBQeXBAA-rhA-CD/s320/K+1.png" width="320" /></a></div> File yang berisi style CSS disimpan dalam format *.css. Dari gambar diatas dapat dilihat file CSS ditempatkan dalam satu folder yang sama dengan file HTML. Contoh penulisan file.css<br /> <br /> input.btn<br /> {color: #fff;<br /> background: #ffa20f;<br /> border: 2px outset #BBD16D;<br /> font-family: "calibri", Times, serif;<br /> font-size: 14px;<br /> font-weight: bold;<br /> width : auto;}<br /> <br /> Kemudian listing kode diatas disimpan dengan nama style.css dan untuk<br /> selanjutkan akan dipanggil pada file html seperti pada contoh berikut :<br /> <br /> <html><br /> <head><br /> <title>Sistem Informasi WidyaIswara</title><br /> <style type="text/css"><br /> </style><br /> <link href="style.css" rel="stylesheet" type="text/css"><br /> </head><br /> <body><br /> <table><br /> <tr><br /> <td><form ><br /> <p><label for="nama">Username</label><br /> <input type="text" id="nama" /><br /> </p><br /> <p><br /> <label for="KTP">Password</label><br /> <input type="text" id="KTP" /><br /> </p><br /> <p><br /> <input type="submit" value="Login" class="btn"<br /> <br /> Bila listing kode diatas dijalankan maka akan menghasilkan tampilan seperti berikut<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8AplghXvSuU6vPLQmGqBNDDZhlnAQq6VFlOVOzHpQTFsOWpOsQPgXydMhmbA-wXtxM4D5CBt9wROw5cIE1t-vRjNwzvUnFSu6tP858PWVaD6UAI2m0x8t20PKGrhw8suHQwc8aJ9O_0Rg/s1600/K+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8AplghXvSuU6vPLQmGqBNDDZhlnAQq6VFlOVOzHpQTFsOWpOsQPgXydMhmbA-wXtxM4D5CBt9wROw5cIE1t-vRjNwzvUnFSu6tP858PWVaD6UAI2m0x8t20PKGrhw8suHQwc8aJ9O_0Rg/s1600/K+2.png" /></a></div> Pada bagian head terdapat perintah pemanggilan file “style.css” seperti pada listing kode berikut :<br /> <style type="text/css"><br /> </style><br /> <link href="style.css" rel="stylesheet" type="text/css">

External Style Shee CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya…