Tutorial Membuat Web Sederhana

kali ini saya akan membahas Tutorial Membuat Web Sederhana mengunakan Adobe Photoshop dan Adobe Dreamweaver cs 5. perlu diketahui bahwa web yang akan kita buat kali ini tidak menggunakan tabel melainkan menggunakan css sebagai pengatur komponen.
Web Sederhana ini bertemakan lingkungan dengan satu hompage, 3 halaman artikel dan 1 halaman gallery dengan menggunakan template flash.

kita mulai Tutorial Membuat Sederhana ini denganmembuat desain tampilan web menggunakan Adobe Photoshop cs 5. berikut ini adalah contoh desain web yang akan kita gunakan.

buat slice setiap komponen. artinya kita akan memecah setiap komponen yang akan digunakan dengan menggunakan slice tool sehingga semua bagian terpisah seperti kompnen header dibawah ini.

 jika sudah di slice, langkah selanjutnya adalah menyimpan hasil slice tadi dengan cara klik file > save for web and devices.

simpan seluruh slice gambar di dalam folder images. maka langkah selanjutnya adalah mengedit tampilan web menggunakan Dreamweaver cs 5. silakan buka dreamweaver cs5.kemudian pilih file .css untuk menampilkan potongan gambar yang tadi.
berikut adalah css file yang saya gunakan untuk contoh web ini.

@charset "utf-8";
/* CSS Document */

body {
 background-image: url(images/w39.jpg);
 background-repeat: no-repeat inherit;
 background-attachment:fixed;
}
.header {
 width: 684px;
    margin: 0 auto;
    height:116px;
 background: url(images/home_page1.png) ;
}
.atas {
 width: 684px;
    margin: 0 auto;
    height: 27px;
 background : url(images/atas.gif) top right no-repeat;
 
}
.tengah {
 width: 684px;
    margin: 0 auto;
    max-height: auto;
 min-height: 426px;
 background: url(images/konten_10.png);

}
.bawah {
 width: 684px;
    margin: 0 auto;
    height: 19px;
 background: url(images/konten_11.png) top right no-repeat;
}
.footer {
 width: 683px;
    margin: 0 auto;
    height: 144px;
 background: url(images/footer.png);
}
.content{
    width: 683px auto;
    margin: 0 auto;
    height: 426px;
 background: url(images/konten_10.gif);
}
.container{
 padding : 10px;
 text-align: left;
}
.konten {
 background-image: url(images/home_page_09.gif);
}

    
    #menudrop{
    background-color: transparent;/* warna background utama , silakan ganti dengan value lain */
    padding:0;
    margin-top:1px;/* jarak luar atas, silakan ganti dengan value lain */
    margin-bottom:1px;/*jarak luar bawah , silakan ganti dengan value lain */
    margin-left: auto;/* jarak luar kiri , silakan ganti dengan value lain */
    margin-right: auto;/* jarak luar kanan , silakan ganti dengan value lain */
    overflow: hidden;
    font-family: Droid;/* werna background utama , silakan ganti dengan value lain */
 
    font-size:15px;/* ukuran font, silakan ganti dengan value lain */
    font-weight:bold;/* ketabalan font, silakan ganti dengan value lain */
    width:683px;/*lebar background belakang , silakan atur lebarnya */
    -moz-border-radius:5px;/* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */
    text-transform:capitalize;
    }
   
    #menudrop a{
  text-decoration:none;
  }
    
    #menustyle{
  margin:0;
  padding:0;
  }
    
    #menustyle ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
 }
    
    #menustyle li{
  list-style:none;
        margin:0;
     padding:0;
  }
    
    #menustyle li a, #menustyle li a:link, #menustyle li a:visited{
 width: 88px ;
 height: 36px;
    background: url(images/home_page_04.gif) no-repeat;/* warna background link, silakan ganti dengan value lain */
    color: #FFF;/* warna text link, silakan ganti dengan value lain */
    display:block;
 text-align: center;
    padding-top: 8px;/*padding ini adalah jarak antara text dengan batas luar, silakan ganti dengan value lain */
    -moz-border-radius:4px;/* fungsi ini untuk membuat lengkungan selebar 4px, hanya untuk firefox, silakan ganti dengan value lain */
    }
    
    #menustyle li a:hover, #menustyle li a:active{
    background-color: transparent;/* warna background link ketika cursor melintas, silakan ganti dengan value lain */
    color:lime;/* warna text link ketika cursor melintas, silakan ganti dengan value lain */
    margin:0;
    -moz-border-radius:4px;
    }
    
    #menustyle li li a, #menustyle li li a:link, #menustyle li li a:visited{
  background-image:url(images/home_page_07.gif);
 width:420px;/* lebar link-link yang ngedrop, silakan ganti dengan value lain */
 height:36px;
    float:none;
    margin:0;
    font-size:18px;/* ukuran font yg ngedrop, silakan ganti dengan value lain */
    }
    
    #menustyle li{
  float:left;
  padding:0;
  }
  
    #menustyle li a.enclose, #menustyle li a.enclose:visited{
  border-top:1px solid white;
  }
  
    #menustyle li ul{z-index: 9999;
 position:absolute;
 left:-999em;
 height:auto;
 width:170px;
 margin:0;
 padding:0;
 }
 
    #menustyle li ul a{
  width: 140px;
  }
  
    #menustyle li ul ul{
  margin:-75px 0 0 171px;
  }
  
    #menustyle li:hover ul ul, #menustyle li:hover ul ul ul, #menustyle li.sfhover ul ul, #menustyle li.sfhover ul ul ul{
  left:-999em;
  }
  
    #menustyle li:hover ul, #menustyle li li:hover ul, #menustyle li li li:hover ul, #menustyle li.sfhover ul, #menustyle li li.sfhover ul,        #menustyle li li li.sfhover ul{
  left:auto;
  }
  
    #menustyle li:hover, #menustyle li.sfhover{
  position:static;
  }

simpan dengan nama style.css


kemudian buat file .html baru untuk homepage dan simpan dalam satu folder dengan script css dan folder images yang td.


untuk menghubungkan css dengan file html gunakan script berikut

<link rel="stylesheet" href="styles.css" type="text/css" media="all" />

berikut ini adalah contoh halaman web yang akan kita buat.

untuk background silakan gunakan gambar apa saja tetapi harus berukuran besar agar tidak terpotong ketika diimplementasikan ke dalam web browser.

untuk menu dropdown, bisa menggunakan unorderd list pada html dengan menggunakan css berikut.

   #menudrop{
    background-color: transparent;/* warna background utama , silakan ganti dengan value lain */
    padding:0;
    margin-top:1px;/* jarak luar atas, silakan ganti dengan value lain */
    margin-bottom:1px;/*jarak luar bawah , silakan ganti dengan value lain */
    margin-left: auto;/* jarak luar kiri , silakan ganti dengan value lain */
    margin-right: auto;/* jarak luar kanan , silakan ganti dengan value lain */
    overflow: hidden;
    font-family: Droid;/* jenis font yang digunakan, silakan ganti */
 
    font-size:15px;/* ukuran font, silakan ganti dengan value lain */
    font-weight:bold;/* ketabalan font, silakan ganti dengan value lain */
    width:683px;/*lebar background belakang , silakan atur lebarnya */
    -moz-border-radius:5px;/* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */
    text-transform:capitalize;
    }
   
    #menudrop a{
  text-decoration:none;
  }
    
    #menustyle{
  margin:0;
  padding:0;
  }
    
    #menustyle ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
 }
    
    #menustyle li{
  list-style:none;
        margin:0;
     padding:0;
  }
    
    #menustyle li a, #menustyle li a:link, #menustyle li a:visited{
 width: 88px ;
 height: 36px;
    background: url(images/home_page_04.gif) no-repeat;/* warna background link, silakan ganti dengan value lain */
    color: #FFF;/* warna text link, silakan ganti dengan value lain */
    display:block;
 text-align: center;
    padding-top: 8px;/*padding ini adalah jarak antara text dengan batas luar, silakan ganti dengan value lain */
    -moz-border-radius:4px;/* fungsi ini untuk membuat lengkungan selebar 4px, hanya untuk firefox, silakan ganti dengan value lain */
    }
    
    #menustyle li a:hover, #menustyle li a:active{
    background-color: transparent;/* warna background link ketika cursor melintas, silakan ganti dengan value lain */
    color:lime;/* warna text link ketika cursor melintas, silakan ganti dengan value lain */
    margin:0;
    -moz-border-radius:4px;
    }
    
    #menustyle li li a, #menustyle li li a:link, #menustyle li li a:visited{
  background-image:url(images/home_page_07.gif);
 width:420px;/* lebar link-link yang ngedrop, silakan ganti dengan value lain */
 height:36px;
    float:none;
    margin:0;
    font-size:18px;/* ukuran font yg ngedrop, silakan ganti dengan value lain */
    }
    
    #menustyle li{
  float:left;
  padding:0;
  }
  
    #menustyle li a.enclose, #menustyle li a.enclose:visited{
  border-top:1px solid white;
  }
  
    #menustyle li ul{z-index: 9999;
 position:absolute;
 left:-999em;
 height:auto;
 width:170px;
 margin:0;
 padding:0;
 }
 
    #menustyle li ul a{
  width: 140px;
  }
  
    #menustyle li ul ul{
  margin:-75px 0 0 171px;
  }
  
    #menustyle li:hover ul ul, #menustyle li:hover ul ul ul, #menustyle li.sfhover ul ul, #menustyle li.sfhover ul ul ul{
  left:-999em;
  }
  
    #menustyle li:hover ul, #menustyle li li:hover ul, #menustyle li li li:hover ul, #menustyle li.sfhover ul, #menustyle li li.sfhover ul,        #menustyle li li li.sfhover ul{
  left:auto;
  }
  
    #menustyle li:hover, #menustyle li.sfhover{
  position:static;
  }

berikut ini adalah isi html dari homepage.

<html>
<head>
<title>home_page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (home_page.psd) -->


<div class="header">
</div>


<!--d-->

<!--d-->
<div>

   
    <div id='menudrop'>
    <ul id='menustyle'>
    <li><a href='file:///D:/tugas%20web/home_baru/home_baru.html'>home</a></li>
    <li><a href=''>pages</a>
    <ul>
    <li><a href='file:///D:/tugas%20web/home_baru/artikel-1.html'>12 Langkah Menghemat Energi</a></li>
    <li><a href='file:///D:/tugas%20web/home_baru/artikel-2.html'>4 Langkah Menghemat Plastik</a></li>
    <li><a href='file:///D:/tugas%20web/home_baru/artikel-3.html'>6 Upaya Pencegahan atas Pencemaran Lingkungan</a></li>
    </ul>
    <li><a href='file:///D:/tugas%20web/home_baru/gallery.html'>gallery</a> 
    <li><img src="images/home_page_07.gif" width="419" height="36">   
</div>
<!--d-->

<div class="atas"></div>
<div class="tengah"> 
<div class="container"> 
          <h1>SELAMAT DATANG </h1>
    <p>Selamat datang di web eco-save. web ini berisi artikel dan kumpulan gambar bertema "penyelamatan ligkungan". karena semakin hari lingkungan yang kita tempati,yaitu bumi, sedang mengalami Global Warming (Pemanasan Global), maka web ini berusaha menyajikan berbagai cara memperlambat atau bahkan mengurangi kerusakan bumi kita tercinta.
</p>

</div>
</div>
<div class="bawah">
</div>
<div class="footer">
</div>


<!-- End Save for Web Slices -->
</body>
</html>

tampilan homepage tersebut akan kita gunakan untuk page selanjutnya. buat file .html baru bernama artikel-1.html, kemuadian copy paste sourcecode di atas ke dalam sourcecode file artikel-1.html. file html ini berfungsi untuk page yang akan di isi artikel atau konten. isi konten diletakan antara code <div class="tengah">
<div class="container">
dan code
</div>
</div>

<div class="tengah">

<div class="container">

!!!!!!!!isi konten di sini!!!!!!!!

</div>

</div>

 
buat halaman artikel seperti di atas sebanyak page dengan menggunakan sourcecode yang sama. hanya isi artikelnya saja yang berbeda. berikut ini contoh artikel.

Selengkapnya...

WWW ( World Wide Web )

WWW atau World Wide Web. Sebuah kata yang sangat tindak asing di telinga kita. Terutama anda yang sering mondar -mandir di dunia maya. Jika ingin masuk ke suatu website pasti anda mengetik awalan tersebut. Misalnya anda ingin membuka akun facebook anda, di kotak alamat anda pasti mengetikkan www.facebook.com. tahukah anda sejak kapan penulisan www mulai dipakai di jagat web?.

Sejarah web

Sejarah Web bermula di European Laboratory for Particle Physics (lebih dikenal dengan nama CERN), di kota Geneva dekat perbatasan Perancis dan Swiss. CERN merupakan suatu organisasi yang didirikan oleh 18 negara di Eropa. Dibulan Maret 1989, Tim Berners dan peneliti lainnya dari CERN mengusulkan suatu protokol sistem distribusi informasi di Internet yang memungkinkan para anggotanya yang tersebar di seluruh dunia saling membagi informasi dan bahkan untuk menampilkan informasi tersebut dalam bentuk grafik.
Web Browser pertama dibuat dengan berbasiskan pada teks. Untuk menyatakan suatu link, dibuat sebarisan nomor yang mirip dengan suatu menu. Pemakai mengetikkan suatu nomor untuk melakukan navigasi di dalam Web. Kebanyakan software tersebut dibuat untuk komputer-komputer yang menggunakan Sistem Operasi UNIX, dan belum banyak yang bisa dilakukan oleh pemakai komputer saat itu yang telah menggunakan Windows. Tetapi semua ini berubah setelah munculnya browser Mosaic dari NCSA (National Center for Supercomputing Applications).
Di bulan Mei 1993, Marc Andreesen dan beberapa murid dari NCSA membuat Web browser untuk sistem X-Windows yang berbasiskan grafik dan yang mudah untuk digunakan. Dalam beberapa bulan saja, Mosaic telah menarik perhatian baik dari pemakai lama maupun pemakai baru di Internet. Kemudian NCSA mengembangkan versi-versi Mosaic lainnya untuk komputer berbasis UNIX, NeXT, Windows dan Macintosh.
Di bulan Mei 1993, Marc Andreesen dan beberapa murid dari NCSA membuat Web browser untuk sistem X-Windows yang berbasiskan grafik dan yang mudah untuk digunakan. Dalam beberapa bulan saja, Mosaic telah menarik perhatian baik dari pemakai lama maupun pemakai baru di Internet. Kemudian NCSA mengembangkan versi-versi Mosaic lainnya untuk komputer berbasis UNIX, NeXT, Windows dan Macintosh.
Pada tahun 1994, Marc Andreesen meninggalkan NCSA, dan kemudian bersama Jim Clark, salah satu pendiri dari Silicon Graphics, membuat Netscape versi pertama. Kehadiran Netscape ini menggantikan kepopuleran Mosaic sebagai Web browser dan bahkan sampai saat ini Netscape merupakan browser yang banyak digunakan setelah Internet Explorer dari Microsoft.
Pada tahun yang sama CERN dan MIT mendirikan suatu konsorsium yang dinamakan World WIde Web Consortium (W3C) yang bertugas untuk membangun standar bagi teknologi Web.
Pada awal perkembangannya, sewaktu browser masih berbasiskan teks hanya terdapat sekitar 50 website. Di akhir tahun 1995 jumlah ini telah berkembang mencapai sekitar 300.000 web site. Dan diperkirakan sekarang ini jumalh pemakai Web telah mencapat sekitar 30-an juta pemakai diseluruh dunia


Arsitektur web 

Dalam membuat web kita juga memerlukan rancangan atau arsitektur untuk melakukan pendekatan terhadap desain dan perencanaan situs web itu sediri. arsitektur web melibatkan teknis, estetika dan kriteria fungsional. seperti dalam arsitektur pada umumnya, fokus arsitektur web yaitu pada pengguna dan kebutuhan pengguna.

HTTP
HTTP Singkatan dari Hypertext Transfer Protocol, yang mana adalah suatu protokol yang digunakan oleh World Wide Web. HTTP mendefinisikan bagaimana suatu pesan bisa diformat dan dikirimkan dari server ke client. HTTP juga mengatur aksi-aksi apa saja yang harus dilakukan oleh web server dan juga web browser sebagai respon atas perintah-perintah yang ada pada protokol HTTP ini. Sebagai contoh, ketika Anda mengetikkan suatu alamat atau URL pada internet browser Anda, maka sebenarnya web browser akan mengirimkan perintah HTTP ke web server. Web server kemudian akan menerima perintah ini dan melakukan aktivitas sesuai dengan perintah yang diminta oleh web browser (misalnya akses ke database, file, e-mail dan lain sebagainya). Hasil aktivitas tadi akan dikirimkan kembali ke web browser untuk ditampilkan kepada pengguna.
HTTP juga mengatur aksi-aksi apa saja yang harus dilakukan oleh web server dan juga web browser sebagai respon atas perintah-perintah yang ada pada protokol HTTP ini. Sebagai contoh, ketika Anda mengetikkan suatu alamat atau URL pada internet browser Anda, maka sebenarnya web browser akan mengirimkan perintah HTTP ke web server.
Web server kemudian akan menerima perintah ini dan melakukan aktivitas sesuai dengan perintah yang diminta oleh web browser (misalnya akses ke database, file, e-mail dan lain sebagainya). Hasil aktivitas tadi akan dikirimkan kembali ke web browser untuk ditampilkan kepada pengguna.
HTML
HTML adalah singkatan dari Hyper Text Markup Language, HTML tidak tergolong kedalam sebuah bahasa pemrograman, HTML lebih dikenal sebagai bahasa markup yang terdiri dari serangkaian tag markup yang mampu menggambarkan sebuah halaman web.
Secara garis besar, terdapat 4 jenis elemen dari HTML:
structural. tanda yang menentukan level atau tingkatan dari sebuah teks akan memerintahkan browser untuk menampilkan sebagai teks tebal besar yang menunjukkan sebagai Heading 1
presentational. tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks,
hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain , Elemen widget yang membuat objek-objek lain seperti tombol button, list , dan garis horizontal .
Selain markup presentational , markup yang link tidak menentukan bagaimana tampilan dari sebuah teks. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan dan sebagai gantinya digunakan Cascading Style Sheets.
HTML Markup Tag
HTML Markup Tag biasa disebut tag HTML adalah kata kunci yang diapit oleh sudut kurung seperti , tag HTML biasanya berpasangan seperti dan , tag disebut tag awal/pembuka dan adalah tag akhir/penutup cirinya ditambahkan tanda garis miring.
Dokumen HTML - Halaman Web
Dokumen HTML berisi serangkaian tag HTML kemudian diterjemahkan oleh web browser (internet explorer, mozilla firefox, dll.) untuk selanjutnya ditampilkan dalam bentuk halaman web, artinya apabila dokumen HTML sudah dibuka oleh web browser tidak lagi tampil tag-tag htmlnya melainkan sudah sebagai halaman web

URL
Uniform Resource Locator Disingkat dengan URL. URL digunakan dengan software browser untuk menempatkan dan mengakses informasi di World Wide Web. URL terbagi menjadi beberapa bagian atau dikenal dengan istilah http:// domain/path/filename, atau disebut pula metode akses - lokasi komputer - lokasi file. Di antara bagian tersebut adalah:
• Bagian pertama URL dikenal sebagai protocol atau disebut pula http:// yang merupakan singkatan dari Hypertext Transfer Protokol.
• Bagian kedua dari URL dikenal sebagai nama domain, domain mewakili nama server yang sedang berhubungan dengan internet.
• Bagian ketiga dari URL disebut dengan directory path yang merupakan area khusus dimana item-item berada.
• Bagian keempat dari URL disebut nama file dokumen, ini menentukan file khusus yang sedang diakses. Biasanya adalah sebuah file HTML, tapi mungkin juga gambar, suara atau file lainnyaContoh dari URL:ftp://ftp.ee.umanitoba.ca/pub/indonesian/00-index.txt
Dalam contoh di atas, ditunjukkan bagaimana mendapatkan berkas {00-index.txt}, yaitu dengan menggunakan protokol FTP, di mesin yang bernama {ftp.ee.umanitoba.ca}, dan berkas berada di direktori {pub/indonesian}.Secara umum, URL memiliki keterangan sebagai berikut:protokol://nama-mesin[:nomor-port]/direktori/menuju/namafile
XML
XML untuk saat ini bukan merupakan pengganti HTML. Masing-masing dikembangkan untuk tujuan yang berbeda. Kalau HTML digunakan untuk menampilkan informasi dan berfokus pada bagaimana informasi terlihat, XML mendeskripsikan susunan informasi dan berfokus pada informasi itu sendiri. XML terutama dibutuhkan untuk menyusun dan menyajikan informasi dengan format yang tidak mengandung format standard layaknya heading, paragraph, table dan lain sebagainya. Sebagai contoh apa bila kita ingin menyimpan dan menyajikan informasi notasi musik pada lagu “Indonesia raya”, kita bisa menyimpannya dengan xml
Kemudian dengan bantuan software lain midi generator kita bisa mendengarkan musiknya atau kita bisa membuat softaware sendiri yang menampilkan informasi ini dalam bentuk not balok. Sama dengan HTML, File XML berbentuk teks sehingga bila diperlukan kita bisa membacanya tanpa memerlukan bantuan software khusus. Hal ini memudahkan pengembang aplikasi yang menggunakan XML untuk mendebug programnya. XML lebih fleksible dibanding HTML dalam hal kemampuannya menyimpan informasi dan data. Pada XML kita bisa menyimpan data baik dalam atribut maupun sebagai isi elemen yang dletakkan diantara tag pembuka dan tag penutup. Kelebihan lain yang dimiliki XML adalah bahwa informasi bisa di pertukarkan dari satu system ke system lain yang berbeda platform. Misalnya dari Windows ke Unix, atau dari PC ke Machintosh bahkan dari internet ke handphone dengan teknologi WAP.

XSLT
XSLT adalah kependekan dari eXtensible StyleSheet Language:Transformation, adalah bagian dari XSL yang dikembangkan sebelumnya. XSL adalah Stylesheet yang khusus dikembangkan sebagai komplemen XML, untuk merubah informasi pada XML ke dalam bentuk lain agar bisa ditampilkan di layar, dicetak di kertas atau didengarkan telinga. Pada dasarnya proses ini di bagi menjadi dua bagian proses yakni pertama Transformasi Struktural yang meliputi pengumpulan, pengelompokan dan pengurutan data maupun penyusunan ulang, penambahan dan penghapusan tag dan atribut, dan yang kedua adalah proses merubah format menjadi pixel dilayar, nohtah tinta di kertas atau nada di speaker. Proses yang pertama itulah yang kemudian disebut XSLT, sedangkan yang kedua biasa disebut XSLFO (eXtensible Stylesheet Language:Formatting Object).
Hasil Keluaran XSLT bisa berupa HTML, Text file atau XML dengan format yang baru. Sebenarnya untuk menampilkan dokumen XML agar lebih menarik dilihat di browser bisa dilakukan oleh Cascade StyleSheet. CSS yang sering digunakan untuk memformat HTML bisa juga dipakai untuk XML. Akan tetapi CSS tidak mampu melakukan tugas tugas yang rumit seperti memformat angka desimal, menjumlah, menghitung rata-rata, menampilkan gambar, dan lain-lain. Dan untuk melakukan tugas-tugas itulah kita memerlukan XSLT

XSLT Processor
XSLT Processor atau yang biasa disebut Parser adalah software bantu yang tugasnya menerapkan perintah-perintah dalam XSLT pada dokumen sumber XML, dan menghasilkan dokumen keluaran baik berupa HTML, Text file ataupun XML.
JavaScript
JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.
Kelebihan JavaScript
JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file html ( dengan file jJvaScript yang melekat padanya jika memang ada ) ke server yang beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.
Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user.
ajax
Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX. (Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi berbasis web seperti Gmail, Google Reader, dan lain lain. Teknik yang membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas hal ini akan kita siapkan.
Asynchronous Javascript And XML (AJAX) suatu teknik pemrograman baru dalam dunia web yang sedang digemari, karena akses data ke server yang dikirim melalui client via web dapat lebih cepat, karena AJAX tidak perlu melakukan proses loading. AJAX juga dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP, dll.

Sumber :

http://www.total.or.id
http://www.ilmukomputer.com
http://gugling.com/pengertian-javascript-dan-sejarahnya.html

Selengkapnya...