Monday, December 3, 2012

Makalah Web Statis


MAKALAH
“Pengenalan Javascript, JQUERY, AJAX, CSS”
Di susun guna memenuhi Tugas Mata Kuliah Web Statis
Semester Satu (Ganjil) Tahun Ajaran 2011/2012


 


Di susun Oleh :
Nama : M. Tomi Kurniawan
NIM : 12121148
Prodi : Teknik Informatika

STMIK EL RAHMA YOGYAKARTA

 

Kata Pengantar
Alhamdulillah, Puji syukur kehadirat Allah SWT yang senantiasa melimpahkan rizqi, hidayah dan kesehatan kepada kita semua, sholawat serta salam tidak lupa kita panjatkan kepada junjungan kita nabi Muhammad SAW yang kita nantikan syafa’atnya di Yaumul Kiamat.
Ada banyak pihak yang telah membantu terwujudnya makalah ini, yang tidak mungkin Penulis sebutkan satu persatu, diantaranya adalah :
1. Bapak dan Ibu yang telah memberikan support dan doa,
2. Ibu Asih Winantu, S.Kom yang telah memberikan bimbingan,
Makalah ini akan menjelaskan beberapa hal dasar yang berhubungan dengan Java Script, JQUERY, AJAX dan CSS. Mulai dari pengenalan, syntax-syntax dasar, implementasi, contoh penggunaan sampai kekurangan dan kelebihan yang dimiliki oleh Java Script, JQUERY, AJAX dan CSS.
Dalam penulisan makalah ini, kami sadar bahwa masih ada banyak kekurangan dan kesalahan, saran dan kritikan dari pembaca yang bersifat membangun Penulis butuhkan guna memperbaiki dan menyempurnakan penulisan makalah di masa yang akan datang.





Penulis,

03 Desember 2012, Yogyakarta


Daftar Isi

Cover ………………………………………………………………………
1
Kata Pengantar .............................................................................................
2
Daftar Isi …………………………………………………………………..
3
BAB I PENDAHULUAN ….......................................................................

a. Latar Belakang ……............................................................................

b. Maksud dan Tujuan ……………........................................................

BAB II POKOK PERMASALAHAN ………………………...…………..

BAB III ISI ………………………………………………………………...

BAB IV PENUTUP ……………………………………………………….

DAFTAR PUSTAKA

















BAB I
PENDAHULUAN

a)   Latar Belakang
Dalam dasawarsa ini perkembangan ilmu komunikasi dan teknologi informasi sangat pesat, hal ini ditandai dengan berkembangnya teknologi internet yang memudahkan maunisa dalam meringankan pekerjaan dan mempermudah dalam berkomunikasii dan saling tukar menukar informasi.
Internet telah menyediakan berbagai faslitas seperti, e-mail, www( world wide web), dan blog. Perkembangan blog pun semakin cepat terbukti dengan semakin banyaknya orang yang menggunakan blog sebagai media informasi dunia maya. Sekarang telah terdapat jutaan blog dengan pertumbuhan yang sangat signifikan.
Dalam pembuatan dan pengembangan web atau blog para web developer memerlukan pengetahuan tentang yang cukup mendalam tentang Java Script, JQUERY, AJAX dan CSS, oleh sebab itu besar harapan penulis agar makalah ini dapat digunakan para pemula dalam membangun sebuah web.
b)   Maksud dan Tujuan
Ada beberapa maksud dan tujuan dalam penulisan makalah ini, diantaranya :
1.      Ingin memperkenalkan web developer pemula tentang Java Script, JQUERY, AJAX dan CSS;
2.      mempermudah orang dalam memahami dan menggunakan Java Script, JQUERY, AJAX dan CSS.




BAB II
POKOK PERMASALAHAN
1.      Java Script
1.1 Apa itu Java Script?
1.2 Apa saja syntax dalam Java Script?
1.3 Bagaimana cara mengimplementasikan Java Script?
1.4 Apa sajakah contoh dari Java Script?
1.5 Apa kekurangan dan kelebihan dari Java Script?

2.      JQUERY
2.1 Apa itu JQUERY?
2.2 Apa saja syntax dalam JQUERY?
2.3 Bagaimana cara mengimplementasikan JQUERY?
2.4 Apa sajakah contoh dari JQUERY?
2.5 Apa kekurangan dan kelebihan dari JQUERY?

3.      AJAX
3.1 Apa itu AJAX?
3.2 Apa saja syntax dalam AJAX?
3.3 Bagaimana cara mengimplementasikan AJAX?
3.4 Apa sajakah contoh dari AJAX?
3.5 Apa kekurangan dan kelebihan dari AJAX?

4.      CSS
4.1 Apa itu CSS?
4.2 Apa saja syntax dalam CSS?
4.3 Bagaimana cara mengimplementasikan CSS?
4.4 Apa sajakah contoh dari CSS?
4.5 Apa kekurangan dan kelebihan dari CSS?

BAB III
ISI
A. Pembahasan
Ø  Java Script
1.1 Apa itu Java Script?
javascriptBagi Anda yang sering berkutat di dunia website, JavaScript tentu sudah tidak asing lagi. Mungkin Anda termasuk orang yang belum mengerti apa itu JavaScript. Berikut sejarah dan penjelasan JavaScript.
Ø Sejarah JavaScript
JavaScript pertama kali diperkenalkan oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript”” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.
Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.
Ø Pengertian JavaScript
JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.
  1. JavaScript adalah bahasa “Scripting”, bukan bahasa pemrograman.
  2. JavaScript didisain untuk membuat halaman HTML menjadi lebih interaktif.
  3. JavaScript biasanya disisipkan langsung pada halaman HTML.
  4. Client Side scripting.
  5. Apakah JavaScript sama dengan Java? TIDAK. JavaScript dan Java sangat berbeda baik itu dari bahasa maupun dari konsep dan disainnya.
  6. JavaScript bersifat Case Sensitive.
1.2 Apa saja syntax dalam Java Script?
1. Pemakaian alert sebagai property window
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.alert("Ini merupakan pesan untuk Anda");
//-->
</SCRIPT>
</BODY>
</HTML>

2. Pemakaian metode dalam objek.
<HTML>
<HEAD>
<TITLE>Skrip JavaScript</TITLE>
</HEAD>
<BODY>
Percobaan memakai JavaScript:<BR>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Selamat Mencoba JavaScript<BR>");
document.write("Semoga sukses!");
//-->
</SCRIPT>
</BODY>
</HTML>
3. Pemakaian prompt
<HTML>
<HEAD>
<TITLE>Pemasukan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nama = prompt("Siapa nama Anda?","Masukkan nama anda");
document.write("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>

1.3 Bagaimana cara mengmiplementasikan Java Script?
JavaScript adalah salah suatu bagian dari bahasa pemrograman Java yang dibuat oleh Sun Microsystem. Javascript adalah bahasa script yang langsung di masukkan ke dalam dokumen HTML, sehingga tidak memerlukan kompiler lain lagi, dan untuk membuat Javascript, adalah dengan menggunakan tag <SCRIPT>, dan memiliki Atribut LANGUAGE untuk menyatakan jenis bahasa script yang digunakan didalam nya.

Perhatikan contoh dokumen HTML sederhana yang meyisipkan JavaScript ke dalamnya :
<HTML>
<HEAD>
<TITLE>Contoh JavaScript Sederhana</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// menuliskan ke layar browser
document.writeln("Javascript pertamaku !");
// kode javascript telah selesai.
</SCRIPT>
</BODY>
</HTML>

Jadi, untuk JavaScript LANGUAGE harus di isi "JavaScript" (lihat contoh di atas). Elemen <SCRIPT> dapat ditulis pada bagian HEAD maupun BODY, sedangkan untuk membuat komentar di dalam kode JavaScript, kita harus menggunakan // (slash), seperti contoh :
//Ini adalah komentar penjelasan kode
Elemen <SCRIPT> juga memiliki atribut SRC yang digunakan untuk menunjuk file terpisah dari lokasi lain dengan format file JavaScript (*.js), sehingga dapat disimpan terpisah jauh dari dokument HTML yang menggunakan nya.
Contoh penerapan JavaScript terpisah dari document yang menggunakan nya :
<HTML>
<HEAD>
<TITLE>Contoh Pemakaian File JavaScrip terpisah</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" SRC="http://domain.com/file/nama-file.js"> </SCRIPT>
</BODY>
</HTML> 

Dimana nama-file.js adalah nama file JavaScript yang ingin digunakan, dan di dalam file JavaScript tersebut tidak perlu lagi menggunakan tag <script> atau tag <script language="JavaScript">, jadi langsung saja menuju kode nya, seperti contoh di bawah ini : Isi File : nama-file.js
document.write("Ini adalah hasil Exekusi Kode JavaScript");
1.4 Apa sajakah contoh dari Java Script?
Sebagai pengenalan, ini ada beberapa contoh sederhana kode JavaScript, diantaranya adalah sebagai berikut :
ü JavaScript dapat disisipkan dalam tag HTML dengan menggunakan tag script
<script type="text/javascript">
//Kode Javascript
</script>
</script>
Sama halnya seperti PHP kode yang berada setelah tanda “//” tidak akan di eksekusi. Kode JavaScript dapat dituliskan dibagian head, body atau di tulis pada file external.
ü Kode JavaScript di bagian head
<html>
<head>
<title>javascript di bagian head</title>
<script type="text/javascript">
function sayhi(){
alert('Hi, Aku di eksekusi setelah halaman selesai di load');
}
</script>
</head>
<body onload="sayhi()">
<p>Ini adalah halaman web</p>
</body>
</html>
</script>

ü Kode JavaScript di bagian body
<html>
<head>
<title>javascript di bagian body</title>
</head>
<body>
<script type="text/javascript">
alert("Hi, Aku di eksekusi saat halaman web di load/sebelum halaman selesai di load");
</script>
<p>Ini adalah halaman web</p>
</body>
</html>
</script>
Jika kita perhatikan dari contoh pertama, tulisan “Ini adalah halaman web” akan muncul sebelum “Hi, Aku…” muncul. Berbeda dengan kode yang disisipkan di bagian body, “Hi, Aku…” akan muncul sebelum “Ini adalah halaman web” muncul di halaman web. Wokoke begitulah kira-kira perbedaan penempatan skrip.
Kode JavaScript yang tersimpan di file external ber-ekstensi .js dan dapat dipanggil di bagian head atau body dengan menyertakan source dari file eksternal JavaScript tersebut. Keuntungan dari penulisan secara eksternal ini, kita dapat menjalankan JavaScript pada halaman yang berbeda tanpa harus menulis ulang skrip di setiap halaman.

ü Contoh kode JavaScript yang disimpan file eksternal:
//fungsi ini di panggil setelah halaman selesai di load
window.onload = function(){
alert(’Hi, Aku berasal dari file external sayhi.js’);
}
Kemudian kita simpan file tersebut sebagai sayhi.js. Untuk memanggil kode tersebut  sisipkan source JavaScript dalam tag HTML seperti berikut:
<html>
<head>
<title>javascript di bagian head</title>
<script type="text/javascript" src="sayhi.js"></script>
</head>
<body>
<p>Ini adalah halaman web</p>
</body>
</html>
</script>
Penulisan src=”sayhi.js” pada contoh diatas harus sesuai dengan file kode JavaScript disimpan. Jika file disimpan dalam folder js, src ditulis menjadi src=”js/sayhi.js”.
1.5 Apa kekurangan dan kelebihan dari Java Script?
v  Kelebihan Javascript
1. Ukuran file kecil
Script dari javascript memiliki ukuran yang kecil sehingga ketika web yang memiliki javascript ditampilkan di browser maka akses tampilannya akan lebih cepat dibandingkan ketika browser membuka suatu web yang memiliki script java. Hal ini juga sangat berkepentingan dengan daya kerja server. Semakin kecil space suatu web yang disimpan dalam suatu server maka daya kerja server ketika di browsing oleh user di internet akan tidak terlalu berat, selain itu sifat javascript client side yang tidak perlu lagi di olah oleh server ketika browser memanggil web dari sebuah server.
2. Mudah untuk dipelajari
Javascript merupakan bahasa semi pemograman yang merupakan gabungan antara bahasa pemograman java dengan bahasa kode HTML sehingga disebut bahasa hybrid. Walaupun javascript merupakan turunan dari java namun javascript tidak memiliki aturan yang serumit java.
3. Terbuka
Javascript tidak terikat oleh hardware maupun software tertentu bahkan system operasi seperti windows maupun unix. Karena ia bersifat terbuka, maka ia dapat dibuat maupun di baca di semua jenis komputer.
v  Kekurangan Javascript
1. Script tidak terenkripsi
Karena javascript bersifat client side, maka script yang kita buat di text editor dan telah dijadikan web di server, ketika user merequest web dari server tersebut maka sintak javascript akan langsung ditampilkan di browser. User bisa melihat dan menirunya dari sourcenya.
2. Kemampuan terbatas
Walaupun javascript mampu membuat bentuk web menjadi interaktif dan dinamis, namun javascript tidak mampu membuat program aplikasi sendiri seperti java.
3. Keterbatasan Objek
Javascript tidak mampu membuat kelaskelas yang bisa menampung objekobjek tambahan seperti java karena javascript teleh memiliki objek yang builtin pada sturktur bahasanya.

Ø  JQUERY
2.1 Apa itu JQUERY?
jQuery adalah javascript library, jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai
HTML, CSS dan Javascript. Library jQuery mempunyai kemampuan :
• Kemudahan mengakses elemen-elemen HTML
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• Menyederhanakan kode javascript lainnya
Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js dari situs http://www.jquery.com. Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda.
<script type="text/javascript" src="jquery.js"></script>
sekarang mari kita lihat contoh sederhana pemograman dengan menggunakan jquery. Kode 12. hello world jquery
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>


2.2 Apa saja syntax dalam JQUERY?
Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih.
Sintaks :
$(selector).action()
• Tanda dollar, untuk mendefinisikan jQuery
• (selector), untuk menunjukkan elemen yang dipilih atau dituju
• action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.
Contoh :
$(this).hide()
– menyembunyikan elemen saat ini
$("p").hide()
– menyembunyikan semua paragraf atau konten dari tag <p>
$(".test").hide()
– menyembunyikan elemen yang mempunya class=”test”
$("#test").show()
– menampilkan elemen yang mempunyai id=”test”
Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca ataumemanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen.
$(document).ready(function(){
//kode anda di sini
});
Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di load semuanya. Atau dengan kode javascript biasanya seperti ini :
window.onload = function(){ //kode anda di sini }
Sekarang mari kita lihat pada contoh
$(".tombol1").click(Kode $(“.tombol1″) adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class=”tombol1” untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh karena $() untuk membuat objek  jQuery. Kemudian kita tambahkan fungsi click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=’tombol1’). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class=”tombol1” diklik maka lakukan fungsi $(“p”).hide(1000);
function(){
$("p").hide(1000);
});

2.3 Bagaimana cara mengimplementasikan JQUERY?
Implementasi jQuery
Kemudahan atau kenapa orang banyak menggunakan framework javascript ini adalah karena banyaknya plugin aplikasi yang siap jadi atau siap digunakan. Plugin adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan dalam pembangunan sebuah website.
Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, diantaranya:
Ø  Drop-Down-Menu
Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu tersebut ada sub menu lagi, maka cocok menggunakan drop down menu. Drop down menu ini juga mendukung multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu menu dropdown ini juga dilengkapi dengan fasilitas timeout effect. Timeout effect ini digunakan ketika lama waktu mouse over atau mouse out.
       Web Sitenya: http://javascript-array.com
Ø  Tool-Tips
Tool tips adalah bubble/gelembung atau semacam kotak informasi digunakan untuk menginformasikan sesuatu ketika mouse didekatkan pada sebuah teks, gambar, tombol atau elemen lain dalam sebuah web yang muncul diatas elemen tersebut. Biasanya informasi yang disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika mouse didekatkan, maka akan muncul bubble. Fasilitas lebih dari bubble ini adalah desainnya yang cantik, seperti fasilitas tombol close, background shadow, dll.

Ø   Autocomplete-Search
Plugin ini digunakan untuk melakukan pencarian secara real time, dimana ketika kita memasukan kata atau huruf dalam sebuah teks input dalam sebuha web, secara otomatis hasil pencarian akan muncul seusai dengan yang kita masukan secara real time. Plugin ini mirip seperti pencarian pada website facebook, sehingga sangat menarik untuk dicoba.
Web Sitenya: http://loopj.com


Ø   Validasi-Form
Plugin ini digunakan untuk melakukan validasi data dalams sebuah form, seperti pengecekan e-mail, pengecekan password, username dan input lainnya secara real time (tidak menekan tombol submit). Jadi ketika user memasukan teks atau huruf, maka plugin ini akan melakukan validasi terhadap inputan user.
Web Sitenya:
http://www.willjessup.com


Ø  jQuery-Cycle-Plugin
Plugin ini digunakan untuk animasi image dalam sebuah website, plugin ini menggantikan fungsi flash sebagai animasi. Jadi dengan plugin ini, kita bisa menganimasikan image yang ada menjadi sebuah animasi seperti fade in, fade out, slide show, scroll dan banyak lagi efek yang lainnya. Web Sitenya: http://malsup.com
Ø  Teks-Berjalan
Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang kita tampilkan kelihatan menarik, seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke bawah, mirip fungsi marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut dan lebih banyak variasi. Web Sitenya: http://remysharp.com. Dan masih banyak yang lainnya yang bisa dikunjungi di http://www.jqueryplugins.com

2.4 Apa sajakah contoh dari JQUERY?
Ini adalah bentuk bagian dari efect dengan jquery dan untuk JS-nya masih sama dengan posting yang sebelumnya  dan source codenya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
  <style>div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; }  </style>
  <script src="delJsMick.js"></script>
</head>
<body>
  <button id="show">Show Length of Queue</button>
  <span></span>
  <div></div>
<script>$("#show").click(function () {
      var n = jQuery.queue( $("div")[0], "fx" );
      $("span").text("Queue length is: " + n.length);
    });
    function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
    }
    runIt();</script>
</body>
</html>

dan di tambahakan untuk
mengatur kecepatan gerak anda berikut bentuk source codenya :
<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
  <script src="delJsMick.js"></script>
</head>
<body>
  Click here...
  <div></div>
<script>
   $(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).addClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").animate({left:'-=200'},500);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).removeClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").slideUp();
    });</script>
</body>
</html>
memberi fungsi kontrol mulai dan berhenti source codenya sebagai berikut
<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
  <script src="delJsMick.js"></script>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
<script>
   $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).addClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").animate({left:'-=200'},1500);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).removeClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      jQuery.queue( $("div")[0], "fx", [] );
      $("div").stop();
    });
</script>
</body>
</html>

catatan untuk jsnya masih sama dengan yang dipostingan sebelumnya dan simpan dengan satu direktory dimana js-nya tersimpan dalam satu folder yang sama.
2.5 Apa kekurangan dan kelebihan dari JQUERY?
Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya, antara lain:
 Kompatibel dengan hampir seluruh browser
 jQuery telah digunakan oleh website-website raksasa
 Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)
 Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com
 Didukung oleh banyak komunitas
 Disupport oleh plugin yang lengkap
 Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb
 Open source atau Free
 jQuery lebih diminati oleh para developer web saat ini
·       KELEBIHAN :
·       Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang telah ada. Termasuk mempercepat coding javascript dalam sebuah website. Dibandingkan kita harus mulai sebuah script javascript dari nol.
·       Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh penggunaannya, baca di situs http://jquery.com hal ini mempermudah dalam pembelajaran jquery.
·       Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan interaksinya.
·       Website yang dibangun dengan jquery akan lebih interaktif dan menarik.
KEKURANGAN :
·       Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan jquery, alias HTML murni.
·       Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jquery. Pada level tertentu request yang sangat banyak (sangat-sangat banyak) akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.

Ø  AJAX
3.1 Apa itu AJAX?
AJAX adalah singkatan dari Asynchronous JavaScript and XML.
AJAX, terdiri dari HTML, Javascript, DHTML dan DOM yang kemudian digabungkan dengan bahasa pemograman web di sisi server seperti PHP dan ASP, sehingga membentuk suatu aplikasi berbasis web yang interaktif.
AJAX bukanlah bahasa pemograman baru, tetapi adalah teknik baru untuk membuat aplikasi web lebih baik, lebih cepat dan lebih interaktif.
Dengan AJAX, Javascript dapat langsung berkomunikasi dengan server dengan menggunakan objek XMLHttpRequest. Dengan objek ini, javascript dapat melakukan transaksi data denga server web, tanpa harus me-reloading halaman web tersebut secara keseluruhan.
3.2 Apa saja syntax dalam AJAX?
AJAX adalah singkatan dari Asynchronous JavaScript untuk berdiri dan XML dan teknologi ini membantu kami untuk memuat data dari server tanpa refresh browser halaman. Jika Anda baru dengan AJAX, saya akan merekomendasikan Anda pergi melalui Tutorial Ajax kami sebelum melangkah lebih jauh.
JQuery adalah alat yang hebat yang menyediakan kaya set metode AJAX untuk mengembangkan aplikasi web generasi berikutnya. Memuat data sederhana: Hal ini sangat mudah untuk memuat data statis atau dinamis menggunakan AJAX JQuery. JQuery menyediakan metode beban () untuk melakukan pekerjaan:
Sintaks:
Berikut adalah sintaks sederhana untuk metode beban ():
[Pemilih] beban (URL, [data], [callback]);
Berikut ini adalah deskripsi dari semua parameter:
URL: URL dari sumber daya server-side yang permintaan dikirim. Ini bisa menjadi script CGI, ASP, JSP, atau PHP yang menghasilkan data yang dinamis atau keluar dari database.
Data: ini parameter opsional merupakan objek properti yang serial ke parameter benar dikodekan untuk diteruskan ke permintaan. Jika ditentukan, permintaan tersebut dibuat dengan menggunakan metode POST. Jika dihilangkan, metode GET digunakan.
callback: Sebuah fungsi callback dipanggil setelah data respon telah dimuat ke dalam unsur-unsur dari himpunan cocok. Parameter pertama dilewatkan ke fungsi ini adalah teks respon diterima dari parameter server dan kedua adalah kode status.

Contoh:
Perhatikan file HTML berikut dengan coding JQuery kecil:

<html>
<head>
<title> judul </ title>
   <Jenis script = "text / javascript"
   src = "/ jquery/jquery-1.3.2.min.js"> </ script>
   <script type="text/javascript" language="javascript">
   $ (Dokumen) siap (function (). {
      $ ("# Driver"). Klik (function (event) {
          $ ('# Stage') beban ('/ jquery / result.html').;
      });
   });
   </ Script>
</ Head>
<body>
   <p> Klik pada tombol untuk memuat file result.html: </ p>
   <div id="stage" style="background-color:blue;">
          STAGE
   </ Div>
  <input type="button" id="driver" value="Load Data" />
</ Body>
</ Html>
Berikut load () memulai permintaan Ajax ke file URL / jquery / result.html ditentukan. Setelah loading file ini, semua konten akan diisi dalam <div> ditandai dengan tahap ID. Dengan asumsi, / kami jquery / result.html file yang baru saja satu baris HTML:
   <h1> INI ADALAH HASIL ... </ h1>
Ketika Anda mengklik tombol yang diberikan, maka file result.html akan dimuat. Untuk memahami dengan cara yang lebih baik Anda bisa Coba sendiri.
Mendapatkan data JSON:
Akan ada situasi ketika server akan kembali string JSON terhadap permintaan Anda. Utilitas getJSON fungsi JQuery () mem-parsing string JSON kembali dan membuat string yang dihasilkan tersedia untuk fungsi callback sebagai parameter pertama untuk
mengambil tindakan lebih lanjut. Sintaks:
Berikut adalah sintaks sederhana untuk metode getJSON ():
. [Pemilih] getJSON (URL, [data], [callback]);
Berikut ini adalah deskripsi dari semua parameter:
URL: URL dari sumber daya server-side dihubungi melalui metode GET.
Data: Sebuah benda yang sifat berfungsi sebagai pasangan nama / nilai yang digunakan untuk membangun sebuah string query yang akan ditambahkan ke URL, atau string kueri terformat dan encoded.
callback: Sebuah fungsi dipanggil ketika permintaan selesai. Nilai data yang dihasilkan dari respon tubuh mencerna sebagai string JSON dilewatkan sebagai parameter pertama untuk callback ini, dan status sebagai yang kedua.

Contoh:
Perhatikan file HTML berikut dengan coding JQuery kecil:
<html>
<head>
<title> judul </ title>
   <Jenis script = "text / javascript"
   src = "/ jquery/jquery-1.3.2.min.js"> </ script>
   <script type="text/javascript" language="javascript">
   $ (Dokumen) siap (function (). {
      $ ("# Driver"). Klik (function (event) {
          $ GetJSON ('/ jquery / result.json',. Fungsi (jd) {
             $ ('# Stage') html ('<p> Nama:' + jd.name + '</ p>').;
             $ ('# Stage') append ('<p> Usia:' + jd.age + '</ p>').;
             $ ('# Stage') append ('<p> Sex:' + jd.sex + '</ p>').;
          });
      });
   });
   </ Script>
</ Head>
<body>
   <p> Klik pada tombol untuk memuat file result.html: </ p>
   <div id="stage" style="background-color:blue;">
          STAGE
   </ Div>
   <input type="button" id="driver" value="Load Data" />
</ Body>
</ Html>
Berikut utilitas getJSON metode JQuery () memulai permintaan Ajax ke file URL / jquery / result.json ditentukan. Setelah loading file ini, semua konten akan dilewatkan ke fungsi callback yang akhirnya akan diisi dalam <div> ditandai dengan tahap ID. Dengan asumsi, / kami jquery / result.json berkas telah mengikuti konten json diformat:
{
"Nama": "Zara Ali",
"Usia": "67",
"Sex": "perempuan"
}
Ketika Anda mengklik tombol yang diberikan, maka result.json file akan dimuat. Untuk memahami dengan cara yang lebih baik Anda bisa Coba sendiri.
Melewati data ke Server:
Banyak kali Anda mengumpulkan masukan dari pengguna dan Anda lulus bahwa masukan ke server untuk diproses lebih lanjut. JQuery AJAX membuatnya cukup mudah untuk melewatkan data yang dikumpulkan ke server menggunakan parameter data dari setiap metode Ajax yang tersedia.
Contoh:

Contoh ini menunjukkan bagaimana dapat lulus input pengguna untuk script web server yang akan mengirim hasil yang sama kembali dan kami akan mencetaknya:
<html>
<head>
<title> judul </ title>
   <Jenis script = "text / javascript"
   src = "/ jquery/jquery-1.3.2.min.js"> </ script>
   <script type="text/javascript" language="javascript">
   $ (Dokumen) siap (function (). {
      $ ("# Driver"). Klik (function (event) {
          var name = $ ("# nama") val ().;
          $ ("# Stage") beban ('/ jquery / result.php', {"name": name}).;
      });
   });
   </ Script>
</ Head>
<body>
   <p> Masukkan nama Anda dan klik pada tombol: </ p>
   <input type="input" id="name" size="40" /> <br />
   <div id="stage" style="background-color:blue;">
          STAGE
   </ Div>
   <input type="button" id="driver" value="Show Result" />
</ Body>
</ Html>

Berikut adalah kode yang ditulis dalam skrip result.php:

<? Php
if ($ _REQUEST ["name"])
{
   $ Name = $ _REQUEST ['name'];
   echo "Selamat datang". $ Nama;
}
?>
Sekarang Anda dapat memasukkan teks dalam kotak masukan yang diberikan dan kemudian klik "Tampilkan Hasil" tombol untuk melihat apa yang telah Anda masukkan dalam kotak masukan. Untuk memahami dengan cara yang lebih baik Anda bisa Coba sendiri.
3.3 Bagaimana cara mengimplementasikan AJAX?
Contoh implementasi AJAX pada website diantaranya sebagai Auto Suggestion, Auto Completion maupun Combo Menu. Ada juga website yang menggunakan full AJAX yaitu visualjquery, website ini menggunakan Framework JQuery, salah satu teknologi AJAX gratis alias free. Namun disini ada kelemahan yaitu website ini merupakan 1 Single File Java Script yang berukuran sekitar 180-an kb, jadi ketika kita mengakses untuk pertama kalinya akan lama dalam loading website ini, tapi ketika sudah sekali kita load maka untuk selanjutnya akan responsif.
Untuk mempercantik dan memperingan kinerja website yang kalian develope, kebanyakan para pembuat Website (Developer) mengimplementasikan AJAX dalam pengerjaannya, mengapa? karena dengan AJAX pengunjung tidak perlu merefresh seluruh halaman website dengan teknik ini jauh akan lebih menghemat Bandwith hosting dan ringannya website tersebut saat di akses oleh pengunjung. Lalu apa sih AJAX itu sebenarnya? Ajax adalah Singkatan dari Asynchronous JavaScript and XMLHTTP yaitu suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif, melakukan pertukaran data dengan server dibalik layar sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan.
Ada contoh mencoba implementasikan dalam sebuah code.
1. Buat 1 buah file beri nama index.html kemudian isikan seperti dibawah
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>jquery Ajax</title>
<link rel=”stylesheet” type=”text/css” href=”./css/style.css”>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.5.2.min.js”></script> // saya gunakan jquery sebagai framework javascriptnya
<script type=”text/javascript”>
function loading(){ // Tampilkan Loading ketika Ajax berjalan.
$(‘#loading’).ajaxStart(function(){
$(this).fadeIn(400); //jika ajax masih berjalan
}).ajaxComplete(function(){
$(this).fadeOut(400); //hilangkan jika ajax sudah tidak dijalankan
});
}
$(function(){
$(“a”).click(function(){ //ketika Tag a di klik
var file = $(this).attr(‘id’); // ambil isi attribut id

$(“#right_column”).load(file+”.html”,loading); // panggil file dan masukkan ke id right_column
});
$(“#right_column”).load(“home.html”); // ketika pertama kali halaman di buka panggil home.html
});
</script>
</head>
<body>
<div id=”wrap”>
<div id=”header”>
<div>Judul website</div>
<ul>
<li><a href=”#” id=”home”>Home</a></li>
<li id=”scat”><a href=”#” id=”categories”>Categories</a></li>
<li><a href=”#” id=”about”>About us</a></li>
<li><a href=”#” id=”contact”>Contact us</a></li>
</ul>
<div></div>
</div>
<div id=”content”>
<div id=”loading”>Loading…</div> //Tampilkan loading ketika Ajax dijalankan
<div id=”left_column”>
<div>
<h2>Sub box</h2>
<ul>
<li>isi box</li>
<li>isi box</li>
</ul>
</div>
</div>
<div id=”right_column”>  //Response dari ajax akan ditempatkan disini
</div>
<div></div>
</div>
<div id=”footer”>
<a href=”http://www.iso.web.id”>iso.web.id</a> 2011
</div>
</div>
</body>
</html>
kemudian buat 4 buah file masih beri nama home.html, about.html, contact.html dan categories.html isi ke 4 file tersebut sesuai dengan keinginan kalian.
home.html saya isi dengan :
<p>Selamat datang di website saya.</p>
about.html saya isi dengan :
<h2>Tentang saya</h2>
Lorem ipsum dolor sit amet.
contact.html saya isi dengan :
<h2>Kontak kami</h2>
Halaman kontak
categories.html sayan isi dengan
<h2>Kategori</h2>
Lorem ipsum dolor sit amet
keempat file diatas adalah file – file hasil Response yang dipanggil melalui teknik AJAX, apabila file yang di panggil tersebut diketemukan browser akan menampilkan isi dari file-file tersebut.
Bagaimana mudah bukan mengimplementasikan AJAX pada sebuah website, kalian tidak perlu susah payah membuat Javascript murni untuk pengimplementasian AJAX  (Terbentur masalah Cross Browser) , gunakan Framework javascript untuk mempermudah dan memperingan kerja kalian dan yang terpenting Framework javascipt biasanya sudah support Cross Browser (jquery, dojo, Mootools dll).
3.4 Apa sajakah contoh dari AJAX?
Membuat server-side script dengan PHP (HelloAjax.php)
Script PHP inilah yang diminta oleh request XMLHttp sebagai response dalam bentuk format XML yang nanti di-parsing oleh client JavaScript.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< ?php
// Output Dalam bentuk XML
header('Content-Type: text/xml');
// generate XML header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
echo '<response>';
$name = $_GET['name'];
$userNames = array('ANDI', 'SURYA', 'NANA', 'LALA', 'HAKI','PUTRA');
if (in_array(strtoupper($name), $userNames))
    echo 'Halo.. ' . htmlentities($name) . '!';
else if (trim($name) == '')
    echo 'hmm... sapa ya!';
else
    echo htmlentities($name) . ', gak kenal tuh!';
echo '</response>';
?>
Dalam contoh AJAX sederhana ini, ketika user diminta untuk mengetikkan nama user, server selalu mengirim response. Ketika user sedang mengetikkan, server dipanggil secara asynchronous, pada selang waktu tertentu (dalam contoh 1000 ms), sehingga menjelaskan kenapa tidak diperlukannya tombol untuk memberitahukan bahwa kita telah selesai mengetik dan mengirimkannya ke server. Untuk beberapa nama tertentu yang diketikkan, pesan yang ditampilkan pada halaman akan berbeda.
Pesan yang berbeda tersebut terletak di element <div> dengan id=divMessage, jadi ketika response datang kemudian diparsing, maka pesan yang didapat dari response akan ditampilkan di element ini. Sehingga untuk menampilkan suatu bagian dari halaman web yang bersifat dinamis diperlukan element, dalam contoh ini <div>, yang digunakan oleh JavaScript untuk dapat dimanipulasi
3.5 Apa kekurangan dan kelebihan dari AJAX?
Sebagai sebuah teknologi yang terkenal akhir-akhir ini, AJAX tentu memiliki berbagai kelebihan dan kekurangan, karena tidak ada ganding yang tidak retak bukan? Di antara berbagai keuntungan AJAX adalah:
1.         Penggunaan bandwidth: Karena konten HTML dari halaman web dilakukan oleh browser itu sendiri (menggunakan JavaScript yang merupakan bahasa pemrograman client-side), maka halaman web yang dibuat menggunakan AJAX dapat di-load relatif lebih cepat. Selain itu, karena tidak perlu adanya refresh untuk menampilkan data yang lebih barn, maka bandwidth yang diperlukan untuk menampilkan informasi melalui halaman web akan lebih sedikit dibandingkan jika tanpa menggunakan AJAX.
2.         Pemisahan antara data, format, style, dan fungsi: Keuntungan lain dari AJAX adalah pendekatan AJAX membuat programmer untuk memisahkan antara metode dan format yang digunakan untuk penyampaian informasi melalui web. Penyusun halaman web yang dipisahkan antara. lain:
·           Data mentah yang akan ditampilkan yang biasanya dibuat dalam format XML atau bisa juga diletakkan di database server-side.
·           Format atau struktur halaman web. Biasanya dibuat menggunakan HTML atau XHTML yang kemudian diolah menggunakan Dynamic Manipulation di DOM.
·           Elemen style halaman web. Bagian ini mendeskripsikan bagaimana tampilan halaman web, dari mulai font hingga metode penampilan gambar. Style ini biasanya di-embed ke halaman web atau direferensikan melalui file .css (cascading style sheet).
Fungsionalitas halaman web, biasanya terdiri dari JavaScript (DHTML), HTTP standar, komunikasi XMLHttp, dan bahasa pemrograman server-side.
Dengan demikian, mau tidak mau programmer akan menjadi lebih teratur dalam memprogram dan cenderung tidak kacau dalam membuat aplikasi web. Walaupun demikian AJAX juga memiliki beberapa kerugian, seperti:
1.      Integrasi browser: Karena konten halaman menganut prinsip asinkron, di mana data bisa di-update tanpa halaman di-refresh, maka perubahan tampilan tidak tercatat di bagian history dari browser. Jadi ketika Anda mengklik tombol Back, yang muncul bukan tampilan seperti sebelum mengeksekusi kode AJAX, namun malah halaman sebelumnya.
2.      Kekurangan lainnya adalah kesulitan bagi seorang user untuk melakukan bookmark/ favorite pada bagian tertentu dari halaman web.
3.      Waktu respon yang kemungkinan bisa membingungkan user yang tidak berpengalaman menggunakan aplikasi AJAX. Jika setting waktu respon tidak tepat, user bisa mengira halaman yang diaksesnya sedang hang.
4.      Search engine optimization: Karena konten di-generate menggunakan JavaScript, search engine tidak bisa mengindeksnya sehingga mengurangi efektivitas halaman ditinjau dari SEO.
5.      Terlalu mengandalkan JavaScript: AJAX menggunakan JavaScript, yang kadang diimplementasikan secara berbeda di berbagai browser atau verse tertentu dari sebuah browser. Karena. itu sering kale sebuah website yang mengandung JavaScript harus dites menggunakan berbagai jenis browser untuk memastikan tampilannya tidak ada yang salah, begitu juga dengan AJAX. Namun mengingat browser sekarang seperti Mozilla dan IE 7 menggunakan lapisan abstraksi semisal JavaScript Framework, maka kekurangan ini sepertinya bisa ditanggulangi di masa depan.
6.      Alat bantu pemrograman berupa IDE (integrated development environment) untuk JavaScript sangatlah jarang dan langka. Anda bisa menggunakan beberapa tool, seperti Firebug, IE Developer toolbar, dan Venkman.
7.      Termasuk kelemahan JavaScript adalah apabila user men-disable JavaScript di browser-nya, maka AJAX tidak akan bisa digunakan.
8.      Web analytics: Berbagai solusi web analytic biasanya memiliki anggapan bahwa sebuah halaman barn di-loading tiap kali konten di-update ke user. Mengingat AJAX mengubah para-digma seperti ini, maka programmer harus meng-atur peletakan kode web analytic sehingga proses tracking akan lebih baik.
Jadi AJAX cocok digunakan jika Anda ingin membuat aplikasi web yang biasanya memerlukan pergantian lialaman yang terlalu membutuhkan bandwidth atau L rang efisien sehingga ingin disederhanakan I,iliiipannya.
Teknologi AJAX juga memiliki batasan yang harus ilij)erhatikan oleh para programmer ketika membuat I ui laman web berbasis AJAX:
1.      Kode script dan sumber data (baik XML atau plain text) harus berasal dari nama domain yang lama. Hal ini merupakan kebijakan dari browser untuk menghindari adanya masalah security. Namun Anda bisa mengakah hal ini dengan menggunakan skrip server side. Contoh hal ini akan Anda lihat di Bab 4 ketika membuat aplikasi Google Suggest yang merupakan fitur pencarian live search dari Google.
2.      Browser keluaran Microsoft Internet Explorer 5 dan 6 menggunakan ActiveX untuk mengimplementasikan XMLHttpRequest. Walaupun setting default tidak menyebabkan masalah, namun jika settingnya diubah, user bisa tidak dapat mengakses AJAX (tapi ini sudah diperbaiki di browser Internet Explorer 7). Karena itu Anda harus memastikan bahwa user yang hendak membuka halaman web Anda sudah memenuhi persyaratan browser-nya.
3.      Browser-browser tua clan browser khusus (seperti browser di handphone dan lynx) tidak dapat mengakomodasi penggunaan objek XMLHttpRequest, sehingga halaman yang menggunakan AJAX tidak bisa diakses.
4.      Jika pengunjung men-disable JavaScript, halaman dengan kode AJAX tidak akan bisa dilihat.
5.      Perlu waktu bagi user untuk memahami tentang perbedaan AJAX dengan halaman web konvensional.
Ø  CSS
4.1 Apa itu CSS?
CSS (Cascading Style Sheet)
adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
4.2 Apa saja syntax dalam CSS?
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.

CSS Comment

Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
4.3 Bagaimana cara mengimplementasikan CSS?
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:

Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja. Contoh:
<P style=”color:blue”>
Isi paragraf.
</p>
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

Embedded CSS

Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat  menggunakan font berwarna biru.

External CSS

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
1.      Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
2.      p {font-family: arial; font-size: small;}
3.      h1 {color: red; }
4.      Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>

Import CSS

Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";
 
atau
 
@import url("style.css");

Penggunaan Lebih dari Satu Kode CSS

Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt
4.4 Apa sajakah contoh dari CSS?
Bagi kita yang sudah mengerti dan juga memahami bahasa pemrograman (dalam hal ini misalnya adalah tentang CSS), bisa jadi tidak akan merasa kesulitan untuk membuat kode yang akan digunakan sebagai model atau variasi warna gradasi untuk background. Namun bagi kita yang masih awam atau sama sekali belum mengenal bahasa pemrograman, bisa jadi hal tersebut akan menjadi sebuah pekerjaan yang sangat sulit dan bahkan teramat rumit. Sehingga untuk mempermudah Sobat blogger yang dalam membuat dan menerapkan penggunaan warna gradasi sebagai warna latar atau background pada setiap elemen halaman blog, maka berikut ini saya berikan beberapa contoh kode CSS dengan berbagai kombinasi warna, dengan harapan agar nantinya dapat mempermudah dalam penerapan teknik ini.


Kode CSS
height: 35px;
width: 100px;
border: 1px solid #ff0000;
background: #ff0000;
background: -moz-linear-gradient( center top, white 20%, #ff0000 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff0000) );

Kode CSS
height: 35px;
width: 100px;
border: 1px solid #ff9900;
background: #ff9900;
background: -moz-linear-gradient( center top, white 20%, #ff9900 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff9900) );

Kode CSS
height: 35px;
width: 100px;
border: 1px solid #ffff00;
background: #ffff00;
background: -moz-linear-gradient( center top, white 20%, #ffff00 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ffff00) );

4.5 Apa kekurangan dan kelebihan dari CSS?
Kelebihan
1.    Memisahkan desain dengan konten halaman web.
2.    Mengatur desain seefisien mungkin.
3.    Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja.
4.    Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
5.    Lebih mudah didownload karena lebih ringan ukuran filenya.
6.    Satu CSS dapat digunakan banyak halaman web.
7.    Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
8.    Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
9.    Mempercepat proses rendering/pembacaan HTML.
Kekurangan
1.  Tampilan pada browser berbeda-beda.
2.  Kadang juga terdapat browser yang tidak support CSS (browser lama).
3.  Harus tahu cara menggunakannya.
4.  dibutuhkan waktu lebih lama dalam membuatnya.
5.  Belum lagi ada bug/error dalam CSS.






















BAB IV
PENUTUPAN

Semoga Makalah yang cukup sederhana ini dapat bermanfaat untuk orang banyak.

























DAFTAR PUSTAKA

No comments:

Post a Comment