artikel tentang HTML,JS,CSS,PHP dan JQUERY

1. PENGERTIAN PHPPengertian 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 fungsi-fungsi, PHP tidak membedakan antara huruf kecil dan huruf besar. Contoh perintah ‘echo’ sama dengan perintah ‘ECHO’ atau ‘Echo’.

2. SEJARAH PHPSejarah 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 INTO mhs VALUES ('M0197001', 'ROSIHAN ARI YUANA', 'Solo');INSERT INTO mhs VALUES ('M0197002', 'DWI AMALIA FITRIANI', 'Kudus');INSERT INTO mhs VALUES ('M0197003', 'FAZA FAUZAN KH.', 'Solo');INSERT INTO mhs VALUES ('M0197004', 'NADA HASANAH', 'Solo');INSERT INTO mhs VALUES ('M0197005', '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

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<head>

<title>Contoh list dengan HTML</title>

</head>

<body>

<h2>Daftar Absensi Mahasiswa</h2>

<ol>

<li>Nama Mahasiswa ke-1</li>



12

13

14

15

16

17

18

19

20

21








</ol>

</body>

</html>

Halaman HTML tersebut dapat dibuat dengan mudah dengan cara men-copy-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

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<head>

<title>Contoh list dengan PHP</title>

</head>

<body>

<h2>Daftar Absensi Mahasiswa</h2>

<ol>

<?php

for ($i= 1; $i <= 1000; $i++)

{

echo "<li>Nama Mahasiswa ke-$i</li>";

}

?>

</ol

</body>

</html>

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.

http://www.duniailkom.com/wp-content/uploads/2013/12/Contoh-Penggunaan-PHP-dalam-HTML.png

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 masing-masing 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

2

<?php

$dbhost = 'localhost';

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

$dbuser = 'root';

$dbpass = 'password';

$koneksi = mysql_connect($dbhost, $dbuser, $dbpass);

if(! $koneksi )

{

die('Gagal Koneksi: ' . mysql_error());

}

echo 'Koneksi Berhasil';

$sql = 'CREATE Database test_db';

$buatdb = mysql_query( $sql, $koneksi );

if(! $buatdb )

{

die('Pembuatan database, gagal: ' . mysql_error());

}

echo "Database test_db berhasil dibuat\n";

mysql_close($koneksi);

?>

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

3

4

5

6

7

8

9

10

11

12

13

<?php


$dbuser = 'root';


$koneksi = mysql_connect($dbhost, $dbuser, $dbpass);

if(! $koneksi )

{


}


mysql_select_db( 'test_db' );

mysql_close($koneksi );

?>

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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<?php


$dbuser = 'root';


$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if(! $koneksi )

{


}


$sql = 'CREATE TABLE karyawan( '.

'id_karyawan INT NOT NULL AUTO_INCREMENT, '.

'nama_karyawan VARCHAR(20) NOT NULL, '.

'alm_karyawan VARCHAR(20) NOT NULL, '.

'gaji_karyawan INT NOT NULL, '.

'tgl_gabung timestamp(14) NOT NULL, '.

'primary key ( id_karyawan ))';

mysql_select_db('test_db');

$buattabel = mysql_query( $sql, $koneksi );

if(! $buattabel )

{

die('Gagal Membuat Tabel: ' . mysql_error());

24

25

26

27

}

echo "Tabel Karyawan sukses dibuat\n";

mysql_close($koneksi);

?>

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.

http://www.heidisql.com/

1.PENGERTIAN JAVA SCRIPT / JSJavaScript 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 SCRIPTJavaScript 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 non-Java. [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: <script type= "text/

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, full-

size, 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 me-refresh 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 terenkripsiKarena javascript bersifat client side, maka script yang kita buat di text editor dan telahdijadikan web di server, ketika user merequestweb dari server tersebut maka sintakjavascript akan langsung ditampilkan di browser. User bisa melihat dan menirunya darisourcenya.2. Kemampuan terbatasWalaupun javascript mampu membuat bentuk web menjadi interaktif dan dinamis, namunjavascript tidak mampu membuat program aplikasi sendiri seperti java.3. Keterbatasan ObjekJavascript tidak mampu membuat kelaskelasyang bisa menampung objekobjektambahanseperti java karena javascript teleh memiliki objek yang builtinpada 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:

1234

function tambah(a, b) { hasil = a + b; return hasil;}

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 ({}). Perintah-perintah 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:

1234

var tambah = function (a, b) { hasil = a + b; return hasil;};

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:

1234

var tambah = function (a, b) { var hasil = a + b; return hasil;};

dapat dipanggil seperti berikut:

1 tambah(3, 5);

Yang terjadi pada kode di atas adalah kita menggantikan a dan b masing-masing 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:

12345

var simpan = tambah(3, 5); // simpan === 8tambah(simpan, 2); // mengembalikan 10

tambah(tambah(3, 5), 2) // juga mengembalikan 10tambah(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 910

var naikkan = function (n) { var hasil = n + 10; return hasil;

// kode di bawah tidak dijalankan lagi hasil = hasil * 100;}

naikkan(10); // mengembalikan 20naikkan(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 9

var naikkan = function (n) { return n + 10;}

var tambah = function (a, b) { return a + b;}

tambah(4, 4); // mengembalikan 8

1011

naikkan(10); // mengembalikan 20tambah(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:

1234

var papanSkor = { skor: 0, tambahSkor: function (nilai) { this.skor += (typeof nilai === "number")? nilai : 1;

56789

}, ambilSkor: function () { return this.skor; }};

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 ([]):

12345

papanSkor.ambilSkor() // mengembalikan 0papanSkor.tambahSkor(1) // mengembalikan undefinedpapanSkor["ambilSkor"]() // mengembalikan 1papanSkor["tambahSkor"](2) // mengembalikan undefinedpapanSkor.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

// Variabel nilai disimpan dalam objek global.// Objek global Javascript secara standar adalah window// sehingga nilai akan disimpan dalam window.nilaivar nilai = 100;

6 7 8 9101112131415161718192021222324252627282930313233

nilai; // mengembalikan 100window.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 jugavar 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 (!!!)

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 9101112131415

// kita menggunakan objek papanSkor yang di atas kembalipapanSkor.hattrick = function () { // variabel that dibuat agar fungsi tambah_tiga // dapat mengakses objek papanSkor. var that = this;

var tambah_tiga = function() { // jika kita menggunakan this di sini, // maka kita akan mengakses variabel global skor, // yang tidak ada. that.skor = that.skor + 3; };

tambah_tiga();};

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 910

// 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");

andi.nama; // mengembalikan "Andi"

11121314151617181920212223

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 27andi; // 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.

123456

var mari = Manusia("Mari");

mari; // mengembalikan undefinednama; // mengembalikan Mari (!)mari.nama; // mengembalikan TypeError: // Cannot read property 'nama' of 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 91011121314

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!"

Kita juga dapat mengirimkan null sebagai parameter pertama dari apply untuk menggunakan objek global sebagai this.

123456789

// mengembalikan "Guten Tag undefined!" karena tidak ada variabel "nama"// pada konteks globalmanusia.panggil.apply(null, ["Guten Tag"]);

// simpan variabel "nama" dengan isi "Nuh" pada konteks globalnama = "Nuh";

// 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

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

// Sama dengan Math.apply(bil[0], bil[1], ...)

4 5 6 7 8 910111213141516171819

// berapapun ukuran bil fungsi ini akan tetap berjalanvar 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

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:

1234567

// kedua fungsi di bawah mengembalikan "Bonjour Hawa!"manusia.panggil.apply(hawa, ["Bonjour"]);manusia.panggil.call(hawa, "Bonjour");

// kedua fungsi di bawah hasilnya samaMath.max.apply(null, bil);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 2 3 4 5 6 7 8 910

var total = function () { var i, hasil = 0; for (i = 0; i < arguments.length; i++) { hasil = hasil + arguments[i]; }

return hasil;};

total(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 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:

123456789

var bil = 1;console.log(bil); // mencetak 1

if (bil > 0) { var bil = 2; console.log(bil); // mencetak 2}

console.log(bil); // 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 910111213

var x = 10;console.log(x); // mencetak 10

var tambah = function (n) { var x = 3; console.log(x); // mencetak 3 return n + x;}

var y = tambah(15);console.log(y); // mencetak 18 (15 + 3)

console.log(x); // mencetak 10

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 9101112

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:

1 2 3 4 5 6 7 8 910

var jalan = function () { var sapaan = "Halo ", sapa = function () { console.log(sapaan + "pembaca!"); };

sapa();};

jalan(); // mencetak "Halo 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

var buatSapaan = function (sapaan) { return function () { console.log(sapaan + " pembaca!"); }};

7 8 91011

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 91011

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 2 3 4 5 6 7 8 91011121314151617181920212223242526

var penghitung = function () { // variabel hitungan di sini menjadi // variabel private yang tidak dapat // diakses dari luar objek. var hitungan = 0;

return { tambahHitungan: function () { hitungan = hitungan + 1; }, ambilNilai: function () { return hitungan; } };};

var jumlahHarimau = penghitung();

jumlahHarimau.hitungan; // undefined (seolah-olah tidak ada)

jumlahHarimau.tambahHitungan();jumlahHarimau.ambilNilai(); // mengembalikan 1

jumlahHarimau.tambahHitungan();jumlahHarimau.tambahHitungan();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 91011121314151617181920

var penghitung = (function () { var hitungan = 0;

return { tambahHitungan: function () { hitungan = hitungan + 1; }, ambilNilai: function () { return hitungan; } };})();

penghitung.tambahHitungan();penghitung.ambilNilai(); // mencetak 1

penghitung.tambahHitungan();penghitung.tambahHitungan();penghitung.tambahHitungan();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 9101112

var daftarFungsi = [];var i;

for (var i = 0; i < 3; i++) { daftarFungsi.push(function () { return i; });}

daftarFungsi[0](); // mengembalikan 3 (!)daftarFungsi[1](); // mengembalikan 3 (!)daftarFungsi[2](); // 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 9101112131415

var daftarFungsi = [], i, pembuatFungsi = function (n) { return function () { return n; } };

for (var i = 0; i < 3; i++) { daftarFungsi.push(pembuatFungsi(i));}

daftarFungsi[0](); // mengembalikan 0daftarFungsi[1](); // mengembalikan 1daftarFungsi[2](); // 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.

http://temukanpengertian.blogspot.com/2013/01/pengertian-browser.html

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)

http://temukanpengertian.blogspot.com/2013/06/pengertian-html.html

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, aside, canvas serta datagrid“.

Tag-tag tersebut hanya dikenali oleh browser-browser keluaran terbaru, sebagai misal Firefox

3.5, Opera 9.6, Chrome, Safari, IE 8.

4. MENDESAIN HTMLMendesain HTML berarti melakukan suatu tindakanpemrograman.Namun HTML

bukanlah sebuah bahasapemrograman.Namun HTML hanyalah berisi perintah-perintah

yang telah terstruktur berupa tag-tag penyusun.Menuliskan tag-tag 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

http://www.supriadi.web.id/


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 ditengah-tengah.

<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 Consortium’s (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 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.

Dapatkan editor HTML lainnya 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 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 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 HTMLSecara 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

http://id.wikipedia.org/wiki/Cascading_Style_Sheets

http://id.wikipedia.org/wiki/Hypertext

http://id.wikipedia.org/wiki/Cascading_Style_Sheets

<!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)






<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 HTMLKegunaan 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

http://id.wikipedia.org/wiki/Pranala

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 SheetsDari Wikipedia bahasa Indonesia, ensiklopedia bebas

Cascading Style SheetsEkstensi berkas .css

Jenis MIME text/css

https://id.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extension

Dikembangkan oleh World Wide Web ConsortiumJenis format Bahasa lembar gaya

Standar

Level 1 (Recommendation)Level 2 (Recommendation)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

https://id.wikipedia.org/wiki/CSS_3

https://id.wikipedia.org/w/index.php?title=CSS_2&action=edit&redlink=1


https://id.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-SRR-3

https://id.wikipedia.org/wiki/Browser

https://id.wikipedia.org/wiki/Netscape_Navigator

https://id.wikipedia.org/wiki/Internet_Explorer

https://id.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-dominikus-2

https://id.wikipedia.org/wiki/1996

https://id.wikipedia.org/wiki/Tahun

https://id.wikipedia.org/wiki/W3C

https://id.wikipedia.org/wiki/World_Wide_Web_Consortium


https://id.wikipedia.org/wiki/Internet

https://id.wikipedia.org/wiki/Teknologi

https://id.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-SRR-3

https://id.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-dominikus-2

https://id.wikipedia.org/wiki/Stylesheet

https://id.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-Slamet-1

https://id.wikipedia.org/wiki/Mouse

https://id.wikipedia.org/wiki/Hyperlink

https://id.wikipedia.org/wiki/Tabel

https://id.wikipedia.org/wiki/Warna

https://id.wikipedia.org/wiki/Gambar

https://id.wikipedia.org/wiki/Ukuran


https://id.wikipedia.org/wiki/XHTML

https://id.wikipedia.org/wiki/HTML

https://id.wikipedia.org/wiki/Bahasa


https://id.wikipedia.org/wiki/File

https://id.wikipedia.org/wiki/Microsoft_Word

https://id.wikipedia.org/wiki/Aplikasi

http://www.w3.org/TR/CSS21/



http://www.w3.org/TR/CSS1

https://id.wikipedia.org/wiki/Standar

https://id.wikipedia.org/wiki/Bahasa_lembar_gaya


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

https://id.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-css_html-6




https://id.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-unt-5

https://id.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-unt-5

https://id.wikipedia.org/wiki/Kode

https://id.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-4


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 Z-Index untuk menempatkan objek dalam posisi yang sama.

Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.

https://id.wikipedia.org/wiki/Tag


https://id.wikipedia.org/wiki/Cascading_Style_Sheets#cite_note-Jub-7

https://id.wikipedia.org/wiki/Model




https://id.wikipedia.org/wiki/Website

https://id.wikipedia.org/wiki/Script





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)”

AplikasiDari Wikipedia bahasa Indonesia, ensiklopedia bebas

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:

https://id.wikipedia.org/wiki/Lembar_kerja

https://id.wikipedia.org/wiki/Antarmuka_pengguna


https://id.wikipedia.org/wiki/OpenOffice.org

https://id.wikipedia.org/wiki/Microsoft_Office

https://id.wikipedia.org/wiki/Pemutar_media


https://id.wikipedia.org/wiki/Pengolah_kata

https://id.wikipedia.org/wiki/Komputer

https://id.wikipedia.org/wiki/Perangkat_lunak_sistem

https://id.wikipedia.org/wiki/Perangkat_lunak_sistem

https://id.wikipedia.org/wiki/Pengguna


https://id.wikipedia.org/wiki/Perangkat_lunak

https://id.wikipedia.org/wiki/Bahasa_Inggris

https://id.wikipedia.org/wiki/OpenOffice.org

https://id.wikipedia.org/wiki/Berkas:OpenOffice.org_Writer.png

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

https://id.wikipedia.org/w/index.php?title=Perangkat_lunak_kolaborasi&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Perangkat_lunak_analitik&action=edit&redlink=1

https://id.wikipedia.org/wiki/Dokumentasi

https://id.wikipedia.org/wiki/Manajemen_data

https://id.wikipedia.org/wiki/Sumber_daya

https://id.wikipedia.org/wiki/Waktu

https://id.wikipedia.org/w/index.php?title=Manajemen_dokumen&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Manajemen_aset_digital&action=edit&redlink=1

https://id.wikipedia.org/wiki/Sistem_manajemen_basis_data

https://id.wikipedia.org/wiki/Alir_kerja

https://id.wikipedia.org/wiki/Manajemen_sumber_daya_manusia

https://id.wikipedia.org/w/index.php?title=Perangkat_lunak_bisnis&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Bagian_pendukung&action=edit&redlink=1

https://id.wikipedia.org/wiki/Perangkat_lunak_akuntansi

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 WordDari Wikipedia bahasa Indonesia, ensiklopedia bebas

Microsoft Word

https://id.wikipedia.org/wiki/Rekayasa_perangkat_lunak

https://id.wikipedia.org/wiki/Rekayasa

https://id.wikipedia.org/wiki/Seni_grafis

https://id.wikipedia.org/w/index.php?title=Media_digital&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Berkas:Word-2013-logo.jpg&filetimestamp=20130825013905&

https://id.wikipedia.org/w/index.php?title=Berkas:Word2013.png&filetimestamp=20130825014739&

Pengembang Microsoft

Rilis stabil15.0.4517.1003 (2013) (29 Januari 2013; 2 tahun yang lalu)

Sistem operasi Microsoft Windows, Mac OS XJenis Pengolah kata

Lisensi Perangkat Lunak Tak BebasSitus web

resmihttp://office.microsoft.com/word

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,

https://id.wikipedia.org/w/index.php?title=Gratis&action=edit&redlink=1

https://id.wikipedia.org/wiki/Surat


https://id.wikipedia.org/w/index.php?title=MacWrite&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=LisaWrite&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=WordPerfect&action=edit&redlink=1

https://id.wikipedia.org/wiki/WordStar

https://id.wikipedia.org/wiki/DOS

https://id.wikipedia.org/wiki/Tetikus

https://id.wikipedia.org/wiki/WYSIWYG

https://id.wikipedia.org/wiki/WordStar

https://id.wikipedia.org/w/index.php?title=WordPerfect&action=edit&redlink=1

https://id.wikipedia.org/wiki/IBM_PC


https://id.wikipedia.org/wiki/25_Oktober


https://id.wikipedia.org/wiki/1_Februari

https://id.wikipedia.org/w/index.php?title=Richard_Brodie&action=edit&redlink=1


https://id.wikipedia.org/wiki/Microsoft

https://id.wikipedia.org/w/index.php?title=Xerox_PARC&action=edit&redlink=1

https://id.wikipedia.org/wiki/Charles_Simonyi

https://id.wikipedia.org/w/index.php?title=PARC&action=edit&redlink=1

https://id.wikipedia.org/wiki/Xerox

https://id.wikipedia.org/wiki/GUI

https://id.wikipedia.org/w/index.php?title=Bravos&action=edit&redlink=1

https://id.wikipedia.org/wiki/Microsoft_Office

https://id.wikipedia.org/w/index.php?title=Microsoft_Office_System_2003&action=edit&redlink=1


https://id.wikipedia.org/wiki/Microsoft_Windows

https://id.wikipedia.org/wiki/OS/2

https://id.wikipedia.org/w/index.php?title=SCO_OpenServer&action=edit&redlink=1


https://id.wikipedia.org/wiki/Apple_Macintosh



https://id.wikipedia.org/wiki/Xenix



http://office.microsoft.com/word

https://id.wikipedia.org/w/index.php?title=Perangkat_Lunak_Tak_Bebas&action=edit&redlink=1

https://id.wikipedia.org/wiki/Lisensi_perangkat_lunak


https://id.wikipedia.org/w/index.php?title=Daftar_kategori_software&action=edit&redlink=1

https://id.wikipedia.org/wiki/Mac_OS_X


https://id.wikipedia.org/wiki/Sistem_operasi

https://id.wikipedia.org/wiki/Daur_hidup_rilis_perangkat_lunak


https://id.wikipedia.org/wiki/Pengembang_perangkat_lunak

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

https://id.wikipedia.org/wiki/Awan

https://id.wikipedia.org/wiki/Microsoft_Windows_XP

https://id.wikipedia.org/wiki/Microsoft_Windows_XP

https://id.wikipedia.org/wiki/Windows_Vista

https://id.wikipedia.org/wiki/Windows_7

https://id.wikipedia.org/wiki/Windows_8

https://id.wikipedia.org/w/index.php?title=Windows_3.0&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Windows_3.0&action=edit&redlink=1



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 komputerDari Wikipedia bahasa Indonesia, ensiklopedia bebas(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

https://id.wikipedia.org/wiki/Berkas_komputer#Atribut_berkas

https://id.wikipedia.org/wiki/Berkas_komputer#Nama_berkas

https://id.wikipedia.org/wiki/Direktori

https://id.wikipedia.org/wiki/Sistem_berkas


https://id.wikipedia.org/wiki/Wikipedia:Tutorial_berkas

https://id.wikipedia.org/wiki/Wikipedia:Tutorial_berkas

https://id.wikipedia.org/w/index.php?title=File&redirect=no

https://id.wikipedia.org/wiki/ODF

https://id.wikipedia.org/wiki/XML


https://id.wikipedia.org/w/index.php?title=Macro&action=edit&redlink=1

https://id.wikipedia.org/wiki/PDF

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

https://id.wikipedia.org/wiki/Byte

https://id.wikipedia.org/wiki/Cluster_(sistem_berkas)

https://id.wikipedia.org/wiki/Cluster_(sistem_berkas)

https://id.wikipedia.org/wiki/Terabita

https://id.wikipedia.org/wiki/Gigabita

https://id.wikipedia.org/wiki/Megabita

https://id.wikipedia.org/wiki/Kilobita

https://id.wikipedia.org/wiki/Tebibita

https://id.wikipedia.org/wiki/Gibibita

https://id.wikipedia.org/wiki/Mebibita

https://id.wikipedia.org/wiki/Kibibita

https://id.wikipedia.org/wiki/Bita

https://id.wikipedia.org/wiki/Karakter

https://id.wikipedia.org/wiki/Biner

https://id.wikipedia.org/wiki/Nama_berkas

https://id.wikipedia.org/wiki/Berkas_komputer#Manajemen_berkas

https://id.wikipedia.org/wiki/Berkas_komputer#Ukuran_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).

HTMLDari Wikipedia bahasa Indonesia, ensiklopedia bebas

HTML (HyperText Markup Language)

Ekstensi berkas .html, .htm

Jenis MIME text/html

Type code TEXTUniform Type Identifier public.html

Dikembangkan olehWorld Wide Web Consortium

Jenis format Markup language

Pengembangan dariStandard Generalized Markup Language

Dikembangkan menjadi XHTML

Standar

W3C HTML 4.01

W3C HTML 3.2W3C HTML 5 (draft)

http://www.w3.org/TR/html5/

http://www.w3.org/TR/REC-html32-19970114

http://www.w3.org/TR/1999/REC-html401-19991224/

https://id.wikipedia.org/wiki/Standar




https://id.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extension


https://id.wikipedia.org/w/index.php?title=DOS_Shell&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Midnight_Commander&action=edit&redlink=1

https://id.wikipedia.org/wiki/GNOME

https://id.wikipedia.org/wiki/KDE

https://id.wikipedia.org/wiki/KDE

https://id.wikipedia.org/w/index.php?title=Norton_Commander&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Norton_Commander&action=edit&redlink=1

https://id.wikipedia.org/wiki/Windows

https://id.wikipedia.org/wiki/Windows_Explorer

https://id.wikipedia.org/wiki/Sistem_berkas

https://id.wikipedia.org/w/index.php?title=Berkas:DOSShell.png&filetimestamp=20070426083943&

https://id.wikipedia.org/wiki/Berkas:HTML.svg

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.2 —14 Januari 1996,

HTML 4.0 —18 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 W3C—28 Oktober 2014.


https://id.wikipedia.org/wiki/28_Oktober

http://www.w3.org/TR/html5/


https://id.wikipedia.org/wiki/15_Mei

https://id.wikipedia.org/wiki/ISO

http://www.purl.org/NET/ISO+IEC.15445/15445.html


https://id.wikipedia.org/wiki/24_Desember

http://www.w3.org/TR/html401


https://id.wikipedia.org/wiki/18_Desember

http://www.w3.org/TR/REC-html40-971218/


https://id.wikipedia.org/wiki/14_Januari

http://www.w3.org/TR/REC-html32


https://id.wikipedia.org/wiki/22_September

https://id.wikipedia.org/wiki/Request_for_Comments

http://www.ietf.org/rfc/rfc1866.txt

https://id.wikipedia.org/wiki/Organisasi_Internasional_untuk_Standardisasi

https://id.wikipedia.org/wiki/SGML

https://id.wikipedia.org/wiki/HTML#cite_note-1




https://id.wikipedia.org/wiki/Halaman_web

https://id.wikipedia.org/wiki/ASCII

https://id.wikipedia.org/wiki/Penjelajah_web

https://id.wikipedia.org/wiki/Penjelajah_web

https://id.wikipedia.org/wiki/Bahasa_markah

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


https://id.wikipedia.org/wiki/Pranala


https://id.wikipedia.org/wiki/Pranala

https://id.wikipedia.org/wiki/Grafika

https://id.wikipedia.org/wiki/Sun_Microsystems

https://id.wikipedia.org/wiki/Sun_Microsystems

https://id.wikipedia.org/wiki/Produk


https://id.wikipedia.org/wiki/Macintosh

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>



https://id.wikipedia.org/wiki/Cascading_Style_Sheets


https://id.wikipedia.org/wiki/URL

https://id.wikipedia.org/wiki/Hyperlink

http://www.wikipedia.org/

https://id.wikipedia.org/wiki/Hiperteks


<html><head style="background-color: black; color: white;">

<title>Selamat Datang HTML</title></head><body>

<p>Halo dunia!</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 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>

https://id.wikipedia.org/wiki/Meta

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 languageDari Wikipedia bahasa Indonesia, ensiklopedia bebas(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]

https://id.wikipedia.org/wiki/Extensible_hypertext_markup_language#cite_note-2


https://id.wikipedia.org/wiki/26_Januari


https://id.wikipedia.org/wiki/Rekomendasi_W3C


https://id.wikipedia.org/wiki/Kompleks



https://id.wikipedia.org/wiki/Aplikasi

https://id.wikipedia.org/wiki/Sintaksis

https://id.wikipedia.org/wiki/Bahasa_markup



https://id.wikipedia.org/wiki/Paradigma


https://id.wikipedia.org/wiki/Singkatan

https://id.wikipedia.org/w/index.php?title=XHTML&redirect=no


https://id.wikipedia.org/wiki/Berkas:XHTML.svg

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">

https://id.wikipedia.org/wiki/Tabel

https://id.wikipedia.org/wiki/Font

https://id.wikipedia.org/wiki/CSS

https://id.wikipedia.org/wiki/Halaman

https://id.wikipedia.org/wiki/Extensible_hypertext_markup_language#cite_note-dadan-6


https://id.wikipedia.org/wiki/Extensible_hypertext_markup_language#cite_note-andi-3

https://id.wikipedia.org/wiki/Tag

https://id.wikipedia.org/wiki/Ponsel

https://id.wikipedia.org/wiki/PDA




https://id.wikipedia.org/wiki/Internasional



https://id.wikipedia.org/wiki/Bahasa




https://id.wikipedia.org/wiki/Sempurna

https://id.wikipedia.org/wiki/Kombinasi

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 Body, Head, Html, Title

Teksabbr, acronym, address, blockquote, br, cite, code,dfn, div, em, h1, h2, h3, h4,h5, h6, kbd, p, pre, q, samp, spam, strong, var

Hypertext aList dl, dt, dd, ol, ul, liForm form, input, label, select, option, textaareaTabel caption, table, td, th, trGambar / Image

img

Link 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.

PengukuranDari Wikipedia bahasa Indonesia, ensiklopedia bebas(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

https://id.wikipedia.org/wiki/Ketidakpastian

https://id.wikipedia.org/wiki/Kuantitas_fisik

https://id.wikipedia.org/wiki/Satuan_ukur

https://id.wikipedia.org/wiki/Kapasitas

https://id.wikipedia.org/wiki/Dimensi

https://id.wikipedia.org/wiki/Besaran

https://id.wikipedia.org/w/index.php?title=Ukuran&redirect=no

https://id.wikipedia.org/wiki/Tanda_petik


https://id.wikipedia.org/wiki/Program




https://id.wikipedia.org/wiki/Web

Pengukuran adalah perbandingan dengan standar -- William Shockley

Ilmu pengukuran disebut metrologi.

CitraDari Wikipedia bahasa Indonesia, ensiklopedia bebas(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 obyek–biasanya 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)

https://id.wikipedia.org/wiki/Citra#Masa_Kini

https://id.wikipedia.org/wiki/Citra#Renaisans

https://id.wikipedia.org/wiki/Citra#Kekaisaran_Roma

https://id.wikipedia.org/wiki/Citra#Yunani_Klasik

https://id.wikipedia.org/wiki/Citra#Mesir_Kuno

https://id.wikipedia.org/wiki/Citra#Seni_Aborigin

https://id.wikipedia.org/wiki/Citra#Zaman_Prasejarah

https://id.wikipedia.org/wiki/Patung

https://id.wikipedia.org/wiki/Tiga_dimensi

https://id.wikipedia.org/wiki/Foto

https://id.wikipedia.org/wiki/Lukisan

https://id.wikipedia.org/wiki/Dua_dimensi

https://id.wikipedia.org/wiki/Manusia


https://id.wikipedia.org/wiki/Wikipedia:Gambar

https://id.wikipedia.org/wiki/Citra_(disambiguasi)

https://id.wikipedia.org/w/index.php?title=Gambar&redirect=no

https://id.wikipedia.org/wiki/Metrologi

https://id.wikipedia.org/wiki/William_Shockley

https://id.wikipedia.org/wiki/Berkas:Twyfelfontein_1_%28SqueakyMarmot%29.jpg

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

https://id.wikipedia.org/wiki/Mesir_kuno

https://id.wikipedia.org/wiki/Citra#cite_note-2

https://id.wikipedia.org/wiki/Australia


https://id.wikipedia.org/wiki/Ular_pelangi

https://id.wikipedia.org/wiki/Aborigin

https://id.wikipedia.org/wiki/Darah

https://id.wikipedia.org/wiki/Tambang

https://id.wikipedia.org/wiki/Hitam

https://id.wikipedia.org/wiki/Kuning

https://id.wikipedia.org/wiki/Coklat

https://id.wikipedia.org/wiki/Merah

https://id.wikipedia.org/wiki/Batu_bara

https://id.wikipedia.org/wiki/Kapur

https://id.wikipedia.org/wiki/Arang

https://id.wikipedia.org/wiki/Namibia

https://id.wikipedia.org/wiki/Kuda

https://id.wikipedia.org/wiki/Rusa

https://id.wikipedia.org/wiki/Bison

https://id.wikipedia.org/wiki/Mamut

https://id.wikipedia.org/wiki/Perancis

https://id.wikipedia.org/wiki/Citra#cite_note-How_Art_Made_The_World-1

https://id.wikipedia.org/wiki/Spanyol



https://id.wikipedia.org/wiki/Kreativitas

https://id.wikipedia.org/wiki/Gua


https://id.wikipedia.org/wiki/Hewan

https://id.wikipedia.org/wiki/Seni_lukis

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.

https://id.wikipedia.org/wiki/Darius_III_dari_Persia

https://id.wikipedia.org/wiki/Alexander_Agung

https://id.wikipedia.org/wiki/Pompeii

https://id.wikipedia.org/wiki/Yesus

https://id.wikipedia.org/wiki/Katolik

https://id.wikipedia.org/wiki/Kreta


https://id.wikipedia.org/wiki/Matematika

https://id.wikipedia.org/wiki/Filsafat

https://id.wikipedia.org/wiki/Yunani_kuno

https://id.wikipedia.org/wiki/Isis

https://id.wikipedia.org/wiki/Nefertiti

https://id.wikipedia.org/wiki/Thebes,_Mesir

https://id.wikipedia.org/wiki/Ramses_II


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

https://id.wikipedia.org/wiki/Abad_ke-15

https://id.wikipedia.org/wiki/Firenze

https://id.wikipedia.org/wiki/Italia

https://id.wikipedia.org/wiki/Eropa

https://id.wikipedia.org/wiki/Abad_Renaisans

https://id.wikipedia.org/wiki/Berkas:Napoli_BW_2013-05-16_16-25-06_1_DxO.jpg

https://id.wikipedia.org/wiki/Berkas:Mona_Lisa-restored.jpg

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 (1501-1504), 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.

WarnaDari Wikipedia bahasa Indonesia, ensiklopedia bebas

Untuk kegunaan lain dari Warna, lihat Warna (disambiguasi).

Warna-warna utama

https://id.wikipedia.org/wiki/Warna_(disambiguasi)

https://id.wikipedia.org/wiki/Komunikasi

https://id.wikipedia.org/wiki/Seni_patung

https://id.wikipedia.org/wiki/Seni_lukis

https://id.wikipedia.org/wiki/Film

https://id.wikipedia.org/wiki/Cahaya


https://id.wikipedia.org/wiki/Michelangelo_Buonarroti

https://id.wikipedia.org/wiki/Leonardo_da_Vinci

https://id.wikipedia.org/wiki/Mona_Lisa

https://id.wikipedia.org/wiki/Humanisme

https://id.wikipedia.org/w/index.php?title=Berkas:Warna.gif&filetimestamp=20080126083539&

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

o 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

https://id.wikipedia.org/wiki/Warna#Galeri

https://id.wikipedia.org/wiki/Warna#Warna_harmonis

https://id.wikipedia.org/wiki/Warna#Warna_kombinasi

https://id.wikipedia.org/wiki/Warna#Warna_dasar

https://id.wikipedia.org/wiki/Warna#Nama-nama_warna

https://id.wikipedia.org/wiki/Warna#Istilah_lain

https://id.wikipedia.org/wiki/Warna#Pengelompokan

https://id.wikipedia.org/wiki/Hitam

https://id.wikipedia.org/wiki/Kafan

https://id.wikipedia.org/wiki/Salju

https://id.wikipedia.org/wiki/Cyan

https://id.wikipedia.org/wiki/Pigmen

https://id.wikipedia.org/wiki/Seni_rupa

https://id.wikipedia.org/wiki/Magenta

https://id.wikipedia.org/wiki/Biru

https://id.wikipedia.org/wiki/Hijau


https://id.wikipedia.org/wiki/Warna_primer

https://id.wikipedia.org/wiki/Warna_primer

https://id.wikipedia.org/wiki/Otak

https://id.wikipedia.org/wiki/Optik

https://id.wikipedia.org/wiki/Mata

https://id.wikipedia.org/wiki/Nanometer


https://id.wikipedia.org/wiki/Putih

https://id.wikipedia.org/wiki/Cahaya

https://id.wikipedia.org/wiki/Spektrum

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

https://id.wikipedia.org/wiki/Hijau


https://id.wikipedia.org/wiki/Kuning

https://id.wikipedia.org/wiki/Berkas:Color_icon_yellow.svg

https://id.wikipedia.org/wiki/Berkas:Color_icon_red.svg

https://id.wikipedia.org/wiki/Berkas:Color_icon_green.svg

Fractal Broccoli

Biru

Amarillo

Aureolin

Cadmium yellow

Cadmium yellow light

Hanza yellow light

Naples yellow

Nickeltintate

Yellow ironoxide

Yellow ochre Sul

phur crystal

Sulpherous Fumeroles


https://id.wikipedia.org/wiki/Berkas:Fractal_Broccoli.jpg

https://id.wikipedia.org/wiki/Berkas:Color_icon_blue.svg

https://id.wikipedia.org/wiki/Berkas:Solid_yellow.png

https://id.wikipedia.org/wiki/Berkas:Aureolin.jpg

https://id.wikipedia.org/wiki/Berkas:Cadmiumyellow.jpg

https://id.wikipedia.org/wiki/Berkas:Cadmiumyellowlight.jpg

https://id.wikipedia.org/wiki/Berkas:Solid_yellow.png

https://id.wikipedia.org/wiki/Berkas:Naplesyellow.jpg

https://id.wikipedia.org/wiki/Berkas:Nickeltintate.jpg

https://id.wikipedia.org/wiki/Berkas:Yellowironoxide.jpg

https://id.wikipedia.org/wiki/Berkas:Yellowochre.jpg

https://id.wikipedia.org/wiki/Berkas:Sulphur_crystal.jpg

https://id.wikipedia.org/wiki/Berkas:Sulpherous_Fumeroles.jpg

https://id.wikipedia.org/wiki/Berkas:Cube_Animation.gif

Warna kombinasi

Abu-abu

Solid gray

Merah muda Jingga /Oranye

Ungu

Sunset at French Riviera

Aster

Violettöne eines Fußbettes.

https://id.wikipedia.org/wiki/Ungu

https://id.wikipedia.org/wiki/Jingga

https://id.wikipedia.org/wiki/Merah_muda

https://id.wikipedia.org/wiki/Abu-abu

https://id.wikipedia.org/wiki/Berkas:Spectrum4websiteEval.png

https://id.wikipedia.org/wiki/Berkas:Emission_spectrum-Fe.png

https://id.wikipedia.org/wiki/Berkas:Solid_gray.png

https://id.wikipedia.org/wiki/Berkas:Sunset_at_French_Riviera.jpg

https://id.wikipedia.org/wiki/Berkas:Aster-violett.JPG

https://id.wikipedia.org/wiki/Berkas:Violettt%C3%B6ne_eines_Fu%C3%9Fbettes.JPG

1940 Ford automobile.

...

* ''Magenta''

</gallery>

Crimson

Crimson sunset

Maroon

https://id.wikipedia.org/wiki/Berkas:1940_Ford.jpg

https://id.wikipedia.org/wiki/Berkas:Image-330_P-crop_right.jpg

https://id.wikipedia.org/wiki/Berkas:MagentasRVB_Pantone_CMJN.jpg

https://id.wikipedia.org/wiki/Berkas:Crimson_sunset.jpg

https://id.wikipedia.org/wiki/Berkas:Dunkelrotes_Haus_Balanstr.JPG

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, abu-abu dan biru

https://id.wikipedia.org/wiki/Berkas:Marron_1300x1300.jpg

https://id.wikipedia.org/wiki/Berkas:Bed_sheet.JPG

https://id.wikipedia.org/wiki/Berkas:Kissenbezug_mit_farbigen_Streifen.JPG

https://id.wikipedia.org/wiki/Berkas:Kissenbezug_mit_Textildruck.JPG

https://id.wikipedia.org/wiki/Berkas:Schwarz-rote_Texilien.JPG

https://id.wikipedia.org/wiki/Berkas:Rot-gr%C3%BCner_Textildruck.JPG

https://id.wikipedia.org/wiki/Berkas:Bunter_Teppich.JPG

Jingga, putih, hijau, biru dan merah

Jingga, coklat, merah, hijau, kuning dan shades

Buntstifte.Farbige streifen.

TabelTabel 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.

PranalaDari Wikipedia bahasa Indonesia, ensiklopedia bebas(Dialihkan dari Hyperlink)

https://id.wikipedia.org/w/index.php?title=Hyperlink&redirect=no

https://id.wikipedia.org/wiki/Daftar

https://id.wikipedia.org/wiki/Database

https://id.wikipedia.org/w/index.php?title=Tabel_(database)&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Tabel_(HTML)&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Tabel_(HTML)&action=edit&redlink=1

https://id.wikipedia.org/wiki/Tabel_periodik

https://id.wikipedia.org/wiki/Tabel_kebenaran

https://id.wikipedia.org/w/index.php?title=Tabel_matematika&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Tabel_(informasi)&action=edit&redlink=1

https://id.wikipedia.org/wiki/Berkas:Farbenfroher_Textildruck.JPG

https://id.wikipedia.org/wiki/Berkas:Bettbezug-orange_und_brauner_Textildruck.JPG

https://id.wikipedia.org/wiki/Berkas:Buntstifte_01_KMJ.jpg

https://id.wikipedia.org/wiki/Berkas:Farbige_streifen.jpg

https://id.wikipedia.org/wiki/Berkas:Bbues_en_musac.jpg

https://id.wikipedia.org/wiki/Berkas:Farb-Check-RGB.png

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.


https://id.wikipedia.org/w/index.php?title=XML_Linking_Language&action=edit&redlink=1


https://id.wikipedia.org/wiki/Anchor



https://id.wikipedia.org/wiki/Tim_Berners-Lee

https://id.wikipedia.org/wiki/Pranala#Istilah_dalam_bahasa_Indonesia

https://id.wikipedia.org/wiki/Pranala#Undang-undang_dan_moral_yang_dikeluarkan_mengenai_ranala

https://id.wikipedia.org/wiki/Pranala#Sejarah

https://id.wikipedia.org/wiki/Pranala#Pranala_sebagai_currency_dari_Waring_Wera_Wanua

https://id.wikipedia.org/wiki/Pranala#Link_Behaviour_di_dalam_penjelajah_web

https://id.wikipedia.org/wiki/Pranala#Cara_kerja_di_dalam_HTML

https://id.wikipedia.org/wiki/Pranala#Pranala_pada_XML

https://id.wikipedia.org/wiki/Pranala#Pranala_pada_HTML

https://id.wikipedia.org/wiki/Web

https://id.wikipedia.org/wiki/Protokol

https://id.wikipedia.org/wiki/Hiperteks


https://id.wikipedia.org/wiki/Pranala#cite_note-pranala-1

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.

http://id.wikipedia.org/

https://id.wikipedia.org/wiki/Tetikus


https://id.wikipedia.org/w/index.php?title=Penjelajag_web&action=edit&redlink=1

https://id.wikipedia.org/w/index.php?title=Waring_Wera_Wanua&action=edit&redlink=1

https://id.wikipedia.org/wiki/URL

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

https://id.wikipedia.org/wiki/Opera

https://id.wikipedia.org/wiki/Mozilla_Firefox



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: praṇāla yang berarti "anak sungai", saluran, terusan dari kolam dan sebagainya. Kata yang mirip dalam bahasa Sanskerta adalah: praṇālikâ yang berarti terusan atau perantara.

https://id.wikipedia.org/wiki/Sungai

https://id.wikipedia.org/wiki/Bahasa_Sanskerta

https://id.wikipedia.org/wiki/Bahasa_Jawa

https://id.wikipedia.org/wiki/Kawi

Dalam bahasa Jawa Kuna, kata ini berarti penyangga, sandaran, lapik atau alas patung. Selain itu kata ini bisa pula berarti, yoṇi atau alas lingga.

TetikusDari Wikipedia bahasa Indonesia, ensiklopedia bebas(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

https://id.wikipedia.org/wiki/Macintosh


https://id.wikipedia.org/w/index.php?title=Scroll&action=edit&redlink=1



https://id.wikipedia.org/wiki/Kayu

https://id.wikipedia.org/wiki/Douglas_Engelbart


https://id.wikipedia.org/wiki/Tetikus#cite_note-1

https://id.wikipedia.org/wiki/Tikus

https://id.wikipedia.org/wiki/Papan_tombol


https://id.wikipedia.org/wiki/Data


https://id.wikipedia.org/wiki/Inframerah

https://id.wikipedia.org/wiki/LED

https://id.wikipedia.org/wiki/Bola

https://id.wikipedia.org/w/index.php?title=Mouse&redirect=no

https://id.wikipedia.org/wiki/Lingga

https://id.wikipedia.org/wiki/Berkas:Mouse-mechanism-cutaway.png

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 paten 3835464 (Inggris) September 1974. Kanan adalah bola dan dua penggelinding oleh Opocentsky, dengan nomor paten 3987685 (Inggris) Oktober 1976.

Bagian dalam tetikus mekanikal yang dibuka. Bagian bawah adalah tetikus, kiri atas adalah bola, dan kanan atas adalah pengait.

Tetikus optis buatan Logitech bersensor laser dengan ketelitian mencapai 4.800 titik per inci, nirkabel dengan memanfaatkan gelombang radio.

Tetikus pertama di dunia.

Bahasa lembar gayaDari Wikipedia bahasa Indonesia, ensiklopedia bebas(Dialihkan dari Stylesheet)

https://id.wikipedia.org/w/index.php?title=Stylesheet&redirect=no

https://id.wikipedia.org/wiki/Laser


https://id.wikipedia.org/wiki/Oktober

https://id.wikipedia.org/wiki/Inggris


https://id.wikipedia.org/wiki/September



https://id.wikipedia.org/wiki/November


https://id.wikipedia.org/wiki/Permainan_video

https://id.wikipedia.org/wiki/Inci

https://id.wikipedia.org/wiki/Laser

https://id.wikipedia.org/wiki/Radio

https://id.wikipedia.org/wiki/Berkas:Mousepatent_ball_vbr.png

https://id.wikipedia.org/wiki/Berkas:Tetikus_bola_copot_vbr.jpg

https://id.wikipedia.org/wiki/Berkas:LogiTech_Optical_Mouse_Vibriel.jpg

https://id.wikipedia.org/wiki/Berkas:First_Computer_Mouse_pic_2.jpg

https://id.wikipedia.org/wiki/Berkas:Optiknya_Tetikus_%28Vibriel%29.jpg

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.

https://id.wikipedia.org/w/index.php?title=XUL&action=edit&redlink=1

https://id.wikipedia.org/wiki/SVG



https://id.wikipedia.org/wiki/Bahasa_markah


https://id.wikipedia.org/wiki/Bahasa_komputer


JQUERY1. 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

http://developers.google.com/speed/libraries/devguide#jquery

http://jquery.com/download/

http://jquery.org/

http://jquery.com/

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 atribut-atribut 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 nama-nama 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 fungsi-fungsi 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. Fungsi-fungsi 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 elemen-elemen 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

http://www.jsdelivr.com/#!jquery

http://cdnjs.com/libraries/jquery/

http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0

http://developers.google.com/speed/libraries/devguide#jquery

http://code.jquery.com/jquery/

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 jqueryJquery 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.

http://vianjb.blogspot.com/2011/06/optimasi-seo-menggunakan-algoritma.html

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 jquery1. Mempunyai daya akses yang sangat cepat Karena hanya terdiri dari satu file saja dan ukurannya pun sangat kecil berkisar 20Kb2. Bersifat kompatibel/ cocok dengan banyak browser popular di dunia3. Mempunyai banyak komunitas yang besar dan selalu aktif serta dokumentasi yang lengkap4. Banyaknya plugin yang disediakan secara cuma-Cuma (gratis ). Plugin adalah kemampuan tambahan yang bisa disertakan pada Jquery5. Terdapat Jquery yang berlisensi GNU atau yang dikenal dengan free. Maka kita menggunakannya dengan tanpa dikenakan biaya apapun6. Terdapat API( Application Programming Interface) di dalamnya7. 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 310. 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 lainnya12. “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 interaksinya15. 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 yang dimiliki jQuery1. 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. Ragam Kreasi jQuery1. 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=0x3a3a3a&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=0x3a3a3a&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>

http://www.jankoatwarpspeed.com/wp-content/uploads/examples/TurnOffTheLights

</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); background-repeat: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.

Let’s add a div to the end of our markup:

<div id="shadow"></div>

Now let’s 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. It’s 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.

Let’s 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 won’ta 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; background-image: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);}

We’ll extend the click handler a little bit to get this result:

$(".lightSwitcher").click(function(){ $("#shadow").toggle(); 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; background-image: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

$(document).ready(function(){ $("#shadow").css("height", $(document).height()).hide(); $(".lightSwitcher").click(function(){ $("#shadow").toggle(); 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

http://openwebstuff.com/author/admin/

http://openwebstuff.com/category/web-development/3d-effects/

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 that’s 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 You’ll Need

This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. I’ve 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.

http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

http://buildinternet.com/2009/02/how-to-make-an-impressive-animated-landscape-header-with-jquery/

http://gsgd.co.uk/sandbox/jquery/easing/

http://www.buildinternet.com/live/curtains/curtains.zip

http://openwebstuff.com/wp-content/plugins/wp-js-external-link-info/redirect.php?url=http://www.devirtuoso.com/2009/09/3d-sphere-using-jquery/

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

2

3

4

5

6

7

8

9

10

<head>

<script type="text/javascript" src="<a class="linkification-ext" title="Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js">http://jqueryjs.googlecode.com/files/jquery-1.3.2.js</a>"></script>

<script src="jquery.easing.1.3.js" type="text/javascript"></script>

</head>

<body>

<div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div>

<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 *{

http://www.hongkiat.com/blog/making-png-image-transparency-work-in-internet-explorer/

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

margin:0;

padding:0;

}

body {

text-align: center;

background: #4f3722 url('images/darkcurtain.jpg') repeat-x;

}

img{

border: none;

}

.leftcurtain{

width: 50%;

height: 495px;

top: 0px;

left: 0px;

position: absolute;

z-index: 2;

}

.rightcurtain{

width: 51%;

height: 495px;

right: 0px;

top: 0px;

position: absolute;

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

z-index: 3;

}

.rightcurtain img, .leftcurtain img{

width: 100%;

height: 100%;

}

.logo{

margin: 0px auto;

margin-top: 150px;

}

.rope{

position: absolute;

top: -40px;

left: 70%;

z-index: 4;

}

Let’s pause for a minute and catch up with what we’ve 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.

You’ll 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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<script type="text/javascript">

$(document).ready(function() {

$curtainopen = false;

$(".rope").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

}else{

18

19

20

21

22

23

24

25

26

27

28

29

30

31

$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'50%'}, 2000 );

$(".rightcurtain").stop().animate({width:'51%'}, 2000 );

$curtainopen = false;

}

return false;

});

});

</script>

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.

http://buildinternet.com/2008/12/quick-tip-blur-links-with-jquery/

http://buildinternet.com/2008/12/quick-tip-blur-links-with-jquery/

Step 5 – Cue Excitement, You’re Done

You’ve 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 what’s 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, let’s 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>

That’s nice and bite-sized. The main thing to note is that we attached .fluidimage to the image we want to toggle.

http://www.last.fm/music/blink-182

Step 2 – Onto the CSS

1

2

3

body{ text-align:center; }

img{ float: right; margin: 0px 10px 10px 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

2

3

4

5

6

7

8

9

10

11

<script type="text/javascript" src="<a class="linkification-ext" title="Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js">http://jqueryjs.googlecode.com/files/jquery-1.3.2.js</a>"></script>

<script type="text/javascript">

$(document).ready(function() {

function imageresize() {

var contentwidth = $('#content').width();

if ((contentwidth) < '700'){

$('.fluidimage').attr('src','little.jpg');

12

13

14

15

16

17

18

19

20

21

22

} else {

$('.fluidimage').attr('src','big.jpg');

}

}

imageresize();//Triggers when document first loads

$(window).bind("resize", function(){//Adjusts image when browser resized

imageresize();

});

});

</script>

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, You’re Done

Some of you may wonder why I only have two sizes and didn’t 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. It’s 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

http://www.nonsensesociety.com/2009/04/10-spectacular-photographs-by-gordon-mcbryde/

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

2

3

4

.boxgrid{

width: 325px;

height: 260px;

margin:10px;

5

6

7

8

9

10

11

12

13

14

15

16

float:left;

background:#161613;

border: solid 2px #8399AF;

overflow: hidden;

position: relative;

}

.boxgrid img{

position: absolute;

top: 0;

left: 0;

border: 0;

}

If you aren’t using the semi-transparent captions you are done with CSS – move to Step 2.

1

2

3

4

5

6

7

.boxcaption{

float: left;

position: absolute;

background: #000;

height: 100px;

width: 100%;

opacity: .8;

8

9

10

11

12

/* For IE 5-7 */

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

/* For IE 8 */

-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

}

Opacity that plays nice in all browsers is a rough topic, educate yourself if you need to.

Now we’ll 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

2

3

4

5

6

7

8

.captionfull .boxcaption {

top: 260;

left: 0;

}

.caption .boxcaption {

top: 220;

left: 0;

}

Step 2 – Adding the Sliding Animations

http://www.robertnyman.com/2008/09/16/you-want-css-opacity-to-go-with-that-well-suit-yourself/

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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

$(document).ready(function(){

//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'},{queue:false,duration:300});

});

//Horizontal Sliding

$('.boxgrid.slideright').hover(function(){

$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});

}, function() {

$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});

});

//Diagnal Sliding

$('.boxgrid.thecombo').hover(function(){

$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});

}, function() {

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});

});

//Partial Sliding (Only show some of background)

$('.boxgrid.peek').hover(function(){


}, function() {


});

//Full Caption Sliding (Hidden to Visible)

$('.boxgrid.captionfull').hover(function(){


}, function() {


});

//Caption Sliding (Partially Hidden to Visible)

$('.boxgrid.caption').hover(function(){


}, function() {


});

});

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.

Here’s an example of the HTML I would use for the .captionfull animation:

1

2

3

4

5

6

7

<div class="boxgrid captionfull">

<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-jarek-kubicki/" href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/">http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/</a>" target="_BLANK">More Work</a></p>

</div>

</div>

Go Forth and Create

I’ve 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 well-concepted 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 inwrapperElement: 'div',

http://www.fckeditor.net/

http://docs.jquery.com/Plugins/Authoring#Customizing_animations

http://masterfidgeter.com/projects/captify/

//Class for wrapper elementwrapperClass: 'caption',

//Caption ElementcaptionElement: 'p',

//Attribute of image to use as caption sourceimageAttr: 'alt',

//If true, it checks to make sure there is caption copy before running on each imagerequireText: true,

//Should inline style be copied from img element to wrappercopyStyle: false,

//Strip inline style from imageremoveStyle: true,

//Strip align attribute from imageremoveAlign: true,

//Assign the value of the image's align attribute as a class to the wrappercopyAlignmentToClass: false,

//Assign the value of the image's float value as a class to the wrappercopyFloatToClass: true,

//Assign a width to the wrapper that matches the imageautoWidth: true,

//Animate on hover over the imageanimate: false,

//Show Animationshow: {opacity: 'show'},showDuration: 200,

//Hide Animationhide: {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 baikDokumentasi yang disediakan pada web jQueryMobile sangatlah mudah dipahami. Di

bagian awal akan dijelaskan bagaimana langkah-langkah 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 ThemeRollerPengguna 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 terbaikjQueryMobile dikembangkan dengan core jQuery yang terkenal dengan desain UI nya

yang ringan dan lembut, sehingga bisa menggantikan teknologi flash. Kemampuan yang baik

http://files.www.gethifi.com/posts/jcaption/index.html

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 MapsPenggunaan 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/jquery-google-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

http://www.jquery.com/

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html

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 website sederhana dengan jquery` 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/jquery-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.

http://code.jquery.com/jquery-1.4.2.js

http://code.jquery.com/jquery-1.4.2.min.js

http://jquery.com/

http://www.ilmugrafis.com/web-jquery.php?page=cara-menggunakan-jquery

http://www.ilmugrafis.com/dreamweaver.php

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="jquery-1.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 $(document).ready(function(){ //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 :<script type="text/javascript"> //code ini akan dieksekusi ketika halaman ini di load pertama kali $(document).ready(function(){ //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.

<script type="text/javascript"> //code ini akan dieksekusi ketika halaman ini di load pertama kali $(document).ready(function(){ //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> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript"> //code ini akan dieksekusi ketika halaman ini di load pertama kali $(document).ready(function(){ //kode-kode lainnya var text = $("body").text(); alert(text);

$("body").css("background-color","black");

http://docs.jquery.com/Events

http://api.jquery.com/css/

http://docs.jquery.com/Selectors

$("body").css("color","white");

$("#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/EventsSalah 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> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript"> //code ini akan dieksekusi ketika halaman ini di load pertama kali $(document).ready(function(){ //kode-kode lainnya var text = $("body").text();

http://docs.jquery.com/Effects

http://docs.jquery.com/Events

alert(text);

//mengubah css $("body").css("background-color","black"); $("body").css("color","white");

//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 lorem ipsum lorem ipsum lorem ipsum lorem ipsum 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 animasi-animasi lainnya anda dapat liat di dokumentasi.

Perbedaan jquery dengan javascriptPerbedaan 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

2

3

<script language="javascript">

function changeBackground(color)

{

http://www.zainalhakim.web.id/posting/perbedaan-javascript-dan-jquery.html

4

5

6

7

document.body.style.background = color;

}

onload="changeBackground('red');"

</script>

?

1

2

3

<script>

$('body').css('background', '#ccc');

</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-javascript-dan-

jquery.html#sthash.JL5MyJG0.dpuf

http://www.zainalhakim.web.id/posting/perbedaan-javascript-dan-jquery.html

KELOMPOK 3HTML,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

Documents

Transcript of artikel tentang HTML,JS,CSS,PHP dan JQUERY