web modul 2

MODUL WEBSITE
SMK DHARMA PARAMITHA

JAKARTA

Abstract

Apa itu Website?
Website dapat diartikan sebagai suatu kumpulan-kumpulan halaman yang
menampilkan berbagai macam informasi teks, data, gambar diam ataupun
bergerak, data animasi, suara, video maupun gabungan dari semuanya, baik

itu yang bersifat statis maupun yang dinamis

[email protected]

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Website

Kompentensi Dasar:
3.2 Mengevaluasi Website (C5)
4.1 Merancang Website (C6)
Indikator Capaian Kompetesi (ICK):
Peserta didik telah mampu:
3.2.1 Merancang Jenis-jenis Website (C6)
3.2.2 Mengkombinasikan Vareasi vitur website (C6)
4.2.1 Merancang pembuatan website (C6)

1

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Pengertian Website

Website dapat diartikan sebagai suatu

kumpulan-kumpulan halaman yang

menampilkan berbagai macam informasi teks,

data, gambar diam ataupun bergerak, data

animasi, suara, video maupun gabungan dari

semuanya, baik itu yang bersifat statis

maupun yang dinamis, dimana membentuk

satu rangkaian bangunan yang saling

berkaitan dimana masing-masing

dihubungkan dengan jaringan halaman atau

hyperlink.

Definisi secara umum, website adalah
kumpulan dari berbagai macam halaman
situs yang terangkum di dalam sebuah domain atau subdomain, yang berada di dalam
WWW (World Wide Web) dan tentunya terdapat di dalam Internet. Halaman website
biasanya berupa dokumen yang ditulis dalam format Hyper Text Markup Language (HTML).

Jenis-jenis website

Berdasarkan penampilan dan respon ketika diakses, website dapat digolongkan ke dalam
dua jenis utama yaitu static website dan dynamic website.

1. Static Website

Static website pada umumnya merupakan informasi yang disimpan di dalam server dengan
format tertentu dan nantinya akan tampil secara identik untuk semua pengguna. Website
jenis ini umumnya dikembangkan dengan menggunakan bahasa pemrograman HTML
ataupun Cascading Style Sheets (CSS).

Pada umumnya static website ini akan menampilkan bentuk yang sama ketika Anda
mengunjunginya. Meskipun pengelola website melalukan pembaharuan informasi, biasanya
penampilan yang muncul pada saat kita mengakses website tipe ini tetap sama. Jika
pengelola ingin mengubah penampilan dari website ini, maka pengelola harus
mengubahnya melalui kode-kode program yang tentunya menuntut pengelola untuk
memahami prinsip-prinsip pemrograman sebuah website.

2. Dynamic Website

Berbeda dengan static website, dynamic website mempunyai kemampuan untuk
menyesuaikan dirinya sesuai dengan keadaan saat pengguna mengakses website tersebut
dengan memanfaatkan database. Jika pada static website kebanyakan diatur
menggunakan HTML dan CSS, maka pada dynamic website ini penampilannya juga diatur
menggunakan bahasa pemrograman seperti Perl, PHP, Javascript, Phyton dan dan lain
sebagainya. Dengan begitu, pengembang website bisa membuat halaman dengan konsep
visual dan kemampuan interaksi tinggi dengan penggunanya. Beberapa fitur yang biasanya
terdapat pada dynamic website adalah cookies, fasilitas live chatting, kolom komentar, form
registrasi dan lain sebagainya.

2

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Merencanakan website

Panduan Desain Web dalam 15 Langkah

Kesalahan yang kerap dilakukan ketika membuat desain web adalah langsung masuk ke
pengerjaan desain. Cara ini tidaklah efektif. Bayangkan, jika desain yang telah dikerjakan
ternyata tidak sesuai yang diinginkan, tentu Anda harus mengulangnya dari awal, bukan?
Oleh karena itu, persiapan dalam proses desain web mutlak dilakukan. Mari mulai dari
langkah pertama.

1. Menentukan Tujuan
Mengutip pernyataan Steve Jobs, mantan bos Apple, bahwa “Design is not about what it
looks like and feels like. Design is about how it works”.
Singkatnya, sebuah desain yang tidak berjalan sesuai dengan tujuan pembuatannya,
bukanlah desain yang baik.
Hal tersebut berlaku juga untuk desain web. Berbagai jenis website yang ada membutuhkan
pendekatan desain berbeda. Maka, tentukan dahulu tujuan pengerjaan desain website yang
akan Anda lakukan. Katakanlah Anda ingin membangun sebuah toko online. Fokus pada
toko online adalah bagaimana menampilkan produk dengan baik. Selain itu, desain yang
dibuat harus mampu menjelaskan alur pembelian yang mudah dipahami. Tak kalah
pentingnya, menciptakan sebuah landing page toko online yang menarik bagi pengunjung.
Desain sebuah website juga akan dipengaruhi oleh target pasar dari bisnis yang Anda miliki.
Sebab, kriteria target pasar seperti usia dan jenis kelamin akan menentukan elemen desain
yang digunakan.

2. Menentukan Platform

Anda harus cermat dalam menentukan platform untuk website Anda. Hal ini akan
berdampak pada pengembangan website Anda untuk jangka panjang, baik dari sisi desain
atau fungsinya.
Secara umum, terdapat tiga metode dalam pembuatan website: dengan coding HTML dan
CSS, menggunakan website builder, dan memanfaatkan CMS (Content Management
System).
Bagi pemula, memilih website builder atau CMS merupakan pilihan yang tepat. Terutama,
jika Anda menggunakan WordPress hosting. Platform tersebut sangat andal dan telah
digunakan oleh lebih dari 34% website di seluruh dunia.

3. Mengamati Tren Desain Web Terbaru

Anda tak ingin desain web Anda terlihat ketinggalan zaman, kan? Hal itu akan kurang
menarik bagi pengunjung. Untuk itu, mengetahui tren terbaru sangatlah penting.
Misalnya, tren desain saat ini secara umum mengarah ke desain simple dan minimalis (flat
design).
Tren tersebut menggantikan booming desain menyerupai wujud asli
(skeuomorphic) beberapa tahun sebelumnya. Sebagai informasi, desain menyerupai asli
dibuat untuk “membimbing” transformasi dari analog ke digital. Saat ini, masyarakat sudah
lebih akrab dengan dunia digital sehingga pendekatan desain skeuomorphic sudah tidak
menjadi keharusan.

3

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Contoh desain Skeuomorphic dari www.dtelepathy.com
Untuk desain web sendiri, terdapat berbagai prediksi tentang tren yang akan muncul. Mulai
dari gradasi dinamis, animasi, hingga transisi antar halaman yang kreatif.
Anda tentu tidak harus mengikuti semua tren ini. Setidaknya, Anda memahami tren desain
web manakah yang mulai digandrungi pengguna internet. Lalu, menggunakan informasi
tersebut untuk menciptakan pola desain yang sesuai dengan bisnis dan jenis pelanggan
yang Anda miliki.
4. Mempelajari Desain Website Kompetitor
Sangat penting untuk melakukan riset terhadap kompetitor Anda.
Idealnya, website Anda harus mampu tampil lebih baik. Caranya, Anda bisa mempelajari
dulu berbagai elemen dan pendekatan yang digunakan oleh kompetitor untuk menarik
pelanggannya. Penting untuk diingat bahwa 48% dari pengunjung menganggap desain
website sebagai faktor yang menunjukkan kredibilitas suatu perusahaan. Sebagai contoh,
jika Anda memiliki bisnis akomodasi, kenyamanan adalah selling point bisnis Anda. Anda
bisa mempelajari pola warna yang digunakan oleh kompetitor Anda untuk menawarkan
nuansa tersebut. Sebab, tiap warna mengandung aspek psikologi yang berbeda.
Faktanya, beberapa website akomodasi besar di Indonesia seperti Traveloka, Booking,
ataupun Agoda juga menggunakan warna dominan yang sama di website mereka: biru.
Setelah semua tahapan persiapan di atas, saatnya masuk ke bagian pengerjaan desain
web. Dengan mengikuti langkah berikut ini dengan baik, Anda akan dapat membuat website
yang user-friendly.

5. Merancang Layout
Layout adalah teknik penyusunan elemen website agar tampak menarik. Beberapa elemen
website antara lain header, konten, footer.
Pengerjaan layout harus diutamakan sebelum melangkah ke langkah desain yang lain.
Dalam tahapan ini, seorang desainer akan membuat draft desain. Terdapat tiga jenis draft
desain yang bisa dibuat yaitu wireframe, mockup, dan prototype. Yang paling sederhana
adalah wireframe.

4

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Ada banyak sekali tools online yang bisa Anda manfaatkan untuk membuat wireframe, salah
satunya adalah wireframe.cc

6. Memperhatikan Hirarki Visual

Desain berfungsi untuk mengkomunikasikan pesan. Hirarki visual bisa membantu Anda
melakukan hal itu. Hirarki visual adalah suatu metode yang mengarahkan pengunjung
website untuk menemukan informasi penting terlebih dahulu. Caranya, dengan melakukan
manipulasi elemen desain sehingga menonjolkan elemen tertentu.
Dengan hirarki visual, Anda bisa membuat tiap pengunjung menemukan informasi penting
dalam waktu singkat.

7. Berikan Ruang Kosong

Salah satu kesalahan dalam perencanaan desain web adalah memasukkan semua elemen
karena dianggap penting. Hal ini justru akan membuat website Anda terlihat “sesak”.
Langkah terbaik adalah selalu memberikan ruang kosong/white space. Tujuannya, selain
menciptakan kesan elegan dan jeda visual, ruang kosong ini dapat membantu elemen
penting seperti CTA (Call to Action) terlihat menonjol.

8. Merancang Navigasi

Jangan pernah melupakan penataan navigasi dalam website Anda. Jika pengunjung tidak
dapat menemukan apa yang mereka cari, mereka akan mudah meninggalkan website
Anda.
Oleh karena itu, buatlah navigasi antar halaman menggunakan menu yang sederhana dan
mudah dipahami. Hal ini karena tiap pengunjung akan menikmati pengalaman yang berbeda
saat mengakses website Anda.
Contoh, ada pengunjung yang masuk melalui halaman depan dan langsung ingin
mengetahui harga produk Anda. Ada pengunjung yang hanya ingin mengetahui beragam
fitur yang Anda tawarkan. Bahkan mungkin ada yang ingin mengetahui profil bisnis Anda.

9. Mengatur Grid

Grid adalah penataan struktur halaman menjadi beberapa kolom. Tujuannya tentu saja
untuk mengatur konten website tersebut nantinya.
Walaupun kasat mata, penggunaan grid akan banyak membantu proses desain web Anda.
Salah satunya untuk menciptakan keseimbangan antar elemen website Anda. Dan yang
terpenting, grid membantu website Anda untuk mampu beradaptasi dengan berbagai
ukuran layar perangkat.
Dengan kata lain, mengatur grid penting untuk membuat website Anda mobile-friendly.

10. Pemilihan Warna
Setelah mengatur elemen website Anda, langkah berikutnya adalah memilih warna yang
tepat. Seperti telah kita singgung di atas, warna memiliki peran penting dalam sebuah
website. Warna yang Anda gunakan akan mencerminkan nuansa yang Anda bangun.
Sebagai contoh, warna biru bersifat menenangkan sehingga tak heran bisnis akomodasi
menggunakan warna ini. Tak hanya itu, warna juga turut menentukan target pasar yang
ingin Anda sasar. Jika website Anda didominasi warna pink, tentu pasar yang Anda tuju
adalah konsumen wanita.

5

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Apabila Anda ingin menjual berbagai produk bayi/anak, maka gunakanlah warna pastel
yang bersifat lembut dan santai seperti contoh di atas.
11. Pemilihan Font
Tipografi adalah seni tata letak dan pemilihan huruf. Dalam desain web, tipografi berperan
untuk menciptakan harmonisasi tata letak yang sudah Anda rancang. Hasilnya, tampilan
website Anda secara keseluruhan akan tampak menarik.
Selain itu, tipografi yang pas akan membuat informasi yang ingin Anda sampaikan akan
didapatkan dengan mudah. Kuncinya, memilih huruf yang mudah dibaca dengan ukuran
yang proporsional dan jarak antar huruf yang cukup.
Tiap elemen dari website membutuhkan jenis huruf yang berbeda terkait pesan yang ingin
disampaikan. Idealnya, Anda bisa menggunakan dua hingga tiga jenis font.
Gunakanlah jenis yang berbeda masing-masing untuk heading, konten dan elemen website
yang lain.
Tidak hanya itu, tipografi juga terkait dengan keperluan branding, sebagai upaya
membangun identitas bisnis Anda. Tak salah jika, CEO Uber, menandai perubahan
mendasar pada perusahaannya dengan penggunaan font baru untuk bisnisnya.

12. Gunakan Gambar Terbaik
Seperti Anda ketahui, sebuah gambar mengandung sejuta makna. Jika Anda
menambahkan berbagai gambar baik foto maupun background untuk website Anda,
pastikan memilih gambar terbaik yang representatif dengan tujuan bisnis Anda. Selain
warna yang sesuai, penempatan gambar juga harus Anda perhatikan. Harmonisasikan
dengan berbagai elemen lain. Misalnya jangan sampai foto dengan wajah seseorang
tertutup oleh judul. Penting untuk diingat, jangan menggunakan foto orang lain tanpa izin.
Selain itu, jangan menggunakan resolusi yang terlalu kecil. Apabila menginginkan kualitas
gambar yang baik, namun dengan ukuran yang relatif kecil, Anda bisa menggunakan file
SVG. Sebelumnya, pastikan dukungan SVG di WordPress sudah aktif.
Jika Anda menginginkan kualitas gambar tetap baik walaupun ukuran file kecil, Anda bisa
menggunakan tools seperti TinyPNG atau Tiny JPG.

6

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

13. Membuat Prototype

Prototype adalah contoh nyata desain website Anda. Berbeda dengan wireframing yang
hanya menghasilkan draft sederhana, prototyping bersifat interaktif. Artinya, semua aset
website berupa gambar atau video, penerapan animasi dan struktur website ditampilkan
secara detail.
Jika Anda telah memiliki sebuah prototype, Anda bisa menunjukkannya kepada tim atau
klien Anda dalam sebuah demo. Hal ini penting jika ada yang ingin ditambahkan sebelum
beranjak ke proses produksi. Untuk langkah ini, Anda bisa memanfaatkan aplikasi seperti
Figma dan lainnya.
Pada dasarnya, ketika Anda sudah berhasil membuat prototype, pekerjaan desain web
Anda bisa dikatakan hampir sempurna. Namun, sebelum benar-benar melakukan launching
website, penyempurnaan desain website perlu dilakukan.

14. Melakukan Pengujian

Tahapan pengujian penting untuk memastikan semua tampilan dan fungsi berjalan dengan
baik. Kuncinya, jangan melewatkan satu halaman atau elemen pun dalam proses ini.
Jika menemukan bug atau kesalahan coding, Anda bisa segera memperbaikinya. Untuk
hasil terbaik, Anda juga bisa melakukan beberapa kali pengujian dengan melibatkan orang
yang berbeda.
Selain itu, Anda juga perlu mencatat bagaimana performa yang diberikan website tersebut
selama tahapan pengujian.
Walaupun tampilan website menarik, jika proses loading terlalu lama, akan berdampak
buruk bagi Anda. Faktanya, 47% pengunjung menginginkan proses loading tidak lebih dari
2 detik saja. Bahkan, Google sudah menentukan bahwa kecepatan loading adalah faktor
yang mempengaruhi ranking di mesin pencari mereka.
Website yang lambat bisa terkait dengan penggunaan gambar yang tidak teroptimasi,
banyaknya animasi yang digunakan, dan lainnya. Untungnya, banyak cara
untuk meningkatkan kecepatan website Anda dengan mudah.

15. Launch Website
Setelah semua tahapan di atas berjalan sesuai rencana, Anda telah siap mempublikasikan
website tersebut.
Tentu saja Anda tidak bisa berharap bahwa desain website yang Anda lakukan sudah 100%
sempurna. Namun, dengan langkah yang tepat, jika terjadi kendala penanganan dapat
segera dilakukan.

Membuat website

a. Blogger (Blogspot)

Sekilas tentang Blogger (Blogspot)

Blogger merupakan platform blogging yang tersedia secara gratis. Platform ini dirilis
pertama pada tahun 1999 oleh Pyra Labs. Empat tahun kemudian atau pada 2003, Blogger
kemudian diakuisisi oleh Google. Hal yang kemudian menjelaskan mengapa platform blog
ini bisa terintegrasi dengan Adsense, Adwords, dan Google Analytics.
Tak cuma integrasi layanan yang membuat Blogger banyak dipakai. Berikut adalah alasan
mengapa membuat blog di blogspot jadi pilihan tepat:

7

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Akun Terintegrasi
Blogger merupakan layanan yang dibuat terintegrasi dengan Google. Sehingga, Anda tak
perlu ribet-ribet ketika membuat blog di blogger. Anda hanya tinggal melakukan sign-in
otomatis dengan akun Gmail yang dipunyai.
Dengan Blogspot, Anda juga tak perlu membayar biaya hosting atau tempat penyimpanan
file. Untuk web hosting, blog Anda akan otomatis mendapatkan
subdomain .blogspot.com. Lalu untuk memori penyimpanan, Google juga menyediakan
kapasitas 15GB.

Tampilan
Secara default, tak banyak opsi tampilan yang disediakan oleh Blogger. Meski di satu sisi
dianggap sebagai kelemahan, Anda malah bisa menganggapnya sebagai sebuah
kepraktisan.
Dengan opsi yang ramping, Anda takkan kebingungan ketika harus memilih tampilan blog.
Malah, Anda bisa fokus untuk mengurus hal-hal yang lebih penting. Konten, misalnya.
Toh semisal butuh tampilan unik, ada banyak sekali tema Blogger yang tersedia di internet.
Anda tinggal download mana yang menarik, lalu install di blog.

Kontrol
Blogger memanjakan Anda dengan kontrol website yang mudah. Berbagai opsi pengaturan
juga sudah tersedia. Anda hanya tinggal pilih opsi terbaik yang sesuai kebutuhan.
Di luar yang sifatnya berupa opsi, integrasi layanan Google ke Blogger juga memudahkan.
Anda bisa dengan mudah menambahkan akun Google Analytics atau Google Search
Console dalam sekali klik.

Keamanan
Tak perlu ditanyakan bagaimana sistem keamanan Blogger. Sebagai platform yang dikelola
Google, aspek keamanan Blogger sudah cukup terjamin. Meskipun begitu, Anda tetap perlu
berhati-hati saat menggunakan tema dari pihak ketiga. Ini perlu dilakukan untuk mengurangi
risiko kemanan.

Cara Membuat Blog di Blogger

Setelah tahu apa saja yang ditawarkan Blogger, saatnya membahas cara membuat
blogspot. Tak sekedar membuat saja. Di bawah ini, Anda akan temukan enam cara
membuat blog di blogspot yang menarik.

1. Membuat blog

Untuk membuat blog, Anda perlu mengakses website Blogger di https://www.blogger.com/.
Ketika website sudah menampilkan halamannya, klik tombol Create Your Blog.

8

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Setelahnya, Anda akan diarahkan untuk login
akun Gmail. Inilah cara termudah untuk
membuat akun Blogspot. Langsung saja
masukkan username dan password untuk
melanjutkan

Setelahnya, Anda perlu melakukan konfirmasi
profil blog. Anda tinggal isi kolom yang tersedia
dengan nama blog yang ingin ditampilkan.
Kemudian klik Lanjutkan ke Blogger.

Setelah selesai Anda akan mendapati halaman Selamat Datang, seperti di bawah ini.

9

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Untuk lanjut membuat blog, klik tombol Create New.

Selanjutnya, Anda akan mendapat pop-up dengan tampilan seperti di atas.
Pada bagian Title, masukkan judul blog yang ingin Anda kembangkan. Judul ini akan
muncul di halaman depan blog.

10

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Lalu di bagian Address, masukkan URL yang ingin digunakan sebagai alamat blog.
Alamat ini otomatis akan diikuti dengan ekstensi .blogspot.com.
Di bagian Theme, silakan pilih tema yang ingin digunakan pada blog. Sesuaikan dengan
kebutuhan. Setelah semuanya diisi, klik Create blog! Kini, Anda sudah mempunyai
halaman Blogspot sendiri.
2. Membuat post atau halaman
Membuat blog saja tentu tidak cukup. Agar blog bisa berfungsi optimal, Anda perlu
mengisinya dengan berbagai konten. Di bagian ini, kami akan tunjukkan pada Anda cara
membuat post atau halaman konten. Untuk membuat post, Anda cukup klik
menu Posts dan pilih tombol New post.

Untuk membuat halaman, Anda tinggal klik menu Pages dan klik tombol New page.

Sekilas kedua opsi di atas nampak sama. Akan tetapi, Post dan Pages punya fungsi
berbeda.

11

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Pages dipakai untuk menampilkan halaman-halaman penting di blog. Halaman ini sering
kali berwujud halaman kategori atau informasi penting seperti about us. Di sisi
lain, post adalah konten yang mengisi halaman-halaman utama tersebut.
Kalau Anda perhatikan, satu-satunya yang membedakan halaman Pages dan Posts ialah
pengaturan di sebelah kanan halaman. Di bagian pages, Anda akan temukan tiga opsi
pengaturan untuk komentar, compose mode, dan line breaks.
Untuk halaman posts, opsi yang tercantum di kanan lebih beragam. Tepatnya, ada lima
opsi yang tersedia. Kelima opsi yang dimaksud ialah labels, schedule, permalink, location,
dan option (sama persis dengan opsi di pages).
3. Mengatur tampilan blog
Kunci tampilan Blogger yang ciamik ada pada tema. Berikut kami tunjukkan cara membuat
blog di blogspot yang menarik.
Klik Theme pada pilihan menu di sebelah kiri. Nantinya Anda akan disuguhi berbagai
pilihan tema yang dapat diinstall.

Pilih salah satu tema yang ingin Anda install. Nanti akan muncul cuplikan singkat seperti
gambar di bawah ini. Untuk install, Anda tinggal klik tombol Apply.

12

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Jika menginginkan kustomisasi lebih lanjut, Anda tinggal klik tombol Customize.

Di halaman Customize, Anda bisa mengatur tampilan tema dengan lebih lengkap. Tepatnya,
ada tiga opsi kustomisasi yang bisa Anda manfaatkan di sini.
Pertama, opsi Background. Opsi ini memungkinkan Anda mengubah background tema
dengan pilihan gambar yang tersedia. Anda juga dapat mengubah pallete warna tema
dengan memilih paketan warna yang disediakan. Kedua, opsi Advanced. Di sini, Anda
boleh mengubah warna dan jenis font pada banyak elemen tema. Mulai dari body, blog title,
tabs, posts, sharing, blockquotes, pictures, sidebar, search bar, dan attribution. Anda juga
bisa mengatur lebar tampilan dan menambahkan CSS.
Ketiga, bagian Gadgets. Opsi ini sebetulnya mirip dengan widget pada WordPress. Di
bagian ini, Anda bisa mengatur tampilan dan fungsi elemen-elemen di blog. Misalnya saja,

13

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

tombol Follow me by email (subscribe), pages, blog archive, labels, featured post, popular
post, header, search, dan report abuse.
4. Mengatur layout blog
Pengaturan tampilan tak berhenti di menginstall tema saja. Di Blogger, Anda bisa turut
mengatur layout atau susunan elemen di blog. Untuk melakukannya, Anda perlu klik
tombol Layout di menu.

Nantinya, Anda akan disuguhi tampilan seperti di atas. Untuk melakukan konfigurasi di tiap
elemennya, tinggal klik tombol bergambar pena. Tombol tersebut akan memunculkan pop-
up di mana Anda bisa melakukan konfigurasi.
Beberapa elemen, terutama Gadget, dapat pula disusun sesuai keinginan. Anda dapat
melakukannya dengan klik dan tarik (drag and drop) di tempat yang Anda mau.
Untuk melihat tampilan sebelum disimpan, Anda bisa klik tombol Preview. Ketika sudah
mantap, jangan lupa simpan konfigurasi yang Anda buat dengan klik tombol Save
arrangement.
5. Melakukan pengaturan lebih lengkap
Baiklah. Anda sudah tahu cara membuat blogspot, membuat konten, dan mengatur tampilan
blog. Tapi ada baiknya untuk mengeksplor lebih dalam ke bagian pengaturan. Sebab,
bagian ini memuat konfigurasi yang tak terbatas pada tampilan saja. Akan tetapi, juga
fungsi, keamanan, SEO, dan lain sebagainya.

14

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Di Blogger, terdapat tujuh submenu pada bagian pengaturan. Ketujuh submenu tersebut,
yaitu basic; post, comments, and sharing; email; language and formatting; search
preferences; other; dan user settings. Anda akan temukan penjelasan masing-masing
submenu di bawah ini:
Basic
Submenu ini memuat empat opsi pengaturan.
Pertama, basic yang memuat judul dan deskripsi blog. Berikut juga settingan privasi supaya
blog tampil di direktori Blogger dan mesin pencari.
Kedua, bagian publishing untuk mengatur URL blog. Bagian ini juga yang akan Anda
butuhkan ketika ingin menghubungkan blog pada domain.
Ketiga, opsi HTTPS. Opsi ini memastikan blog Anda memiliki sertifikat keamanan. Untuk
mengaktifkannya, Anda tinggal pilih opsi Yes pada bagian tersebut.
Keempat, bagian permissions. Bagian ini mengatur siapa saja yang berhak menjadi admin
blog. Anda juga dapat mengatur siapa saja yang berhak mendapatkan akses untuk
membaca blog.
Posts, comments, and sharing
Seperti namanya, opsi ini mengatur dua elemen utama di blog.
Pertama, posts. Opsi yang ini mengatur berapa banyak jumlah post yang ditampilkan.
Selain itu, bagaimana post ditampilkan juga diatur di bagian ini.
Kedua, comments. Opsi yang satu ini agak lebih banyak dibandingkan opsi sebelumnya.
Di sini, Anda boleh mengatur bentuk comments section, siapa yang boleh meninggalkan
komentar, comments moderation, verifikasi komentar, serta tambahan pesan untuk kolom
komentar.
Email
Blogger memperbolehkan Anda mempublikasikan konten via email. Di bagian inilah,
pengaturan untuk itu diaktifkan.

15

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Di samping itu, Anda juga menambahkan email untuk mendapatkan notifikasi komentar
atau mengirimkan konten teranyar.

Language and formatting
Pada bagian language, Anda bisa mengatur bahasa yang digunakan di blog. Ada juga fitur
transliterasi (proses alih aksara dari satu bahasa agar bisa dibaca) yang bisa diaktifkan.
Sisanya, terdapat pengaturan zona waktu dan format penulisan tanggal.

Search preferences
Bagian yang satu ini berkaitan erat dengan SEO. Di sini, Anda dapat melakukan konfigurasi
untuk meta description, errors and redirection, crawlers and indexing, serta monetization.

Other
Opsi ini memuat konfigurasi berkaitan dengan konten. Tepatnya soal import dan export
konten, RSS feed, notifikasi konten dewasa, dan pengaturan Google Analytics.

User settings
Terakhir ialah user settings. Di bagian ini, Anda bisa mengatur segala hal berkaitan dengan

akun Blogger. Mulai dari privasi, identitas, foto profil, dan informasi personal lainnya.

b. WordPress: CMS Paling Populer

WordPress adalah CMS atau platform pembuatan website paling populer di dunia. Lebih
dari 30 persen website di dunia dibuat menggunakan WordPress. WordPress bisa menjadi
begitu populer karena kemudahan penggunaan dan fitur-fiturnya yang lengkap.
Pengguna WordPress tidak terbatas pada blogger pribadi saja. Banyak perusahaan besar
yang mempercayakan WordPress sebagai platform pembuatan websitenya. SONY Music,
Bata, Mercedes Benz, The New York Times Company, dan The Walt Disney adalah
beberapa contoh perusahaan ternama yang menggunakan WordPress.
Semakin banyak pengguna WordPress, semakin banyak pula tutorial dan tips optimasi
WordPress tersebar di internet. Forum-forum pengguna WordPress bertebaran di internet.
Tutorial WordPress juga mudah ditemukan. Hal ini memudahkan bagi siapapun untuk
belajar cara membuat website dengan WordPress.

WordPress.com VS WordPress.org

Anda juga perlu tahu tentang perbedaan WordPress.com dan WordPress.org sebelum
mempelajari cara membuat website dengan WordPress. Perbedaan dasar di antara
keduanya terletak pada host aktualnya.

Jika menggunakan WordPress.com, Anda tidak perlu pusing-pusing mengeluarkan uang
untuk hosting dan domain untuk website karena sudah disediakan langsung dari WordPress
secara gratis. Namun, fasilitas di WordPress.com terbatas. Domain Anda harus kustom dari
WordPress, yaitu di belakangnya terdapat wordpress.com
(www.namaanda.wordpress.com).

16

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Berbeda dari versi gratisnya, WordPress.org memberikan keleluasaan dan berbagai
fasilitas lain. Anda bisa memiliki website dengan domain sendiri seperti
www.namaanda.com, bisa menentukan kapasitas penyimpanan sesuai kebutuhan, dapat
memasang plugin, memasang iklan AdSense, dan menginstall tema apa saja. Perbedaan
lengkap antara dua jenis WordPress dapat Anda baca di artikel 10 Perbedaan
WordPress.com dan WordPress.org
Cara Membuat WordPress
8 langkah untuk membuat blog WordPress, yaitu:

• Install WordPress
• Mengelola Dashboard WordPress
• Install Tema WordPress
• Install Plugin
• Posting Artikel
• Membuat Halaman WordPress
• Optimasi WordPress
• Setting keamanan WordPress
Agar lebih jelas, berikut ini penjelasan beberapa poin untuk membuat blog menggunakan
platform WordPress.
Langkah 1: Cara Install WordPress
Berikut adalah langkah-langkah install WordPress di Niagahoster:
1. Login ke Member Area
Jika sudah membuat akun di Niagahoster, Anda bisa login di sebelah pojok kanan atas
situs Niagahoster.
2. Pilih Menu Hosting dan Domain

17

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

3. Pilih Hosting
Klik hosting yang ingin Anda install dengan website WordPress.

4. Install WordPress
Pilih Install Website untuk memasang WordPress secara otomatis ke akun hosting Anda.
5. Klik Install

18

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

6. Isi Data

Isi data-data yang diminta, dari nama domain, judul website, deskripsi website, admin user,
hingga admin password. Klik Install dan website WordPress Anda sudah siap untuk dipakai
Langkah 2: Mengelola Dashboard WordPress
Setelah sukses memasang WordPress, langkah selanjutnya yang perlu Anda lakukan
adalah membuka dashboard atau dasbor WordPress. Melalui dasbor WordPress Anda bisa
mengelola website Anda dengan mudah, dari mengganti tema, menambah plugin,
menambah halaman, hingga menerbitkan blogpost.
Cara membuka dasbor WordPress tidak sulit. Anda hanya perlu menambahkan wp-admin
di belakang domain Anda. Misalnya, www.namaanda.com/wp-admin. Setelah itu, di layar
Anda akan muncul seperti ini.

19

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Masukkan username dan password yang sudah Anda buat ketika menginstall WordPress
di langkah sebelumnya. Jika login Anda sukses akan muncul dasbor seperti di bawah ini.

20

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Dasbor WordPress terbagi menjadi tiga bagian utama, yaitu toolbar (1), menu navigasi (2),
dan area kerja (3). Di toolbar Anda bisa mengelola profil Anda di pojok kanan. Selain itu
Anda juga akan mendapatkan notifikasi berapa banyak komentar yang Anda dapatkan
melalui toolbar. Bagian dasbor kedua adalah menu navigasi. Sebagian besar aktivitas
mengelola WordPress berada di menu navigasi. Dari menerbitkan blogpost, mengunggah
media, menambah halaman, mengelola komentar, mengganti tema, memasang plugin,
hingga mengganti pengaturan WordPress. Di bagian ketiga adalah area kerja utama
terdapat empat hal utama berikut:

21

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

At a Glance menampilkan jumlah post, halaman, komentar, dan versi WordPress yang
digunakan.

Activity menunjukkan informasi singkat tentang post dan komentar terbaru.

Jika Anda punya ide artikel dan ingin segera menulisnya Anda bisa melakukannya
di Quick Draft. Namun, Anda tetap harus menerbitkannya melalui menu utama.

WordPress News menampilkan berita terbaru dari WordPress.

Langkah 3: Memasang Tema WordPress
Sudah paham tentang bagian-bagian dasbor WordPress. Selanjutnya Anda bisa memasang
tema WordPress melalui dasbor tersebut di bagian menu navigasi Appearance. Anda bisa
mencari tema melalui kolom search di menu tersebut atau mengunggah sendiri tema yang
Anda unduh dari website lain melalui Upload Theme.

Langkah 4: Install Plugin
Setelah memasang tema yang Anda inginkan, Anda juga perlu memasang plugin untuk
meningkatkan kinerja WordPress. Plugin yang tersedia di WordPress sangat banyak.
Memilah satu per satu plugin mana yang harus Anda install di WordPress akan memakan
waktu lama. Namun, tidak perlu khawatir karena kami sudah merangkum plugin wajib apa
saja yang perlu Anda install ketika pertama kali membuat WordPress. Berikut adalah plugin
yang harus ada di WordPress Anda:

Google XML Sitemaps
Berguna untuk membuat sitemap website sehingga mesin pencari bisa lebih mudah
melakukan crawl konten-konten di website Anda.

Yoast SEO
Yoast SEO memiliki pengguna yang lebih banyak jika dibandingkan plugin SEO lainnya.
Saat artikel ini ditulis sudah mencapai lebih dari 5 juta instalasi aktif.

Plugin ini menawarkan fitur dan pilihan yang dapat Anda gunakan untuk melakukan
optimasi website WordPress dengan mudah. Tapi setelah melakukan instalasi, Anda
harus melakukan pengaturan Yoast SEO terlebih dahulu.

Contact Form 7
Contact Form 7 dapat Anda gunakan untuk mengelola lebih dari satu form kontak. Anda
dapat melakukan pengaturan tampilan dan menambah fasilitas seperti menambahkan fitur
untuk mengirimkan file. Sebenarnya, masih terdapat beberapa plugin terbaik lainnya yang
wajib Anda install. Dengan begitu, performa website Anda akan meningkat. Cara memasang
plugin pun cukup mudah. Di menu navigasi, klik Plugin > Add New. Kemudian ketik nama
plugin yang ingin Anda pasang di kolom pencarian. Setelah menemukan plugin yang Anda
inginkan, pilih Install lalu Activate.

Langkah 5: Cara Posting Artikel
Untuk membuat post baru di WordPress, buka Add New di bawah Posts atau pilih New ->
Post di toolbar bagian atas. Setelah itu akan muncul editor blog post yang disertai berbagai
fitur. Ketik judul post terlebih dulu. Kemudian, ketik konten post pada area yang telah
disediakan. Jika ingin memformat teks, gunakan opsi toolbar. Toolbar tersebut hampir sama
dengan toolbar yang Anda gunakan di MS Word atau text editor populer lainnya.

22

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Di sisi kanan halaman, Anda akan melihat semacam meta box. Tiap box memiliki fungsi
khusus.

Publish. Di sini Anda dapat mengubah status dan visibilitas post. Buatlah jadwalnya.
Dengan mengklik tombol Publish, post Anda dapat dibaca oleh pengunjung. Jika ingin
menghapus post, klik tombol Move to Trash.

Categories. Pada box ini, Anda dapat menentukan kategori post yang lebih spesifik.
Bahkan Anda bisa membuat kategori baru dengan mengklik tombol +Add New Category.

Tags mempermudah Anda untuk menambahkan tag baru dengan cepat.

Featured Image, Anda dapat menentukan featured image untuk post di sini. Featured
image adalah gambar yang muncul di atas artikel.

Langkah 6: Cara Membuat Halaman
Halaman WordPress adalah konten statis yang tidak terjadwal seperti About Us dan Contact
Us. Halaman tidak memiliki category dan tag. Bagaimana cara membuatnya? Berikut adalah
langkah-langkahnya:
Di menu navigasi WordPress, klik Pages > Add New. Pages memang tidak memiliki
categories dan tags. Sebagai penggantinya, Pages memiliki Page Attributes yang berguna
untuk mengubah urutan halaman serta membuat parent page. Parent page berguna untuk
menyatukan beberapa halaman yang berada di bawah parent page yang sama.

Optimasi WordPress
Cara membuat WordPress tidak berhenti pada instalasi dan menerbitkan konten saja, tetapi
juga bagaimana cara mengoptimalkan kinerjanya. Dengan begitu artikel-artikel Anda akan
sering berada di posisi teratas hasil pencarian Google, website tidak loading lama, dan
memperoleh pengunjung lebih banyak tentunya.

Berikut adalah langkah-langkah optimasi WordPress yang perlu Anda lakukan:

1. Install Caching
Lagi-lagi, Anda perlu memasang plugin. Di poin sebelumnya Anda sudah memasang plugin
untuk SEO, yaitu Yoast SEO. Kali ini plugin yang perlu Anda install untuk optimasi
WordPress adalah plugin caching. Plugin caching berguna untuk membuat versi statis dari
website Anda dan mengirimkannya sehingga website bisa loading lebih cepat.

2. Optimasi Permalink
Secara default, WordPress menghasilkan struktur permalink yang cukup panjang. Struktur
default tersebut berupa tanggal serta nama URL. Contohnya seperti di bawah ini.
https://niagahoster.org/2017/08/10/judul-postingan
Permalink yang disukai oleh Google mengandung judul atau keyword. Kemudian, permalink
yang lebih pendek akan memberikan performa yang lebih baik lagi. Ketika menentukan
permalink, kami menyarankan agar Anda menggunakan Post Name. Cara ini akan
membuat keyword lebih mudah terlihat ketika website Anda tampil di Google.
https://niagahoster.org/judul-postingan

23

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Anda dapat mengubah permalink melalui dashboard WordPress. Silakan pilih
menu Settings > Permalinks. Kemudian pilih radio button Post name dan klik tombol Save
Changes untuk menyimpan perubahan.

3. Optimasi Gambar
Optimasi gambar juga diperlukan agar website Anda lebih cepat loading. Mengoptimasi
gambar akan membantu website Anda untuk loading lebih cepat karena membuat ukuran
gambar yang Anda unggah lebih kecil, tapi dengan kualitas yang sama.

4. Aktifkan CDN

CDN adalah sebuah teknologi terbaru sebagai bentuk mirroring konten situs web. Dengan
menggunakan CDN maka content web kita seperti CSS, Image, Video, Custom Scripts akan
di mirror di server cadangan yang terletak di berbagai negara.

Mengamankan WordPress
cara mengamankan WordPress. Hal ini penting agar website Anda terhindar dari serangan
malware, virus, dan hacker.
1. Selalu Update WordPress
Update versi WordPress terbaru diperlukan untuk mengatasi celah (bug system) versi
sebelumnya. Anda bisa melakukannya secara langsung melalui halaman dashboard
WordPress ketika terdapat versi terbaru. Pastikan Anda selalu update versi untuk
mengurangi resiko keamanan WordPress yang ada.
2. Update Plugin
Para pengembang plugin selalu berusaha untuk menutup bug dan hacker selalu mencari
celah. Selalu update plugin Anda ke versi terbaru agar terhindar dari serangan hacker.
3. Tema Juga Harus Selalu Update
Tidak hanya plugin, celah yang sama tentu akan dimanfaatkan oleh para hacker. Silakan
cek ketersediaan versi tema terbaru Anda melalui menu Appearance > Theme pada
dashboard WordPress Anda. Jangan lupa untuk menghapus theme WordPress yang
sudah tidak Anda gunakan.
4. Hapus Plugin yang Tidak Digunakan
Jangan hanya menonaktifkan plugin yang tidak perlu. Hapus plugin tersebut untuk menutup
celah bagi para hacker untuk meretas website Anda. Selain itu, menghapus plugin yang
tidak digunakan dapat meringankan kerja WordPress Anda.

24

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

5. Buat Custom Login

/wp-login.php ialah link login yang otomatis digunakan setelah kita melakukan instalasi dan
akan login WordPress. Tentunya para hecker mengetahuinya dan mempermudah mereka
untuk menerobos ke akun Anda. Terlebih jika Anda menggunakan password yang sama di
berbagai akun layanan lainnya. Untuk mencegahnya, kita bisa mengubah link login ke
WordPress menggunakan plugin Custom Login URL Nantinya Anda juga dapat mengubah
link logout, lost password dan lainnya.

6. Lakukan Backup
Melakukan backup secara berkala sudah menjadi kewajiban yang harus dilakukan. Ketika
terdapat fungsi yang tidak berjalan atau terkena virus dan dibutuhkan waktu yang lama
untuk memperbaikinya, Anda dapat melakukan pemulihan dengan cepat dengan cara me-
restore backup yang telah dibuat.
Proses backup dapat dilakukan dengan dua cara, backup otomatis dan backup manual.
Backup secara manual meliputi penyimpanan database MySQL dan file yang terdapat pada
website WordPress Anda. Anda juga dapat memanfaatkan fitur backup dari layanan hosting
yang dapat dilakukan secara otomatis.
Untuk berjaga-jaga, ada baiknya Anda memasang plugin WordPress untuk melakukan
backup secara otomatis. Anda dapat menentukan sendiri jangka waktu backup yang
dilakukan secara otomatis, setiap bulan, minggu atau hari.
Beberapa plugin backup WordPress yang kami rekomendasikan diantaranya:

• Updraftplus: Plugin ini sangat populer dengan berbagai fitur backup dan restorenya.
Selain fiturnya yang lengkap Anda juga dapat memilih file apa saja yang akan terupdate
secara berkala.

• BackUpWordPress: Selain menawarkan penggunaan backup dan restore yang mudah,
plugin ini hanya membutuhkan memori yang kecil sehingga tidak memberatkan server
hosting Anda.

Kesimpulan

Cara membuat blog dengan WordPress Tidak hanya mudah, WordPress juga mampu
memberikan kualitas mumpuni dalam membuat website profesional. Tidak ada lagi alasan
untuk tidak membuat website. Anda dapat menemukan banyak panduan cara membuat
website dengan WordPress dan cara optimasinya di Niagahoster, baik melalui tutorial
WordPress di blog maupun e-book.

Kini saatnya Anda membuat website pribadi, blog, toko online, atau website perusahaan
menggunakan WordPress. Selamat membuat website dengan WordPress!

25

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

c. Cara membuat Website Profesional dan Gratis dengan Google Site
Google Site adalah layanan Google yang membantu Anda membuat website keren. Anda
dapat menggunakan layanan web yang tersedia secara gratis untuk membuat situs web
yang dinamis dan interaktif hanya dengan beberapa klik. Tidak diperlukan pengetahuan
HTML!
Secara default, google Site menggunakan editor WYSIWYG. Tampilan antarmukanya juga
mengakomodasi pengguna profesional yang ingin mengedit kode HTML secara manual.
Karena Google Site adalah layanan Google, sebelum Anda dapat menggunakannya untuk
membangun situs web sendiri, Anda harus terlebih dahulu mendaftar untuk mendapatkan
akun Google gratis. Jalankan browser web Anda dan pergi ke website Situs Google untuk
mendaftarkan akun baru.
Jika Anda sudah terdaftar dengan layanan Google lainnya, seperti Gmail, Anda dapat
menggunakan kredensial yang sama untuk masuk ke Situs Google.
Setelah masuk, Anda turun di dasbor Situs yang tampil polos. Dari sini, ikuti langkah-
langkah di bawah ini untuk membuat situs web baru yang terlihat keren dan hebat dalam
hitungan menit.
1. Pilih nama dan alamat

Klik tombol berlabel Buat di dasbor Situs yang membawa Anda ke layar Buat situs baru. Di
sini masukkan nama situs Anda yang secara otomatis ditambahkan ke URL situs web Anda,
tanpa spasi. Namun ingat bahwa tidak seperti nama situs web, URL harus unik.

26

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

2. Pilih tema

Secara default, Sites tidak menggunakan template untuk website baru untuk memberi Anda
kontrol penuh atas desainnya. Namun, Anda dapat mendasarkan situs web Anda pada
template yang telah disiapkan Google.
Pilih salah satu template populer yang terdaftar atau klik pada ‘Jelajahi galeri untuk lebih
banyak’. Selanjutnya, perluas laci ‘Pilih tema’ dan pilih dari salah satu tema yang terdaftar.
3. Edit tata letak situs

Situs sekarang akan membuat situs web baru Anda dan Anda dapat mengedit dan
menyesuaikannya menggunakan tombol di sudut kanan atas. Untuk mengubah tata letak
default, klik ikon Gear dan pergi ke ‘Edit tata letak situs’. Anda sekarang dapat mengaktifkan
/ menonaktifkan dan mengatur ulang elemen-elemen tertentu dari situs web Anda seperti
bilah sisi, tergantung pada tema yang Anda pilih sebelumnya.

27

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

4. Buat halaman

Untuk menambahkan halaman baru, klik ‘Buat halaman’. Kemudian, beri nama halaman
tersebut dan template yang akan menjadi dasarnya. Gunakan template Halaman Web
default.
Klik ‘Pelajari lebih lanjut’ untuk membaca tentang template lainnya. Terakhir, pilih posisi
hierarkis untuk halaman tersebut, misalnya, apakah Anda ingin menempatkannya di
samping halaman yang ada atau di bawahnya.
5. Tambahkan konten

Sekarang Anda akan dibawa ke antarmuka Situs WYSIWYG untuk menambah dan
mengedit konten. Tampilannya mirip dengan editor teks apa pun.
Anda dapat menggunakan menu di atas untuk mengubah tata letak halaman,
menambahkan beberapa kolom, menyisipkan tabel, gambar, dan bahkan menyertakan
tombol +1 bagi pengunjung untuk merekomendasikan halaman.

28

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

6. Manajemen website google site

Ulangi langkah 4 dan 5 untuk menyempurnakan situs web Anda dengan beberapa halaman
dan konten. Sebelum Anda menyempurnakan kreasi Anda ke dunia maya, atur dan
konfigurasikan beberapa elemen penting dengan mengklik tombol Gears dan menuju ke
Manage Site.
Di sini Anda dapat mengubah nama situs web dan menambahkan deskripsi yang lebih rinci.
7. Kontrol Akses

Untuk mengontrol akses ke situs web Anda, klik ikon Gears, menuju ke opsi Kelola Situs
dan beralih ke Berbagi dan Izin.

29

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

Secara default, situs web baru dapat dilihat oleh siapa saja. Untuk mengekang akses, klik
tautan Ubah … di bawah ‘Siapa yang memiliki akses’ untuk membatasi akses ke URL ke
situs web Anda atau daftar orang tertentu.
8. Managemen Pengaturan Web

Itu saja, Anda sekarang dapat mengundang pengguna lain untuk melihat situs web
Anda. Saat Anda memodifikasi situs web dari waktu ke waktu, Anda dapat melacak
perubahan dengan mengeklik ikon Gears dan menuju ke Riwayat Revisi.
Klik tautan ‘lihat daftar halaman’ di bagian atas untuk mendaftar semua halaman di situs
web Anda. Dari sini Anda dapat melihat semua versi halaman tertentu.
Sekarang Anda telah membuat situs web dengan Situs Google site, lihat bagaimana Anda
dapat menggunakan Gadget untuk membuatnya lebih baik .
Membedakan website statis dan dinamis
Seperti yang sudah dijelaskan di atas, jenis website terbagi menjadi tiga jenis. Namun,
berdasarkan teknologi pembuatan, website hanya dibedakan menjadi dua jenis, yakni
website statis dan website dinamis.
Kedua macam web ini tentu memiliki perbedaan yang cukup mencolok, berikut ini beberapa
perbedaan antara keduanya.
1. Database yang Dipakai
Database menjadi hal yang penting dari sebuah website, biasanya dipakai untuk
menyimpan data yang ada dalam website tersebut. Dalam web statis, tidak membutuhkan
penyimpanan berbagai macam data. Web statis lebih mengarah kepada proses data yang
dibutuhkan oleh website itu sendiri. Sementara, pada website dinamis diperlukan suatu
database yang berfungsi untuk menyimpan dan mengolah data tersebut. Database menjadi
hal yang sangat penting, sehingga pada webs dinamis biasanya menggunakan Oracel dan
MySQL.

30

MODUL WEBSITE SMK DHARMA PARAMITHA JAKARTA

2. Konten

Hal penting lain untuk sebuah website adalah konten. Konten ini menjadi isi sekaligus daya
tarik bagi para pengguna internet untuk mengunjungi website tersebut. Perkembangan dan
peningkatan website salah satunya ada karena mulai bermunculan konten-konten menarik,
hal inilah yang mengharuskan website memperbarui konten sesering mungkin.
Konten juga merupakan hal yang membedakan antara web statis dan dinamis. Bagi web
statis konten jarang sekali diperbarui atau diubah. Sementara itu web dinamis memerlukan
pembaruan konten setiap saat.

3. Ukuran

Perbedaan web statis dan web dinamis selanjutnya terdapat pada ukuran kedua jenis
website. Web statis memiliki ukuran yang lebih kecil ketimbang web dinamis karena sistem
pemogramannya tidak terlalu rumit.
Sedangkan web dinamis memiliki ukuran yang lebih besar, hal ini karena bahasa dan sistem
pemograman yang terjadi dalam web dinamis lebih kompleks ketimbang web statis. Web
dinamis memerlukan waktu yang sedikit lebih lama untuk diakses.

4. Desain
Website juga harus memiliki desain yang beraneka ragam. Desain menjadi salah satu
faktor pengunjung tertarik pada websie tersebut. Perbedaan selanjutnya antara web statis
dan web dinamis terletak pada desain kedua web masing-masing, web statis memiliki
desain sederhana yang cenderung klasik. Sementara, web dinamis memiliki desain yang
sangat beragam namun juga kekinian. Untuk para pengelola dapat menambahkan animasi
yang beragam guna mempercantik tampilan website yang digunakan.

5. Interaksi Pemilik
Interaksi para pemilik website menjadi perbedaan selanjutnya antara web statis dan web
dinamis. Web statis biasanya lebih dibuat untuk waktu jangka panjang, sehingga para
pemilik web tersebut tidak perlu melakukan banyak perubahan berarti terhadap isi atau
tampilan website. Sementara itu berbanding terbalik dengan web statis, web dinamis
merupakan jenis web yang ditujukan untuk keperluan komersil. Maka dari itu, diperlukan
banyak perubahan yang harus dilakukan sebagai bentuk pembaruan website tersebut.

6. Interaksi Pengunjung Web

Interaksi antara pengunjung web statis dan web dinamis juga berbeda. Web statis hanya
dapat diakses dan juga dinikmati tanpa melakukan perubahan. Hal tersebut membuat jenis
web ini tak jarang dicap sebagai web yang kurang interaktif. Web dinamis bisa digunakan
oleh para pengunjung untuk melakukan interaksi. Interaksi baik dilakukan dengan log in
atau melakukan beberapa perubahan dalam konten yang terdapat di dalam website
tersebut.

7. Pembuatan
Proses pembuatan web statis dan web dinamis juga berbeda, web statis lebih mudah dibuat
karena tidak memerlukan banyak bahasa pemograman. Berbeda dengan web dinamis,
jenis yang satu ini didirikan dari nol dengan waktu pembuatan yang cukup lama, bahkan
hampir satu bulan. Bahasa pemograman web ini juga berbeda, dimana web statis memiliki
bahasa pemograman yang terbilang sederhana karena hanya menggunakan CSS dan
HTML. Sementara itu, bahasa pemograman pada web dinamis lebih banyak,
seperti PHP, HTML, CSS, Javascript dan juga ASP.

31