MATERI 2

WEB DESIGN
(PENGENALAN WEB DESIGN)

SEKOLAH MENENGAH PERTAMA BUNDA MULIA

JL. A.M. SANGAJI NO. 20 JAKARTA PUSAT 10130

TAHUN AJARAN
2020-2021
 WEB DESIGN
JENIS-JENIS WEB
Dilihat dari segi kontennya, website terbagi menjadi 2 jenis yaitu :

1. Website Statis
Website statis merupakan website yang isi kontennya tidak dapat diubah secara langsung
oleh end-user. Isi dari website hanya bisa diubah oleh orang yang mengerti mengenai
bahasa pemrograman atau tools untuk merancang halaman website. Website jenis ini tidak
mempunyai basis data, jadi informasi yang disampaikan ditulis langsung ke dalaman
sintax. Biasanya website jenis ini dibuat untuk menampilkan informasi yang jarang
diupdate misalnya Company Profile.

2. Website Dinamis
Website dinamis adalah website yang isi kontennya sudah termanajemen dengan kata lain,
sudah menerapkan sistem Content Management System untuk informasi yang
disampaikannya. End-user bisa sewaktu-waktu mengupdate konten pada halaman website
tanpa perlu faham sintax ataupun bahasa pemrograman. Melihat dari segi
fungsionalitasnya, website seperti inilah yang sekarang banyak digunakan.
Website dinamis, menurut fungsi dan informasi yang disampaikannya terbagi menjadi
beberapa bagian diantaranya :

3. Website Company Profile

Meskipun banyak website company profile dibuat dengan website statis, namun seiring
perkembangan zaman sekarang ini, website company profile sudah beralih dari asalnya
statis menjadi website dinamis. Untuk keperluan apa website company profile dibuat
dinamis? salah satu alasannya supaya data informasi bisa diubah seketika, tidak perlu
menghire/menyuruh seorang web programmer untuk mengupdate informasinya. Selain itu,
sekarang ini website company profile sudah terhubung ke situs lain seperti jejaring sosial,
fungsinya supaya website tersebut lebih banyak dan lebih mudah diketahui oleh publik.
Contoh website company profile yaitu : http://www.indismart.co.id

4. Website Mesin Pencari

Website mesin pencari yaitu suatu website yang menyediakan fasilitas untuk mencari data
diinternet (di website lain khususnya) berdasarkan keyword/kata kunci yang kita inputkan.
Website seperti ini mempunyai peranan sangat penting dalam mengumpulkan informasi.
Contoh website mesin pencari diantaranya : http://www.google.com.
http://www.yahoo.com

Web design Page 1

 5. Website Portal
Website jenis ini merupakan jenis website yang menyediakan link ke website lainnya.
Dengan kata lain website ini merupakan website yang isinya merupakan informasi link ke
website lainya, link-link tersebut sudah termanajemen dengan baik sehingga memudahkan
pengunjung mencari link ke situs lainnya. Fungsinya hampir sama dengan website mesin
pencari, namun ruang lingkupnya lebih sempit lagi.

6. Websie Blog
Fungsi blog sebetulnya adalah tempat si pemilik blog menuangkan ide tulisan dalam
bentuk artikel yang dipublikasikan di internet. Atau bisa juga merupakan catatan buku
harian, pengalaman si pemilik blog. Selain itu, blog juga bisa digunakan sebagai media
untuk menyamaikan tutorial terhadap suatu metode atau jalan keluar suatu permasalahan.
Contoh website jenis ini diantaranya : http://www.indi-smart.com/blog, http://www.indi-
smart.com/tutor

7. Website Networking
Pengertian networking disini adalah jaringan, sama halnya dengan mencipatakan
“kenalan” didunia nyata, hanya medianya adalah online. Situs seperti ini sekarang sedang
marak digunakan oleh sebagian besar pengguna internet. Fungsi dari website jenis ini
adalah untuk membentuk komunitas, koneksi atau kenalan di dunia nyata, tanpa terbatas
oleh ruang maupun waktu.
Contoh website jenis ini yaitu : http://www.goesmart.com, http://www.facebook.com, dll

8. Website Forum
Website forum merupakan website yang berfungsi untuk mendiskusikan suatu permasalah.
Atau bisa juga digunakan untuk memposting suatu metode atau tata cara terhadap
penyelesaian suatu masalah. Website seperti ini banyak digunakan pengguna internet saat
ini, selain untuk memcari/menyebarkan informasi website jenis ini juga kadang digunakan
untuk berniaga kepada para pengguna forum tersebut.
Contoh website jenis ini yaitu : http://www.kaskus.com,
http://www.forum.tempointeraktif.com

9. Website Berita
Sesuai dengan judulnya, website ini bertujuan untuk menyampaikan informasi secara cepat
dan akurat. Informasi/berita yang disampaikan bisa sangat beragam, diantaranya politik,
pendidikan, otomotif bahkan sampai gosip.
Contoh website jenis ini yaitu : http://www.detik.com, http://www.kompas.com dll

Web design Page 2

 10. Website galeri

Fungsi utama dari website jenis ini adalah sebagai media penyimpanan file berupa gambar
di internet. Apa kebelihan dengan menyimpan file gambar milik kita diinternet ? tentusaja
karena kita bisa membagikan link foto galeri kita ke user lain / orang lain di internet.
Contoh website jenis ini yaitu : picasa.google.com, instagram.com, dll

11. Website e-Commerce

e-Commerce atau perdagangan online merupakan website yang menyediakan informasi

mengenai barang atau jasa secara online. Website jenis ini merupakan representasi dari
cara penjualan secara real dan dituangkan dalam bentuk online. Kelebihan dari website
jenis ini yaitu pemilik website mempunyai cakupan pasar yang luas, bahkan global.
Contoh website jenis ini yaitu : ebay.com, http://www.indi-smart.com/store

12. Website e-Learning

e-Learning merupakan kepanjangan dari electronic learning, jika dialih bahasakan
pengertiannya adalah proses belajar melalui media elektronik. Media elektronik disini
adalah konten pembelajaran yang ada di website, jadi fungsi website tersebut menyimpan
materi maupun bahan pembelajaran secara online. Pengguna bisa mengakses
materi/informasi tersebut kapan saja dan dimana saja.

Bagian-bagian penting dari Website

Sebuah website memiliki beberapa bagian penting agar dapat berfungsi dengan baik untuk
menampilkan informasi. Bagian-bagian penting pada website dapat kita uraikan antara lain
domain, hosting dan tampilan situs.

1. Domain
Domain adalah alamat situs baik itu yang berupa website atau blog sehingga pengguna
internet dapat mengunjungi sebuah situs dengan cara mengetikan nama domain situs tersebut
di browser (mozila firefox, opera, chrome dll), misalnya: www.siswapedia.com.

Istilah alamat pada umumnya juga disebut sebagai URL. Kita dapat mengakses sebuah situs
menggunakanan awalan “www” atau tanpa “www”, semua bisa dilakukan namun ada juga
situs yang tidak bisa menggunakan “www”. Hal ini tergantung settingan si pemilik situs.

Web design Page 3

 Sebuah alamat website dapat diakses melalui HTTP (HyperText Transfer Protocol). HTTP
merupakan sebuah protokol ringan untuk mentransfer dokumen dalam World Wide Web
(www). Versi lain dari HTTP adalah HTTPS (HTTP Secure) yang biasanya digunakan untu
perusahaan besar atau bisnis online.

Hal ini karena HTTPS memberi tawaran layanan yang lebih aman dengan proses komunikasi
data yang diacak atau dibungkus (encrypt). WWW dijalankan dalam sebuah server yang
disebut HTTPD (Hyper Text Transfer Protocol Daemon).

Ada dua macam domain yang selama ini digunakan, yakni domain umum dan domain
berdasarkan nama negara.

a) Domain Umum (Generic Domains)

Sebuah domain digolongkan sebagai domain umum apabila berakhiran .com, .net, .org,
.edu, .mil dan .gov. Nah, keenam akhiran domain tersebut memiliki artian yang
menggambarkan fungsi sebuah website. Domain golongan ini disebut juga sebagai Top
Level Domain (TLD).

com: berfungsi untuk situs-situs yang menawarkan jasa komersial/ perusahaan,

net: berfungsi untuk situs-situs yang menawarkan jasa jaringan/ telekomunikasi,
org: berfungsi untuk situs-situs berupa organisasi atau lembaga nirlaba,
edu: berfungsi untuk situs-situs untuk kepentingan kependidikan,
gov: berfungsi untuk situs-situs pemerintah
mil: berfungsi untuk situs-situs kemiliteran (angkatan bersenjata)

b) Domain Berdasarkan Nama Negara (Country-Specific Domains)

Sebuah domain digolongkan sebagai domain nama negara apabila berakhiran misalnya di
Indonesia (id) jadi akan berakhiran co.id, net.id, ac.id, or.id, go.id, dan mil.id. Istilah
domain dalam golongan ini adalah Second Level Domain (SLD).

co.id: berfungsi untuk situs-situs yang menawarkan jasa komersial/perusahaan di

Indonesia,
net.id: berfungsi untuk situs-situs yang menawarkan jasa jaringan/telekomunikasi di
Indonesia,
or.id: berfungsi untuk situs-situs berupa organisasi atau lembaga nirlaba di Indonesia,
ac.id: berfungsi untuk situs-situs untuk kepentingan kependidikan di Indonesia,
go.id: berfungsi untuk situs-situs pemerintahan di Indonesia,

Web design Page 4

 mil.id: berfungsi untuk situs-situs kemiliteran (angkatan bersenjata) di Indonesia

2. Hosting
Hosting dapat diartikan sebagai tempat penyimpanan file atau data-data agar dapat diakses
oleh pengguna internet. Di Indonesia banyak sekali perusahaan yang menyediakan layanan
hosting dengan berbagai macam paket layanan.

Setelah membeli domain, anda harus membeli paket hosting agar website Anda bisa bekerja
dengan baik. Pada umumnya penyewaan hosting dihitung per bulan dengan berbagai macam
kuota/space dan bandwidth. Sedangkan untuk domain, dapat disewa pertahun.

3. Tampilan Website
Selain domain dan hosting, tampilan sebuah website sangatlah penting. Tampilan ini harus
dibuat simpel, menarik dan sesuai tema website kita. Istilah lain tampilan adalah theme atau
template.

Selain itu kita juga butuh managemen website agar dalam mengelola website diberi
kemudahan. Managemen website (CMS) yang banyak digunakan oleh perusahaan besar atau
website besar antara lain worpress.com, joomla.com dan AuraCMS.

Struktur Website

Website jika dianalogikan seolah seperti sebuah bangunan yang memiliki penataan dan struktur. Ada
yang berstruktur sederhana dan ada juga yang terbilang rumit. Struktur di sini terbagi mulai dari tata letak
dan pengkategorian serta labelisasi tulisan. Sifatnya yang serupa bangunan membuatnya dapat direnovasi
sesuka hati pemilik. Mulai dari tata letak, eksterior-interior (tekstur dan warna) hingga bahan bangunan
(html, php, java, dll) dapat ditentukan semau pemilik. Secara umum struktur tersebut dapat dilihat seperti
gambar di bawah ini.

Web design Page 5

 Keterangan gambar:

1. Header
Pada angka 1 disebut sebagai header atau kepala halaman. Kepala halaman umumnya terdiri dari
logo, nama situs dan slogan atau deskripsi situs. Namun beberapa pengelolanya
mengembangkannya dengan mengisi keterangan waktu seperti jam atau tanggal. Dan ada juga yang
menambahkan banner iklan dan kotak pencarian. Logo sendiri bisa diganti dengan gambar sebagai
latar belakang atau gambar biasa yang panjangnya disesuaikan dengan badan web.

2. Menu
Pada angka 2 disebut menu/halaman/navigasi. Menu ini biasanya terdiri dari informasi umum
seputar website tersebut seperti “Tentang”, “Galeri”, “Kontak” dan sebagainya. Namun belakangan
menu tersebut ditambahkan dengan tautan yang mengarah ke laman tertentu. Karena pada bagian
ini tidak selalu berisi menu, belakangan disebut sebagai navigasi. Menu ini juga dapat ditambahkan
cabangnya yang disebut menu anak sampai menu cucu hingga generasi cabang yang tak terhingga.

3. Badan Utama

Web design Page 6

 Pada angka 3 disebut sebagai main body atau badan utama. Isinya umumnya berupa tulisan yang
juga berisikan gambar dan video. Tulisan tersebut juga terkadang berisikan keterangan terkait
penulis, tanggal, kategori dan label.

4. Sidebar
Pada angka 4 disebut sidebar atau bilah. Merupakan bagian website yang dapat berisikan konten
apapun seperti navigasi tautan yang mengarahkan ke laman lain, kata kunci, gambar, video, flash,
mp3 player, kalender, banner iklan, iklan baris dan sebagainya.

5. Footer
Pada angka 5 disebut footer atau kaki halaman. Umumnya berisikan keterangan situs seperti nama
situs dan slogan, dan biasanya berisi keterangan hak cipta (Copyright ©) dan tahunnya. Ada juga
yang menambahkan informasi kontak dan alamat kantor. Berisi juga navigasi tambahan ke menu
khusus seperti Syarat dan Ketentuan.

Di atas adalah struktur website secara umum. Tetapi karena perkembangan bahasa pemograman
website ditambah dengan perbedaan dan perkembangan selera. Tata letak struktur di atas pun dapat diubah,
ditambah, dikurangi dan diganti sesukanya. Bagian angka 1 bisa berada di angka 2, begitu juga sebaliknya
dan begitu juga yang lainnya. Sidebar pun bisa ditambah atau dihilangkan. Apapun bisa dilakukan.

Untuk tulisan sendiri distrukturisasi untuk kemudahan pencarian. Tulisan-tulisan yang banyak,
ditempatkan pada kategori tertentu dan diberikan tag (disebut juga sebagai kata kunci atau label). Ketika
Anda ingin mencari tulisan-tulisan tentang kesehatan pada situs tertentu, pengelola situs menampilkan
tautan navigasi kategori ‘kesehatan’, sehingga ketika Anda mengklik ‘Kesehatan’ maka Anda akan
mendapatkan tulisan-tulisan terkait kesehatan. Begitu juga dengan label, tetapi label dapat menampilkan
tulisan-tulisan dari kategori yang berbeda namun dengan kata kunci yang sama.

Web design Page 7