Program Study

Sistem Informasi

Mata Kuliah

DESAIN WEB

STMIK PalComTech

DAFTAR ISI
BAB 1. PEMAHAMAN DASAR WEBSITE .............................................................................. 1
A. PENGANTAR DESAIN WEB ....................................................................................................... 1
1. DESAIN WEB ...................................................................................................................... 1
2. WWW (WORLD WIDE WEB) ............................................................................................... 1
3. CARA KERJA WWW ............................................................................................................ 2
4. BROWSER WEB .................................................................................................................. 3
5. FUNGSI WEBSITE ............................................................................................................... 3
B. JENIS SITUS WEBSITE ............................................................................................................... 4
1. ALAT PEMASARAN ............................................................................................................. 4
2. NILAI TAMBAH ................................................................................................................... 4
C. ISTILAH-ISTILAH DALAM PEMROGRAMAN WEB ....................................................................... 6

BAB 2. PRINSIP PRINSIP DESAIN WEBSITE ....................................................................... 8

A. MERUMUSKAN TUJUAN MEMBUAT WEBSITE .......................................................................... 9
B. KONSEP DASAR DESAIN ........................................................................................................... 9
C. ELEMEN LAYOUT ................................................................................................................... 10
1. KESEIMBANGAN .............................................................................................................. 10
2. KONTRAS ......................................................................................................................... 12
3. KONSISTENSI.................................................................................................................... 12
4. RUANG KOSONG .............................................................................................................. 13
D. PEWARNAAN......................................................................................................................... 15
1. ASPEK PSIKOLOGI WARNA............................................................................................... 15
2. WARNA DALAM DESAIN WEB .......................................................................................... 16
3. JENIS WARNA .................................................................................................................. 17
4. METODE PEMILIHAN WARNA .......................................................................................... 18
E. TIPOGRAFI ............................................................................................................................. 19
1. JENIS HURUF.................................................................................................................... 19
2. PENGGUNAAN HURUF ..................................................................................................... 21
3. PETUNJUK PEMILIHAN HURUF ........................................................................................ 22

F. LAYOUT ................................................................................................................................. 22
1. MODEL LAYOUT TOP INDEX ............................................................................................. 22
2. MODEL LAYOUT BOTTOM INDEX ..................................................................................... 23
3. MODEL LAYOUT LEFT INDEX............................................................................................. 23
4. MODEL LAYOUT RIGHT INDEX .......................................................................................... 24
5. MODEL LAYOUT SPLIT INDEX ........................................................................................... 24
6. MODEL LAYOUT ALTERNATING INDEX.............................................................................. 24
G. PEMBUATAN LAYOUT ............................................................................................................ 25
H. KRITERIA SITUS WEB YANG BAIK ............................................................................................ 25
1. USABILITY ........................................................................................................................ 25
2. NAVIGASI ......................................................................................................................... 26
3. GRAFIK DESAIN ................................................................................................................ 27
4. CONTENT ......................................................................................................................... 27
5. COMPATIBILTY................................................................................................................. 28
6. LOADING TIME................................................................................................................. 28
7. FUNCTIONALITY ............................................................................................................... 28

BAB 3. PENGENALAN BAHASA HTML............................................................................... 29

A. DEFINISI HTML....................................................................................................................... 29
B. STRUKTUR DASAR HTML........................................................................................................ 29
C. FORMAT TAMPILAN SDERHANA ........................................................................................... 30
1. TAG UNTUK HEADLINE ..................................................................................................... 30
2. PARAGRAF ....................................................................................................................... 31
3. TAG STYLE SEDERHANA.................................................................................................... 32
D. FORMAT ELEMEN TEXT.......................................................................................................... 33
FORMAT TEXT ........................................................................................................................ 33
E. ANCHOR DAN LINK ................................................................................................................ 38
F. IMAGE................................................................................................................................... 39
G. LIST ITEM............................................................................................................................... 41
1. ORDERED LIST / LIST BERNOMOR..................................................................................... 41
2. UNORDERED LIST / LIST TANPA NOMOR .......................................................................... 42
H. TABLES .................................................................................................................................. 43
I.

FORM .................................................................................................................................... 44
1. KONTROL TEXT ................................................................................................................ 46
2. KONTROL PASSWORD ...................................................................................................... 46

3. KONTROL RADIO BUTTON ................................................................................................ 47

4. KONTROL CHECKBOX ....................................................................................................... 48
5. KONTROL SELECT ............................................................................................................. 48
6. KONTROL TEXT AREA ....................................................................................................... 49
7. KONTROL BUTTON ........................................................................................................... 50

BAB 4. PENGENALAN CSS ................................................................................................ 52

A. KEGUNAAN CSS ..................................................................................................................... 52
B. KEUNTUNGAN CSS................................................................................................................. 52
C. KEKURANGAN CSS ................................................................................................................. 54
D. CARA PENULISAN CSS ............................................................................................................ 54
E. SYNTAX CSS ........................................................................................................................... 56
F. ID DAN CLASS ........................................................................................................................ 57
G. PROPERTI CSS ........................................................................................................................ 58
1. BACKGROUND ................................................................................................................. 58
2. FONT ............................................................................................................................... 58
3. TEXT ................................................................................................................................ 59
4. BORDER ........................................................................................................................... 60
5. MARGIN DAN PADDING ................................................................................................... 60
6. PSEUDO CLASS ................................................................................................................. 62

BAB 5. FORM .................................................................................................................. 64

A. BACKGROUND ....................................................................................................................... 64
B. BORDER................................................................................................................................. 66

BAB 6. DESAIN SITUS WEB .............................................................................................. 67

A. PEMBUATAN SKETSA ............................................................................................................. 67
B. TAHAPAN DESAIN DENGAN PHOTOSHOP .............................................................................. 68
1. MEMBUAT HEADER ......................................................................................................... 68
2. MEMBUAT BODY WEBSITE............................................................................................... 72
3. MEMBUAT FOOTER ......................................................................................................... 74

BAB 7. DESAIN WEB PERSONAL....................................................................................... 77

A. DESAIN LAYOUT..................................................................................................................... 77
B. TAHAPAN SKETSA HTML ........................................................................................................ 77
1. DESAIN HEADER............................................................................................................... 77
2. DESAIN DENGAN BAHASA HTML ...................................................................................... 78

BAB 8. DESAIN WEBSITE PERUSAHAAN ........................................................................... 82

A. DESAIN LAYOUT..................................................................................................................... 82
B. TAHAPAN SKETSA HTML ........................................................................................................ 83

BAB 9. JQUERY ............................................................................................................... 89

A. PENGENALAN JQUERY ........................................................................................................... 89
B. TRIK DASAR PEMAHAMAN JQUERY........................................................................................ 92

BAB 10. HOSTING DAN DOMAIN ..................................................................................... 98

A. HOSTING ............................................................................................................................... 98
1. JENIS JENIS HOSTING..................................................................................................... 98
2. KRITERIA MEMILIH WEB HOSTING ................................................................................... 99
3. BEBERAPA PENYEDIA HOSTING LOKAL DI INDONESIA....................................................... 99
4. CARA MENYEWA WEB HOSTING ...................................................................................... 99
B. DOMAIN ...............................................................................................................................100
C. FTP (FILE TRANSFER PROTOCOL)...........................................................................................101

BAB 1
PEMAHAMAN DASAR WEBSITE
A. PENGANTAR DESAIN WEB
1. Desain Web
Desain web adalah seni dan proses dalam menciptakan halaman web tunggal atau keseluruhan.
Sebagian dari aspek yang mungkin tercakup pada desain web atau produksi web adalah
menciptakan animasi dan grafik, pemilihan font, pemilihan warna, navigasi, isi. Desain web juga
menggabungkan pada seni programing dan pengembangan e-commerce. Desain web adalah
suatu format penerbitan elektronik.
Desain web sangat melibatkan estetika dan mood. Estetika berasal dari bahasa Yunani
aisthesis, yang kemudian dipopulerkan oleh Alexander Gottlieb Baungarten(1714-1762) dengan
nama aesthetica. Secara sederhana estetika bisa diartikan sebagai seni keindahan yang
mempengaruhi kenyamanan pengguna secara visual karena karya seni yang memenuhi nilainilai estetika akan tampak lebin indah dan mudah dicerna.
Mood adalah dasar dari sebuah desain untuk memberikan pesan kepada pengunjung mengenai
perasaan dari situs tersebut. Beberapa elemen dalam situs yang mengekspresikan mood
ditampilkan melalui warna, teks, layout, gambar/grafis, dan efek-efek pendukung lainnya.
Target pengunjung adalah langkah awal penentuan dari mood yang akan dihadirkan pada
sebuah situs.

2. WWW (World Wide Web)

WWW adalah kependekan dari World Wide Web, atau lebih dikenal dengan nama web. Web
adalah sebuah layanan yang didapat oleh pemakai komputer apabila komputernya tersambung
dengan internet. Dengan web, pengguna komputer diseluruh dunia dapat saling berinteraksi
dengan pengguna internet lainnya tanpa harus beranjak dari tempat dimana internet itu
diakses. Dengan akses internet maka pengguna layanan internet dapat dengan mudah
memperoleh informasi yang diinginkan, bahkan dapat menyimpan program, atau gambar yang
ditampilkan dari media internet.
Web merupakan suatu ruangan yang dapat menampung informasi dalam jaringan Internet
pada sebuah browser, dengan menambahkan kemampuan untuk mengolah kode-kode tertentu
yang secara umum dinamakan tag-tag (delimiter) dan kemampuan untuk dapat meloncat (link)
dari halaman satu ke halaman lainnya dan kemampaun untuk pengolah sebuah gambar, suara,
animasi, bahkan pengolahan database dari sebuah aplikasi berbasis web.

Pada perkembangan selanjutnya, web lebih banyak dikenal dengan nama Internet, karena
kemampuan dari interface web yang dapat mengelolah layanan-layanan yang terdapat pada
internet.

3. Cara Kerja WWW

Gambar 1. Cara kerja WWW

Penjelasan Cara Kerja WWW

1. Informasi informasi yang dibuat disimpan dalam sebuah dokumen web pages pada
sebuah tempat penyimpanan, yaitu hardisk.
2. Dokumen web yang disimpan dalam sebuah harddisk terletak pada web server apabila
komputer yang dimaksud telah dilengkapi dengan web server seperti IIS, PWS atau
Apache Server. Dalam hal ini komputer bertugas sebagai server sekaligus menyimpan
informasi.
3. Komputer yang bertugas sebagai client membaca informasi yang terdapat pada web
pages melalui sebuah jaringan internet dengan mengambil informasi yang tersimpan
pada komputer server.
4. Komputer client menampilkan halaman web dengan menggunakan sebuah program
khusus, yaitu browser.

4. Browser Web
Browser web adalah program yang digunakan untuk menampilkan informasi dari suatu halaman
web yang tersimpan dalam komputer. Dengan menerapkan Grafik User Interface (GUI), maka
para pengguna internet dengan mudah mengakses informasi-informasi yang terdapat pada
internet.

Cara Kerja Browser Web

1. Browser web mengambil sebuah informasi melalui jaringan internet pada sebuah server
web dengan perintah request.
2. Server web memberikan umpan balik atau feedback, dengan memberi perintah
responen
3. Browser web menampilkan informasi yang telah diterima dari server web.

5. Fungsi Website
Sebelum mendesain web, tentukan dan pahami beberapa fungsi situs web agar desain yang
dibuat sesuai dengan fungsi, estetika dan mood yang dikehendaki :
Fungsi Komunikasi
Website yang digunakan untuk komunikasi adalah website-website yang digunakan untuk
email, form contact, cahtting, forum dan sebagainya.
Fungsi Informasi
Website ini biasanya berisi teks dan grafik yang dapat didownload dengan cepet dan website
untuk fungsi informasi sebaiknya dilakukan pembatasan untuk penggunaan animasi, gambar
dan elemen bergerak. Website yang memberikan informasi misalnya News, Profile, Company,
Library, Reference dan sebagainya.
Fungsi Enetertaiment
Website yang difungsikan untuk sarana hiburan dengan banyaknya penggunaan gambar,
animasi dan elemen bergerak seperti game online, film online, musik online dan sebagainya.
Fungsi Transaksi
Website yang difungsikan untuk sarana bisnis, baik barang, ataupun jasa dengan metode
transaksi menggunakan kartu kredit atau pun transfer.

B. JENIS SITUS WEBSITE

Berikut ini jenis situs website yang dikelompokan sesuai dengan tujuannya :

1. Alat Pemasaran
Sebuah situs yang dibuat dengan tujuan untuk mempromosikan dan memasarkan produk
ataupun jasa layanan perusahaan dapat juga untuk sebuah company profile. Pemasaran melalui
internet lebih cepat sampai dan memiliki jangkauan yang lebih luas lagi.

Perencaan dalam merencang situs pemasaran dan promosi :

1. URL atau alamat situs web dapat menjadi aset pemasaran tersendiri dan disesuaikan
dengan posisi yang diinginkan.
2. Halaman web harus mengesankan pengunjung.
3. Letak isi menu tidak perlu terlalu banyak cukup simple akan tetapi menampilkan latar
belakang perusahaan (citra diri perusahaan).
4. Situs ini hanya memberikan informasi tidak bisa digunakan untuk transaksi online.
5. Informasi produk harus jelas.
6. Ada pencatatan pengunjung (guest book).

2. Nilai Tambah
Sebuah situs web sering dibuat hanya sebagai nilai tambah. Mungkin sebenarnya perusahaan
tidak terlalu membutuhkan situs web itu, tetapi menggunakannya hanya sekedar untuk
mengikuti tren sehingga perusahaan tampak lebih modern.
Perencanaan dalam merancang situs:
1. Adanya marketing tool
2. Adanya referensi atau informasi tambahan
3. Penggunaan web dirancang semudah mungkin
a. Katalog
Sebuah situs yang menampilkan produk-produk yang dijual oleh perusahaan. Dengan adanya
situs maka akan mempermudah untuk melakukan update terhadap produk yang akan dijual.

Perencanaan dalam merancang situs:

1. Adanya marketing tool
2. Informasi yang ditampilkan harus lengkap dan jelas.

3. Halaman situs user friendly (mudah untuk dipahami).

4. Transaksi hanya dapat dilakukan secara offline

b. E-Commerce
Adalah sebuah situs yang digunakan untuk melalukan transaksi pembelian dan pembayaran
secara online.
Bila sebuah halaman web yang akan disusun adalah halaman web yang berorintasi bisnis,
tujuan yang harus dicapai halaman web itu adalah meningkatkan order penjualan dari
pelanggan, menciptakan order dari pelanggan baru dan menekan keseluruhan biaya
pengeluaran.

Beberapa hal yang harus diperhatikan adalah :

1. Membuat nama domain sendiri.
2. Kecepatan akses sangat penting jadi jangan terlalu banyak menggunakan animasi
bergerak.
3. Pemilihan server (keamanan, kemudahan akses, stabilitas sistem server)
4. Tampilan situs memiliki kesan profesional
5. Email balasan
6. Cara pembayaran yang selengkap mungkin
7. Pencarian yang memudahkan pengunjung
8. Proses transaksi cepat dan mudah

c. E-Learning
Adalah sebuah website yang ditujukan sebagai media pembelajaran. E-learning bisa juga
digunakan untuk pembelajaran jarak jauh, untuk pelatihan.

Syarat yang harus terpenuhi dalam sebuah e-learning :

1. Sederhana

Untuk memudahkan peserta didik untuk menggunakan dan memanfaatkan menu yang ada,
dengan kemudahan panel yang disediakan mengurangi ketergantungan pengenalan sistem elearning sehingga waktu belajar termanfaat dengan baik tidak tersita untuk memahami sistem
e-learning,
2. Cepat
Bertujuan untuk kecepatan respon terhadap sebuah layanan keluhan dan kebutuhan perbaikan
peserta didik sehingga perbaikan pembelajaran dapat dilakukan secepat mungkin oleh pengajar
atau pengelolah.
3. Personal
Peserta didik dapat berkomunikasi dengan baik layaknya komunikasi tatap muka pengajar
dengan peserta didik secara langsung, peserta didik dapat dibantu kemajuannya dan segala
persoalan yang dihadapi.

a. Komunitas
Sebuah situs yang memungkinkan untuk komunikasi secara bersama. Pengunjung dapat
berbagi pengalaman dan cerita. Untuk menambah teman dan perkumpulan baru.

b. Portal
Adalah aplikasi berbasis web yang menyediakan akses suatu titik tunggal dari informasi online
terdistribusi.

c. Personal
Adalah situs yang memiliki tujuan untuk mempromosikan atau menginformasikan tentang
seseorang, biasanya berisi biodata, portofolio, prestasi ataupun cerita sehari-hari dari
seseorang.

C. ISTILAH-ISTILAH DALAM PEMROGRAMAN WEB

Beberapa istilah dalam pemrograman web, antara lain :
1. Internet adalah kependekan dari International Networking, yang artinya jaringan
komputer berskala internasional/global yang dapat membuat masing-masing komputer
saling berkomunikasi.
2. Intranet merupakan jaringan komputer berskala kecil, hanya memiliki beberapa web
server yang diperuntukan untuk organisasi atau perudahaan, dan digunakan sebagai
sarana komunikasi antara komputer dalam organisasi tersebut.

3. TCP/IP adalah kependekan dari Transmission Control Protocol / Internet Protocol

artinya protokol yang terdiri dari sub-protokol, yang beroperasi pada lapisan yang
berbeda. Ini merupalan protokol standar internet. Protokol ini memberikan nomor Unix
pada setiap komputer yang terkoneksi.
4. URL adalah kependekan dari Uniform Resource Locators, artinya sebuah alamat
didalam internet yang terdiri atas 2bagian. Bagian pertama pengenalan protokol dan
bagian kedua adalah pengenalan domain.
5. HTTP adalah kependekan dari Hypertext Markup Language, artinya protokol yang
berfungsi untuk mendefinisikan dan menjelaskan bagaimana server dan client
berinteraksi dalam mengirim dan menerima dokumen web.

BAB 2
PRINSIP PRINSIP DESAIN WEBSITE
Untuk membangun suatu website yang baik, seorang web designer sebaiknya memperhatikan
prinsip prinsip yang ada, terlepas ia mempunyai bakat seni atau tidak. Adapun prinsip
prinsip yang harus diperhatikan antara lain:

1. Unik, Yang dimaksud dengan unik dalam mendesain suatu website adalah kesadaran
seorang designer untuk tidak meniru atau menggunakan karya orang lain.
2. Komposisi, Untuk memperindah tampilan halaman web, seorang web designer harus
betul betul memahami komposisi, baik bentuk maupun warna yang akan digunakan
dalam website yang dibuatnya.
3. Simple, Banyak dari seorang web designer yang memegang prinsip prinsip Keep it
Simple. Hal ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif.
4. Semiotik, Arti semiotik adalah ilmu yang mempelajari tentang tanda tanda. Dalam
hal ini diharapkan pengunjung dapat dengan mudah dan cepat mengerti keika melihat
tanda dan gambar yang ada dalam suatu website.
5. Ergonomis, Ergonomis dalam mendesain website adalah kepunyaan yang akan
didapatkan pengunjung dalam membacadan kecepatan yang akan diperoleh
pengunjung dalam mencari informasi. Hal hal yang perlu diperhatikkan oleh seorang
webdesigener untuk mencapai prinsip ini adalah :
a. pemilihan ukuran fon yang tepat dan mudah dibaca
b. menempatkan link sedemikian rupa sehingga mudah dan dapat diakses dan yang
lebih penting lagi adalah suatu website terlihat lebih informative.
1. Fokus, Fokus adalah hierarki prioritas dari pesan yang akan disampaikan, dengan
adanya fokus tersebut, diharapkan pengunjung dapat memahami dan menentukan
pesan mana yang lebih dulu harus dibaca atau dilihat.
2. Konsistensi, Konsistensi adalah pemilihan bentuk atau style yang digunakan pada
elemen elemen perancangan web dan digunakan pada semua halaman website.
Website yang konsisten akan memberikan identitas tersendiri dan mampu
memperlihatkan visi serta misi dari website tersebut.

A. MERUMUSKAN TUJUAN MEMBUAT WEBSITE

Berdasarkan isi maupun tujuan, suatu website biasanya dapat digolongkan menjadi seperti
berikut ini :
1. Website marketing, berfungsi sebagai media presentase dan pemasaran
2. Website custumer service, berfungsi sebagai media untuk malayani konsumen
3. Website e-Cammerce, berfungsi sebagai media transaksi on-line
4. Website informasi/berita, berfungsi sebagai media informasi berita

a. Menentukan isi website

Faktor yang paling penting dalam suatu website adalah isi dari website itu sendiri. Hal tersebut
berkaitan dengan manfaat yang akan diperoleh pengunjung dari sebuah website.

b. Menentukan target pengunjung

Meskipun suatu website mempunyai sifat terbuka dalam arti sebuah website bebas dikunjungi
oleh semua orang, namun alangkah baiknya apabila dalam pembuatan website perlu dilakukan
gambaran target yang akan dituju oleh sebuah website. Alasan ini lebih didasarkan pada
pengguna hardware dan aplilkasi browser yang berbeda dengan setiap pengunjung.

c. Menentukasn struktur website

Struktur website diperlukan untuk memberikan kemudahan dalam mengelola suatu website.
Tentunya struktur tersebut harus disesuaikan dengan isi dari website. Dengan memiliki struktur
yang terorganisasi dengan baik, suatu website akan memberikan kemudahan dalam navigasi,
editing dan pemeliharaan website tersebut.

B. KONSEP DASAR DESAIN

Pada intinya konsep mendesain tampilan website sangat berkaitan dengan desain grafis, dan
pada dasarnya mengikuti prinsip desain grafis secara umum. Oleh karena itu alangkah baiknya
jika dalam memperhatikan prinsip desain.Prinsip desain tersebut adalah:

1. Komunikatif
Prinsip komunikatif berhubungan dengan corporate identy, isi pesan serta audiens.

2. Estetis
Fungsi estetis ini adalah memberikan suatu keindahan, sehingga lebih menarik minat
pengunjung untuk lebih menggali informasi yang ditawarkan dari suatu website.

3. Ekonomis

Desain web harus memperhatikan factor ekonomis dalam arti ukuran file yang digunakan. Hal
tersebut berkaitan erat dengan kecepatan akses yang ditawarkan suatu web.

C. ELEMEN LAYOUT
Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis hendaknya seorang web
designer perlu memperhatikan pedoman pedoman yang ada untuk membuat tata letak suatu
tampilan, yaitu dalam mengatur elemen elemen layout. Pedoman pedoman yang dimaksud
adalah:

1. Keseimbangan
Keseimbangan adalah hasil susunan satu atau lebih elemen desain sehingga antara satu
dengan lainnya memiliki bobot yang sama.

Ada tiga jenis keseimbangan antara lain :

a. Keseimbangan Simetris (Formal)
Adalah keseimbangan yang memiliki elemen yang bobotnya sama pada dua sis garis vertikal
imajiner halaman web. Sehingga bentuknya menjadi terkesan formal, sederhana, mudah
pembuatannya tetapi terkesan membosankan dan kurang menarik.

Gambar 2. Keseimbangan Simetris

10

b. Keseimbangan Asimetris (Informal)

Keseimbangan Asimetris mempunyai elemen yang tidak sama bobotnya pada dua sisi dari garis
vertikal imajiner halaman web sehingga tata letaknya tampak lebih dimanis karena adanya
ruang kosong, berkesan santai dan kasual.

Beberapa Faktor yang harus diperhatikan yaitu :

Warna sebagai penyeimbang antar objek. Bila objek lebih besar dari yang lain berikan
warna muda atau warna yang tidak terlalu kuat dan sebaliknya.

Bentuk, dimanaobjek yang memiliki kesan datar namun memiliki detail bentuk yang
sederhana akan seimbang dengan objek kecil dengan detail yang lebih teliti.

Posisi, menempatkan objek yang dominan pada posisi agak ketengah akan terlihat
seimbang dengan area dan objek yang lebih kecil pada lawan arahnya.

Gambar 3. Keseimbangan Simetris

c. Keseimbangan Asimetris (Informal)

Keseimbangan Asimetris mempunyai elemen yang tidak sama bobotnya pada dua sisi dari garis
vertikal imajiner halaman web sehingga tata letaknya tampak lebih dimanis karena adanya
ruang kosong, berkesan santai dan kasual.

Beberapa Faktor yang harus diperhatikan yaitu :

11

Warna sebagai penyeimbang antar objek. Bila objek lebih besar dari yang lain berikan
warna muda atau warna yang tidak terlalu kuat dan sebaliknya.

Bentuk, dimanaobjek yang memiliki kesan datar namun memiliki detail bentuk yang
sederhana akan seimbang dengan objek kecil dengan detail yang lebih teliti.

Posisi, menempatkan objek yang dominan pada posisi agak ketengah akan terlihat
seimbang dengan area dan objek yang lebih kecil pada lawan arahnya.

Gambar 4. Keseimbangan Asimetris

d. Keseimbangan Radial
Semua elemen memancar keluar dengan model melingkar dari titik tengah suatu objek.
Keseimbangan radial lebih mudah untuk diimplementasikan karena objek akan seimbang bila
objek berada ditengah. Untuk itu dengan menempatkan objek pada posisi tengah maka desain
akan nampak seimbang.

2. Kontras
Diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya. Kontras
dapat dinyatakan dengan membedakan ukuran serta warna dari elemen elemen layout.
Pemberian kontras pada suatu objek haruslah kontras positif, karena jika kontras yang
diberikan negatis maka objek tersebut akan menjadi samar-samar, bahkan tidak terlihat karena
terserap oleh background.

3. Konsistensi

12

Informasi lebih dimengerti oleh pengguna bila mempunyai aliran aliran yang baik, sedikit
gangguan yang mengambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonis
bila tampilannya mencerminkan kesinambungan dari satu bagian kebagian lain. Konttinuitas
dapat dibuat dengan membuat halaman halaman mempunyai gaya, bentuk atau warna yang
memberikan pengguna merasakan kesinambungan dengan halaman lainnya.
Konsistensi membuat pengunjung nyaman karena dapat menjelajah situs dengan mudah.
Ketika pengunjung membuka suatu halaman situs yang konsisten, dia akan langsung tahu
kemana harus pergi dan dia juga tahu dimana sedang berada.
Konsistensi dapat diterapkan pada margin, layout, huruf, warna dan yang paling utama adalah
navigasi. Konsistensi sangat efektif untuk membangun brand perusahaan. Brand bukan hanya
logo tapi sekumpulan atribut, meliputi logo, slogan, warna dan kualitas emosional.

Gambar 5. Konsistensi pada Situs Web

4. Ruang Kosong
Ruang kosong dibentuk dengan berbagai cara sehingga dapat menambah kesan elegan dan
kesempurnaan pada suatu desain. Ruang kosong sebagai prinsip desain grafis mungkin dapat
dilihat serupa dengan ruang yang disia-siakan. Ruang kosong kemudian berarti sebuah
kemewahan dan semakin Anda kurang penggunaan sesuatu semakin Anda mendapatkan lebih
banyak the less you use the more you must have.
Lebih banyak ruang kosong dilihat sebagai sesuatu yang lebih atau sesuatu yang mahal dan
dapat memberikan posisi tertentu dalam kaitan brand sebuah perusahaan dengan target
penjualan dengan konsumen kelas atas atau posisi desain itu sendiri. Desain dengan ruang
kosong yang rapat dan penuh sesak akan terlihat sebagai sebuah cara untuk menghemat
biaya. Membuat ruang kosong akan benar-benar menambah nilai untuk brand pada produk
tertentu.

13

Gambar 6. Ruang kosong

Gambar 7. Ruang Kosong

Fungsi Ruang Kosong :

Tempat istirahat mata pembaca

Menghubungkan antara elemen-elemen dalam sebuah layout

Membuat bentuk positif dan negatif

Memberi nuansa 3 dimensi

14

Menegaskan sebuah elemen

Mempermudah pemahaman layout

Membuat halaman tampak dinamis

Mempermudah membaca text

D. PEWARNAAN
Warna merupakan sensitivitas yang berhubungan dengan indra. Warna dapat merebut
perhatian, menarik, menolak, menggemaskan bahkan warna bisa mempengaruhi emosi. Warna
dapat menimbulkan kesan pertama pada pengunjung ketika menjelajah sebuah situs web.
Warna modern biasanya terkesan bersih dan bercahaya, seperti biru dan kuning. Warna
bersahabat biasanya terkesan ceria dan menyenangkan, seperti orange, kuning, hijau. Warna
perusahaan biasanya bersih, seperti biru, putih dan abu abu. Warna anak anak biasanya
terkesan ceria dan menonjol, seperti merah, kuning dan biru (warna primer).

1. Aspek Psikologi Warna

Warna mempunyai emosi yang melekat, yang bisa ditimbulkan dengan memperlihatkan
keserasian warna dengan cara yang benar. Berikut ini yang makna terkandung di dalam warna
:
Warna

Makna Positif

Makna Negatif

Merah

Kekuatan, energi, tenaga,

hasrat , cinta. Dengan sedikit

Bahaya, perang, kekejaman,

kekerasan, api, darah. Terlalu
banyak warna merah bisa
disangka terlalu agresif .

memberikan warna merah

bisa menimbulkan gairah,
membangkitkan semangat,
mendorong keinginan.
Merah Muda

Kewanitaan (feminim),
keremajaan (masa muda).

Naif,kelemahan, kekurangan.

Orange

Kehangatan, bersemangat,
ceria, keseimbangan, musim
gugur, menimbulkan getaran

Meminta dan mencari

perhatian

Kuning

Sinar matahari, emas,

kekayaan, keberuntungan,
kehidupan.

Tidak jujur, pengecut,

cemburu, iri hati,
penghianatan, penipuan,
kebohongan, resiko, sakit

Hijau

Alam, lingkungan, hidup,

pertumbuhan, stabil, santai

Kecemburuan, nasib buruk, iri

15

kesuburan, harapan.

hati, dengki.

Biru

Kepercayaan, kesetiaan,
ketenangan, kedamaian,
ketulusan, kesejukan, air,
awan, harmoni, kebersihan,
konservatif, percaya diri,
penyembuhan. Merupakan
warna yang aman dipakai
untuk desain.

Kesedihan, kedinginan,
depresi, penurunan vitalitas.

Ungu

Kebangsawanan, perubahan,
spiritual.

Kesombongan, keangkuhan,
kejam, kasar, duka cita.

Coklat

Tanah, bumi, netral, hangat,

keamanan, perlindungan

Tumpul, kotor, membosankan

Abu-abu

Modern, cerdas, bersih,

kokoh, masa depan,
intelektual .

Umur tua, kesedihan, bosan.

Putih

Kesucian, kebersihan,
kemurnian, kesederhanaan,
damai, kebaikan, disiplin,
perawan, perkawinan, musim
dingin, musim salju.

Kematian ( budaya timur ),

dingin, mandul, steril, klinik,
hampa.

Hitam

Kekuatan, keanggunan,
kemewahan, misteri,
kecanggihan, kemakmuran,
kepuasan, pengalaman, keras,
kokoh, sangat kuat.

Kematian ( budaya barat ),

takut, setan, kesedihan, duka
cita, marah, anonim,
penyesalan.

2. Warna dalam Desain Web

Warna banyak berperan dalam pembuatan situs, beberapa variasinya antra lain :
a. Menegaskan elemen yang dianggap penting.
b. Menarik perhatian.
c.

Membimbing pembaca untuk menentukan daerah mana yang seharusnya lebih dahulu
dibaca.

d. Menghubungkan antara satu elemen dengan yang lain (penggunaan warna background
halaman yang sama dengan background foto)
e. Mengatur informasi yang ditampilkan.

16

f.

Menentukan bagian yang berbeda pada sebuah grafik.

g. Mengelompokan atau memisahkan elemen yang satu dengan yang lain.

h. Membangkitkan respon yang emosional.

3. Jenis Warna
a. Warna Primer
Warna primer tidak bisa dibuat dengan mencampurkan warna lain, warna ini berdiri sendiri.
Warna primer terdiri atas merah, kuning, dan biru.

Gambar 8. Warna Primer

b. Warna Sekunder
Warna sekunder dibuat dengan mengkombinasikan dua warna primer. Warna sekunder terdiri
atas orange, hijau dan ungu.

Gambar 9. Warna Sekunder

c. Warna Tersier
Warna Tersier dibuat dengan mengkombinasikan warna primer dengan perbatasan warna
sekunder. Warna tersier terdiri atas kuning-hijau, kuning-orange, merah-orange, merah-ungu,
biru-ungu, dan biru-hijau.

17

Gambar 10. Warna Tersier

4. Metode Pemilihan Warna

Keserasian bisa didefinisikan sebagai bagian dari susunan yang menyenangkan, bisa berwujud
musik, puisi atau warna. Metode untuk memilih warna yang serasih, yaitu :

a. Metode Warna Beruntun

Warna beruntun terdiri atas tiga warna yang letaknya saling bersebelahan dan biasanya ada
satu warna yang menonjol (dominan). Metode ini menghasilkan warna lembut yang serasi,
misalnya kuning, kuning-orange dan orange atau kuning, kuning-hijau dan hijau.

b. Metode Warna Berlawanan

Warna berlawanan terdiri dari atas dua warna yang letaknya saling bersebrangan. Metode ini
menghasilkan warna yang lebih hidup (kontrasnya tinggi), misalnya biru dan orange, merah
dan hijau, atau kuning dan ungu.

c. Metode Warna Segitiga

Warna segitiga sesuai dengan namanya terdiri atas tiga warna yang letaknya ditentukan
dengan bentuk segitiga. Metode ini menghasilkan warna yang serasi, misalnya biru, merah dan
kuning.

d. Metode Warna Memudar

Metode ini menggunakan satu warna yang diturunkan intensitas warnanya menjadi lebih muda,
misalnya warna merah akan diturunkan intensitas warnanya sebanyak 50% atau 75%.

e. Metode Warna Kombinasi

18

Warna kombinasi adalah gabungan dari dua warna atau lebih yang menghasilkan warna yang
harmonis. Beberapa warna kombinasi yang baik, yaitu :

Hitam, putih, abu abu, merah

Merah, orange

Orange, Ungu

Ungu, Kuning

Hijau, Ungu

Biru, Kuning

Biru, Ungu, Putih

Hijau, Coklat

Teal, Ungu/Lilac

f.

Metode Warna Hangat

Warna hangat cocok digunakan untuk situs yang penuh semangat dengan tema yang berani
dan tegas. Warna hangat terletak pada bagian kanan roda warna. Warna hangat terdiri dari
kombinasi :

Kuning

Kuning-Orange

Orange

Merah-Orange

Merah

Merah-Ungu

g. Metode Warna Dingin

Warna dingin cocok untuk menyampaikan pesan yang sederhana yang memberi kesan tentram.
Warna dingin terletak pada bagian kiri roda warna. Warna dingin terdiri dari kombinasi :

Kuning-hijau

Hijau

19

Biru-hijau

Biru

Biru-ungu

Ungu

E. TIPOGRAFI
Tipografi adalah seni dalam huruf yang meliputi pemilihan huruf, penentuan ukuran yang tepat,
dimana teks dapat diputus, spasi jarak, dan bagaimana teks dapat dengan mudah dibaca.

1. Jenis Huruf
Jenis huruf sangat banyak, tapi secara garis besar dapat dikategorikan menjadi lima, yaitu:
a. Serif
Jenis huruf ini merupakan jenis huruf yang tradisional, cirinya mempunyai kaki atau ekor,
misalnya Times New Roman, Garamond, Palatino. Karena bentuk hurufnya yang berkaki
membuat garis tidak kelihatan, ini memudahkan mata pembaca untuk menelusuri dan
membaca teks. Jadi huruf ini cocok dipakai untuk teks yang panjang dengan jarak spasi yang
sedikit. Bentuk huruf ini memberikan kesan formal, intelektual, anggun dan konservatif. Cocok
dipakai untuk organisasi, pemerintahan, pendidikan dan perusahaan.

Gambar 11. Font Serif

b. Sans-Serif
Sans-serif yang berarti tidak berkaki (bahasa perancis), misal jenis huruf ini adalah Helvetica,
Arial, Verdana dan Avant Garde. Jenis ini terlihat sederhana dan tidak formal, sehingga cocok
untuk judul dan subjudul. Jika ingin menggunakan jenis ini untuk teks utama, imbangi dengan
memberikan jarak spasi yang agak lebar pada teks.

20

Gambar 12. Font Sans-Serif

c. Dekoratif
Jenis huruf yang mempunyai desain yang rumit, sesuatu yang baru dan menciptakan suasana
hati yang membangkitkan emosi. Jadi jangan sampai digunakan untuk teks yang panjang atau
isi dari halaman. Gunakanlah untuk judul dan grafik, tapi jangan terlalu banyak.

Gambar 13. Font Dekoratif

d. Skrip
Jenis ini menyerupai tulisan tangan. Jenis ini juga sering disebut kursif. Dan jangan terlalu
banyak digunakan. Bentuk huruf ini memberikan kesan keanggunan, sentuhan pribadi dan
kepuasan.

Brush Script
Kuenstler Script
Gambar 14. Font Skrip

21

e. Monospace
Jenis huruf yang mempunyai jarak dan lebar yang sama pada setiap huruf, misalnya courier,
monospace.

Gambar 15. Font Monospace

2. Penggunaan Huruf
Ada beberapa tip agar huruf dapat dibaca dengan mudah dan enak dilihat, yaitu:
1) Buatlah kontras yang tinggi antara teks dengan latar belakang atau antara teks dengan
gambar.
2) Pilihlah jenis huruf yang mudah dibaca, biasanya jenis serif dan sans-serif. Jenis huruf
dekoratif atau kursif lebih sulit untuk dibaca, biasanya dipakai untuk judul, itupun harus
berukuran besar.
3) Kadang kadang jenis huruf sans-serif mudah dibaca daripada serif ketika karakter
yang digunakan berukuran kecil .
4) Aturlah leading dan kerning. Leading adalah spasi antara dua baris teks, sedangkan
kerning adalah jarak spasi antar huruf.
5) Gunakan huruf standar yang terdapat pada semua komputer atau browser, seperti
Times New Roman, Helvetica, Arial dan Verdana. Jika menginginkan jenis huruf lain
yang unik untuk keindahan, jadikan huruf tersebut sebagai grafik.

3. Petunjuk Pemilihan Huruf

Beberapa petunjuk atau aturan baku yang digunakan dalam penggunaan huruf, baik dalam
pemilihan ukuran, jenis dan lain lain:
1) Secara formal, pasangkan jenis huruf serif untuk isi halaman dan sans-serif untuk judul.
2) Jika menggunakan beberapa macam jenis huruf dalam sebuah halaman, biasanya jenis
huruf dekoratif atau skrip digunakan untuk judul dan serif atau sans-serif untuk isi
halaman, agar berfariasi.

22

3) Usahakan jangan lebih dari dua belas kalimat dalam satu baris teks, kanera akan
mempersulit pembacaan.
4) Hindari pemakaian kombinasi dua huruf yang sangat mirip, karena menghasilkan
kontras yang rendah, ini menyebabkan ketidakserasian dan ketidakcocokan dalam
pandangan
5) Membatasi pemakaian jenis huruf dalam satu halaman. Jangan sampai melebihi tiga
atau empat jenis huruf.
6) Hindari penggunaan slider (penggulungan halaman) lebih dari sekali. Apabila banyak
artikel yang ingin ditampilkan, buatlah link ke halaman lain.
7) Ukuran huruf untuk isi halaman adalah 10-14 point dan judul adalah 14-30 point.
8) Memberikan ketebalan dan huruf besar (kapital) pada teks untuk judul, agar dapat
membedakan dengan isi halaman
9) Hindari telalu banyak huruf besar karena akan memperlambat kecepatan membaca dan
memboroskan ruang
10) Hindari pemakaian jenis huruf monospace untuk isi halaman, karena memerlukan
banyak perhatian untuk membacanya. Hal ini dapat mengalihkan pesan yang ingin
disampaikan.

F. LAYOUT
Layout adalah proses penataan dan pengaturan teks atau grafik pada halaman. Layout meliputi
penyusunan, pembagian tempat dalam suatu halaman pengaturan jarak spasi, pengelompokan
teks dan grafik, dan penekanan pada suatu bagian tertentu. Secara umum, halaman web
memaki lima jenis layout dan pemilihan layout yang disesuaikan jenis informasi yang
ditampilkan.

1. Model Layout Top Index

Biasanya digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine.

Gambar 16. Model Layout Top Index

23

2. Model Layout Bottom Index

Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal.

Gambar 17. Model Layout Bottom Index

3. Model Layout Left Index

Biasanya digunakan untuk layar dengan resolusi yang lebar, sehingga mudah dalam penyediaan
navigasi dibagian kiri seperti tampilan sistem opersi, tanpa menimbulkan kekacauan penyajian
informasi pada halaman utama.

Gambar 18. Model Layout Left Index

4. Model Layout Right Index

Kebalikan dari Left Index tetapi menu utama jarang terletak pada bagian sebelah kanan
melainkan sering digunakan untuk meletakan fitur atau kontent dari menu utama.

24

Gambar 19. Model Layout Right Index

5. Model Layout Split Index

Halaman akan terjaga keseimbangannya.

Gambar 20. Model Layout Top Index

6. Model Layout Alternating Index

Biasanya digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang
disertai dengan teks berupa keterangan, harga, jumlah dan lain lain.

25

Gambar 21. Model Layout Alternating Index

G. PEMBUATAN LAYOUT
Bermacam-macam langkah yang digunakan untuk membuat layout dari suatu website. Berikut
ini merupakan proses secara umum banyak dilakukan dalam pembuatan layout sebagai berikut
:
1. Membuat Sketsa Desain
Seorang desainer bias saja menuangkan ide dalam pembuatan interface dengan terlebih dahulu
membuat sketsa diatas kertas. Namun untuk kebanyakan orang, langkah ini biasanya
dilewatkan dan langsung pada langkah pembuatan layout desain dengan menggunakan
software.
2. Membuat Layout Desain
Banyak software yang dapat digunakan membuat layout. Salah satu diantaranya adalah
Macromedia, Microsoft Fronpage proses ini dikerjakan setelah pembuatan sketsa desain.
Namun terkadang pembuatan layout merupakan proses yang pertama kalai dikerjakan.
3. Membagi Gambar Menjadi Potongan-Potongan Kecil
Proses ini diperlukan untuk meng-optimize waktu download.
4. Membuat Animasi
Animasi diperlukan untuk menghidupkan atau menjadikan website lebhi interaktif.
5. Membuat HTML
Setelah merapikan layout desain lengkap dengan tombol, image, teks, script HTML, hal yang
perlu dilakukan kemudian adalah membuat layout ke dalam format HTML.

26

H. KRITERIA SITUS WEB YANG BAIK

1. Usability
Usability adalah sebagai suatu pengalaman pengguna dalam berinteraksi dengan aplikasi atau
situs web sampai pengguna dapat mengoperasikannya dengan mudah dan cepat. Web site
harus memenuhi lima syarat untuk mencapai tingkat usability yang ideal, antara lain
:
a. Mudah untuk dipelajari
Letakkan isi yang paling penting pada bagian atas halaman, agar pengunjung dapat
mendapatknya dengan cepat.
b. Efisien dalam penggunaan
Jangan menggunakn link yang terlalu banyak, sediakan seperlunya dan hantarkan pengunjung
untuk menncapai informasi yang diperlukan dengan cepat dan mudah.
c. Mudah untuk diingat
Situs jangan terlalu banyak melakukan peruban yang terlalu mencolok khususnya pada
navigasi.
d. Tingkat kesalahan rendah
Hindari link yang tidak berfungsi (broken link) atau halaman masih dalam proses pembuatan
(under construction).
e. Kepuasan pengguna
Kepuasan adalah hal yang penting untuk diperhatikan untuk keberlngsungan web site.

2. Navigasi
Beberapa tip untuk membuat navigasi yang baik, yaitu :
1) Buatlah navigasi yang jelas dan ringkas.
2) Umumnya, navigasi diletakan di sebelah kiri atau di atas sebuah halaman web.
3) Navigasi bisa berbentuk teks atau grafik. Apabila navigasi berbentuk grafik sertakan
pula teks pada grafik tersebut.
4) Berikan ruang antara navigasi.
5) Hindari pemakaian frame untuk navigasi, karena membuat desain terlihat statis.

27

6) Jaga konsistensi. Letakan pada tempat yang sama di tiap halaman, gunakan warna
yang sama, dan tempatkan pada tempat yang mudah untuk dilihat.

Beberapa tip untuk membuat link yang standar, yaitu :

1) Gunakan garis bawah untuk menandai sebuah link. Dan hindari garis bawah teks yang
bukan link.
2) Bedakan warna sebuah link yang belum pernah dikunjungi dengan yang sudah.
3) Jangan sampai link yang tidak berfungsi (broken link). Dan link yang belum ada isinya,
jangan dicantumkan.
4) Gunakan breadcrumb untuk mempermudah pengunjung untuk menjelajahi situs
dengan cepat.

Beberapa tip untuk menghindari warna buta (warna yang jelek), yaitu :
1) Hindari menggunakan hanya warna hijau dan warna merah saja dalam desain. Karena
kebanyakan orang tidak bisa membedakan antara bayangan warna merah dan warna
hijau.
2) Jangan menggunakan warna sebagai petunjuk. Lebih baik gunakan petunjuk lain yang
lebih dimengerti.
3) Buatlah kontras yang tinggi antar teks dengan background.

3. Grafik Desain
Beberapa tips untuk membuat desain visual yang baik :
1) Gunakan desain visual untuk menciptakan kejelasan kegunaan, sesuai dengan tujuan
situs web tersebut, dan desainnya harus mempu mengkomunikaskan, mendukung dan
menyempurnakan tujuan situs web secara visual.
2) Buat situs web yang berkesan profesional dan orisinil.
3) Keep it clean and simple. Jaga situs web agar tetap bersih dan sederhana. Jangan
sampai user teralihkan perhatiannya dari tujuan awal dibuatnya situs web.
4) Jaga grafik agar berukuran kecil dan gunakan fasilitas optimize pada program

penggunaan grafik.
5) Gunakan format yang tepat. Format JPEG dan PNG 24 bit digunakan untuk foto. Format
GIF dan PNG 8 bit digunakan untuk image berwarna sederhana.

28

4. Content
Beberapa tips untuk membuat konten yang baik :
1) Kenali audien. Tulislah dengan gaya mereka dan sesuaikan dengan isinya.
2) Jaga konten agar tetap up to date untuk meningkatkan gaya lengkat untuk datang
kembali berkunjung.
3) Nyatakan kebijakan dengan jelas.
4) Dahulukan kualitas diatas kuantitas.
5) Buat tulisan pada halaman web agar dapat dengan mudah dan cepat di scan.

5. Compatibilty
Beberapa tips untuk meningkatkan kompatibilitas :
1) Test diberbagai jenis browser.
2) Pastikan situs web bekerja paling tidak di platform PC.
3) Jika memungkinkan tawarkan pilihan tampilan situs.
4) Kalo memakai plug-in pastikan pengunjung dapat dengan mudah mendowloadnya.

6. Loading Time
Beberapa tips untuk meningkatkan loading time :
1) Uji coba untuk berbagai kecepatan koneksi.
2) Jika menggunakan grafik, jaga grafik agar berukuran kecil dan gunakan fasilitas
optomize pada program pengolahan grafik.
3) Lakukan slicing pada image secara efektif.
4) Gunakan atribute pada image.
5) Lakukan manajemen table yang baik.
6) Gunakan animasi dan suara sekecil mungkin.

29

7. Functionality
Seberapa baik sebuah situs web bekerja dari aspek teknologinya, ini bisa melibatkan programer
dengan script-nya, misalnya dengan HTML, PHP, ASP, ColdFusion, CGI, SSI dan lain-lain.

30

BAB 3
PENGENALAN BAHASA HTML
A. DEFINISI HTML
HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata cara
penulisan yang digunakann dalam dokumen web. Dokumen HTML adalah sebuah dokumen text
murni yang dapat dibuat dengan editor web sembarangan seperti notepad.

Dokumen ini akan dijalankan oleh sebuah web browser misalnya internet explorer, mozilla
ataupun opera. Sehingga mampu menampilkan tampilan sesuai keinginan designer atau
programer web. Tag HTML tidak case sensitive. Jadi bisa menggunakan <HTML> atau <html>.
keduanya menghasilkan output yang sama.

HTML berawal dari bahasa SGML (Standard Generalized Markup Language) yang
penulisannya disederhanakan. HTML dapat dibaca oleh berbagai platform. HTML juga
merupakan bahasa pemrograman fleksibel, dapat disisipi /digabungkan dengan bahasa
pemrograman lainnya.

B. STRUKTUR DASAR HTML

Gambar 22. Struktur Dasar HTML

Keterangan:

HTML, setiap dokumen HTML dimulai <HTML> dan diakhiri dengan tag </HTML> yang
menyatakan bahwa suatu dokumen adalah dokumen HTML.

31

Head. Bagian header dokumen HTML, secara umum berisi informasi mengenai
dokumen.

Body. Merupakan isi dokumen sebenarnya

C. FORMAT TAMPILAN SDERHANA

1. Tag untuk Headline
Tag Headline/heading adalah tag yang digunakan untuk membuat judul dari isi dokumen HTML.
tag heading memiliki 6buah bilangan terdiri atas 1, 2, 3, 4, 5 dan 6. Masing-masing bilangan
yang terdapat pada heading berfungsi untuk mewakili ukuran ukuran dari besarnya tag
heading. Bilangan pertama merupakan ukuran terbesar sedangkan yang terkecil adalah
bilangan terakhir.
Sintag Heading/headline adalah sebagai berikut :

<hn [properti]> ..............................</hn>

Keterangan :

n adalah bilangan yang terdiri dari 1 sampai 6

Properti kemampuan tambahan yang dimiliki tag heading

Properti

Keterangan

Align

Pengaturan letak headline/heading.

Left, Right, Center, Justify

<h1 align=left> isi text </h1>

Contoh Penulisan Tag Headline/Heading

32

Gambar 23. Struktur Headline

Gambar 24. Contoh Heading

2. Paragraf
Digunakan untuk memberi pengaturan paragraf pada text yang akan ditampilkan.

<p [properti]>........................... </p>

33

Properti

Keterangan

Align

Pengaturan letak patagraf.

Left, Right, Center, Justify

<p align=left> isi text </p>

Contoh penggunaan paragraf

Gambar 25. Contoh Paragraph

Gambar 26. Contoh Heading

34

3. Tag Style Sederhana

Tag style digunakan untuk mengatur format text, dapat berupa text tebal, miring atau tulisan
seperti bentuk kode program.

Perhatikan Tabel Berikut:

Fungsi

Tag Logikal

Tag Fisikal

Untuk membuat text tebal

<strong>

<B>

Untuk membuat text miring

<EM>

<I>

Untuk huruf fixed

<code>

<TT>

Keterangan :

Tag Logikal : tampilan akan dibuat sebaik mungkin tanpa kemampuan resolusi cetak
dari printer pada komputer yang sedang melakukan browsing dokumen kita.

Tag Fisikal : tampilan akan disesuaikan dengan kemampuan resolusi cetak dari printer
pada komputer yang sedang melakukan browsing dokumen kita.

Contoh Penggunaan :

Gambar 27. Contoh Tag Style Sederhana

Gambar 28. Tag Style Sederhana

35

D. FORMAT ELEMEN TEXT

1. Format Text
a. Cetak Tebal / Bold
Cetak tebal digunakan untuk menebalkan teks agar berbeda dengan teks lainnya dalam sebuah
dokumen HTML.

<b>text </b>

b. Cetak Miring / Italic

Cetak miring digunakan untuk menampilkan agar text yang akan ditampilkan agak sedikit lebih
miring dari text yang lainnya dalam sebuah dokumen HTML.

<i>text </i>

c. Cetak Garis Bawah / Underline

Garis bawah digunakan untuk menampilkan agar text yang akan ditampilkan memiliki garis
dibawak kalimat dalam dokumen HTML.

<u>text </u>
d. Mengecilkan Huruf / Small
Untuk mengecilkan huruf didalam dokumen HTML. digunakan tag small untuk membuat text
agar tampak berbeda dari teks yang lainnya.

<small>text </small>
Contoh :

<p>nama saya dini, <small>19 Juli 1987

</small> saya dilahirkan </p>

36

Hasil

Gambar 29. Tag Style Small

e. Membesarkan Huruf / Big

Untuk membesarkan huruf di dalam dokumen HTML digunakan tag big untuk membuat sebuah
text agar tampak berbeda dari text yang lainnya.

<big>text </big>
Contoh :

<p>nama saya dini, <big>19 Juli 1987 </big>

saya dilahirkan </p>

Gambar 30. Tag Style Big

f.

Mencoret Text / Strike

Untuk mencoret sebuah kata pada sebuah dokumen HTML sebagai perbedaan dengan
penggunaan kata yang lainnya.

<strike>text </strike>

37

Contoh :

<p>nama saya dini, <strike>19 Juli 1987

</strike> saya dilahirkan </p>

g. Subscript dan Superscript

Untuk membuat rumus aritmatika berupa pemangkatan dan rumus kimia didalam dokumen
HTML.

^{text superscript}
_{text subscript}

Contoh :

2⁵ + 5<sup>2</sub>
H₂SO₄

Gambar 31. Tag Style Sup & Sub

38

h. Tag Pre-Formatted Text

Merupakan tag yang digunakan untuk membuat satu blog tulisan yang tata letaknya dapat kita
atur sesuai dengan keinginan kita dan sesuai dengan tampilan pada saat pembuatan.

<pre>tulisan</pre>

Contoh :

Gambar 32. Contoh Tag Style PRE

Gambar 33. Tag Style PRE

39

i.

Tag Garis Pemisah Horizontal

Digunakan untuk membuat garis pemisah antar baris atau untuk membuat garis horizontal
sepanjang lebar halaman homepage.

<HR [properti]>

<HR> tidak memiliki tag penutup

Berikut adalah property yang bisa disisipkan pada tag <HR>
Properti

Fungsi

Align

Posisi garis ( center, left, right)

Size

Ukuran tebal garis

Width

Ukuran lebar/panjang garis

Color

Warna garis

Contoh :

Gambar 34. Contoh Tag Style HR

40

Gambar 35. Tag Style HR

E. ANCHOR DAN LINK

Dokumen HTML dilengakapi dengan kemampuan yang berpindah-pindah dari halaman satu ke
halaman lainnya (link). Link dalam halaman HTML ditandai dengan menggaris bawahi teks yang
akan di link, atau pointer mouse akan berubah menjadi bentuk jari apabila berada pada objek
link atau (gambar/text).
<a href=nama dokumen yang dilink [atribut] >..text/gambar...</a>
Hyperlink dibedakan menjadi :

1. Link Absolut
Adalah sebuah link yang digunkan untuk mengaitkan halaman webyang satu dengan halaman
web yang lainnya didalam situs internet.
<a href=alamat internet [atribut] >..text/gambar...</a>
Contoh :
<a href=http://www.palcomtech.ac.id>PalComTech</a>

2. Link Relatif
Adalah link yang digunakan untuk mengaitkan halaman web yang satu dengan halaman web
lainnya di dalam satu komputer tanpa harus menuliskan secara lengkap alamat situs internet
seperti pada alamat link absolut.

41

Contoh :

<a href=home.html>Home</a>
F. IMAGE
Image atau gambar didalam dokumen HTML berfungsi untuk menambah daya tarik dari sebuah
website. Namun penggunaannya akan mengakibatkan semakin besarnya penggunaan byte dari
dokumen HTML yang secara otomatis akan berakibat pula pada kinerja atau memperlambat
waktu tampil dari halaman web tersebut.

Pada umumnya, gambar yang ditampilkan pada halaman web akan disajikan bersama teks dari
halaman web tersebut. Format gambar yang banyak digunakan dalam halaman web , antara
lain GIF (Graphics Interchange Format), JPEG ( Joint Photographics Experts Group).

<img src=lokasi gambar[properti]>

Berikut adalah properti yang bisa disisipkan pada gambar
Properti

Fungsi

SRC

Menentukan alamat dan nama file image

LOWSRC

Menentukan alamat dan nama file image resolusi

rendah, yang akan ditampilkan saat menunggu loading
image.

ALT

Text alternative yang akan ditampilkan jika browser

dalam text mode.

ALIGN

Menentukan posisi gambar (Left, right, top, bottom)

BORDER

Menentukan tebal border/bingkai disekitar image (diisi

dengan nilai integer)

HEIGHT

Menentukan tinggi dari gambar, diisi dalam pixel atau

persen(%)

WIDTH

Menentukan lebar gambar, diisi dalam pixel atau

persen(%)

42

Contoh :

Gambar 36. Contoh Tag Image

Gambar 37. Contoh Image

G. LIST ITEM
List adalah sebuah uraian yang terdiri atas item-item dari suatu daftar yang dilengkapi dengan
nomor baik nomor alfabetik ataupun numerik. Dalam HTML terdapat 2 bentuk daftar atau List,
yaitu :

1. Ordered List / List Bernomor

Ordered List adalah model dari suatu daftar yang setiap itemnya diberikan nomor.

<ol>

<li>....isi list....</li>

43

<li>....isi list....</li>

</ol>

Contoh Penggunaan Ordered List :

Gambar 38. Contoh Tag Ordered List

Gambar 39. Penggunaan Ordered List

2. Unordered List / List Tanpa Nomor

Unordered list adalah model dari suatu daftar yang setiap itemnya tidak diberikan nomor, akan
tetapi digantikan dengan bulled list.

<ul>

<li>....isi list....</li>
<li>....isi list....</li>

</ul>

44

Contoh Penggunaan Unordered List

Gambar 40. Contoh Tag UnOrdered List

Gambar 41. Penggunaan UnOrdered List

H. TABLES
Tabel adalah sebuah sarana untuk menginformasikan data-data berupa baris dan kolom. Pada
umumnya setiap kolom menunjukan data-data yang sama dalam suatu kelompok data.
Sedangkan baris menunjukan data-data dari kolom-kolom yang menunjukan sekelompok data
dalam suatu kumpulan.

45

<table[properti]>
<tr>

</tr>

<tr>

</tr>

<th>......</th>
<th>......</th>

<td>......</td>
<td>......</td>

</table>

Keterangan :

<table> adalah tag yang berfungsi untuk mendefinisikan sebuah table

<tr> adalah tag yang berfungsi untuk membuat baris

<th> adalah tag yang berfungsi untuk membuat tag heading/judul

<td> adalah tag yang berfungsi untuk membuat sel/kolom.

46

Property Table
Properti

Fungsi

Align

Untuk menentukan posisi tabel pada dokumen ((Left,

right,center)

Bgcolor

Untuk memberikan warna pada table. TH, TR

ataupun TD

Border

Untuk menentukan ketebalan garis pada table

Cellpadding

Untuk menentukan lebar spasi antar border dan isi

sel

Cellspacing

Untuk menentukan lebar spasi antar sel

HEIGHT

Menentukan tinggi tabel

WIDTH

Menentukan lebar table

Valign

Untuk menentukan posisi vertikal peletakan baris

dalam table (TR)

Colspan

Untuk menentukan jumlah kolom yang digabungkan

Rowspan

Untuk menentukan jumlah baris yang digabungkan.

Contoh Penggunaan Table

Gambar 42. Contoh Penggunaan Tag Table

47

Gambar 43. Hasil Penggunaan Tag Table

I. FORM
Form dalam HTML adalah input atau masukan dari pengguna yang kemudian diproses untuk
mendapatkan hasil yang diinginkan pengguna, seperti proses penyimpanan, proses edit, proses
hapus dan browse.
<form name=nama form Methode=Post|Get Action=URL>
..................
</form>

Keterangan :

Nama form adalah nama form yang sedang digunakan

Methode adalah metode yang digunakan dalam penyimpanan data di server.

Action adalah alamat yang digunakan untuk proses input form didalam server.

Form memiliki kontrol form yang digunakan untuk klasifikasi input atau masukan dari
pengguna. Kontrol form terdiri dari :
1. Kontrol Text
Digunakan untuk memberi input atau masukan berupa kotak isian.

<input type=text [properti]>

48

Properti kontrol text :

Properti

Fungsi

Name

Nama dari kontrol text

Size

Ukuran kontrol text

Value

Text yang tertulis pada kontrol text

Maxlength

Panjang maksimal karakter yang diizinkan

Gambar 44. Gambar input Text

2. Kontrol Password
Adalah sebuah kontrol HTML yang penggunaannya mirip dengan kontrol text, hanya bedanya
pada saat ditampilkan text yang diisikan akan diubah menjadi tanda asteris(*).

<input type=password [properti]>

Property Kontrol Password :
Properti

Fungsi

Name

Nama dari kontrol password

Size

Ukuran kontrol password

Value

Text yang tertulis pada kontrol password

Maxlength

Panjang maksimal karakter yang diizinkan

49

Gambar 45. Gambar input Password

3. Kontrol Radio Button

Digunakan untuk menampilkan salah satu pilihan dari suatu kumpulan/grup pilihan.

<input type=radio [properti]>

Property Radio Button
Properti

Fungsi

Name

Nama dari kontrol radio

Value

Nilai dari kontrol radio yang nilainya tidak dapat

ditampilkan, tetapi dapat diolah melalui masukan
dari pengguna.

Checked

Kontrol radio yang menjadi pilihan

Default

Kontrol radio yang terpilih secara default

Gambar 46. Gambar input Radio

4. Kontrol Checkbox
Kontrol checkbox digunakan untuk memilih beberapa pilihan dari pilihan yang tersedia. Dan
memungkinkan pengguna memilih lebih dari satu.

50

<input type=checkbox [properti]>

Property Radio Checkbox
Properti

Fungsi

Name

Nama dari kontrol checkbox

Value

Nilai dari kontrol checkbox yang nilainya tidak dapat

ditampilkan, tetapi dapat diolah melalui masukan
dari pengguna.

Checked

Kontrol checkbox yang menjadi pilihan

Default

Kontrol checkbox yang terpilih secara default

Gambar 47. Gambar input Checkbox

5. Kontrol select
Kontrol select digunakan untuk membuat sebuah daftar pilihan.

<select [properti]>

<option>item 1</option>
<option>item 2</option>

</select>

51

Properti Select :
Properti

Fungsi

Name

Nama dari kontrol select

Value

Nilai kontrol select yang hanya dapat ditampilkan

pada pemrograman berbasis server side, seperti
ASP.

Select

Item yang dipilih

Size

Banyaknya item yang ditampilkan pada layar monitor

Multiple

Tampilan dari drop-down box seperti tombol.

Gambar 48. Gambar input select menu

6. Kontrol Text Area
Kontrol text area merupakan kontrol text yang dapat menuliskan text lebih banyak karena
memiliki ruang/kapasitas lebih besar dibandingkan dengan kontrol text.

<textarea [properti]>
.....isi text.....
</textarea>

52

Properti kontrol text area :

Properti

Fungsi

Name

Nama dari kontrol tetx area

Value

Nilai kontrol textarea

Cols

Jumlah kolom

Rows

Jumlah baris

Maxlength

Panjang maximal karakter yang diizinkan

Gambar 49. Gambar input textarea

7. Kontrol Button
Kontrol button digunakan untuk mengontrol suatu aksi atau menjalankan sebuah prosedur /
event. Ada tiga tipe yang termasuk dalam kontrol button, yaitu Button, Submit, Reset. Buytton
digunakan untuk mengontrol atau menjalankan suatu prosedur atau event dari VBScript,
Submit digunakan untuk mengirim data-data ke server (lebih bnayak berhubungan dengan
pemrograman yang berbasis Server Side seperti ASP), sedangkan Reset digunakan untuk
menghapus data-data yang ada pada suatu form. Sintaksnya dari masing-masing tipe di atas
adalah sebagai berikut:
<input type=button [properti]>
<input type=submit [properti]>
<input type=reset [properti]>

53

Properti dari kontrol Button adalah sebagai berikut:

Properti

Keterangan

Name

Nama dari kontrol Button

Value

Nilai dari kontrol Button

Dir

Pengaturan arah text dari Kontrol Button,

seperti rtl (Right To Left) / Kanan ke Kiri dan
kebalikannya yaitu ltr (Left to Right)

Gambar 50. Gambar input Button

54

BAB 4
PENGENALAN CSS
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya
air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang
saling berhubungan.
CSS (Cascading Style Sheet) secara sederhana adalah sebuah metode yang digunakan untuk
mempersingkat penulisan tag HTML, seperti font, color, text, dan tabel menjadi lebih ringkas
sehingga tidak terjadi pengulangan penulisan.
CSS adala bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan
adanya CSS, memungkinkan kita untuk menampilkan halaman yang sama dengan format
berbeda.
CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web
Consortium atau W3C pada tahun 1996.

A. KEGUNAAN CSS
Beberapa kegunaan atau manfaat menggunakan CSS antara lain :
1. Mempersingkat penulisan tag HTML: kita tidak perlu mendefinisikan setiap tag dengan
properti dan nilai yang sama.
2. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat
pengulangan penulisan.
3. Mudah dan cepat dalam memaintenance : dikarenakan file CSS yang dibuat secara
terpisah, maka anda tidak perlu merombak semua elemen atau properti dalam HTML,
cukup mengedit file CSS-nya saja.
4. CSS bisa melakukan apa yang tidak bisa dilakukan oleh HTML, misalnya kita bisa
memberi warna pada input box atau scrollbar, yang tentunya tidak bisa dilakukan oleh
bahasa HTML.

B. KEUNTUNGAN CSS
Sebelum kehadiran CSS, seorang webmaster harus bekerja ekstra keras menuliskan tag-tag
HTML baik untuk mendesain layout ataupun untuk memberi gaya tampilan (style) pada bagianbagian tertentu dari situ web yang akan dibuatnya. Pekerjaan ini tentu semakin berat apabila
situs web tersebut terdiri dari puluhan atau bahkan ratusan halaman dengan tampilan yang

55

berbeda-beda, karena setiap tampilan membutuhkan penulisan tag-tag yang secara mandiri
unik. Untuk bagian-bagian dengan tampilan yang sama pun seorang webmaster harus
direpotkan dengan penulisan tag-tag HTML secara berulang-ulang.
Hadirnya CSS, pekerjaan seorang webmaster menjadi jauh lebih ringan. CSS mampu
menghindarkan pengulangan dalam penulisan tag HTML, sehingga ukuran file pun akan jauh
lebih kecil. Dengan ukuran file yang kecil, proses loading situs web juga akan jauh lebih cepat.
Meskipun sebuah file CSS bisa diintegrasikan langsung dengan file HTML, namun umumnya file
CSS dibuat secara terpisah, sehingga memungkinkan kita mendekorasi tampilan bagian-bagian
tertentu dari halaman web secara serempak.Inilah manfaat paling penting dari CSS!
Mempelajari CSS bisa jadi bukan pekerjaan mudah.

Keuntungan lain yang akan didapat dengan menggunakan CSS adalah :

1. Update tampilan jadi lebih mudah

Mengupdate tampilan situs web yang terdiri dari beberapa halaman saja tentu jauh lebih
mudah daripada untuk situs dengan ratusan atau ribuan halaman. Dengan CSS, kita akan dapat
mengupdate tampilan halaman-halaman web dalam jumlah banyak dengan mudah, karena
semua tag untuk style ini berada pada satu file CSS saja.

2. Beban bandwidth lebih kecil

Dengan CSS, ukuran file web akan menjadi langsing karena tag-tag style dipisahkan secara
mandiri. Hal ini secara signifikan akan berdampak pada proses loading yang lebih cepat. Selain
itu, CSS hanya akan di-load satu kali oleh browser dan akan terus diterapkan pada halamanhalaman lain. Hal ini berbeda dengan situs yang menggunakan table karena harus di-load
berulang-ulang.

3. Modifikasi web template lebih mudah

Cara paling cepat membangun situs web ialah dengan menggunakan template. Namun
terkadang template tersebut tidak sesuai dengan keinginan dan keperluan kita. Dengan CSS,
kita akan lebih mudah melakukan vermak pada template tersebut, misalnya mengganti warna
latar atau mengubah jenis huruf.

4. Search Engine Friendly

Sebuah situs web yang dilayout dengan CSS akan lebih search engine friendly daripada situssitus web yang menggunakan table sebagai pondasi layoutnya.

56

5. Lebih mudah digunakan pada mobile phone

Sekarang, orang melakukan browsing tidak hanya melalui browser di PC, tetapi juga melalui
mobile phone atau PDA. Situs web yang menggunakan CSS akan jauh lebih mudah digunakan
oleh mereka yang browsing melalui gadget-gadget tersebut.

C. KEKURANGAN CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang,
tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang
lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan
menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web
anda terlihat baik di semua browser.

D. CARA PENULISAN CSS

Dengan atribut CSS, user atau pengguna memiliki kemampuan untuk :
1. Mengatur posisi secara absolute
2. Mengubah warna
3. Mengubah besar font
4. Mengubah margin
5. Dan seluruh selektor pada kode HTML

Ada 3 metode penulisan CSS atribute, antara lain :

1. Inline Style Sheet

CSS metode ini mendefinisikan langsung pada HTML yang bersangkutan. Cara penulisannya
cukup dengan menambahkan atribut style=.. dalam tag HTML tersebut.

Style hanya berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML
yang lainnya.

Contoh Penulisan:

57

Gambar 51. Gambar Inline Style Sheet

2. Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style></style> diatas <body>. Pada
definisi ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang
selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh Penulisan Embedded Style Sheet

58

Gambar 51. Gambar Embedded Style Sheet

3. Linked Style Sheet

Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian
tag <style>..</style> dibuat pada file terpisah dari file HTML yang membutuhkan CSS.
Kemudian file lain tersebut disimpan dalam format .css

Pada file HTML yang akan menggunakan file CSS, harus dibuat tag <link>
yang dituliskan diantara tag <head></head>

Contoh Penulisan Linked Style Sheet

Simpan dengan nama style.css
* {
margin:0 auto;
padding:0;
}
body
{
background:#3793A6;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#pembungkus_web
width:850px;
}

59

#menu {
background:#FFFFFF;
width:850px;
height:40px;
}
#menu ul li {
list-style:none;
float:left;
padding:0 0 0 10px;
height:40px;
}

E. SYNTAX CSS

Di dalam penulisan CSS ada dua bagian utama yaitu selektor dan satu atau lebih

deklarasi.

Selektor biasanya adalah elemen HTML yang akan di format tampilannya.

Setiap deklarasi terdiri dari bagian properti dan nilai dari properti tersebut.

Properti adalah atribut yang akan kita rubah. Setiap properti mempunyai nilai.

Contoh:

properti

properti
Gambar 52. Deklarasi CSS

Setiap deklarasi selalu diakhir dengan semicolon, dan kumpulan deklarasi selalui diapit
oleh tanda kurung kurawal.

F. ID DAN CLASS
Selain selektor-selektor umum yang sering dipakai (tag-tag html) kita dapat menggunakan ID
dan Class untuk membuat selektor sendiri.
1. Selektor ID

Selektor ID digunakan untuk memilih satu buah elemen yang unik.

60

Selektor ID menggunakan atribut id pada elemen html, dan di target dengan

menggunakan tanda #.

Contoh:

p#tebal

{ font-weight: bold; }

Kode diatas akan membuat teks pada paragraf dengan ID tebal menjadi tebal.

2. Selektor Class

Selektor Class digunakan untuk memilih sekelompok elemen. Berbeda dengan ID yang
hanya dapat digunakan untuk satu elemen, class digunakan untuk beberapa elemen
yang akan mempunyai style sama.

Selektor Class ditarget dengan tanda ..

Contoh:
p.tengah

{ text-align: center; }

Kode diatas akan membuat teks pada paragraf dengan class tengah menjadi rata
tengah.

G. PROPERTI CSS
1. Background
Properti background digunakan untuk mengatur efek-efek yang berkenaan dengan background
suatu elemen.
Properti-properti background yang biasa digunakan adalah:

Background-color
Digunakan untuk memberikan warna latar. Contoh:
p { background-color: red; }
Kode diatas akan memberikan warna merah sebagai latar pada setiap paragraf.

Background-image
Digunakan untuk memberikan latar gambar pada elemen. Contoh:

h1#logo { background-image: url(images/background.jpg); }

Background-repeat
Digunakan untuk mengulang latar gambar baik secara horizontal, vertikal, atau tidak
berulang sama sekali.

61

Contoh:
H1#logo {
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
}

2. Font
Properti font digunakan untuk mengatur efek-efek yang berkenaan dengan huruf. Propertiproperti font diantaranya adalah:

Font-style

Font-weight

Font-size

Font-family

Contoh:
body
{ font-family: Arial, Helvetica, Sans-Serif; font-weight:
bold; font-size: 12px; }
Keterangan:
Kode diatas akan memberikan efek penggunaan Huruf Arial, jika tidak ada jenis huruf tersebut
maka akan dilanjutkan dengan huruf-huruf setelah tanda koma. Kemudian teks akan menjadi
tebal dan ukurannya sebesar 12px.

3. Text
a. Text Color
Digunakan untuk mengatur warna text. Warna text bisa didefinisikan dengan nilai hex (seperti
#000000), nilai rgb (seperti rgb(255,255,0)), atau nama (seperti red).
Contoh: p { color: #FC0; }
b. Text Alignment
Properti text-align digunakan untuk mengatur alignment horizontal dari teks.
Contoh:

62

p { text-align: center; }
Akan membuat teks menjadi rata tengah.
c. Text Decoration
Properti text-decoration digunakan untuk menambah atau menghilangkan dekorasi pada teks
seperti:
P { text-decoration: underline; }
Akan membuat teks menjadi bergaris bawah.
d. Text Transformation
Properti text-transform digunakan untuk mengatur huruf besar atau kecil.
Contoh:

e.

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation

Properti text-indent digunakan untuk mengatur indentasi dari sebuah teks.

4. Border
Properti border digunakan untuk mengatur border pada sebuah elemen. Properti yang biasa
digunakan antara lain.
a. Border-style
Digunakan untuk mengatur bagaimana tampilan border. Contoh:
Div

{ border-style: dotted; }

Akan memberikan border berupa titik-titik.

b. Border-width
Digunakan untuk mengatur ketebalan border
Div

{ border-width: 2px; }

Akan memberikan ketebelah border setebal 2px.

C. Border-color
Digunakan untuk memberi warna border

63

Div

{ border-color: red; }

Akan memberikan warna merah pada border.

d. Border Shorthand (penggabungan property-properti border agar menjadi
singkat ditulis).
Div

{ border: 1px solid #000; }

Akan memberikan border solid berwarna hitam setebal 1px.

5. Margin dan Padding

a. Margin
Margin mengatur jarak di sekeliling elemen (diluar border). Margin tidak mempunyai warna
background (transparan).
Margin atas, kanan, bawah, dan kiri dapat diatur secara terpisah atau diatur bersamaan
(shorthand).
Contoh:
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Shorthand
Untuk mempersingkat penulisan, margin dapat ditulis sebagai berikut:
margin:25px 50px 75px 100px;
margin atas bernilai 25px
margin kanan bernilai 50px
margin bawah bernilai 75px
margin kiri bernilai 100px

margin:25px 50px 75px;

64

margin atas bernilai 25px

margin kiri dan kanan bernilai 50px
margin bawah bernilai 75px

margin:25px;
semua sisi margin-nya bernilai 25px

b. Padding
Padding mengatur jarak antara isi elemen dengan border (di bagian dalam border). Padding
atas, kanan, bawah, dan kiri dapat diatur secara terpisah atau diatur bersamaan (shorthand).
Contoh:
padding-top:100px;
padding-bottom:100px;
padding-right:50px;
padding-left:50px;
Shorthand
Untuk mempersingkat penulisan, margin dapat ditulis sebagai berikut:
padding:25px 50px 75px 100px;
padding atas bernilai 25px
padding kanan bernilai 50px
padding bawah bernilai 75px
padding kiri bernilai 100px

padding:25px 50px 75px;

padding atas bernilai 25px
padding kiri dan kanan bernilai 50p
padding bawah bernilai 75px

padding:25px;
semua sisi padding -nya bernilai 25px

65

6. Pseudo Class
Pseudo Class digunakan untuk menambahkan efek khusus pada suatu selector.

Syntax Pseudo Class

selektor:pseudo-class {properti:nilai;}
Selector

Example

Example description

:link

a:link

Memilih semua link yang belum di kunjungi

:visited

a:visited

Memilih semua link yang telah dikunjungi

:active

a:active

Memilih semua link aktif

:hover

a:hover

Memilih link yang sedang di hover

:focus

input:focus

Memilih Input yang sedang di focus

:first-letter

p:firstletter

Memilih huruf pertama dari setiap paragraf

:first-line

p:first-line

Memilih baris pertama dari setiap paragraph

:first-child

p:firstchild

Memilih elemen <p> pertama.

:before

p:before

Memasukkan content sebelum setiap elemen <p>

:after

p:after

Memasukkan content setelah setiap elemen <p>

:lang(language)

p:lang(it)

Memilih semua elemen <p> dengan attribute lang yang

bernilai it

66

BAB 5
FORM
Form interaktif adalah salah satu cara umum untuk bertukar informasi dan melakukan bisnis
melalui internet atau intranet. Form menyediakan struktur yang teratur untuk memasukan data
mengumpulkan sejumlah besar data. Dengan adanya form maka sebuah website dapat
berfungsi sebagaimana mestinya.
Kita sering menggunakan komponen form untuk melakukan interaksi kegiatan sehari-hari.
Sebagai contoh setiap akan melakukan registrasi, login ke halaman tertentu ataupun melakukan
pencarian data selalu saja pengguna memanfaatkan komponen form.
Dengan begitu seringnya pengguna website memanfaatkan komponen form maka hendaknya
form dirancang sebaik mungkin dan semenarik mungkin untuk itu menunjang hal tersebut perlu
dilakukan pengembangan tampilan form dengan CSS.
Berikut ini adalah beberapa modifikasi yang bisa dilakukan pada form :

A. BACKGROUND
Dengan menggunakan CSS maka tampilan form dapat diperindah sehingga menciptakan daya
tarik tersendiri bagi pengguna website form yang dibuat dapat diubah backgroundnya dengan
menggunakan warna ataupun gambar :

Contoh style css dengan warna :

@charset utf-8;
/* CSS Document */
#container
{ width: 580px; background: #E3EDDA; margin: 0 auto;
padding: 10px; }
fieldset
{ border: 1px solid #19B3CD; padding: 10px; }
legend
{ padding: 10px; font-weight: bold; font-family:
Georgia, Times New Roman, Times, serif; font-style: oblique; }
div.fieldform { margin-bottom: 10px; border-bottom: 1px solid
#19B3CD; padding: 10px; overflow: hidden; }
div.fieldform:last-child { border-bottom: none; }
div.fieldform:nth-child(2n) { background: #ddd; color: #333; }
label { display: block; margin-bottom: 5px; float: left; width:
200px; margin-top: 10px; }
input[type=text]
{ width: 300px;
padding: 10px; float: right;
background: #99CCFF; }
input[type=submit] {
background:
#CC66FF;
width:100px;
height:30px; }

67

Contoh Form Sederhana

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf8 />
<title>Form</title>
<link rel=stylesheet type=text/css href=style.css />
</head>
<body>
<div id=container>
<form method=post action=>
<fieldset>
<legend>Form Pendaftaran</legend>
<div class=fieldform>
<label>Nama Lengkap</label>
<input type=text name=nama />
</div>
<div class=fieldform>
<label>Email</label>
<input type=text name=email />
</div>
<div class=fieldform>
<label>Username</label>
<input type=text name=username />
</div>
<div class=fieldform>
<input type=submit value=daftar />
</div>
</fieldset>
</form>
</div>
</body>
</html>

Gambar 53. Style background color

68

Contoh style css dengan gambar

input[type=text]
{ width: 300px;
padding: 10px; float: right;
background:
#FFF
url(../images/form-bckg.jpg)
repeat-x
top
center; }
input[type=submit] {
background:
#CC66FF
url(../images/tombol.jpg); width:100px; height:30px; }

Gambar 54. Style background gambar

B. BORDER
Dengan menggunakan CSS maka tampilan form dapat diperindah sehingga menciptakan daya
tarik tersendiri bagi pengguna website form yang dibuat dapat diubah bordernya :

Contoh style border :

input[type=text]

{ width: 300px; padding: 10px; float: right;

background:
#FFF
url(../images/formbckg.jpg) repeat-x top center; border:#0066FF solid 1px; }

69

Gambar 55. Style border

70

BAB 6
DESAIN SITUS WEB
A. PEMBUATAN SKETSA
Mengerjakan secara skematis sebuah website ditujukan untuk mengurangi kemungkinan
kesalahan penerapan konsep kedalam bentuk hasil akhir.

1. Sketsa kertas
Menggambarkan sketsa situs web tersebut dalam secarik kertas untuk membantu
menggambarkan ide awal dan skesta dalam secarik kertas bisa berisi layout.

Gambar 1. Perancangan Skesta kertas

2. Sketsa Digital
Merupakan hasil pemindahan dari sketsa kertas ke dalam bentuk digital dengan menggunakan
aplikasi grafis seperti Photoshop, CorelDraw dan lain-lain. Dalam tahap ini sketsa dapat dibuat
lebih detail.

71

Gambar 2. Perancangan Skestas Digital

Dari sketsa yang dibuat dengan editor grafik ini kita dapat membuat prototype dari halaman
web yang akan dibuat, berupa HTML wireframes yang terdiri atas layout, isi, navigasi, dan
grafik. Untuk pembuatannya menggunakan HTML Editor, seperti misalnya dreamweaver.

b. TAHAPAN DESAIN DENGAN PHOTOSHOP

Dalam tahapan ini pembuatan desain menggunakan editor grafik berbasis pixel yaitu adobe
photoshop, tahapan desain disini berupa pembuatan desain untuk header, body dan footer.

1. Membuat Header
1) Menggunakan photoshop buka sebuah dokumen baru file new, dengan ukuran
600 pixel X 200 pixel dengan Resolusi 72 pixels/inchi, ukuran resolusi ini dipakai karena
resolusi inilah yang maksimal dapat ditampilkan di web. Untuk Mode warna atau color
mode pilih RGB color karena file ini akan dioptimalisasikan ke file JPEG. Untuk
background dipilih white.

72

Gambar 3. Memulai Dokumen Baru Header

Setelah kita menentukan ukuran dan resolusi dokumumen untuk pembuatan header
sebuah web tahapan selanjutnya kita dapat melakukan pengisian gambar, teks dan
melakukan pengeditan untuk header yang kita buat.
2) Pengisian Warna Background Header

Gambar 4. Pengisian Warna

Pengisian warna dapat dilakukan menggunakan pemilihan warna foreground dan
background yang telah disiapkan oleh photoshop
3) Pewarnaan Background Header Web
Kita dapat melakukan pengisan warna kedalam bentuk gradasi/perpaduan warna
dengan memilih tool pengisan warna yang telah disiapkan oleh photoshop berupa
gradient tool.

Gambar 5. Penggunaan Gradient Tool

73

Gambar 6. Hasil Pengisian Background Menggunakan Gradient Tool

4) Pengisian Teks Kedalam Header Web

Kemudian kita dapat mengisikan teks kedalam website tersebut dengan menggunakan
teks tool yang telah disediakan adobe photoshop

Gambar 7. Text Tool yang disediakan Adobe Photoshop

Menggunakan teks tool kita dapat melakukan pembuatan teks kedalam header website
yang kita rancang, seperti pengisian warna, jenis font, ukuran font.

74

Gambar 8. Hasil Pengolahan Teks Menggunakan Text Tool

5) Pengisian Gambar, logo atau foto
Setelah melalui tahapan pengolahan teks dengan menentukan warna teks, besar
kecilnya ukuran teks dan posisi peletakan teks, maka tahapan selanjutnya adalah
dengan melakukan pengisian gambar, logo atau foto.
Mengisikan gambar, logo atau foto dengan memilih menu file open, seperti
contoh dibawah ini :

Gambar 9. Pengsian Gambar Kedalam DesainHeader

Tahapan selanjutnya adalah melakukan pengeditan terhadap gambar, logo atau foto
yang kita pilih untuk di tempatkan di bagian header.

Gambar 10. Pengisian Gambar kedalam Header

Kita dapat mengatur besar kecilnya komposisi gambar yang akan kita sisipkan kedalam header
dengan menggunakan perintah menu edit free transform atau ctrl + T.

75

Gambar 11. Hasil Pengolahan Header Website

6) Penyimpanan hasil pengolahan header yang telah di buat kedalam format file *.jpg,
melalui menu file save for web

Gambar 12. Format Penyimpanan

7) Format file yang dipakai adalah format jpeg

Gambar 13. Format File yang digunakan

76

2. Membuat Body Website

1) Menggunakan photoshop buka sebuah dokumen baru file new, dengan ukuran
800pixel X 450pixel dengan Resolusi 72 pixels/inchi, ukuran resolusi ini dipakai karena
resolusi inilah yang maksimal dapat ditampilkan di web. Untuk Mode warna atau color
mode pilih RGB color karena file ini akan dioptimalisasikan ke file JPEG. Untuk
background dipilih white.

Gambar 14. Memulai Dokumen Baru Body

Setelah kita menentukan ukuran dan resolusi dokumumen untuk pembuatan header
sebuah web tahapan selanjutnya kita dapat melakukan pengisian gambar, teks dan
melakukan pengeditan untuk header yang kita buat.

2) Pengisian Warna Background

Gambar 15. Mengisikan Warna Background Body

77

Pengisian warna body dapat dilakukan menggunakan pemilihan warna foreground dan
background yang telah disiapkan oleh photoshop

Gambar 16. Hasil Pengisian Warna Background Body

3) Penyimpanan hasil pengolahan body yang telah di buat kedalam format file *.jpg,
melalui menu file save for web

Gambar 17. Format File yang digunakan

3. Membuat Footer
1) Menggunakan photoshop buka sebuah dokumen baru file new, dengan ukuran
800pixel X 450pixel dengan Resolusi 72 pixels/inchi, ukuran resolusi ini dipakai karena
resolusi inilah yang maksimal dapat ditampilkan di web. Untuk Mode warna atau color
mode pilih RGB color karena file ini akan dioptimalisasikan ke file JPEG. Untuk
background dipilih white.

78

Gambar 18. Memulai Dokumen Baru Footer

Setelah kita menentukan ukuran dan resolusi dokumumen untuk pembuatan Footer
sebuah web tahapan selanjutnya kita dapat melakukan pengisian gambar, teks dan
melakukan pengeditan untuk Footer yang kita buat.
2) Pengisian Warna Background

Gambar 19. Pengisan Warna

3) Pewarnaan Background Footer Web
Kita dapat melakukan pengisan warna kedalam bentuk gradasi/perpaduan warna
dengan memilih tool pengisan warna yang telah disiapkan oleh photoshop berupa
gradient tool.

Gambar 20. Penggunaan Gradient Tool

79

Gambar 21. Hasil Pengisian Background Menggunakan Gradient Tool

4) Penyimpanan hasil pengolahan footer yang telah di buat kedalam format file *.jpg,
melalui menu file save for web

Gambar 22. Format File yang digunakan

80

BAB 7
DESAIN WEB PERSONAL
A. DESAIN LAYOUT
Sebelum melakukan desain layout sebaiknya membuat desain sketsa. Berikut ini adalah bentuk
sketsa dari desain website yang akan dibuat dengan bentuk pembagian 1kolom.

Gambar 1. Sketsa digital

Bagian situs terdiri dari menu yang menampilkan navigasi yang akan ditampilkan atau yang
akan disampaikan. Header biasany menampilkan logo atau gambar yang mencerminkan citra
diri seseorang, perusahaan atau suatu organisasi.
Content adalah sebuah wadah untuk menampilkan informasi dari menu/navigasi yang dipilih
oleh pengguna website. Footer berisi copyright, nama, dan alamat dari pemilik website.

81

B. TAHAPAN SKETSA HTML

1. Desain Header
Berikut contoh desain header untuk membuat sketsa digital HTML

Gambar 2. Sketsa Header

2. Desain dengan Bahasa HTML

Berikut adalah contoh desain dalam HTML

82

Gambar 2. Sketsa HTML

Contoh dalam Kode HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Lahat - Bumi Serasan Sekundang</title>
<link
rel="stylesheet"
type="text/css"
href="tampilan_weblahat.css" />
</head>
<body>
<div id="pembungkus_web">
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<div id="header"></div>
<div id="pembungkus_kolom">
<div id="kolom2">
<div class="posting">
<h2>Masjid Agung Al-Muttaqin</h2>
<img
src="gambar/2983019977_e27e1c03b9.jpg"
class="gambar1" />
<p>Masjid Agung Al-Muttaqin ini merupakan Masjid
Terbesar di Kota Lahat. Sebelum Berdirinya Masjid ini, lokasi ini
merupakan
tempat
makam
orang
China
(Kuburan
China).Kita dapat memandangi seluruh Kota Lahat dari tempat ini,
karena tempat ini termasuk dataran tinggi.</p>
</div>
<div class="posting">
<h2>Gereja Santa Maria</h2>
<img
src="gambar/2983909374_efb3be8921.jpg"
class="gambar1" />
<p>Gereja Santa Maria dikenal sebagai gereja
tertua di Kota Lahat, Artistik zaman belanda masih terasa sangat
kental,
Lokasinya
tepat
di
depan
Rumah
Sakit
Umum
Daerah (RSUD) Kota Lahat. Tak heran banyak wisatawan lokal maupun

83

luar mengunjungi tempat ini hanya untuk melihat keindahan

bangunan ini.</p>
</div>
<div class="posting">
<h2>Gedung Olah Raga (GOR) Lahat</h2>
<img
src="gambar/2983019963_e733a29cdc.jpg"
class="gambar1" />
<p>Gedung
Olahraga
(GOR)
ini
baru
selesai
dibangun pada pertengahan tahun 2008 ini. Desain bangunan ini
merupakan
perpaduan
antara
Rumah
Adat
Kota
Lahat
dengan
artistik Modern.</p>
</div>
</div>
<div class="clear"></div>
</div>
<div
id="footer">Copyright
&copy;
Dini
Hari
Pertiwi
2010</div>
</div>
</body>
</html>
Contosh style pengaturan tampilan :
@charset "utf-8";
/* CSS Document 15 Desember 2010 */
*
{
margin:0 auto;
padding:0;
}
body
{
background:#3793A6;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#pembungkus_web
width:850px;
}

#menu {
background:#FFFFFF;
width:850px;
height:40px;
}
#menu ul li {
list-style:none;
float:left;
padding:0 0 0 10px;
height:40px;
}
#menu ul li a
{
background: url(gambar/icon-lahat.png) no-repeat left;
text-decoration:none;

84

color:#0099FF;
text-transform:uppercase;
padding:10px 20px; display: block;
}
#menu ul li a:hover
{
color:#FF9900;
text-transform:capitalize;
}
#header
{
background:url(gambar/header.jpg) no-repeat;
width:850px;
height:160px;
}
#pembungkus_web
{
width:850px;
background:#FFFFFF;
}
#kolom2
{
width:830px;
float:left;
padding:10px;
}
.posting
{
border: #999999 solid 1px;
padding:10px;
margin-bottom:10px;
}
.posting p
{
text-align:justify;
}
.gambar1
{
width:200px;
}
#footer
{
width:850px;
height:25px;
background:#FFFFFF;
text-align:center;
padding-top:10px;
border-top:#999999 dashed 1px;
}
.clear {
clear:both;
}

85

BAB 8
DESAIN WEBSITE PERUSAHAAN
A. DESAIN LAYOUT
Sebelum melakukan desain layout sebaiknya membuat desain sketsa. Berikut ini adalah bentuk
sketsa dari desain website yang akan dibuat dengan bentuk pembagian 1kolom.

Gambar 1. Sketsa Layout

Bagian situs terdiri dari menu yang menampilkan navigasi yang akan ditampilkan atau yang
akan disampaikan. Header biasany menampilkan logo atau gambar yang mencerminkan citra
diri seseorang, perusahaan atau suatu organisasi.
Widget adalah navigasi tambahan selain yang terdapat pada bagian menu. Bagian ini biasanya
berisi informasi tambahan, dan tools penunjang lainnya.
Content adalah sebuah wadah untuk menampilkan informasi dari menu/navigasi yang dipilih
oleh pengguna website. Footer berisi copyright, nama, dan alamat dari pemilik website.

86

1. Tahapan Sketsa Html

a. DESAIN HEADER
Berikut contoh desain header untuk membuat sketsa digital HTML

Gambar 2. Sketsa Header

b. DESAIN HTML
Berikut ini adalah contoh pembagian desain pada HTML

87

Gambar 3. Sketsa HTML

Contoh bahasa HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Mari Makan Seafood</title>
<link rel="stylesheet" type="text/css" href="tampilan_pert9.css"
/>
</head>
<body>
<div id="pembungkus_web">
<div id="header"></div>
<div id="menu">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="kolom1">
<ul>
<li>

88

Mentega</a></li>
Padang</a></li>

<h2>Daftar Menu Makanan</h2>

<ul>
<li><a
href="#">Udang

Goreng

<li><a href="kepiting.html">Kepiting Saus

<li><a href="#">Sup Ikan</a></li>

</ul>
</li>
<li>
<h2>Daftar Menu Minuman</h2>
<ul>
<li><a href="#">Juice Pokat</a></li>
<li><a href="#">Juice Melon</a></li>
<li><a href="#">Juice Stroberry</a></li>
</ul>
</li>
</ul>
</div>
<div id="kolom2">
<div class="isi">
<h2>Cumi Goreng Mentega</h2>
<img
src="gambar/cumi-goreng-mentega.jpg"
class="gambar" />
<p>Mahasiswa jurusan Teknik Informatika di STMIK
PalComTech Palembang ini sudah dikenal di lingkungan kampus.
Dialah KING Priady yang pada tahun 2008 pernah menorehkan
prestasi untuk kampus PalComTech. Sepak terjang King sudah tidak
perlu diragukan lagi di bidang bulu tangkis. Kalau mau dirunut
semua prestasi yang pernah ia raih mulai dari tahun 1997 sudah
lebih dari 10 penghargaan yang ia peroleh. Dari banyaknya
prestasi yang telah ia dapat, membuat King tak puas sampai disini
saja.Momen yang mengesankan pas pomda 2008 kemarin soalnya saya
dikonfirm secara mendadak terus tanpa persiapan yang cukup dan
tanpa target menang. Tetapi pas bertanding ternyata hasilnya saya
juara ganda campuran menyumbang mendali emas apalagi bagi STMIK
PalComTech yang baru pertama kali ikut pomda. Kenang King dengan
rasa bangga dengan prestasi yang pernah ia raih. Hal ini baginya
satu momentum yang membuat kebanggaan tersendiri. Apalagi tahun
2010 ini King menyumbangkan mendali emas yang kedua bagi kampus
PalComTech karena ia menjadi juara di POMDA IV kemarin.</p>
</div>
</div>
<div class="bersih"></div>
</div>
<div
id="footer">Copyright
&copy;
Dini
Hari
Pertiwi
2010</div>
</div>
</body>
</html>

89

Contoh syntak tampilan dengan CSS

@charset "utf-8";
/* CSS Document 2 Desember 2010 */
*
{
margin:0 auto;
padding:0;
}
body
{
background:#FF9933;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#pembungkus_web
{
width:940px;
background:#FFFFFF;
}
#header
{
width:940px;
height:160px;
background:url(gambar/header.jpg);
}
#menu {
width:940px;
height:40px;
background:#f0bd24;
overflow: hidden;
}
#menu ul li {
list-style:none;
float:left;
padding:10px 0 0 10px;
line-height:150%;
}
#menu ul li a
{
background:url(gambar/icon-chef.png) no-repeat left top;
padding:0 0 0 20px;
height:40px;
color:#FF0000;
text-decoration:none;
float:left;
}
#kolom1
{
width:240px;
float:right;
}
#kolom1 ul li
list-style:none;
}

90

#kolom1 ul li h2
{
background:#d64f0b;
color:#FFFFFF;
height:23px;
font-size:13px;
padding:7px 0 0 10px;
}
#kolom1 ul li ul li
{
border-bottom:#d64f0b dashed 1px;
line-height:200%;
}
#kolom1 ul li ul li a
{
text-decoration:none;
color:#FF3300;
text-transform:capitalize;
}
#kolom1 ul li ul li a:hover
color:#990000;
background:#FF9966;
display:block;
}

#kolom2
{
width:670px;
float:left;
padding:10px;
}
.isi
{
border:#FF6600 solid 1px;
padding:10px;
margin-bottom:10px;
}
.isi p {
text-align:justify;
}
.gambar
{
float:left;
width:150px;
}
.bersih
{
clear:both;
}
#footer
{
border-top:#FFCC00 dashed 1px;
width:940px;
height:28px;
text-align:center;
padding-top:7px;
}

91

Gambar 4. Contoh Desain Website Restoran

92

Gambar 5. Desain Website Perusahaan

93

BAB 9
JQUERY
A. PENGENALAN JQUERY
Jquery adalah javascript library yang merupakan kumpulan kode/fungsi javascript siap pakai,
sehingga mempermudah dan mempercepat kita membuat kode javascript. Jika kita membuat
kode javascript untuk mempercantik website yang kita desain biasanya menggunakan kode
yang cukup panjang, bahkan sangat sulit untuk dipahami.

Kesimpulannya jQuery menyederhanakan kode javascript. Hal ini sesuai dengan slogannya
Write less, do more cukup tulis sedikit, tapi bisa melakukan banyak hal.

1. Mengapa memilih jQuery

Berikut adalah beberapa alasan yang membuktikan jQuery sangat powerful dan layak untuk
dijadikan sebuah pilihan untuk memperindah tampilan website :
a. jQuery telah banyak digunakan oleh website-website terkemuka di dunia.
b. Cocok dengan semua browser yang populer, seperti Mozilla, Internet Explorer, Safari,
Chrome dan Opera.
c.

Kompatibel dengan semua versi CSS ( CSS 1 sampai CSS 3 )

d. Dokumentasi,

tutorial dan contoh-contohnya lengkap, silahkan kunjungi website

resminya di http://jquery.com
e. Didukung oleh komunitas yang besar dan aktif, seperti forum, milis, network, social
enginering (twitter dan facebook), website, dan tutorial.
f.

Ketersedian plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan

tambahan yang bisa disertakan pada jQuery.

g. Filenya hanya satu dan ukurannya pun kecil, hanya sekitar 20 KB, sehingga aksesnya
cepat.
h. Open source/free (gratis) dengan lisensi GNU General Public License dan MIT Lincese.

i.

jQuery lebih banyak digunakan oleh para developer web dibandingkan javascript library
lainnya

94

2. Kemampuan yang dimiliki jQuery

Berikut ini adalah kemampuan yang dimiliki oleh jQuery :
a. Mempermudah akses dan manipulasi elemen tertentu pada dokumen
b. Mempermudah modifikasi /perubahan pada halaman web
c.

Mempersingkat ajax (asynchronous Javascript and XML)

d. Memiliki API (Application Programming Interface)

e. Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.

f. Menyediakan fasilitas membuat animasi sekelas flash dengan mudah

3. Cara Menggunakan jQuery

Berikut langkah-langkah detail menggunakan jQuery :
1) Download libarary jQuery di http://jquery.com, silahkan pilih versi jQuery yang
diinginkan, misalnya Development.

Gambar 1. Website Resmi jQuery

2) Simpan file jQuery lalu buat dokumen dasar HTML

<html>

95

<head>
</head>
<body>
</body>
</html>
3) Selanjutnya panggil tag jQuery antara tag <head>......</head>

4. Cara Kerja jQuery

Berikut ini adalah beberapa cara kerja jQuery :
1) jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah
ditampilkan semua di halaman web, fungsi yang digunakan adalah :
$(document).ready(functio(){
// baris kode jquery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
}
2) semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class
dan id yang telah didefinisikan. Dalam hal ini jQuery menggunakan fungsi selector.
Contoh skripnya :
$(#foto)
$(.sembunyi)
$(.tampil)
3) setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap
elemen yang sudah dipilih. Misalnya, operasi klik dan hide.
$(.sembunyi).click(function(){
$(#foto).hide(slow);
});
Berikut ini adalah contoh penggunaan jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>jQuery</title>
<script type="text/javascript" src="jquery-1.6.1.js">
</script>

96

<script type="text/javascript">
$(document).ready(function(){
$(".sembunyi").click(function(){
$("#foto").hide("slow");
});
$(".tampil").click(function(){
$("#foto").show("slow");
})
});
</script>
</head>
<body>
<button class="sembunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
<p><img id="foto" src="100_3850.JPG" width="250" /></p>
</body>
</html>

Gambar 2. Hasil Contoh jQuery

Pada contoh tersebut, ada dua class, yaitu tampil dan sembunyi serta terdapat satu id yaitu
foto.jadi nanti, skrip jQuery yang akan kita buat haru sesuai dengan class dan id yang sudah
kita definisikan pada bagian body, misalnya untuk menampilkan foto yang disembunyikan.

B. TRIK DASAR PEMAHAMAN JQUERY

Kalo kita tengok di website resminya jQuery pada bagian dokumentasi (http://docs.jquery.com)
maka ada sebelas hal yang harus kita dipelajari untuk menguasai jQuery atau dikenal dengan
sebutan jQuery API (Application Programming Interface), diantaranya :

jQuery Core

Selector

Attributes

97

Traversing

Manipulation

CSS

Events

Effects

Ajax

PluginjQuery UI (User Interface)

Utilities

Namun sebagai fondasi awal dalam mempelajari jQuery yang perlu difahami secara mendasar
adalah selector, events, effects.

1. Filosofi Pemrograman jQuery

Sebelum masuk ke pembahasan dasar-dasar jQuery, ada baiknya kita mengetahui dasar dari
filosofi jQuery, karena secara keseluruhan pemrograman jQuery nantinya akan mengacu pada
filosofi dasarnya seperti gambar berikut :

Gambar 3. Filosofi Pemrograman jQuery

Pada umunya, perintah jQuery digantikan dengan tanda dolar ($) yang merupakan simbol
resmi dari fungsi jQuery, sehingga sering dituliskan seperti pada gambar berikut :

98

Gambar 4. Filosofi Pemrograman jQuery(2)

Intinya, fungsi jQuery akan mencari suatu elemen tertentu yang telah didefinisikan
dibagian body, kemudian melakukan sesuatu terhadap elemen tersebut, inilah filosofi
dasar dari jQuery.

Catatatan :
jQuery mempunyai fungsi-fungsi yang tergabung dalam
kelompok class yang berguna untuk menambahkan dan
menghapus kelompok class beserta nilainya pada suatu
elemen. Ada 3 fungsi yang termasuk dalam kelompok
Class, yaitu :
1. addClass(nama_class); untuk menambahkan class
pada
elemen yang dipilih.
2. removeClass(nama_class); untuk menghapus class
pada elemen yang dipilih.
3. toggleClass(nama_class); untuk menambahkan class
pada suatu elemen apabila elemen tersebut belum
digunakan Class, namun apabila pada elemen tersebut
sudah menggunakan class maka
pada elemen tersebut
akan dihapus.
2. Memahami Selector
Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan
operasi terhadap elemen tersebut atau manipulasi terhadap elemen-elemen tersebut.
Adapun elemen-elemen dasar yang dapat dipilih oleh selectors adalah sebagai berikut :

Nama tag

Id

Class

99

Namun untuk mengetahui bagaimana cara selectors dalam memilih elemen-elemen tersebut.
a. Selectors Tag
Cara menggunakan selectors tag adalah dengan langsung menyebutkan nama
tag/elemennya $(div). Untuk lebih jelasnya, perhatikan skrip selector_tag
berikut ini :
<html>
<head>
<title>selector tag</title>
<script type="text/javascript" src="jquery-1.6.1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("div").addClass("merah");
})
</script>
<style type="text/css">
.merah { color:#FF0000; font-weight:bold; }
</style>
</head>
<body>
<div>
<p>Paragraf Pertama</p>
</div>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div>
</div>
</body>
</html>
Penjelasan skrip selector_tag
Semua tag dengan nama div akan terpilih oleh selector, kemudian diberikan operasi merah
terhadap elemen terpilih tersebut sehingga semua text akan berwarnah merah dan tebal.

100

Gambar 5. Contoh Selector Tag

b. Selector ID
Cara menggunakan selectors id adalah dengan menyertakan tanda kres (#) sebelum nama
elemennya $(#nama_elemen_id).
<html>
<head>
<title>selector id</title>
<script type="text/javascript" src="jquery-1.6.1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#daftar").addClass("merahkuning");
});
</script>
<style type="text/css">
.merahkuning { color:#FF0000; font-weight:bold; background:#FFFF66;
padding:13px; }
</style>
</head>
<body>
<div>
<p>Paragraf Pertama</p>
</div>
<div>
<ul id="daftar">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>

101

Gambar 6. Contoh Selector ID

c. Selector Class
Cara menggunakan selectors class adalah dengan menyertakan tanda titik (.) sebelum nama
elemennya $(#nama_elemen_class).
<html>
<head>
<title>selector class</title>
<script type="text/javascript" src="jquery-1.6.1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#daftar").addClass("merahkuning");
$(".subdaftar").addClass("hijauhitam");
});
</script>
<style type="text/css">
.merahkuning{ color:#FF0000; font-weight:bold; background:#FFFF66;
padding:13px; }
.hijauhitam { color:#000000; background-color:#66CC33; }
</style>
</head>
<body>
<div>
<p>Paragraf Pertama</p>
</div>
<div>
<ul id="daftar">
<li>Item 1</li>
<li class="subdaftar">Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>

102

BAB 10
HOSTING DAN DOMAIN
A. HOSTING
Hosting adalah jasa layanan internet yang menyediakan sumber daya server-server untuk
disewakan sehingga memungkinkan organisasi atau individu menempatkan informasi di internet
berupa HTTP, FTP, EMAIL atau DNS. Server hosting terdiri dari gabungan server-server atau
sebuah server yang terhubung dengan jaringan internet berkecepatan tinggi.

Hosting adalah suatu space atau tempat di internet yang kita gunakan untuk menyimpan datadata situs kita. Entah itu situs perusahaan, situs pribadi, situs blog, dan lain sebagainya. Setiap
situs yang hendak kita buat online sehingga banyak orang bisa mengaksesnya, harus disimpan
pada suatu host. Kini banyak tersedia host-host yang ditawarkan yang ada di internet. Mulai
yang berbayar, sampai yang gratis sekalipun. Yang gratis biasanya nama domain yang kita
dapatkan hanyalah subdomain dari situs induk dimana kita mendaftar disitus tersebut.

1. Jenis Jenis Hosting

Ada beberapa jenis layanan hosting yaitu shared hosting, VPS atau Virtual Dedicated Server,
dedicated server, colocation server.
a. Shared Hosting adalah menggunakan server hosting bersama sama dengan pengguna
lain satu server dipergunakan oleh lebih dari satu nama domain. Artinya dalam satu
server tersebut terdapat beberapa account yang dibedakan antara account satu dan
lainnya dengan username dan password.
b. VPS, Virtual Private Server, atau juga dikenal sebagai Virtual Dedicated Server
merupakan proses virtualisasi dari lingkungan software sistem operasi yang
dipergunakan oleh server. Karena lingkungan ini merupakan lingkungan virtual, hal
tersebut memungkinkan untuk menginstall sistem operasi yang dapat berjalan diatas
sistem operasi lain.
c.

Dedicated Server adalah penggunaan server yang dikhususkan untuk aplikasi yang
lebih besar dan tidak bisa dioperasikan dalam shared hosting atau virtual dedicated
server. Dalam hal ini, penyediaan server ditanggung oleh perusahaan hosting yang
biasanya bekerja sama dengan vendor.

d. Colocation Server adalah layanan penyewaan tempat untuk meletakkan server yang
dipergunakan untuk hosting. Server disediakan oleh pelanggan yang biasanya bekerja
sama dengan vendor.

103

2. Kriteria Memilih Web Hosting

Yang harus anda perhatikan ketika memilih hosting untuk blog atau website anda adalah:
1) Kebutuhan anda terhadap space dan bandwidth. Semakin banyak tulisan anda, maka
semakin besar space yang akan dibutuhkan. Semakin banyak pengunjung blog anda
maka semakin besar bandwidth yang dibutuhkan agar tidak terjadi server full load.
2) Perhatikan layanan dan fitur dari tempat anda akan menghostingkan blog atau website
anda. Bisa mencakup software apa saja yang ada di hostingnya serta support dari jasa
hostingnya.
3) Target pembaca. Jika anda memilih target pembaca dari dalam negeri ada baiknya
menggunakan server lokal saja agar lebih menghemat bandwidth. Tetapi jika anda
memilih target yang glogal, maka tak ada salahnya anda memilih server luar negeri
seperti di Amerika.

4) Harga yang pas. Konsultasikan kepada mereka yang lebih paham tentang kebutuhan
hosting anda agar jasa yang anda sewa sesuai dengan uang yang akan anda keluarkan.

3. Beberapa Penyedia Hosting Lokal di Indonesia

a. Qwords
b. Idwebhost
c.

Capoeng.net

d. Dijaminmurah
e. Rumahweb

f. Jagoanhosting

4. Cara Menyewa Web hosting

1) Untuk menyewa jasa hosting anda perlu mengetahui hosting mana saja yang tersedia
di tempat anda atau setidaknya di Indonesia.
2) Kemudian anda klik bagian registrasi dari setiap halaman utama jasa hosting tersebut.
3) Ikuti saja langkah yang di instruksikan seperti memilih nama domain, cek ketersediaan
nama domain yang anda inginkan seperti di IDwebhost.com, dan selesaikan
pembayarannya.

104

4) Jika hosting anda sudah online biasanya anda akan mendapat email dari penyedia jasa
atau chat saja officer yang sedang online di homepagenya.

Gambar 1. Website Penyedia Hosting

B. DOMAIN
Nama Domain adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer
seperti web server atau email server di internet. Nama Domain memberikan kemudahkan
pengguna di internet untuk melakukan akses ke server dan mengingat server yang dikunjungi
dibandingan harus mengenal deretan nomor atau yang dikenal IP.

Level Domain
Top Level Domain adalah deretan kata dibelakang nama domain seperti :

.com (dotcommercial)

.net (dotnetwork)

.org(dotorganization)

.edu(doteducation)

.gov(dotgoverment)

105

.mil(dotmilitary)

.info (dotinfo)

Ada dua macam Top Level Domain, yaitu Global Top Level Domain (gTLD) dan Country Code
Top Level Domain (ccTLD). gTLD adalah seperti yang pada di list diatas dan ccTLD adalah TLD
yang diperuntukkan untuk masing-masing negara, seperti Indonesia dengan kode ID (co.id,
net.id, or.id) atau Singapura dengan kode SG (com.sg, net.sg, dsb).
Second Level Domain (SLD) adalah nama domain yang anda daftarkan. Misalnya nama domain
yang anda daftarkan adalah domainku.com, maka domainku adalah SLD dan .comnya adalah
TLD.

Third Level Domain adalah nama setelah Second Level Domain . Misalnya nama domain yang
anda miliki adalah domainku.com, maka anda dapat menambahkan nama lain sebelum
domainku, yaitu mail.domainku.com atau estrex.domainku.com.
layanan yang menjual third level domain salah satunya adalah enom dengan : .us.com,
.br.com, .cn.com, dll. sementara yang memberikan secara cuma cuma adalah
www.freedomain.co.nr memberikan .co.nr secara gratis dan www.co.cc yang memberikan
.co.cc secara gratis.

Gambar 2. Website Penyedia Domain

C. FTP (FILE TRANSFER PROTOCOL)

(FTP) adalah suatu protokol yang berfungsi untuk tukar-menukar file dalam suatu network
yang mensupport TCP/IP protokol. Dua hal penting yang ada dalam FTP adalah FTP server dan
FTP Client. FTP server menjalankan software yang digunakan untuk tukar menukar file, yang

106

selalu siap memberian layanan FTP apabila mendapat request dari FTP client. FTP client adalah
komputer yang merequest koneksi ke FTP server untuk tujuan tukar menukar file.
FTP digunakan dengan meluas dalam komunikasi rangkaian untuk pemindahan fail.
Keupayaannya yang meliputi hampir semua jenis OS dalam komunikasi menyebabkan utiliti ini
amat penting. Kebanyakkan server mempunyai kemudahan ini. Dan penggunaan transfer file
melalui FTP lebih cepat dan mudah dibanding penggunaan web base file manager, hal ini
karena command ftp dibuat dalam DOS atau menggunakan program seperti WS-FTP, Cute FTP.
Hal ini membuat anda dapat menggunankan rangkaian pemindahan file tanpa perlu brofsing
dengan segala macam grafik-grafik yang tidak diperlukan.
FTP hanya menggunakan metode autentikasi standar, yakni menggunakan username dan
password yang dikirim dalam bentuk tidak terenkripsi. Pengguna terdaftar dapat menggunakan
username dan password-nya untuk mengakses, men-download, dan meng-upload berkasberkas yang ia kehendaki. Umumnya, para pengguna terdaftar memiliki akses penuh terhadap
beberapa direktori, sehingga mereka dapat membuat berkas, membuat direktori, dan bahkan
menghapus berkas. Pengguna yang belum terdaftar dapat juga menggunakan metode
anonymous login, yakni dengan menggunakan nama pengguna anonymous dan password
yang diisi dengan menggunakan alamat e-mail.

a. Tujuan utama penggunaan FTP server adalah sebagai berikut :

1) Untuk men-sharing data.
2) Untuk menyediakan indirect atau implicit remote computer.
3) Untuk menyediakan teempat penyimpanan bagi user.
4) Untuk menyediakan transfer data yang reliable dan efisien.

b. Kelemahan FTP
FTP sebenarnya adalah cara yang tidak aman untuk mentransfer file karena file tersebut
ditransfer tanpa melalui enkripsi terlebih dahulu tetapi melalui clear text. Mode text yang
dipakai untuk transfer data adalah format ASCII atau format Binary. Secara default, ftp
menggunakan mode ASCII untuk transfer data. Karena pengirimannya tanpa enkripsi, maka
username, password, data yang ditransfer, maupun perintah yang dikirim dapat di sniffing oleh
orang dengan menggunakan protocol analyzer (Sniffer). Solusi yang digunakan adalah dengan
menggunakan SFTP (SSH FTP) yaitu FTP yang berbasis pada SSH atau menggunakan FTPS
(FTP over SSL) sehingga data yang dikirim terlebih dahulu dienkripsi (dikodekan).

a. Upload File ke FTP

Berikut ini langkah-langkah upload salah satu website menggunakan jaringan hosting dan
domain yang dimiliki oleh STMIK POLTEK PalComTech .

107

1) Login ke worksheet
2) Setting password ftp

Gambar 3. Managemen Setting Password

3) Buka Applikasi Core FTP

Gambar 4. Login FTP

108

4) Upload file

Gambar 5. Upload File

109