MAKALAH TEKNOLOGI MULTIMEDIA DAN INTERNET

Tentang:

“Desain Web Statis dan Web Dinamis”

Oleh

KELOMPOK 7:

1. A. Fajri Alvi (14065014)

2. Ade Satria (14065015)

TEKNIK ELEKTRONIKA

FAKULTAS TEKNIK

UNIVERSITAS NEGERI PADANG

2016

Desain Web Statis dan Web Dinamis 1

 BAB I. PENDAHULUAN

A. Latar Belakang
World Wide Web secara luas lebih dikenal dengan istilah Web. Web
pertama kali diperkenalkan pada tahun 1992. Hal ini sebagai hasil usaha
pengembangan yang dilakukan CERN di Swiss. Internet dan web adalah dua
hal yang berbeda. Internet lebih merupakan perangkat keras, sedangkan web
adalah perangkat lunak. Selain itu, protokol yang dipakai oleh keduanya juga
berbeda. Internet menggunakan TCP/IP sebagai protokol operasionalnya,
sedangkan web menggunakan HTTP (Hyper Text Transfer Protocol). Web
disusun dari halaman-halaman yang menggunakan teknologi web dan saling
berkaitan satu sama lain. Suatu standar teknologi web saat ini sudah tersusun,
meskipun penerapannya belum didukung oleh seluruh pengembang web.
Standar ini disusun oleh suatu badan yaitu World Wide Web Consortium
(W3C). Standar ini dibutuhkan karena semakin banyaknya variasi dalam
teknologi web sehingga terkadang satu sama lain tidak kompatibel.
Halaman web dapat digolongkan menjadi web statis dan web dinamis.
Pengertian web statis dan web dinamis seringkali mengundang perdebatan.
Sebagian pengguna internet menyatakan jika pada halaman-halaman web
dilengkapi dengan animasi yang bergerak maka disebut web dinamis
sedangkan jika halaman-halaman web tersebut hanya berisi teks dan gambar
yang tidak bergerak maka disebut web statis. Namun berdasarkan kesepakatan
maka pengertian statis dan dinamis tidak ditentukan oleh ada atau tidaknya
animasi bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau
informasi yang ada pada halaman-halaman tersebut. Data dan informasi yang
ada pada web statis tidak berubah-ubah. Dokumen web yang dikirim kepada
client akan sama isinya dengan apa yang ada di web server. Sedangkan web
dinamis, memiliki data dan informasi yang berbeda-beda tergantung input apa
yang disampaikan client. Dokumen yang sampai di client akan berbeda
dengan dokumen yang ada di web server. Contoh paling mudah untuk
membedakan web statis dan web dinamis adalah bila kalian membuka situs
Google. Halaman awal adalah statis karena kita tidak melihat perubahan isi
atau informasi. Halaman ini baik di komputer client maupun di web server

Desain Web Statis dan Web Dinamis 2

 akan sama. Namun begitu kita memasukkan kata pada textbox yang tersedia
kemudian menekan tombol search maka kita sedang berinteraksi dengan web
server Google. Web server akan mengirimkan halaman web sesuai yang
diminta oleh client. Tampilan di sisi client akan berupa daftar alamat dan
keterangannya. Sedangkan di sisi server isi dokumennya adalah serangkain
kode-kode untuk mencari apa yang diinputkan client.
Untuk lebih jelasnya mengenai Web Statis dan Web Dinamis itu, secara
khusus akan dibahas di dalam makalah ini.

B. Rumusan Masalah
1. Pengertian Web Statis dan Web Dinamis?
2. Kelebihan & kekurangan Web Statis dan Web Dinamis?
3. Contoh Web Statis dan Web Dinamis?
4. Perbedaan antara Web Statis dan Web Dinamis?

C. Tujuan Penulisan
1. Mahasiswa dapat memahami pengertian Web Statis dan Web Dinamis.
2. Mahasiswa dapat menjelaskan kelebihan & kekurangan Web Statis dan
Web Dinamis tersebut.
3. Mahasiswa dapat mengetahui contoh dari Web Statis dan Dinamis itu.
4. Mahasiswa dapat menjelaskan perbedaan antara Web Statis dan Web
Dinamis itu.

Desain Web Statis dan Web Dinamis 3

 BAB II. PEMBAHASAN

A. Pengertian Web
Aplikasi web merupakan sebuah aplikasi yang mengunakan teknologi
browser untuk menjalankan aplikasi dan diakses melalui jaringan komputer
(Remick, 2011). Sedangkan menurut (Rouse, 2011) aplikasi web adalah
sebuah program yang disimpan di Server dan dikirim melalui internet dan
diakses melalui antarmuka browser.

B. Web Statis
1. Pengertian
Web Statis adalah web yang content atau isinya tidak berubah –
ubah. Maksudnya adalah isi dari dokumen yang ada di web tersebut tidak
dapat diubah secara mudah. Ini dikarenakan karena script yang digunakan
untuk membuat web statis tidak mendukung untuk mengubah isi dokumen.
Web semacam ini hanya menggunakan bahasa program HTML. Sehingga
dalam sistem web ini tidak bisa mengolah data yang dapat berubah-ubah.
Karena script yang digunakan untuk membuat web statis ini seperti
HTML dan Cascading Style Sheet atau biasa disebut dengan CSS, maka
dari itu untuk perubahan isi dokumen pada web statis harus mengubah isi
file HTML atau CSS tersebut. Tentunya bagi orang awam atau orang yang
tidak mengerti soal program atau script HTML dan CSS akan sangat sulit
sekali dilakukan. Untuk itu jika kita ingin mengubah dokumen web statis
harus mengerti benar script HTML atau CSS atau sering disebut
programmer yang dapat melakukan perubahan isi dokumen sebuah web
statis. Web statis ini biasanya digunakan oleh website yang menggunakan
HTML, Web Search Engine, atau web Company Profile.
2. HTML dan Cascading Style Sheet (CSS)
Menurut Firdaus (2007:1) Hypertext Markup Language (HTML)
merupakan salah satu pemrograman web yang bersifat statis. HTML ini
lebih berfungsi untuk mengatur struktur tampilan web, membuat suatu
“Link” atau sambungan ke lokasi di internet yang lain dan aplikasi agar
bisa berjalan di halaman web browser yang disimpan dalam bentuk .html

Desain Web Statis dan Web Dinamis 4

 (bagi Sistem Operasi LINUX, UNIX, Macintosh dan Windows 95) dan
.htm (bagi Windows 3.1). Bagaimana cara HTML bekerja? Untuk
mengetahuinya, harus terlebih dahulu mengetahui tentang ada yang
disebut HTTP. HTTP merupakan protokol yang digunakan untuk
mentransfer data atau dokumen antara web server ke web browser.
Selanjutnya sewaktu protokol tersebut melakukan transfer dokumen, data
webnya ditulis atau menggunakan format HTML. HTML disebut juga
dengan markup language karena HTML berfungsi untuk memperindah file
tulisan (text) biasa untuk dapat dilihat pada web browser yang ada.
CSS merupakan kependekan Cascading Style Sheet yang berfungsi
untuk mengatur tampilan dengan kemampuan jauh lebih baik dari tag
maupun atribut standar HTML. CSS sebenarnya adalah suatu kumpulan
atribut untuk fungsi format tampilan dan dapat digunakan untuk
mengontrol tampilan banyak dokumen secara bersamaan. Keuntungan
menggunakan CSS yaitu jika ingin mengubah dokumen, maka tidak perlu
mengubah satu persatu. Penggunaan CSS ada dua cara yaitu dengan
menyisipkan kode CSS langsung dalam kode HTML atau simpan menjadi
file tersendiri berekstensi *.css. Dengan meyimpan sebagai file tersendiri
akan memudahkan untuk mengontrol tampilan dalam banyak dokumen
secara langsung. CSS mendapat dukungan penuh pada browser versi 4 dan
pada versi sebelumnya, hanya Internet Explorer yang masih mampu
mengenal CSS. Tampilan CSS dapat berbeda jika ditampilkan pada menu
browser yang berbeda (Diar Puji Oktavian, 2010).
3. Perangkat Utilitas Web Statis
Ada tiga jenis perangkat utilitas yang biasa digunakan dalam
pengaturan situs web statis:
 Editor teks merupakan perangkat utilitas yang digunakan untuk
menyunting berkas halaman web, misalnya: Notepad atau TextEdit.
 Editor WYSIWYG, merupakan perangkat lunak utilitas penyunting
halaman web yang dilengkapi dengan antar muka grafis dalam
perancangan serta pendisainannya, berkas halaman web umumnya
tidak disunting secara lengsung oleh pengguna melainkan utilitas ini

Desain Web Statis dan Web Dinamis 5

 akan membuatnya secara otomatis berbasis dari laman kerja yang
dibuat oleh pengguna. perangkat lunak ini misalnya: Microsoft
Frontpage, Macromedia Dreamweaver.
 Editor berbasis template, beberapa utilitas tertentu seperti Rapidweaver
dan iWeb, pengguna dapat dengan mudah membuat sebuah situs web
tanpa harus mengetahui bahasa HTML, melainkan menyunting
halaman web seperti halnya halaman biasa, pengguna dapat
memilih template yang akan digunakan oleh utilitas ini untuk
menyunting berkas yang dibuat pengguna dan menjadikannya halaman
web secara otomatis.
4. Desain Web Statis
Web statis masih dapat dibagi dalam tiga kategori desain yang
berbeda yaitu :
a. Full desain standar HTML
Umumnya formatnya lebih statis, kalaupun ada sedikit efek
animasi biasanya dilakukan hanya untuk beberapa bagian tertentu
seperti menu atau foto gallery. Umumnya web dalam format desain ini
lebih ringan dan cepat dibuka dan bila dibutuhkan dapat dirubah
sewaktu-waktu (dengan catatan yang melakukan perubahan harus
memahami coding dan perintah-perintah HTML).
b. Full desain animatif dengan menggunakan Flash
Biasanya web dalam format ini tampil lebih menarik, namun juga
sangat berat dan lambat untuk dibuka, pengunjung harus memiliki
koneksi yang cukup baik untuk dapat membuka website jenis ini.
Masalahnya adalah ketika isi sebuah web jenis ini perlu diupdate maka
script Flash harus diperbaiki dan di compile ulang yang kemudian
hasilnya diletakkan kembali ke dalam website.
c. Kombinasi desain HTML dengan Flash
Solusi terbaik untuk desain jenis statis adalah dengan
menggabungkan desain standar HTML dengan teknologi desain Flash
di bagian tertentu untuk memberikan efek “dinamis”. Biasanya animasi
Flash digunakan untuk Heading / Header maupun banner.

Desain Web Statis dan Web Dinamis 6

 5. Kelebihan dan Kekurangan Web Statis
Kelebihan Web Statis
 Cepat dan mudah dalam pengaksesan bahkan oleh orang yang tidak
punya pengalaman
 Ideal untuk menunjukkan cara kerja sebuah situs
 Cukup satu salinan untuk semua orang
Kekurangan Web Statis
 Susah dikelola jika situs semakin besar
 Sulit untuk up to date
 Kesulitan untuk personalisasi pengunjung
6. Contoh Web Statis
Contoh dari web statis adalah web yang berisi profil perusahaan.
Di sana hanya ada beberapa halaman saja dan kontennya hampir tidak
pernah berubah karena konten langsung diletakan dalam file HTML saja.

Contoh web statis. PT.Chevron Indonesia

C. Web Dinamis
1. Pengertian
Web Dinamis adalah Web yang content atau isinya dapat berubah-
ubah setiap saat. Karena dalam teknologi pembuatan web dinamis sudah

Desain Web Statis dan Web Dinamis 7

 dirancang dengan menggunakan teknologi atau bahasa program yang
memungkinkan untuk merubah isi atau data pada suatu aplikasi web.
2. Ciri-Ciri Web Dinamis
 Dimungkinkan terjadi interaksi antara pengunjung dengan pemilik
web. Karena pada web dinamis dimungkinkan pengguna dapat
melakukan pemrosesan data. Misalnya pemberian komentar, transaksi,
dan melakukan komunikasi.
 Bahasa program yang memungkinkan digunakan diantarnya HTML,
CSS, PHP, dan Java Script.
 Pada sistem web yang dinamis membutuhkan database untuk proses
penyimpanan data.
 Sistem web yang dinamis memiliki konten atau isi data yang dapat
berubah-ubah. Karena pengguna dari web ini memungkinkan
melakukan pemrosesan data misalnya penyimpanan, penghapusan dan
pengubahan data.
3. Kelebihan dan Kekurangan Web Dinamis
Kelebihan web dinamis
Suatu sistem tentunya memiliki suatu kelebihan dan kelemahan yang
berada pada sistem tersebut. Dalam sub bab ini kita akan mempelajari
kelebihan yang dimiliki oleh web yang dinamis.
1) Memberikan fasilitas komunikasi antar pengunjung dengan admin atau
pemilik web. Hal tersebut membuat komunikasi menjadi lebih
responsif dan lebih interaktif pada sisi pengguna.
2) Membuat pengunjung atau visitor tidak merasa bosan. Karena
pengguna dapat mengakses data dimungkinkan setiap saat dapat
berubah.
3) Memiliki fasilitas untuk membackup data. Karena pada sistem web
yang dinamis menggunakan sistem database yang digunakan untuk
proses penyimpanan data.
4) Menggunakan bahasa program dengan teknologi terkini. Sehingga
pemrosesan data menjadi lebih cepat.
Kekurangan web dinamis

Desain Web Statis dan Web Dinamis 8

 Sistem web yang dinamis selain memiliki kelebihan, web dinamis juga
mempunyai kekurangan. Kekurangan itu diantaranya.
1) Apabila orang yang membuat program tidak memberikan sistem
validasi, maka dimungkinkan terjadi kesalahan data (kerangkapan dan
format data).
2) Apabila sistem keamanan web tidak maksimal, dimungkinkan sistem
web akan dimasuki oleh penyusup.
3) Membutuhkan ruang penyimpanan yang besar. Apabila data atau file
yang diunggah oleh pengguna mempunyai ukuran yang besar.
4. Komponen Web Dinamis
Aplikasi web yang dibuat harusnya memiliki komponen atau
bagian-bagian yang harus ada didalam aplikasi web tersebut. Sehingga
aplikasi web yang telah dibuat mempunyai performa yang optimal.
a. Bahasa Program
Bahasa program atau kode program yang digunakan untuk membuat
aplikasi web terbagi menjadi 2 yaitu:
- Client Side Scripting, merupakan suatu kode program yang
ditujukan untuk membuat dan memperbagus tampilan fisik dari
aplikasi web. Dimana tampilan ini akan dilihat langsung oleh
pengguna. Contoh : HTML, HTML5, Casading Style Sheet (CSS),
JavaScript, jQuery.
- Server Side Scripting, Merupakan suatu bahasa program yang
digunakan untuk memproses data yang dikirim dari Client Side
Script. Dimana pemrosesan tersebut meliputi simpan, hapus dan
ubah data.
Contoh : PHP, Java Server Pages (JSP).
b. Web Editor
Komponen berikut ini merupakan suatu komponen yang digunakan
oleh pembuat aplikasi web untuk menuliskan atau mengubah kode
program dalam pembuatan aplikasi web. Contohnya: Dreamweaver,
Notepad ++, dsb.
c. Web Browser

Desain Web Statis dan Web Dinamis 9

 Web browser merupakan suatu aplikasi atau software yang digunakan
untuk mengakses suatu halaman website. Sehingga komponen ini
berada pada sisi pengguna ataupun visitor.
d. Web Server
Aplikasi web tentunya membutuhkan suatu ruang penyimpanan untuk
menyimpan file-file pendukung dari aplikasi web. Sehingga aplikasi
web membutuhkan web server untuk menyimpan file-file tersebut.
Adapun contoh: aplikasi untuk membuat web server adalah apache.
e. Database Server
Pada aplikasi web terjadi pemrosesan data yang salah satunya
penyimpanan data. Sehingga aplikasi web membutuhkan ruang untuk
menyimpan data tersebut. Aplikasi yang dapat digunakan untuk
menyimpan data pada aplikasi web salah satunya yaitu mysql.
f. Image Editor
Image editor adalah program aplikasi yang berfungsi untuk melakukan
pengolahan gambar/image. Biasanya gambar dibutuhkan di halaman
web untuk mempercantik halaman web. Jika ada animasi berarti harus
ada program pengolah animasi juga. Contoh : Microsoft Paint, Adobe
Photoshop, Corel Draw, dll.
5. Contoh Web Dinamis
Saat ini terdapat banyak sekali sistem informasi berbasis web. Oleh karena
itu kita harus mengetahui perkembangan web. Berikut contoh web
dinamis: okezone.com, olx.com, lazada.co.id

Desain Web Statis dan Web Dinamis 10

D. Perbedaan Web Statis dan Web Dinamis
1) Interaksi Pengunjung Website
Dalam website statis, pengunjung atau visitor website hanya dapat
mengakses dan menikmati konten yang ada di dalam website tersebut.
Website statis hanya berisi satu atau beberapa halaman yang berisi tulisan
dan gambar. Website statis kurang interaktif.
Sedangkan dalam website dinamis pengunjung dapat melakukan beragam
hal. Seperti mengkostumisasi atau mengubah isi atau tampilan website
sesuai keinginan. Pengguna juga bisa melakukan login dalam website
tersebut. Website dinamis sangat interaktif.
2) Perubahan Situs
Website statis lebih sulit diubah. Apalagi kalau diubah secara keseluruhan.
Pemilik website harus mengubah setiap halaman website.
Sedangkan website dinamis lebih mudah diubah walaupun perubahan
dilakukan terhadap ratusan halaman dalam website tersebut.
3) Penggunaan
Website statis biasanya digunakan dalam situs penjualan yang hanya
menjual satu produk. Biasanya hanya berisi sales letter dan nomor telepon
yang bisa dihubungi. Selain itu, website yang belum selesai (under
construction) juga berbentuk website statis. Profil perusahaan juga
biasanya berbentuk website statis.
Sedangkan website dinamis digunakan dalam beragam fungsi. Seperti
situs jejaring sosial, toko online, blog, portal berita, situs pencarian, dll.
Pengunjung website tentu bisa melakukan lebih banyak hal dalam website
dinamis seperti mengisi komentar, login, mencari sesuatu, belanja,
kostumisasi, dan masih banyak lagi.
4) Pembuatan Awal
Proses pembuatan website statis sangatlah mudah dan memakan waktu
yang relatif singkat. Karena hanya menggunakan bahasa pemrograman
yang sangat sederhana. Kecuali jika pemilik website hendak membuat
banyak halaman.

Desain Web Statis dan Web Dinamis 11

 Sedangkan proses pembuatan website dinamis jika dimulai dari nol
sangatlah rumit dan membutuhkan keahlian khusus. Waktu yang
diperlukan bisa satu bulan bahkan lebih. Namun, saat ini sudah terdapat
banyak template yang bisa Anda gunakan dalam website Anda. Jadi, Anda
tidak perlu membuat website dinamis dari nol.
5) Bahasa Pemrograman
Bahasa pemrograman yang digunakan oleh website statis adalah HTML
dan CSS.
Sedangkan bahasa pemrograman yang digunakan oleh website dinamis
adalah HTML, ASP, JavaScript, CSS, dan PHP.
6) Ukuran
Ukuran website statis relatif sangat kecil sehingga dapat diakses dengan
cepat. Itu karena website statis tidak menggunakan bahasa pemrograman
yang rumit.
Sedangkan ukuran website dinamis cenderung besar karena harus memuat
beragam jenis bahasa pemrograman. Sehingga waktu pemuatan atau
loading bisa lebih lama.
7) Interaksi Pemilik Website
Orang yang membuat website statis biasanya untuk penggunaan jangka
panjang karena tidak akan diubah dalam waktu yang cukup lama.
Sehingga mereka cukup membuat website dengan bahasa pemrograman
sederhana karena lebih menghemat uang.
Sedangkan orang yang membuat website dinamis biasanya untuk tujuan
komersial atau tujuan pribadi. Mereka membuat website dinamis karena isi
dan konten dalam website dapat diubah atau ditambah sewaktu-waktu.
8) Desain
Desain website statis sangatlah sederhana karena hanya menggunakan
bahasa pemrograman HTML dan CSS sehingga variasi desain yang
tersedia sangatlah terbatas. Desain website statis cenderung klasik seperti
website-website pada jaman dahulu.
Sedangkan desain website dinamis cenderung lebih modern dan elegan.
Animasi-animasi yang ditambahkan membuat tampilan website menjadi

Desain Web Statis dan Web Dinamis 12

 lebih menarik. Namun semua itu bergantung pada keahlian pemilik
website dalam mendesain sebuah website.
9) Isi Konten
Isi konten pada website statis sangat jarang dirubah. Sedangkan isi konten
pada website dinamis selalu diperbarui dan selalu ditambah sesuai
keinginan pemilik website atau bahkan pengguna website.
10) Penggunaan Database
Website statis tidak menggunakan database karena tidak perlu menyimpan
data atau memproses data.
Sedangkan dalam website dinamis sangatlah diperlukan. Biasanya mereka
menggunakan database seperti MySQL, Oracle, dll.

BAB III. PENUTUP

A. Kesimpulan
Web Statis adalah web yang content atau isinya tidak berubah – ubah.
Maksudnya adalah isi dari dokumen yang ada di web tersebut tidak dapat
diubah secara mudah karena web ini hanya menggunakan bahasa program
HTML. Contoh dari web statis adalah web yang berisi profil perusahaan.
Web Dinamis adalah Web yang content atau isinya dapat berubah-ubah
setiap saat. Contoh dari web dinamis antara lain: okezone.com, olx.com,
lazada.co.id.
Perbedaan antara Web Statis dan Web Dinamis itu bisa dilihat dari 10 hal,
antara lain: interaksi pengunjung website, perubahan situs, penggunaan,
pembuatan awal, bahasa pemrograman, ukuran, interaksi pemilik website,
desain, isi konten, dan penggunaan database.
B. Saran
1) Diharapkan kepada Dosen agar bisa mengarahkan mahasiswanya lebih
lanjut mengenai materi makalah ini agar tercapainya tujuan pembelajaran
yang diharapkan.
2) Diharapkan kepada Mahasiswa/i agar nantinya dapat mengambil manfaat
dari makalah ini.

Desain Web Statis dan Web Dinamis 13

 DAFTAR PUSTAKA

Arief, Rudyanto. 2011. Pemrograman Web Dinamis menggunakan PHP dan

MySQL.Yogyakarta: Andi.
Hartanto, Budi. tt. Modul Desain Web II.
http://www.budihartanto.com/file/dweb2/Bab1.pdf. (diakses 16 Maret 2016).
http://htmlproc.blogspot.co.id/2013/04/pemprograman-web-statis-dan-
dinamis.html (diakses 16 Maret 2016)
http://sir.stikom.edu/664/6/BAB%20III.pdf (diakses 17 Maret 2016)

Desain Web Statis dan Web Dinamis 14