pemrograman web desain web

Program Study

Sistem Informasi

Mata Kuliah

DESAIN WEB

STMIK PalComTech

DAFTAR ISI

BAB 1. PEMAHAMAN DASAR WEBSITE .............................................................................. 1

A. PENGANTAR DESAIN WEB ....................................................................................................... 1

1. DESAIN WEB ...................................................................................................................... 1

2. WWW (WORLD WIDE WEB) ............................................................................................... 1

3. CARA KERJA WWW ............................................................................................................ 2

4. BROWSER WEB .................................................................................................................. 3

5. FUNGSI WEBSITE ............................................................................................................... 3

B. JENIS SITUS WEBSITE ............................................................................................................... 4

1. ALAT PEMASARAN ............................................................................................................. 4

2. NILAI TAMBAH ................................................................................................................... 4

C. ISTILAH-ISTILAH DALAM PEMROGRAMAN WEB ....................................................................... 6

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

A. MERUMUSKAN TUJUAN MEMBUAT WEBSITE .......................................................................... 9

B. KONSEP DASAR DESAIN ........................................................................................................... 9

C. ELEMEN LAYOUT ................................................................................................................... 10

1. KESEIMBANGAN .............................................................................................................. 10

2. KONTRAS ......................................................................................................................... 12

3. KONSISTENSI.................................................................................................................... 12

4. RUANG KOSONG .............................................................................................................. 13

D. PEWARNAAN ......................................................................................................................... 15

1. ASPEK PSIKOLOGI WARNA ............................................................................................... 15

2. WARNA DALAM DESAIN WEB .......................................................................................... 16

3. JENIS WARNA .................................................................................................................. 17

4. METODE PEMILIHAN WARNA .......................................................................................... 18

E. TIPOGRAFI ............................................................................................................................. 19

1. JENIS HURUF .................................................................................................................... 19

2. PENGGUNAAN HURUF ..................................................................................................... 21

3. PETUNJUK PEMILIHAN HURUF ........................................................................................ 22

F. LAYOUT ................................................................................................................................. 22

1. MODEL LAYOUT TOP INDEX ............................................................................................. 22

2. MODEL LAYOUT BOTTOM INDEX ..................................................................................... 23

3. MODEL LAYOUT LEFT INDEX............................................................................................. 23

4. MODEL LAYOUT RIGHT INDEX .......................................................................................... 24

5. MODEL LAYOUT SPLIT INDEX ........................................................................................... 24

6. MODEL LAYOUT ALTERNATING INDEX.............................................................................. 24

G. PEMBUATAN LAYOUT ............................................................................................................ 25

H. KRITERIA SITUS WEB YANG BAIK ............................................................................................ 25

1. USABILITY ........................................................................................................................ 25

2. NAVIGASI ......................................................................................................................... 26

3. GRAFIK DESAIN ................................................................................................................ 27

4. CONTENT ......................................................................................................................... 27

5. COMPATIBILTY ................................................................................................................. 28

6. LOADING TIME................................................................................................................. 28

7. FUNCTIONALITY ............................................................................................................... 28

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

A. DEFINISI HTML....................................................................................................................... 29

B. STRUKTUR DASAR HTML........................................................................................................ 29

C. FORMAT TAMPILAN SDERHANA ........................................................................................... 30

1. TAG UNTUK HEADLINE ..................................................................................................... 30

2. PARAGRAF ....................................................................................................................... 31

3. TAG STYLE SEDERHANA.................................................................................................... 32

D. FORMAT ELEMEN TEXT .......................................................................................................... 33

FORMAT TEXT ........................................................................................................................ 33

E. ANCHOR DAN LINK ................................................................................................................ 38

F. IMAGE ................................................................................................................................... 39

G. LIST ITEM............................................................................................................................... 41

1. ORDERED LIST / LIST BERNOMOR ..................................................................................... 41

2. UNORDERED LIST / LIST TANPA NOMOR .......................................................................... 42

H. TABLES .................................................................................................................................. 43

I. FORM .................................................................................................................................... 44

1. KONTROL TEXT ................................................................................................................ 46

2. KONTROL PASSWORD ...................................................................................................... 46

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

4. KONTROL CHECKBOX ....................................................................................................... 48

5. KONTROL SELECT ............................................................................................................. 48

6. KONTROL TEXT AREA ....................................................................................................... 49

7. KONTROL BUTTON ........................................................................................................... 50

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

A. KEGUNAAN CSS ..................................................................................................................... 52

B. KEUNTUNGAN CSS................................................................................................................. 52

C. KEKURANGAN CSS ................................................................................................................. 54

D. CARA PENULISAN CSS ............................................................................................................ 54

E. SYNTAX CSS ........................................................................................................................... 56

F. ID DAN CLASS ........................................................................................................................ 57

G. PROPERTI CSS ........................................................................................................................ 58

1. BACKGROUND ................................................................................................................. 58

2. FONT ............................................................................................................................... 58

3. TEXT ................................................................................................................................ 59

4. BORDER ........................................................................................................................... 60

5. MARGIN DAN PADDING ................................................................................................... 60

6. PSEUDO CLASS ................................................................................................................. 62

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

A. BACKGROUND ....................................................................................................................... 64

B. BORDER................................................................................................................................. 66

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

A. PEMBUATAN SKETSA ............................................................................................................. 67

B. TAHAPAN DESAIN DENGAN PHOTOSHOP .............................................................................. 68

1. MEMBUAT HEADER ......................................................................................................... 68

2. MEMBUAT BODY WEBSITE............................................................................................... 72

3. MEMBUAT FOOTER ......................................................................................................... 74

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

A. DESAIN LAYOUT..................................................................................................................... 77

B. TAHAPAN SKETSA HTML ........................................................................................................ 77

1. DESAIN HEADER ............................................................................................................... 77

2. DESAIN DENGAN BAHASA HTML ...................................................................................... 78

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

A. DESAIN LAYOUT..................................................................................................................... 82

B. TAHAPAN SKETSA HTML ........................................................................................................ 83

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

A. PENGENALAN JQUERY ........................................................................................................... 89

B. TRIK DASAR PEMAHAMAN JQUERY........................................................................................ 92

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

A. HOSTING ............................................................................................................................... 98

1. JENIS – JENIS HOSTING..................................................................................................... 98

2. KRITERIA MEMILIH WEB HOSTING ................................................................................... 99

3. BEBERAPA PENYEDIA HOSTING LOKAL DI INDONESIA....................................................... 99

4. CARA MENYEWA WEB HOSTING ...................................................................................... 99

B. DOMAIN ...............................................................................................................................100

C. FTP (FILE TRANSFER PROTOCOL) ...........................................................................................101

BAB 1PEMAHAMAN 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 adalahmenciptakan animasi dan grafik, pemilihan font, pemilihan warna, navigasi, isi. Desain web jugamenggabungkan pada seni programing dan pengembangan e-commerce. Desain web adalahsuatu format penerbitan elektronik.

Desain web sangat melibatkan estetika dan mood. Estetika berasal dari bahasa Yunaniaisthesis, yang kemudian dipopulerkan oleh Alexander Gottlieb Baungarten(1714-1762) dengannama aesthetica. Secara sederhana estetika bisa diartikan sebagai seni keindahan yangmempengaruhi kenyamanan pengguna secara visual karena karya seni yang memenuhi nilai-nilai estetika akan tampak lebin indah dan mudah dicerna.

Mood adalah dasar dari sebuah desain untuk memberikan pesan kepada pengunjung mengenaiperasaan dari situs tersebut. Beberapa elemen dalam situs yang mengekspresikan moodditampilkan melalui warna, teks, layout, gambar/grafis, dan efek-efek pendukung lainnya.Target pengunjung adalah langkah awal penentuan dari mood yang akan dihadirkan padasebuah situs.

2. WWW (World Wide Web)

WWW adalah kependekan dari World Wide Web, atau lebih dikenal dengan nama web. Webadalah sebuah layanan yang didapat oleh pemakai komputer apabila komputernya tersambungdengan internet. Dengan web, pengguna komputer diseluruh dunia dapat saling berinteraksidengan pengguna internet lainnya tanpa harus beranjak dari tempat dimana internet itudiakses. Dengan akses internet maka pengguna layanan internet dapat dengan mudahmemperoleh informasi yang diinginkan, bahkan dapat menyimpan program, atau gambar yangditampilkan dari media internet.

Web merupakan suatu ruangan yang dapat menampung informasi dalam jaringan Internetpada sebuah browser, dengan menambahkan kemampuan untuk mengolah kode-kode tertentuyang 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, karenakemampuan dari interface web yang dapat mengelolah layanan-layanan yang terdapat padainternet.

3. Cara Kerja WWW

Gambar 1. Cara kerja WWW

Penjelasan Cara Kerja WWW

1. Informasi – informasi yang dibuat disimpan dalam sebuah dokumen web pages padasebuah tempat penyimpanan, yaitu hardisk.

2. Dokumen web yang disimpan dalam sebuah harddisk terletak pada web server apabilakomputer yang dimaksud telah dilengkapi dengan web server seperti IIS, PWS atauApache Server. Dalam hal ini komputer bertugas sebagai server sekaligus menyimpaninformasi.

3. Komputer yang bertugas sebagai client membaca informasi yang terdapat pada webpages melalui sebuah jaringan internet dengan mengambil informasi yang tersimpanpada komputer server.

4. Komputer client menampilkan halaman web dengan menggunakan sebuah programkhusus, yaitu browser.

2

4. Browser Web

Browser web adalah program yang digunakan untuk menampilkan informasi dari suatu halamanweb yang tersimpan dalam komputer. Dengan menerapkan Grafik User Interface (GUI), makapara pengguna internet dengan mudah mengakses informasi-informasi yang terdapat padainternet.

Cara Kerja Browser Web

1. Browser web mengambil sebuah informasi melalui jaringan internet pada sebuah serverweb dengan perintah request.

2. Server web memberikan umpan balik atau feedback, dengan memberi perintahresponen

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 yangdibuat sesuai dengan fungsi, estetika dan mood yang dikehendaki :

Fungsi Komunikasi

Website yang digunakan untuk komunikasi adalah website-website yang digunakan untukemail, form contact, cahtting, forum dan sebagainya.

Fungsi Informasi

Website ini biasanya berisi teks dan grafik yang dapat didownload dengan cepet dan websiteuntuk fungsi informasi sebaiknya dilakukan pembatasan untuk penggunaan animasi, gambardan 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 metodetransaksi 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 produkataupun jasa layanan perusahaan dapat juga untuk sebuah company profile. Pemasaran melaluiinternet 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 disesuaikandengan posisi yang diinginkan.

2. Halaman web harus mengesankan pengunjung.

3. Letak isi menu tidak perlu terlalu banyak cukup simple akan tetapi menampilkan latarbelakang 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 perusahaantidak terlalu membutuhkan situs web itu, tetapi menggunakannya hanya sekedar untukmengikuti 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 adanyasitus 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 daripelanggan, menciptakan order dari pelanggan baru dan menekan keseluruhan biayapengeluaran.

Beberapa hal yang harus diperhatikan adalah :

1. Membuat nama domain sendiri.

2. Kecepatan akses sangat penting jadi jangan terlalu banyak menggunakan animasibergerak.

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 jugadigunakan 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 e-learning sehingga waktu belajar termanfaat dengan baik tidak tersita untuk memahami sisteme-learning,

2. Cepat

Bertujuan untuk kecepatan respon terhadap sebuah layanan keluhan dan kebutuhan perbaikanpeserta didik sehingga perbaikan pembelajaran dapat dilakukan secepat mungkin oleh pengajaratau pengelolah.

3. Personal

Peserta didik dapat berkomunikasi dengan baik layaknya komunikasi tatap muka pengajardengan peserta didik secara langsung, peserta didik dapat dibantu kemajuannya dan segalapersoalan yang dihadapi.

a. Komunitas

Sebuah situs yang memungkinkan untuk komunikasi secara bersama. Pengunjung dapatberbagi pengalaman dan cerita. Untuk menambah teman dan perkumpulan baru.

b. Portal

Adalah aplikasi berbasis web yang menyediakan akses suatu titik tunggal dari informasi onlineterdistribusi.

c. Personal

Adalah situs yang memiliki tujuan untuk mempromosikan atau menginformasikan tentangseseorang, biasanya berisi biodata, portofolio, prestasi ataupun cerita sehari-hari dariseseorang.

C. ISTILAH-ISTILAH DALAM PEMROGRAMAN WEB

Beberapa istilah dalam pemrograman web, antara lain :

1. Internet adalah kependekan dari International Networking, yang artinya jaringankomputer berskala internasional/global yang dapat membuat masing-masing komputersaling berkomunikasi.

2. Intranet merupakan jaringan komputer berskala kecil, hanya memiliki beberapa webserver yang diperuntukan untuk organisasi atau perudahaan, dan digunakan sebagaisarana komunikasi antara komputer dalam organisasi tersebut.

6

3. TCP/IP adalah kependekan dari Transmission Control Protocol / Internet Protocolartinya protokol yang terdiri dari sub-protokol, yang beroperasi pada lapisan yangberbeda. Ini merupalan protokol standar internet. Protokol ini memberikan nomor Unixpada setiap komputer yang terkoneksi.

4. URL adalah kependekan dari Uniform Resource Locators, artinya sebuah alamatdidalam internet yang terdiri atas 2bagian. Bagian pertama pengenalan protokol danbagian kedua adalah pengenalan domain.

5. HTTP adalah kependekan dari Hypertext Markup Language, artinya protokol yangberfungsi untuk mendefinisikan dan menjelaskan bagaimana server dan clientberinteraksi dalam mengirim dan menerima dokumen web.

7

BAB 2PRINSIP – PRINSIP DESAIN WEBSITE

Untuk membangun suatu website yang baik, seorang web designer sebaiknya memperhatikanprinsip – 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 kesadaranseorang designer untuk tidak meniru atau menggunakan karya orang lain.

2. Komposisi, Untuk memperindah tampilan halaman web, seorang web designer harusbetul – betul memahami komposisi, baik bentuk maupun warna yang akan digunakandalam website yang dibuatnya.

3. Simple, Banyak dari seorang web designer yang memegang prinsip – prinsip “Keep itSimple”. Hal ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif.

4. Semiotik, Arti semiotik adalah ilmu yang mempelajari tentang tanda – tanda. Dalamhal ini diharapkan pengunjung dapat dengan mudah dan cepat mengerti keika melihattanda dan gambar yang ada dalam suatu website.

5. Ergonomis, Ergonomis dalam mendesain website adalah kepunyaan yang akandidapatkan pengunjung dalam membacadan kecepatan yang akan diperolehpengunjung dalam mencari informasi. Hal – hal yang perlu diperhatikkan oleh seorangwebdesigener 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 yanglebih penting lagi adalah suatu website terlihat lebih informative.

1. Fokus, Fokus adalah hierarki prioritas dari pesan yang akan disampaikan, denganadanya fokus tersebut, diharapkan pengunjung dapat memahami dan menentukanpesan mana yang lebih dulu harus dibaca atau dilihat.

2. Konsistensi, Konsistensi adalah pemilihan bentuk atau style yang digunakan padaelemen – elemen perancangan web dan digunakan pada semua halaman website.Website yang konsisten akan memberikan identitas tersendiri dan mampumemperlihatkan visi serta misi dari website tersebut.

8

A. MERUMUSKAN TUJUAN MEMBUAT WEBSITE

Berdasarkan isi maupun tujuan, suatu website biasanya dapat digolongkan menjadi sepertiberikut 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 tersebutberkaitan dengan manfaat yang akan diperoleh pengunjung dari sebuah website.

b. Menentukan target pengunjung

Meskipun suatu website mempunyai sifat terbuka dalam arti sebuah website bebas dikunjungioleh semua orang, namun alangkah baiknya apabila dalam pembuatan website perlu dilakukangambaran target yang akan dituju oleh sebuah website. Alasan ini lebih didasarkan padapengguna 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 strukturyang 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, danpada dasarnya mengikuti prinsip desain grafis secara umum. Oleh karena itu alangkah baiknyajika 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 minatpengunjung untuk lebih menggali informasi yang ditawarkan dari suatu website.

3. Ekonomis

9

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

C. ELEMEN LAYOUT

Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis hendaknya seorang webdesigner perlu memperhatikan pedoman – pedoman yang ada untuk membuat tata letak suatutampilan, yaitu dalam mengatur elemen – elemen layout. Pedoman – pedoman yang dimaksudadalah:

1. Keseimbangan

Keseimbangan adalah hasil susunan satu atau lebih elemen desain sehingga antara satudengan 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 vertikalimajiner halaman web. Sehingga bentuknya menjadi terkesan formal, sederhana, mudahpembuatannya 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 garisvertikal imajiner halaman web sehingga tata letaknya tampak lebih dimanis karena adanyaruang kosong, berkesan santai dan kasual.

Beberapa Faktor yang harus diperhatikan yaitu :

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

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

Posisi, menempatkan objek yang dominan pada posisi agak ketengah akan terlihatseimbang 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 garisvertikal imajiner halaman web sehingga tata letaknya tampak lebih dimanis karena adanyaruang kosong, berkesan santai dan kasual.

Beberapa Faktor yang harus diperhatikan yaitu :

11

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

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

Posisi, menempatkan objek yang dominan pada posisi agak ketengah akan terlihatseimbang 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 bilaobjek berada ditengah. Untuk itu dengan menempatkan objek pada posisi tengah maka desainakan nampak seimbang.

2. Kontras

Diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya. Kontrasdapat dinyatakan dengan membedakan ukuran serta warna dari elemen – elemen layout.

Pemberian kontras pada suatu objek haruslah kontras positif, karena jika kontras yangdiberikan negatis maka objek tersebut akan menjadi samar-samar, bahkan tidak terlihat karenaterserap oleh background.

3. Konsistensi

12

Informasi lebih dimengerti oleh pengguna bila mempunyai aliran – aliran yang baik, sedikitgangguan yang mengambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonisbila tampilannya mencerminkan kesinambungan dari satu bagian kebagian lain. Konttinuitasdapat dibuat dengan membuat halaman – halaman mempunyai gaya, bentuk atau warna yangmemberikan 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 tahukemana harus pergi dan dia juga tahu dimana sedang berada.

Konsistensi dapat diterapkan pada margin, layout, huruf, warna dan yang paling utama adalahnavigasi. Konsistensi sangat efektif untuk membangun brand perusahaan. Brand bukan hanyalogo 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 dankesempurnaan pada suatu desain. Ruang kosong sebagai prinsip desain grafis mungkin dapatdilihat serupa dengan ruang yang ‘disia-siakan’. Ruang kosong kemudian berarti sebuahkemewahan dan semakin Anda kurang penggunaan sesuatu semakin Anda mendapatkan lebihbanyak ‘the less you use the more you must have’.

Lebih banyak ruang kosong dilihat sebagai sesuatu yang ‘lebih’ atau sesuatu yang ‘mahal’ dandapat memberikan posisi tertentu dalam kaitan ‘brand‘ sebuah perusahaan dengan targetpenjualan dengan konsumen kelas atas atau posisi desain itu sendiri. Desain dengan ruangkosong yang rapat dan penuh sesak akan terlihat sebagai sebuah cara untuk ‘menghematbiaya’. Membuat ruang kosong akan benar-benar menambah nilai untuk ‘brand‘ pada produktertentu.

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 merebutperhatian, menarik, menolak, menggemaskan bahkan warna bisa mempengaruhi emosi. Warnadapat menimbulkan kesan pertama pada pengunjung ketika menjelajah sebuah situs web.Warna modern biasanya terkesan bersih dan bercahaya, seperti biru dan kuning. Warnabersahabat biasanya terkesan ceria dan menyenangkan, seperti orange, kuning, hijau. Warnaperusahaan biasanya bersih, seperti biru, putih dan abu – abu. Warna anak – anak biasanyaterkesan ceria dan menonjol, seperti merah, kuning dan biru (warna primer).

1. Aspek Psikologi Warna

Warna mempunyai emosi yang melekat, yang bisa ditimbulkan dengan memperlihatkankeserasian 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 merahbisa menimbulkan gairah,membangkitkan semangat,mendorong keinginan.

Bahaya, perang, kekejaman,kekerasan, api, darah. Terlalubanyak warna merah bisadisangka terlalu agresif .

Merah Muda Kewanitaan (feminim),keremajaan (masa muda).

Naif,kelemahan, kekurangan.

Orange Kehangatan, bersemangat,ceria, keseimbangan, musimgugur, menimbulkan getaran

Meminta dan mencariperhatian

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. Merupakanwarna yang aman dipakaiuntuk 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, musimdingin, 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, dukacita, 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 dahuludibaca.

d. Menghubungkan antara satu elemen dengan yang lain (penggunaan warna backgroundhalaman 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 terdiriatas orange, hijau dan ungu.

Gambar 9. Warna Sekunder

c. Warna Tersier

Warna Tersier dibuat dengan mengkombinasikan warna primer dengan perbatasan warnasekunder. 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 berwujudmusik, 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 adasatu 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 inimenghasilkan warna yang lebih hidup (kontrasnya tinggi), misalnya biru dan orange, merahdan hijau, atau kuning dan ungu.

c. Metode Warna Segitiga

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

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 yangharmonis. 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 beranidan tegas. Warna hangat terletak pada bagian kanan roda warna. Warna hangat terdiri darikombinasi :

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 berkakimembuat garis tidak kelihatan, ini memudahkan mata pembaca untuk menelusuri danmembaca teks. Jadi huruf ini cocok dipakai untuk teks yang panjang dengan jarak spasi yangsedikit. Bentuk huruf ini memberikan kesan formal, intelektual, anggun dan konservatif. Cocokdipakai 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 cocokuntuk judul dan subjudul. Jika ingin menggunakan jenis ini untuk teks utama, imbangi denganmemberikan 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 suasanahati yang membangkitkan emosi. Jadi jangan sampai digunakan untuk teks yang panjang atauisi 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 terlalubanyak digunakan. Bentuk huruf ini memberikan kesan keanggunan, sentuhan pribadi dankepuasan.

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 dengangambar.

2) Pilihlah jenis huruf yang mudah dibaca, biasanya jenis serif dan sans-serif. Jenis hurufdekoratif atau kursif lebih sulit untuk dibaca, biasanya dipakai untuk judul, itupun harusberukuran besar.

3) Kadang – kadang jenis huruf sans-serif mudah dibaca daripada serif ketika karakteryang digunakan berukuran kecil .

4) Aturlah leading dan kerning. Leading adalah spasi antara dua baris teks, sedangkankerning adalah jarak spasi antar huruf.

5) Gunakan huruf standar yang terdapat pada semua komputer atau browser, sepertiTimes New Roman, Helvetica, Arial dan Verdana. Jika menginginkan jenis huruf lainyang unik untuk keindahan, jadikan huruf tersebut sebagai grafik.

3. Petunjuk Pemilihan Huruf

Beberapa petunjuk atau aturan baku yang digunakan dalam penggunaan huruf, baik dalampemilihan 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 jenishuruf dekoratif atau skrip digunakan untuk judul dan serif atau sans-serif untuk isihalaman, agar berfariasi.

22

3) Usahakan jangan lebih dari dua belas kalimat dalam satu baris teks, kanera akanmempersulit pembacaan.

4) Hindari pemakaian kombinasi dua huruf yang sangat mirip, karena menghasilkankontras yang rendah, ini menyebabkan ketidakserasian dan ketidakcocokan dalampandangan

5) Membatasi pemakaian jenis huruf dalam satu halaman. Jangan sampai melebihi tigaatau empat jenis huruf.

6) Hindari penggunaan slider (penggulungan halaman) lebih dari sekali. Apabila banyakartikel 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 dapatmembedakan dengan isi halaman

9) Hindari telalu banyak huruf besar karena akan memperlambat kecepatan membaca danmemboroskan ruang

10) Hindari pemakaian jenis huruf monospace untuk isi halaman, karena memerlukanbanyak perhatian untuk membacanya. Hal ini dapat mengalihkan pesan yang ingindisampaikan.

F. LAYOUT

Layout adalah proses penataan dan pengaturan teks atau grafik pada halaman. Layout meliputipenyusunan, pembagian tempat dalam suatu halaman pengaturan jarak spasi, pengelompokanteks dan grafik, dan penekanan pada suatu bagian tertentu. Secara umum, halaman webmemaki lima jenis layout dan pemilihan layout yang disesuaikan jenis informasi yangditampilkan.

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 penyediaannavigasi dibagian kiri seperti tampilan sistem opersi, tanpa menimbulkan kekacauan penyajianinformasi 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 kananmelainkan 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 yangdisertai 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. Berikutini 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 dahulumembuat sketsa diatas kertas. Namun untuk kebanyakan orang, langkah ini biasanyadilewatkan dan langsung pada langkah pembuatan layout desain dengan menggunakansoftware.

2. Membuat Layout Desain

Banyak software yang dapat digunakan membuat layout. Salah satu diantaranya adalahMacromedia, 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 yangperlu 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 atausitus web sampai pengguna dapat mengoperasikannya dengan mudah dan cepat. Web siteharus 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 dapatmendapatknya dengan cepat.

b. Efisien dalam penggunaan

Jangan menggunakn link yang terlalu banyak, sediakan seperlunya dan hantarkan pengunjunguntuk menncapai informasi yang diperlukan dengan cepat dan mudah.

c. Mudah untuk diingat

Situs jangan terlalu banyak melakukan peruban yang terlalu mencolok khususnya padanavigasi.

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 sertakanpula 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 warnayang 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 yangbukan 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 situsdengan cepat.

Beberapa tip untuk menghindari warna buta (warna yang jelek), yaitu :

1) Hindari menggunakan hanya warna hijau dan warna merah saja dalam desain. Karenakebanyakan orang tidak bisa membedakan antara bayangan warna merah dan warnahijau.

2) Jangan menggunakan warna sebagai petunjuk. Lebih baik gunakan petunjuk lain yanglebih 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 tujuansitus web tersebut, dan desainnya harus mempu mengkomunikaskan, mendukung danmenyempurnakan 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. Jangansampai user teralihkan perhatiannya dari tujuan awal dibuatnya situs web.

4) Jaga grafik agar berukuran kecil dan gunakan fasilitas optimize pada programpenggunaan grafik.

5) Gunakan format yang tepat. Format JPEG dan PNG 24 bit digunakan untuk foto. FormatGIF 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 datangkembali 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 fasilitasoptomize 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 programerdengan script-nya, misalnya dengan HTML, PHP, ASP, ColdFusion, CGI, SSI dan lain-lain.

30

BAB 3PENGENALAN BAHASA HTML

A. DEFINISI HTML

HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata carapenulisan yang digunakann dalam dokumen web. Dokumen HTML adalah sebuah dokumen textmurni yang dapat dibuat dengan editor web sembarangan seperti notepad.

Dokumen ini akan dijalankan oleh sebuah web browser misalnya internet explorer, mozillaataupun opera. Sehingga mampu menampilkan tampilan sesuai keinginan designer atauprogramer 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) yangpenulisannya disederhanakan. HTML dapat dibaca oleh berbagai platform. HTML jugamerupakan bahasa pemrograman fleksibel, dapat disisipi /digabungkan dengan bahasapemrograman lainnya.

B. STRUKTUR DASAR HTML

Gambar 22. Struktur Dasar HTML

Keterangan:

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

31

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

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 bilanganyang terdapat pada heading berfungsi untuk mewakili ukuran ukuran dari besarnya tagheading. Bilangan pertama merupakan ukuran terbesar sedangkan yang terkecil adalahbilangan 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 tulisanseperti 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 cetakdari printer pada komputer yang sedang melakukan browsing dokumen kita.

Tag Fisikal : tampilan akan disesuaikan dengan kemampuan resolusi cetak dari printerpada 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 sebuahdokumen HTML.

b. Cetak Miring / Italic

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

c. Cetak Garis Bawah / Underline

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

d. Mengecilkan Huruf / Small

Untuk mengecilkan huruf didalam dokumen HTML. digunakan tag small untuk membuat textagar 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 sebuahtext 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 denganpenggunaan 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 dokumenHTML.

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 kitaatur 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 horizontalsepanjang 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 kehalaman lainnya (link). Link dalam halaman HTML ditandai dengan menggaris bawahi teks yangakan di link, atau pointer mouse akan berubah menjadi bentuk jari apabila berada pada objeklink 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 halamanweb 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 weblainnya di dalam satu komputer tanpa harus menuliskan secara lengkap alamat situs internetseperti 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 sebuahwebsite. Namun penggunaannya akan mengakibatkan semakin besarnya penggunaan byte daridokumen HTML yang secara otomatis akan berakibat pula pada kinerja atau memperlambatwaktu tampil dari halaman web tersebut.

Pada umumnya, gambar yang ditampilkan pada halaman web akan disajikan bersama teks darihalaman web tersebut. Format gambar yang banyak digunakan dalam halaman web , antaralain 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 resolusirendah, yang akan ditampilkan saat menunggu loadingimage.

ALT Text alternative yang akan ditampilkan jika browserdalam text mode.

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

BORDER Menentukan tebal border/bingkai disekitar image (diisidengan nilai integer)

HEIGHT Menentukan tinggi dari gambar, diisi dalam pixel ataupersen(%)

WIDTH Menentukan lebar gambar, diisi dalam pixel ataupersen(%)

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 dengannomor 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, akantetapi 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. Padaumumnya setiap kolom menunjukan data-data yang sama dalam suatu kelompok data.Sedangkan baris menunjukan data-data dari kolom-kolom yang menunjukan sekelompok datadalam 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, TRataupun TD

Border Untuk menentukan ketebalan garis pada table

Cellpadding Untuk menentukan lebar spasi antar border dan isisel

Cellspacing Untuk menentukan lebar spasi antar sel

HEIGHT Menentukan tinggi tabel

WIDTH Menentukan lebar table

Valign Untuk menentukan posisi vertikal peletakan barisdalam 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 untukmendapatkan hasil yang diinginkan pengguna, seperti proses penyimpanan, proses edit, proseshapus 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 daripengguna. 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 bedanyapada 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 dapatditampilkan, tetapi dapat diolah melalui masukandari 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. Danmemungkinkan 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 dapatditampilkan, tetapi dapat diolah melalui masukandari 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 ditampilkanpada pemrograman berbasis server side, sepertiASP.

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 karenamemiliki 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. Buyttondigunakan untuk mengontrol atau menjalankan suatu prosedur atau event dari VBScript,Submit digunakan untuk mengirim data-data ke server (lebih bnayak berhubungan denganpemrograman yang berbasis Server Side seperti ASP), sedangkan Reset digunakan untukmenghapus data-data yang ada pada suatu form. Sintaksnya dari masing-masing tipe di atasadalah 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 dankebalikannya yaitu ltr (Left to Right)

Gambar 50. Gambar input Button

54

BAB 4PENGENALAN CSS

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinyaair terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yangsaling berhubungan.

CSS (Cascading Style Sheet) secara sederhana adalah sebuah metode yang digunakan untukmempersingkat penulisan tag HTML, seperti font, color, text, dan tabel menjadi lebih ringkassehingga tidak terjadi pengulangan penulisan.

CSS adala bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Denganadanya CSS, memungkinkan kita untuk menampilkan halaman yang sama dengan formatberbeda.

CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide WebConsortium 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 denganproperti dan nilai yang sama.

2. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapatpengulangan penulisan.

3. Mudah dan cepat dalam memaintenance : dikarenakan file CSS yang dibuat secaraterpisah, 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 bisamemberi warna pada input box atau scrollbar, yang tentunya tidak bisa dilakukan olehbahasa HTML.

B. KEUNTUNGAN CSS

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

55

berbeda-beda, karena setiap tampilan membutuhkan penulisan tag-tag yang secara mandiriunik. Untuk bagian-bagian dengan tampilan yang sama pun seorang webmaster harusdirepotkan dengan penulisan tag-tag HTML secara berulang-ulang.

Hadirnya CSS, pekerjaan seorang webmaster menjadi jauh lebih ringan. CSS mampumenghindarkan pengulangan dalam penulisan tag HTML, sehingga ukuran file pun akan jauhlebih 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 fileCSS dibuat secara terpisah, sehingga memungkinkan kita mendekorasi tampilan bagian-bagiantertentu 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 lebihmudah daripada untuk situs dengan ratusan atau ribuan halaman. Dengan CSS, kita akan dapatmengupdate tampilan halaman-halaman web dalam jumlah banyak dengan mudah, karenasemua 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 secaramandiri. Hal ini secara signifikan akan berdampak pada proses loading yang lebih cepat. Selainitu, CSS hanya akan di-load satu kali oleh browser dan akan terus diterapkan pada halaman-halaman lain. Hal ini berbeda dengan situs yang menggunakan table karena harus di-loadberulang-ulang.

3. Modifikasi web template lebih mudah

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

4. Search Engine Friendly

Sebuah situs web yang dilayout dengan CSS akan lebih search engine friendly daripada situs-situs 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 melaluimobile phone atau PDA. Situs web yang menggunakan CSS akan jauh lebih mudah digunakanoleh 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 yanglain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser danmenambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan webanda 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 penulisannyacukup dengan menambahkan atribut style=”…..” dalam tag HTML tersebut.

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

Contoh Penulisan:

57

Gambar 51. Gambar Inline Style Sheet

2. Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style>……</style> diatas <body>. Padadefinisi ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yangselanjutnya 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 pendefinisiantag <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 lebihdeklarasi.

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 diapitoleh tanda kurung kurawal.

F. ID DAN CLASS

Selain selektor-selektor umum yang sering dipakai (tag-tag html) kita dapat menggunakan IDdan 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 denganmenggunakan 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 yanghanya dapat digunakan untuk satu elemen, class digunakan untuk beberapa elemenyang 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 ratatengah.

G. PROPERTI CSS

1. Background

Properti background digunakan untuk mengatur efek-efek yang berkenaan dengan backgroundsuatu 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 tidakberulang 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”. Properti-properti 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 tersebutmaka akan dilanjutkan dengan huruf-huruf setelah tanda koma. Kemudian teks akan menjaditebal 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 teksseperti:

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 biasadigunakan 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 menjadisingkat 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 warnabackground (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). Paddingatas, 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:first-letter

Memilih huruf pertama dari setiap paragraf

:first-line p:first-line Memilih baris pertama dari setiap paragraph

:first-child p:first-child

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” yangbernilai “it”

66

BAB 5FORM

Form interaktif adalah salah satu cara umum untuk bertukar informasi dan melakukan bisnismelalui internet atau intranet. Form menyediakan struktur yang teratur untuk memasukan datamengumpulkan sejumlah besar data. Dengan adanya form maka sebuah website dapatberfungsi sebagaimana mestinya.

Kita sering menggunakan komponen form untuk melakukan interaksi kegiatan sehari-hari.Sebagai contoh setiap akan melakukan registrasi, login ke halaman tertentu ataupun melakukanpencarian data selalu saja pengguna memanfaatkan komponen form.

Dengan begitu seringnya pengguna website memanfaatkan komponen form maka hendaknyaform dirancang sebaik mungkin dan semenarik mungkin untuk itu menunjang hal tersebut perludilakukan 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 dayatarik tersendiri bagi pengguna website form yang dibuat dapat diubah backgroundnya denganmenggunakan 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” />


<label>Username</label><input type=”text” name=”username” />


<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 topcenter; }input[type=submit] { background: #CC66FFurl(../images/tombol.jpg); width:100px; height:30px; }

Gambar 54. Style background gambar

B. BORDER

Dengan menggunakan CSS maka tampilan form dapat diperindah sehingga menciptakan dayatarik 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/form-

bckg.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 kemungkinankesalahan penerapan konsep kedalam bentuk hasil akhir.

1. Sketsa kertas

Menggambarkan sketsa situs web tersebut dalam secarik kertas untuk membantumenggambarkan 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 menggunakanaplikasi grafis seperti Photoshop, CorelDraw dan lain-lain. Dalam tahap ini sketsa dapat dibuatlebih detail.

BAB 6

DESAIN SITUS WEB

A. PEMBUATAN SKETSA


1. Sketsa kertas



2. Sketsa Digital


BAB 6

DESAIN SITUS WEB

A. PEMBUATAN SKETSA


1. Sketsa kertas



2. Sketsa Digital


BAB 6

DESAIN SITUS WEB

A. PEMBUATAN SKETSA


1. Sketsa kertas



2. Sketsa Digital


71

Gambar 2. Perancangan Skestas Digital

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

b. TAHAPAN DESAIN DENGAN PHOTOSHOP

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

1. Membuat Header

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

72

Gambar 3. Memulai Dokumen Baru Header

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

2) Pengisian Warna Background Header

Gambar 4. Pengisian Warna

Pengisian warna dapat dilakukan menggunakan pemilihan warna foreground danbackground yang telah disiapkan oleh photoshop

3) Pewarnaan Background Header Web

Kita dapat melakukan pengisan warna kedalam bentuk gradasi/perpaduan warnadengan memilih tool pengisan warna yang telah disiapkan oleh photoshop berupagradient 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 menggunakanteks tool yang telah disediakan adobe photoshop

Gambar 7. Text Tool yang disediakan Adobe Photoshop

Menggunakan teks tool kita dapat melakukan pembuatan teks kedalam header websiteyang 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, besarkecilnya ukuran teks dan posisi peletakan teks, maka tahapan selanjutnya adalahdengan melakukan pengisian gambar, logo atau foto.

Mengisikan gambar, logo atau foto dengan memilih menu file open, seperticontoh dibawah ini :

Gambar 9. Pengsian Gambar Kedalam DesainHeader

Tahapan selanjutnya adalah melakukan pengeditan terhadap gambar, logo atau fotoyang 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 headerdengan 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 ukuran800pixel X 450pixel dengan Resolusi 72 pixels/inchi, ukuran resolusi ini dipakai karenaresolusi inilah yang maksimal dapat ditampilkan di web. Untuk Mode warna atau colormode pilih RGB color karena file ini akan dioptimalisasikan ke file JPEG. Untukbackground dipilih white.

Gambar 14. Memulai Dokumen Baru Body

Setelah kita menentukan ukuran dan resolusi dokumumen untuk pembuatan headersebuah web tahapan selanjutnya kita dapat melakukan pengisian gambar, teks danmelakukan 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 danbackground 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


3. Membuat Footer

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

78

Gambar 18. Memulai Dokumen Baru Footer

Setelah kita menentukan ukuran dan resolusi dokumumen untuk pembuatan Footersebuah web tahapan selanjutnya kita dapat melakukan pengisian gambar, teks danmelakukan 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 warnadengan memilih tool pengisan warna yang telah disiapkan oleh photoshop berupagradient 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


80

BAB 7DESAIN WEB PERSONAL

A. DESAIN LAYOUT

Sebelum melakukan desain layout sebaiknya membuat desain sketsa. Berikut ini adalah bentuksketsa 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 yangakan disampaikan. Header biasany menampilkan logo atau gambar yang mencerminkan citradiri seseorang, perusahaan atau suatu organisasi.

Content adalah sebuah wadah untuk menampilkan informasi dari menu/navigasi yang dipiliholeh 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 MasjidTerbesar di Kota Lahat. Sebelum Berdirinya Masjid ini, lokasi inimerupakan tempat makam orang China (KuburanChina).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 gerejatertua di Kota Lahat, Artistik zaman belanda masih terasa sangatkental, Lokasinya tepat di depan Rumah Sakit UmumDaerah (RSUD) Kota Lahat. Tak heran banyak wisatawan lokal maupun

83

luar mengunjungi tempat ini hanya untuk melihat keindahanbangunan 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 selesaidibangun pada pertengahan tahun 2008 ini. Desain bangunan inimerupakan perpaduan antara Rumah Adat Kota Lahat denganartistik 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 */


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 8DESAIN WEBSITE PERUSAHAAN

A. DESAIN LAYOUT

Sebelum melakukan desain layout sebaiknya membuat desain sketsa. Berikut ini adalah bentuksketsa 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 yangakan disampaikan. Header biasany menampilkan logo atau gambar yang mencerminkan citradiri seseorang, perusahaan atau suatu organisasi.

Widget adalah navigasi tambahan selain yang terdapat pada bagian menu. Bagian ini biasanyaberisi informasi tambahan, dan tools penunjang lainnya.

Content adalah sebuah wadah untuk menampilkan informasi dari menu/navigasi yang dipiliholeh 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 GorengMentega</a></li>

<li><a href="kepiting.html">Kepiting SausPadang</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 STMIKPalComTech Palembang ini sudah dikenal di lingkungan kampus.Dialah KING Priady yang pada tahun 2008 pernah menorehkanprestasi untuk kampus PalComTech. Sepak terjang King sudah tidakperlu diragukan lagi di bidang bulu tangkis. Kalau mau dirunutsemua prestasi yang pernah ia raih mulai dari tahun 1997 sudahlebih dari 10 penghargaan yang ia peroleh. Dari banyaknyaprestasi yang telah ia dapat, membuat King tak puas sampai disinisaja.“Momen yang mengesankan pas pomda 2008 kemarin soalnya sayadikonfirm secara mendadak terus tanpa persiapan yang cukup dantanpa target menang. Tetapi pas bertanding ternyata hasilnya sayajuara ganda campuran menyumbang mendali emas apalagi bagi STMIKPalComTech yang baru pertama kali ikut pomda.” Kenang King denganrasa bangga dengan prestasi yang pernah ia raih. Hal ini baginyasatu momentum yang membuat kebanggaan tersendiri. Apalagi tahun2010 ini King menyumbangkan mendali emas yang kedua bagi kampusPalComTech 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 */


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 9JQUERY

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 membuatkode javascript untuk mempercantik website yang kita desain biasanya menggunakan kodeyang 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 untukdijadikan 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 yangdiinginkan, 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 sudahditampilkan 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 classdan 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 terhadapelemen 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

Traversing

Manipulation

CSS

Events

Effects

Ajax

PluginjQuery UI (User Interface)

Utilities

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

1. Filosofi Pemrograman jQuery

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

Gambar 3. Filosofi Pemrograman jQuery

Pada umunya, perintah jQuery digantikan dengan tanda dolar ($) yang merupakan simbolresmi 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 didefinisikandibagian body, kemudian melakukan sesuatu terhadap elemen tersebut, inilah filosofidasar dari jQuery.

Catatatan :

jQuery mempunyai fungsi-fungsi yang tergabung dalamkelompok class yang berguna untuk menambahkan danmenghapus kelompok class beserta nilainya pada suatuelemen. Ada 3 fungsi yang termasuk dalam kelompokClass, yaitu :1. addClass(“nama_class”); untuk menambahkan classpada elemen yang dipilih.2. removeClass(“nama_class”); untuk menghapus classpada elemen yang dipilih.3. toggleClass(“nama_class”); untuk menambahkan classpada suatu elemen apabila elemen tersebut belumdigunakan Class, namun apabila pada elemen tersebutsudah menggunakan class maka pada elemen tersebutakan dihapus.

2. Memahami Selector

Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukanoperasi 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 namaelemennya $(“#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>


<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 namaelemennya $(“#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>


<ul id="daftar"><li>Item 1</li><li class="subdaftar">Item 2</li><li>Item 3</li>

</ul></div></body></html>

102

BAB 10HOSTING DAN DOMAIN

A. HOSTING

Hosting adalah jasa layanan internet yang menyediakan sumber daya server-server untukdisewakan sehingga memungkinkan organisasi atau individu menempatkan informasi di internetberupa HTTP, FTP, EMAIL atau DNS. Server hosting terdiri dari gabungan server-server atausebuah server yang terhubung dengan jaringan internet berkecepatan tinggi.

Hosting adalah suatu space atau tempat di internet yang kita gunakan untuk menyimpan data-data situs kita. Entah itu situs perusahaan, situs pribadi, situs blog, dan lain sebagainya. Setiapsitus yang hendak kita buat online sehingga banyak orang bisa mengaksesnya, harus disimpanpada suatu host. Kini banyak tersedia host-host yang ditawarkan yang ada di internet. Mulaiyang berbayar, sampai yang gratis sekalipun. Yang gratis biasanya nama domain yang kitadapatkan 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 penggunalain satu server dipergunakan oleh lebih dari satu nama domain. Artinya dalam satuserver tersebut terdapat beberapa account yang dibedakan antara account satu danlainnya dengan username dan password.

b. VPS, Virtual Private Server, atau juga dikenal sebagai Virtual Dedicated Servermerupakan proses virtualisasi dari lingkungan software sistem operasi yangdipergunakan oleh server. Karena lingkungan ini merupakan lingkungan virtual, haltersebut memungkinkan untuk menginstall sistem operasi yang dapat berjalan diatassistem operasi lain.

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

d. Colocation Server adalah layanan penyewaan tempat untuk meletakkan server yangdipergunakan untuk hosting. Server disediakan oleh pelanggan yang biasanya bekerjasama 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, makasemakin besar space yang akan dibutuhkan. Semakin banyak pengunjung blog andamaka semakin besar bandwidth yang dibutuhkan agar tidak terjadi server full load.

2) Perhatikan layanan dan fitur dari tempat anda akan menghostingkan blog atau websiteanda. Bisa mencakup software apa saja yang ada di hostingnya serta support dari jasahostingnya.

3) Target pembaca. Jika anda memilih target pembaca dari dalam negeri ada baiknyamenggunakan server lokal saja agar lebih menghemat bandwidth. Tetapi jika andamemilih target yang glogal, maka tak ada salahnya anda memilih server luar negeriseperti di Amerika.

4) Harga yang pas. Konsultasikan kepada mereka yang lebih paham tentang kebutuhanhosting 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 tersediadi 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 ketersediaannama domain yang anda inginkan seperti di IDwebhost.com, dan selesaikanpembayarannya.

104

4) Jika hosting anda sudah online biasanya anda akan mendapat email dari penyedia jasaatau 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 komputerseperti web server atau email server di internet. Nama Domain memberikan kemudahkanpengguna di internet untuk melakukan akses ke server dan mengingat server yang dikunjungidibandingan 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 CodeTop Level Domain (ccTLD). gTLD adalah seperti yang pada di list diatas dan ccTLD adalah TLDyang 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 domainyang anda daftarkan adalah domainku.com, maka domainku adalah SLD dan .comnya adalahTLD.

Third Level Domain adalah nama setelah Second Level Domain . Misalnya nama domain yanganda miliki adalah domainku.com, maka anda dapat menambahkan nama lain sebelumdomainku, 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 adalahwww.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 networkyang mensupport TCP/IP protokol. Dua hal penting yang ada dalam FTP adalah FTP server danFTP 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 adalahkomputer 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 iniamat penting. Kebanyakkan server mempunyai kemudahan ini. Dan penggunaan transfer filemelalui FTP lebih cepat dan mudah dibanding penggunaan web base file manager, hal inikarena command ftp dibuat dalam DOS atau menggunakan program seperti WS-FTP, Cute FTP.Hal ini membuat anda dapat menggunankan rangkaian pemindahan file tanpa perlu brofsingdengan segala macam grafik-grafik yang tidak diperlukan.

FTP hanya menggunakan metode autentikasi standar, yakni menggunakan username danpassword yang dikirim dalam bentuk tidak terenkripsi. Pengguna terdaftar dapat menggunakanusername dan password-nya untuk mengakses, men-download, dan meng-upload berkas-berkas yang ia kehendaki. Umumnya, para pengguna terdaftar memiliki akses penuh terhadapbeberapa direktori, sehingga mereka dapat membuat berkas, membuat direktori, dan bahkanmenghapus berkas. Pengguna yang belum terdaftar dapat juga menggunakan metodeanonymous login, yakni dengan menggunakan nama pengguna anonymous dan passwordyang 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 tersebutditransfer tanpa melalui enkripsi terlebih dahulu tetapi melalui clear text. Mode text yangdipakai untuk transfer data adalah format ASCII atau format Binary. Secara default, ftpmenggunakan mode ASCII untuk transfer data. Karena pengirimannya tanpa enkripsi, makausername, password, data yang ditransfer, maupun perintah yang dikirim dapat di sniffing olehorang dengan menggunakan protocol analyzer (Sniffer). Solusi yang digunakan adalah denganmenggunakan 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 dandomain yang dimiliki oleh STMIK – POLTEK PalComTech .

107

1) Login ke worksheet

2) Setting password ftp

Gambar 3. Managemen Setting Password

3) Buka Applikasi Core FTP

Gambar 4. Login FTP

108

4) Upload file

Gambar 5. Upload File

109

pemrograman web desain web

Documents

Transcript of pemrograman web desain web