mendapatkan uang dari Whaff

Whaff atau Whaff Rewards adalah sebuah aplikasi penghasil uang & Gift Card terbaik saat ini. Sudah banyak pengguna Whaff yang saat ini telah meraup Puluhan bahkan sudah mendekati ratusan juga rupiah hanya dengan menggunakan HandHeld Android yang dimiliki. Saat ini versi terbaru Whaff sudah mendukung Bahasa Indonesia, sehingga memudahkan bagi kamu yang tidak terlalu mahir dengan Bahasa Inggris.

Lalu kenapa Whaff mau membayar kita ? Aplikasi Whaff merupakan Rewards App yang menyediakan berbagai Aplikasi dan Game Gratis dari pihak ketiga. Sistem perputaran uangnya kurang lebih seperti ini, Developer Aplikasi / Game mengiklankan karyanya di Whaff, dan Whaff akan mendistribusikan Aplikasi / Game ke para pengguna Whaff dengan memberikan imbalan berupa saldo yang nantinya bisa diambil dalam bentuk Uang Tunai atau ditukarkan dalam bentuk Voucher Belanja di merchant merchant ternama, seperti :
Steam
Play Store
iTunes (Apple)
Xbox Store
Play Station Store
Amazon

Jadi selain kamu mendapatkan Game / Aplikasi Gratis dari Whaff, kamu juga bisa mendapatkan banyak uang. Sangat menguntungkan bukan ? Lalu apa saja yang dibutuhkan untuk bisa menjalankan Whaff ?
1. Handheld Android (bisa Smartphone / Tablet)
2. Akun Facebook (untuk Login)
3. Koneksi Internet
4. Akun Paypal & Rekening Bank BCA, BRI, Mandiri, BNI, dll (untuk menerima pembayaran whaff dalam uang Tunai).

Dan apabila kamu pencandu game game fenomenal Android / iOS seperti Clash of Clans, Hay Day, Line Lets Get Rich, dll, kamu juga bisa mempergunakan saldo Whaff untuk membeli Gems / Diamonds / Coins pada game game tersebut.

CARA DAFTAR WHAFF & DAPAT BONUS 0,30 USD

Beberapa waktu lalu sudah dibahas cara mendaftar dan menggunakan Whaff, tetapi pada panduan sebelumnya menggunakan Screenshot Whaff Versi lama, sehingga bagi pengguna Whaff baru mungkin akan sedikit kesulitan. Dan berikut ini adalah cara Daftar Whaff Versi Baru yang dipublikasikan oleh whaffrewards.blogspot.com.

1. Kunjungi Play Store melalui Android
2. Lakukan pendaftaran dengan cara klik Log In / Masuk menggunakan akun Facebook.
3. Selanjutnya akan muncul kotak Bonus. Sebagai bonus pertama masukkan kode AL41860 untuk dapat bonus 0,30 Dolar.
Penting : Kotak bonus tersebut hanya akan muncul sekali setelah berhasil Log In dengan facebook. Masukkan kode dengan benar agar bonus pertama senilai 0,30 Dolar tidak hangus.

CARA MENJALANKAN WHAFF REWARDS

Ada beberapa cara agar bisa mendapatkan uang dari Whaff baik melalui Whaff Picks, Premium Picks dan Attandance.
PREMIUM PICKS : Dalam premium picks kamu bisa menemui aplikasi dan game yang memberikan komisi ganda, tak hanya download yang dibayar, kamu juga dibayar untuk menjalankan aplikasi selama satu menit sehari, tidak menghapus aplikasi dari Android juga akan dibayar perhari sampai jangka waktu tertentu. Selengkapnya : Cara menjalankan Whaff

WHAFF PICKS : Berisi kumpulan aplikasi dan game yang akan memberi komisi dengan nominal dolar berbeda-beda.

ATTENDANCE : Dapatkan uang 0,01 Dolar setiap hari hanya dengan membuka aplikasi Whaff minimal 1 kali sehari, komisi dari Attendance / Kehadiran ini berlaku selamanya saat kamu masih menggunakan Whaff. Cara menggunakan menu ini lihat pada : Cara dapat 0,01 dolar tiap hari dari Whaff Attendance.

LAIN LAIN : Masih ada beberapa cara untuk menghasilkan uang dari whaff seperti menu pada SupersonicAds, Metaps, Friend Invite, dan Radium One, Whafflist (Luckypicks)

MENGAMBIL PEMBAYARAN WHAFF

Jika saldo dalam akun Whaff kamu sudah mencapai minimal 10,5 Dolar, maka kamu bisa mengambilnya dalam bentuk uang tunai ataupun dalam bentuk Vocher hadiah. Cara pengambilan uang di Whaff adalah sebagai berikut :
1. Buka Whaff, lalu pilih menu Pembayaran (Payment).
2. Pilih Paypal.
3. Kemudian pilih nominal yang dikendaki sesuai dengan saldo Whaff kamu, selanjutnya masukkan Email Paypal, dan klik Permintaan.
4. Uang akan terkirim dalam waktu 2 sampai 4 hari kerja.

Pengenalan Javascript

Disini kita hanya memberikan ulasan singkat. Bahwa ada sesuatu yang tidak bisa dilakukan oleh VBScript dan bisa dilakukan oleh JavaScript.

Ada perbedaan mendasar antara JAVA dan JavaScript. Keduanya bukan merupakan produk yang berasal dari perusahaan yang sama. JAVA dikembangkan oleh Sun Microsystem, sedangkan JavaScript oleh Netscape, yang juga dikatakan sebagai LiveScript. Kita belajar JavaScript karena script inilah yang disupport oleh Netscape dan Internet Explorer, dikarenakan sebelum versi browser Netscape terbaru, Netscape hanya mensupport JavaScript. Disini ada perbandingan antara IE (Internet Explorer) dengan Netscape tentang support dari JavaScript.

Tentang cara penulisan dari JavaScript mirip dengan VBScript. Sintaks penulisannya adalah sbb:

<HTML>
<HEAD>
<TITLE> Web Programming </TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
<!– … (JavaScript diletakkan disini.) –>
</SCRIPT>
</HEAD>
<BODY>
…( HTML dokumen)
</BODY>
</HTML> 

Untuk JavaScript ada beberapa sifat yang harus diperhatikan, yaitu:

– penulisannya adalah bersifat case-sensitive (memperhatikan perbedaan huruf besar dan kecil.)
– Setiap perintah harus diakhiri dengan tanda titik koma (;)
– Spasi tidak berlaku disini.
– Digunakan petik satu dan petik dua.
– Digunakan backslash (\) sebagai fungsi dari string.
– Digunakan tanda // untuk memberikan komentar dan setiap string yang dimulai dengan tanda itu tidak akan diikutkan dalam pemrograman.
– Penggunaan variabel tidak boleh kata-kata yang dipakai oleh JavaScript

sekian ulasan dari saya sekian dan trima kasih🙂

Pengenalan jQuery

jQuery adalah sebuah library atau framework javascript yang berfungsi untuk membuat script didalam sebuah halaman web sehingga halaman akan tampil dinamis dengan adanya tambahan – tambahan animasi maupun manipulasi pada suatu elemen website. banyak sekali sekarang bertebaran framework javascript, namun dari setiap framework tersebut ada kelebihan maupun kelemahan dan juga yang paling penting itu adalah fungsi spesifik dari framework tersebut . misalnya DOjo, prototype,ext-js,jQuery dsb..nah smwa ntu berbeda tetapi masih tetap dalam satu lingkup bahasa pemrograman javascript. disini jquery,dojo,prototype lebih di tekankan pada sebuah bahasa scripting browser, atau bahasa yang berjalan pada browser, yang biasanya di gunakan untuk mempercantik halaman web dengan tambahan efek animasi dsb.  kalau saya lebih cenderung memakain jQuery karena lebih pas aja makenya..dan mudah di pelajari. disini saya sering memakai jquery guna untuk mempercantik web, membuat animasi web, mempercepat proses load page web dengan menggunakan konsep ajax yang di gabung dengan script jQuery dsb..pokoknya power full dah. mungkin itu penjelasan dari jQuery itu sendiri, selanjutnya saya akan berbagi tentang bagaimana cara memakai jQuery.

1. buat file index.html/index.php pada folder project. fungsi dari index adalah file yang di gunakan untuk meload  page di awal.

2.download jQuery, sekarang jQuery sudah sampai versi 1.7 bla bla…

3.sambung kan kedua file tersebut. kita tinggal panggil file jQuery didalam file index.”<script type=”text/javascript” src=”jQuery”></script>”.

nah selanjutnya peralatan kita telas selesai. sekarang cara untuk mengimplementasikannya .
4.disini saya akan memberikan contoh pemakaian unsur2 jQuery. unsur-unsur jQuery dapat dillihat di jQuery nah nanti di situ terdapat pilihan dari CORE sampai INternals . itu semua merupakan unsur-unsur jQuery,

5.bla bla bla kok nglantur sana sini he..

6.to the point dah..

nah dengan melihat source code tersebut maka kita bisa melihat peranan dari jQuery.
baris pertama
<script  type=”text/javascript” src=”jQuery.js”></script>
ini merupakan pemanggilan jQuerynya sehingga siap pakai.
baris kedua

<script  type=”text/javascript” >

$(document).ready(function(){
var tombol = $(‘button’);
var kotak = $(‘div’);

tombol.click(function(){

kotak.css({“background-color”:”red”}).animate({marginLeft: ’200px’},1000).fadeOut(2000);

});

});

</script>

adalah script dari jQuery nya. di sini sudah terdapat CORE jQuery, EVENT jQuery, CSS jQuery, EFFECT jQuery. kesemuanya itu adalah unsur – unsur pendukung jQuery. jadi mengulang penjelasan di atas kita harus pelajari semua unsur jQuerynya.

baris ketiga dan yang terakhir

<button>click</button>

<div></div>

inilah elemen HTML yang digunakan di dalam pengimplementasian dari jQuery. dan nantinya elemen-elemen tersebut akan terisi script javascript(jQuery), guna memanipulasi elemennya.

7. tips saya jangan pntang menyerah. jQuery mudah di pelajari. kita tinggal perdalam unsur – unsur jQuery, ,semua ada di

http://api.jquery.com/browser/

sekian dan terima kasih..

Fitur Fitur Bootstrap

Langkah-langkah yang dibutuhkan untuk menggunakan Bootstrap pada website yang akan kita kembangkan sangatlah sederhana. Sederhananya, penggunaan Bootstrap dapat dicapai dengan tiga langkah singkat, yaitu:

  1. Download Bootstrap pada website resminya.
  2. Lakukan ekstraksi file zip hasil download, dan
  3. masukkan CSS Bootstrap pada file HTML anda.

Sangat sederhana, dan begitu selesai memasukkan Bootstrap pada file HTML, anda akan dapat melihat perubahan pada elemen-elemen HTML yang ada, tanpa harus melakukan apapun. Penasaran? Mari kita lihat langkah detil untuk menggunakan boostrap pada sebuah HTML sederhana.

Langkah 1: File HTML Awal

Untuk mulai melihat bagiamana Bootstrap memberikan fitur-fitur rancangan antarmuka indah ke halaman website, kita akan membuat sebuah file HTML sederhana terlebih dahulu. Buat sebuah file HTML, dan isikan file tersebut dengan kode berikut:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset=”UTF-8″>
  5.     <title>Sebuah file HTML Sederhana</title>
  6. </head>
  7. <body>
  8. <h1>File HTML</h1>
  9. 10.     <p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser</i>.</p>
  10. 11.
  11. 12.     <blockquote>
  12. 13.         Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
  13. 14.         <small>Lao Tzu</small>
  14. 15.     </blockquote>

16. </body>

17. </html>

Simpan file dengan nama bootstrap.html, dan buka file HTML yang baru dibuat pada browser. Sampai titik ini, halaman HTML kita akan memiliki tampilan seperti berikut:

 

Checkpoint: Sampai titik ini, kita telah memiliki sebuah file HTML, yaitu bootstrap.html.

Langkah 2: Download dan Ekstrak Bootstrap

Untuk menggunakan Boostrap pada aplikasi kita, tentunya kita harus memiliki Bootstrap terlebih dahulu. Buka website resmi Bootstrap, http://twitter.github.io/bootstrap/, dan klik tombol “Download Bootstrap” untuk memulai download Bootstrap.

 

Selesai download, anda akan memiliki file bootstrap.zip yang berisi file-file yang dibutuhkan untuk menggunakan Bootstrap. Ekstrak file tersebut pada tempat yang sama denganbootstrap.html, sehingga sekarang kita memiliki file seperti berikut:

 

dengan isi dari masing-masing direktori yaitu:

  • Direktori “css” memiliki empat buah file di dalamnya, yaitu:
    1. bootstrap.css
    2. bootstrap.min.css
    3. bootstrap-responsive.css
    4. bootstrap-responsive.min.css
  • Direktori “img memiliki dua buah file di dalamnya, yaitu:
    1. glyphicons-halflings.png
    2. glyphicons-halflings-white.png
  • Direktori “js” memiliki dua buah file di dalamnya, yaitu:
    1. bootstrap.js
    2. bootstrap.min.js

Jika seluruh file yang ada telah sama, maka kita telah siap menggunakn Bootstrap!

Checkpoint: Sebelum masuk ke langkah selanjutnya, pastikan file yang ada pada direktori percobaan anda telah sama dengan daftar file yang ada di atas.

Langkah 3: Memasukkan Bootstrap ke dalam HTML

Langkah terakhir sangat sederhana, karena kita hanya perlu memasukkan CSS Bootstrap ke dalam file bootstrap.html, dan kita dapat langsung melihat perubahan yang dibuat oleh Bootstrap.

Buka file bootstrap.html dan tambahkan kode berikut sebelum baris ke 6 (</head>):

  1. <link rel=”stylesheet” href=”css/bootstrap.css”>

Catatan: file bootstrap.css merupakan file CSS yang belum dikompilasi, dan digunakan hanya pada tahap pengembangan untuk mempermudah debugging. Jika ingin menggunakan Bootstrap pada website produksi yang akan benar-benar dikunjungi pengguna, disarankan untuk menggunakan bootstrap.min.css untuk meminimalkan download pengguna.

sehingga isi dari file bootstrap.html menjadi seperti berikut:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset=”UTF-8″>
  5.     <title>Sebuah file HTML Sederhana</title>
  6.     <link rel=”stylesheet” href=”css/bootstrap.css”>
  7. </head>
  8. <body>
  9. 10.     <h1>File HTML</h1>
  10. 11.
  11. 12.     <p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser</i>.</p>
  12. 13.
  13. 14.     <blockquote>
  14. 15.         Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan     lakukan hal besar ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
  15. 16.         <small>Lao Tzu</small>
  16. 17.     </blockquote>

18. </body>

19. </html>

kemudian buka kembali bootstrap.html pada browsr, dan kita dapat langsung melihat perubahan pada halaman, terutama pada font dan posisi dari kutipan Lao Tzu:

 

Ya, dengan hanya menambahkan satu baris kode saja halaman web anda telah dipermak secara otomatis oleh Bootstrap! Selanjutnya, kita akan mencoba beberapa fitur-fitur lain dari Bootstrap.

Fitur Bootstrap: Layout

Salah satu hal yang menjadi momok bagi para pengembang web ialah menyusun layout dengan rapi. Untuk menyusun elemen-elemen dengan rapi, biasanya pengembang harus mengerti konsep-konsep yang kompleks pada CSS: float, box model, positioning, dan lainnya. Untungnya, Bootstrap menyediakan banyak class CSS standar yang dapat digunakan untuk menyusun elemen-elemen dokumen HTML dengan rapi dan mudah. Agar tidak membuang-buang waktu, mari kita lihat fitur Bootstrap untuk layout!

Penampung Halaman

Umumnya sebuah halaman website memiliki bagian penampung utama yang berisikan keseluruhan konten website tersebut. Bagian penampung digunakan untuk membatasi lebar dokumen, sehingga konten pada website masih dapat dibaca dengan mudah. Gambar berikut memperlihatkan area konten dari beberapa website:

 

Membuat penampung seperti website di atas merupakan pekerjaan yang sangat mudah dengan menggunakan Bootsrap. Kita cukup “membungkus” elemen-elemen dokumen ke dalam sebuah div dengan atribut class bernilai container. Langsung saja, bungkus seluruh kode HTML yang ada di dalam body pada bootstrap.html ke dalam elemen div, sehingga isi daribootstrap.html menjadi seperti berikut:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset=”UTF-8″>
  5.     <title>Sebuah file HTML Sederhana</title>
  6.     <link rel=”stylesheet” href=”css/bootstrap.css”>
  7. </head>
  8. <body>
  9. 10.     <div class=”container”>
  10. 11.         <h1>File HTML</h1>
  11. 12.
  12. 13.         <p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser</i>.</p>
  13. 14.
  14. 15.         <blockquote>
  15. 16.             Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
  16. 17.             <small>Lao Tzu</small>
  17. 18.         </blockquote>
  18. 19.     </div>

20. </body>

21. </html>

Seperti biasa, buka bootstrap.html pada browser untuk melihat bagaimana elemen-elemen HTML sekarang memiliki batas lebar dan berada di tengah browser (klik gambar untuk memperbesar).

 

Baris dan Kolom

Desain dari sebuah halaman HTML seringkali dikembangkan dengan menggunakan pembagian kolom, yang dikenal dengan nama grid system. Untuk mengakomodir hal ini, Bootstrap juga memberikan fitur pembagian halaman ke dalam 12 kolom secara otomatis, dan tentunya kita bebas menentukan lebar kolom yang diinginkan.

Adapun class yang diberikan oleh Bootstrap untuk memasukkan elemen ke dalam kolom ialahspan[jumlahkolom], dengan nilai jumlahkolom adalah 1 sampai 12. Jadi, kita ingin membagi halaman menjadi tiga kolom sama besar, kita dapat menggunakan tiga buah span4 dan mengisikan konten di dalam penampung span4 tersebut. Elemen-elemen kolom sendiri harus ditampung di dalam sebuah class dengan nilai row. Singkatnya, dengan menggunakan Bootstrap, kita dapat menyusun elemen-elemen halaman dalam baris dan kolom dengan rapi.

Untuk memudahkan pengertian, mari kita langsung praktekkan saja dengan menambahkan elemen tiga kolom ke dalam bootstrap.html! Tambahkan kode berikut tepat setelah</blockquote> pada bootstrap.html:

  1. <div class=”row”>
  2.     <div class=”span4″>
  3.         <h2>Kolom Pertama</h2>
  4.         <p>Kolom pertama pada baris pertama yang memiliki lebar 4.</p>
  5.     </div>
  6.     <div class=”span4″>
  7.         <h2>Kolom Kedua</h2>
  8.         <p>Kolom kedua pada baris pertama yang memiliki lebar 4.</p>
  9.     </div>
  10. 10.     <div class=”span4″>
  11. 11.         <h2>Kolom Ketiga</h2>
  12. 12.         <p>Kolom ketiga pada baris pertama yang memiliki lebar 4.</p>
  13. 13.     </div>

14. </div>

dan buka bootstrap.html pada browser untuk melihat bagaimana kita telah membagi isi dari konten pada baris tersebut pada halaman web:

 

Selanjutnya, kita dapat menambahkan baris sebanyak yang diinginkan untuk mengorganisasikan elemen-elemen halaman sesuai dengan kemauan kita. Misalnya, kita dapat menambahkan baris baru dengan pembagian elemen yang berbeda setelah kode di atas, seperti berikut:

  1. <div class=”row”>
  2.     <div class=”span8″>
  3.         <h2>Kolom Pertama</h2>
  4.         <p>Kolom pertama baris kedua, yang memiliki lebar 8. Lorem ipsum dolor sit amet. Lorem nec dapibus egestas sit cursus. Urna dictumst?</p>
  5.     </div>
  6.     <div class=”span4″>
  7.         <h2>Kolom Kedua</h2>
  8.         <p>Kolom kedua baris kedua, yang memiliki lebar 4.</p>
  9. 10.     </div>

11. </div>

yang akan menghasilkan halaman seperti berikut jika dibuka pada browser:

 

Tentunya masih terdapat banyak fitur-fitur untuk menyusun elemen pada Bootstrap, misalnya fitur responsive design. Karena tulisan ini hanya merupakan pengenalan, kita tidak akan mebahas fitur-fitur lain secara mendalam. Jika penasaran, anda dapat membaca dokumentasi Bootstrap mengenai hal ini.

Komponen Antarmuka

Selain penyusunan elemen konten dokumen web dengan mudah, hal lan yang dibutuhkan oleh banyak pengembang web ialah komponen-komponen antarmuka yang umum ditemui dalam sebuah website. Misalnya, karena sebuah website dinamis telah menjadi hal yang lumrah, hampir semua website sekarang akan membutuhkan elemen navigasi untuk membantu pengunjung website menelusuri konten yang ada di dalam web. Sebuah tombol juga seringkali kita temui, baik yang digunakan untuk navigasi maupun untuk hal-hal lainnya.

Untungnya, Bootstrap menyediakan banyak komponen-komponen dasar yang dapat kita gunakan. Misalnya, untuk membuat menu website, kita cukup menuliskan kode HTML sesuai dengan aturan yang diberikan bootstrap pada dokumentasinya, dan secara otomatis kita akan mendapatkan menu yang cukup bagus.

Mari kita coba lihat tampilan menu standar dari Bootstrap. Tambahkan kode berikut tepat setelah <body>:

  1. <div class=”navbar”>
  2.     <div class=”navbar-inner”>
  3.         <a class=”brand” href=”#”>BootstrapTest</a>
  4.         <ul class=”nav”>
  5.             <li class=”active”><a href=”#”>Utama</a></li>
  6.             <li><a href=”#”>Menu1</a></li>
  7.             <li><a href=”#”>Menu2</a></li>
  8.         </ul>
  9.     </div>

10. </div>

untuk menambahkan sebuah menu sederhana di atas seluruh elemen konten, seperti berikut:

 

Contoh lain lagi, kita dapat menambahkan tombol dengan memberikan class yang tepat pada elemen button. Tambahkan kode berikut tepat setelah <h1>File HTML</h1>:

  1. <p>
  2.     Contoh tombol-tombol yang disediakan oleh Bootstrap:
  3. </p>
  4. <p>
  5.     <button class=”btn btn-danger”>Tombol Merah</button>
  6.     <button class=”btn btn-primary”>Tombol Biru</button>
  7.     <button class=”btn btn-success”>Tombol Hijau</button>
  8. </p>

Pengenalan Bootstrap

Apa itu Bootstrap?
Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.

Bootstrap juga memudahkan pengaturan website bagi mereka yang kurang mahir coding atau tidak punya waktu banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.

Misalkan dulu untuk menambahkan menubar di blogspot, maka Anda perlu menyisipkan file CSS, HTML bahkan JavaScript untuk effect tertentu. Kemudian ketika Anda ingin menambahkan dropdown menu, maka per widget, paling tidak Anda butuh menambahkan CSS dan HTML lagi. Belum lagi jika ingin lebih menarik akan dibutuhkan javascript tambahan. Begitu seterusnya setiap penambahan widget selalu dibutuhkan banyak kode. Tapi setelah instalasi bootstrap, Anda hanya perlu menambahkan kode HTML nya saja.

Tapi…  Penggunaan bootstrap kadang membuat kita jadi kurang kreatif, Coding yang sudah di buatkan oleh pengembang membuat desain web kita terbatas. Sebenarnya kita masih bisa tambahkan CSS manual pada elemen-elemen bootstrap untuk mempercantiknya, tapi jelas ini membuat web kita nanggung. Menambahkan CSS manual sama saja kembali ke cara lama.

Jadi, pilihan Anda apakah akan mengikuti perkembangan jaman bersama bootstrap, editing dan kelola website secara instan. Atau lebih suka oprek template sendiri berkutat dengan kode CSS yang Anda susun-susun sendiri.

Pengenalan CSS

Baiklah kali ini saya akan memperkenalkan apa itu CSS.

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.[1]

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Daftar isi

  • 1 Sejarah CSS
  • 2 Versi
  • 3 Penulisan4 Sifat CSS
    • 3.1 Inline Style Sheet
    • 3.2 Embedded Style Sheet
  • 5 Fakta Menggunakan CSS
  • 6 Contoh Berkas CSS
  • 7 Referensi
  • 8 Pranala luar

Sejarah CSS

Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.[3]

Versi

Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Penulisan

Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:

h1 {
    color: #0789de;
   }

Bagian pertama sebelum tanda ‘{}’ dinamakan selector, sedangkan yang diapit oleh ‘{}’ disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.

Selain itu ada tiga metode penulisan CSS atribut, yaitu :

Inline Style Sheet

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.

Contoh penulisan CSS dengan metode Inline Style Sheet :

<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
 
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
 
<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>

Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh penggunaan CSS dengan metode Embedded Style Sheet :

<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
 
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>

Sifat CSS

Ada dua sifat CSS yaitu internal dan eksternal.Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.

Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.

Fakta Menggunakan CSS

Fakta Menggunakan CSS diantaranya :

  • Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
  • Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
  • Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
  • Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
  • Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
  • CSS adalah layouting “Masa Depan” dengan penggabungan bersama XHTML.

Contoh Berkas CSS

<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
 
<body>
 
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
 
</body>
</html>

Sumber http://Wikipedia.org

Form Dan Input HTML

FORM DAN INPUT HTML
Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web.
Pengguna web dapat memasukkan input melalui halaman-halaman HTML.
Elemen/ TAG ini digunakan membatasi input. Dalam satu form dapat terdiri atas
beberapa form, akan tetapi hanya satu form yang dapat dikirim ke server dalam
satu saat.
Form ini tidak dapat berbentuk nested.
Sintaks:
<FORM ACTION=”_url_” METHOD=”get|post” ENCYPE=””>
</FORM
Atribut ACTION tempat menspesifikasikan URL yang akan digunakan sebagai
pemroses field input form.
URL adalah lokai dokumen yang akan melakukan proses terhadap input dari
form.
Method
Atribut yang digunakan untuk menyatakan bagaimana masukan-masukan berasal
dari form dikirimkan kepada program CGI.
Jenis Masukan dalam Form
Jenis masukan dalam satu formulir dibedakan menjadi:

  • Text, digunakan untuk memasukkan suatu nilai untuk dikirimkan kepadaserver. Nilai yang dimasukkan dapat berupa angka ataupun teks.
  •  Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.
  •  Check box, menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih.
  •  List, menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu.
  •  Button, digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form.

 

Ada bermacam-macam button.

  1.   Submit: digunakan untuk memanggil url, setelah input selesai dimasukkan.
  2.  Reset: digunakan untuk menginisialisasi setiap elemen form.
  3. Button: digunakan untuk membuat form lebih interaktif, untuk memanggil script yang ada di dalam dokumen htmls.
  •   Image, digunakan sebagai pengganti button, berupa button yang berbentuk gambar.
  • Text area, digunakan untuk memasukkan data dalam bentuk teks berupa memo.

Setiap jenis masukan dalam form mempunyai tag-tag sendiri dengan masngmasing
atributnya.
Tag Text
<input type=”text” name=”var1” size=# maxlength=#>
Value pada atribut size menunjukkan besar text box.
Value pada atribut maxlenght menunjukkan jumlah karakter maksimum yang
ditampung.
Tag Radio
<input type=”radio”> Pilihan 1
<input type=”radio”> Pilihan 2
<input type=”radio”> Pilihan 3
Tag Checkbox
<input type=”checkbox”> Pilihan 1
<input type=”checkbox”> Pilihan 2
<input type=”checkbox”> Pilihan 3
Tag Select
<select size=2>
<option> Pilihan 1
<option> Pilihan 2
<option> Pilihan 3
</select>
Value pada atribut size digunakan untuk menampilkan pilihan pada list lebih dari
satu. Default adalah satu pilihan, secara otomatis maka list berupa list box.
Tag Button
<input type=”submit”>
<input type=”reset”>
Tag image
<input type=”image” src=url_image”>
Text Area
<textarea cols=”55” rows=”5”></textarea>
Pada setiap elemen dapat diberikan nama, dengan memberikan atribut Name,
dengan value berupa string yang mendefinisikan nama elemen. Dalam
pemrograman sering disebut nama variabel. Nama variabel tersebut sebaiknya
mencerminkan fungsi dari variabel tersebut.
Contoh-contoh input
Field Text
<html>
<body>
<form>
Nama Depan:
<input type=”text” name=”firstname”>
<br>
Nama Keluarga :
<input type=”text” name=”lastname”>
</form>
</body>
</html>
Check Box
<html>
<body>
Saya suka buah:
<form>
<input type=”checkbox” name=”tomat”> Tomat
<br>
<input type=”checkbox” name=”apel”> Apel
</form>
</body>
</html>
Tombol Radio
<html>
<body>
<form>
<input type=”radio” checked name=”sex”> Laki-laki
<input type=”radio” name=”sex”> Perempuan
</form>
<p> Pada saat seorang pemakai meng-klik pada sebuah tombol radio,
tombol menjadi ditandai dan seluruh tombol lainnya dengan nama
yang sama menjadi tidak ditandai </p>
</body>
</html>
<html>
<body>
<form>
<input type=”radio” checked name=”sex”> Laki-laki <br>
<input type=”radio” name=”sex”> Perempuan <br>
<input type=”radio” checked name=”usia”> Dewasa <br>
<input type=”radio” name=”usia”> Anak-anak
</form>
</body>
</html>
Dropdown box sederhana
<html>
<body>
Merek mobil yang anda suka :
<form>
<select name=”cars”>
<option value=”volvo”> Volvo
<option value=”saab”> Saab
<option value=”fiat”> Fiat
<option value=”audi”> Audi
</select>
</form>
</body>
</html>
<html>
<body>
Merek mobil yang anda suka :
<form>
<select name=”cars”>
<option value=”volvo”> Volvo
<option value=”saab”> Saab
<option value=”fiat” selected> Fiat
<option value=”audi”> Audi
</select>
</form>
</body>
</html>
Text Area
<html>
<body>
<p> Ino contoh menggunakan text area untuk memasukkan data berupa
komentar atau pun catatan lainnya, bersifat mirip artikel. </p>
<form>
<textarea rows=”10” cols=”30”> Anak-anak sedang bermain di
halaman.
</textarea>
</form>
</body>
</html>
Tombol
<html>
<body>
<form>
<input type=”button” value=”Hello world!”>
</form>
</body>
</html>
Field sekitar data
<html>
<body>
<fieldset>
<legend>
Informasi Kesehatan :
</legend>
<form>
Tinggi <input type=”text” size=”3”>
Berat <input type=”text” size=”3”>
</form>
</fieldset>
<p> Jika tidak ada border maka browser anda versinya terlalu tua!
</p>
</body>
</html>