Artikel Tentang HTML, JS, CSS, PHP Dan JQUERY

1.
PENGERTIAN PHP
Pengertian PHP Menurut Antonius Nugraha Widhi Pratama (2010:9)

PHP adalah kependekan dari Pretext Hyper- Processor yang dibagun oleh
Rasmus Lerdorf pada tahun 1994. Dahulu, pada awal pengembangannya
PHP disebut sebagai kependekan dari Personal Home Page. PHP
merupakan produk open source sehingga kita dapat mengakses source
code, menggunakan, dan mengubahnya tanpa harus membayar
sepeserpun.
PHP adalah bahasa scripting yang menyatu dengan HTML dan
dijalankan pada server side. Artinya semua sintaks yang kita berikan akan
sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke
browser hanya hasilnyasaja. PHP menyatu dengan bahasa HTML untuk
membuat halaman web yang menarik. PHP mampu berjalan di atas
beberapa platfrom seperti Windows, Unix serta varian Linux.
Beberapa kelebihan PHP antara lain dapat membuat situs yang

interaktif dengan forum diskusi, guestbook dan sebagainya, koneksitas
yang baik dengan bermacam-macam database seperti Oracle, MySQL,
PostgreSQL dan lain-lain. Kode PHP diawali dengan tag <? atau <?php dan
ditutup dengan tag ?>. File yang berisi tag HTML dan kode PHP diberi
ekstensi. Berdasarkan ekstensi ini, pada saat file diakses, server akan
tahu bahwa file tersebut mengandung kode PHP. Server akan
menerjemahkan kode dan menghasilkan output dalam bentuk tag HTML
yang akan dikirim ke browser klien yang mengakses file tersebut. Contoh
skrip PHP: <?php echo ini contoh skrip PHP; ?> Ketika skrip tersebut
dijalankan di server, server akan mengembalikan ke browser klien dalam
bentuk tag HTML. Sehingga ketika dilihat hasilnya di browser
menggunakan menu view source, hasilnya adalah sebagi berikut:
<HTML> <BODY>ini contoh skrip PHP</ BODY> </HTML> Dalam
menuliskan script atau program PHP, ada dua cara yang sering
digunakan, yaitu embedded script dan non-embedded script. Embedded
script yaitu menuliskan script PHP di antara tag-tag HTML. Sedangkan
non-embedded script merupakan pembuatan program murni PHP, di
mana tag-tag HTML yang diletakkan di dalam script PHP. Spasi tidak
berpengaruh pada penulisan baris perintah PHP. Untuk penulisan fungsifungsi, PHP tidak membedakan antara huruf kecil dan huruf besar. Contoh
perintah echo sama dengan perintah ECHO atau Echo.
2.
SEJARAH PHP
Sejarah PHP PHP pertama kali dibuat oleh Rasmus Lerdroft, seorang
programmer C. Semula PHP digunakannya untuk menghitung jumlah
pengunjung di dalam webnya. Kemudian ia mengeluarkan Personal Home
Page Tools versi 1.0 secara gratis. Versi ini pertama kali keluar pada tahun
1995. Isinya adalah sekumpulan script PERL yang dibuatnya untuk membuat
halaman webnya menjadi dinamis. Kemudian pada tahun 1996 ia
mengeluarkan PHP versi 2.0 yang kemampuannya telah dapat mengakses
database dan dapat terintegrasi dengan HTML.
Pada tahun 1998 tepatnya pada tanggal 6 Juni 1998 keluarlah PHP versi
3.0 yang dikeluarkan oleh Rasmus sendiri bersama kelompok pengembang
softwarenya.Versi terbaru, yaitu PHP 4.0 keluar pada tanggal 22 Mei 2000
merupakan versi yang lebih lengkap lagi dibandingkan dengan versi
sebelumnya. Perubahan yang paling mendasar pada PHP 4.0 adalah
terintegrasinya Zend Engine yang dibuat oleh Zend Suraski dan Andi
Gutmans yang merupakan penyempurnaan dari PHP scripting engine. Yang
lainnya adalah build in HTTP session, tidak lagi menggunakan library
tambahan seperti pada PHP. Tujuan dari bahasa scripting ini adalah untuk
membuat aplikasi- aplikasi yang dijalankan di atas teknologi web. Dalam hal
ini, aplikasi pada umumnya akan memberikan hasil pada web browser, tetapi
prosesnya secara keseluruhan dijalankan web server. Seluruh aplikasi
berbasis web dapat dibuat dengan PHP. Namun kekuatan yang paling utama
PHP adalah pada konektivitasnya dengan system database di dalam web.
Sistem database yang dapat didukung oleh PHP adalah : 1.Oracle 2.MySQL
3.Sybase 4.PostgreSQL 5.danlainnya PHP dapat berjalan di berbagai system
operasi seperti windows 98/NT, UNIX/LINUX, solaris maupun macintosh PHP
pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995.
Pada waktu itu PHP bernama FI (Form Interpreted). Pada saat tersebut
PHP adalah sekumpulan script yang digunakan untuk mengolah data form
dari web. Perkembangan selanjutnya adalah Rasmus melepaskan kode
sumber tersebut dan menamakannya PHP/ FI, pada saat tersebut
kepanjangan dari PHP/FI adalah Personal Home Page/Form Interpreter.
Dengan pelepasan kode sumber ini menjadi open source, maka banyak
programmer yang tertarik untuk ikut mengembangkan PHP. Pada November
1997, dirilis PHP/ FI 2.0. Pada rilis ini interpreter sudah diimplementasikan
dalam C. Dalam rilis ini disertakan juga modul-modul ekstensi yang
meningkatkan kemampuan PHP/FI secara signifikan. Pada tahun 1997,
sebuah perusahaan bernama Zend, menulis ulang interpreter PHP menjadi
lebih bersih, lebih baik dan lebih cepat. Kemudian pada Juni 1998
perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan
nama rilis tersebut menjadi PHP 3.0. Pada pertengahan tahun 1999, Zend
merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP
4.0 adalah versi PHP yang paling banyak dipakai. Versi ini banyak dipakai
sebab versi ini mampu dipakai untuk membangun aplikasi web kompleks
tetapi tetap memiliki kecepatan proses dan stabilitas yang tinggi. Pada Juni
2004, Zend merilis PHP 5.0. Versi ini adalah versi mutakhir dari PHP. Dalam
versi ini, inti dari interpreter PHP mengalami perubahan besar. Dalam versi
ini juga dikenalkan model pemrograman berorientasi objek baru untuk
menjawab perkembangan bahas pemrograman kearah pemrograman

berorientasi objek. Kelebihan PHP dari bahasa pemrograman lain.
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu
itu PHP bernama FI (Form Interpreted). Pada saat tersebut PHP adalah
sekumpulan script yang digunakan untuk mengolah data form dari web.
Perkembangan selanjutnya adalah Rasmus melepaskan kode sumber
tersebut dan menamakannya PHP/FI, pada saat tersebut kepanjangan dari
PHP/FI adalah Personal Home Page/Form Interpreter. Dengan pelepasan kode
sumber ini menjadi open source, maka banyak programmer yang tertarik
untuk ikut mengembangkan PHP.
Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini interpreter sudah
diimplementasikan dalam C. Dalam rilis ini disertakan juga modul-modul
ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.
Pada tahun 1997, sebuah perusahaan bernama Zend, menulis ulang
interpreter PHP menjadi lebih bersih, lebih baik dan lebih cepat. Kemudian
pada Juni 1998 perusahaan tersebut merilis interpreter baru untuk PHP dan
meresmikan nama rilis tersebut menjadi PHP 3.0.
Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis
tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling
banyak dipakai. Versi ini banyak dipakai sebab versi ini mampu dipakai untuk
membangun aplikasi web kompleks tetapi tetap memiliki kecepatan proses
dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Versi ini adalah versi mutakhir dari
PHP. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar.
Dalam versi ini juga dikenalkan model pemrograman berorientasi objek baru
untuk menjawab perkembangan bahas pemrograman kearah pemrograman
berorientasi objek.
PHP grup kini merilis versi PHP terbaru yaitu 5.1.6 [ sumber : wikipedia ]
Kelebihan PHP antara lain
* Bahasa pemograman php adalah sebuah bahasa script yang tidak
melakukan sebuah kompilasi dalam penggunaanya.
* Web Server yang mendukung php dapat ditemukan dimana - mana dari
mulai IIS sampai dengan apache, dengan configurasi yang relatif mudah.
* Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan
developer yang siap membantu dalam pengembangan.
* Dalam sisi pemahamanan, php adalah bahasa scripting yang paling mudah
karena referensi yang banyak.

* PHP adalah bahasa open source yang dapat digunakan di berbagai mesin
(linux, unix, windows) dan dapat dijalankan secara runtime melalui console
serta juga dapat menjalankan perintah-perintah system.
* PHP adalah termasuk bahasa embedded ( bisa diletakkan dalam tag HTML )
* PHP diterbitkan secara gratis
BEberapa system database yang didukung oleh PHP adalah :
*
*
*
*
*
*
*
Oracle
Sybase
mSql
MySql
Solid
Generic ODBC
Postgres Sql
PHP banyak sekali digunakan untuk pengembangan web dinamis, dapat di

katakan mayoritas pengembangan web didunia menggunakan PHP, misalnya
saja web yang sudah melegenda beberapa tahun belakangan ini, yaitu
friendster dan digg. Mengapa mereka menggunakan PHP? Yaa.. tentunya ada
didalam keuntungan yang sudah kami sebutkan sebelumnya di atas tadi.
Web dinamis adalah sebuah web yang dapat melalukan update pada
contentnya, didalamnya selalu terdapat CMS [Content Management System ]
yaitu ruang kendali bagi pemilik website untuk melakukan update,
biasanya jika ingin masuk ke dalam CMS ini user atau sang pemilik harus
memberikan password agar ruang kendali bebas dari tangan tangan yang
tidak bertanggung jawab.
Beberapa pihak pengembang web [ kami SimpleBlue.com salah satunya ]
selalu memberikan CMS didalam web dinamis, jadi Anda pun tidak perlu
bingung lagi untuk melakukan update pada web pribadi Anda. Kami akan
memberikan salah satu contoh dari fungsi CMS, jika web Anda mempunyai
kolom berita atau news, maka Anda tidak perlu lagi masuk ke dalam source
code yang memusingkan kepala dan merepotkan, Anda hanya perlu masuk
ke CMS dan pilih menu utuk melakukan perubahan content tersebut.
Didalam CMS sendiri terdapat menu untuk menambah , merubah serta
menghapus data.
Contoh script PHP :
CREATE TABLE mhs (

nim varchar(10),
namaMhs varchar(30),
alamat varchar(30),
PRIMARY KEY (nim)
)
dan data mahasiswa sbb:
INSERT
INSERT
INSERT
INSERT
INSERT
INTO
INTO
INTO
INTO
INTO
mhs
mhs
mhs
mhs
mhs
VALUES
VALUES
VALUES
VALUES
VALUES
('M0197001',
('M0197002',
('M0197003',
('M0197004',
('M0197005',
'ROSIHAN ARI YUANA', 'Solo');

'DWI AMALIA FITRIANI', 'Kudus');
'FAZA FAUZAN KH.', 'Solo');
'NADA HASANAH', 'Solo');
'MUH. AHSANI TAQWIM', 'Solo');
Perhatikan script PHP berikut ini:
mysql_connect("namaHost","namaUser","password");
mysql_select_db("namaDB");
$warnaGenap = "#CCCCCC"; // warna abu-abu
$warnaGanjil = "#FFFFFF"; // warna putih
$warnaHeading = "#FF0000"; // warna merah untuk heading tabel
$query = "SELECT * FROM mahasiswa";
$hasil = mysql_query($query);
echo "";
echo"
";
$counter=1;
while($data=mysql_fetch_array($hasil))
{
// cek apakah counternya ganjil atau genap
if($counter%2==0)$warna=$warnaGenap;
else$warna=$warnaGanjil;
echo"";
echo"";
echo"";
echo"";
echo"";
$counter++;// menambah counter
}
echo"
NIM
Nama Mahasiswa Alamat
".
".
".
$data['nim']. $data['namaMhs' $data['alamat']
"
]."
."
";
?>
Dari scipt diatas akan muncul tampilan seperti dibawah ini :
3.
MANFAAT PHP
PHP & MySQL Web Development Pengantar PHP & MySQL adalah bahasa
pemprogaman web yang mendunia, bahasanya mudah untuk dipelajari,
kompatibilitas dengan berbagai macam server baik itu windows maupun
unix, dan yang tak kalah penting adalah bahasa pemprogaman PHP & MySQL
bersifat open source sehingga perkembangannya pun akan semakin cepat
dan dapat diimplementasikan diberbagai bidang kebutuhan dalam
pembuatan aplikasi.
Dengan semakin berkembangnya dunia internet dan tingginya kebutuhan
akan sebuah bahasa pemprogaman yang mumpuni, setiap saat berbagai
macam fungsi baru dan library tambahan selalu muncul di internet untuk
memperkokoh dan meningkatkan performa keduanya, bug-bug yang ada
pada versi sebelumnya diperbaiki oleh komunitas dan juga oleh para
programmer handal yang ada diseluruh dunia. PHP & MySQL sekarang hadir
tidak lagi pada pembuatan aplikasi web dan database semata, tetapi juga
sudah merambah kedalam dunia desktop Windows yang dikenal dengan PHP
GTK. Karena manfaatnya yang sangat banyak, mudah untuk dipelajari, dan
dapat diimplementasikan dihampir semua bidang kebutuhan maka hadirlah
sebuah E-book ini, E-book ini dibuat dengan mengambil dari berbagai
macam sumber yang ada, dari situs internet, E-book dan dari manual book.
Apakah PHP Itu ? PHP kepanjangan dari Hypertext Preprocessor, PHP
sendiri dibuat oleh Rasmus Lerdorf, PHP bersifat open source dan telah
digunakan oleh hampir seluruh web developer di seluruh dunia, situs resmi
php bisa dikunjungi di www.php.net. Karena sifatnya yang open source dan
semakin banyaknya user membuat bahasa pemprogaman ini mengalami
perkembangan yang sangat cepat. Sintak atau strukturnya hampir mirip
dengan bahasa pemprogaman C, Java dan Perl sehingga dengan begitu bagi
mereka yang sudah mempelajari bahasa tersebut tidak akan mengalami
kesulitan, selain itu bagi para pemula yang baru memulai bahasa
pemprogaman web rasanya PHP turut diperhitungkan, karena pemanfaatan
bahasa PHP tidak hanya sekedar untuk web dan aplikasinya tetapi sudah
merambah kedunia desktop windows, namanya yaitu PHP GTK, kita akan
membahas PHP GTK lebih lanjut nanti. Sebuah contoh script php sederhana :
Belajar PHP & MySQL Kalau kita perhatikan script diatas, bahasa php dimulai
dengan tanda , sama seperti pemprogaman web lainnya, script php
ditempatkan di dalam tag HTML.
Berbeda halnya dengan bahasa pemprogaman Java script, script php di
olah di sisi server, ini berarti bahwa script php yang telah dibuat akan
diproses terlebih dahulu di server baru kemudian ditampilkan ke client dalam
bentuk html atau dalam format lainnya, dengan begitu script akan lebih
aman dan meminilisasikan kesalahan interpreter browser. Jika masih
penasaran, sekarang coba lihat source code script diatas, kalau anda
menjalankan script diatas menggunakan IE maka anda bisa memilih menu
view > source, maka isinya akan seperti ini: Belajar PHP & MySQL Selamat
belajar PHP & MySQL Berbeda bukan dengan source codenya !, inilah yang
disebut sebagai server side scripting. PHP memiliki ekstensi *.php pada
setiap filenya.
Apa saja yang bisa dilakukan dengan PHP ? PHP hampir dapat berjalan di
semua system operasi seperti Windows, Unix, Linux dan variannya, Mac OS
X, RISC OS dan lainnya. PHP juga Kompatibel dengan web server yang ada
sekarang seperti Apache, IIS ( Internet Information Service ), Personal web
server, Caudium, Xitami, Omni dan masih banyak lainnya. Dengan begitu
system operasi apapun yang anda gunakan atau web server apapun yang
anda gunakan php dapat berjalan dengan lancar. Seperti telah diterangkan
sebelumnya bahwa script php diolah di server kemudian ditampilkan ke
client dalam bentuk HTML atau format lainnya, dengan tambahan berupa
library, php mampu menampilkannya dalam berbagai macam format seperti
gambar (image), pdf bahkan swf. Selain output diatas php juga mampu
menghasilkan output berupa teks seperti XHTML dan XML. Salah satu fitur
dasyat PHP dibandingkan bahasa pemprogaman web lainnya adalah PHP
mampu berkomunikasi hampir pada semua database yang ada sekarang,
diantaranya :
Adabas D
Ingres
Oracle (OCI7 and OCI8)
dBase
InterBase
Ovrimos
Empress
FrontBase
PostgreSQL
FilePro (read-only)
mSQL Solid
Hyperwave
Direct MS-SQL
Sybase
IBM DB2
MySQL
Velocis
Informix
ODBC
Dan Unix dbm
Dengan PHP kita juga mampu berhubungan dengan berbagai macam
protocol yang ada seperti LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM dan
lainnya. Fasilitas lainnya adalah soket programming, dengan fasilitas ini kita
bisa membuat script php yang dapat menghubungkan komputer pada
sebuah jaringan, sehingga kita bisa bertukar data. Kemudian ada juga yang
namanya COBRA Extension untuk access remote objects.
Fungsi-fungsi lain diantaranya adalah :
Bzip2 Compression Functions yaitu fungsi untuk membuat dan
membaca file berformat *.zip
ClibPDF Functions yaitu fungsi untuk membuat file pdf secara on the fly,
fungsi ini hampir mirip dengan PDFlib.
Cybercash Payment Functions, bagi mereka yang ingin membuat
aplikasi yang berhubungan dengan E-Payment bisa menggunakan fungsi ini.
DOM XML Functions
NET Functions
Filesystem Functions
COM (for Windows) dengan fungsi ini kita mampu berkomunikasi antar
aplikasi yang dibuat dengan standar com, maka dengan begitu kita bisa
saling kirim data antar aplikasi.
Hal baru di PHP 5 PHP 5 adalah versi terbaru sekarang, dengan berbagai
macam kelebihan yang ada dibandingkan pada versi sebelumnya yaitu versi
4, PHP 5 hadir dengan lebih banyak fungsi dan perbaikan bug.
Dengan PHP 5 kita mampu menangani dan membuat session pada object.
Kemudian ada juga tambahan library seperti GD2 untuk memproses dynamic
image dengan lebih efektif. Fungsi untuk menangani Form dan Simple XML
juga ditingkatkan di PHP 5, dan masih banyak kelebihan dan tambahan
fungsi yang dapat mempermudahkan kita untuk bekerja dengan PHP &
MySQL. Menginstall PHP Server di desktop Berbeda dengan bahasa
pemprogaman HTML yang tinggal klik 2 kali sudah bisa dijalankan di IE atau
browser lainnya, PHP membutuhkan sebuah aplikasi yang bernama web
server emulator atau server emulator atau program server untuk
menjalankan scriptnya, lain halnya jika anda mempunyai koneksi internet 24
jam dan mempunyai dana lebih untuk menyewa hosting, dengan menyewa
jasa hosting anda cukup mengupload script yang anda buat ke dalam server..
Apabila anda memakai alternative yang pertama dalam menjalankan script
php, anda harus terlebih dahulu menjalankan aplikasi server terlebih dahulu,
baru kemudian memanggil atau menjalankan script PHP.
Program server yang dapat digunakan ada banyak diantaranya adalah
Phptriad, XAMPP, Reactor server, WAMP server dan masih banyak lagi,
namun bagi pemula disarankan untuk menginstal XAMPP sebagai servernya,
mengapa ? karena proses penginstalan server XAMPP relative lebih mudah
jika dibandingkan aplikasi server lainnya, untuk mendownload XAMPP bisa
didownload di situs http://www.apachefriends.org/. Gambar : XAMPP SERVER
MySQL MySQL adalah database yang cepat dan tangguh, sangat cocok jika
digabungkan dengan PHP, dengan database kita bisa menyimpan, mencari
dan mengklasifikasikan data dengan lebih akurat dan professional. MySQL
menggunakan SQL language ( Structur Query Language ) artinya MySQL
menggunakan query atau bahasa pemprogaman yang sudah standar di
dalam dunia database.
4. Fungsi PHP Dalam Pemrograman Web

Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa
pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya
menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini
dikenal dengan website statis, dimana konten dan halaman web bersifat
tetap.
Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan PHP
adalah situs web yang bisa menyesuaikan tampilan konten tergantung
situasi. Website dinamis juga bisa menyimpan data ke dalam database,
membuat halaman yang berubah-ubah sesuai input dari user, memproses
form, dll.
Untuk pembuatan web, kode PHP biasanya di sisipkan kedalam dokumen
HTML. Karena fitur inilah PHP disebut juga sebagai Scripting Language
atau bahasa pemrograman script.
Sebagai contoh penggunaan PHP, misalkan kita ingin membuat list dari
nomor 1 sampai nomor 10. Dengan menggunakan HTML murni, kita bisa
membuatnya secara manual seperti kode berikut ini:
1 <!DOCTYPE html>
2 <html>
3
4
5
6
7
8
9
1
0
<head>
<title>Contoh list dengan
HTML</title>
</head>
<body>
<h2>Daftar Absensi
Mahasiswa</h2>
<ol>
<li>Nama Mahasiswa ke1</li>
1
<li>Nama Mahasiswa ke1 2</li>
1
1
1
1
1
1
1
1
2
0
</ol>
</body>
2
1 </html>
Halaman HTML tersebut dapat dibuat dengan mudah dengan cara mencopy-paste tag <li> sebanyak 10 kali dan mengubah sedikit angka-angka no
urut di belakangnya. Namun jika yang kita inginkan adalah menambahkan
list tersebut menjadi 100 atau 1000 list, cara copy-paste tersebut menjadi
tidak efektif.
Jika menggunakan PHP, kita tinggal membuat perulangan for sebanyak
1000 kali dengan perintah yang lebih singkat seperti berikut ini:
1
2
3
4
5
<!DOCTYPE html>
<html>
<head>
<title>Contoh list dengan

6 PHP</title>
7
</head>
8 <body>
9 <h2>Daftar Absensi
1 Mahasiswa</h2>
0
1
1
1
2
<ol>
<?php
for ($i= 1; $i <= 1000; $i++)
{
echo "<li>Nama Mahasiswa

1
3 ke-$i</li>";
1
4
1
5
}
?>
</ol
</body>
1
6 </html>
1
7
Dengan menggunakan kode baris yang bahkan lebih sedikit, kita dapat
membuat list tersebut menjadi 1000 kali, bahkan 100.000 kali dengan hanya
mengubah sebuah variabel $i.
PHP tidak hanya dapat melakukan pengulangan tersebut, masih banyak hal
lain yang bisa kita lakukan dengan PHP, seperti menginput data ke
database, menghasilkan gambar, menkonversi halaman text menjadi PDF,
management cookie dan session, dan hal lainnya yang akan kita pelajari di
dalam tutorial belajar PHP di duniailkom.
Kelebihan MySQL diantaranya :

1. Dari segi performa, MySQL tidak bisa diragukan, pemprosesan
database sangat cepat
2. Open source
3. Mudah untuk dipelajari
4. Kompabilitas dengan berbagai system operasi dan web server yang
ada Mengapa Memilih PHP & MySQL Tidak semua bahasa pemprogaman
dapat berjalan di semua sistem operasi dan web server yang ada, kalau
dalam dunia programming, C dan Java adalah bahasa pemprogaman yang
dapat berjalan hampir disemua sistem operasi, apalagi dengan Java, Java
tidak lagi monoton masuk dalam dunia Komputer tetapi juga merambah
dalam dunia mobile seperti Smartphone dan aplikasinya.
PHP & MySQL adalah sebuah pasangan yang sangat cocok dan dapat
berjalan di hampir semua system operasi dan web server yang ada. Alasan
lain mengapa memilih PHP & MySQL adalah karena perkembangannya yang
sangat cepat apalagi PHP & MySQL adalah bahasa pemprogaman yang
bersifat open source, setiap waktu selalu muncul fungsi-fungsi tambahan
yang dapat meningkatkan performa keduanya, apalagi ketika PHP sudah
merambah kedalam dunia desktop dengan dikembangkannya PHP GTK,
maka harus menunggu apa lagi, belajarlah mulai dari sekarang, tahap demi
tahap, trial and error, karena bahasa pemprogaman PHP & MySQL bisa
dibilang sebuah bahasa pemprogaman masa depan. Dan jika suatu saat
Anda berminat masuk kedalam dunia IT atau lebih khususnya Web
Deveploment maka anda sudah siap dan tidak terlalu banyak tertinggal.
Fungsi Umum PHP Fungsi string Funngsi string digunakan memanipulasi

string untuk berbagai macam kebutuhan. Disini akan dibahas beberapa
fungsi string yang sering digunakan dalam membuat aplikasi web.
AddSlashes Digunakan untuk menambahkan karakter backslash ( \ ) pada
suatu string. Hal ini penting digunakan pada query string untuk database,
misalkan pada MySQL. Beberapa karakter yang akan ditambahkan tanda
addslashes adalah karakter tanda petik satu ( ), karakter petik dua ( ),
backslash ( \ ) dan karakter NULL. Sintaks : addslashes(string) StripSlashes
Digunakan untuk menghilangkan karakter backslash ( \ ) pada suatu string.
Sintaks : string stripslashes(string) Crypt Digunakan untuk meng-encrypt
dengan metode DES suatu string.
Fungsi ini sering digunakan untuk mengacak string password sebelum
disimpan dalam database. Dalam penggunaan fungsi crypt ini dapat
ditambahkan parameter string salt. Parameter salt ini ditambahkan untuk
menentukan basis pengacakan. Salt string terdiri atas 2 karakter. Jika
ditambahkan pada fungsi crypt maka PHP akan menentukan sendiri salt
string tersebut secara acak. Sintaks : Crypt(string [,salt] ) Echo Digunakan
untuk mencetak isi suatu string atau argument. Sintaks : echo(string
argumen1, argumen2, ) Explode Digunakan untuk memecah-mecah suatu
string berdasarkan tanda pemisah tertentu dan memasukkan hasilnya
kedalam suatu variable array. Sintaks : explode(string pemisah, string [,int
limit] ) contoh : $namahari = mingg senin elasa rabu kamis jumat sabtu;
$hari = explode( , $namahari); Implode Kegunaan fungsi ini adalah
kebalikan dari explode.
Implode digunakan untuk menghasilkan suatu string dari masingmasing elemen suatu array. String yang dihasilkan tersebut dipisahkan oleh
suatu string yang telah ditentukan sebelumnya. Sintaks : implode(string
pemisah, array) Strip_Tag Digunakan untuk menghilangkan kode-kode HTML
pada suatu string. Sintaks : striptags(string [, string tags yang tidak
dihilangkan] ) StrLen Digunakan untuk menghitung jumlah karakter suatu
string. Sintaks : strlen(string) StrPos Digunakan untuk mencari posisi
pertama suatu sub string pada suatu string.
Fungsi ini biasanya digunakan untuk mencari suatu sub string didalam
suatu string. Sintaks : sttrpos(string, substring) Str_Repeat Digunakan untuk
mengulang isi suatu string. Sintaks : Str_repeat(string, int jumlah
perulangan) strToLower Digunakan untuk merubah suatu string menjadi
huruf kecil Sintaks : strlower(string) StrToUpper Digunakan untuk merubah
suatu string menjadi huruf besar. Sintaks : strtoupper(string) 4.2.2 Date &
Time PHP menyediakan fungsi-fungsi untukmenampilkan penanggalan dan
waktu. Fungsi-fungsi tersebut dapat mengembalikantanggal dan waktu
sesuai dengan yang kita butuhkan.Berikut adalah daftar penanggalan dan
waktu disertakan dengan penjelasannya. a -> am atau pm A -> AM atau PM
d -> Tanggal D -> Nama hari dalam seminggu F -> Nama bulan g -> jam 1
sampai 12 (1..12) G -> jam 1 sampai 23 (0..23) h -> jam 1 sampai 12
(01..12) H -> jam 1 sampai 23 (OO..23) i -> menit j -> Tanggal l -> Nama
Hari m -> Bulan (dalam angka) M -> Bulan (singkatan dari nama bulan) n ->
Nama bulan (1..12) O -> waktu greenwicj r -> format RFC 822 (Sun, 25
Agustus 2002 16:01:07+0200 s -> detik (00..59) T -> Timezone (DMT) y ->
tahun dalam dua digit Y -> tahun dalam empat digit z -> hari ke x dari tahun
contoh implementasi dari date & time adalah seperti ini untuk mengetahui
tanggal berapa sekarang : untuk contoh yang lebih kompleks lagi <?php
echo Sekarang waktu menunjukkan pukul , date(H:i A), , date(l, d F
Y), Hari ke : , date(z), dari tahun , date(Y); ?> 4.2.3 Fungsi Mail
Digunakan untuk mengirim email ke alamat email tertentu. Sintaks :
mail(string tujuan, string subject,string isi, [,string header] );
5.
Kelebihan PHP
Banyak sekali kelebihan yang dimiliki PHP dibandingkan dengan

bahasa pemrograman yang lain, Diantaranya :
1. Bisa membuat Web menjadi Dinamis.
2. PHP bersifat Open Source yang berarti dapat digunakan oleh siapa saja
secara gratis.
3. Program yang dibuat dengan PHP bisa dijalankan oleh Semua Sistem
Operasi karena PHP berjalan secara Web Base yag artinya semua
Sistem Operasi bahkan HP yang mempunyai Web Browser dapat
menggunakan program PHP.
4. Aplikasi PHP lebih cepat dibandingkan dengan ASP maupun Java.
5. Mendukung banyak paket Database seperti MySQL , Oracle ,
PostgrSQL, dan lain-lain.
6. Bahasa pemrograman PHP tidak memerlukan Kompilasi / Compile
dalam penggunaannya .
7. Banyak Web Server yang mendukung PHP seperti Apache, Lighttpd, IIS
dan lain- lain.
8. Pengembangan Aplikasi PHP mudah karena banyak Dokumentasi,
Refrensi & Developer yang membantu dalam pengembangannya.
9. Banyak bertebaran Aplikasi & Program PHP yang Gratis & Siap pakai
seperti WordPress, PrestaShop , dan lain- lain.
10.
Banyak sekali kelebihan yang dimiliki PHP dibandingkan dengan
bahasa pemrograman yang lain, Diantaranya :
11.
Bisa membuat Web menjadi Dinamis.
12.
PHP bersifat Open Source yang berarti dapat digunakan oleh
siapa saja secara gratis.
13.
Program yang dibuat dengan PHP bisa dijalankan oleh Semua
Sistem Operasi karena PHP berjalan secara Web Base yag artinya
semua Sistem Operasi bahkan HP yang mempunyai Web Browser
dapat menggunakan program PHP.
14.
Aplikasi PHP lebih cepat dibandingkan dengan ASP maupun Java.
15.
Mendukung banyak paket Database seperti MySQL, Oracle,
PostgrSQL, dan lain-lain.
16.
Bahasa pemrograman PHP tidak memerlukan Kompilasi / Compile
dalam penggunaannya.
17.
Banyak Web Server yang mendukung PHP seperti Apache,
Lighttpd, IIS dan lain-lain.
18.
Pengembangan Aplikasi PHP mudah karena banyak
Dokumentasi, Refrensi & Developer yang membantu dalam
pengembangannya.
19.
Banyak bertebaran Aplikasi & Program PHP yang Gratis & Siap
pakai seperti WordPress, PrestaShop, dan lain-lain.
6. Kekurangan PHP
1) Selain kelebihan PHP, PHP juga mempunyai kekurangan. Namun
masalah kekurangannya sangat sedikit. Diantaranya :
2) PHP Tidak mengenal Package.
3) Jika tidak di encoding, maka kode PHP dabat dibaca semua orang &
untuk meng encodingnya dibutuhkan tool dari Zend yang mahal sekali
biayanya.
4) PHP memiliki kelemahan keamanan. Jadi Programmer harus jeli &
berhati-hati dalam melakukan pemrograman & Konfigurasi PHP.
5) PHP juga mempunyai kekurangan. Namun masalah kekurangannya
sangat sedikit . Diantaranya :
a. PHP Tidak mengenal Package.
b. Jika tidak di encoding, maka kode PHP dabat dibaca semua orang
& untuk meng encodingnya dibutuhkan tool dari Zend yang
mahal sekali biayanya.
a. PHP memiliki kelemahan keamanan . Jadi Programmer harus jeli
& berhati- hati dalam melakukan pemrograman & Konfigurasi
PHP .
7.
Membuat Database MySQL di PHP
PHP menggunakan fungsi mysql_query untuk membuat database MySQL,

fungsi ini membutuhkan dua parameter dan mengembalikan nilai TRUE jika
berhasil atau FALSE jika gagal.
Skrip PHP
1
bool mysql_query( sql,

connection );
Deskripsi parameter pada skrip diatas:
sql parameter ini diperlukan untuk menempatkan query SQL untuk

membuat database
connection parameter ini bersifat opsional, jika tidak ditentukan,
maka akan menggunakan koneksi dengan fungsi mysql_connect yang
paling terakhir
Perhatikan contoh skrip membuat database MySQL di PHP berikut ini:

Skrip PHP
1 <?php
2 $dbhost = 'localhost';
3 $dbuser = 'root';
4 $dbpass = 'password';
5 $koneksi = mysql_connect($dbhost,
$dbuser, $dbpass);
6
if(! $koneksi )
7
{
8
die('Gagal Koneksi: ' . mysql_error());
9
}
1
0 echo 'Koneksi Berhasil';
1 $sql = 'CREATE Database test_db';
1
$buatdb = mysql_query( $sql, $koneksi );
1
if(! $buatdb )
2
1
3
{
die('Pembuatan database, gagal: ' .
1
4
1
5 mysql_error());
1 }
6
echo "Database test_db berhasil dibuat\n";
1
7 mysql_close($koneksi);
1 ?>
8
1
9
Memilih Database MySQL di PHP
Setelah Anda membuat sambungan dengan database server maka langkah
selanjutnya yaitu memilih database tertentu, hal ini diperlukan karena
mungkin ada beberapa database yang berada pada server induk dan
kita dapat melakukan pekerjaan dengan database yang telah dipilih ini pada
suatu waktu.
PHP menyediakan fungsi mysql_select_db untuk memilih database. Fungsi
ini mengembalikan nilai TRUE jika berhasil atau FALSE jika gagal.
Skrip PHP
1
bool mysql_select_db( db_name,

connection )
Deskripsi parameter pada skrip diatas:
db_name parameter ini diperlukan untuk nama database yang akan

dipilih
connection parameter ini bersifat opsional, jika tidak ditentukan,
maka akan menggunakan koneksi dengan fungsi mysql_connect yang
paling terakhir
Perhatikan contoh skrip memilih database MySQL di PHP berikut ini:
Skrip PHP
1
2 <?php
4 $dbuser = 'root';
6 $koneksi = mysql_connect($dbhost,
$dbuser, $dbpass);
7
if(! $koneksi )
8
{
9
1
0 }
1
mysql_select_db( 'test_db' );
1
mysql_close($koneksi );
2
1
3
?>
Membuat Tabel di Database MySQL dengan PHP

Untuk membuat tabel dalam database, yang perlu kita lakukan sama seperti
kita membuat database. Pertama kita membuat query SQL untuk membuat
tabel dan kemudian jalankan query tersebut menggunakan fungsi
mysql_query().
Perhatikan contoh skrip membuat tabel di database MySQL dengan PHP
berikut ini:
Skrip PHP
1 <?php
3 $dbuser = 'root';
5 $conn = mysql_connect($dbhost, $dbuser,
$dbpass);
6
if(! $koneksi )
7
{
8
9
}
1
1 $sql = 'CREATE TABLE karyawan( '.
1
'id_karyawan INT NOT NULL
1 AUTO_INCREMENT, '.
2
'nama_karyawan VARCHAR(20) NOT
1 NULL, '.
3
'alm_karyawan VARCHAR(20) NOT
1 NULL, '.
4
'gaji_karyawan INT NOT NULL, '.
1
'tgl_gabung timestamp(14) NOT
5
NULL, '.
1
'primary key ( id_karyawan ))';
6
1
7 mysql_select_db('test_db');
1 $buattabel = mysql_query( $sql, $koneksi
8 );
1 if(! $buattabel )
9
{
2
0
2
1
2
2
die('Gagal Membuat Tabel: ' .

mysql_error());
2
3 }
2 echo "Tabel Karyawan sukses dibuat\n";

4
mysql_close($koneksi);
2
5 ?>
2
6
2
7
Perhatikan isi dari $sql, pada variabel tersebut berisi query SQL untuk
membuat tabel. Sedikit saran jika anda ingin membuat banyak tabel, maka
akan sangat merepotkan jika harus mengetik-kan banyak query, maka dari
itu manfaatkan-lah software untuk membuat tabel di MySQL
seperti HeidiSQL.
1.
PENGERTIAN JAVA SCRIPT / JS
JavaScript adalah bahasa pemrograman berbasis java yang merupakan

interface pembantu dalam pemrograman web. JavaScript populer di internet
dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet
Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat
disisipkan dalam halaman web menggunakan tag
SCRIPT.
2.
SEJARAH JAVA SCRIPT
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape

dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript,
dan akhirnya menjadi JavaScript. [4] [5] Navigator sebelumnya telah
mendukung Java untuk lebih bisa dimanfaatkan para programmer yang nonJava. [6] Maka dikembangkanlah bahasa pemrograman bernama LiveScript
untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang
akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada
hubungan bahasa antara Java dengan JavaScript.
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat
efek rollover baik di gambar maupun teks, dan yang penting juga adalah
untuk membuat AJAX . JavaScript adalah bahasa yang digunakanuntuk AJAX.
Penulisan JavaScript Kode JavaScript biasanya dituliskan dalam bentuk fungsi
yang ditaruh di tag <head> yang dibuka dengan tag <script
type="text/javascript"> .
<script type= "text/
javascript" >
alert( "Halo
Dunia!" );
</script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js
(singkatan dari
JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri,
di bagian awal
<head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan
contoh kode seperti berikut:
javascript"
src= "alamat.js" >
</script>
Skrip di head
Skrip ini akan dieksekusi ketika
dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger
pada event tertentu. Peletakkan skrip di head akan menjamin skrip dimuat
terlebih dahulu sebelum
dipanggil.
<html>
<head>
javascript" >
...
</script>
</head>
</html>
Skrip di body
Skrip ini dieksekusi ketika
halaman dimuat sampai di
bagian <body> .[7] Ketika
menempatkan skrip pada bagian
<body> berarti antara isi dan
JavaScript dijadikan satu bagian.
<html>
<head>
</head>
<body>
javascript" >
...
</script>
</body>
</html>
Jumlah JavaScript di <head> dan
<body> yang ditempatkan pada dokumen tidak terbatas. Skrip eksternal
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam
beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika
harus menulis ulang script yang diinginkan di setiap halaman.
Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen
HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari
dokument HTML.[7] Berkas JavaScript tersebut disimpan dengan ekstensi .js.
[7] JavaScript : js/xxx.js document.write("pesan ini tampil ketika halaman
diload");
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut
"src" pada tag <script> pada
halaman HTML-nya. [7]
<html>
<head>
</head>
<body>
<script src= "xxx.js" >
</script>
<p> Script di atas
berada di berkas
"xx.js" (eksternal) </
p>
</body>
</html>
Biasanya JavaScript digunakan sebagai peralatan (tool/gadget) pada

halaman pengguna. Fungsinya bermacam-macam, misalnya peralatan guna
menambah kategori dengan lebih mudah.
3. Bagaimana Mengaktifkan
Javascript Pada Peramban Web
Anda
Saat ini hampir semua halaman web berisi JavaScript, bahasa pemrograman
yang berjalan pada peramban web pengunjung. Ini membuat halaman web
memiliki fungsi tambahan untuk tujuan tertentu dan jika dinonaktifkan untuk
beberapa alasan, isi atau fungsi dari halaman web menjadi terbatas atau
tidak tersedia. Di sini Anda dapat menemukan petunjuk tentang cara
mengaktifkan JavaScript di lima peramban web yang paling sering
digunakan. Internet Explorer Mozilla Firefox Google Chrome Opera Apple
Safari Javascript diaktifkan di peramban web anda. Jika anda menonaktifkan
JavaScript, teks ini akan berubah.
Instruksi untuk pengembang web Apabila anda ingin menyertakan tautan
halaman ini, untuk menjelaskan setiap pengguna untuk mengaktifkan
javascript dalam lima peramban web yang paling banyak digunakan. Anda
bebas menggunakan kode dibawah ini dan memodifikasinya sesuai
kebutuhan anda.
<noscript>
Agar fungsi di situs ini lebih baik, anda perlu mengaktifkan JavaScript.
Berikut ini adalah

<a href="http://
www.enable-
javascript.com/id/"
target="_blank">
petunjuk cara
mengaktifkan
JavaScript</a> di
peramban web Anda.
</noscript>
Pada enable-javascript.com kita
mengoptimalkan pengguna yang
belum mengaktifkan script
sebanyak mungkin:
The instructions for your browser
are put at the top of the page
All the images are inlined, fullsize, for easy perusing
This developer-centric message is
out of the way.
Kami ingin pengunjungmu untuk
mengaktifkan JavaScript seperti
kamu!
Opera
1. a) Klik "Menu", arahkan penunjuk pada "Settings" kemudian dekatkan
kursor penunjuk pada "Quick
preferences" dan centang kotak "Enable Javascript".
1. b) Jika "Menu bar" muncul, klik "Tools", dekatkan kursor penunjuk pada
"Quick preferences" dan centang kotak "Enable Javascript".
1. a) Internet
1. b) Explorer
1. Pada menu peramban web klik ikon "Tools" dan pilih "Internet Options".
2. Pada jendela "Internet Options" pilih bagian "Security".
3. Pada bagian "Security" klik tombol "Custom level...".
4. Ketika jendela dialog "Security Settings - Internet Zone" terbuka, temukan
bagian "Scripting" section.
5. Pada bagian "Active Scripting" pilih "Enable".
6. Ketika jendela "Peringatan!" tambil dan menanyakan "Are you sure you
want to change the settings for this zone?" pilih "Yes".
7. Pada jendela "Internet Options" klik tombol "OK" dan tutup jendela
peramban web.
8. Klik tombol "Refresh" pada web browser untuk membuka ulang halaman.
MozillaFirefox
1. Pada baris alamat, ketik about:config dan tekan Enter.
2. Klik "I'll be careful, I promise" jika muncul pesan peringatan.
3. Pada kotak pencarian, temukan javascript.enabled.
4. Mengaktifkan pengaturan "javascript.enabled" (klik kanan dan pilih
"Toggle" atau klik dua kali preference) untuk mengubah nilai dari "false"
menjadi "true".
5. Klik tombol "Reload current page" dari peramban web untuk membuka
ulang halaman.
GoogleChrome
1. Pada menu di peramban web klik "Customize and control Google Chrome"
dan pilih "Settings".
2. Pada bagian "Settings" klik "Show advanced settings..."
3. Di bawah "privacy" klik pada "Content settings...".

4. Ketika jendela dialog terbuka, temukan bagian "JavaScript"dan pilih "Allow
all sites to run JavaScript (disarankan)".
5. Klik tombol "OK" dan tutup jendela bowser
6. Tutup tab "Settings".
7. Klik pada tombol "Reload this page" dari browser web untuk membuka
ulang halaman.
Apple Safari
1. Pada menu peramban web, klik "Edit" dan pilih "Preferences".
2. Pada jendela "Preferences" pilih bagian "Security".
3. Di bagian "Security" cari "Web content" , centang kotak "Enable
JavaScript".
4. Klik tombol the "Reload the current page" pada web browser untuk merefresh halaman.
4. Kelebihan Javascript
Ukuran file kecil Skrip dari JavaScript memiliki ukuran yang kecil sehingga
ketika web yang memiliki JavaScript ditampilkan di browser, maka akses
tampilannya akan lebih cepat dibandungkan ketika browser membuka suatu
web yang memiliki skrip Java. Hal ini juga sangat berkaitan 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 Sideyang tidak perlu lagi
ditangani oleh server ketika browser memanggil web dari sebuah server.
- Mudah untuk dipelajari JavaScript merupakan bahasa semi pemrograman
yang merupakan gabungan antara bahasa pemrograman Java dengan
bahasa kode HTML sehingga disebut juga bahasa hybrid. Walaupun
JavaScript merupakan turunan dari Java, namun JavaScript tidak memiliki
aturan serumit Java.
- Terbuka JavaScript tidak terikat oleh hardware maupun software tertentu,

bahkan sistem operasi seperti windows maupun unix. Karena ia bersifat
terbuka, maka ia dapat dibuat maupun dibaca di semua jenis komputer.
Sedangkan kekurangan JavaScript diantaranya adalah : - Skrip tidak
terenkripsi Karena JavaScript bersifat client side, maka skrip yang kita buat di
text editordan telah dijadikan web di server, ketika user me-request web dari
server tersebut, maka sintaks JavaScript akan langsung ditampilkan di
browser. User bisa melihatnya dan menirunya dari source-nya. - Kemampuan
terbatas Walaupun JavaScript mampu membuat bentuk web menjadi
interaktif dan dinamis, namun JavaScript tidak mampu membuat program
aplikasi sendiri seperti Java. - Keterbatasan objek JavaScript tidak mampu
membuat kelas-kelas yang bisa menampung objek-objek tambahan seperti
Java, karena JavaScript telah memiliki objek yang built inpada struktur
bahasanya.
-Koneksi cepat, karena peletakkan program terdapat di sisi client, berukuran
file sangat kecil dan dapat langsung dijalankan di browser.
5.
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
4.Bahasa Pemrograman Yang Cukup Rumit
5.Keamanan dan Penggunaan Yang Keliru
6.Bermasalah Pada Mobile Browser
7.Bermasalah Dengan SEO
SEO memang bukan barang murah. Karena tanpa SEO, alangkah percuma
kita susah-susah membuat sebuah website atau mungkin membeli dengan
harga mahal. Tapi bukan masalah mahalnya SEO yang akan saya bahas, tapi
permasalahan spider (laba-laba) dari mesin pencari yang terkadang tidak
menyukai website yang berisi banyak kode Javascript.
Pernah mendengar mengenai XSS atau mungkin XSRF ? Hmm.. saya sendiri
sebenarnya tidak begitu paham. Namun akan coba saya cuplikan dari mbah
Wikipedia, bahwa XSS merupakan kelemahan Javascript yang terletak pada
Cross-Site-Scripting. Akibat buruknya adalah hacker dapat masuk ke celah
Javascript dan menyisipi beberapa program yang akan mengambil informasi
dan data korban atau pengakses website maupun pemilik situs.
Jika website atau blog Anda sering terkena sasaran Hacker, baik melalui
metode deface atau mengambil keseluruhan fungsi situs. Coba cek dan ricek
dulu beberapa library Javascript yang digunakan, barang kali ada yang
lubang untuk si Hacker menyerang situs Anda.
Oleh karena itu, penggunaan berbagai library Javascript yang terkandung
pada plugin atau modul pada CMS seperti WordPress harus kita perhatikan
secara saksama. Lihat dahulu rating, review, maupun dokumentasi
penggunaannya.
Javascript memang akan tampil dengan sangat baik di browser untuk

komputer Desktop. Tapi coba kita uji dan test terlebih dahulu apakah website
Anda yang telah dijejali dengan kode Javascript dapat berjalan baik pada
device mini seperti smartphone maupun browser handphone ? Jangan
senang dulu, karena beberapa browser mobile tidak mendukung fungsi kode
Javascript.
Bukan tanpa alasan sebenarnya beberapa browser menonaktifkan mode
Javascript, hal ini dikarenakan Javascript sering menghambat dan meleletkan
kecepatan load situs pada device yang memiliki koneksi terbatas. Selain itu,
Javascript juga membutuhkan resource CPU seperti RAM dan Prosesor yang
cukup untuk merender sebuah halaman.
6.Fungsi pada Javascript

Fungsi adalah salah satu bagian yang paling indah dari Javascript. Sebagai
bahasa fungsional Javascript mengimplementasikan fungsi kelas pertama
(first class function). Fungsi dapat disimpan dalam variabel, dikembalikan
oleh fungsi lain, dan dikirimkan sebagai argumen untuk fungsi lainnya.
Implementasi fungsi yang sangat fleksibel seperti ini membuka banyak
kesempatan kepada pengembang untuk menuliskan kode yang bukan hanya
berjalan dengan baik, tetapi juga sangat elegan dan indah.
Sebuah fungsi membungkus satu atau banyak perintah. Setiap kali kita
memanggil fungsi, maka perintah-perintah yang ada di dalam fungsi
tersebut dijalankan. Secara umum fungsi digunakan untuk penggunaan
kembali kode (code reuse) dan penyimpanan informasi (information hiding).
Implementasi fungsi kelas pertama juga memungkinkan kita menggunakan
fungsi sebagai unit-unit yang dapat dikombinasikan, seperti layaknya sebuah
lego. Dukungan terhadap pemrograman berorientasi objek juga berarti fungsi
dapat kita gunakan untuk memberikan perilaku tertentu dari sebuah objek.
Dalam sudut pandang tertentu, kita bahkan dapat mengatakan bahwa
intisari dari pemrograman adalah mengubah atau menguraikan kebutuhan
pengguna menjadi fungsi dan struktur data. Oke, cukup untuk berbicara
tentang cinta penulis terhadap fungsi. Sekarang mari kita lihat langsung
kenapa dan apakah fungsi benar-benar seperti yang diceritakan oleh penulis.
7.
Pembuatan Fungsi pada Javascript
Sebuah fungsi pada Javascript dibuat dengan cara seperti berikut:

function
1
tambah(a, b) {
2
hasil = a + b;
3
return hasil;
4
}
Cara penulisan fungsi seperti ini dikenal dengan nama function declaration,
atau deklarasi fungsi. Terdapat empat komponen yang membangun fungsi
yang baru kita definisikan di atas, yaitu:
1. Kata kunci function, yang memberitahu Javascript bahwa kita akan
membuat fungsi.
2. Nama fungsi, dalam contoh di atas adalah tambah. Dengan
memberikan sebuah fungsi nama maka kita dapat merujuk ke fungsi
tersebut dengan nama yang diberikan. Harus diingat bawa nama
fungsi bersifat opsional, yang berarti fungsi pada Javascript tidak
harus diberi nama. Kita akan membahas tentang hal ini lebih dalam
nanti.
3. Daftar parameter fungsi, yaitu a, b pada contoh di atas. Daftar
parameter ini selalu dikelilingi oleh tanda kurung (()). Parameter boleh
kosong, tetapi tanda kurung wajib tetap dituliskan. Parameter fungsi
akan secara otomatis didefinisikan menjadi variabel yang hanya bisa
dipakai di dalam fungsi. Variabel pada parameter ini diisi dengan nilai
yang dikirimkan kepada fungsi secara otomatis.
4. Sekumpulan perintah yang ada di dalam kurung kurawal ({}). Perintahperintah ini dikenal dengan nama badan fungsi. Badan fungsi
dieksekusi secara berurut ketika fungsi dijalankan.
Penulisan deklarasi fungsi (function declaration) seperti di atas merupakan
cara penulisan fungsi yang umumnya kita gunakan pada bahasa
pemrograman imperatif dan berorientasi objek. Tetapi selain deklarasi fungsi
Javascript juga mendukung cara penulisan fungsi lain, yaitu dengan
memanfaatkan ekspresi fungsi (function expression). Ekspresi fungsi
merupakan cara pembuatan fungsi yang memperbolehkan kita melewatkan
nama fungsi. Fungsi yang dibuat tanpa nama dikenal dengan sebutan fungsi
anonim atau fungsi lambda. Berikut adalah cara membuat fungsi dengan
ekspresi fungsi:
var tambah = function
1
(a, b) {
2
hasil = a + b;
3
return hasil;
4
};
Terdapat hanya sedikit perbedaan antara ekspresi fungsi dan deklarasi
fungsi:
1. Penamaan fungsi. Pada deklarasi fungsi, kita langsung memberikan
nama fungsi sesuai dengan sintaks yang disediakan Javascript.
Menggunakan ekspresi fungsi kita pada dasarnya menyimpan sebuah
fungsi anonim ke dalam variabel, dan nama fungsi adalah nama

variabel yang kita buat. Perlu diingat juga bahwa pada dasarnya
ekspresi fungsi adalah fungsi anonim. Penyimpanan ke dalam variabel
hanya diperlukan karena kita akan memanggil fungsi nantinya.
2. Ekspresi fungsi dapat dipandang sebagai sebuah ekspresi atau
perintah standar bagi Javascript, sama seperti ketika kita menuliskan
kode var i = 0;. Deklarasi fungsi merupakan konstruksi khusus untuk
membuat fungsi. Hal ini berarti pada akhir dari ekspresi fungsi kita
harus menambahkan ;, sementara pada deklarasi fungsi hal tersbut
tidak penting.
Karena pada Javascript sebuah fungsi juga adalah sekaligus sebuah objek,
maka pada buku ini kita akan hampir selalu menggunakan ekspresi fungsi.
Setiap kali kita menciptakan fungsi, pada dasarnya kita membuat sebuah
objek Function baru, dengan nama yang kita berikan. Karenanya, secara
eksplisit menuliskan bahwa kita membuat objek baru dan memperlakukan
objek tersebut sama seperti perintah-perintah lain dalam program akan
menyederhanakan kode program kita, yang pada akhirnya akan
mempermudah kita mengerti kode kita nantinya.
Aturan pembuatan fungsi, baik ekspresi fungsi maupun deklarasi fungsi,
sama dengan aturan penulisan ekspresi. Di mana kita dapat menuliskan
ekspresi, kita dapat mendefinisikan fungsi juga. Karena aturan ini, maka kita
juga dapat mendefinisikan fungsi di dalam fungsi lainnya. Fungsi yang
berada di dalam fungsi lainnya memiliki akses terhadap semua variabel yang
ada pada fungsi penampungnya. Keterhubungan fungsi di dalam fungsi ini
dikenal dengan nama closure. Kita akan membahas tentang closure dan
melihat bagaimana closure memberikan kemampuan ekspresi yang sangat
besar kepada pengembang pada bagian berikutnya.
Note
Terdapat satu lagi cara membuat fungsi pada Javascript, yaitu dengan
menggunakan objek Function. Tetapi kita tidak akan membahas cara ini,
karena cara yang ketiga akan sangat jarang digunakan.
8.
Fungsi sebagai Objek
Sebelum melihat bagaimana fungsi dapat dipanggil, kita akan melihat

keterhubungan antara fungsi dengan objek terlebih dahulu. Kita perlu
mengerti hubungan antara fungsi dan objek karena terdapat empat cara
pemanggilan fungsi pada Javascript, dan dua dari empat cara tersebut
melibatkan konsep fungsi sebagai objek.
Fungsi pada javascript adalah sebuah objek. Sebagai sebuah objek, semua
fungsi dalam Javascript merupakan turunan dari Function.prototype.
Function.prototype juga adalah merupakan turunan dari Object.prototype,
sama seperti semua objek-objek lain dalam Javascript. Perbedaan utama
fungsi dengan objek lain pada umumnya adalah fungsi dapat dipanggil, dan
memiliki dua buah properti khusus, yaitu konteks pemanggilan fungsi dan
kode pada isi badan fungsi. Kegunaan dari dua buah properti khusus ini akan
kita lihat pada bagian selanjutnya.
Sebagai sebuah objek, fungsi juga dapat kita perlakukan sama dengan objek
lainnya. Pada bagian sebelumnya kita telah melihat bahwa fungsi dapat
disimpan di dalam variabel. Fungsi juga dapat kita simpan di dalam array
atau objek lain, dikirimkan sebagai argumen dari fungsi lain, atau
dikembalikan dari sebuah fungsi. Sama seperti objek, kita juga dapat
mengaitkan fungsi (method) kepada fungsi.
9.
Pemanggilan Fungsi
Sebuah fungsi dapat dipanggil untuk menjalankan seluruh kode yang ada di
dalam fungsi tersebut, sesuai dengan parameter yang kita berikan.
Pemanggilan fungsi dilakukan dengan cara menuliskan nama fungsi tersebut,
kemudian mengisikan argumen yang ada di dalam tanda kurung.
Misalkan fungsi tambah yang kita buat pada bagian sebelumnya:
var tambah = function
1
(a, b) {
2
var hasil = a + b;
3
return hasil;
4
};
dapat dipanggil seperti berikut:
1
tambah(3,
5);
Yang terjadi pada kode di atas adalah kita menggantikan a dan b masingmasing dengan 3 dan 5. Seperti yang dapat dilihat, hal ini berarti pengisian
argumen pada saat pemanggilan fungsi harus berurut, sesuai dengan
deklarasi fungsi.
Sama seperti sebuah variabel, fungsi juga mengembalikan nilai ketika
dipanggil. Dalam kasus di atas, tambah(3, 5) akan mengembalikan nilai 8.
Nilai ini tentunya dapat disimpan ke dalam variabel baru, atau bahkan
dikirimkan sebagai sebuah argumen ke fungsi lain lagi:
var simpan = tambah(3, 5); // simpan ===
8
1 tambah(simpan, 2);
//
2 mengembalikan 10
3
4 tambah(tambah(3, 5), 2) // juga
5 mengembalikan 10
tambah(tambah(2, 3), 4) //
mengembalikan 9
Fungsi akan mengembalikan nilai ketika kata kunci return ditemukan. Kita
dapat mengembalikan fungsi kapanpun, dan fungsi akan segera berhenti
ketika kata kunci return ditemukan. Berikut adalah contoh kode yang
memberikan gambaran tentang pengembalian nilai fungsi:
1
2
3
4
5
6
7
8
9
1
0
var naikkan = function (n) {

var hasil = n + 10;
return hasil;
// kode di bawah tidak
dijalankan lagi
hasil = hasil * 100;
}
naikkan(10); // mengembalikan
20
naikkan(25); // mengembalikan
35
Kita juga dapat langsung memberikan ekspresi kepada return, dan ekspresi
tersebut akan dijalankan sebelum nilai dikembalikan. Hal ini berarti fungsi
tambah maupun naikkan yang sebelumnya bisa disederhanakan dengan
tidak lagi menyimpan nilai di variabel hasil terlebih dahulu:
1
2
3
4
5
6
7
8
var naikkan = function (n) {

return n + 10;
}
var tambah = function (a, b) {
return a + b;
}
9
1
0
1
1
tambah(4, 4);
//
mengembalikan 8
naikkan(10);
//
mengembalikan 20
tambah(naikkan(5), 7); //
mengembalikan 22
Fungsi pada Javascript juga akan selalu mengembalikan fungsi. Ketika tidak
menemukan perintah return, Javascript akan mengembalikan undefined pada
akhir fungsi.
Pola Pemanggilan Fungsi

Ketika sebuah fungsi dipanggil, secara otomatis Javascript akan memberikan
dua nilai tambahan kepada fungsi tersebut. Kedua nilai tambahan ini
diberikan bersamaan dengan pemberian nilai argumen fungsi. Adapun kedua
nilai yang diberikan adalah this dan arguments.
Nilai arguments merupakan sebuah objek yang mirip dengan array, dan
berisi seluruh argumen yang diberikan kepada fungsi. Kita akan membahas
penggunaan nilai ini pada bagian selanjutnya.
Nilai this isinya bergantung kepada cara kita memanggil fungsi. Cara
pemanggilan fungsi dikenal dengan nama pola pemanggilan (invocation
pattern) dari fungsi tersebut. Terdapat empat pola pemanggilan fungsi yang
ada pada Javascript, yaitu:
1. Method Invocation Pattern,
2. Function Invocation Pattern,
3. Constructor Invocation Pattern, dan
4. Indirect Invocation Pattern.
Mari kita lihat maksud dari masing-masing pola pemanggilan, dan perbedaan
nilai this pada setiap pola.
Method Invocation Pattern

Sebuah fungsi yang dijadikan sebagai properti dari objek dikenal dengan
istilah method. Method merupakan salah satu konsep dasar dalam
pemrograman berorientasi objek, yang digunakan untuk memberikan sebuah
perintah standar bagi sebuah objek. Berikut adalah contoh dari sebuah
method:
var papanSkor = {
1
skor: 0,
2
tambahSkor: function (nilai) {
3
this.skor += (typeof nilai ===
4
"number")? nilai : 1;
5
},
6
ambilSkor: function () {
7
return this.skor;
8
}
9
};
Objek papanSkor yang barusan kita buat memiliki satu buah properti, yaitu
skor dan dua buah method, yaitu tambahSkor dan ambilSkor.
Method ambilSkor mengembalikan nilai dari properti skor yang sekarang,
sementara tambahSkor akan menambahkan nilai skor sesuai dengan
parameter yang diberikan oleh pengguna method. Method tambahSkor juga
memberikan tambahan sesuai dengan tipe data yang dikirimkan: jika
parameter yang diberikan merupakan sebuah angka, maka penambahan
dilakukan sesuai dengan jumlah angka yang dikirimkan, jika tidak maka skor
akan bertambah satu saja.
Sama seperti properti, pemanggilan method dapat dilakukan dengan dua
cara, yaitu dengan menggunakan tanda titik (.) dan kurung siku ([]):
papanSkor.ambilSkor()
// mengembalikan 0
1 papanSkor.tambahSkor(1) // mengembalikan
2 undefined
3 papanSkor["ambilSkor"]() // mengembalikan 1
4 papanSkor["tambahSkor"](2) // mengembalikan
5 undefined
papanSkor.ambilSkor()
// mengembalikan 3
Dari ekspreimen yang kita lakukan pada kode di atas, kita dapat melihat
bahwa properti this berisi objek yang menampung dirinya. Dalam hal ini nilai
this pada Javascript tidak berbeda dengan nilai this pada bahasa
pemrograman berorientasi objek lain pada umumnya. Artinya kita dapat
mengakses seluruh properti maupun method dari objek itu sendiri ketika
menggunakan this.
Function Invocation Pattern

Ketika sebuah fungsi bukan merupakan properti dari sebuah objek (method),
nilai tambahan this akan dihubungkan ke objek global Javascript, yaitu
window. Mari kita lihat bagaimana this dikaitkan ke objek global:
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
// Variabel nilai disimpan dalam objek global.

// Objek global Javascript secara standar
adalah window
// sehingga nilai akan disimpan dalam
window.nilai
var nilai = 100;
nilai;
// mengembalikan 100
window.nilai; // mengembalikan 100
var kurang = function (n) {
// this.nilai merupakan window.nilai (!)
this.nilai = this.nilai - n;
};
kurang(10);
nilai;
// mengembalikan 90 (!)
window.nilai; // mengembalikan 90 (!)
// Hal yang sama berlaku untuk fungsi di dalam
fungsi juga
var tambah_sepuluh = function () {
var tambah = function (n) {
// this.nilai merupakan window.nilai (!!!)
this.nilai = this.nilai + n;
};
tambah(10);
};
nilai; // mengembalikan 90
tambah_sepuluh();
nilai; // mengembalikan 100 (!!!)
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
Pada kode di atas, kita dapat melihat bagaimana nilai this di dalam fungsi
kurang maupun tambah terikat dengan variabel global. Tidak peduli berapa
tingkat fungsi di dalam fungsi yang kita buat, variabel this tetap akan
mengakses objek global. Hal ini tidak hanya berbeda dengan pada bahasa
pemrograman lain, tetapi merupakan salah satu kesalahan besar dalam
rancangan Javascript. Pada bahasa yang memiliki fitur fungsional dan objek
lainnya, this akan mengikat pada fungsi induk dari fungsi tersebut. Dalam
contoh di atas, this pada fungsi tambah akan mencari variabel nilai milih
fungsi tambah_sepuluh.
Kesalahan perancangan Javascript ini sangat fatal, karena teknik
memanfaatkan fungsi di dalam fungsi (inner function) merupakan salah satu
teknik mendasar dan sangat berguna dalam pemrograman fungsional. Tetapi
setidaknya untuk inner function dari sebuah method kita memiliki solusi
untuk memperbaiki hal ini, yaitu dengan menyimpan nilai this pada fungsi
luar ke dalam sebuah variabel. Fungsi yang berada di dalam fungsi luar
kemudian dapat mengakses instan objek dengan menggunakan variabel
tersebut, seperti berikut:
1
2
3
4
5
6
7
8
9
// kita menggunakan objek papanSkor yang di

atas kembali
papanSkor.hattrick = function () {
// variabel that dibuat agar fungsi
tambah_tiga
// dapat mengakses objek papanSkor.
var that = this;
var tambah_tiga = function() {
1
0
// jika kita menggunakan this di sini,
1
// maka kita akan mengakses variabel
1
global skor,
1
// yang tidak ada.
2
that.skor = that.skor + 3;
1
};
3
1
tambah_tiga();
4
};
1
5
Sebagai eksperimen, coba ganti variable that di atas dengan variabel this,
dan lihat efeknya!
Note
Nama variabel that merupakan perjanjian tak tertulis (konvensi) untuk solusi
ini. Meskipun tidak ada aturan untuk wajib menggunakan that, menggunakan
nama ini akan mempermudah pengembang lain yang harus merawat kode
anda (termasuk anda sendiri di masa depan!).
Constructor Invocation Pattern

Sebuah fungsi yang dipanggil dengan diawali dengan perintah new pada
Javascript dikenal dengan istilah constructor invocation. Setiap kali sebuah
fungsi dipanggil dengan prefiks new, maka fungsi tersebut akan otomatis
mengembalikan objek baru pada akhir fungsi, meskipun kita tidak
memanggil perintah return. Objek yang dikembalikan ini akan dihubungkan
kepada prototype dari fungsi yang dipanggil, dan this diikatkan kepada objek
baru ini.
Bingung? Mari kita lihat contoh kode:
1
2
3
4
5
6
7
8
9
1
// Ketika dipanggil dengan new, fungsi Manusia

akan
// mengembalikan sebuah objek baru yang
memiliki
// satu properti, yaitu "nama".
var Manusia = function (nama) {
this.nama = nama;
};
var andi = new Manusia("Andi");
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
andi.nama; // mengembalikan "Andi"

andi;
// mengembalikan { nama: 'Andi' }
// Seperti layaknya sebuah objek, kita dapat
menambahkan
// method baru kepada seluruh objek Manusia
yang telah
// dibuat.
Manusia.prototype.usia = function (usia) {
this.usia = (typeof usia === "number")?
usia: 0;
};
andi.usia = 27;
andi.usia; // mengembalikan 27
andi;
// mengembalikan { nama: 'Andi', usia:
27 }
Perhatikan bagaimana pada fungsi Manusia di atas kita sama sekali tidak
memanggil perintah return, dan secara otomatis andi diisikan dengan
sebuah objek baru ketika kita memanggil Manusia dengan perintah new.
Juga seperti objek pada Javascript, ketika kita menambahkan sebuah method
baru ke Manusia, andi yang hanyalah salah satu turunan Manusia juga
menerima method baru tersebut.
Fungsi yang dirancang untuk dipanggil bersamaan dengan new seperti
Manusia dikenal dengan nama constructor. Constructor juga secara konvensi
ditulis dengan awalan huruf kapital, agar tidak membingungkan
pengembang. Hal ini sangat penting karena sebuah fungsi constructor yang
tidak dipanggil dengan perintah new akan memberikan efek samping yang
membahayakan, yaitu memenuhi atau mengubah nilai variabel global. Baca
kembali bagian Function Invocation Pattern untuk melihat kenapa hal ini bisa
terjadi.
1 var mari = Manusia("Mari");
2
mari;
// mengembalikan undefined
3
nama;
// mengembalikan Mari (!)
4
mari.nama; // mengembalikan TypeError:
5
// Cannot read property 'nama' of
6
undefined
Karena memiliki potensi berbahaya seperti ini, sangat tidak disarankan untuk
menggunakan fungsi constructor. Javascript bukanlah bahasa berorientasi
objek class-based. Pergunakan Javascript sebagaimana ia dirancang untuk
digunakan, yaitu bahasa pemrograman prototype-based. Pada bagian
selanjutnya nanti kita akan melihat bagaimana kita dapat membuat objek
pada Javascript dengan lebih baik, yaitu menggunakan closure.
Indirect Invocation Pattern

Karena fungsi pada Javascript juga adalah merupakan sebuah objek, maka
fungsi juga dapat memiliki method. Terdapat beberapa method standar yang
selalu ada pada fungsi Javascript, tetapi di bagian ini kita akan melihat dua
method khusus yang berhubungan dengan nilai this. Kedua method khusus
ini yaitu call dan apply.
Method apply digunakan jika kita ingin mengirimkan argumen ke sebuah
fungsi dengan menggunakan array. Terdapat dua parameter yang harus kita
kirimkan ke apply, yaitu objek yang ingin kita ikatkan kepada this, dan
parameter keduanya adalah sebuah array yang akan digunakan sebagai
parameter yang dikirimkan ke fungsi. Dengan begitu, apply memberikan kita
fasiliats untuk menentukan nilai this.
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
var manusia = {
nama: "Adam",
panggil: function (sapaan) {
return sapaan + " " + this.nama + "!";
}
};
manusia.panggil("Halo"); // mengembalikan "Halo Adam!"
var hawa = {
nama: "Hawa"
};
manusia.panggil.apply(hawa, ["Bonjour"]); // mengembalikan
"Bonjour Hawa!"
1
4
Kita juga dapat mengirimkan null sebagai parameter pertama dari apply
untuk menggunakan objek global sebagai this.
// mengembalikan "Guten Tag undefined!" karena tidak ada
1 variabel "nama"
2 // pada konteks global
3 manusia.panggil.apply(null, ["Guten Tag"]);
4
5 // simpan variabel "nama" dengan isi "Nuh" pada konteks
6 global
7 nama = "Nuh";
8
9 // mengembalikan "Guten Tag Nuh!"
manusia.panggil.apply(null, ["Guten Tag"]);
Hal ini memungkinkan kita untuk menggunakan fungsi global secara efektif.
Misalnya jika kita ingin mencari nilai maksimal dari sebuah array, kita dapat
langsung menggunakan Math.max daripada dengan perulangan:
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
var bil = [5, 6, 2, 3, 7];

// Sama dengan Math.apply(bil[0],
bil[1], ...)
// berapapun ukuran bil fungsi ini akan
tetap berjalan
var max = Math.max.apply(null, bil);
max; // mengembalikan 7
// Tanpa menggunakan apply
// Kita tidak dapat menggunakan Math.max
di sini
// karena panjang array tidak akan selalu
sama.
max = -Infinity;
for (var i = 0; i < bil.length; i++) {
if (bil[i] > max)
max = bil[i];
}
max; // mengembalikan 7
1
7
1
8
1
9
Satu hal yang perlu diingat ketika menggunakan apply adalah bahwa
Javascript memiliki batas jumlah argumen untuk fungsi, yang berbeda-beda
pada setiap browser. Jika array yang dikirimkan melebihi batas jumlah
argumen maka apa yang terjadi tidak dapat diketahui (tergantung kepada
pembuat browser).
Method call sendiri berfungsi sama seperti apply, dengan hanya satu
perbedaan: call menerima *daftar argumen* seperti fungsi biasa,
sementara apply menerima *array argumen*. Mengambil contoh manusia
sebelumnya, kita dapat memanggil call seperti berikut:
// kedua fungsi di bawah mengembalikan
1
"Bonjour Hawa!"
2
manusia.panggil.apply(hawa, ["Bonjour"]);
3
manusia.panggil.call(hawa, "Bonjour");
4
5
// kedua fungsi di bawah hasilnya sama
6
Math.max.apply(null, bil);
7
Math.max.call(null, bil[0], bil[1], ...);
Argumen Fungsi
Selain this, fungsi pada Javascript juga memiliki satu buah nilai tambahan
lagi, yaitu arguments. arguments merupakan nilai yang menampung seluruh
argumen yang dikirimkan kepada fungsi, termasuk argumen-argumen yang
berlebihan. Jika fungsi hanya meminta dua buah argumen dan pemanggil
fungsi mengirimkan empat buah argumen, kita dapat mengakses argumen
ketiga dan keempat menggunakan arguments. Hal ini berarti kita dapat
membuat fungsi yang bisa menerima jumlah argumen tak tentu, seperti
fungsi Math.max yang kita gunakan sebelumnya.
Contoh lain, kita dapat membuat fungsi yang menghitung total dari seluruh
argumen yang dikirimkan kepada fungsi tersebut:
1 var total = function () {
2
var i, hasil = 0;
3
for (i = 0; i < arguments.length; i++) {
4
hasil = hasil + arguments[i];
5
}
6
7
return hasil;
8 };
9
1 total(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); //
0 mengembalikan 55
Meskipun pada kode di atas kita menggunakan arguments seperti layaknya
array (akses dengan [], properti length), sayangnya arguments bukan
array. arguments merupakan sebuah objek yang mirip array. Selalu ingat
hal ini agar tidak menggunakan arguments sebagai array, karena
menggunakan arguments sebagai array dapat menyebabkan hal-hal yang
tak terbayangkan seperti gangguan pernafasan, serangan jantung, kanker,
dan error program tiba-tiba.
Scope dan Function Scope

Dalam konteks bahasa pemrograman, scope atau cakupan merupakan
sebuah aturan yang mengendalikan waktu hidup (lifetime) dan akses dari
sebuah nilai dalam program. Nilai yang dikendalikan oleh scope umumnya
adalah variabel. Scope sangat penting dalam pemrograman, terutama untuk
memudahkan kita dalam menamakan variabel dan manajemen memori.
Dalam Java misalnya, sebuah variabel yang dibuat dalam scope lokal akan
segera dihapuskan dari memori begitu program keluar dari scope tersebut
untuk menghemat memori.
Kebanyakan bahasa pemrograman mengimplementasikan konsep scope
seperti yang ada pada Java. Konsep scope ini dikenal dengan nama block
scope. Pada block scope, sebuah variabel yang diciptakan di dalam blok
(ditandai dengan {} pada Java dan keluarga C) tidak dapat diakses dari luar
blok tersebut. Variabel juga biasanya dihapus ketika program keluar dari blok
jika bahasa mendukung manajemen memori otomatis. Block scope sangat
intuitif dan mudah dipahami, serta hampir selalu digunakan oleh kebanyakan
bahasa pemrograman.
Javascript, sayangnya, bukanlah bahasa pemrograman biasa. Meskipun
Javascript menggunakan sintaks yang sama dengan keluarga bahasa C,
Javascript tidak memiliki block scope. Aturan scoping yang digunakan oleh
Javascript adalah function scope. Hal ini mengakibatkan banyak kesalah
pahaman tentang aturan scoping di Javascript. Sekarang kita akan
menjernihkan kesalah pahaman tersebut.
Pada Javascript, sebuah blok *tidak* membuat scope baru. Perhatikan kode
berikut:
var bil = 1;
console.log(bil); //
1
mencetak 1
2
3
if (bil > 0) {
4
var bil = 2;
5
6
mencetak 2
7
}
8
9
mencetak 2 (!)
Pada kode di atas, ketika kita menuliskan var bil = 2; kita tidak membuat
sebuah variabel lokal bernama bil di dalam blok if. Kita hanya mengisikan
kembali bil dengan nilai baru, yaitu 2. Pada bahasa keluarga C, jika kita
mencetak bil pada akhir program kita akan mendapatkan nilai 1, karena bil
yang ada di dalam if berbeda dengan bil yang ada di luarnya. Hal ini sedikit
tidak intuitif, terutama untuk yang telah mempelajari bahasa pemrograman
lain, dan jika tidak hati-hati kita dapat secara tidak sadar membuat banyak
variabel global.
Aturan scoping yang dimiliki Javascript hanyalah function scope. Function
scope berarti semua parameter dan variabel yang dibuat di dalam sebuah
fungsi tidak dapat diakses di luar fungsi tersebut. Perhatikan kode berikut:
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
var x = 10;
console.log(x); // mencetak 10
var tambah = function (n) {
var x = 3;
return n + x;
}
var y = tambah(15);
console.log(y); // mencetak 18
(15 + 3)
Dalam contoh kode kali ini, kita dapat melihat bagaimana Javascript
membedakan x yang ada di luar fungsi tambah dengan x yang ada di dalam
fungsi. Begitu keluar dari fungsi tambah, nilai x yang diberikan adalah x yang
di luar fungsi. Aturan ini mirip dengan aturan yang ada dalam C. Dengan
memanfaatkan pengetahuan function scope ini, kita dapat membuat scope
lokal seperti block scope dalam Javascript dengan memanfaatkan fungsi
anonim. Mari kita lihat bagaimana hal ini dicapai:
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
var bil = 1;
console.log(bil); // mencetak 1
if (bil > 0) {
// Buat sebuah fungsi anonim dan langsung
eksekusi fungsi
(function() {
var bil = 2;
console.log(bil); // mencetak 2
})();
}
console.log(bil); // mencetak 1 (!)
Pada contoh kode di atas, nilai bil yang ada di luar if berbeda dengan bil
yang ada di dalam if. Kita membuat sebuah fungsi anonim dalam if, dengan
menggunakan semantik (function() { // isi fungsi }). Tanda kurung (()) yang
membungkus fungsi digunakan untuk memastikan fungsi dijalankan sebagai
ekspresi, bukan perintah. Sementara tanda kurung yang ada di akhir fungsi
bertugas untuk mengeksekusi fungsi anonim yang baru dibuat.
Dengan membuat sebuah fungsi anonim seperti contoh di atas, kita
memastikan seluruh variabel yang ada di dalam fungsi anonim tersebut
memiliki scope yang berbeda dengan variabel lain di luar fungsi anonim.
Eksekusi fungsi akan memastikan seluruh kode di dalam fungsi berjalan,
karena ingat bahwa kode di dalam fungsi tidak akan dijalankan kalau fungsi
tidak dipanggil.
Meskipun kita telah dapat membuat block scope dalam Javascript, terkadang
kita tetap saja dapat secara tidak sengaja membuat kesalahan program
karena asumsi scope yang salah. Hal ini terutama terjadi ketika kita
berpindah dari bahasa yang digunakan di sisi server ke Javascript. Untuk
menghindari kesalahan ini, biasanya praktisi Javascript menuliskan semua
deklarasi variabel sedini mungkin, ketika program atau fungsi baru akan
dimulai. Hal ini bertentangan dengan bahasa pemrograman lain yang
biasanya menyarankan untuk mendeklarasikan variabel hanya ketika akan
menggunakan variabel tersebut. Walaupun sedikit berbeda, deklarasi

variabel sedini mungkin akan membantu program Javascript kita: jika
menemukan var di tengah-tengah fungsi, seorang pengembang Javascript
berpengalaman akan mengecek scope variabel tersebut, dan memindahkan
deklarasi ini ke awal fungsi / program.
Closure
Salah satu kelebihan utama function scope adalah fungsi yang ada di dalam
fungsi lainnya juga memiliki akses terhadap semua nilai-nilai yang dimiliki
fungsi penampungnya. Ketika sebuah fungsi menggunakan dan bergantung
kepada nilai yang ada di luar dirinya, fungsi tersebut dikenal dengan nama
closure. Mari kita lihat contoh sebuah closure:
var jalan = function () {
1
var sapaan = "Halo ",
2
sapa = function () {
3
console.log(sapaan +
4
"pembaca!");
5
};
6
7
sapa();
8
};
9
1
jalan(); // mencetak "Halo
0
pembaca!"
Fungsi jalan memiliki dua buah nilai lokal, yaitu variabel sapaan dan fungsi
sapa. Fungsi sapa menggunakan variabel sapaan, dan akan mencetak teks
yang berbeda-beda tergantung dengan isi dari variabel sapaan. Variabel
sapaan dikenal dengan nama variabel bebas karena tidak terikat dengan
apapun, dan fungsi sapa merupakan closure karena menggunakan variabel
bebas yang dibuat di luar dirinya.
Oke, closure keren dan kelihatannya sederhana. Pertanyaan selanjutnya
tentunya adalah, apa kegunaan utama dari closure? Pada contoh di atas,
kita bisa saja langsung menerima parameter sapaan pada fungsi jalan, dan
langsung mencetak sapaan sesuai dengan fungsi sapa kan? Terus kenapa
kita harus memanggil fungsi sapa lagi di akhir jalan? Kalau bisa mudah,
kenapa harus dibuat sulit seperti sekarang?
Jawaban dari seluruh pertanyaan-pertanyaan di atas adalah potensi
kemampuan penyusunan (komposisi) fungsi serta penggunaan kembali kode
yang ditawarkan oleh closure. Contoh di atas memang tidak memperlihatkan
penggunaan closure yang optimal. Mari kita tingkatkan fungsi jalan sedikit
demi sedikit. Misalkan, kita dapat membuat fungsi ini mengembalikan fungsi
lain, sehingga pengguna fungsi dapat membangun sapaannya sendiri:
1
2
3
4
5
6
7
8
9
1
0
1
1
var buatSapaan = function (sapaan) {

return function () {
console.log(sapaan + "
pembaca!");
}
};
var sapaanJerman =
buatSapaan("Guten");
var sapaanInggris =
buatSapaan("Hello");
sapaanJerman(); // mencetak "Guten
pembaca!"
sapaanInggris(); // mencetak "Hello
pembaca!"
Pada contoh di atas, kita mengirimkan nilai berupa kata sapaan dalam
bahasa yang diinginkan kepada buatSapaan, dan buatSapaan akan membuat
sebuah fungsi baru kepada kita. Fungsi baru ini bersifat anonim, dan dapat
mencetak kata sapaan yang kita berikan sebelumnya. Terdapat dua hal yang
menarik dari contoh kode di atas:
1. Variabel (parameter) sapaan adalah milik buatSapaan, tetapi variabel
ini tetap dapat digunakan oleh sapaanJerman dan sapaanInggris ketika
buatSapaan telah selesai dijalankan. Biasanya variabel sapaan akan
dihapus begitu fungsi buatSapaan selesai dijalankan.
2. Meskipun menggunakan (dan bergantung kepada) sapaan, baik
sapaanJerman maupun sapaanInggris tidak dapat mengakses
:code:`sapaan`. Hal ini berarti kedua fungsi ini tidak dapat mengganti
nilai sapaan lagi!
Fungsi sapaanInggris dan sapaanJerman juga adalah merupakan closure.
Lengkapnya, sebuah closure terdiri dari dua komponen: fungsi dan
lingkungan eksekusi fungsi tersebut. Lingkungan dari fungsi berisi variabel
maupun fungsi lokal yang ada ketika fungsi tersebut dibuat. Closure
dapat mengakses dan menggunakan nilai dalam lingkungannya, tetapi
pengguna closure tidak mendapatkan akses tersebut.
Fungsi buatSapaan masih dapat kita kembangkan lebih lanjut lagi, misalkan
dengan menambahkan parameter pada closure yang dikembalikan:
1
2
3
4
5
6
7
8
9
1
0
1
1
var buatSapaan = function (sapaan) {

return function (target) {
console.log(sapaan + " " + target +
"!");
}
};
var sapaanJerman = buatSapaan("Guten");
var sapaanInggris = buatSapaan("Hello");
sapaanJerman("Soryu"); // mencetak
"Guten Soryu!"
sapaanInggris("Holmes"); // mencetak "Hello
Holmes!"
Pada contoh kali ini, baik sapaanJerman maupun sapaanInggris dapat

menerima sebuah parameter: nama yang akan disapa. Kita dapat mengubah
dan menambahkan banyak fungsionalitas lain lagi pada buatSapaan, tetapi
poin yang paling penting adalah kita dapat menuliskan fungsi yang
membuat fungsi lain secara dinamis. Para pengembang program
berorientasi objek mengenal hal ini dengan nama factory.
Salah satu hal penting yang juga ditawarkan oleh closure adalah akses nilai
lingkungannya. Karena kita dapat mengakses dan mengubah nilai pada
lingkungan closure, maka kita juga dapat memanfaatkan closure untuk
membuat sebuah objek yang memiliki properti private. Bayangkan kalau kita
membuat closure yang mengembalikan objek:
1 var penghitung = function () {
2
// variabel hitungan di sini menjadi
3
// variabel private yang tidak dapat
4
// diakses dari luar objek.
5
var hitungan = 0;
6
7
return {
8
tambahHitungan: function () {
9
hitungan = hitungan + 1;
1
},
0
ambilNilai: function () {
1
return hitungan;
1
}
1
};
2 };
1
3 var jumlahHarimau = penghitung();
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
jumlahHarimau.hitungan;
olah tidak ada)
// undefined (seolah-
jumlahHarimau.tambahHitungan();
jumlahHarimau.ambilNilai();
// mengembalikan 1
jumlahHarimau.ambilNilai();
// mengembalikan 3
Dalam contoh di atas, fungsi penghitung pada dasarnya adalah sebuah

constructor karena fungsi ini membuat objek untuk kita. Keuntungan
tambahan dari membuat objek dengan cara ini yaitu kita bisa membuat
properti privat. Method tambahHitungan dan ambilNilai sebagai closure tetap
dapat mengakses hitungan, karena hitungan masih merupakan variabel
dalam lingkungan closure. Karena objek yang dikembalikan tidak diikatkan
dengan hitungan, maka kita tidak dapat mengakses hitungan melalui objek
yang dihasilkan ini. Perhatikan bagaimana pada kode di atas ketika kita
mencoba mengakses hitungan kita diberikan nilai undefined, seolah-oleh
variabel tersebut tidak ada.
Properti privat memiliki sangat banyak kegunaan, terutama kalau kita
merancang pustaka atau framework untuk digunakan orang lain. Ketika kita
menambahkan fungsionalitas yang masih bersifat eksperimental misalnya,
biasanya kita tidak ingin seluruh variabel yang digunakan oleh fungsi
tersebut ke pengguna pustaka. Masih ada banyak kegunaan lain dari properti
privat, tetapi kita tidak akan membahasnya sekarang.
Terakhir, kita juga dapat membuat sebuah objek secara langsung dengan
mengeksekusi closure begitu selesai dibuat. Berikut adalah contoh
pembuatannya:
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
var penghitung = (function () {

var hitungan = 0;
return {
tambahHitungan: function ()
{
hitungan = hitungan + 1;
},
ambilNilai: function () {
return hitungan;
}
};
})();
penghitung.tambahHitungan();
penghitung.ambilNilai();
//
mencetak 1
penghitung.ambilNilai();
//
mencetak 4
Sampai bagian ini, kita telah melihat bagaimana menggunakan fungsi untuk
tidak hanya membuat objek, tetapi juga membuat fungsi lain secara dinamis.
Kita akan melihat lebih banyak lagi contoh-contoh pemanfaatan fungsi
sebagai alat komposisi, abstraksi, maupun penggunaan kembali kode pada
bab selanjutnya.
Kesalahan umum Pembuatan Closure
Sebelum menutup pembahasan mengenai fungsi, kita akan melihat satu

kesalahan umum yang sering ditemui ketika membuat closure. Kesalahan
yang umum dilakukan ini sangat halus, sehingga seringkali menjebak
bahkan seorang penegmbang yang berpengalaman sekalipun. Kesalahan
seperti apa yang akan kita lihat?
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
var daftarFungsi = [];

var i;
for (var i = 0; i < 3; i++) {
daftarFungsi.push(function () {
return i;
});
}
daftarFungsi[0](); //
mengembalikan 3 (!)
mengembalikan 3 (!)
mengembalikan 3 (!)
Pada kode di atas, closure yang dibuat untuk mengisikan daftarFungsi akan
selalu mengembalikan 3. Secara intuitif, kita akan berasumsi bahwa karena
nilai i yang diikatkan ke masing-masing closure berbeda isinya (0, 1, dan 2)
maka ketika fungsi yang dipanggil kita juga akan mendapatkan 0, 1, dan 2.
Hal ini terjadi karena closure yang dibuat diikatkan kepada variabel i, bukan
nilai variabel i ketika closure dibuat.
Solusi umum dari kesalahan ini adalah dengan membuat closure tambahan:
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
var daftarFungsi = [],

i,
pembuatFungsi = function (n)
{
return function () {
return n;
}
};
for (var i = 0; i < 3; i++) {
daftarFungsi.push(pembuatFung
si(i));
}
1
3
1
4
1
5
mengembalikan 0
mengembalikan 1
mengembalikan 2
Sederhananya, hindari pembuatan fungsi di dalam perulangan. Selain

menghabiskan banyak memori, pembuatan fungsi di dalam perulangan juga
rawan akan kesalahan seperti yang dijelaskan di atas. Jika terpaksa harus
mengikatkan fungsi ke dalam banyak nilai (misalnya membuat semua
elemen <a> melakukan sesuatu yang sama ketika di klik), gunakan teknik
fungsi pembantu yang mengembalikan closure seperti kode di atas.
1. PENGERTIAN
HTML
HTML adalah singkatan dari HyperText Markup Language yaitu

bahasa pemrograman standar yang digunakan untuk membuat sebuah
halaman web, yang kemudian dapat diakses untuk menampilkan
berbagai informasi di dalam sebuah penjelajah web Internet (Browser) .
HTML dapat juga digunakan sebagai link link antara file-file dalam situs
atau dalam komputer dengan menggunakan localhost, atau link yang
menghubungkan antar situs dalam dunia internet.
Supaya dapat menghasilkan tampilan wujud yang terintegerasi
Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII

sehingga menjadi halaman web dengan perintah-perintah HTML.
HTML merupakan sebuah bahasa yang bermula bahasa yang
sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang
disebut Standard Generalized Markup Language (SGML ).
Sekarang ini HTML merupakan standar Internet yang dikendalikan dan
didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C).
Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert
dengan Caillau TIM pada saat mereka bekerja di CERN (CERN
merupakan lembaga penelitian fisika energi tinggi di Jenewa)
2. SEJARAH
HTML
Hypertext Markup Language (HTML) adalah bahasa yang digunakan

untuk menulis halaman web. HTML merupakan pengembangan dari standar
pemformatan dokumen teks yaitu Standard Generalized Markup Language
(SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang
dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.
HTML merupakan sebuah standar yang digunakan secara luas untuk
menampilkan halaman web. Saat ini HTML merupakan standar Internet yang
didefinisikan dan dikendalikan oleh World Wide Web Consortium (W3C).
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan
dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990
HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan
HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik
dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan
November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini
merupakan penyempurnaan dari HTML+ (1993).
Pertama kali muncul internet berbasis teks, web yang sangat monoton hanya
berisikan teks yang kurang menarik, seperti halnya sebuah file.txt. Dalam
mengaksesnya user menggunakan sebuah terminal, itu sangat tidak
menyenangkan. Berikut adalah rincian perkembangan HTML :
3. PERKEMBANGAN
HTML
Perkembangan website tidak lepas yang namanya script/tag HTML

(Hypertext Markup Language). Banyak orang bilang HTML itu bahasa
yang mudah sederhana dan struktur dan sering pula di anggap remeh
karena kemampuan HTML itu sendiri, jauh di bawah Java Script (client
side) apalagi di bandingkan dengan script server side seperti PHP, ASP,
ASPX, dan bahasa lain sebagainya.
Awal pertama di perkenalkan yang namanya HTML ini sekita tahun

1991 yang hanya mencakup 22 elemen dan kemudian di lanjutkan
dengan HTML +, maka di dalam perkembangan HTML tidak di kenal yang
namanya HTML1. Dan pada tahun 1995 barulah kemudian di perkenalkan
yang namanya HTML 2.0.
Pada perkembangannya HTML 2.0 kemudian oleh W3C (Word Wide Web
Consortium) sebuah organisasi menentukan standar internasional word Wide
Web pada tahun 1997 memperkenalkan HTML 3.2 yang memiliki banyak fitur
tambahan seperti table, applet, superscript, sub script dan marque.
Pada tahun 1997 akhir, baru kemudian HTML 4.0 secara resmi di
umumkan dan kemudian pada tahun 1999 dilanjutkan dengan HML 4.1. Pada
perkembangan sekarang mungkin sebagian orang masih merasakan yang
namanya HTML 4 adalah kemampuan design web yaitu dengan
menggunakan CSS (Cascading Style Sheets) yang memberikan kemuduhan
dalam memberikan tampilan yang terbaik pada browser-browser Anda.
Pada tahun Januari 2008, HTML 5 diumumkan sebagai draft, walaupun

belum di rekomentasikan secara resmi, beberapa spesifikasi HTML 5 mulai di
dukung oleh berbagai macam layout dan engine. Pada perkembangannya

HTML 5 ini ada beberapa penambahan tag baru yang hanya dapat
dimengerti oleh browser-browser baru. Tag tersebut diantaranya
section, article, footer, audio, video, progress, nav,meter, time, asid
e, canvas serta datagrid.Tag-tag tersebut hanya dikenali oleh browserbrowser keluaran terbaru, sebagai misal Firefox 3.5, Opera 9.6, Chrome,
Safari, IE 8.
4. MENDESAIN
HTML
Mendesain HTML berarti melakukan suatu

tindakanpemrograman.Namun HTML bukanlah sebuah
bahasapemrograman.Namun HTML hanyalah berisi perintah-perintah
yang telah terstruktur berupa tag-tag penyusun.Menuliskan tagtag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu
agar HTML kita dapat di akses oleh browser.Mendesain HTML adalah
adalah sebuah seni tersendiri.Homepage yang merupakan implementasi
dari HTML adalah refleksi dari orang yang membuatnya.Untuk itu kita
perlu mendesainnya dengan baik agar para pengunjung homepage yang
kita buat merasa senang dan bermanfaat.
Mendesain HTML dapat dilakukan dengan dua cara:
1)
Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe
Dreamweaver, dan lain-lain.
2)
Dengan cara menuliskan sendiri secara manual satu persatu tag-tag
HTML ke dalam dokumen HTML.
Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama
kelebihannya adalah HTML Editor merupakan sebuah program yang khusus
didesain untuk membuat, melakukan editing bahkan mem-publish
ke internet. Dengan kemampuannya menggabungkan kemudahan dan
kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini
sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih
mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan
secara manual satu persatu tag-tag HTML. Hal ini sangat sulit dikarenakan
akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi
Anda harus melakukan cara-cara konvensional untuk melihat hasilnya pada
web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML
yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham
mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa
HTML.
I.
HTML 5
HTML5 merupakan sebuah prosedur pembuatan tampilan web baru dari

penggabungan antara CSS, HTML dengan Java Script. Teknologi ini mulai
diluncurkan pada tahun 2009, namun sampai saat ini masih dalam tahap
pengembangan. Nah, ini ada beberapa kelebihan yang dimiliki oleh
HTML5, yaitu:
Beberapa kelebihan yang dijanjikan pada HTML 5 diantaranya dapat
ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML,
Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya,

integrasi (inline) MathML dan SVG dengan doctype yang lebih
sederhana, penulisan kode yang lebih efisien, dapat dimengerti oleh
peramban lawas (backwards compatible). Sehingga istilah deprecated
tidak akan diperlukan lagi.
Teknologi apa yang akan di perkenalkan HTML 5 diantaranya API

(Aplication Programming Interface) merupakan teknologi yang akan di
usung oleh HTML5, berikut ini adalah batasan-batasannya :
1)
Offline Data Storage
Memungkinkan kita bisa mengakses data lama di broser dalam

keadaan offline. Contoh offline data seperti kita membaca arsip e-mail
pada program Outlook atau Thunderbird.
2)
Drag and Drop
Drag and Drop ini kita dapat dengan memudahkan mendrag atau
mendrop misalnya text, hyperlink, bahkan file di aplikasi dekstop
sekalipun.
3)
Geolocation
Aplikasi ini memungkinkan kita untuk untuk mengetahui lokasi

geografis, sumber informasi di ambil dari GPS (Global Position System).
Demi mewujudkan struktur halaman web yang lebih baik semantik dan
aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:
section serupa seperti h1-h6, article bisa berupa entri blog atau tulisan
konten, aside menyajikan konten pelengkap. Header bisa menyajikan
judul, deskripsi, bahkan nav untuk navigasi, footer berisi catatan kaki
seperti informasi hak cipta, penulis, kontak, dan sebagainya, dialog

yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ)
dapat digunakan untuk menyajikan percakapan, yang fenomenal
adalah penggunaan elemen figure, video, audio, source, embed,
canvas, dan elemen terkait berkas multimedia lainnya.
Dikenalkan pula beberapa atribut baru, seperti: atribut media, ping
pada elemen pranala, autofocus, placeholder, required, autocomplete,
dan sebagainya, terkait elemen input dan form, reversed pada elemen
ol untuk urutan besar ke kecil.Ada beberapa elemen yang berubah
makna, diantaranya: Elemen b dilegalkan sebagai tipografi penegas.
Hal yang sama berlaku pula untuk elemen I, Elemen strong
menegaskan level kepentingan, bukan sekadar penekanan emphasis
lagi, Elemen hr dapat digunakan untuk memisahkan level paragraf
sesuai pokok pikirannya, dan lain-lain. Beberapa elemen dan atribut
juga ada yang tidak lagi muncul seperti center, font, strike, u,
big,frame, frameset, noframes, acronym, longdesc, scope pada td,dan
sebagainya. Sulit di pungkiri kehadiran HTML 5 akan menggerakkan
banyak hal, browser-browser beradaptasi untuk mendukungnnya,
berbagai CMS mengarahkan developementnya untuk ikut
mengiplementasikan yang pada akhirnya peran pemakai internet di
paksa untuk menggeser kebiasaan lama menjadi kebiasaan tren baru.
Tetapi pada prinsipnya yang berubah hanyalah tool dan caranya.
Cleaner code, kode terlihat lebih sederhana.
Greater consistency, penambahan sintaks yang dibuat dalam struktur

lebih baik dan lebih sederhana
Improve Semantics, standarisasi kode, maka nilai semantik dari sebuah

web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web
seperti header, nav, footerdan beberapa bagian lainnya terdefinisi
dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam
sebuah machine readible format.
Improved Accessibility struktur pembangunan sebuah web lebih

mudah.
Client-side Database, menyediakan model database SQL yang baru

dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di
sisi client.
Geolocation, empunyai API yang terintegrasi terhadap geolocation,

fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain
seperti Google Latitude pada iphone.
Offline Aplication Cache, pengguna dapat melakukan interaksi dengan

aplikasi meskipun mereka terputus dari jaringan internet.
Smarter Forms, semacam reguler expression (regex) yang membuat

form mampu mengenali secara lebih baik tentang input, validasi data
dan interaksi dengan elemen lain (misal : format email, password dll)
Sharper focus on Web Application Requiments, membuat sebuah

mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi
chat, tools drag and drop, video player, pengolah grafis dan masih
banyak lagi tentunya.
Tahun 2010 tanggal 4 Maret, HTML versi 5.0 yang dikembangkan oleh
W3C dan IETF (Internet Engineering Task Force) yaitu sebuah
organisasi yang menangani HTML sejak versi 2.0.
Berikut ini merupakan rincian dari perkembangan HTML berdasarkan

versinya:
II.
HTML
HTMLHyper Text Markup Language atau yang populer disebut dengan HTML
merupakan sebuah jenis teks dokumen khusus yang membuat sebuah
halaman web yang digunakan oleh Web browser untuk mempresentasikan
teks dan gambar . Dan didalam teks tersebut terdapat tag markup. File HTML
adalah berisi beberapa instruksi atau perintah yang kemudian diterjemahkan
oleh browser yang ada dikomputer user, sehingga isi informasinya dapat
ditampilkan secara visual dikomputer user. HTML dikenal sebagai standar
bahasa yang digunakan untuk menampilkan dokumen web. Sedangkan
dokumen HTML sering disebut sebagai halaman Web. Browser mengambil
halaman Web dari Web server dan karena adanya Internet, Halaman tersebut
bisa berada di manapun di dunia.
Cara Penulisan / Sintaks HTML sebagai berikut :
<html>
<head> </head>
<body> teks </body>
</html>
Atau bisa dengan bagian yang lebih rinci lagi :
<html>
<title> teks <title> sebagai judul page/ halaman
<h1> teks </h1> sebagai header
<body> teks </body> untuk isi dari web browser
</html>
Berikut ini saya cantumkan kode kode HTML yang umum digunakan :
<b> teks </b> untuk membuat teks BOLD/ tebal.
<i> teks </i> untuk membuat teks Italic / teks miring.
<u> teks </u> untuk membuat teks Underline/ garis bawah.
<br> teks </br > untuk membuat teks memulai bais baru/ enter.
<ol> teks </ol> untuk membuat penomeran.
<ul> teks </ul> untuk membuat bullet.
<center> teks </center> untuk membuat teks berada ditengahtengah.
<right> teks </right> untuk membuat teks rata kanan.
< left> teks </left> untuk membuat teks rata kiri.
< justify> teks </justify> untuk membuat teks rata kanan-kiri.
<font color = yellow> teks </color> untuk membuat teks berwarna

kuning.
</hr> untuk membuat garis.
<marquee> teks </marquee> untuk membuat teks berjalan.
<strike> teks </strike> untuk membuat teks bergaris ditengahnya.
III.
HTML +
HTML + merupakan HTML versi pertama yang mempunyai beberapa

kemampuan diantaranya :
a. Heading.
b. Paragraph.
c. Hypertext.
d. List.
e. Cetak tebal dan miring pada teks.
f. Peletakan image pada dokumen tanpa teks disekelilingnya (wrapping).
HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993).
HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya.
Sebuah usaha dari World Wide Web Consortiums (W3C) HTML Working
Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi
diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01
yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML
merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18
Desember 1997).
HTMl versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya

untuk menampilkan suatu form pada dokumen. Dengan adanya form ini,
maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi
2.0 ini merupakan pionir dari adanya homepage interaktif.
HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini
yang disebut juga sebagai HTML+ tidak bertahan lama dan segera
digantikan HTML versi 3.2.
HTML versi 4.0
HTML versi 4 ini merupakan HTML versi terakhir pada saat sumber ini
diambil. HTML ini memuat banyak sekali perubahan dan revisi dari
pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah
HTML seperti table, image, link, text, meta, imagemaps, form, dan lain- lain.
Kemudian lahir HTML versi 4.01 yang dikeluarkan secara resmi oleh W3C
pada tanggal 24 April 1998. HTML 4.01 menjadi standart pada tahun 1999.
HTML 4.01 merupakan perbaikan dari HTML versi 4.0 yang terlebih dahulu
diterbitkan (18 Desember 1997). HTML versi HTML 4.01 masih standart resmi
sampai sekarang ini .
HTML versi 4 mempunyai banyak kemampuan mengenai perintah-perintah
HTML, seperti :
Table.
Image.
Link.
Text.
Meta.
Imagemaps.
Form, dan lain- lain.
Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun

HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi
perintah-perintah
yang
telah
terstruktur
berupa
tag-tag
penyusun.
Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintahperintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain
HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan
implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk
itu kita perlu mendesainnya dengan baik agar para pengunjung homepage
yang kita buat merasa senang dan bermanfaat.
Mendesain
1.
HTML
Menggunakan
Dreamweaver,
dapat
HTML
dan
dilakukan
Editor,
lain-lain.
seperti
Dapatkan
dengan
Microsoft
editor
dua
FrontPage,
HTML
lainnya
cara:
Adobe
disini.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML
ke dalam dokumen HTML.
Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama
kelebihannya adalah HTML Editor merupakan sebuah program yang khusus
didesain
untuk
ke internet.
membuat,
Dengan
melakukan
kemampuannya
editing
bahkan
menggabungkan
mem-publish
kemudahan
dan
kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini

sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih
mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan

secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit
dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya,
ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat
hasilnya pada web browser. Namun pada cara kedua adalah dasar dari
segala bentuk HTML yang akan Anda pelajari, karena dengan cara itulah
Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang
biasa dipakai pada bahasa HTML.
PERKEMBANGAN HTML SECARA GARIS BESAR :
Tahun 1980 mengembangkan sebuah bahasa pemograman yang

dimana teks dan format dokumen dijadikan jadi satu yang sekarang
disebut dengan HTML, tetapi saat itu IBM memberikan sebuah nama
GML (Generalized Markup Language).
Tahun 1986 GML diganti namanya oleh ISO dengan SGML (Standard
Generalized Markup Language).
Tahun 1989 Caillau Tim dengan Banners Lee Robert yang bekerja di
CERN memberi nama HTML, dan mempopulerkanya pertama kali
dengan browser Mosaic.
Tahun 1990 HTML sangat berkembang sangat cepat hingga mencapai

HTML versi 5.0 yang digarap pada 4 Maret 2010 oleh W3C.
Tahun 1996 tanggal 14 Januari, HTML versi 2.0 versi ini menjadikan
sebuah pioneer dalam perkembangan homepage interaktif.
Tahun 1997 tanggal 18 Desember, HTML versi 3.0, sering disebut sebut
sebagai HTML+ yang mempunyai penambahan fitur table dalam
paragraph, akan tetapi versi ini tidak bertahan lama.
Tahun 1996 bulan Mei , dikeluarkan HTML versi 3.2 digunakan oleh
pengembang browser yang dapat diterima, dan dikatakan bahwa versi
3.2 ini merupakan versi 3.0 yang dikembangkan oleh beberapa
pengembang browser seperti Netscape dan Microsoft.
Tahun 1999 tanggal 24 Desember yaitu HTML versi 4.0 sebagai

penyempurnaan versi 3.2.
5. STRUKTUR
DASAR HTML
Secara garis besar, terdapat 4 jenis elemen dari HTML:

1)
Struktural. Tanda yang menentukan level atau tingkatan dari
sebuah tulisan (contoh, <h1>Golf</h1> akan memerintahkan browser

untuk menampilkan Golf sebagai tulisan tebal besar yang
menunjukkan sebagai Heading 1
2)
Presentasional. Tanda yang menentukan tampilan dari sebuah
tulisan tidak peduli dengan level dari tulisan tersebut

(contoh, <b>boldface</b> akan menampilkan bold. Tanda
presentasional saat ini sudah mulai digantikan oleh CSS dan tidak
direkomendasikan untuk mengatur tampilan tulisan,
3)
Hypertext. Tanda yang menunjukkan pranala ke bagian dari
dokumen tersebut atau pranala ke dokumen lain.

4)
Elemen widget yang membuat objek-objek lain seperti tombol
(<button>), list (<li>), dan garis horizontal (<hr>), Konsep hypertext

pada HTML memungkinkan kita untuk membuat link pada suatu
kelompok kata atau frasa untuk menuju ke bagian manapun dalam
World Wide Web.
Ada tiga macam link yang dapat kita gunakan :
1)
Link menuju bagian lain dari page
2)
Link menuju page lain dalam satu web site
3)
Link menuju resource atau web site yang berbeda
Selain markup presentasional , markup yang lain tidak menentukan

bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan
tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai
ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.
Contoh dokumen HTML sederhana
<!DOCTYPE html>
<html>
<head>
<title>Selamat Malam HTML</title>
</head>
<body>
<p>Kami Yulia dan Nastiti!</p>
</body>
</html>
Head
Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini
biasanya dimuat tag TITLE yang menampilkan judul halaman pada
titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE
untuk memberi mark suatu web site. Browser menyimpan title
sebagai bookmark dan juga untuk keperluan pencarian (searching)
biasanya title digunakan sebagai keyword. Header juga memuat tag
META yang biasanya digunakan untuk menentukan informasi tertentu
mengenai document HTML. Anda bisa menentukan author name,
keywords, dan lainnya pada tag META.Contoh:<meta name=author
nober=ubuntu-online>
Elemen Body
Bagian Body, yang dinyatakan dengan tag <BODY></BODY>,
merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan
informasi yang akan ditampilkan pada browser.
Tag
HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari
suatu elemen.Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada
dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan
tanda lebih besar (>).Tag biasanya merupakan suatu pasangan yang disebut
dengan :
1)
Tag awal, dinyatakan dalam bentuk <nama tag>
2)
Tag akhir, dinyatakan dalam bentuk </nama tag>
Formatnya: <nama tag> teks yang ditampilkan </nama tag>.Contoh :

untuk menampilkan teks dalam format teks miring teks ini terlihat
miring di browser anda dengan perintah HTML <i>Teks ini terlihat
miring di browser Anda</i>.
Atribut
Tag awal bisa memiliki beberapa buah atribut yang menyatakan
karakteristik dari tag tersebut. Misalnya, digunakan untuk membuat
rata kiri suatu paragraf. Tag yang digunakan adalah dan atribut yang
menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya
bisa berupa center, left, right atau justify.
Program Editor HTML
Untuk membuat aplikasi web, dalam hal ini menggunakan HTML , maka kita
membutuhkansuatu editor guna mengetikkan,mengedit atau menyimpan
dokumen-dokumen HTML. Editor untuk memdesain suatu web dibagi 2 yaitu
yang bersifat text murni dan yang WYSIWYG (Graphic) Editor untuk text,
anatara lain Notepad dan Ultra Edit. Sedang editor WYSIWYG adalah
Netscape dan Front Page.
Beberapa Macam Tag HTML
Di dalam HTML akan terdapat tag tag, lain halnya dengan bahasa
pemrograman yang menggunakan syntax atau coding, dalam HTML
biasanya lebih dikenal dengan tag HTML. Sebenarnya bahasa HTML
tidaklah sulit, apabila kita sudah mengenal tag tag HTML maka di setiap
kali tag di buka maka harus ditutup dengan tag itu sendiri dengan
penambahan slash (/) di awal tag; contoh <head> isi
</head>. <head> sebagai pembuka,</head> sebagai penutup.
Berikut ini beberapa tag HTML yang sering digunakan :
Tag Utama
<html>
Awal pernyataan sebuah dokumen HTML
<head>
Kepala suatu halaman web (hukumnya wajib)
<title>
Membuat judul halaman(ditempatkan di dalam <head>
<body>
Membuat body HTML / badan halaman web
Modifikasi Teks
<b>
Membuat teks tebal
<i>
Membuat teks miring
<u>
Membuat garis bawah pada teks
<sub>
Subscrip teks
<sup>
Suppersript teks
<h1>
Heading 1 pada teks (menentukan ukuran berdasarkan heading)
<h2>
<h3>
<h4>
<h5>
<h6>
<strong>
Menjadikan teks besar
<small>
Menjadikan teks kecil
Formating
<ul>
Membuat list teks dengan bullet
<ol>
membuat list teks dengan penomoran
<li>
Membuat list teks (diletakan setelah <ul> atau <ol>
<p>
Menyatakan suatu paragraf baru
<br>
Untuk ganti baris pada teks
<hr>
Membuat garis horizontal
<link>
menentukan sumber link
Tabel
<table>
Membuat tabel
<td>
Membuat cell tabel
<tr>
Membuat baris / row table
<tfoot>
Membuat footer table
<th>
Membuat header table
<thead>
Membuat header table
<tbody>
Mengatur Body table
<col>
Atribut pada tabel untuk mengatur kolom
<colgroup>
Membuat grup kolom
Form
<form>
Untuk membuat Form / Formulir
<input type =
>
Form inputan
text
Input field
submit
Tombol
checkbox
Check Box
radiobutton
Radio Button
<select name>
Membuat List/Menu (combo box)
<textarea>
Membuat teks area (untuk menampilkan teks)
Berikut adalah beberapa tag baru yang disediakan HTML5 :
<article>
Membuat content artikel
<aside>
Membuat sidebar pada halaman web
<audio>
Menambahkan file audio pada halaman web
<datalist>
Membuat dropdown list
<footer>
Membuat area footer pada halaman web
<header>
Membuat area header pada halaman web
<hgroup>
Heading group, membuat grup untuk beberapa heading
<nav>
Membuat area navigasi
<source>
Menentukan sumber media
<time>
Menampilkan waktu pada halaman web
<video>
Menambahkan file Video pada halaman web
6. KEGUNAAN HTML
Kegunaan HTML :
1)
Mengintegerasikan gambar dengan tulisan
2)
Membuat Pranala
3)
Mengintegerasikan berkas suara dan rekaman gambar hidup
4)
Membuat form interaktif
HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam
dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan
kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin
membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka
penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>.
Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh
tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk
menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada
penggambaran komponen-komponen struktur dan formating di dalam
halaman web daripada menentukan penampilannya.Sedangkan penjelajah
web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in
penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan
perataan text yang dikehendaki ke komputer yang menampilkan halaman
web. Salah satu hal Penting tentang eksistensi HTML adalah
tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan
kemampuan berbeda.
7. KELEBIHAN HTML
1. Merupakan bahasa penkodean yang lintas platform (cross platform),
maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer
yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi
bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter
ASCII.
2. Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk
menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan
untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah
didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau
lingkaran digunakan untuk jump ke halaman lain, atau link ke halaman di
luar web yang bersangkutan.
3. Dapat disisipi animasi berupa Java Applet atau file-file animasi dari
Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini,
browser harus memiliki plug-in khusus untuk menjalankan file-file animasi

ini).
4.Dapat disisipi bahasa pemrograman untuk mempercantik halaman web

seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan
sebagainya.
Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler.
Cara menjalanakannya cukup dengan menggunakan browser.
8. KELEBIHAN HTML5
1. AKSESBILITAS
HTML5 membuat blog mudah diakses, situs akan lebih mudah diakses, sebab
ada dua alasan utama, yakni: semantik dan ARIA. Dengan tag semantik
pembaca bisa memeriksa dokumen HTML dan menciptakan pengalaman
lebih baik. ARIA adalah spesifikasi W3C yang digunakan dalam menetapkan
spesifik elemen untuk dokumen HTML dasarnya menciptakan landmark
penting pada halaman: header, footer, navigasi atau artikel
2. SUPPORT AUDIO VIDEO
Dengan HTML5 anda bisa membuat video dan audio yang bagus dengan
HTML5 <video> dan <audio> tags. Video dan audio tag HTML5 pada
dasarnya memperlakukan mereka sebagai gambar <video src=url/>.
Sebenarnya ini sangat sederhana, akan tetapi yang jadi masalahnya adalah
karena tidak setiap browser mendukung HTML 5. Jadi Lupakan Flash Player
dan media music lainnya
3. DOCTYPE
4. CODE CLEANER
Apa anda ingin sebuah kode yang sederhana, elegan, mudah untuk dibaca
maka HTML5 adalah solusi yang terbaik untuk anda. Dengan HTML5 anda
dapat menulis deskriptif kode, kode semantic, yang memungkinkan anda
untuk memisahkan makna dari gaya dan konten.
5. PENYIMPANAN
Salah
satu
kelebihan
tentang
HTML5
adalah
fitur
penyimpanan.
Penyimpanan ini meliputi cookie dan database. HTML5 memiliki keamanan

dan kinerja lebih baik dan data akan tetap ada dan aman, bahkan setelah
browser ditutup. Sebab pada dasarnya berbasis data, jadi anda tidak perlu
khawatir lupa menghapus cookie. Penyimpanan input sangat baik untuk
banyak hal, tapi itu juga merupakan salah satu alat HTML5 yang membuat
aplikasi web tanpa plugin pihak ketiga. Mampu menyimpan data dalam
browser pengguna memungkinkan anda dengan mudah membuat fitur-fitur
aplikasi
6. INTERAKSI TERBAIK
Anda semua pasti ingin interaksi yang lebih baik, Anda pasti ingin website
lebih dinamis dan memungkinkan pengguna untuk menikmati / berinteraksi
dengan konten yang anda buat bukan hanya sekedar melihatnya.
7. GAME DEVELOPMENT
Anda dapat mengembangkan game dengan menggunakan HTML5 <canvas>
tag.
HTML5
menyediakan
ponsel
untuk
mengembangkan
permainan
interaktif. Jika anda telah membangun Flash game sebelumnya, anda akan
membuat HTML5 game.
8. SUPPORT BROWSER
Browser populer yang mendukung HTML5 diantaranya adalah Chrome,
Firefox, Safari dan Opera IE9. HTML5 dibangun untuk membuat segalanya
lebih
mudah
pada
browser
sehingga
memungkinkan
mereka
untuk
menggunakan unsur-unsur baru.

9. TEKNOLOGI MOBILE
Teknologi mobile menjadi lebih populer dan perangkat mobile terus
berkembang sangat pesat dan ini berarti bahwa semakin banyak pengguna
akan menggunakan mobile browser mereka untuk melihat situs web anda.
HTML5 adalah alat mobile yang paling siap untuk mengembangkan situs
mobile dan aplikasi. Dengan Adobe Flash mobile, sekarang anda bisa
mengandalkan HTML5 untuk melakukan pengembangan aplikasi web mobile
anda. Browser pada ponsel telah sepenuhnya mengadopsi HTML5 sehingga
menciptakan berbagai aplikasi mobile yang menampilkan layar sentuh yang
lebih kecil, dan desain Responsif.
10. TEKNOLOGI MASA DEPAN
HTML5 adalah teknologi masa depan. HTML5 tidak akan berhasil dan banyak
perusahaan akan
mulai
berkembang di
HTML5.
Satu-satunya
alasan
sebenarnya saya lebih suka menggunakan HTML5 adalah hanya untuk

menulis
kode
bersi
dan
fitur
menyenangkan.
anda
hanya
mulai
menggunakannya dan tidak mengubah cara anda merancang. Ini sangat

sederhana dan anda harus mulai mencobanya.
9. KEKURANGAN HTML
Adapun kekurangan dari HTML ini adalah:
Seperti yang kita tahu bahwa, setiap bahasa dan program mempunyai
kelebihan dan Kekurangan. Ada baiknya kita mengetahui kelebihan dan
kekurangan dari HTML sehingga kita bisa memaksimalkan pengetahuan dan
wawasan kita dalam mengeksplorasi dunia browser.

1. Menghasilkan halaman yang statis, yang saya tahu untuk memperoleh
halaman yang dinamis harus menggunakan bahasa pemrograman tertentu
seperti Javascript atau VBScript dan animasi seperti Flash atau Shockwave.
2. Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang
masih awam.
Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini
maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu,
HTML harus disisipi bahasa pemrograman yang dapat menangani hal
tersebut, contohnya Perl atau Tcl.
Cascading Style Sheets

Dari Wikipedia bahasa Indonesia, ensiklopedia bebas
Cascading Style Sheets
.css
Ekstensi berkas
text/css
Jenis MIME
Dikembangkan oleh World Wide Web Consortium

Jenis format
Bahasa lembar gaya
Level 1 (Recommendation)
Level 2 (Recommendation)
Standar
Level 2 Revision 1 (Candidate
Recommendation)
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.[2] Dengan adanya CSS memungkinkan kita untuk
menampilkan halaman yang sama dengan format yang berbeda.
1. 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.[3]
CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web
Consortium atau W3C pada tahun 1996.[2] Setelah CSS distandarisasikan, Internet Explorer dan
Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati
dengan standar CSS.[3]
2. 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.[4]
3. 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.[5]Selector dalam pernyataan di
atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.[5]
Selain itu ada tiga metode penulisan CSS atribut, yaitu :[6]
3.1.
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup
dengan menambahkan atribut style="..." dalam tag HTML tersebut.[6] Style hanya akan berlaku
pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.[6]
Contoh penulisan CSS dengan metode Inline Style Sheet [6]:
<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>
3.2.
Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>.[6] Pada
pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang
selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.[6]
Contoh penggunaan CSS dengan metode Embedded Style Sheet :[6]
<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>
4. Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal.[7] Jika internal yang dipilih, maka skrip itu
dimasukkan secara langsung ke halaman website yang akan didesain.[7] 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.[7]
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas
khusus.[7] Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang
didesain akan dibuat seperti model yang ada di skrip tersebut.[7]
5. Fakta Menggunakan CSS

Fakta Menggunakan CSS diantaranya : [8]
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 ZIndex 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.
6. Contoh Berkas CSS

[9]
<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>
Cascading Style Sheet (CSS)

Aplikasi
OpenOffice.org Writer
Perangkat lunak aplikasi (bahasa Inggris: software application) adalah suatu subkelas
perangkat lunak komputer yang memanfaatkan kemampuan komputer langsung untuk
melakukan suatu tugas yang diinginkan pengguna. Biasanya dibandingkan dengan perangkat
lunak sistem yang mengintegrasikan berbagai kemampuan komputer, tapi tidak secara langsung
menerapkan kemampuan tersebut untuk mengerjakan suatu tugas yang menguntungkan
pengguna. Contoh utama perangkat lunak aplikasi adalah pengolah kata, lembar kerja, dan
pemutar media.
Beberapa aplikasi yang digabung bersama menjadi suatu paket kadang disebut sebagai suatu
paket atau suite aplikasi (application suite). Contohnya adalah Microsoft Office dan
OpenOffice.org, yang menggabungkan suatu aplikasi pengolah kata, lembar kerja, serta beberapa
aplikasi lainnya. Aplikasi-aplikasi dalam suatu paket biasanya memiliki antarmuka pengguna
yang memiliki kesamaan sehingga memudahkan pengguna untuk mempelajari dan menggunakan
tiap aplikasi. Sering kali, mereka memiliki kemampuan untuk saling berinteraksi satu sama lain
sehingga menguntungkan pengguna. Contohnya, suatu lembar kerja dapat dibenamkan dalam
suatu dokumen pengolah kata walaupun dibuat pada aplikasi lembar kerja yang terpisah.
Klasifikasi aplikasi
Aplikasi dapat digolongkan menjadi beberapa kelas, antara lain:
1. Perangkat lunak perusahaan (enterprise)

2. Perangkat lunak infrastruktur perusahaan
3. Perangkat lunak informasi kerja
4. Perangkat lunak media dan hiburan
5. Perangkat lunak pendidikan
6. Perangkat lunak pengembangan media
7. Perangkat lunak rekayasa produk
Pada pengertian umumnya, aplikasi adalah alat terapan yang difungsikan secara khusus dan
terpadu sesuai kemampuan yang dimilikinya aplikasi merupakan suatu perangkat komputer yang
siap pakai bagi user.
Perangkat lunak perusahaan
Perangkat lunak akuntansi

Bagian pendukung (back office)
Perangkat lunak bisnis
Manajemen sumber daya manusia
Perangkat lunak infrastruktur perusahaan
Perangkat lunak alir kerja bisnis

Sistem manajemen basis data
Manajemen aset digital
Manajemen dokumen
Perangkat lunak informasi kerja
Manajemen waktu dan sumber daya

Manajemen data
Dokumentasi
Perangkat lunak analitik
Perangkat lunak kolaborasi
Perangkat lunak media dan hiburan
Media digital
Perangkat lunak hiburan
Perangkat lunak pendidikan
Manajemen ruang kelas

Manajemen survei
Manajemen pelatihan
Perangkat lunak kesiapan penjualan
Perangkat lunak pengembangan media
Perangkat lunak seni grafis

Penyuntingan media
Perangkat lunak rekayasa produk
Rekayasa perangkat keras

Rekayasa perangkat lunak
Microsoft Word
Microsoft Word
Pengembang Microsoft
15.0.4517.1003 (2013) (29 Januari 2013; 2
Rilis stabil
tahun yang lalu)
Sistem operasi Microsoft Windows, Mac OS X
Jenis
Pengolah kata
Lisensi
Perangkat Lunak Tak Bebas
Situs web
http://office.microsoft.com/word
resmi
Microsoft Word atau Microsoft Office Word atau Word adalah perangkat lunak pengolah kata
(word processor) andalan Microsoft. Pertama diterbitkan pada 1983 dengan nama Multi-Tool
Word untuk Xenix, versi-versi lain kemudian dikembangkan untuk berbagai sistem operasi,
misalnya DOS (1983), Apple Macintosh (1984), SCO UNIX, OS/2, dan Microsoft Windows
(1989). Setelah menjadi bagian dari Microsoft Office System 2003 dan 2007 diberi nama
Microsoft Office Word. Di Office 2013, Namanya cukup dinamakan Word
Banyak ide dan konsep Word diambil dari Bravos, pengolah kata berbasis grafik pertama yang
dikembangkan di Xerox Palo Alto Research Center (PARC). Pencipta Bravo, Charles Simonyi,
meninggalkan Xerox PARC dan pindah ke Microsoft pada 1981. Simonyi juga menggaet
Richard Brodie dari PARC. Pada 1 Februari 1983, pengembangan Multi-Tool Word dimulai.
Setelah diberi nama baru Microsoft Word, Microsoft menerbitkan program ini pada 25 Oktober
1983 untuk IBM PC. Saat itu dunia pengolah kata dikuasai oleh WordPerfect dan juga WordStar.
Word memiliki konsep "What You See Is What You Get", atau WYSIWYG, dan merupakan
program pertama yang dapat menampilkan cetak tebal dan cetak miring pada IBM PC. Word
juga banyak menggunakan tetikus yang saat itu tidak lazim sehingga mereka menawarkan paket
Word-with-Mouse. Word processor berbasis DOS lain, seperti WordStar dan WordPerfect,
menampilkan hanya teks dengan kode markup dan warna untuk menandai pemformatan cetak
tebal, miring, dan sebagainya.
Word untuk Macintosh, meski memiliki banyak perbedaan tampilan dari versi DOS-nya,
diprogram oleh Ken Shapiro dengan sedikit perbedaan dari kode sumber versi DOS, yang ditulis
untuk layar tampilan resolusi tinggi dan printer laser, meskipun belum ada produk seperti itu
yang beredar untuk publik. Setelah LisaWrite dan MacWrite, Microsoft pun mencoba untuk
menambahkan fitur WYSIWYG ke dalam paket program Word for Macintosh. Setelah Word for
Macintosh dirilis pada tahun 1985, program tersebut mendapatkan perhatian yang cukup luas
dari masyarakat pengguna komputer. Microsoft tidak membuat versi Word 2.0 for Macintosh,
untuk menyamakan versi dengan Word untuk sistem atau platform lainnya.
Versi selanjutnya dari Word for Macintosh, adalah Word 3.0, yang dirilis pada tahun 1987. Versi
ini mencakup banyak peningkatan dan fitur baru tapi memiliki banyak bug. Dalam hanya
beberapa bulan, Microsoft mengganti Word 3.0 dengan Word 3.01, yang jauh lebih stabil. Semua
pengguna terdaftar dari Word 3.0 dikirimi surat yang berisi salinan Word 3.01 secara gratis,
sehingga menjadikan hal ini kesalahan Microsoft paling mahal untuk ditebus pada waktu itu.
Word 4.0, yang dirilis pada tahun 1989, merupakan versi yang sangat sukses dan juga stabil
digunakan.
Tahun 1990-1995
Pada rentang tahun ini, Word for Windows diluncurkan. Versi pertama dari Word for Windows
dirilis pada tahun 1989 dengan harga 500 Dolar Amerika Serikat. Dengan dirilisnya Microsoft
Windows 3.0 pada tahun selanjutnya, penjualan pun akhirnya terdongkrak naik, mengingat Word
for Windows 1.0 didesain untuk Windows 3.0 dan performanya sangat buruk jika dijalankan
pada versi sebelumnya. Microsoft menunggu hingga merilis Word 2.0 untuk mengukuhkan
Microsoft Word sebagai pemimpin pasar pengolah kata.
Microsoft Word 2010

Versi ini adalah versi yang dikeluarkan Microsoft untuk Office pada Windows, dengan dukungan
Untuk Windows 8, Windows 7 , Windows Vista (Dengan Service Pack 2), Microsoft Windows
XP (Service Pack 3) (Diluncurkan Pada Tahun 2010)
Penghilangan fitur fitur yang tidak diperlukan di Microsft Office 2010, membuat lebih
ringan.
Dukungan Grafis 3D Yang lebih baik
Mendukung Standarisasi format Open Document Format (.odf)
Mendukung penyuntingan gambar yang lebih kompleks
Penyimpanan terhadap format .pdf dan .xps yang lebih mudah
Terintegrasi dengan Windows Live sehingga dapat menyimpan data di Cloud Awan
Disediakannya versi 32 bit dan 64 bit
Ribbon yang simpel dan mudah digunakan.
Microsoft Word 2013

Versi ini adalah versi yang terbaru dikeluarkan Microsoft untuk Office pada Windows, dengan
dukungan UntukWindos 7,windows 8, dan Windows server 2008 R2 Pada 29 Januari 2013
Antarmuka mengusung tema Metro. Mirip Windows 8

Penggeseran gambar yang lebih baik
Mendukung penyuntingan file Adobe Reader (.Pdf)
Terintegrasi dengan Skydrive sehingga dapat menyimpan data di Cloud.
Disediakannya versi 32 bit dan 64 bit
Ribbon masih sama seperti Office 2010. Temanya saja yang berbeda.
Fitur Unggulan
AutoCorrect
MailMerge
Autopage Index
Macro
Auto Formating
HTML editor
Booklet layout
What You See Is What You Get (WYSIWYG)
Mendukung format XML dan ODF (Word 2010)
Mendukung untuk menghapus latar belakang pada gambar (Word 2010)
Berkas komputer
(Dialihkan dari File)
"Berkas" beralih ke halaman ini. Untuk bantuan berkas di Wikipedia, lihat Wikipedia:Tutorial
berkas.
Berkas komputer (bahasa Inggris: computer file) adalah identitas dari data yang disimpan di
dalam sistem berkas yang dapat diakses dan diatur oleh pengguna. Sebuah berkas memiliki nama
yang unik dalam direktori di mana ia berada. Alamat direktori dimana suatu berkas ditempatkan
diistilahkan dengan path.
Daftar isi
1 Nama berkas
2 Atribut berkas
3 Ukuran berkas
4 Manajemen berkas
Nama berkas
Sistem berkas akan memberikan sebuah nama terhadap sebuah berkas agar dapat dikelola dengan
mudah. Meski oleh sistem berkas penamaan dilakukan dengan menggunakan angka-angka biner,
sistem operasi dapat menerjemahkan angka-angka biner tersebut menjadi karakter yang mudah
dipahami.
Atribut berkas
Sebuah berkas berisi aliran data (atau data stream) yang berisi sekumpulan data yang saling
berkaitan serta atribut berkas (yang bersifat wajib atau opsional), yang kadang-kadang disebut
properties yang berisi informasi yang berkaitan dengan berkas yang bersangkutan. Informasi
mengenai kapan sebuah berkas dibuat adalah contoh dari atribut berkas.
Ukuran berkas
Ukuran sebuah berkas umumnya direpresentasikan dalam satuan bita (byte). Jika bilangan terlalu
besar untuk direpresentasikan dalam satuan bita, maka dapat menggunakan satuan KiB (kibibita,
yang berarti 1,024 bita), MiB (mebibita, yang berarti 1,048,576 bita), GiB (gibibita, yang berarti
1,073,741,824 bita), dan TiB (tebibita, yang berarti 1,099,511,627,776 bita), selain tentunya
menggunakan satuan KB (kilobita, yang berarti 1,000 bita), MB (megabita, yang berarti
1,000,000 bita), GB (gigabita, yang berarti 1,000,000,000 bita), dan TB (Terabita, yang berarti
1,000,000,000,000 bita).
Dalam mekanisme penyimpanan berkas, komputer akan menyimpan berkas dalam dua jenis
ukuran: ukuran fisik dan ukuran logis. Ukuran fisik berkas merujuk kepada ukuran aktual dari
berkas, yakni berapa banyak bita yang terdapat di dalam berkas. Sementara ukuran logis merujuk
kepada jumlah ruangan yang dialokasikan oleh sistem berkas untuk menempatkan berkas yang
bersangkutan di dalam media penyimpanan. Ukuran berkas fisik umumnya lebih besar
dibandingkan dengan ukuran berkas logisnya. Sebagai contoh, untuk mengalokasikan berkas
berukuran logis 5125 bita, dalam sebuah media penyimpanan yang diformat dengan sistem
berkas yang menggunakan ukuran unit alokasi 4096 bita, komputer akan mengalokasikan dua
buah unit alokasi, yang berukuran 4096 dan 4096, sehingga menghabiskan 8192 bita. Meski
ukuran logis berkas tersebut 5125 byte, komputer mengalokasikan 8192 bita, membuat 3067 bita
tidak digunakan (disebut sebagai wasted space atau slack space).
Manajemen berkas
Contoh dari manajer berkas: MS-DOS Shell

Berkas komputer secara fisik dapat diatur oleh sistem berkas yang digunakan oleh media
penyimpanan di mana berkas disimpan. Secara logis, pengguna membutuhkan sebuah utilitas
untuk melakukan manajemen berkas, yang sering disebut manajer berkas (file Manager).
Contoh dari manajer berkas adalah Windows Explorer dalam sistem operasi Windows, Norton
Commander, Konqueror (dalam KDE), Nautilus (dalam GNOME), Midnight Commander, dan
DOS Shell (dalam sistem operasi DOS).
HTML
HTML (HyperText Markup Language)
Ekstensi berkas
Jenis MIME
Type code
Uniform Type Identifier
.html, .htm
Standar
W3C HTML 3.2

W3C HTML 5 (draft)
text/html
TEXT
public.html
World Wide Web
Dikembangkan oleh
Consortium
Jenis format
Markup language
Standard Generalized
Pengembangan dari
Markup Language
Dikembangkan menjadi XHTML
W3C HTML 4.01
Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk
membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar
dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat
dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga
menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang
sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML
(Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara
luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang
didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di
CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). [1]
Sejarah
Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen
dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa
yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini
dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya.
IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.
Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat
baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup
language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari
GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup
Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk
pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi di luar perkiraan ISO, SGML
dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet.
Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini
adalah HTML5.
Sejarah dari standar HTML
HTML 2.0(RFC 1866) disetujui sebagai standar 22 September 1995,

HTML 3.214 Januari 1996,
HTML 4.018 Desember 1997,
HTML 4.01 (minor fixes)24 Desember 1999,
ISO/IEC 15445:2000 ("ISO HTML", berdasar pada HTML 4.01 Strict)15 Mei 2000.
HTML 5 (stabil) rekomendasi W3C28 Oktober 2014.
Kegunaan
Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan
bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu.
Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL,
maka penulisannya dilakukan dengan cara: <b> TAMPIL TEBAL</b>. Tanda <b> digunakan
untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri
dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada
penggambaran komponen-komponen struktur dan format di dalam halaman web daripada
menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan
susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna,
garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah
satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa
Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat
melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows.
Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana
tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems.
namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah
diformat dan berisi Grafika dan Pranala.[2]
Kegunaan lain
Mengintegerasikan gambar dengan tulisan.

Membuat Pranala.
Mengintegerasikan berkas suara dan rekaman gambar hidup.
Membuat form interaktif.[3]
Menyunting format tulisan

HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan
dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format
berkas adalah:
Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk
judul, heading dan sebagainya.
Menampilkan tulisan dalam bentuk cetakan tebal
Menampilkan sekelompok kata dalam bentuk miring
Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.
Markah/Tanda
Secara garis besar, terdapat 4 jenis elemen dari HTML:
Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh,
<h1>Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai
tulisan tebal besar yang menunjukkan sebagai Heading 1
Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan
level dari tulisan tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda
presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan
untuk mengatur tampilan tulisan,
Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau
pranala ke dokumen lain (contoh, <a href="http://www.wikipedia.org/">
Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL
tertentu),
Elemen widget yang membuat objek-objek lain seperti tombol (<button>), daftar (<li>),
dan garis horizontal (<hr>). Konsep hiperteks pada HTML memungkinkan pembuatan
tautan pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam
World Wide Web,
Ada tiga macam pranala (link) yang dapat digunakan:
Pranala menuju bagian lain dari page.

Pranala menuju page lain dalam satu web site.
Pranala menuju resource atau web site yang berbeda.[4]
Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari
sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah
dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.
Contoh dokumen HTML sederhana

Untuk HTML 4 Strict [5]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head bgcolor=black text=white>
<title>Selamat Datang HTML</title>
</head>
<body>
<p>Halo dunia!</p>
</body>
</html>
Untuk HTML 5 [6]

<!DOCTYPE HTML>
<html>
</html>
<head style="background-color: black; color: white;">

<title>Selamat Datang HTML</title>
</head>
<body>
<p>Halo dunia!</p>
</body>
Head
Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag
TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga
menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan title
sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan
sebagai keyword. Header juga memuat tag META yang biasanya dapat digunakan untuk
menentukan informasi tertentu mengenai dokumen HTML. Anda bisa menentukan author name,
keywords, dan lainnya pada tag META.
Contoh:
<meta name="author" content="ubuntu-online">
Body
Bagian BODY, yang dinyatakan dengan tag <BODY></BODY>, merupakan tubuh atau isi dari
dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.
Tag
HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu
elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini
dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).
Tag biasanya merupakan suatu pasangan yang disebut dengan:
Tag awal, dinyatakan dalam bentuk <nama tag>

Tag akhir, dinyatakan dalam bentuk </nama tag>
Formatnya: <nama tag> teks yang ditampilkan </nama tag>.

Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser
anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>
Atribut
Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut.
Misalnya, <P STYLE="text-align:left"> digunakan untuk membuat rata kiri suatu paragraf.
Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah STYLE dengan nilai
"text-align:left". Nilai atribut STYLE ditulis dalam bahasa CSS.
Extensible hypertext markup language

(Dialihkan dari XHTML)
Contoh program XHTML

XHTML merupakan singkatan dari eXtensible HyperText Markup Language. XHTML
merupakan bentuk reformulasi dari HTML menggunakan paradigma XML.[1]
XHTML adalah bahasa markup penerus dan pengembangan dari HTML yang memiliki
kemampuan yang kurang lebih mirip HTML, tapi dengan aturan sintaks yang lebih ketat. HTML
merupakan aplikasi dari SGML (Standard Generalized Markup Language) yang sangat fleksibel,
sedangkan XHTML adalah aplikasi dari XML, turunan SGML yang lebih terbatas.
Karena XHTML harus memiliki keteraturan-bentuk (mengikuti sintaks yang tepat), dokumen
XHTML dapat diproses otomatis dengan menggunakan standar pemroses XML - tidak seperti
HTML yang membutuhkan pemroses yang cukup sulit dan kompleks. XHTML dapat dianggap
sebagai perpaduan antara HTML dan XML karena merupakan formulasi ulang HTML dalam
bentuk XML. XHTML 1.0 telah menjadi rekomendasi W3C atau World Wide Web Consortium
pada tanggal 26 Januari 2000.[2]
XHTML adalah sebuah kombinasi dari HTML dan XML (Extensible Markup Language) &
merupakan bentuk sempurna (dalam arti, lebih ketat dan bersih dibandingkan HTML).[3] Tujuan
XHTML adalah menggantikan HTML.[3] XHTML adalah bentuk HTML yang didefinisikan
sebagai aplikasi XML yang berarti XHTML berisi semua elemen dalam HTML 4.01
dikombinasikan dengan sintaks XML.[3]
XHTML adalah bahasa markup sebagaimana HTML, tetapi dengan gaya bahasa lebih baik[4].
XHTML merupakan versi HTML yang memenuhi persyaratan XML dan merupakan sebuah
dokumen HTML,[5]dan XHTML menjadi standar internasional dengan spesifikasi yang
ditetapkan oleh W3C (World Wide Web Consortium).[3]
Alasan Menggunakan XHTML

Beberapa alasan mengapa menggunakan XHTML[6]:
XHTML menyempurnakan kekurangan-kekurangan pada HTML.

XHTML dapat dijalankan pada berbagai platform, sehingga memungkinkan situs kita
dibuka dengan baik melalui PDA dan ponsel.
Penulisan
XHTML tidak terlalu berbeda dengan HTML 4.01 standar. Jika sudah mempunyai kemampuan
HTML 4.01 maka akan sangat membantu untuk memulai XHTML. XHTML mengharuskan
penulisan tag dengan huruf kecil (lowercase) dan selalu menutup menggunakan penutup tag.[3]
Deklarasi Pada XHTML

Deklarasi Doctype pada XHTML hampir sama dengan Doctype pada HTML. W3C
mengharuskan agar selalu menggunakan Doctype pada XHTML. Terdapat 3 Jenis Doctype pada
XHTML[6]:
XHTML - Strict. Digunakan untuk membuat halaman yang layout dan formatnya
dikontrol penuh oleh CSS.
Pada deklarasi ini menggunakan tag font dan table.

<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML - Transitional. Digunakan untuk membuat halaman yang
sebagian besar
menggunakan tag-tag HTML.

<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-traditional.dtd">
XHTML - Frame. Digunakan jika kita memakai frame pada halaman web.
<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0 Frameset//EN"

"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Elemen dasar pada XHTML

XHTML masih menggunakan elemen pada HTML, meski beberapa penambahan dan
penyempurnaan.[6] Berikut beberapa elemen yang digunakan pada XHTML[6]:
Struktur
Teks
Hypertext
List
Form
Tabel
Gambar /
Image
Link
Body, Head, Html, Title

abbr, acronym, address, blockquote, br, cite, code,dfn, div, em, h1, h2, h3, h4,h5,
h6, kbd, p, pre, q, samp, spam, strong, var
a
dl, dt, dd, ol, ul, li
form, input, label, select, option, textaarea
caption, table, td, th, tr
img
link
Beberapa aturan pada XHTML

Seperti yang telah disinggung sebelumnya, XHTML merupakan penyempurnaan dari HTML.[6]
Untuk itu, ada beberapa aturan agar program lebih stabil dan konsisten.[6]
Setiap tag harus ditulis dengan huruf kecil.

Memberi penutup untuk setiap tag.
Membuka dan menutup tag pada sarang yang benar.
Atribut tag ditulis dengan huruf kecil dan memakai tanda petik.
Pengukuran
(Dialihkan dari Ukuran)
Pengukuran adalah penentuan besaran, dimensi, atau kapasitas, biasanya terhadap suatu standar
atau satuan ukur. Pengukuran tidak hanya terbatas pada kuantitas fisik, tetapi juga dapat
diperluas untuk mengukur hampir semua benda yang bisa dibayangkan, seperti tingkat
ketidakpastian, atau indeks kepercayaan konsumen. Pengukuran ada beberapa macam alat yaitu:
micro meter,jangka sorong,dial indikator,viler gauge dll
Pengukuran adalah perbandingan dengan standar -- William Shockley

Ilmu pengukuran disebut metrologi.
Citra
(Dialihkan dari Gambar)
Untuk kegunaan lain dari Citra, lihat Citra (disambiguasi).
Untuk "Gambar" di Wikipedia, lihat Wikipedia:Gambar.
Citra (Bahasa Inggris: image) adalah kombinasi antara titik, garis, bidang, dan warna untuk
menciptakan suatu imitasi dari suatu obyekbiasanya obyek fisik atau manusia. Citra bisa
berwujud gambar (picture) dua dimensi, seperti lukisan, foto, dan berwujud tiga dimensi, seperti
patung.
Daftar isi
1 Zaman Prasejarah
2 Seni Aborigin
3 Mesir Kuno
4 Yunani Klasik
5 Kekaisaran Roma
6 Renaisans
7 Masa Kini
Zaman Prasejarah
Lukisan di muka gua Twyfelfontein (DZT)
Pada zaman ini, gambar sangat berkaitan dengan seni lukis. Teori awal mengemukakan bahwa
manusia mulai menciptakan gambar tentang kehidupan keseharian mereka, biasanya hewan yang
menjadi buruan mereka.[1] Dengan gambar tersebut, mereka percaya bahwa itu akan membantu
mereka dalam memperoleh buruan yang lebih banyak. Namun gambar lukisan ini banyak
ditemukan di kedalaman gua, di ceruk yang gelap dimana jarang sekali mendapat perhatian dari
manusia lain, bahkan untuk melewati ceruk tersebut.
Gambar pertama kali diciptakan sekitar 35.000 tahun yang lalu. Sejak saat itu, kreasi manusia
meningkat seiring dengan semakin banyaknya lukisan yang tercipta. Para arkeolog menyebut
periode ini sebagai ledakan kreatif.[1] Lukisan gua pertama kali ditemukan oleh Maria, putri dari
arkeolog amatir bernama Marcelino De Sautuola pada tahun 1879, berupa sekumpulan Auroch
(sejenis lembu jantan ( Inggris : Ox) yang telah lama punah) di gua Altamira, Spanyol bagian
utara.[1] Kemudian salah satu gambar tertua yang paling terkenal adalah gambar di gua Lascaux,
Perancis pada tahun 1940. Dinding gua tersebut dipenuhi dengan gambar mammoth, bison, rusa
kutub dan kuda. Ada juga lukisan gua yang ditemukan pada tahun 1969 di muka gua dekat
Twyfelfontein, Namibia, berusia sekitar 30.000 tahun. Dan lukisan di gua Chauvet, Perancis
bagian barat daya, ditemukan pada tahun 1994 dan berusia 31.000 tahun. Lukisan atau gambar
tersebut dibuat dengan menggunakan bahan-bahan seperti arang, kapur, batu bara, dan lain-lain.
Salah satu teknik yang terkenal untuk membuat gambar prasejarah yang dilakukan manusia
zaman purba ini adalah dengan menempelkan tangan pada dinding gua, lalu menyemburnya
dengan kunyahan daun-daunan atau batu mineral berwarna. Warna yang digunakan kebanyakan
warna merah, coklat, kuning dan hitam yang dapat dibuat dari bahan tambang, dengan dicampur
darah dan lemak hewan.
Seni Aborigin
Kesenian orang aborigin berusia sekitar 20.000 tahun dan masih bertahan hingga sekarang.
Lukisan yang ada sekarang tidak jauh berbeda dengan yang diciptakan ribuan tahun yang lalu.
Ikan Barramundi, Yingarna, ular pelangi ( Inggris : Rainbow Serpent). Lukisan tersebut banyak
bercerita tentang roh nenek moyang mereka menciptakan dunia ini. Satu gambar dapat bercerita
banyak. Orang aborigin membawakan cerita dengan diiringi musik, lagu dan tarian untuk
memberikan para penonton sebuah pengalaman multimedia. Salah satunya adalah lukisan karang
X-ray di Nourlangie Rock, Australia, berusia sekitar 16.000 tahun.[2]
Mesir Kuno
Mesir kuno adalah peradaban manusia pertama yang diketahui memiliki gaya seni yang tinggi.
Lukisannya menunjukkan kejadian sehari-hari , dengan gaya skematis dan konseptual. Orang
Mesir menggunakan sudut pandang yang paling mudah dalam menggambarkan manusia, dari
samping. Mereka menginginkan gambar tubuh manusia dan setiap bagiannya secara utuh dan
sejelas mungkin. Bagian kaki dan kepala selalu digambar dari samping, sedangkan bagian bahu,
mata, tubuh sering kali dari depan. Orang Mesir percaya akan kehidupan setelah mati. Lukisan
yang terdapat pada makam dan kuil bangsa Mesir sering kali menggambarkan kejadian yang
akan dialami saat orang yang meninggal dalam perjalanan menuju dunia selanjutnya. Mereka
beranggapan bahwa orang yang meninggal tersebut akan ditemani lukisan dan pahatan yang akan
menjelma hidup.[3] Salah satunya adalah lukisan di dalam kuil agung Ramses II di Thebes, yang
menggambarkan ratu Nefertiti yang diambil nyawanya oleh Dewi Isis. Kata-kata yang diucapkan
Isis, yang tertulis di prasasti, Datanglah Ratu Agung Nefertiri, kekasih dari Mut, tanpa dosa.
Aku akan menunjukkan padamu sebuah tempat di dunia suci.
Yunani Klasik
Orang Yunani Klasik lebih senang dengan filsafat dan matematika, namun juga mempelajari seni
dan berusaha untuk membuat tubuh manusia yang atletis, dalam kondisi bergerak atau diam,
untuk menunjukkan konsep Yunani Klasik tentang keindahan dan kesempurnaan tubuh manusia.
Lukisan di dinding bangunan umum seperti kuil, dipandang sebagai kegiatan seni yang agung
dan penting, tapi media lukis yang rapuh membuat lukisan Yunani sangat rentan untuk rusak.
Salah satu karya Yunani yang masih selamat adalah lukisan dinding yang ditemukan di Vergina
pada tahun 1977. Meskipun begitu, lukisan Yunani masih dapat dilihat dalam vas dan guci, yang
disebut amphorae, yang digunakan untuk menyimpan minyak dan anggur.[4] Gambar-gambarnya
menunjukkan dongeng Yunani atau kehidupan sehari-hari. Kebudayaan Yunani diawali dari
kebudayaan daerah Kreta (Minois), kemudian berkembang hingga mencapai klasiknya.
Kekaisaran Roma
Pada masa ini, gambar dari lukisan banyak dipengaruhi oleh agama Nasrani (Katolik), sehingga
tema lukisan atau patung sebagian besar tentang Yesus, gedung-gedung gereja yang interiornya
dekoratif dan mewah serta eksterior yang polos dan hampir tanpa dekorasi. Para seniman lebih
menekankan pencitraan daripada gambar yang berkualitas, tercermin pada gambar Yesus dan
para pengikutnya yang lebih besar, menandakan bahwa mereka istimewa. Pada dasarnya, lukisan
pada masa ini merupakan adaptasi dari masa Yunani. Contohnya, salah satu mozaik yang
ditemukan tertimbun di dalam debu vulkanik di Pompeii, yang menggambarkan momen
peperangan antara Alexander Agung dan Raja Persia Darius.
Mozaik yang menggambarkan peperangan Alexander Agung dan Darius III dari Persia (DZT)
Renaisans
Lukisan Mona Lisa karya Leonardo da Vinci (DZT)

Renaisans adalah masa tumbuhnya ide-ide baru dan seni di Eropa, pertama kali muncul di Italia,
berpusat di Florence pada abad ke-15. Masa dimana nilai-nilai seni, sastra, dan arsitektur Yunani
dan Romawi kuno lahir kembali, dengan perspektif tiga dimensi yang digunakan banyak
seniman. Arah seni pada masa ini lebih ke arah intelektualitas dan makna artistik yang
terinspirasi oleh kemanusiaan (humanisme). Karya-karya yang telah kita kenal adalah Mona Lisa
karya Leonardo da Vinci (1503-1506), patung David karya Michelangelo Buonarroti (15011504), School of Athens karya Raphael (1510-1511), Ecstasy of St. Teresa karya Giovanni
Lorenza Bernini (1645-1652).[5]
Masa Kini
Gambar atau citra telah berkembang seiring dengan perkembangan peradaban manusia.
Bentuknya tidak lagi hanya lukisan seperti zaman prasejarah. Kini ada foto, gambar yang
dihasilkan dengan menangkap cahaya pada medium yang telah dilapisi bahan kimia peka cahaya
atau sensor digital, lalu ada film, gambar yang bergerak. Bahkan dengan adanya teknologi,
evolusi gambar hanya berkisar di seni lukis, seni patung, foto, dan film. Medium yang dipakai
mulai beragam, dari yang awalnya memakai kanvas, sekarang bisa memakai kertas hingga yang
berbentuk digital. Bagaimanapun juga, fungsi gambar juga tidak akan berubah, sebagai sebuah
simbol dari apa yang ingin dikomunikasikan. Citra atau gambar adalah alat yang manusia pakai
untuk menyampaikan pesan kepada manusia lainnya.
Warna
Untuk kegunaan lain dari Warna, lihat Warna (disambiguasi).
Warna-warna utama
Warna adalah spektrum tertentu yang terdapat di dalam suatu cahaya sempurna (berwarna
putih). Identitas suatu warna ditentukan panjang gelombang cahaya tersebut. Sebagai contoh
warna biru memiliki panjang gelombang 460 nanometer.
Panjang gelombang warna yang masih bisa ditangkap mata manusia berkisar antara 380-780
nanometer.
Dalam peralatan optis, warna bisa pula berarti interpretasi otak terhadap campuran tiga warna
primer cahaya: merah, hijau, biru yang digabungkan dalam komposisi tertentu. Misalnya
pencampuran 100% merah, 0% hijau, dan 100% biru akan menghasilkan interpretasi warna
magenta.
Dalam seni rupa, warna bisa berarti pantulan tertentu dari cahaya yang dipengaruhi oleh pigmen
yang terdapat di permukaan benda. Misalnya pencampuran pigmen magenta dan cyan dengan
proporsi tepat dan disinari cahaya putih sempurna akan menghasilkan sensasi mirip warna
merah.
Setiap warna mampu memberikan kesan dan identitas tertentu sesuai kondisi sosial
pengamatnya. Misalnya warna putih akan memberi kesan suci dan dingin di daerah Barat karena
berasosiasi dengan salju. Sementara di kebanyakan negara Timur warna putih memberi kesan
kematian dan sangat menakutkan karena berasosiasi dengan kain kafan (meskipun secara teoritis
sebenarnya putih bukanlah warna).
Di dalam ilmu warna, hitam dianggap sebagai ketidakhadiran seluruh jenis gelombang warna.
Sementara putih dianggap sebagai representasi kehadiran seluruh gelombang warna dengan
proporsi seimbang. Secara ilmiah, keduanya bukanlah warna, meskipun bisa dihadirkan dalam
bentuk pigmen.
Daftar isi
1 Pengelompokan
2 Istilah lain
3 Nama-nama warna
o
3.1 Warna dasar
3.2 Warna kombinasi
4 Warna harmonis
5 Galeri
Pengelompokan
1. Warna netral, adalah warna-warna yang tidak lagi memiliki kemurnian warna atau
dengan kata lain bukan merupakan warna primer maupun sekunder. Warna ini merupakan
campuran ketiga komponen warna sekaligus, tetapi tidak dalam komposisi tepat sama.
2. Warna kontras atau komplementer, adalah warna yang berkesan berlawanan satu dengan
lainnya. Warna kontras bisa didapatkan dari warna yang berseberangan (memotong titik
tengah segitiga) terdiri atas warna primer dan warna sekunder. Tetapi tidak menutup
kemungkinan pula membentuk kontras warna dengan menolah nilai ataupun kemurnian
warna. Contoh warna kontras adalah merah dengan hijau, kuning dengan ungu dan biru
dengan jingga.
3. Warna panas, adalah kelompok warna dalam rentang setengah lingkaran di dalam
lingkaran warna mulai dari merah hingga kuning. Warna ini menjadi simbol, riang,
semangat, marah dsb. Warna panas mengesankan jarak yang dekat.
4. Warna dingin, adalah kelompok warna dalam rentang setengah lingkaran di dalam
lingkaran warna mulai dari hijau hingga ungu. Warna ini menjadi simbol kelembutan,
sejuk, nyaman dsb. Warna dingin mengesankan jarak yang jauh.
Istilah lain
Nilai warna, ditentukan oleh tingkat kecerahan maupun kesuraman warna. Nilai ini
dipengaruhi oleh penambahan putih ataupun hitam. Di dalam sistem RGB, nilai ini
ditentukan oleh penambahan komponen merah, biru, dan hijau dalam komposisi yang
tepat sama walaupun tidak harus penuh seratus persen.
Nama-nama warna
Warna dasar
Kuning
Merah
Hijau
Fractal Broccoli
Biru
Am
arillo
Hanz
a yellow light
Aur
eolin
Cadmium
yellow
Cad
mium yellow light
Nickeltint
Yello
w ironoxide
Napl
es yellow
Yello
w ochre
ate
Sul
phur crystal
Sulp
herous Fumeroles
Warna kombinasi
Abu-abu
Solid gray
Merah muda
Jingga/Oranye
Ungu
Sunset at French Riviera
Aster
Violettne eines Fubettes.
1940 Ford automobile.
...
* ''Magenta''
</gallery>
Crimson
Crimson sunset
Maroon
Warna harmonis

Galeri
Coklat, jingga, kuning dan merah
Biru, coklat, merah, hijau, biru dan

shades
Merah, putih, hitam, hijau dan shades
Hitam dan merah
Hijau dan merah
Perak, kuning, coklat, perak, hitam,

ochre, jingga, dark red, crimson, abuabu dan biru
Jingga, putih, hijau, biru dan merah
Buntstifte.
Jingga, coklat, merah, hijau, kuning

dan shades
Farbige streifen.
Tabel
Tabel dapat merujuk kepada:
Tabel (informasi), sebuah alat untuk menampilkan informasi dalam bentuk matriks.
o Sebagai contoh adalah tabel matematika, tabel kebenaran, tabel periodik, elemen
tabel HTML (<table></table>), dan lain-lain.
Tabel (database), sebuah set data di dalam suatu database.
Tabel dapat berarti daftar. Wikipedia memiliki beragam daftar sebagai alat bantu navigasi
dan pengembangan artikel.
Pranala
(Dialihkan dari Hyperlink)
Pranala[1] (bahasa Inggris: hyperlink) adalah sebuah acuan dalam dokumen hiperteks ke
dokumen yang lain atau sumber lain. Seperti halnya suatu kutipan di dalam literatur.
Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah
komputer dapat diminta untuk memperoleh sumber yang direferensikan.
Ada beberapa cara (format) untuk menampilkan pranala pada halaman web. Sebuah embedded
link (pranala yang tersimpan) adalah salah satu dari beberapa cara yang biasa digunakan: satu
atau lebih dari kata-kata yang menggunakan tipe / gaya teks khusus.
Daftar isi
1 Pranala pada HTML

2 Pranala pada XML
3 Cara kerja di dalam HTML
4 Link Behaviour di dalam penjelajah web
5 Pranala sebagai currency dari Waring Wera Wanua
6 Sejarah
7 Undang-undang dan moral yang dikeluarkan mengenai ranala
8 Istilah dalam bahasa Indonesia
Pranala pada HTML

Tim Berners-Lee melihat kemungkinan dari penggunaan pranala untuk setiap bagian tautan
informasi ke bagian informasi yang lain melalui internet. Dalam HTML tautan dilambangkan
oleh elemen <a> (anchor).
Pranala pada XML

Sebuah rekomendasi khusus dari W3C disebut XML Linking Language (Bahasa link XML),
Xlink menguraikan pranala yang menawarkan fungsi yang lebih luas daripada yang terdapat
pada HTML. "Pranala yang diperluas" bisa multiarah, artinya dapat memautkan dari, dalam dan
antara dokumen-dokumen XML. Rekomendasi ini juga menjelaskan pranala sederhana yang
bersifat searah dan karenanya tidak menawarkan fungsionalitas lebih daripada pranala pada
HTML.
Cara kerja di dalam HTML

Sebuah pranala memiliki dua bagian, disebut jangkar (anchor), dan tujuan. Sebuah pranala
dimulai pada jangkar sumber dan menunjuk pada jangkar tujuan.
Kebanyakan jangkar tujuan adalah URL yang digunakan pada Waring Wera Wanua. Ini dapat
merujuk kepada sebuah dokumen, contohnya halaman web, atau sumber yang lain, atau sebuah
posisi pada halaman web. Yang terakhir ini dilakukan melalui elemen HTML dengan atribut
name atau id pada posisi dokumen HTML dokumen tersebut. URL posisi tersebut adalah URL
halaman web dengan menambahkan "#nama atribut".
Link Behaviour di dalam penjelajah web

Sebuah penjelajag web biasanya ditampilkan sebuah pranala dengan cara yang berbeda, misalnya
dengan perbedaan warna, huruf, atau gaya. Style dan behaviour pada pranala dapat
dispesifikasikan menggunakan bahasa CSS (Cascading Style Sheet).
Ini merupakan grafis antarmuka pengguna, pemakaian sebuah kursor tetikus dapat juga diganti
dengan bentuk tangan untuk menunjukkan bahwa itu adalah sebuah pranala. Pada secara grafis
kebanyakan pada penjelajah web, pranala ditampilkan dengan menggunakan tulisan biru dengan
garis bawah ketika tidak diklik, tetapi berubah menjadi tulisan bergaris bawah berwarna ungu
ketika di klik. Ketika pengguna mengaktifkan link (seperti : meng-klik dengan mouse) penjelajah
akan menampilkan tujuan dari pranala itu. Jika tujuan bukan sebuah berkas HTML, maka akan
bergantung pada jenis berkas yang ada di penjelajah dan itu disebut dengan plugin-plugin.
Program lain mungkin dapat diaktifkan untuk membuka berkas itu.
Kode HTML mengandung beberapa atau semua dari 5 karakteristik pokok dari sebuah pranala:
Tujuan pranala ("href" menunjukkan ke sebuah URL)

Label pranala
Judul pranala
Sasaran pranala
Kelas pranala atau ID pranala
Ini biasanya menggunakan element HTML "a" dengan dilengkapi "href" dan juga karakter lain
"title", "target", dan "class" atau "id".
<a href ="URL" title="judul pranala" target="sasaran pranala" class="kelas
pranala">Label Pranala</a>
Untuk membuat sebuah pranala ke dalam sebuah halaman situs dapat diambil bentuk ini :
Contoh Kode <a href="http://id.wikipedia.org/">Wikipedia</a>
Hasil
Wikipedia
Sedangkan untuk pranala yang kompleks barisannya dikurangi, [BendGovt]. Ini berperan untuk
kebersihan, sehingga mudah untuk membaca teks atau dokumen.
Ketika kursor berada (menunjuk) sebuah pranala, tergantung pada penjelajah dan atau antarmuka
pengguna grafis, beberapa informasi teks mengenai pranala akan ditunjukkan :
Pops up, bukan pada jendela itu, tetapi ini adalah sebuah kotak khusus yang melayang,
yang menghilang ketika kursor di geser. (Beberapa pops up juga menghilang setelah
beberapa saat, dan kembali muncul jika kursor digerakkan pergi atau kembali). Internet
Explorer (IE) dan Mozilla Firefox menunjukkan judul, Opera juga menunjukkan URL.
Sebagai tambahan, URL juga ditunjukkan pada status bar.
Umumnya, sebuah pranala akan membuka frame atau jendela sebelumnya, tetapi sebuah situs
yang menggunakan frame dan jendela-banyak untuk navigasinya menambahkan sebuah karakter
khusus "target" untuk menyepesifikasikan dimana pranala tersebut di bebankan. Jendela diberi
nama sesuai dengan keinginan dan identifikasi itu mengacu pada sesi penjelajah sebelumnya.
Jika pada jendela sebelumnya tidak cocok dengan nama itu, sebuah jendela baru akan dibuat
dengan menggunakan ID.
Pembuatan jendela baru biasanya menggunakan karakter "target". Untuk mencegah
penggunaan jendela yang berulang-ulang, sasaran jendela khusus dengan nama "_blank" dan
"new", karakter ini akan selalu memunculkan jendela baru. Terutama untuk melihat tipe pranala
ini adalah ketika suatu halaman website berputan pada halaman halaman lain. Tujuannya adalah
untuk memastikan pengguna tidak kebingungan saat menjelajah pada situs yang telah dipautkan
dengan situs lain. Terkadang karakter ini sering digunakan secara berlebihan sehingga dapat
menyebabkan banyaknya jendela yang terbuat saat menjelajah pada sebuah situs.
Karakter untuk sasaran halaman khusus yang lain adalah "_top", ini adalah karakter frame yang
berguna untuk menghapus jendela lama sehingga penjelajahan dapat dilanjutkan dengan jendela
yang penuh.
Pranala sebagai currency dari Waring Wera Wanua

Mesin Pencari Google menggunakan PageRank (halaman untuk merangking), untuk mengukur
popularitas sebuah pranala untuk menentukan halaman mana yang menduduki barisan teratas.
Semakin banyak pranala yang yang dimiliki untuk merujuk ke halaman lain, maka akan
mendapat rangking yang lebih tinggi. Faktor-faktor lain yang sama pentingnya ; melihat
PageRank untuk mendapat informasi yang lebih.
Sejarah
Istilah pranala (hyperlink) telah dipakai pada tahun 1965 (atau mungkin 1964) oleh Ted Nelson
dan dimulai pada Project Xanadu. Nelson telah berinspirasi dengan As We May Think sebuah
karangan yang popular oleh Vannevar Bush. Di dalam karangannya, Bush mendeskripsikan
sebuah dasar mesin mikrofilm yang dapat menghubungkan 2 halaman informasi ke dalam sebuah
trail dari informasi yang berhubungan, dan kemudian di scroll bolak-balik antarhalaman. Pantas
jika mereka menyebutnya sebagai sebuah single microfilm. Analogi saat ini adalah membangun
sebuah daftar (barisan) petunjuk halaman buku mengenai pokok-pokok yang berhubungan
dengan halaman web kemudian mengijinkan pengguna menggulung maju dan mundur sesuai
urutan.
Di dalam seri buku dan artikelnya yang dipublikasikan dari 1964 sampai 1980, Nelson
mengubah konsep Bush dengan cross-referencing diotomatiskan ke dalam konteks computer,
dibuat dengan barisan teks spesifik menjadi sebuah halaman yang utuh, memasyarakatkannya
dari mesin desk-sized (berukuran desk) lokal ke suatu jaringan komputer diseluruh dunia, dan
didukung dengan ciptaan sebuah jaringan seperti itu. Sementara itu, sebuah team led oleh
Douglas Engelbart (dengan Jeff Rulifson sebagai programernya) pertamakali
mengimplementasikan konsep parnala untuk scrolling dengan sebuah dokumen singel (1966),
segera setelah itu untuk menghubungkan paragraf dengan salinan dokumen yang lain (1968).
Lihat NLS
Undang-undang dan moral yang dikeluarkan mengenai

ranala
Pranala antar-isi halaman intenet harus mempertimbangkan fitur intrinsik di internet, beberapa
situs web telah mengklaim bahwa mereka tidak boleh menghubungkan tanpa izin.
Dalam peraturannya, mencantumkan pranala bukanlah referensi atau acuan, melainkan alat untuk
mengkopi halaman web. Di Belanda misalnya,Karin Spaink telah dihukum karena melanggar
hak cipta tentang menghipernaut, walaupun peraturan telah dijungkirbalikkan pada tahun 2003.
Disamping itu, prinsip ini ditolak oleh digerati, Mereka melihat bahwa pranala yang mereka
hubungkan menuju pada sesuatu yang ilegal dan digunakan untuk sesuatu yang ilegal untuk
dirinya.
Di Jepang, hal itu merupakan suatu tindakan yang tidak sopan menghubungkan suatu situs web
pribadi (terutama seorang artis) tanpa izin terlebih dahulu. Oleh karena itu banyak artis Jepang,
dan beberapa artis Amerika yang memiliki hubungan denga Dunia CG Jepang, Menggunakan
istilah Free Link pada websitenya untuk menandakan bahwa itu tidak boleh ditautkan.
Pada tahun 2000, British Telecom menuntut Prodigy bahwa Prodigy telah melanggar hak
patennya (US Patent 4.873.662) tentang parnala di situs web. Setelah membayar mahal,
pengadilan menemukan bahwa hak paten British Telecom tidaklah aktual pada halaman situs
web.
Istilah dalam bahasa Indonesia

Kata pranala diambil dari bahasa Kawi atau Bahasa Jawa Kuna yang pada gilirannya mengambil
dari bahasa Sanskerta: pran la yang berarti "anak sungai", saluran, terusan dari kolam dan
sebagainya. Kata yang mirip dalam bahasa Sanskerta adalah: pran lik yang berarti terusan atau
perantara.
Dalam bahasa Jawa Kuna, kata ini berarti penyangga, sandaran, lapik atau alas patung. Selain itu
kata ini bisa pula berarti, yon i atau alas lingga.
Tetikus
(Dialihkan dari Mouse)
Mengoperasikan tetikus mekanikal.

1. Bola akan berputar saat tetikus digerakkan.
2. Penggulung X dan Y mencengkeram bola tersebut dan memindahkan gerakan.
3. Cakram menerjemahkan gerakan menjadi kode optis lewat lubang cahaya.
4. LED inframerah memancar lewat cakram.
5. Sensor mengumpulkan pantulan cahaya untuk mengubah posisi X dan Y.
Tetikus (bahasa Inggris: mouse) adalah alat yang digunakan untuk memasukkan data dan
perintah ke dalam komputer selain papan tombol. Tetikus memperoleh nama demikian karena
kabel yang menjulur berbentuk seperti ekor tikus[1].
Tetikus pertama kali dibuat pada tahun 1963 oleh Douglas Engelbart berbahan kayu dengan satu
tombol. Model kedua sudah dilengkapi dengan 3 tombol. Pada tahun 1970, Douglas Engelbart
memperkenalkan tetikus yang dapat mengetahui posisi X-Y pada layar komputer, tetikus ini
dikenal dengan nama X-Y Position Indicator (indikator posisi X-Y).
Bentuk tetikus yang paling umum mempunyai dua tombol utama, masing-masing di sebelah kiri
atas dan kanan atas yang dapat ditekan. Tetikus modern umumnya dilengkapi dengan tombol
scroll yang juga dapat ditekan sebagai tombol ketiga. Walaupun demikian, komputer-komputer
berbasis Macintosh biasanya menggunakan tetikus satu tombol.
Tetikus bekerja dengan menangkap gerakan menggunakan bola yang menyentuh permukaan
keras dan rata. Tetikus yang lebih modern sudah tidak menggunakan bola lagi, tetapi
menggunakan sinar optis untuk mendeteksi gerakan. Selain itu, ada pula yang sudah
menggunakan teknologi nirkabel, baik yang berbasis radio, sinar inframerah, maupun bluetooth.
Saat ini, teknologi terbaru sudah memungkinkan tetikus memakai sistem laser, memungkinkan
resolusi mencapai 2.000 titik per inci (dpi) hingga 4.800 titik per inci. Biasanya tetikus model ini
diperuntukkan bagi penggemar permainan video.
Galeri
Paten bola tetikus pertama.

Sebelah kiri adalah roda trek
berlawanan oleh Englebart,
dengan nomor paten 3541541
(Inggris) November 1970.
Gambar tengah adalah bola dan
roda oleh Rider, dengan nomor Bagian dalam tetikus
paten 3835464 (Inggris)
mekanikal yang dibuka. Bagian Tetikus optis buatan Logitech
September 1974. Kanan adalah bawah adalah tetikus, kiri atas bersensor laser dengan
bola dan dua penggelinding oleh adalah bola, dan kanan atas
ketelitian mencapai 4.800 titik
Opocentsky, dengan nomor
per inci, nirkabel dengan
adalah pengait.
paten 3987685 (Inggris) Oktober
memanfaatkan gelombang
1976.
radio.
Tetikus pertama di dunia.
Bahasa lembar gaya

(Dialihkan dari Stylesheet)
Bahasa lembar gaya (Bahasa Inggris: stylesheet language) adalah suatu bahasa komputer yang
digunakan untuk merepresentasikan dokumen terstruktur. Salah satu jenis bahasa ini yang
digunakan secara luas adalah CSS (Cascading Style Sheets) yang digunakan untuk menampilkan
dokumen yang ditulis dalam bahasa markah, seperti HTML, XHTML, SVG, XUL, dll. Satu fitur
paling menarik dari dokumen terstruktur adalah bahwa isinya dapat digunakan dalam berbagai
konteks dan dapat ditampilkan dengan berbagai cara. Berbagai jenis lembar gaya dapat
dipergunakan pada struktur logis untuk melayani kebutuhan yang berbeda. Walaupun demikian,
kemudahan dokumen terstruktur ini dibebani dengan suatu mekanisme yang dibutuhkan untuk
dapat menampilkan isinya untuk pengguna.
JQUERY
1.
Definisi Jquery
jQuery adalah library JavaScript multiplatform yang dirancang untuk

memudahkan penyusunan client-side script pada file HTML.
Digunakan oleh 60 persen dari 10000 situs web paling banyak dikunjungi di
dunia, jQuery adalah library JavaScript yang paling populer saat ini. jQuery
merupakan sebuah perangkat lunak bebas sumber terbuka yang berada di
bawah lisensi MIT.
Sintaks jQuery dirancang sedemikian rupa untuk memudahkan pengembang
website dalam menavigasi dokumen, menyeleksi elemen-elemen DOM,
menerapkan animasi, mengaplikasikan events, serta membangun aplikasi
AJAX.
jQuery juga memampukan developer menciptakan berbagai plugin berbasis
library JavaScript. Dengan plugin-plugin tersebut, pengembang situs web
mampu menyusun sejumlah abstraksi untuk interaksi dan animasi
sederhana, juga beberapa efek yang cukup kompleks dan berbagai widget
yang dapat dikonfigurasikan.
Karakter library JavaScript yang modular mendukung pengembangan laman
web dinamis dengan berbagai fitur dan aplikasi berbasis web (web app).
Fitur-fitur inti jQuery meliputi penyeleksian, traversal, dan manipulasi
elemen-elemen DOM dimampukan oleh sebuah selector engine (dinamai
Sizzle mulai versi 1.3), telah mewujudkan suatu gaya pemrograman baru
yang memadukan antara algoritma dan struktur data DOM. Gaya ini telah
mempengaruhi arsitektur dari framework JavaScript lainnya seperti YUI v3
dan Dojo, dan di kemudian menstimulasi pengembangan Selectors API
standar.
Microsoft dan Nokia membundel jQuery pada platform mereka. Microsoft
memasukkannya dalam Visual Studio untuk digunakan dalam framework
ASP.NET AJAX dan ASP.NET MVC, sedangkan Nokia mengintegrasikannya
dalam platform pengembangan widget Web Run-Time. jQuery juga mulai
dipakai pada MediaWiki sejak versi 1.16.
Situs resmi jQuery beralamat di jquery.com. Pengembangannya dikelola
oleh jQuery Foundation yang berada di jquery.org. Library ini bisa diunduh
di laman jquery.com/download, atau diterapkan melalui sejumlah CDN
termasuk Google jQuery CDN.
2.
Membedah jQuery
jQuery, pada intinya, adalah sebuah library yang berfungsi untuk

memanipulasi DOM. DOM merupakan representasi struktural dari seluruh
elemen pada sebuah laman web.
Keberadaan jQuery menjadikan kerja pencarian, penyeleksian, dan
manipulasi elemen-elemen DOM menjadi simpel dan mudah. Sebagai
contoh, jQuery bisa dipergunakan untuk menemukan sebuah elemen dalam
dokumen yang memiliki properti tertentu (misalnya: elemen dengan tag
`h1`), kemudian mengubah satu atau beberapa atributnya (misalnya: warna,
visibilitas), atau menjadikan elemen tersebut responsif terhadap suatu event
(misalnya: klik mouse).
Selain penyeleksian dan manipulasi DOM dasar, jQuery menyajikan sebuah
paradigma baru pada penanganan event oleh JavaScript. Penugasan event
dan pendefinisian fungsi event callback dapat dilakukan dengan satu
langkah dalam satu lokasi di dalam kode.
jQuery juga dikembangkan untuk mendayagunakan berbagai fungsionalitas
JavaScript yang paling sering dipakai (misalnya: fade in atau fade out ketika
menentukan visibilitas elemen, juga bermacam animasi yang dimunculkan
dengan memanipulasi properti-properti CSS).
Keuntungan dari pemanfaatan jQuery antara lain:
Memisahkan JavaScript dan HTML Tanpa menggunakan atributatribut HTML untuk memanggil fungsi Javascript dalam penanganan
event, jQuery bisa dipergunakan untuk menangani event dengan script
JS saja.
Singkat dan Jelas jQuery mengutamakan penulisan kode yang

singkat dan jelas melalui berbagi fitur seperti fungsi-fungsi yang dapat
dirangkaikan (chain-able) dan nama-nama fungsi yang pendek.
Mengatasi masalah kompatibilitas antar-browser JavaScript

engine pada berbagai browser memiliki perbedaan satu sama lain,
sehingga script yang berjalan pada suatu browser bisa gagal pada
browser lainnya. jQuery mengatasi segala inkonsistensi antar-browser
tersebut dan menyajikan antarmuka yang konsisten bekerja pada
semua browser.
Ekstensibel jQuery menjadikan pengembangan framework sangat

simpel. Berbagai event, elemen, dan metode baru dapat dengan
mudah ditambahkan dan digunakan ulang sebagai plugin.
3.
Fitur-fitur jQuery
jQuery memiliki fitur-fitur sebagai berikut:
Penyeleksian elemen-elemen DOM menggunakan selector engine

Sizzle. Sizzle merupakan perangkat lunak multiplatform sumber
terbuka yang berawal sebagai proyek sampingan jQuery.
Manipulasi DOM berdasarkan selektor CSS yang memanfaatkan namanama dan atribut elemen, misalnya id dan class, sebagai kriteria
seleksi simpul-simpul DOM.
Events
Efek dan animasi
AJAX
Obyek-obyek deferred and promose untuk mengontrol pemrosesan

asinkron
Penguraian JSON
Ekstensibilitas melalui plugin
Sejumlah utilitas, misalnya: informasi agen pengguna (user agent),

deteksi fitur perangkat
Metode-metode kompatibilitas yang tersedia secara bawaan pada

browser-browser modern, namun membutuhkan pencadangan pada
browser yang lebih tua, misalnya `inArray()` dan `each`
Dukungan multi-browser
Browser yang Didukung jQuery
Baik versi 1.x maupun 2.x dari jQuery, keduanya mendukung current-1
versions (artinya versi stable terkini dari sebuah browser dan satu versi
yang mendahuluinya) untuk Firefox, Google Chrome, Safari, dan Opera.
Versi 1.x juga mendukung IE 6 atau diatasnya. Sedangkan versi 2.x tidak lagi
mendukung Internet Explorer 6 sampai 8 (yang mewakili kurang dari 28%
dari seluruh browser yang digunakan) dan hanya mendukung IE 9 dan
selanjutnya.
Penggunaan jQuery
Menautkan library
Library jQuery adalah sebuah file JavaScript yang memuat seluruh fungsifungsi umum DOM, event, efek, dan Ajax. File ini bisa ditautkan dalam
sebuah laman web ke salinan pada server lokal atau pada salinan yang
disajikan melalui server publik (CDN) antara lain:
MaxCDN
Google
Microsoft ASP.NET
cdnJs
jsDelivr
Untuk menautkan file jQuery pada server lokal, gunakan kode berikut:
<script src="jquery.js"></script>
Untuk menggunakan CDN, sisipkan kode berikut:
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
Gaya Penggunaan
jQuery memiliki dua gaya penggunaan:
Via fungsi $ adalah factory method untuk obyek jQuery. Fungsifungsi semacam ini, kerap disebut sebagai commands (perintah),
dapat dirangkaikan (chainable) sebab masing-masing menyajikan
obyek.
Via fungsi $.-prefiks fungsi-fungsi utilitas yang tidak dijalankan
secara langsung pada obyek.
Pada penggunaan tipikal, akses dan manipulasi atas simpul-simpul DOM

diawali dengan pemanggilan fungsi $ menggunakan string selektor CSS.
Metode ini menghasilkan sebuah obyek jQuery yang merujuk pada elemenelemen HTML yang sesuai.
Sebagai contoh, $(div.namaclass) akan menghasilkan obyek dengan tipe
div dan class namaclass. Simpul ini dapat dimanipulasi dengan
menyambungkan satu atau beberapa fungsi jQuery di belakangnya.
Mode No-Conflict
jQuery juga memuat mode .noConflict() yang melepaskan kontrol dari $.
Fitur ini sangat berguna jika jQuery digunakan bersama dengan library
lainnya yang juga memakai penanda $.
Pada mode no-conflict, kita bisa menggunakan jQuery sebagai pengganti
dari $ tanpa kehilangan fungsionalitasnya.
4. Sejarah jquery
Petama kali dibuat oleh John Resig pada tahun 2005, JQuery sendiri
pertama kali dirilis tanggal 14 Januari 2006. Dan versi terbaru dari JQuery
udah sampe versi 1.3.2. Dia terinspirasi dari Behavior code. Saat itu, Dia
ngerasa hasil dari Behavior Code tidak elegan dan masih jelek, maka
dikembangkannya JQuery. Dimana dengan penulisan code JQuery jadi lebih
simple, gampang dan tentunya dengan hasil yang memuaskan. jQuery
adalah library JavaScript OpenSource yang menekankan pada interaksi
antara JavaScript dan HTML.
Apa bedanya dengan situs-situs yang tidak menggunakan JQuery?
banyak bedanya, misalnya browser seakan tidak merefresh sebuah page
ketika kita men-submit sebuah data kedalam server mereka. Dan lebih
hebatnya lagi JQuery mempunyai animasi tanpa menggunakan flash(.swf),
jadi lebih cepeat diload didalam browser dan tanpa harus install plugins.
5.
Apa itu jquery
Jquery adalah kumpulan beberapa kode yang siap dipakai untuk

mempermudah dan mempercepat dalam pembuatan kode Javascript. Yang
awalnya
menggunakan
kode
yang
sangat
panjang
namun
dengan
mengggunakan jquery kita bisa langsung memanggil fungsi yang terdapat

dalam Library tersebut. Jadi intinya jquery itu menyederhanakan kode
Javascript sesuai dengan slogannya yaitu
Write
less,
do more.
Pengertian lain dari jquery adalah pustaka JavaScript kecil bersumber

terbuka yang menekankan pada interaksi antara JavaScript dan HTML.
jQuery ukuran nya cukup kecil, sehingga tidak memperlambat proses loading
halaman web yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang
tak kalah penting adalah jQuery bisa berjalan di semua browser cross
browser.
jQuery diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library
Javascript yang paling populer saat ini. Karena kecanggihan nya, jQuery
dipakai oleh perusahaan besar seperti Google. Dell, CBS, digg, Netflix, Bank
of America, Mozilla, Drupal, dsb.
jQuery adalah library Javascript yang gratis dan open source. Oleh karena
nya
kita
bisa
menggunakan
jQuery
dengan
bebas
untuk
keperluan
pengembangan website kita. Tanpa library seperti jQuery, menerapkan

Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru
belajar Javascript. Plugin tambahan seperti JQuery UI (user interface)
semakin memudahkan kita mengembangkan website yang cantik dan
interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya
kemampuan jQuery.
Dengan semakin berkembangnya JQuery, semakin memudahkan pula
untuk para web programmer membuat website yang cantik dan dinamis.
Nah, kenapa JQuery banyak digunakan, salah satunya adalah JQuery mampu
menampilkan animasi-animasi semisal slideshow, datepicker, autocomplete,
dan masih banyak lagi tapi tanpa membuat suatu website itu terlihat berat
atau memakan waktu lama untuk diload.
File jQuery adalah library Javascript dasarnya. Ini perubahan cara
pengembang menulis Javascript karena menangani banyak fitur utama yang
digunakan oleh pengembang Javascript. Coding untuk hal-hal seperti event
handler dan animasi menjadi jauh lebih mudah melalui penggunaan jQuery
karena memerlukan sedikit coding.
Perpustakaan Jquery dapat dimuat dengan cepat dan diimplementasikan
langsung untuk script website yang dapat digunakan waktu dan waktu lagi.
Ini adalah batu loncatan yang besar di bidang efisiensi pemrograman yang
agak mudah dipelajari. Sebagian besar proses belajar didasarkan pada
tutorial yang menunjukkan bagaimana memanipulasi pengembang HMTL,
CSS, dan kode Ajax.
Ketika jQuery adalah menggunakan referensi skrip file jquery.js.
Perpustakaan ini adalah open source, yang berarti bahwa hal itu dapat
dimodifikasi oleh pengembang untuk memenuhi kebutuhan spesifik untuk
situs Web tertentu. File ini berisi semua model objek dokumen (DOM), dan ini
menyederhanakan
fungsi
untuk
cross-browser
dan
lintas-bahasa
kompatibilitas.
Waktu pengembangan yang lebih cepat juga merupakan salah satu hal
yang dikaitkan dengan pengembangan halaman web jQuery. Ini adalah sisi
klien Ajax kerangka yang mendukung semua teknologi sisi server
pengembangan aplikasi web. Hal ini memungkinkan pengembang untuk
menulis kode kurang untuk melakukan fungsi yang sama lebih cepat. Hal ini
bahkan dapat lebih baik ketika digunakan untuk mengedit kode yang sudah
ada.
Plugin untuk jQuery telah menjadi cukup menjadi di antara para
pengembang karena banyak dari mereka menawarkan kesempatan untuk
menambahkan dimensi yang berbeda untuk halaman web. Setelah sumber
file jQuery telah dimuat, salah satu perintah yang paling berguna adalah
fungsi dokumen yang register acara siap. Hal ini pada titik ini bahwa
pengguna dapat mulai menambahkan acara.
Bahasa adalah salah satu sederhana karena banyak peristiwa yang
digunakan diberi nama dengan cara deskriptif yang bertepatan dengan
perintah. Pengembang yang ingin menggunakan fungsi keluar memudar,
misalnya, dapat menggunakan fadeOut jQuery () perintah untuk memulai
dengan ini. Sama bekerja untuk menyembunyikan dan perintah
menghidupkan yang digunakan oleh pengembang jQuery.
Ada banyak fungsi lainnya banyak digunakan untuk Cascading style
sheet juga. Sintaks untuk CSS adalah sebagai berikut: css (). Ini memberi
Anda berbagai pilihan karena memiliki tiga opsi sintaks yang berbeda yang
dapat digunakan untuk melakukan fungsi yang berbeda. Ada css (nama)
fungsi yang mengembalikan nilai properti CSS, ada juga css (nama, nilai)
fungsi yang menetapkan properti dan nilai. Terakhir, ada CSS ({properti})
yang menetapkan beberapa properti dan nilai-nilai. Fungsi-fungsi ini ideal
karena mereka mengijinkan pengguna untuk menambahkan tingkat tertentu
dari kode untuk proyek-proyek mereka.
Ini adalah salah satu alat scripting terpanas untuk pengembangan web
yang mengikuti pola dari komunitas kode open source. JQuery dipecah dalam
istilah yang sangat sederhana dengan fungsi kata kunci sebagai identifier
objek yang namanya $. Pengembang yang mampu mengikuti dan mengedit
array tutorial seharusnya tidak memiliki masalah menggunakan kode
berorientasi obyek. Ini jelas membuat pengembangan lebih mudah bagi
mereka yang mengetahui JavaScript
6.
Keunggulan jquery
1. Mempunyai daya akses yang sangat cepat Karena hanya terdiri dari satu
file saja dan ukurannya pun sangat kecil berkisar 20Kb
2. Bersifat kompatibel/ cocok dengan banyak browser popular di dunia
3. Mempunyai banyak komunitas yang besar dan selalu aktif serta
dokumentasi yang lengkap
4. Banyaknya plugin yang disediakan secara cuma-Cuma (gratis ). Plugin
adalah kemampuan tambahan yang bisa disertakan pada Jquery
5. Terdapat Jquery yang berlisensi GNU atau yang dikenal dengan free.
Maka kita menggunakannya dengan tanpa dikenakan biaya apapun
6. Terdapat API( Application Programming Interface) di dalamnya
7. Mendukung Ajax ( Asynchronous Javasctip and XML)
8. Telah banyak digunakan oleh website-website dunia sebut saja Google,
twitter, facebook dan lain-lain.
9. Bersifat kompatibel dengan semua versi CSS dari yang versi 1 sampai
versi 3
10. Mempunyai tutorial, dokumentasi dan contoh-contoh yang lengkap yang
bisa kita ketahui dengan membuka halaman website nya jquery.
11. Lebih banyak digunakan oleh para developer web dibandingkan dengan
Javascript lainnya
12. write less, do more sedikit menulis tapi banyak bekerja
13. Menyederhanakan penggunaan javascript, karena kita cukup
menggunakan fungsi dari library javascropt yang ada. Juga mempercepat
coding javascript dalam sebuah website. Dibandingkan bila kita harus mulai
sebuah script javascript satu per satu dari nol.
14. Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka
halaman website dan interaksinya
15. Halaman website/blog yang dibangun dengan jQuery akan lebih
interaktif dan menarik, membuat para pengunjung lebih terkesan.
7.
Kekurangan jQuery
1. 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.
2.
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.
8.
Kemampuan
jQuery
yang
dimiliki
1. Mempermudah akses dan manipulasi elemen tertentu pada dokumen.

Biasanya diperlukan baris program yang cukup panjang untuk mengakses
suatu elemen dokumen . Namun , jQuery dapat melakukannya hanya dalam
beberapa baris program saja. Karena jQuery menpunyai Selector yang
sangat efisien untuk mengakses suatu elemen tertentu pada dokumen yang
selanjutnya bisa dimanipulasi sesuai dengan keinginan kita.
2. Mempermudah modifikasi/perubahan tampilan halaman web.
Biasanya untuk memodifikasi tampilan halaman web digunakan CSS.
Permasalahannya,
CSS
sangat
dipengaruhi
oleh
web
browser
yang
digunakan sehingga Sering terjadi halaman web yang dibuat sudah rapi dan
bagus tampilannyadi browser Mozilla, namun ketika ditampilkan di Opera
menjadi berantakan. Namun, jQuery dapat menyesuaikan style CSS pada
semua browser, sehingga permasalahann tersebut dapat dihindari.
3. Mempersingkat Ajax (Asynchronous Javascript and XML)
Kemampuan favorit dari Ajex adalah mampu mengambil informasi dari
server tanpa melakukan refresh pada halaman web, artinya halaman web
terlihat berganti secara otomatis. Apabila kita menuliskan kode Ajax secara
manual, biasanya diperlukan baris yang cukup panjang, namun jQuery dapat
mempersingkatnya menggunakan Ajax cell, perbandingan 25 baris kode Ajax
dapat disingkat menjadi 5 baris kode aja kita menggunakan jQuery.
4. Memiliki API (Application Programming Interface)
Dengan API, jQuery dapat memanipulasi content pada suatu halaman web,
seperti
pengubahan
teks,
manipulasi
gambar
(resize,rotate,crop),
penyusunan daftar (list), pengurutan list, paging, dan lain-lain.

5.Mampu merespon interaksi antara user dengan halaman web
dengan lebih cepat.
6.Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan

mudah.
9.
1.
Ragam Kreasi jQuery
Use jquery to turn off the lights while watching videos

Some videos on YouTube have a cool feature called Turn the lights down.
Basically, when you turn lights down, the entire page darkens and let you
watch video as if you are in the cinema. This tutorial will show you how to
implement this simple effect.
View live demo
The problem
Our example is simple it consists of header, the video, turn off the lights
link and sidebar with some information about the video. At the code below
you can se the command div that contains lightSwitcher link, movie div
that contains the video and description div that acts as a sidebar:
<div id="container">
<div id="header">
<h1>Janko At Warp Speed</h1>
<h2>Turn off the lights - demo</h2>
<div id="command">
<a class="lightSwitcher" href="#">Turn off the lights</a>
</div>
</div>
<div id="movie">
<object width="560" height="340">
<param name="movie"
value="http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0x3a
3a3a&color2=0x999999" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed
src="http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0x3a3a
3a&color2=0x999999"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="560"
height="340">
</embed>
</object>
</div>
<div id="description">
<p>Some description ges here</p>
</div>
</div>
CSS for this is simple:
body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center;
margin:0px; }
#container { width:960px; margin:0px auto; text-align:left;
overflow:hidden;}
#movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left;
margin-right:20px;}
#description { float:left; width:320px;border:solid 1px #dcdcdc; padding:
10px 20px;}
.lightSwitcher {background-image:url(light_bulb_off.png); backgroundrepeat:no-repeat; background-position:left;
padding: 0 0 0 20px; outline:none; text-decoration:none;}
.lightSwitcher:hover {text-decoration:underline;}
When link Turn off the lights is clicked, we need to darken the entire page.
All except the movie. This can be achieved using a div that has to have the
exact dimensions as the current document and semi-transparent black
background. This div needs to be positioned absolutely inside its relatively
positioned container (and that is BODY) and to stretch from the upper-left to
the bottom-right corner.
Lets add a div to the end of our markup:
<div id="shadow"></div>
Now lets style it:
#shadow {background-image:url(shade1x1.png); position:absolute; left:0;
top:0; width:100%; z-index:100;}
Important thing here is z-index. In order to make it cover the entire page, it
has to have the largest z-index. Embedded element will be seen, anyway. Its
easy to position a div to the top-left corner and set the width to 100%. But
what about the height? If we set the height of our shadow div to be 100% it
will cover the entire page only if contains larger than a window, or if we
have scrollbars. Otherwise, it will cover just the content.
Lets involve jQuery
$(document).ready(function(){
$("#shadow").css("height", $(document).height()).hide();
});
Aaaaand. Action!
This code set the height of shadow div to the same value as document
height and hides it. Of course, we want this div visible, only when we click on
lightSwitcher. Now we need to ad a click handler for lightSwitcher:
$(".lightSwitcher").click(function(){
$("#shadow").toggle();
});
If you try to run this now you will see that it works. LightSwitcher will toggle
shadow div visibility and that will simulate turning lights on and off. The only
problem is that the link itself will be in the dark, and you wonta be ble to
click on it again, once you turn the lights off.
The solution is simple; LightSwitcher has to have z-index higher than shadow
div. In order to do that, we have to position the link absolutely inside the
relatively positioned container and set z-index to 101:
#command { position:relative; height:25px; display:block;}
.lightSwitcher {position:absolute; z-index:101; backgroundimage:url(light_bulb_off.png);
background-repeat:no-repeat; background-position:left;
padding: 0 0 0 20px;
outline:none; text-decoration:none;}
Now it will work. If you look at the demo you will notice that while you toggle
the lights, link text and icon changes. In order to do that we have to extend
our CSS and jQuery a little bit. When you turn off the lights, light bulb icon
and text changes, and link color turn to yellow. We need to define a CSS class
that will style the link and add some jQuery to change text and toggle this
CSS class.
.turnedOff {color:#ffff00; background-image:url(light_bulb.png);}
Well extend the click handler a little bit to get this result:
if ($("#shadow").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
Now we have fully functional light switcher functionality. In the end, the
complete code will look like this:
CSS
body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center;
margin:0px; position:relative;}
#container { width:960px; margin:0px auto; text-align:left; overflow:hidden;
position:relative;}
#movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left;
margin-right:20px;}
#description { float:left; width:320px;border:solid 1px #dcdcdc; padding:
10px 20px;}
#command { position:relative; height:25px; display:block; margin: 25px 0 0
0;}
.lightSwitcher {position:absolute; z-index:101; backgroundimage:url(light_bulb_off.png);
background-repeat:no-repeat; background-position:left;
padding: 0 0 0 20px;
outline:none; text-decoration:none;}
.lightSwitcher:hover {text-decoration:underline;}
#shadow {background-image:url(shade1x1.png); position:absolute; left:0;
top:0; width:100%; z-index:100;}
.turnedOff {color:#ffff00; background-image:url(light_bulb.png);}
jQuery
$("#shadow").css("height", $(document).height()).hide();
if ($("#shadow").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
3D Effects
11:41 am
No Comments.
Rafael
2.3D Sphere Using Jquery

Ever wanted your tag cloud to resemble a ball? Of course you did.
This tutorial will walk you through how to create a Sphere in jQuery.
This one can bog down a system in a hurry, but thats the fun with
experimenting with JavaScript. We will be building a sphere that rotates
depending on which way the mouse moves.exciting.
3.
Animate curtains opening with jquery

Step 1 What Youll Need
This tutorial would not be anything special without the graphics, so lets
make sure youve got those under control. Ive included the ones used in
demo as part of the attached files, now would be a good time to download
them if you intend to use them.
Secondly, in addition to the standard jQuery file, we are also using the easing
plugin. We have worked with this plugin in previous tutorials but in this case
we will use it to provide a bounce effect when the rope is pulled.
IE6 Disclaimer A few of the project images use the PNG format in order to
have cleaner transparency. To keep things short, I will not be demonstrating
the workaround for transparency errors in IE6. If this affects you, I
recommend reading this article for a solution.
Step 2 Setting Up the HTML
1 <head>
2 <script type="text/javascript" src="<a class="linkification-ext"
title="Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"
3
href="http://jqueryjs.googlecode.com/files/jquery4 1.3.2.js">http://jqueryjs.googlecode.com/files/jquery1.3.2.js</a>"></script>
5
<script src="jquery.easing.1.3.js"
6 type="text/javascript"></script>
7 </head>
8 <body>
9 <div class="leftcurtain"><img
src="images/frontcurtain.jpg"/></div>
1
0 <div class="rightcurtain"><img
src="images/frontcurtain.jpg"/></div>
<img class="logo" src="images/buildinter.png"/>
<a class="rope" href="#"><img
src="images/rope.png"/></a>
</body>
Step 3 Add the CSS
1 *{
2 margin:0;
3 padding:0;
4 }
5 body {
6 text-align: center;
7 background: #4f3722
url('images/darkcurtain.jpg') repeat-x;
8
}
9
img{
1
0 border: none;
1 }
1
.leftcurtain{
1
width: 50%;
2
height: 495px;
1
3 top: 0px;
1 left: 0px;
4
position: absolute;
1
5 z-index: 2;
1
6 }
1 .rightcurtain{
7
width: 51%;
1
height: 495px;
8
right: 0px;
1
9 top: 0px;
2 position: absolute;
0
z-index: 3;
2
1 }
2 .rightcurtain img, .leftcurtain img{
2
width: 100%;
2
height: 100%;
3
}
2
4 .logo{
2 margin: 0px auto;
5
margin-top: 150px;
2
6 }
2 .rope{
7 position: absolute;
2 top: -40px;
8
left: 70%;
2
9 z-index: 4;
3 }
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
Lets pause for a minute and catch up with what weve just done.
We made two div classes for the two curtains (.leftcurtain and
.rightcurtain) which are locked to their designated sides. This was done in
the CSS by using the top,left, and position attributes.
Youll notice that we specified the width for each curtain, 50% and 51%. The
varying widths is to compensate for some choppy edges when the curtains
are closed that could cause the elements underneath to peak through. To
combat this we made the right curtain slightly overlap the left one, by using
the z-indexes. These z-index values also ensure that the curtains stay on top
of everything that is supposed to be behind the curtains.
The actual curtain images are set to be 100% width/height of the curtain divs
so that when the these divs shrink in width the images become bunched up,
just as they would in real life.
The .logo contains what I wish to hide behind the curtain, you can replace it
with whatever you wish.
Finally the .rope simply places the rope graphic on top of everything else
and hides part of the image off screen so we can accomplish the pulling the
rope effect later.
Step 4 Open the Curtains with jQuery
1 <script type="text/javascript">
2 $(document).ready(function() {
3
4 $curtainopen = false;
5
6 $(".rope").click(function(){
7
8 $(this).blur();
9
1 if ($curtainopen == false){
0
1
$(this).stop().animate({top: '0px' }, {queue:false, duration:350,
1
easing:'easeOutBounce'});
1
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
2
1
3
$(".rightcurtain").stop().animate({width:'60px'},2000 );
1 $curtainopen = true;
4
1
}else{
5
1
6 $(this).stop().animate({top: '-40px' }, {queue:false, duration:350,
easing:'easeOutBounce'});
1
7 $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
1 $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
8
$curtainopen = false;
1
9
2 }
0
2
return false;
1
2
2 });
2
3
});
2
4 </script>
2
5
2
6
2
7
2
8
2
9
3
0
3
1
When the document is all ready to roll, we establish that the curtains are
closed, by setting $curtainopen = false. We use the value of this variable
to determine whether to run the animations for opening or closing the
curtains via an if statement.
The other event that we have mapped out is when .rope is clicked, which
causes the above mentioned conditional statement to run. Additionally we
blur() the links and return false; to make sure the link does not direct the
user elsewhere. For those curious, we have written an article about blurring
links, so get versed in it.
If the curtain is currently closed, the .rope is pulled down, repositioned to
top:0px from top:-40px, with a bounce effect brought about by the easing
plugin we grabbed before. While this magic is happening each curtain is
simultaneously adjusted to a width of 60px, which creates the opening
effect. You can set the amount of time they take to open by changing the
duration, which is currently set to 2000 (or 2 seconds).
Now that the curtains are open, when the rope is pulled again, the
conditional statement will run the closing animation which sets everything
back to default values.
Step 5 Cue Excitement, Youre Done
Youve now got yourself a functioning stage, hopefully you can find
something showstopping to put on it. I opted to make the stage stretch the
entire screen but you can certainly adjust the width by placing it in a
specified width container. This is where the artistic license kicks in. This
might also benefit from a preloader to prevent the user from seeing whats
behind the curtain during longer loads.
As always, your comments, thoughts, dreams, and aspirations are
appreciated in the comments below.
4.
Quick tip resizing images on browser window size
In fluid layouts it is easy to format the text to adjust nicely when the window
is resized, but the images are not as fluid-friendly. This Quick Tip shows you
how to swap between two image sizes based on the current size of the
browser, div, or whatever you decide to make the deciding factor. For those
looking for a real life example, Last.fm uses this technique on their artist
pages.
The technique that will be used can be expanded to cause additional
changes upon resize as well, beyond simply image swapping (ie captions,
navigation).
With that said, lets get rolling.
Step 1 The HTML You Need
1
2
3
4
<div id="content">
<img class="fluidimage"
src="big.jpg"/>
<p>(Type words here)</p>
</div>
Thats nice and bite-sized. The main thing to note is that we attached
.fluidimage to the image we want to toggle.
Step 2 Onto the CSS
1 body{ text-align:center; }
img{ float: right; margin: 0px 10px 10px
2
3
10px;}
#content{ width:70%; margin: 0px auto;
text-align: left; }
For the sake of simplicity I have excluded any graphical styles such as
borders/fonts in the above CSS.
Step 3 Triggering the Change With jQuery
1 <script type="text/javascript" src="<a class="linkification-ext"

title="Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"
2
href="http://jqueryjs.googlecode.com/files/jquery3 1.3.2.js">http://jqueryjs.googlecode.com/files/jquery1.3.2.js</a>"></script>
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function() {
function imageresize() {
var contentwidth = $('#content').width();

1
0 if ((contentwidth) < '700'){
1 $('.fluidimage').attr('src','little.jpg');
1
} else {
1
$('.fluidimage').attr('src','big.jpg');
2
}
1
3 }
1
4
1
5
1
6
imageresize();//Triggers when document first loads
1
7
$(window).bind("resize", function(){//Adjusts image when browser resized
1
8 imageresize();
1 });
9
2
});
0
2
1
</script>
2
2
When the document is ready, we establish a function (imageresize) which
swaps the images depending on the width of the browser. If the browser
width is less than 700px, the smaller image is used, otherwise the full sized
one is displayed. This function is run when the page first loads and anytime
the browser window resizes.
Boom, Youre Done
Some of you may wonder why I only have two sizes and didnt just make the
image adjust as a percent of the overall layout. This causes the image to be
blurry in some browsers, so I opted to steer clear of that method.
Like I mentioned in the beginning, you could easily add to this technique by
display/hiding captions or navigation depending on the browser size. Its
really up to you, but feel free to leave your results and comments below.
The picture used throughout this tutorial was done by the very talented
Gordon McBryde
5.
Sliding boxes and captains with jquery

All of these sliding box animations work on the same basic idea. There is a
div tag (.boxgrid in my css) that essentially acts as a window where two
other items of your choosing peek through.
Confused? Cue the helpful diagram -
From this basic idea we can play around with animations of the sliding
element to either show or cover up the viewing area, thus creating the
sliding effect.
Step 1 CSS Foundation Work
Given the basic structure outlined in the helpful image above, we will need to
use a little bit of CSS to make it work as intended. The following will make it
functional - review my complete stylesheet in the downloadable file.
The following defines the viewing window (.boxgrid) and sets the default
position for images within it to the top left. This is important to make the
overlap while sliding work. Dont forget that overflow:hidden makes this all
possible.
1 .boxgrid{
2
width: 325px;
3
4
5
6
7
8 3;
height: 260px;
margin:10px;
float:left;
background:#16161
border: solid 2px

1 #8399AF;
0
overflow: hidden;
1
1
position: relative;
}
1
2 .boxgrid img{
1
3
1
4
1
5 }
position: absolute;
top: 0;
left: 0;
border: 0;
1
6
If you arent using the semi-transparent captions you are done with CSS
move to Step 2.
1 .boxcaption{
2
3
4
5
6
7
8
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter:
1 progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
0
/* For IE 8 */
1
-MS-filter:
1
"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
1
}
2
Opacity that plays nice in all browsers is a rough topic, educate yourself if
you need to.
Now well need to set up the default starting point for the caption box. If you
want it fully hidden initially, you will want the distance from the top or left to
match the height or width of the window (.boxgrid), depending on which
direction it will be sliding. You can also have it partially visible initially, as
.caption .boxcaption illustrates.
1 .captionfull
.boxcaption {
2
top: 260;
3
left: 0;
4
5
}
.caption .boxcaption
{
top: 220;
7
8
left: 0;
}
Step 2 Adding the Sliding Animations

This next stage is a matter of choosing which animation suites you, I have
included a bunch of pre-formatted potentials to help you along. Play around
with them to find one that fits your needs and style.
1 $(document).ready(function(){
2
3
4
5
6
7
//To switch directions up/down and left/right just place a "-" in front of
the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},
{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},
9 {queue:false,duration:300});
1
0
1
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
1
$(".cover", this).stop().animate({left:'325px'},
1
3
}, function() {
$(".cover", this).stop().animate({left:'0px'},
4
});
1
//Diagnal Sliding
5
1
6
1
7
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},
}, function() {
1
$(".cover", this).stop().animate({top:'0px', left:'0px'},
1
9
});
2
0
$('.boxgrid.peek').hover(function(){
//Partial Sliding (Only show some of background)
2
2
2
}, function() {
3
});
2
4
2
5
2
//Full Caption Sliding (Hidden to Visible)

$('.boxgrid.captionfull').hover(function(){
6
2
7
2
8
2
9
3
0
3
1
3
2
}, function() {
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
3
3
4
}, function() {
5
});
3
});
6
3
7
3
8
3
9
Step 3 The HTML
There are a few classes that we created simply as selectors for JQuery. Keep
these rules in mind:
The div class .cover should be assigned to whatever is doing the

sliding/movement.
Within the div .boxgrid, the img should always come first.
Heres an example of the HTML I would use for the .captionfull animation:
<div class="boxgrid captionfull">

1
2
3
<img src="jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/><a href="<a class="linkification-ext"

title="Linkification: http://www.nonsensesociety.com/2009/03/art-by-jarek5 kubicki/" href="http://www.nonsensesociety.com/2009/03/art-by-jarekkubicki/">http://www.nonsensesociety.com/2009/03/art-by-jarek6
kubicki/</a>" target="_BLANK">More Work</a></p>
4
</div>
</div>
Go Forth and Create

Ive only touched upon a few options you have, these boxes are your
canvases, create away. I would encourage you to download the attached
files, as it may be easiest to just copy-paste the parts relevant to your
project.
5. Jcaption jquery image captains with customizable mark up, style, and
animation
While writing such markup for every image is merely an inconvenience for
web developers, it is an impossibility for most of thier clients. Many clients
use a web-based WYSIWYG editor to create and edit their pages through a
CMS. It would be nearly impossible to expect them to add this markup
around their images.
This was a problem I faced when building a site for a client. I found wellconcepted solution in Captify, but I found it too restrive for my needs. I
proceeded by writing a version that met the following requirements:
1. Follow jQuery Conventions - Animations shouldn't be handled by
passing in a string, instead arbitrary animations should be allowed.
2. Markup Should be Arbitrary - Other than the
tag that is
required, other markup should be arbitrary.
3. Optionally Allow Placement From Text-Editors - Web-Editors like
tinyMCE or FCKditor allow users to align images to the left or right of
text. Depending on the version, this is accomplished using the "align"
attribute or "style" attribute. This plugin accomodates both and makes
sure that the caption is correctly placed as well.
Using the plugin
Using the plugin is dead simple. Just use apply the .jcaption() method to the
images you want:
$('img').jcaption();
By default this will take the following image:
<img src="image.jpg" alt="Some caption text" />
and produce the following markup:
<div class="caption">
<img src="image.jpg" alt="Some caption text" />
<p>Some caption text</p>
</div>
The options will allow you to control the elements and classes that the plugin
produces. Additionally, to accomodate text editors, the plugin can copy the
styling that was applied to the image to the caption instead, and take the
images "align" attribute and append it to the caption class. So for text
editors that place images using align="left" you can instead have the plugin
add "left" as a class to the caption so that you can place the entire caption
using your stylesheet.
Options
$('img').jcaption({
//Element to wrap the image and caption in
wrapperElement: 'div',
//Class for wrapper element
wrapperClass: 'caption',
//Caption Element
captionElement: 'p',
//Attribute of image to use as caption source
imageAttr: 'alt',
//If true, it checks to make sure there is caption copy before running on
each image
requireText: true,
//Should inline style be copied from img element to wrapper
copyStyle: false,
//Strip inline style from image
removeStyle: true,
//Strip align attribute from image
removeAlign: true,
//Assign the value of the image's align attribute as a class to the
wrapper
copyAlignmentToClass: false,
//Assign the value of the image's float value as a class to the wrapper
copyFloatToClass: true,
//Assign a width to the wrapper that matches the image
autoWidth: true,
//Animate on hover over the image
animate: false,
//Show Animation
show: {opacity: 'show'},
showDuration: 200,
//Hide Animation
hide: {opacity: 'hide'},
hideDuration: 200
});
You'll see that any arbitrary animations are possible by setting up the options
in this manner.
Demo
View a Demo of this plugin with and without animations here. The captions
on the left are animated and the caption on the right is not.
6.
Kegunaan dari jQuery

1. Dokumentasi yang baik
Dokumentasi yang disediakan pada web jQueryMobile sangatlah
mudah dipahami. Di bagian awal akan dijelaskan bagaimana langkahlangkah untuk memulai menggunakan jQueryMobile. Dengan pengetahuan
dasar HTML saja, seseorang akan cepat memahami tutorial yang ada
didalamnya. Selain itu, dokumentasi juga dikemas dalam bentuk yang
menyenangkan, yaitu dengan melampirkan contoh tampilan yang dihasilkan.
Pada halaman resources web jQueryMobile, banyak sekali informasi yang
didapatkan seputar tutorial, plugins, extension, tools pengambangan, ebook,
dsb. yang bisa digunakan sebagai panduan.
2. Mendesain Template dengan ThemeRoller
Pengguna jQueryMobile akan dimanjakan dengan fasilitas Themeroller.
Themeroller merupakan fasilitas yang disediakan oleh jQueryMobile untuk
mengganti warna dasar desain tampilan sesuai kebutuhan dengan cara drag
& drop. Script hasil modifikasi yang dihasilkan pun dapat diunduh untuk
dapat dikembangkan lebih lanjut.
Uniknya, themes untuk tampilan jQueryMobile dapat terdiri dari

beberapa kombinasi, sehingga untuk menggunakan jenis themes yang dipilih
cukup dipanggil nama class dalam HTML yang bersesuaian.
3. Fitur-fitur terbaik
jQueryMobile dikembangkan dengan core jQuery yang terkenal dengan
desain UI nya yang ringan dan lembut, sehingga bisa menggantikan
teknologi flash. Kemampuan yang baik untuk layar sentuh seperti pada
perangkat-perangkat dengan browser iOS, Android, Blackberry, Palm WebOS,
Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile,
Kindle, Nook, dan lainnya menambah daya tarik jQueryMobile. JQueryMobile
juga telah menggunakan markup dasar HTML5 dan CSS3. Desain tampilan
yang responsive sangat membantu ketika ditampilkan pada smartphone
yang mendukung fitur accelorometer (tampilan otomatis vertikal/horizontal)
4. jQueryMobile Maps
Penggunaan peta (maps) dalam perangkat bergerak sangatlah penting.
Para pengembang jQueryMobile juga telah menyiasati hal tersebut dengan
mulai membuat dokumentasi cara menampilkan maps untuk tujuan tertentu.
Tutorial dan contoh aplikasi jQueryMobile Maps dapat dipelajari pada
halaman
ini:http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquerygoogle-maps-mobile.html. Sebagai tambahan, jenis maps yang digunakan
pada tutorial tersebut telah menggunakan Google Maps v3, yang merupakan
versi Google Maps terbaru.
7.
Cara menggunakan jQuery
1. Ok pertama - tama adalah kita harus mendownload terlebih dahulu jQuery
Library (inti dari jQuery). Dimana download jQuery Library? Downloadnya
di www.jquery.com , silahkan klik Download jQuery. Saat penulisan tutorial
ini library jQuery telah sampai versi 1.9.1
gambar : screenshot website jquery.com
2. Pada halaman selanjutnya pilih versi jquery, ada versi Production dan versi
Developer. Untuk saat ini pilih versi Production jQuery karena versi
Developer ditujukan kepada para master pemrograman dan pengembang
jquery.
gambar :
Catatan :
jQuery
selalu
merilis
dua
versi
Library
yaitu
versi
Production
dan
Development. Perbedaannya adalah versi Production ukuran filenya lebih

kecil karena telah 'dimampatkan' atau istilahnya di Compress. Diperuntukkan
bagi pengguna awam yang ingin langsung menggunakan jQuery. Sedangkan
versi Development isi filenya mudah dibaca karena belum di Compress dan
ditujukan unruk para Developer yang tertarik mempelajari - memanipulasi bahkan mengembangkan fungsi - fungsi yang dimiliki oleh jQuery.
3. Akan muncul code dari library JQuery
Klik CTRL + S di keyboard untuk menyimpan kode tersebut ke direktori
website anda
gambar : save jquery lib pada direktori website
4. Ok sekarang adalah kode untuk memanggil jQuery library supaya dapat
terLOAD di website yang anda buat. Buka dreamweaver dan masukkan
kodenya.
Scriptnya yang saya cetak tebal merah :
gambar : script pemanggil jQuery
5. Ok sekarang cara Penggunaannya, inti dari jQuery adalah :
A) Panggil / Load library jQuery (stabilo merah)
B) buat script jquery di bagian head untuk mengontrol object
berdasarkan elementnya (stabilo biru)
C) Buat Object beserta elemennya berupa id dan class di bagian
body (stabilo abu - abu)
Cara
membuat
dengan jquery
website
sederhana
`
Langkah-langkahnya sebagai berikut :
Download terlebih dahulu jquery.js yang ada di http://jquery.com/ di link
inihttp://code.jquery.com/jquery-1.4.2.min.js atau http://code.jquery.com/jque
ry-1.4.2.js. Perbedaan antara link pertama dan kedua adalah link pertama
yang jquery-1.4.2.min.js merupakan versi compress dari yang versi
development
jquery-1.4.2.js.
Jadi
pada
dasarnya
Anda
hanya
membutuhkan satu jenis saja untuk digunakan. Saran saya, gunakanlah yang
versi development (yang kedua) supaya lebih mudah untuk dibaca Setelah
itu persiapkan editor yang sering anda gunakan, seperti notepad, notepad+
+, scite, netbeans, ataupun eclipse. Kali ini saya akan menggunakan
notepad++ saja.
Buatlah file baru berekstensi .html dan jangan lupa file jquery-1.4.2.js ada
pada
kali ini, saya memberi nama filenya jquery-latihan.html. kemudian buka
jquery-latihan.html tersebut dengan editor anda dan buat template code
html biasa (tag html, head, body)
Selanjutnya kita harus meload javascript yang akan kita gunakan. Dalam hal
ini yaitu jquery-1.4.2.js. Tambahkan di dalam tag headnya
<head>
<script
type="text/javascript"
src="jquery1.4.2.js"></script>
</head>
Tahap persiapan telah selesai, sekarang saatnya kita masuk tahap main2
dengan jquery
Selanjutnya tambahkan script di bagian head seperti dibawah ini :
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
//code ini akan dieksekusi ketika halaman ini di load
pertama kali
//kode-kode lainnya
});
</script>
</head>
Source code $(document).ready(function(){}); pada jquery sama halnya
seperti code window.onload pada javascript biasa. Fungsi ini akan dipanggil
ketika halaman html ini di load oleh browser. Nah, nantinya kode-kode jquery
kita akan diletakan di dalam situ deh.
$(document).ready(function(){ //disini});. disini > tempat dimana anda
dapat menambahkan script-script lainnya. Sekarang saya akan coba
mengambil text dari body. Sebelumnya, tambahkan di dalam tag <body>
sebuah kalimat apa saja. Contoh :
<body>
Hello World!
</body>
Kemudian tambahkan di tag scriptnya sehingga menjadi seperti ini :
//code ini akan dieksekusi ketika halaman ini di load pertama kali
//kode-kode lainnya
var text = $("body").text(); //deklarasi dan inisialisasi variable
text
alert(text); //menampilkan windows alert
});
</script>
Cukup mudah bukan :). Sekarang coba anda save dan jalankan jquery-latihan
di browser anda. Ketika di load pertama kali, maka akan muncul windows
alert.
Yang menampilkan Hello World!
Perhatikan baris $(body).text(), $(body) merupakan salah satu contoh
Selector terhadap suatu tag html (body). Keterangan lebih lengkap
mengenai selectors di jquery ada disini : http://docs.jquery.com/Selectors.
Kemudian .text() bermakna mengambil semua text dalam suatu selectors
tertentu, dalam hal ini adalah body. Kemudian hasilnya (bertipe string)
disimpan dalam variable bernama text dan ditampilkan kelayar dengan
fungsi alert bawaan javascript. alert bukan fungsi jquery tapi fungsi
native javascript. Cobalah anda load halaman html anda, maka akan
muncul alert yang isinya text dalam tag body anda.
Sekarang kita akan mencoba mengubah css dari body dengan jquery.
Referensi, silakan baca http://api.jquery.com/css/. Ubah code menjadi seperti
berikut.
pertama kali
//kode-kode lainnya
var text = $("body").text();
alert(text);
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
Tambahkan yang di bold ya. Sebetulnya sama konsepnya seperti yang awal.
Hanya saja kali ini kita mengubah cssnya. Dalam contoh kali ini saya
mengubah warna background belakang dari body dan warna tulisan yang
ada di body. Maka sourcenya akan seperti yang ditunjukkan seperti yang
diatas. Source code lengkapnya sebagai berikut.
Maka akan muncul perubahan ketika anda meload htmlnya. Silakan
dicoba Maksud dari $(body).css(background-color,black); adalah
mengubah background-color dari tag body dengan warna black. Pengertian
yang sama dengan $(body).css(color,white);
Sekarang kita akan latihan event handler di jquery. Kalau di javascript itu
contohnya
seperti
.onclick,
onload,
onblur,
dll.
Referensi : http://docs.jquery.com/Events Source codenya.
<html>
<head>
pertama kali
//kode-kode lainnya
alert(text);
$("#idButton").click(
function()
{
alert("button dengan id di click");
}
);
$(".clsButton").click(
function()
{
alert("button dengan calss di click");
}
);
});
</script>
</head>
<body>
hello world
<button id="idButton"> coba klik saya</button>
<button class="clsButton"> coba klik saya</button>
</body>
</html>
Screen shotnya
Hasilnya.
Hal yang perlu diperhatikan : selectors untuk class dan id. Untuk class > $
(.[classname]).., ada titik di depan nama kelasnya, untuk id > $
(#). Ada pagar didepan nama idnya. Sebetulnya konsepnya sama
seperti css bukan >. Untuk event di jquery anda dapat melihatnya
di http://docs.jquery.com/Events
Salah satu yang menarik dari jquery adalah fungsi animasi yang disediakan.
Anda dapat melihatnya di http://docs.jquery.com/Effects untuk panduan
dokumentasinya. Berikut contoh source codenya.
<html>
<head>
//code ini akan dieksekusi ketika halaman ini di load pertama kali
//kode-kode lainnya
alert(text);
//mengubah css
//event handler
$("#idButton").click(
function()
{
//event jika button di klik
alert("button dengan id di click");
}
);
//event handler
$(".clsButton").click(
function()
{
//event jika button di klik
alert("button dengan calss di click");
}
);
//event handler
$("#hide").click(
function()
{
//hilangkan div id animated secara perlahan2
$("#animated").fadeOut('slow', function() {
alert("udh selesai animasinya");
});
//atau (tanpa ada pesan selesainya <img src
" alt=":)" class="wp-smiley"> )
//$("#animated").fadeOut('slow');
}
);
});
</script>
</head>
<body>
hello world
<button id="idButton"> coba klik saya</button>
<button class="clsButton"> coba klik saya</button>
<div id="animated">
lorem ipsum lorem ipsum
</div>
<button id="hide"> sembunyikan saya</button>
</body>
</html>
Perhatikan source code yang saya tambahkan (di bold). Saya menambahkan
suatu div dan suatu button yang jika di klik maka div akan perlahan-lahan
hilang (fadeout). Untuk itu saya menambahkan event handler pada button
dengan id hide yaitu $(#hide).click(function () { . dan
menghilangkannya dengan fungsi fadeOut(slow, function() { .. atau
fadeOut(slow) saja. Keterangan lebih rinci mengenai fadeout, dan animasianimasi lainnya anda dapat liat di dokumentasi.
Perbedaan jquery dengan javascript

Perbedaan dari definisi javascript dan jquery
- Javascript adalah bahasa pemrograman yang dirancang untuk berjalan di
lingkungan klien yang dikombinasikan dengan dokumen HTML. Javascript
dijalankan dengan bantuan browser sehingga dapat melakukan interaksi
dengan user, melakukan kontrol browser dan memanipulasi dokumen web
saat ditampilkan.
- Sedangkan jquery adalah komponen/librari/framework yang dibuat dari
javascript
dengan
tujuan
memudahkan
seorang
programmer
dalam
menggunakan fungsi-fungsi yang lebih rumit. Dengan jquery, seorang

programmer bisa lebih leluasa dan mudah melakukan kontrol/manipulasi
halaman
web.
Oleh
karena
kemudahan
tersebut
jquery
memiliki
semboyan "write less, do more" yang bisa kita artikan dengan sedikit
menulis kode tapi dapat melakukan banyak hal.
Jquery dibangun dengan berorientasi objek sehingga akan lebih optimal dan
memiliki kemampuan yang lebih luas untuk menciptakan serta memanipulasi
halaman web yang dikirimkan ke browser pengguna.
Mari kita lihat bagaimana penulisan javascript dan javascript untuk
melakukan sebuah manipulasi background dokumen html berikut :
?
1<script language="javascript">
2function changeBackground(color)
3{
4 document.body.style.background = color;
5}
6onload="changeBackground('red');"
7</script>
?
1<script>
2 $('body').css('background', '#ccc');
3</script>
Dari script diatas bisa anda lihat, bahwa jquery lebih bepusat pada objek
sehingga cara melakukan perubahannya akan lebih sederhana.
- See more at: http://www.zainalhakim.web.id/posting/perbedaan-javascriptdan-jquery.html#sthash.JL5MyJG0.dpuf
KELOMPOK 3
HTML,PHP,JS,CSS DAN JQUERY
NAMA ANGGOTA :
ANISA YULIANI
ASEP SUPRIATNA
ASTI JULIANI
DIANA ISLAMIATI
NYIMAS ALIYA
KELAS : XII MIPA 4

Artikel Tentang HTML, JS, CSS, PHP Dan JQUERY

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Artikel Tentang HTML, JS, CSS, PHP Dan JQUERY

Diunggah oleh

Hak Cipta:

Format Tersedia

1.

Pengertian PHP Menurut Antonius Nugraha Widhi Pratama (2010:9)

Beberapa kelebihan PHP antara lain dapat membuat situs yang

menjawab perkembangan bahas pemrograman kearah pemrograman

karena referensi yang banyak.

PHP banyak sekali digunakan untuk pengembangan web dinamis, dapat di

CREATE TABLE mhs (

'ROSIHAN ARI YUANA', 'Solo');

Perhatikan script PHP berikut ini:

4. Fungsi PHP Dalam Pemrograman Web

<title>Contoh list dengan

echo "<li>Nama Mahasiswa

Kelebihan MySQL diantaranya :

Fungsi Umum PHP Fungsi string Funngsi string digunakan memanipulasi

Banyak sekali kelebihan yang dimiliki PHP dibandingkan dengan

Bisa membuat Web menjadi Dinamis.

Aplikasi PHP lebih cepat dibandingkan dengan ASP maupun Java.

Membuat Database MySQL di PHP

PHP menggunakan fungsi mysql_query untuk membuat database MySQL,

bool mysql_query( sql,

sql parameter ini diperlukan untuk menempatkan query SQL untuk

Perhatikan contoh skrip membuat database MySQL di PHP berikut ini:

bool mysql_select_db( db_name,

db_name parameter ini diperlukan untuk nama database yang akan

Perhatikan contoh skrip memilih database MySQL di PHP berikut ini:

Membuat Tabel di Database MySQL dengan PHP

die('Gagal Membuat Tabel: ' .

2 echo "Tabel Karyawan sukses dibuat\n";

PENGERTIAN JAVA SCRIPT / JS

JavaScript adalah bahasa pemrograman berbasis java yang merupakan

SEJARAH JAVA SCRIPT

JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape

Biasanya JavaScript digunakan sebagai peralatan (tool/gadget) pada

Berikut ini adalah

3. Di bawah "privacy" klik pada "Content settings...".

- Terbuka JavaScript tidak terikat oleh hardware maupun software tertentu,

1. Script tidak terenkripsi

seperti java karena javascript teleh memiliki objek yang builtin

Javascript memang akan tampil dengan sangat baik di browser untuk

6.Fungsi pada Javascript

Pembuatan Fungsi pada Javascript

Sebuah fungsi pada Javascript dibuat dengan cara seperti berikut:

fungsi anonim ke dalam variabel, dan nama fungsi adalah nama

Fungsi sebagai Objek

Sebelum melihat bagaimana fungsi dapat dipanggil, kita akan melihat

var naikkan = function (n) {

var naikkan = function (n) {

Pola Pemanggilan Fungsi

Method Invocation Pattern

Function Invocation Pattern

// Variabel nilai disimpan dalam objek global.

// kita menggunakan objek papanSkor yang di

Constructor Invocation Pattern

// Ketika dipanggil dengan new, fungsi Manusia

andi.nama; // mengembalikan "Andi"

Indirect Invocation Pattern

var bil = [5, 6, 2, 3, 7];

Scope dan Function Scope

menggunakan variabel tersebut. Walaupun sedikit berbeda, deklarasi

var buatSapaan = function (sapaan) {

var buatSapaan = function (sapaan) {

Pada contoh kali ini, baik sapaanJerman maupun sapaanInggris dapat

Dalam contoh di atas, fungsi penghitung pada dasarnya adalah sebuah