Program Study
 |
| Program Study |
interface pada halaman web jangan terlalu banyak,susunan halaman web teratue disrtai link 2 merupakan prinsip - 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.
1
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.
2
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 :
3
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.
4
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
5
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.
6
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.
7
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.
8
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
9
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
memberikan warna merah
bisa menimbulkan gairah,
membangkitkan semangat,
mendorong keinginan.
Bahaya, perang, kekejaman,
kekerasan, api, darah. Terlalu
banyak warna merah bisa
disangka terlalu agresif .
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
Left, Right, Center, Justify
Pengaturan letak headline/heading.
<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
Left, Right, Center, Justify
Pengaturan letak patagraf.
<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. 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.
c. Cetak Garis Bawah / Underline
Garis bawah digunakan untuk menampilkan agar text yang akan ditampilkan memiliki garis
dibawak kalimat dalam dokumen HTML.
d. Mengecilkan Huruf / Small
Untuk mengecilkan huruf didalam dokumen HTML. digunakan tag small untuk membuat text
agar tampak berbeda dari teks yang lainnya.
Contoh :
<p>nama saya dini, <small>19 Juli 1987
</small> saya dilahirkan </p>
<b>text </b>
<i>text </i>
<u>text </u>
<small>text </small>
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.
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.
<big>text </big>
<strike>text </strike>
37
Contoh :
g. Subscript dan Superscript
Untuk membuat rumus aritmatika berupa pemangkatan dan rumus kimia didalam dokumen
HTML.
Contoh :
2<sup>5</sup> + 5<sup>2</sub>
H<sub>2</sub>SO<sub>4</sub>
Gambar 31. Tag Style Sup & Sub
<p>nama saya dini, <strike>19 Juli 1987
</strike> saya dilahirkan </p>
<sup>text superscript</sup>
<sub>text subscript</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.
Contoh :
Gambar 32. Contoh Tag Style PRE
Gambar 33. Tag Style PRE
<pre>tulisan</pre>
39
i. Tag Garis Pemisah Horizontal
Digunakan untuk membuat garis pemisah antar baris atau untuk membuat garis horizontal
sepanjang lebar halaman homepage.
<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
<HR [properti]>
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>
<th>......</th>
<th>......</th>
</tr>
<tr>
<td>......</td>
<td>......</td>
</tr>
</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:
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.
properti properti
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:
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
e. 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=utf-
8” />
<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=utf-
8" />
<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 © 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=utf-
8" />
<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
<h2>Daftar Menu Makanan</h2>
<ul>
<li><a href="#">Udang Goreng
Mentega</a></li>
<li><a href="kepiting.html">Kepiting Saus
Padang</a></li>
<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 © 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=utf-
8" />
<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
Dengan adanya informasi yang kami sajikan tentang interface pada halaman web jangan terlalu banyak,susunan halaman web teratue disrtai link 2 merupakan prinsip
, harapan kami semoga anda dapat terbantu dan menjadi sebuah rujukan anda. Atau juga anda bisa melihat referensi lain kami juga yang lain dimana tidak kalah bagusnya tentang Kumpulan Contoh Slogan Tentang Budaya
. Sekian dan kami ucapkan terima kasih atas kunjungannya.
buka contoh marketing : https://www.academia.edu/14352447/pemrograman_web_desain_web
No comments:
Post a Comment