SEJARAH PERKEMBANGAN WEBSITE
Sejarah
perkembangan WEB 1.0
Web
1.0 merupakan teknologi awal dari
sebuah website, teknologi ini masih statis dimana antara pembuat website dan
penikmat website hanya tejadi komunikasi 1 arah dimana pembuat sebagai pemberi
informasi dan peikmat hanya sebagai pembaca, ya layaknya seperti membaca Koran
bedanya ini membaca lewat computer, aktifitas ini hanya sebatas
searching. Halaman pada web ini masih terkesan “hampa” bahasa yang
digunakan juga masih bahasa HTML saja.
Sejarah
perkembangan WEB 2.0
Pada
tahun 2003 atau 2004 datanglah Web 2.0 , fasilitas yang
diberikan sangat memanjakan pengguna web, kita bisa berkomunikasi 2 arah, tidak
hanya dengan webmaster namun dengna orang lain dei belahan dunia yang lain,
kita dapat membuat suatu komunitas tanpa harus bertemu secara fisik, informs
semakin mudah didapat dengan halaman web yang menarik, sehingga kita tidak
bosan dan masih banayak lagi.
Menurut
O’Reilly media, ada beberapa karakteristik dari web 2.0, yaitu : The Web as
Platform Website dalam aplikasi web 2.0 kini adalah platform, jadi kita dapat
mengerjakan semuanya dengan menggunakan media internet, biasanya kita
menggunkan media deskstop untuk mengerjakan penulisan, penghitungan maupun
presntasi namun kita dapat langsung mengrjaaknnya melalui internet jadi tidak
usah lewat windows lagi, bisa langsung dipkai tanpa harus lama menginstall.
Harnessing
Collective Intelligence Wah ini menarik, maksud dari pernyataan diatasweb
2.0 memiliki keinerja yang unik dia memanfaatkan orang tulisan orang
untuk mengisi kontennya secara kolektif, jadi udah ga jaman webmaster mengisi
sendiri konten webnya, contohnya seperti youtube.com, youtube hanya sebagai
media tetapi yang mengisi video yang ada di dalamnya ya orang lain yang inget
mempublikasi film atau video yang dinilikinya, wah ternyata begitu tho ??
Data
is the Next Intel Inside Slogan “Intel Inside” telah melambungkan nama prosesor
Intel di kalangan pengguna komputer. Trademark tersebut telah menjadi suatu
garansi kepercayaan dari pengguna akan kemampuan komputer yang akan ataupun
sudah dibelinya. Nah, hal ini juga yang dipraktekan para penyuplai data kepada
para pemilik website untuk memberikan garansi kepercayaan, jadi padaera web
2.0 data sangatlah penting dan harus di update setiap waktu.
End
of the Software Release Cycle Nah lho, para pembuat software harus merubah cara
penjualan nih, soalnya di era web 2.0 kalau mau pakai software
ga usaha capek capek menginstall, sekarang aolikasi sudah dapat digunakan
langsung, sekaran jamanya software tidak dijual “bungkusan” lagi tapi sudah jdi
layanan di internet soalnya swebsite sudah dapat menjadi platform untuk
menjalankan program, kalau dulu software keluar tiap 3 blan sekali sekarang
jamannya software keluar tiap hari alias selalu di update setiap waktu jadi
produsen yang lambat akan ketinggalan soalnya software software aplikasi sudah
jadi layanan di internet.
Lightweight Programming Models Kalau
yang ini maksudnya web 2.0 pembuatannya menggunakan bahas ayang “ringan”, jadi
suatu aplikasi bisa kita buat jadi aplikasi baru, seperti google map bisa
dibuat untuk program aplikasi HousingMap.
Sejarah
perkembangan WEB 3.0
Tadi
kita sudah dipukau oleh penampilan web 2.0 dengan lagu yang berjudul “The Web
as Platform”, “Hernessing collective intelligence”, “Data is the next intel
inside”, “End of the software release cycle”, dan “Lightweight Programming
models”, kini kita akan dipukau oleh web 3.0.
Kalau
dilihat dari sejarahnya saya bingung sebenrnya siapa yang emunculkan ide
pertama kali soalnya saya dapet informasi kalau Tim burners-lee yang pertama
kali mencetukan ide pada tahun 2001 tapi ada lagi yang mengklaim Jhon Markoff
yang pertama kali memunculkan ide pada tahun 2006, mana yang bene kita gau asah
pusing, soalnya kit age butuh siapa yang menciptakan tapi kita butuh sesuatu
yang mereka ciptakan heheheh… ( Kaya prinsip orang kita yang bajakan atau yang
asli sama – sama bisa dipakai hehehehe… ) Belum ditemukan definisi yang jelas
dariweb 3.0 ( ya yang jelas lebih baik dari 2.0 bener ga ? ), saya
mengutip beberapa karakteristik dari web 3.0 dari PC magazine
dan Sramana yaitu :
Menurut
PC magazine karakteristik dari web 3.0 adalah : Semantic Web.
Sebuah web dengan kemampuan membaca situs semudah manusia membacanya. Satu
informasi yang dibutuhkan oleh manusia dapat dengan mudah tersajikan dengan
korelasi informasi yang tepat dan cepat. The 3D Web. Nuansa Web semakin
menarik dengan adanya kemampuan visual 3D. Tanpa harus meninggalkan rumah maka
kita dapat mengunjungi berbagai tempat di dunia lain secara virtual dengan
kemampuan akses data dan interaksi secara realtime.
The Media-Centric Web. Keyword bukan lagi satu-satunya cara untuk mendapatkan informasi yang dituju. Photo, audio, video akan menjadi cara lain untuk mencari informasi yang kita inginkan. .
The Media-Centric Web. Keyword bukan lagi satu-satunya cara untuk mendapatkan informasi yang dituju. Photo, audio, video akan menjadi cara lain untuk mencari informasi yang kita inginkan. .
The
Pervasive Web. Web akan dengan mudah diakses dengan berbagai cara dan alat
berbeda. Intinya everywhere, anytime dapat akses web. Sementara kemudahan
koneksi akan semakin berkembang, berbagai alat-alat elektronika akan mendukung
upaya kemudahan koneksi internet. Maka koneksi internet tidak hanya sebatas di
kantor, kampus saja, bahkan di kereta, bis,pasar, kamar tidur dll.
Sedangakan menurut Sramana web 3.0 dapat di formulasikan sebagai berikut :
Web 3.0 = (4C + P + VS)
Sedangakan menurut Sramana web 3.0 dapat di formulasikan sebagai berikut :
Web 3.0 = (4C + P + VS)
dimana
:
4
C : Content, Commerce, Community, Context
P
: Personality
VS
: Virtual Search
Dengan
formulasi tersebut, maka Web 3.0 adalah : a personal assistant who knows
practically everything about you and can access all the information on the
Internet to answer any question.
Teknologi
web generasi ketiga ini merupakan perkembangan lebih maju dari Web 2.0 dimana
disini web seolah-olah sudah seperti kehidupan di alam nyata. Pada generasi web
3.0 sudah seperti asisten pribadi kita. Web mulai mengerti kebutuhan kita
dengan bisa memberi saran atau nasehat kita, menyediakan apa yang kita
butuhkan.
Web
ini dapat menggunakan teknologi 3D animasi, kita bisa membuat profil avatar
yang sesuai dengan karakter, kemudian melakukan aktivitas di dunia maya seperti
layaknya di dunia nyata. Kita bisa berjalan-jalan, pergi ke mall,
bercakap-cakap dengan teman yang lain. Ya, Web 3.0 adalah dunia virtual kita.
PENGERTIAN WEB STATIS dan DINAMIS
Website merupakan salah satu
fasilitas yang dapat diakses oleh jaringan internet dengan menggunakan web
browser, seperti Internet Explorer, Mozilla Firefox, Opera, Safari, dan lain
sebagainya. Website berdasarkan perubahan isi atau jenis kontennya, dapat
dibagi dua, yaitu web statis dan web dinamis.Web statis (static website),
merupakan jenis web yang kontennya berisikan informasi yang bersifat statis
atau tetap. Web statis umumnya ‘hanya’ bertujuan untuk menampilkan informasi di
internet, sehingga kontennya jarang sekali berubah. Biasanya web jenis ini
dibuat menggunakan teknologi HTML yang isinya tidak dapat dirubah kecuali bila
file web page aslinya diubah.
Halaman web statis biasanya
berisikan teks, hyperlink, yang menghubungkan halaman-halamannya, foto, dan
grafik. Contoh web statis yang sering kita temukan di internet antara lain,
website-website profil perusahaan, profil orang, atau website-website lain yang
memiliki komunikasi yang bersifat satu arah antara pemilik dengan pengunjung
website. Akibat sifatnya yang memberi informasi satu arah, tanpa adanya
interaksi dengan pengunjung website tersebut, web statis biasanya menonjolkan
tampilan yang mengandung banyak grafik. Oleh karena itu, untuk merancang sebuah
web statis, tidak terlalu membutuhkan pemrograman yang handal, cukup dengan
kemampuan desain grafik untuk membuat web terlihat menarik.
Sementara itu, web dinamis (dynamic
site) merupakan jenis web dengan konten berisikan informasi yang dapat
berubah-ubah (dinamis). Konten dalam web dinamis bisa berasal dari pengunjung
dan lebih sering di update, dibandingkan web statis yang kontennya hanya
berasal dari pemilik web dan jarang diupdate. Contoh web dinamis yang biasa
kita temui seperti, blog, portal berita, web e-commerce, situs jejaring social,
dan lain sebagainya. Web dinamis juga memungkinkan adanya interaksi antara
pemilik dengan pengunjung web, seperti berkomentar, bertransaksi, aktif di
forum, dan lain-lain.
Untuk merancang sebuah web dinamis,
dibutuhkan kemampuan di bidang pemrograman web, karena dalam web dinamis banyak
data yang harus diolah dan konten website yang berubah dalam jangka waktu
tertentu, sehingga diperlukan adanya program yang berjalan dari server untuk
mengatur perubahan data yang ditampilkan. Tidak seperti web statis yang hanya
menggunakan HTML sebagai script languagenya, web statis menggunakan bahasa
pemrograman web seperti PHP atau ASP. Selain itu, web dinamis juga menggunakan
database seperti oracle, mysql, dan lain-lain untuk memproses dan menyimpan
data, sedangkan web statis tidak membutuhkan data base karena tidak ada data
yang perlu diproses atau disimpan, sehingga dibutuhkan perancang yang
benar-benar mengerti bahasa pemrograman untuk dapat membuat sebuah web dinamis
yang menarik, terutama bagi web yang ditujukan untuk pemasaran, agar pengunjung
tertarik mengunjungi web tersebut dan melakukan transaksi.
Dalam pemrograman web, diperlukan
beberapa komponen penting yang harus ada dalam komputer, yaitu web browser, web
server, database server, web editor, dan image editor. Web browser merupakan
perangkat lunak yang harus dimiliki untuk menjalankan aplikasi web, sedangkan
web server merupakan perangkat yang harus dimiliki untuk membuat web dinamis,
seperti IIS (Internet Information Services) untuk Windows NT/XP/2000, PWS
(Personal Web Server) untuk Windows 98, dan Apache web server yang dapat
diinstall di semua operation system. Database server merupakan tempat
penyimpanan data dalam web. Web editor merupakan software yang digunakan untuk
mengetikkan perintah-perintah script yang digunakan, seperti Notepad,
Macromedia Dreamweaver, Adobe Go Live, dan NetBean. Sedangkan image editor
merupakan software yang digunakan untuk mengatur gambar dan animasi yang akan
digunakan dalam halaman web, seperti Adobe Photoshop, Macromedia Flash, dan
Correl Draw. Image editor sangat penting untuk membuat grafik yang menarik
dalam web statis, yang mengandalkan keindahan grafik.
Web sendiri secara umum dibagi menjadi dua,
berdasarkan bagaimana script diproses dan program sintaks yang digunakan, yaitu
Client Side Scripting (CSS) dan Server Side Scripting (SSS).
Untuk membuat halaman web statis,
script yang digunakan merupakan Client Side Scripting atau CSS. Client Side
Scripting merupakan jenis script di mana semua sintaks dan perintah pemrograman
diproses atau diterjemahkan di sisi client dengan menggunakan web browser. Di
dalam web browser terdapar sebuah komponen yang memiliki daftar untuk dapat
mengenali semua perintah-perintah yang terdapat pada kategori Client Side
Scripting tersebut, sehingga script dapat diterjemahkan. Contoh CSS misalnya
HTML (Hypertext Markup Language), Java Script, XML (eXtensible Markup
Language), dan CSS (Cascading Style Sheet).
Di sisi lain, Server Side Scripting merupakan
jenis script di mana semua sintaks dan perintah pemorgraman yang diberikan
diproses di server (web server). Web server ini terintegrasikan dengan sebuah
komponen atau engine yang memiliki daftar pustaka untuk menerjemahkan script
tersebut. Engine yang digunakan oleh web server tadi harus diinstall terlebih
dahulu karena setiap script yang digunakan memiliki karakteristik atau bahasa
pemrograman yang berbeda-beda. Setelah diterjemahkan di server, kemudian script
ini dikirim ke client, yaitu web browser dalam format HTML, sehingga pengguna tidak
dapat melihat kode asli yang ditulis di server. Contoh Server Side Scripting
adalah PHP, ASP (Active Server Pages), JSP (Java Server Pages), ColdFussion,
dan lain-lain. Server Side Scripting digunakan untuk membuat web dinamis,
karena beberapa kelebihan yang dimilikinya, antara lain dapat berinteraksi
dengan banyak software database, dapat mengelola sumber daya yang ada dalam
operation system dan software komputer, dan mampu dijalankan di semua operation
system (multi-platform). SSS juga aman karena scriptnya diolah oleh server,
sehingga tidak dapat dilihat dari sisi client.
PERBEDAAN WEB SATIS dan DINAMIS
1.
Interaksi
antara pengunjung dengan pemilik web
Dalam web statis tidak dimungkinkan terjadinya interaksi antara pengunjung dengan pemilik web. Sementara dalam web dinamis terdapat interaksi antara pengunjung dengan pemilik web seperti memberikan komentar, transaksi online, forum dll
Dalam web statis tidak dimungkinkan terjadinya interaksi antara pengunjung dengan pemilik web. Sementara dalam web dinamis terdapat interaksi antara pengunjung dengan pemilik web seperti memberikan komentar, transaksi online, forum dll
2.
Adanya
script language yang digunakan
Web statis hanya menggunakan HTML saja, sedangkan web dinamis menggunakan bahasa pemrograman web seperti PHP atau ASP.
Web statis hanya menggunakan HTML saja, sedangkan web dinamis menggunakan bahasa pemrograman web seperti PHP atau ASP.
3.
Penggunaan
database
Web statis tidak menggunakan database karena tidak ada data yang perlu disimpan dan diproses. Sedangkan web dinamis menggunakan database seperti mysql, oracle, dll untuk menyimpan dan memproses data.
Web statis tidak menggunakan database karena tidak ada data yang perlu disimpan dan diproses. Sedangkan web dinamis menggunakan database seperti mysql, oracle, dll untuk menyimpan dan memproses data.
4.
Content
Content dalam web statis hanya diberikan oleh pemilik web dan jarang diupdate, sementara contentdalam web dinamis bisa berasal dari pengunjung dan lebih sering diupdate. Content dalam web dinamis bisa diambil dari database sehiNgga isinya pun bisa berbeda-beda walaupun kita membuka web yang sama.
Content dalam web statis hanya diberikan oleh pemilik web dan jarang diupdate, sementara contentdalam web dinamis bisa berasal dari pengunjung dan lebih sering diupdate. Content dalam web dinamis bisa diambil dari database sehiNgga isinya pun bisa berbeda-beda walaupun kita membuka web yang sama.
5.
Contoh
Contoh web statis adalah web yang berisi profil perusahaan. Di sana hanya ada beberapa halaman saja dan contentnya hampir tidak pernah berubah karena content langsung diletakkan dalam file HTML saja.
Contoh web dinamis adalah blog, portal berita, social networking. Lihat saja isi web tersebut, isinya selalu diupdate oleh pemiliknya. Bahkan untuk social networking selalu update tiap detik
Contoh web statis adalah web yang berisi profil perusahaan. Di sana hanya ada beberapa halaman saja dan contentnya hampir tidak pernah berubah karena content langsung diletakkan dalam file HTML saja.
Contoh web dinamis adalah blog, portal berita, social networking. Lihat saja isi web tersebut, isinya selalu diupdate oleh pemiliknya. Bahkan untuk social networking selalu update tiap detik
6.
Web
statis adalah web yang isinya tidak dapat dirubah-rubah
karena tidak memiliki database sebagai tempat penyimpanan contentnya.
Sedangkan Web
dinamis adalah
sebuah web yang isinya dapat dirubah sewaktu-waktu dengan mudah tanpa harus
melakukan perubahan code-code seperti yang harus dilakukan pada web statis.
CONTOH PROGRAM WEBSITE
Adapun perintah perintah dasar dari HTML adalah sebagai berikut:
1. <H1>
sampai <H6>
<H1> </H1>font ukuran besar
<H2> </H2>
.... ....
<H6> </H6>font semakin kecil
2. <HR>
Fungsi : perintah untuk membuat garis horizontal penuh layar
cth :
3. <I>
Fungsi : membuat teks miring
4. <B>
Fungsi : membuat teks tebal
5. <U>
Fungsi : membuat teks bergaris bawah
6. <CENTER>
Fungsi : membuat text ke tengah layar
7. <ALIGN>
Fungsi : Membuat teks rata kiri dan rata kanan
Sintak
<P ALIGN=right>untuk rata kanan
<P ALIGN=left>untuk rata kiri
<P ALIGN=center>untuk rata tengah
<P ALIGN=justify>untuk rata kiri dan rata kanan
atau
<H?ALIGN=right>
<H?ALIGN=left>
<H?ALIGN=center>
<H?ALIGN=justify>
Contoh pemakaian:
<H2 Align=right>Selamat Datang Ke Website Kami <H2>
<H?ALIGN=left>
<H?ALIGN=center>
<H?ALIGN=justify>
Contoh pemakaian:
<H2 Align=right>Selamat Datang Ke Website Kami <H2>
8. <BR>
Fungsi : memasukkan fungsi enter
Cth : Jika perintah <BR> diberikan di awal atau diakhir baris, maka
kalimat berikutnya akan dicetak pada baris berikutnya
9. <!->
Fungsi : membuat komentar
Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan
10. <P>
Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain
11. <DD>
Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam
12. <BASEFONT>
Fungsi : Mengubah ukuran font
Contoh :
<BASEFONT SIZE=6>
WELCOME TO MY WEBSITE
<B>WELCOME TO MY WEBSITE DAN TEBAL</B>
13. <FONT>
Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang
merupakan ukuran font harus diberi tanda kutib
14. <FACE>
Fungsi : mengubah jenis font
15. <SUP>
Fungsi : membuat cetak naik suatu teks
Contoh :
Kami adalah yang pertama:1stin the world
16. <SUB>
Fungsi : membuat suatu teks cetak turun
Contoh :
contoh-contoh teks cetak turun :
H2O (Disebut Air) dan
C2127No (Disebut Methadon)
17. <UL>
atau Unorder List
Fungsi : membuat bullet
18. <LI>
Fungsi : juga untuk membuat bullet
Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu
Contoh :
<UL>
<LI>
<H2> Jawa Timur </H2>
<UL>
<LI> SURABAYA </LI>
<LI> MALANG </LI>
<LI> GRESIK </LI>
</UL>
</LI>
</BR>
<LI>
<H2> Jawa Barat </H2>
<UL>
<LI> Bandung </LI>
<LI> Sukabumi </LI>
<LI> Bogor </LI>
</UL>
</LI>
</UL>
19. <IMGSRC>
Fungsi : memasukkan gambar ke dalam Website
Anda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp dll
Sintak :<IMG BORDER="5">
"5" merupakan ukuran border(Bingkai), ganti angka ini sesuai
keinginan anda
20. <BGSOUND>
Fungsi : memasukkan suara atau musik ke dalam Website
Sintak : <BGSOUND loop=infite Src="d:/Selamat datang.WAV">
Contoh
1 “Memberi warna, ukuran, jenis font, dll”
<HTML>
<HEAD>
<TITLE> </TITLE>
<META Name="description"Content=" ">
<META Name="keywords"Content=" ">
<META Name="generator"Content="Cute HTML">
</HEAD>
<BODY BG Color="#FFFFFF"Text="#000000="#"0000FF"VLink="#800080">
<Center>
<A href=" "target=main on mouse over="Window.open('c:/html/keterangan.html'):">
<Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e>
</CENTER>
</BODY>
</HTML>
<HEAD>
<TITLE> </TITLE>
<META Name="description"Content=" ">
<META Name="keywords"Content=" ">
<META Name="generator"Content="Cute HTML">
</HEAD>
<BODY BG Color="#FFFFFF"Text="#000000="#"0000FF"VLink="#800080">
<Center>
<A href=" "target=main on mouse over="Window.open('c:/html/keterangan.html'):">
<Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e>
</CENTER>
</BODY>
</HTML>
Contoh
2 “Membuat Link”
Buatlah link dengan nama:
tentang_kami.html
produk_kami.html
cara_memesan.html
tentang_kami.html
produk_kami.html
cara_memesan.html
< HTML >
< HEAD >
< TITLE > </TITLE>
< META name="description"Content=" ">
< META name="keywords"Content=" ">
< META name="generator"Content="Cute HTML">
< /HEAD >
< BODY BGCOLOR="#FFFFFF"Text="#000000"Vlink="#800080" >
< Center >
< h1 > PT.OCTA >
< Input Type="button"value="Tentang Kami"
on click="parent.location="c:/website/tentang_kami.html'" >
< Input Type="button"value="Produk Kami"
on click="parent.location="c:/gambar/produk_kami.html'" >
< Input Type="button"value="cara memesan"
on click="parent.location="c:/gambar/cara_memesan.html'" >
< /Center >
< /Body >
< /HTML >
< HEAD >
< TITLE > </TITLE>
< META name="description"Content=" ">
< META name="keywords"Content=" ">
< META name="generator"Content="Cute HTML">
< /HEAD >
< BODY BGCOLOR="#FFFFFF"Text="#000000"Vlink="#800080" >
< Center >
< h1 > PT.OCTA >
< Input Type="button"value="Tentang Kami"
on click="parent.location="c:/website/tentang_kami.html'" >
< Input Type="button"value="Produk Kami"
on click="parent.location="c:/gambar/produk_kami.html'" >
< Input Type="button"value="cara memesan"
on click="parent.location="c:/gambar/cara_memesan.html'" >
< /Center >
< /Body >
< /HTML >
Contoh
3 “Membuat Kolom”
< tr > adalah perintah untuk membuat kolom
pada notepad
Berikut adalah contoh perintah cara membuat kolom pada
notepad
< html >
< head >
< title > Belajar membuat kolom < /title >
< /head >
< H3 Align="Center" > DAFTAR MAHASISWA < H3 >
< table border="3" border color="red"
< tr >
< td > No
< td > Nama
< td > Alamat
< td > No. Phone
< td > Gambar
< /tr >
< tr >
< td > 1
< td > Octa
< td > Padang Bulan
< td > 8214773
< td > < Img src="C:\Documents and Settings\XP\My Documents\My Webs\octa_pic1.JPG" >< /tr >
< html >
< head >
< title > Belajar membuat kolom < /title >
< /head >
< H3 Align="Center" > DAFTAR MAHASISWA < H3 >
< table border="3" border color="red"
< tr >
< td > No
< td > Nama
< td > Alamat
< td > No. Phone
< td > Gambar
< /tr >
< tr >
< td > 1
< td > Octa
< td > Padang Bulan
< td > 8214773
< td > < Img src="C:\Documents and Settings\XP\My Documents\My Webs\octa_pic1.JPG" >< /tr >
GAMBAR
"Be different from the other, trust yourself"
"We can change the world with Jesus"
-sifracindy-