Program Study. Sistem Informasi. Mata Kuliah DESAIN WEB. STMIK PalComTech

Transkripsi

1

2 Program Study Sistem Informasi Mata Kuliah DESAIN WEB STMIK PalComTech

3 DAFTAR ISI BAB 1. PEMAHAMAN DASAR WEBSITE... 1 A. PENGANTAR DESAIN WEB DESAIN WEB WWW (WORLD WIDE WEB) CARA KERJA BROWSER WEB FUNGSI WEBSITE... 3 B. JENIS SITUS WEBSITE ALAT PEMASARAN 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 KESEIMBANGAN KONTRAS KONSISTENSI RUANG KOSONG D. PEWARNAAN ASPEK PSIKOLOGI WARNA WARNA DALAM DESAIN WEB JENIS WARNA METODE PEMILIHAN WARNA E. TIPOGRAFI JENIS HURUF PENGGUNAAN HURUF PETUNJUK PEMILIHAN HURUF... 22

4 F. LAYOUT MODEL LAYOUT TOP INDEX MODEL LAYOUT BOTTOM INDEX MODEL LAYOUT LEFT INDEX MODEL LAYOUT RIGHT INDEX MODEL LAYOUT SPLIT INDEX MODEL LAYOUT ALTERNATING INDEX G. PEMBUATAN LAYOUT H. KRITERIA SITUS WEB YANG BAIK USABILITY NAVIGASI GRAFIK DESAIN CONTENT COMPATIBILTY LOADING TIME FUNCTIONALITY BAB 3. PENGENALAN BAHASA HTML A. DEFINISI HTML B. STRUKTUR DASAR HTML C. FORMAT TAMPILAN SDERHANA TAG UNTUK HEADLINE PARAGRAF TAG STYLE SEDERHANA D. FORMAT ELEMEN TEXT FORMAT TEXT E. ANCHOR DAN LINK F. IMAGE G. LIST ITEM ORDERED LIST / LIST BERNOMOR UNORDERED LIST / LIST TANPA NOMOR H. TABLES I. FORM KONTROL TEXT KONTROL PASSWORD... 46

5 3. KONTROL RADIO BUTTON KONTROL CHECKBOX KONTROL SELECT KONTROL TEXT AREA KONTROL BUTTON BAB 4. PENGENALAN CSS A. KEGUNAAN CSS B. KEUNTUNGAN CSS C. KEKURANGAN CSS D. CARA PENULISAN CSS E. SYNTAX CSS F. ID DAN CLASS G. PROPERTI CSS BACKGROUND FONT TEXT BORDER MARGIN DAN PADDING PSEUDO CLASS BAB 5. FORM A. BACKGROUND B. BORDER BAB 6. DESAIN SITUS WEB A. PEMBUATAN SKETSA B. TAHAPAN DESAIN DENGAN PHOTOSHOP MEMBUAT HEADER MEMBUAT BODY WEBSITE MEMBUAT FOOTER BAB 7. DESAIN WEB PERSONAL A. DESAIN LAYOUT B. TAHAPAN SKETSA HTML DESAIN HEADER DESAIN DENGAN BAHASA HTML... 78

6 BAB 8. DESAIN WEBSITE PERUSAHAAN A. DESAIN LAYOUT B. TAHAPAN SKETSA HTML BAB 9. JQUERY A. PENGENALAN JQUERY B. TRIK DASAR PEMAHAMAN JQUERY BAB 10. HOSTING DAN DOMAIN A. HOSTING JENIS JENIS HOSTING KRITERIA MEMILIH WEB HOSTING BEBERAPA PENYEDIA HOSTING LOKAL DI INDONESIA CARA MENYEWA WEB HOSTING B. DOMAIN C. FTP (FILE TRANSFER PROTOCOL)...101

7 BAB 1 PEMAHAMAN DASAR WEBSITE A. PENGANTAR DESAIN WEB 1. Desain Web Desain web adalah seni dan proses dalam menciptakan halaman web tunggal atau keseluruhan. Sebagian dari aspek yang mungkin tercakup pada desain web atau produksi web adalah menciptakan animasi dan grafik, pemilihan font, pemilihan warna, navigasi, isi. Desain web juga menggabungkan pada seni programing dan pengembangan e-commerce. Desain web adalah suatu format penerbitan elektronik. Desain web sangat melibatkan estetika dan mood. Estetika berasal dari bahasa Yunani aisthesis, yang kemudian dipopulerkan oleh Alexander Gottlieb Baungarten( ) dengan nama aesthetica. Secara sederhana estetika bisa diartikan sebagai seni keindahan yang mempengaruhi kenyamanan pengguna secara visual karena karya seni yang memenuhi nilainilai estetika akan tampak lebin indah dan mudah dicerna. Mood adalah dasar dari sebuah desain untuk memberikan pesan kepada pengunjung mengenai perasaan dari situs tersebut. Beberapa elemen dalam situs yang mengekspresikan mood ditampilkan melalui warna, teks, layout, gambar/grafis, dan efek-efek pendukung lainnya. Target pengunjung adalah langkah awal penentuan dari mood yang akan dihadirkan pada sebuah situs. 2. WWW (World Wide Web) WWW adalah kependekan dari World Wide Web, atau lebih dikenal dengan nama web. Web adalah sebuah layanan yang didapat oleh pemakai komputer apabila komputernya tersambung dengan internet. Dengan web, pengguna komputer diseluruh dunia dapat saling berinteraksi dengan pengguna internet lainnya tanpa harus beranjak dari tempat dimana internet itu diakses. Dengan akses internet maka pengguna layanan internet dapat dengan mudah memperoleh informasi yang diinginkan, bahkan dapat menyimpan program, atau gambar yang ditampilkan dari media internet. Web merupakan suatu ruangan yang dapat menampung informasi dalam jaringan Internet pada sebuah browser, dengan menambahkan kemampuan untuk mengolah kode-kode tertentu yang secara umum dinamakan tag-tag (delimiter) dan kemampuan untuk dapat meloncat (link) dari halaman satu ke halaman lainnya dan kemampaun untuk pengolah sebuah gambar, suara, animasi, bahkan pengolahan database dari sebuah aplikasi berbasis web. 1

8 Pada perkembangan selanjutnya, web lebih banyak dikenal dengan nama Internet, karena kemampuan dari interface web yang dapat mengelolah layanan-layanan yang terdapat pada internet. 3. Cara Kerja WWW Gambar 1. Cara kerja WWW Penjelasan Cara Kerja WWW 1. Informasi informasi yang dibuat disimpan dalam sebuah dokumen web pages pada sebuah tempat penyimpanan, yaitu hardisk. 2. Dokumen web yang disimpan dalam sebuah harddisk terletak pada web server apabila komputer yang dimaksud telah dilengkapi dengan web server seperti IIS, PWS atau Apache Server. Dalam hal ini komputer bertugas sebagai server sekaligus menyimpan informasi. 3. Komputer yang bertugas sebagai client membaca informasi yang terdapat pada web pages melalui sebuah jaringan internet dengan mengambil informasi yang tersimpan pada komputer server. 4. Komputer client menampilkan halaman web dengan menggunakan sebuah program khusus, yaitu browser. 2

9 4. Browser Web Browser web adalah program yang digunakan untuk menampilkan informasi dari suatu halaman web yang tersimpan dalam komputer. Dengan menerapkan Grafik User Interface (GUI), maka para pengguna internet dengan mudah mengakses informasi-informasi yang terdapat pada internet. Cara Kerja Browser Web 1. Browser web mengambil sebuah informasi melalui jaringan internet pada sebuah server web dengan perintah request. 2. Server web memberikan umpan balik atau feedback, dengan memberi perintah responen 3. Browser web menampilkan informasi yang telah diterima dari server web. 5. Fungsi Website Sebelum mendesain web, tentukan dan pahami beberapa fungsi situs web agar desain yang dibuat sesuai dengan fungsi, estetika dan mood yang dikehendaki : Fungsi Komunikasi Website yang digunakan untuk komunikasi adalah website-website yang digunakan untuk , form contact, cahtting, forum dan sebagainya. Fungsi Informasi Website ini biasanya berisi teks dan grafik yang dapat didownload dengan cepet dan website untuk fungsi informasi sebaiknya dilakukan pembatasan untuk penggunaan animasi, gambar dan elemen bergerak. Website yang memberikan informasi misalnya News, Profile, Company, Library, Reference dan sebagainya. Fungsi Enetertaiment Website yang difungsikan untuk sarana hiburan dengan banyaknya penggunaan gambar, animasi dan elemen bergerak seperti game online, film online, musik online dan sebagainya. Fungsi Transaksi Website yang difungsikan untuk sarana bisnis, baik barang, ataupun jasa dengan metode transaksi menggunakan kartu kredit atau pun transfer. B. JENIS SITUS WEBSITE Berikut ini jenis situs website yang dikelompokan sesuai dengan tujuannya : 3

10 1. Alat Pemasaran Sebuah situs yang dibuat dengan tujuan untuk mempromosikan dan memasarkan produk ataupun jasa layanan perusahaan dapat juga untuk sebuah company profile. Pemasaran melalui internet lebih cepat sampai dan memiliki jangkauan yang lebih luas lagi. Perencaan dalam merencang situs pemasaran dan promosi : 1. URL atau alamat situs web dapat menjadi aset pemasaran tersendiri dan disesuaikan dengan posisi yang diinginkan. 2. Halaman web harus mengesankan pengunjung. 3. Letak isi menu tidak perlu terlalu banyak cukup simple akan tetapi menampilkan latar belakang perusahaan (citra diri perusahaan). 4. Situs ini hanya memberikan informasi tidak bisa digunakan untuk transaksi online. 5. Informasi produk harus jelas. 6. Ada pencatatan pengunjung (guest book). 2. Nilai Tambah Sebuah situs web sering dibuat hanya sebagai nilai tambah. Mungkin sebenarnya perusahaan tidak terlalu membutuhkan situs web itu, tetapi menggunakannya hanya sekedar untuk mengikuti tren sehingga perusahaan tampak lebih modern. Perencanaan dalam merancang situs: 1. Adanya marketing tool 2. Adanya referensi atau informasi tambahan 3. Penggunaan web dirancang semudah mungkin a. Katalog Sebuah situs yang menampilkan produk-produk yang dijual oleh perusahaan. Dengan adanya situs maka akan mempermudah untuk melakukan update terhadap produk yang akan dijual. Perencanaan dalam merancang situs: 1. Adanya marketing tool 2. Informasi yang ditampilkan harus lengkap dan jelas. 4

11 3. Halaman situs user friendly (mudah untuk dipahami). 4. Transaksi hanya dapat dilakukan secara offline b. E-Commerce Adalah sebuah situs yang digunakan untuk melalukan transaksi pembelian dan pembayaran secara online. Bila sebuah halaman web yang akan disusun adalah halaman web yang berorintasi bisnis, tujuan yang harus dicapai halaman web itu adalah meningkatkan order penjualan dari pelanggan, menciptakan order dari pelanggan baru dan menekan keseluruhan biaya pengeluaran. Beberapa hal yang harus diperhatikan adalah : 1. Membuat nama domain sendiri. 2. Kecepatan akses sangat penting jadi jangan terlalu banyak menggunakan animasi bergerak. 3. Pemilihan server (keamanan, kemudahan akses, stabilitas sistem server) 4. Tampilan situs memiliki kesan profesional 5. balasan 6. Cara pembayaran yang selengkap mungkin 7. Pencarian yang memudahkan pengunjung 8. Proses transaksi cepat dan mudah c. E-Learning Adalah sebuah website yang ditujukan sebagai media pembelajaran. E-learning bisa juga digunakan untuk pembelajaran jarak jauh, untuk pelatihan. Syarat yang harus terpenuhi dalam sebuah e-learning : 1. Sederhana 5

12 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 sistem e-learning, 2. Cepat Bertujuan untuk kecepatan respon terhadap sebuah layanan keluhan dan kebutuhan perbaikan peserta didik sehingga perbaikan pembelajaran dapat dilakukan secepat mungkin oleh pengajar atau pengelolah. 3. Personal Peserta didik dapat berkomunikasi dengan baik layaknya komunikasi tatap muka pengajar dengan peserta didik secara langsung, peserta didik dapat dibantu kemajuannya dan segala persoalan yang dihadapi. a. Komunitas Sebuah situs yang memungkinkan untuk komunikasi secara bersama. Pengunjung dapat berbagi pengalaman dan cerita. Untuk menambah teman dan perkumpulan baru. b. Portal Adalah aplikasi berbasis web yang menyediakan akses suatu titik tunggal dari informasi online terdistribusi. c. Personal Adalah situs yang memiliki tujuan untuk mempromosikan atau menginformasikan tentang seseorang, biasanya berisi biodata, portofolio, prestasi ataupun cerita sehari-hari dari seseorang. C. ISTILAH-ISTILAH DALAM PEMROGRAMAN WEB Beberapa istilah dalam pemrograman web, antara lain : 1. Internet adalah kependekan dari International Networking, yang artinya jaringan komputer berskala internasional/global yang dapat membuat masing-masing komputer saling berkomunikasi. 2. Intranet merupakan jaringan komputer berskala kecil, hanya memiliki beberapa web server yang diperuntukan untuk organisasi atau perudahaan, dan digunakan sebagai sarana komunikasi antara komputer dalam organisasi tersebut. 6

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

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

15 A. MERUMUSKAN TUJUAN MEMBUAT WEBSITE Berdasarkan isi maupun tujuan, suatu website biasanya dapat digolongkan menjadi seperti berikut ini : 1. Website marketing, berfungsi sebagai media presentase dan pemasaran 2. Website custumer service, berfungsi sebagai media untuk malayani konsumen 3. Website e-cammerce, berfungsi sebagai media transaksi on-line 4. Website informasi/berita, berfungsi sebagai media informasi berita a. Menentukan isi website Faktor yang paling penting dalam suatu website adalah isi dari website itu sendiri. Hal tersebut berkaitan dengan manfaat yang akan diperoleh pengunjung dari sebuah website. b. Menentukan target pengunjung Meskipun suatu website mempunyai sifat terbuka dalam arti sebuah website bebas dikunjungi oleh semua orang, namun alangkah baiknya apabila dalam pembuatan website perlu dilakukan gambaran target yang akan dituju oleh sebuah website. Alasan ini lebih didasarkan pada pengguna hardware dan aplilkasi browser yang berbeda dengan setiap pengunjung. c. Menentukasn struktur website Struktur website diperlukan untuk memberikan kemudahan dalam mengelola suatu website. Tentunya struktur tersebut harus disesuaikan dengan isi dari website. Dengan memiliki struktur yang terorganisasi dengan baik, suatu website akan memberikan kemudahan dalam navigasi, editing dan pemeliharaan website tersebut. B. KONSEP DASAR DESAIN Pada intinya konsep mendesain tampilan website sangat berkaitan dengan desain grafis, dan pada dasarnya mengikuti prinsip desain grafis secara umum. Oleh karena itu alangkah baiknya jika dalam memperhatikan prinsip desain.prinsip desain tersebut adalah: 1. Komunikatif Prinsip komunikatif berhubungan dengan corporate identy, isi pesan serta audiens. 2. Estetis Fungsi estetis ini adalah memberikan suatu keindahan, sehingga lebih menarik minat pengunjung untuk lebih menggali informasi yang ditawarkan dari suatu website. 3. Ekonomis 9

16 Desain web harus memperhatikan factor ekonomis dalam arti ukuran file yang digunakan. Hal tersebut berkaitan erat dengan kecepatan akses yang ditawarkan suatu web. C. ELEMEN LAYOUT Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis hendaknya seorang web designer perlu memperhatikan pedoman pedoman yang ada untuk membuat tata letak suatu tampilan, yaitu dalam mengatur elemen elemen layout. Pedoman pedoman yang dimaksud adalah: 1. Keseimbangan Keseimbangan adalah hasil susunan satu atau lebih elemen desain sehingga antara satu dengan lainnya memiliki bobot yang sama. Ada tiga jenis keseimbangan antara lain : a. Keseimbangan Simetris (Formal) Adalah keseimbangan yang memiliki elemen yang bobotnya sama pada dua sis garis vertikal imajiner halaman web. Sehingga bentuknya menjadi terkesan formal, sederhana, mudah pembuatannya tetapi terkesan membosankan dan kurang menarik. Gambar 2. Keseimbangan Simetris 10

17 b. Keseimbangan Asimetris (Informal) Keseimbangan Asimetris mempunyai elemen yang tidak sama bobotnya pada dua sisi dari garis vertikal imajiner halaman web sehingga tata letaknya tampak lebih dimanis karena adanya ruang kosong, berkesan santai dan kasual. Beberapa Faktor yang harus diperhatikan yaitu : Warna sebagai penyeimbang antar objek. Bila objek lebih besar dari yang lain berikan warna muda atau warna yang tidak terlalu kuat dan sebaliknya. Bentuk, dimanaobjek yang memiliki kesan datar namun memiliki detail bentuk yang sederhana akan seimbang dengan objek kecil dengan detail yang lebih teliti. Posisi, menempatkan objek yang dominan pada posisi agak ketengah akan terlihat seimbang dengan area dan objek yang lebih kecil pada lawan arahnya. Gambar 3. Keseimbangan Simetris c. Keseimbangan Asimetris (Informal) Keseimbangan Asimetris mempunyai elemen yang tidak sama bobotnya pada dua sisi dari garis vertikal imajiner halaman web sehingga tata letaknya tampak lebih dimanis karena adanya ruang kosong, berkesan santai dan kasual. Beberapa Faktor yang harus diperhatikan yaitu : 11

18 Warna sebagai penyeimbang antar objek. Bila objek lebih besar dari yang lain berikan warna muda atau warna yang tidak terlalu kuat dan sebaliknya. Bentuk, dimanaobjek yang memiliki kesan datar namun memiliki detail bentuk yang sederhana akan seimbang dengan objek kecil dengan detail yang lebih teliti. Posisi, menempatkan objek yang dominan pada posisi agak ketengah akan terlihat seimbang dengan area dan objek yang lebih kecil pada lawan arahnya. Gambar 4. Keseimbangan Asimetris d. Keseimbangan Radial Semua elemen memancar keluar dengan model melingkar dari titik tengah suatu objek. Keseimbangan radial lebih mudah untuk diimplementasikan karena objek akan seimbang bila objek berada ditengah. Untuk itu dengan menempatkan objek pada posisi tengah maka desain akan nampak seimbang. 2. Kontras Diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya. Kontras dapat dinyatakan dengan membedakan ukuran serta warna dari elemen elemen layout. Pemberian kontras pada suatu objek haruslah kontras positif, karena jika kontras yang diberikan negatis maka objek tersebut akan menjadi samar-samar, bahkan tidak terlihat karena terserap oleh background. 3. Konsistensi 12

19 Informasi lebih dimengerti oleh pengguna bila mempunyai aliran aliran yang baik, sedikit gangguan yang mengambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian kebagian lain. Konttinuitas dapat dibuat dengan membuat halaman halaman mempunyai gaya, bentuk atau warna yang memberikan pengguna merasakan kesinambungan dengan halaman lainnya. Konsistensi membuat pengunjung nyaman karena dapat menjelajah situs dengan mudah. Ketika pengunjung membuka suatu halaman situs yang konsisten, dia akan langsung tahu kemana harus pergi dan dia juga tahu dimana sedang berada. Konsistensi dapat diterapkan pada margin, layout, huruf, warna dan yang paling utama adalah navigasi. Konsistensi sangat efektif untuk membangun brand perusahaan. Brand bukan hanya logo tapi sekumpulan atribut, meliputi logo, slogan, warna dan kualitas emosional. Gambar 5. Konsistensi pada Situs Web 4. Ruang Kosong Ruang kosong dibentuk dengan berbagai cara sehingga dapat menambah kesan elegan dan kesempurnaan pada suatu desain. Ruang kosong sebagai prinsip desain grafis mungkin dapat dilihat serupa dengan ruang yang disia-siakan. Ruang kosong kemudian berarti sebuah kemewahan dan semakin Anda kurang penggunaan sesuatu semakin Anda mendapatkan lebih banyak the less you use the more you must have. Lebih banyak ruang kosong dilihat sebagai sesuatu yang lebih atau sesuatu yang mahal dan dapat memberikan posisi tertentu dalam kaitan brand sebuah perusahaan dengan target penjualan dengan konsumen kelas atas atau posisi desain itu sendiri. Desain dengan ruang kosong yang rapat dan penuh sesak akan terlihat sebagai sebuah cara untuk menghemat biaya. Membuat ruang kosong akan benar-benar menambah nilai untuk brand pada produk tertentu. 13

20 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

21 Menegaskan sebuah elemen Mempermudah pemahaman layout Membuat halaman tampak dinamis Mempermudah membaca text D. PEWARNAAN Warna merupakan sensitivitas yang berhubungan dengan indra. Warna dapat merebut perhatian, menarik, menolak, menggemaskan bahkan warna bisa mempengaruhi emosi. Warna dapat menimbulkan kesan pertama pada pengunjung ketika menjelajah sebuah situs web. Warna modern biasanya terkesan bersih dan bercahaya, seperti biru dan kuning. Warna bersahabat biasanya terkesan ceria dan menyenangkan, seperti orange, kuning, hijau. Warna perusahaan biasanya bersih, seperti biru, putih dan abu abu. Warna anak anak biasanya terkesan ceria dan menonjol, seperti merah, kuning dan biru (warna primer). 1. Aspek Psikologi Warna Warna mempunyai emosi yang melekat, yang bisa ditimbulkan dengan memperlihatkan keserasian warna dengan cara yang benar. Berikut ini yang makna terkandung di dalam warna : Warna Makna Positif Makna Negatif Merah Merah Muda Kekuatan, energi, tenaga, hasrat, cinta. Dengan sedikit memberikan warna merah bisa menimbulkan gairah, membangkitkan semangat, mendorong keinginan. Kewanitaan (feminim), keremajaan (masa muda). Bahaya, perang, kekejaman, kekerasan, api, darah. Terlalu banyak warna merah bisa disangka terlalu agresif. Naif,kelemahan, kekurangan. Orange Kehangatan, bersemangat, ceria, keseimbangan, musim gugur, menimbulkan getaran Meminta dan mencari perhatian Kuning Hijau Sinar matahari, emas, kekayaan, keberuntungan, kehidupan. Alam, lingkungan, hidup, pertumbuhan, stabil, santai Tidak jujur, pengecut, cemburu, iri hati, penghianatan, penipuan, kebohongan, resiko, sakit Kecemburuan, nasib buruk, iri 15

22 Biru Ungu Coklat kesuburan, harapan. Kepercayaan, kesetiaan, ketenangan, kedamaian, ketulusan, kesejukan, air, awan, harmoni, kebersihan, konservatif, percaya diri, penyembuhan. Merupakan warna yang aman dipakai untuk desain. Kebangsawanan, perubahan, spiritual. Tanah, bumi, netral, hangat, keamanan, perlindungan hati, dengki. Kesedihan, kedinginan, depresi, penurunan vitalitas. Kesombongan, keangkuhan, kejam, kasar, duka cita. Tumpul, kotor, membosankan Abu-abu Putih Hitam Modern, cerdas, bersih, kokoh, masa depan, intelektual. Kesucian, kebersihan, kemurnian, kesederhanaan, damai, kebaikan, disiplin, perawan, perkawinan, musim dingin, musim salju. Kekuatan, keanggunan, kemewahan, misteri, kecanggihan, kemakmuran, kepuasan, pengalaman, keras, kokoh, sangat kuat. Umur tua, kesedihan, bosan. Kematian ( budaya timur ), dingin, mandul, steril, klinik, hampa. Kematian ( budaya barat ), takut, setan, kesedihan, duka cita, marah, anonim, penyesalan. 2. Warna dalam Desain Web Warna banyak berperan dalam pembuatan situs, beberapa variasinya antra lain : a. Menegaskan elemen yang dianggap penting. b. Menarik perhatian. c. Membimbing pembaca untuk menentukan daerah mana yang seharusnya lebih dahulu dibaca. d. Menghubungkan antara satu elemen dengan yang lain (penggunaan warna background halaman yang sama dengan background foto) e. Mengatur informasi yang ditampilkan. 16

23 f. Menentukan bagian yang berbeda pada sebuah grafik. g. Mengelompokan atau memisahkan elemen yang satu dengan yang lain. h. Membangkitkan respon yang emosional. 3. Jenis Warna a. Warna Primer Warna primer tidak bisa dibuat dengan mencampurkan warna lain, warna ini berdiri sendiri. Warna primer terdiri atas merah, kuning, dan biru. Gambar 8. Warna Primer b. Warna Sekunder Warna sekunder dibuat dengan mengkombinasikan dua warna primer. Warna sekunder terdiri atas orange, hijau dan ungu. Gambar 9. Warna Sekunder c. Warna Tersier Warna Tersier dibuat dengan mengkombinasikan warna primer dengan perbatasan warna sekunder. Warna tersier terdiri atas kuning-hijau, kuning-orange, merah-orange, merah-ungu, biru-ungu, dan biru-hijau. 17

24 Gambar 10. Warna Tersier 4. Metode Pemilihan Warna Keserasian bisa didefinisikan sebagai bagian dari susunan yang menyenangkan, bisa berwujud musik, puisi atau warna. Metode untuk memilih warna yang serasih, yaitu : a. Metode Warna Beruntun Warna beruntun terdiri atas tiga warna yang letaknya saling bersebelahan dan biasanya ada satu warna yang menonjol (dominan). Metode ini menghasilkan warna lembut yang serasi, misalnya kuning, kuning-orange dan orange atau kuning, kuning-hijau dan hijau. b. Metode Warna Berlawanan Warna berlawanan terdiri dari atas dua warna yang letaknya saling bersebrangan. Metode ini menghasilkan warna yang lebih hidup (kontrasnya tinggi), misalnya biru dan orange, merah dan hijau, atau kuning dan ungu. c. Metode Warna Segitiga Warna segitiga sesuai dengan namanya terdiri atas tiga warna yang letaknya ditentukan dengan bentuk segitiga. Metode ini menghasilkan warna yang serasi, misalnya biru, merah dan kuning. d. Metode Warna Memudar Metode ini menggunakan satu warna yang diturunkan intensitas warnanya menjadi lebih muda, misalnya warna merah akan diturunkan intensitas warnanya sebanyak 50% atau 75%. e. Metode Warna Kombinasi 18

25 Warna kombinasi adalah gabungan dari dua warna atau lebih yang menghasilkan warna yang harmonis. Beberapa warna kombinasi yang baik, yaitu : Hitam, putih, abu abu, merah Merah, orange Orange, Ungu Ungu, Kuning Hijau, Ungu Biru, Kuning Biru, Ungu, Putih Hijau, Coklat Teal, Ungu/Lilac f. Metode Warna Hangat Warna hangat cocok digunakan untuk situs yang penuh semangat dengan tema yang berani dan tegas. Warna hangat terletak pada bagian kanan roda warna. Warna hangat terdiri dari kombinasi : Kuning Kuning-Orange Orange Merah-Orange Merah Merah-Ungu g. Metode Warna Dingin Warna dingin cocok untuk menyampaikan pesan yang sederhana yang memberi kesan tentram. Warna dingin terletak pada bagian kiri roda warna. Warna dingin terdiri dari kombinasi : Kuning-hijau Hijau 19

26 Biru-hijau Biru Biru-ungu Ungu E. TIPOGRAFI Tipografi adalah seni dalam huruf yang meliputi pemilihan huruf, penentuan ukuran yang tepat, dimana teks dapat diputus, spasi jarak, dan bagaimana teks dapat dengan mudah dibaca. 1. Jenis Huruf Jenis huruf sangat banyak, tapi secara garis besar dapat dikategorikan menjadi lima, yaitu: a. Serif Jenis huruf ini merupakan jenis huruf yang tradisional, cirinya mempunyai kaki atau ekor, misalnya Times New Roman, Garamond, Palatino. Karena bentuk hurufnya yang berkaki membuat garis tidak kelihatan, ini memudahkan mata pembaca untuk menelusuri dan membaca teks. Jadi huruf ini cocok dipakai untuk teks yang panjang dengan jarak spasi yang sedikit. Bentuk huruf ini memberikan kesan formal, intelektual, anggun dan konservatif. Cocok dipakai untuk organisasi, pemerintahan, pendidikan dan perusahaan. b. Sans-Serif Gambar 11. Font Serif Sans-serif yang berarti tidak berkaki (bahasa perancis), misal jenis huruf ini adalah Helvetica, Arial, Verdana dan Avant Garde. Jenis ini terlihat sederhana dan tidak formal, sehingga cocok untuk judul dan subjudul. Jika ingin menggunakan jenis ini untuk teks utama, imbangi dengan memberikan jarak spasi yang agak lebar pada teks. 20

27 Gambar 12. Font Sans-Serif c. Dekoratif Jenis huruf yang mempunyai desain yang rumit, sesuatu yang baru dan menciptakan suasana hati yang membangkitkan emosi. Jadi jangan sampai digunakan untuk teks yang panjang atau isi dari halaman. Gunakanlah untuk judul dan grafik, tapi jangan terlalu banyak. Gambar 13. Font Dekoratif d. Skrip Jenis ini menyerupai tulisan tangan. Jenis ini juga sering disebut kursif. Dan jangan terlalu banyak digunakan. Bentuk huruf ini memberikan kesan keanggunan, sentuhan pribadi dan kepuasan. Brush Script Kuenstler Script Gambar 14. Font Skrip 21

28 e. Monospace Jenis huruf yang mempunyai jarak dan lebar yang sama pada setiap huruf, misalnya courier, monospace. Gambar 15. Font Monospace 2. Penggunaan Huruf Ada beberapa tip agar huruf dapat dibaca dengan mudah dan enak dilihat, yaitu: 1) Buatlah kontras yang tinggi antara teks dengan latar belakang atau antara teks dengan gambar. 2) Pilihlah jenis huruf yang mudah dibaca, biasanya jenis serif dan sans-serif. Jenis huruf dekoratif atau kursif lebih sulit untuk dibaca, biasanya dipakai untuk judul, itupun harus berukuran besar. 3) Kadang kadang jenis huruf sans-serif mudah dibaca daripada serif ketika karakter yang digunakan berukuran kecil. 4) Aturlah leading dan kerning. Leading adalah spasi antara dua baris teks, sedangkan kerning adalah jarak spasi antar huruf. 5) Gunakan huruf standar yang terdapat pada semua komputer atau browser, seperti Times New Roman, Helvetica, Arial dan Verdana. Jika menginginkan jenis huruf lain yang unik untuk keindahan, jadikan huruf tersebut sebagai grafik. 3. Petunjuk Pemilihan Huruf Beberapa petunjuk atau aturan baku yang digunakan dalam penggunaan huruf, baik dalam pemilihan ukuran, jenis dan lain lain: 1) Secara formal, pasangkan jenis huruf serif untuk isi halaman dan sans-serif untuk judul. 2) Jika menggunakan beberapa macam jenis huruf dalam sebuah halaman, biasanya jenis huruf dekoratif atau skrip digunakan untuk judul dan serif atau sans-serif untuk isi halaman, agar berfariasi. 22

29 3) Usahakan jangan lebih dari dua belas kalimat dalam satu baris teks, kanera akan mempersulit pembacaan. 4) Hindari pemakaian kombinasi dua huruf yang sangat mirip, karena menghasilkan kontras yang rendah, ini menyebabkan ketidakserasian dan ketidakcocokan dalam pandangan 5) Membatasi pemakaian jenis huruf dalam satu halaman. Jangan sampai melebihi tiga atau empat jenis huruf. 6) Hindari penggunaan slider (penggulungan halaman) lebih dari sekali. Apabila banyak artikel yang ingin ditampilkan, buatlah link ke halaman lain. 7) Ukuran huruf untuk isi halaman adalah point dan judul adalah point. 8) Memberikan ketebalan dan huruf besar (kapital) pada teks untuk judul, agar dapat membedakan dengan isi halaman 9) Hindari telalu banyak huruf besar karena akan memperlambat kecepatan membaca dan memboroskan ruang 10) Hindari pemakaian jenis huruf monospace untuk isi halaman, karena memerlukan banyak perhatian untuk membacanya. Hal ini dapat mengalihkan pesan yang ingin disampaikan. F. LAYOUT Layout adalah proses penataan dan pengaturan teks atau grafik pada halaman. Layout meliputi penyusunan, pembagian tempat dalam suatu halaman pengaturan jarak spasi, pengelompokan teks dan grafik, dan penekanan pada suatu bagian tertentu. Secara umum, halaman web memaki lima jenis layout dan pemilihan layout yang disesuaikan jenis informasi yang ditampilkan. 1. Model Layout Top Index Biasanya digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine. Gambar 16. Model Layout Top Index 23

30 2. Model Layout Bottom Index Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal. Gambar 17. Model Layout Bottom Index 3. Model Layout Left Index Biasanya digunakan untuk layar dengan resolusi yang lebar, sehingga mudah dalam penyediaan navigasi dibagian kiri seperti tampilan sistem opersi, tanpa menimbulkan kekacauan penyajian informasi pada halaman utama. Gambar 18. Model Layout Left Index 4. Model Layout Right Index Kebalikan dari Left Index tetapi menu utama jarang terletak pada bagian sebelah kanan melainkan sering digunakan untuk meletakan fitur atau kontent dari menu utama. 24

31 5. Model Layout Split Index Halaman akan terjaga keseimbangannya. Gambar 19. Model Layout Right Index Gambar 20. Model Layout Top Index 6. Model Layout Alternating Index Biasanya digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah dan lain lain. 25

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

33 H. KRITERIA SITUS WEB YANG BAIK 1. Usability Usability adalah sebagai suatu pengalaman pengguna dalam berinteraksi dengan aplikasi atau situs web sampai pengguna dapat mengoperasikannya dengan mudah dan cepat. Web site harus memenuhi lima syarat untuk mencapai tingkat usability yang ideal, antara lain : a. Mudah untuk dipelajari Letakkan isi yang paling penting pada bagian atas halaman, agar pengunjung dapat mendapatknya dengan cepat. b. Efisien dalam penggunaan Jangan menggunakn link yang terlalu banyak, sediakan seperlunya dan hantarkan pengunjung untuk menncapai informasi yang diperlukan dengan cepat dan mudah. c. Mudah untuk diingat Situs jangan terlalu banyak melakukan peruban yang terlalu mencolok khususnya pada navigasi. d. Tingkat kesalahan rendah Hindari link yang tidak berfungsi (broken link) atau halaman masih dalam proses pembuatan (under construction). e. Kepuasan pengguna Kepuasan adalah hal yang penting untuk diperhatikan untuk keberlngsungan web site. 2. Navigasi Beberapa tip untuk membuat navigasi yang baik, yaitu : 1) Buatlah navigasi yang jelas dan ringkas. 2) Umumnya, navigasi diletakan di sebelah kiri atau di atas sebuah halaman web. 3) Navigasi bisa berbentuk teks atau grafik. Apabila navigasi berbentuk grafik sertakan pula teks pada grafik tersebut. 4) Berikan ruang antara navigasi. 5) Hindari pemakaian frame untuk navigasi, karena membuat desain terlihat statis. 27

34 6) Jaga konsistensi. Letakan pada tempat yang sama di tiap halaman, gunakan warna yang sama, dan tempatkan pada tempat yang mudah untuk dilihat. Beberapa tip untuk membuat link yang standar, yaitu : 1) Gunakan garis bawah untuk menandai sebuah link. Dan hindari garis bawah teks yang bukan link. 2) Bedakan warna sebuah link yang belum pernah dikunjungi dengan yang sudah. 3) Jangan sampai link yang tidak berfungsi (broken link). Dan link yang belum ada isinya, jangan dicantumkan. 4) Gunakan breadcrumb untuk mempermudah pengunjung untuk menjelajahi situs dengan cepat. Beberapa tip untuk menghindari warna buta (warna yang jelek), yaitu : 1) Hindari menggunakan hanya warna hijau dan warna merah saja dalam desain. Karena kebanyakan orang tidak bisa membedakan antara bayangan warna merah dan warna hijau. 2) Jangan menggunakan warna sebagai petunjuk. Lebih baik gunakan petunjuk lain yang lebih dimengerti. 3) Buatlah kontras yang tinggi antar teks dengan background. 3. Grafik Desain Beberapa tips untuk membuat desain visual yang baik : 1) Gunakan desain visual untuk menciptakan kejelasan kegunaan, sesuai dengan tujuan situs web tersebut, dan desainnya harus mempu mengkomunikaskan, mendukung dan menyempurnakan tujuan situs web secara visual. 2) Buat situs web yang berkesan profesional dan orisinil. 3) Keep it clean and simple. Jaga situs web agar tetap bersih dan sederhana. Jangan sampai user teralihkan perhatiannya dari tujuan awal dibuatnya situs web. 4) Jaga grafik agar berukuran kecil dan gunakan fasilitas optimize pada program penggunaan grafik. 5) Gunakan format yang tepat. Format JPEG dan PNG 24 bit digunakan untuk foto. Format GIF dan PNG 8 bit digunakan untuk image berwarna sederhana. 28

35 4. Content Beberapa tips untuk membuat konten yang baik : 1) Kenali audien. Tulislah dengan gaya mereka dan sesuaikan dengan isinya. 2) Jaga konten agar tetap up to date untuk meningkatkan gaya lengkat untuk datang kembali berkunjung. 3) Nyatakan kebijakan dengan jelas. 4) Dahulukan kualitas diatas kuantitas. 5) Buat tulisan pada halaman web agar dapat dengan mudah dan cepat di scan. 5. Compatibilty Beberapa tips untuk meningkatkan kompatibilitas : 1) Test diberbagai jenis browser. 2) Pastikan situs web bekerja paling tidak di platform PC. 3) Jika memungkinkan tawarkan pilihan tampilan situs. 4) Kalo memakai plug-in pastikan pengunjung dapat dengan mudah mendowloadnya. 6. Loading Time Beberapa tips untuk meningkatkan loading time : 1) Uji coba untuk berbagai kecepatan koneksi. 2) Jika menggunakan grafik, jaga grafik agar berukuran kecil dan gunakan fasilitas optomize pada program pengolahan grafik. 3) Lakukan slicing pada image secara efektif. 4) Gunakan atribute pada image. 5) Lakukan manajemen table yang baik. 6) Gunakan animasi dan suara sekecil mungkin. 29

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

37 BAB 3 PENGENALAN BAHASA HTML A. DEFINISI HTML HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata cara penulisan yang digunakann dalam dokumen web. Dokumen HTML adalah sebuah dokumen text murni yang dapat dibuat dengan editor web sembarangan seperti notepad. Dokumen ini akan dijalankan oleh sebuah web browser misalnya internet explorer, mozilla ataupun opera. Sehingga mampu menampilkan tampilan sesuai keinginan designer atau programer web. Tag HTML tidak case sensitive. Jadi bisa menggunakan <HTML> atau <html>. keduanya menghasilkan output yang sama. HTML berawal dari bahasa SGML (Standard Generalized Markup Language) yang penulisannya disederhanakan. HTML dapat dibaca oleh berbagai platform. HTML juga merupakan bahasa pemrograman fleksibel, dapat disisipi /digabungkan dengan bahasa pemrograman lainnya. B. STRUKTUR DASAR HTML Gambar 22. Struktur Dasar HTML Keterangan: HTML, setiap dokumen HTML dimulai <HTML> dan diakhiri dengan tag </HTML> yang menyatakan bahwa suatu dokumen adalah dokumen HTML. 31

38 Head. Bagian header dokumen HTML, secara umum berisi informasi mengenai dokumen. Body. Merupakan isi dokumen sebenarnya C. FORMAT TAMPILAN SDERHANA 1. Tag untuk Headline Tag Headline/heading adalah tag yang digunakan untuk membuat judul dari isi dokumen HTML. tag heading memiliki 6buah bilangan terdiri atas 1, 2, 3, 4, 5 dan 6. Masing-masing bilangan yang terdapat pada heading berfungsi untuk mewakili ukuran ukuran dari besarnya tag heading. Bilangan pertama merupakan ukuran terbesar sedangkan yang terkecil adalah bilangan terakhir. Sintag Heading/headline adalah sebagai berikut : <hn [properti]>...</hn> Keterangan : n adalah bilangan yang terdiri dari 1 sampai 6 Properti kemampuan tambahan yang dimiliki tag heading Properti Keterangan Align Pengaturan letak headline/heading. Left, Right, Center, Justify <h1 align= left > isi text </h1> Contoh Penulisan Tag Headline/Heading 32

39 Gambar 23. Struktur Headline Gambar 24. Contoh Heading 2. Paragraf Digunakan untuk memberi pengaturan paragraf pada text yang akan ditampilkan. <p [properti]>... </p> 33

40 Properti Keterangan Align Pengaturan letak patagraf. Left, Right, Center, Justify <p align= left > isi text </p> Contoh penggunaan paragraf Gambar 25. Contoh Paragraph Gambar 26. Contoh Heading 34

41 3. Tag Style Sederhana Tag style digunakan untuk mengatur format text, dapat berupa text tebal, miring atau tulisan seperti bentuk kode program. Perhatikan Tabel Berikut: Fungsi Tag Logikal Tag Fisikal Untuk membuat text tebal <strong> <B> Untuk membuat text miring <EM> <I> Untuk huruf fixed <code> <TT> Keterangan : Tag Logikal : tampilan akan dibuat sebaik mungkin tanpa kemampuan resolusi cetak dari printer pada komputer yang sedang melakukan browsing dokumen kita. Tag Fisikal : tampilan akan disesuaikan dengan kemampuan resolusi cetak dari printer pada komputer yang sedang melakukan browsing dokumen kita. Contoh Penggunaan : Gambar 27. Contoh Tag Style Sederhana Gambar 28. Tag Style Sederhana 35

42 D. FORMAT ELEMEN TEXT 1. Format Text a. Cetak Tebal / Bold Cetak tebal digunakan untuk menebalkan teks agar berbeda dengan teks lainnya dalam sebuah dokumen HTML. <b>text </b> b. Cetak Miring / Italic Cetak miring digunakan untuk menampilkan agar text yang akan ditampilkan agak sedikit lebih miring dari text yang lainnya dalam sebuah dokumen HTML. <i>text </i> c. Cetak Garis Bawah / Underline Garis bawah digunakan untuk menampilkan agar text yang akan ditampilkan memiliki garis dibawak kalimat dalam dokumen HTML. <u>text </u> d. Mengecilkan Huruf / Small Untuk mengecilkan huruf didalam dokumen HTML. digunakan tag small untuk membuat text agar tampak berbeda dari teks yang lainnya. <small>text </small> Contoh : <p>nama saya dini, <small>19 Juli 1987 </small> saya dilahirkan </p> 36

43 Hasil Gambar 29. Tag Style Small e. Membesarkan Huruf / Big Untuk membesarkan huruf di dalam dokumen HTML digunakan tag big untuk membuat sebuah text agar tampak berbeda dari text yang lainnya. <big>text </big> Contoh : <p>nama saya dini, <big>19 Juli 1987 </big> saya dilahirkan </p> Gambar 30. Tag Style Big f. Mencoret Text / Strike Untuk mencoret sebuah kata pada sebuah dokumen HTML sebagai perbedaan dengan penggunaan kata yang lainnya. <strike>text </strike> 37

44 Contoh : <p>nama saya dini, <strike>19 Juli 1987 </strike> saya dilahirkan </p> g. Subscript dan Superscript Untuk membuat rumus aritmatika berupa pemangkatan dan rumus kimia didalam dokumen HTML. ^{text superscript} _{text subscript} Contoh : 2⁵ + 5<sup>2</sub> H₂SO₄ Gambar 31. Tag Style Sup & Sub 38

45 h. Tag Pre-Formatted Text Merupakan tag yang digunakan untuk membuat satu blog tulisan yang tata letaknya dapat kita atur sesuai dengan keinginan kita dan sesuai dengan tampilan pada saat pembuatan. <pre>tulisan</pre> Contoh : Gambar 32. Contoh Tag Style PRE Gambar 33. Tag Style PRE 39

46 i. Tag Garis Pemisah Horizontal Digunakan untuk membuat garis pemisah antar baris atau untuk membuat garis horizontal sepanjang lebar halaman homepage. <HR [properti]> <HR> tidak memiliki tag penutup Berikut adalah property yang bisa disisipkan pada tag <HR> Properti Fungsi Align Posisi garis ( center, left, right) Size Ukuran tebal garis Width Ukuran lebar/panjang garis Color Warna garis Contoh : Gambar 34. Contoh Tag Style HR 40

47 Gambar 35. Tag Style HR E. ANCHOR DAN LINK Dokumen HTML dilengakapi dengan kemampuan yang berpindah-pindah dari halaman satu ke halaman lainnya (link). Link dalam halaman HTML ditandai dengan menggaris bawahi teks yang akan di link, atau pointer mouse akan berubah menjadi bentuk jari apabila berada pada objek link atau (gambar/text). <a href= nama dokumen yang dilink [atribut] >..text/gambar...</a> Hyperlink dibedakan menjadi : 1. Link Absolut Adalah sebuah link yang digunkan untuk mengaitkan halaman webyang satu dengan halaman web yang lainnya didalam situs internet. <a href= alamat internet [atribut] >..text/gambar...</a> Contoh : <a href= >PalComTech</a> 2. Link Relatif Adalah link yang digunakan untuk mengaitkan halaman web yang satu dengan halaman web lainnya di dalam satu komputer tanpa harus menuliskan secara lengkap alamat situs internet seperti pada alamat link absolut. 41

48 Contoh : <a href= home.html >Home</a> F. IMAGE Image atau gambar didalam dokumen HTML berfungsi untuk menambah daya tarik dari sebuah website. Namun penggunaannya akan mengakibatkan semakin besarnya penggunaan byte dari dokumen HTML yang secara otomatis akan berakibat pula pada kinerja atau memperlambat waktu tampil dari halaman web tersebut. Pada umumnya, gambar yang ditampilkan pada halaman web akan disajikan bersama teks dari halaman web tersebut. Format gambar yang banyak digunakan dalam halaman web, antara lain GIF (Graphics Interchange Format), JPEG ( Joint Photographics Experts Group). <img src= lokasi gambar [properti]> Berikut adalah properti yang bisa disisipkan pada gambar Properti Fungsi SRC Menentukan alamat dan nama file image LOWSRC Menentukan alamat dan nama file image resolusi rendah, yang akan ditampilkan saat menunggu loading image. ALT Text alternative yang akan ditampilkan jika browser dalam text mode. ALIGN Menentukan posisi gambar (Left, right, top, bottom) BORDER Menentukan tebal border/bingkai disekitar image (diisi dengan nilai integer) HEIGHT Menentukan tinggi dari gambar, diisi dalam pixel atau persen(%) WIDTH Menentukan lebar gambar, diisi dalam pixel atau persen(%) 42

49 Contoh : Gambar 36. Contoh Tag Image Gambar 37. Contoh Image G. LIST ITEM List adalah sebuah uraian yang terdiri atas item-item dari suatu daftar yang dilengkapi dengan nomor baik nomor alfabetik ataupun numerik. Dalam HTML terdapat 2 bentuk daftar atau List, yaitu : 1. Ordered List / List Bernomor Ordered List adalah model dari suatu daftar yang setiap itemnya diberikan nomor. <ol> <li>...isi list...</li> 43

50 <li>...isi list...</li> </ol> Contoh Penggunaan Ordered List : Gambar 38. Contoh Tag Ordered List Gambar 39. Penggunaan Ordered List 2. Unordered List / List Tanpa Nomor Unordered list adalah model dari suatu daftar yang setiap itemnya tidak diberikan nomor, akan tetapi digantikan dengan bulled list. <ul> <li>...isi list...</li> <li>...isi list...</li> </ul> 44

51 Contoh Penggunaan Unordered List Gambar 40. Contoh Tag UnOrdered List Gambar 41. Penggunaan UnOrdered List H. TABLES Tabel adalah sebuah sarana untuk menginformasikan data-data berupa baris dan kolom. Pada umumnya setiap kolom menunjukan data-data yang sama dalam suatu kelompok data. Sedangkan baris menunjukan data-data dari kolom-kolom yang menunjukan sekelompok data dalam suatu kumpulan. 45

52 <table[properti]> <tr> </tr> <tr> </tr> <th>...</th> <th>...</th> <td>...</td> <td>...</td> </table> Keterangan : <table> adalah tag yang berfungsi untuk mendefinisikan sebuah table <tr> adalah tag yang berfungsi untuk membuat baris <th> adalah tag yang berfungsi untuk membuat tag heading/judul <td> adalah tag yang berfungsi untuk membuat sel/kolom. 46

53 Property Table Properti Fungsi Align Untuk menentukan posisi tabel pada dokumen ((Left, right,center) Bgcolor Untuk memberikan warna pada table. TH, TR ataupun TD Border Untuk menentukan ketebalan garis pada table Cellpadding Untuk menentukan lebar spasi antar border dan isi sel Cellspacing Untuk menentukan lebar spasi antar sel HEIGHT Menentukan tinggi tabel WIDTH Menentukan lebar table Valign Untuk menentukan posisi vertikal peletakan baris dalam table (TR) Colspan Untuk menentukan jumlah kolom yang digabungkan Rowspan Untuk menentukan jumlah baris yang digabungkan. Contoh Penggunaan Table Gambar 42. Contoh Penggunaan Tag Table 47

54 Gambar 43. Hasil Penggunaan Tag Table I. FORM Form dalam HTML adalah input atau masukan dari pengguna yang kemudian diproses untuk mendapatkan hasil yang diinginkan pengguna, seperti proses penyimpanan, proses edit, proses hapus dan browse. <form name= nama form Methode= Post Get Action= URL >... </form> Keterangan : Nama form adalah nama form yang sedang digunakan Methode adalah metode yang digunakan dalam penyimpanan data di server. Action adalah alamat yang digunakan untuk proses input form didalam server. Form memiliki kontrol form yang digunakan untuk klasifikasi input atau masukan dari pengguna. Kontrol form terdiri dari : 1. Kontrol Text Digunakan untuk memberi input atau masukan berupa kotak isian. <input type= text [properti]> 48

55 Properti kontrol text : Properti Fungsi Name Nama dari kontrol text Size Ukuran kontrol text Value Text yang tertulis pada kontrol text Maxlength Panjang maksimal karakter yang diizinkan Gambar 44. Gambar input Text 2. Kontrol Password Adalah sebuah kontrol HTML yang penggunaannya mirip dengan kontrol text, hanya bedanya pada saat ditampilkan text yang diisikan akan diubah menjadi tanda asteris(*). <input type= password [properti]> Property Kontrol Password : Properti Fungsi Name Nama dari kontrol password Size Ukuran kontrol password Value Text yang tertulis pada kontrol password Maxlength Panjang maksimal karakter yang diizinkan 49

56 Gambar 45. Gambar input Password 3. Kontrol Radio Button Digunakan untuk menampilkan salah satu pilihan dari suatu kumpulan/grup pilihan. <input type= radio [properti]> Property Radio Button Properti Fungsi Name Nama dari kontrol radio Value Nilai dari kontrol radio yang nilainya tidak dapat ditampilkan, tetapi dapat diolah melalui masukan dari pengguna. Checked Kontrol radio yang menjadi pilihan Default Kontrol radio yang terpilih secara default Gambar 46. Gambar input Radio 4. Kontrol Checkbox Kontrol checkbox digunakan untuk memilih beberapa pilihan dari pilihan yang tersedia. Dan memungkinkan pengguna memilih lebih dari satu. 50

57 <input type= checkbox [properti]> Property Radio Checkbox Properti Fungsi Name Nama dari kontrol checkbox Value Nilai dari kontrol checkbox yang nilainya tidak dapat ditampilkan, tetapi dapat diolah melalui masukan dari pengguna. Checked Kontrol checkbox yang menjadi pilihan Default Kontrol checkbox yang terpilih secara default Gambar 47. Gambar input Checkbox 5. Kontrol select Kontrol select digunakan untuk membuat sebuah daftar pilihan. <select [properti]> <option>item 1</option> <option>item 2</option> </select> 51

58 Properti Select : Properti Fungsi Name Nama dari kontrol select Value Nilai kontrol select yang hanya dapat ditampilkan pada pemrograman berbasis server side, seperti ASP. Select Item yang dipilih Size Banyaknya item yang ditampilkan pada layar monitor Multiple Tampilan dari drop-down box seperti tombol. Gambar 48. Gambar input select menu 6. Kontrol Text Area Kontrol text area merupakan kontrol text yang dapat menuliskan text lebih banyak karena memiliki ruang/kapasitas lebih besar dibandingkan dengan kontrol text. <textarea [properti]>...isi text... </textarea> 52

59 Properti kontrol text area : Properti Fungsi Name Nama dari kontrol tetx area Value Nilai kontrol textarea Cols Jumlah kolom Rows Jumlah baris Maxlength Panjang maximal karakter yang diizinkan Gambar 49. Gambar input textarea 7. Kontrol Button Kontrol button digunakan untuk mengontrol suatu aksi atau menjalankan sebuah prosedur / event. Ada tiga tipe yang termasuk dalam kontrol button, yaitu Button, Submit, Reset. Buytton digunakan untuk mengontrol atau menjalankan suatu prosedur atau event dari VBScript, Submit digunakan untuk mengirim data-data ke server (lebih bnayak berhubungan dengan pemrograman yang berbasis Server Side seperti ASP), sedangkan Reset digunakan untuk menghapus data-data yang ada pada suatu form. Sintaksnya dari masing-masing tipe di atas adalah sebagai berikut: <input type= button [properti]> <input type= submit [properti]> <input type= reset [properti]> 53

60 Properti dari kontrol Button adalah sebagai berikut: Properti Keterangan Name Nama dari kontrol Button Value Nilai dari kontrol Button Dir Pengaturan arah text dari Kontrol Button, seperti rtl (Right To Left) / Kanan ke Kiri dan kebalikannya yaitu ltr (Left to Right) Gambar 50. Gambar input Button 54

61 BAB 4 PENGENALAN CSS CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan. CSS (Cascading Style Sheet) secara sederhana adalah sebuah metode yang digunakan untuk mempersingkat penulisan tag HTML, seperti font, color, text, dan tabel menjadi lebih ringkas sehingga tidak terjadi pengulangan penulisan. CSS adala bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS, memungkinkan kita untuk menampilkan halaman yang sama dengan format berbeda. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun A. KEGUNAAN CSS Beberapa kegunaan atau manfaat menggunakan CSS antara lain : 1. Mempersingkat penulisan tag HTML: kita tidak perlu mendefinisikan setiap tag dengan properti dan nilai yang sama. 2. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan penulisan. 3. Mudah dan cepat dalam memaintenance : dikarenakan file CSS yang dibuat secara terpisah, maka anda tidak perlu merombak semua elemen atau properti dalam HTML, cukup mengedit file CSS-nya saja. 4. CSS bisa melakukan apa yang tidak bisa dilakukan oleh HTML, misalnya kita bisa memberi warna pada input box atau scrollbar, yang tentunya tidak bisa dilakukan oleh bahasa HTML. B. KEUNTUNGAN CSS Sebelum kehadiran CSS, seorang webmaster harus bekerja ekstra keras menuliskan tag-tag HTML baik untuk mendesain layout ataupun untuk memberi gaya tampilan (style) pada bagianbagian tertentu dari situ web yang akan dibuatnya. Pekerjaan ini tentu semakin berat apabila situs web tersebut terdiri dari puluhan atau bahkan ratusan halaman dengan tampilan yang 55

62 berbeda-beda, karena setiap tampilan membutuhkan penulisan tag-tag yang secara mandiri unik. Untuk bagian-bagian dengan tampilan yang sama pun seorang webmaster harus direpotkan dengan penulisan tag-tag HTML secara berulang-ulang. Hadirnya CSS, pekerjaan seorang webmaster menjadi jauh lebih ringan. CSS mampu menghindarkan pengulangan dalam penulisan tag HTML, sehingga ukuran file pun akan jauh lebih kecil. Dengan ukuran file yang kecil, proses loading situs web juga akan jauh lebih cepat. Meskipun sebuah file CSS bisa diintegrasikan langsung dengan file HTML, namun umumnya file CSS dibuat secara terpisah, sehingga memungkinkan kita mendekorasi tampilan bagian-bagian tertentu dari halaman web secara serempak.inilah manfaat paling penting dari CSS! Mempelajari CSS bisa jadi bukan pekerjaan mudah. Keuntungan lain yang akan didapat dengan menggunakan CSS adalah : 1. Update tampilan jadi lebih mudah Mengupdate tampilan situs web yang terdiri dari beberapa halaman saja tentu jauh lebih mudah daripada untuk situs dengan ratusan atau ribuan halaman. Dengan CSS, kita akan dapat mengupdate tampilan halaman-halaman web dalam jumlah banyak dengan mudah, karena semua tag untuk style ini berada pada satu file CSS saja. 2. Beban bandwidth lebih kecil Dengan CSS, ukuran file web akan menjadi langsing karena tag-tag style dipisahkan secara mandiri. Hal ini secara signifikan akan berdampak pada proses loading yang lebih cepat. Selain itu, CSS hanya akan di-load satu kali oleh browser dan akan terus diterapkan pada halamanhalaman lain. Hal ini berbeda dengan situs yang menggunakan table karena harus di-load berulang-ulang. 3. Modifikasi web template lebih mudah Cara paling cepat membangun situs web ialah dengan menggunakan template. Namun terkadang template tersebut tidak sesuai dengan keinginan dan keperluan kita. Dengan CSS, kita akan lebih mudah melakukan vermak pada template tersebut, misalnya mengganti warna latar atau mengubah jenis huruf. 4. Search Engine Friendly Sebuah situs web yang dilayout dengan CSS akan lebih search engine friendly daripada situssitus web yang menggunakan table sebagai pondasi layoutnya. 56

63 5. Lebih mudah digunakan pada mobile phone Sekarang, orang melakukan browsing tidak hanya melalui browser di PC, tetapi juga melalui mobile phone atau PDA. Situs web yang menggunakan CSS akan jauh lebih mudah digunakan oleh mereka yang browsing melalui gadget-gadget tersebut. C. KEKURANGAN CSS Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser. D. CARA PENULISAN CSS Dengan atribut CSS, user atau pengguna memiliki kemampuan untuk : 1. Mengatur posisi secara absolute 2. Mengubah warna 3. Mengubah besar font 4. Mengubah margin 5. Dan seluruh selektor pada kode HTML Ada 3 metode penulisan CSS atribute, antara lain : 1. Inline Style Sheet CSS metode ini mendefinisikan langsung pada HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=.. dalam tag HTML tersebut. Style hanya berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lainnya. Contoh Penulisan: 57

64 Gambar 51. Gambar Inline Style Sheet 2. Embedded Style Sheet CSS didefinisikan terlebih dahulu dalam tag <style> </style> diatas <body>. Pada definisi ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan. Contoh Penulisan Embedded Style Sheet 58

65 Gambar 51. Gambar Embedded Style Sheet 3. Linked Style Sheet Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style>..</style> dibuat pada file terpisah dari file HTML yang membutuhkan CSS. Kemudian file lain tersebut disimpan dalam format.css Pada file HTML yang akan menggunakan file CSS, harus dibuat tag <link> yang dituliskan diantara tag <head> </head> Contoh Penulisan Linked Style Sheet Simpan dengan nama style.css * { margin:0 auto; padding:0; } body { background:#3793a6; font-family:verdana, Arial, Helvetica, sans-serif; font-size:12px; } #pembungkus_web { width:850px; } 59

66 #menu { background:#ffffff; width:850px; height:40px; } #menu ul li { list-style:none; float:left; padding: px; height:40px; } E. SYNTAX CSS Di dalam penulisan CSS ada dua bagian utama yaitu selektor dan satu atau lebih deklarasi. Selektor biasanya adalah elemen HTML yang akan di format tampilannya. Setiap deklarasi terdiri dari bagian properti dan nilai dari properti tersebut. Properti adalah atribut yang akan kita rubah. Setiap properti mempunyai nilai. Contoh: properti properti Gambar 52. Deklarasi CSS Setiap deklarasi selalu diakhir dengan semicolon, dan kumpulan deklarasi selalui diapit oleh tanda kurung kurawal. F. ID DAN CLASS Selain selektor-selektor umum yang sering dipakai (tag-tag html) kita dapat menggunakan ID dan Class untuk membuat selektor sendiri. 1. Selektor ID Selektor ID digunakan untuk memilih satu buah elemen yang unik. 60

67 Selektor ID menggunakan atribut id pada elemen html, dan di target dengan menggunakan tanda #. Contoh: p#tebal { font-weight: bold; } Kode diatas akan membuat teks pada paragraf dengan ID tebal menjadi tebal. 2. Selektor Class Selektor Class digunakan untuk memilih sekelompok elemen. Berbeda dengan ID yang hanya dapat digunakan untuk satu elemen, class digunakan untuk beberapa elemen yang akan mempunyai style sama. Selektor Class ditarget dengan tanda.. Contoh: p.tengah { text-align: center; } Kode diatas akan membuat teks pada paragraf dengan class tengah menjadi rata tengah. G. PROPERTI CSS 1. Background Properti background digunakan untuk mengatur efek-efek yang berkenaan dengan background suatu elemen. Properti-properti background yang biasa digunakan adalah: Background-color Digunakan untuk memberikan warna latar. Contoh: p { background-color: red; } Kode diatas akan memberikan warna merah sebagai latar pada setiap paragraf. Background-image Digunakan untuk memberikan latar gambar pada elemen. Contoh: h1#logo { background-image: url(images/background.jpg); } Background-repeat Digunakan untuk mengulang latar gambar baik secara horizontal, vertikal, atau tidak berulang sama sekali. 61

68 Contoh: H1#logo { background-image: url(images/gradient.jpg); background-repeat: repeat-x; } 2. Font Properti font digunakan untuk mengatur efek-efek yang berkenaan dengan huruf. Propertiproperti font diantaranya adalah: Font-style Font-weight Font-size Font-family Contoh: body { font-family: Arial, Helvetica, Sans-Serif; font-weight: bold; font-size: 12px; } Keterangan: Kode diatas akan memberikan efek penggunaan Huruf Arial, jika tidak ada jenis huruf tersebut maka akan dilanjutkan dengan huruf-huruf setelah tanda koma. Kemudian teks akan menjadi tebal dan ukurannya sebesar 12px. 3. Text a. Text Color Digunakan untuk mengatur warna text. Warna text bisa didefinisikan dengan nilai hex (seperti #000000), nilai rgb (seperti rgb(255,255,0)), atau nama (seperti red ). Contoh: p { color: #FC0; } b. Text Alignment Properti text-align digunakan untuk mengatur alignment horizontal dari teks. Contoh: 62

69 p { text-align: center; } Akan membuat teks menjadi rata tengah. c. Text Decoration Properti text-decoration digunakan untuk menambah atau menghilangkan dekorasi pada teks seperti: P { text-decoration: underline; } Akan membuat teks menjadi bergaris bawah. d. Text Transformation Properti text-transform digunakan untuk mengatur huruf besar atau kecil. Contoh: p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} e. Text Indentation Properti text-indent digunakan untuk mengatur indentasi dari sebuah teks. 4. Border Properti border digunakan untuk mengatur border pada sebuah elemen. Properti yang biasa digunakan antara lain. a. Border-style Digunakan untuk mengatur bagaimana tampilan border. Contoh: Div { border-style: dotted; } Akan memberikan border berupa titik-titik. b. Border-width Digunakan untuk mengatur ketebalan border Div { border-width: 2px; } Akan memberikan ketebelah border setebal 2px. C. Border-color Digunakan untuk memberi warna border 63

70 Div { border-color: red; } Akan memberikan warna merah pada border. d. Border Shorthand (penggabungan property-properti border agar menjadi singkat ditulis). Div { border: 1px solid #000; } Akan memberikan border solid berwarna hitam setebal 1px. 5. Margin dan Padding a. Margin Margin mengatur jarak di sekeliling elemen (diluar border). Margin tidak mempunyai warna background (transparan). Margin atas, kanan, bawah, dan kiri dapat diatur secara terpisah atau diatur bersamaan (shorthand). Contoh: margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; Shorthand Untuk mempersingkat penulisan, margin dapat ditulis sebagai berikut: margin:25px 50px 75px 100px; margin atas bernilai 25px margin kanan bernilai 50px margin bawah bernilai 75px margin kiri bernilai 100px margin:25px 50px 75px; 64

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

72 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 Memilih huruf pertama dari setiap paragraf :first-line p:first-line Memilih baris pertama dari setiap paragraph :first-child p:firstletter p:firstchild Memilih elemen <p> pertama. :before p:before Memasukkan content sebelum setiap elemen <p> :after p:after Memasukkan content setelah setiap elemen <p> :lang(language) p:lang(it) Memilih semua elemen <p> dengan attribute lang yang bernilai it 66

73 BAB 5 FORM Form interaktif adalah salah satu cara umum untuk bertukar informasi dan melakukan bisnis melalui internet atau intranet. Form menyediakan struktur yang teratur untuk memasukan data mengumpulkan sejumlah besar data. Dengan adanya form maka sebuah website dapat berfungsi sebagaimana mestinya. Kita sering menggunakan komponen form untuk melakukan interaksi kegiatan sehari-hari. Sebagai contoh setiap akan melakukan registrasi, login ke halaman tertentu ataupun melakukan pencarian data selalu saja pengguna memanfaatkan komponen form. Dengan begitu seringnya pengguna website memanfaatkan komponen form maka hendaknya form dirancang sebaik mungkin dan semenarik mungkin untuk itu menunjang hal tersebut perlu dilakukan pengembangan tampilan form dengan CSS. Berikut ini adalah beberapa modifikasi yang bisa dilakukan pada form : A. BACKGROUND Dengan menggunakan CSS maka tampilan form dapat diperindah sehingga menciptakan daya tarik tersendiri bagi pengguna website form yang dibuat dapat diubah backgroundnya dengan menggunakan warna ataupun gambar : Contoh style css dengan warna 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

74 Contoh Form Sederhana <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN > <html xmlns= > <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> </label> <input type= text name= /> </div> <div class= fieldform > <label>username</label> <input type= text name= username /> </div> <div class= fieldform > <input type= submit value= daftar /> </div> </fieldset> </form> </div> </body> </html> Gambar 53. Style background color 68

75 Contoh style css dengan gambar input[type=text] { width: 300px; padding: 10px; float: right; background: #FFF url(../images/form-bckg.jpg) repeat-x top center; } input[type=submit] { background: #CC66FF url(../images/tombol.jpg); width:100px; height:30px; } Gambar 54. Style background gambar B. BORDER Dengan menggunakan CSS maka tampilan form dapat diperindah sehingga menciptakan daya tarik tersendiri bagi pengguna website form yang dibuat dapat diubah bordernya : Contoh style border : input[type=text] { width: 300px; padding: 10px; float: right; background: #FFF url(../images/formbckg.jpg) repeat-x top center; border:#0066ff solid 1px; } 69

76 Gambar 55. Style border 70

77 BAB 6 DESAIN SITUS WEB A. PEMBUATAN SKETSA Mengerjakan secara skematis sebuah website ditujukan untuk mengurangi kemungkinan kesalahan penerapan konsep kedalam bentuk hasil akhir. 1. Sketsa kertas Menggambarkan sketsa situs web tersebut dalam secarik kertas untuk membantu menggambarkan ide awal dan skesta dalam secarik kertas bisa berisi layout. 2. Sketsa Digital Gambar 1. Perancangan Skesta kertas Merupakan hasil pemindahan dari sketsa kertas ke dalam bentuk digital dengan menggunakan aplikasi grafis seperti Photoshop, CorelDraw dan lain-lain. Dalam tahap ini sketsa dapat dibuat lebih detail. 71

78 Gambar 2. Perancangan Skestas Digital Dari sketsa yang dibuat dengan editor grafik ini kita dapat membuat prototype dari halaman web yang akan dibuat, berupa HTML wireframes yang terdiri atas layout, isi, navigasi, dan grafik. Untuk pembuatannya menggunakan HTML Editor, seperti misalnya dreamweaver. b. TAHAPAN DESAIN DENGAN PHOTOSHOP Dalam tahapan ini pembuatan desain menggunakan editor grafik berbasis pixel yaitu adobe photoshop, tahapan desain disini berupa pembuatan desain untuk header, body dan footer. 1. Membuat Header 1) Menggunakan photoshop buka sebuah dokumen baru file new, dengan ukuran 600 pixel X 200 pixel dengan Resolusi 72 pixels/inchi, ukuran resolusi ini dipakai karena resolusi inilah yang maksimal dapat ditampilkan di web. Untuk Mode warna atau color mode pilih RGB color karena file ini akan dioptimalisasikan ke file JPEG. Untuk background dipilih white. 72

79 Gambar 3. Memulai Dokumen Baru Header Setelah kita menentukan ukuran dan resolusi dokumumen untuk pembuatan header sebuah web tahapan selanjutnya kita dapat melakukan pengisian gambar, teks dan melakukan pengeditan untuk header yang kita buat. 2) Pengisian Warna Background Header Gambar 4. Pengisian Warna Pengisian warna dapat dilakukan menggunakan pemilihan warna foreground dan background yang telah disiapkan oleh photoshop 3) Pewarnaan Background Header Web Kita dapat melakukan pengisan warna kedalam bentuk gradasi/perpaduan warna dengan memilih tool pengisan warna yang telah disiapkan oleh photoshop berupa gradient tool. Gambar 5. Penggunaan Gradient Tool 73

80 Gambar 6. Hasil Pengisian Background Menggunakan Gradient Tool 4) Pengisian Teks Kedalam Header Web Kemudian kita dapat mengisikan teks kedalam website tersebut dengan menggunakan teks tool yang telah disediakan adobe photoshop Gambar 7. Text Tool yang disediakan Adobe Photoshop Menggunakan teks tool kita dapat melakukan pembuatan teks kedalam header website yang kita rancang, seperti pengisian warna, jenis font, ukuran font. 74

81 Gambar 8. Hasil Pengolahan Teks Menggunakan Text Tool 5) Pengisian Gambar, logo atau foto Setelah melalui tahapan pengolahan teks dengan menentukan warna teks, besar kecilnya ukuran teks dan posisi peletakan teks, maka tahapan selanjutnya adalah dengan melakukan pengisian gambar, logo atau foto. Mengisikan gambar, logo atau foto dengan memilih menu file open, seperti contoh dibawah ini : Gambar 9. Pengsian Gambar Kedalam DesainHeader Tahapan selanjutnya adalah melakukan pengeditan terhadap gambar, logo atau foto yang kita pilih untuk di tempatkan di bagian header. Gambar 10. Pengisian Gambar kedalam Header Kita dapat mengatur besar kecilnya komposisi gambar yang akan kita sisipkan kedalam header dengan menggunakan perintah menu edit free transform atau ctrl + T. 75

82 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

83 2. Membuat Body Website 1) Menggunakan photoshop buka sebuah dokumen baru file new, dengan ukuran 800pixel X 450pixel dengan Resolusi 72 pixels/inchi, ukuran resolusi ini dipakai karena resolusi inilah yang maksimal dapat ditampilkan di web. Untuk Mode warna atau color mode pilih RGB color karena file ini akan dioptimalisasikan ke file JPEG. Untuk background dipilih white. Gambar 14. Memulai Dokumen Baru Body Setelah kita menentukan ukuran dan resolusi dokumumen untuk pembuatan header sebuah web tahapan selanjutnya kita dapat melakukan pengisian gambar, teks dan melakukan pengeditan untuk header yang kita buat. 2) Pengisian Warna Background Gambar 15. Mengisikan Warna Background Body 77

84 Pengisian warna body dapat dilakukan menggunakan pemilihan warna foreground dan background yang telah disiapkan oleh photoshop Gambar 16. Hasil Pengisian Warna Background Body 3) Penyimpanan hasil pengolahan body yang telah di buat kedalam format file *.jpg, melalui menu file save for web 3. Membuat Footer Gambar 17. Format File yang digunakan 1) Menggunakan photoshop buka sebuah dokumen baru file new, dengan ukuran 800pixel X 450pixel dengan Resolusi 72 pixels/inchi, ukuran resolusi ini dipakai karena resolusi inilah yang maksimal dapat ditampilkan di web. Untuk Mode warna atau color mode pilih RGB color karena file ini akan dioptimalisasikan ke file JPEG. Untuk background dipilih white. 78

85 Gambar 18. Memulai Dokumen Baru Footer Setelah kita menentukan ukuran dan resolusi dokumumen untuk pembuatan Footer sebuah web tahapan selanjutnya kita dapat melakukan pengisian gambar, teks dan melakukan pengeditan untuk Footer yang kita buat. 2) Pengisian Warna Background 3) Pewarnaan Background Footer Web Gambar 19. Pengisan Warna Kita dapat melakukan pengisan warna kedalam bentuk gradasi/perpaduan warna dengan memilih tool pengisan warna yang telah disiapkan oleh photoshop berupa gradient tool. Gambar 20. Penggunaan Gradient Tool 79

86 Gambar 21. Hasil Pengisian Background Menggunakan Gradient Tool 4) Penyimpanan hasil pengolahan footer yang telah di buat kedalam format file *.jpg, melalui menu file save for web Gambar 22. Format File yang digunakan 80

87 BAB 7 DESAIN WEB PERSONAL A. DESAIN LAYOUT Sebelum melakukan desain layout sebaiknya membuat desain sketsa. Berikut ini adalah bentuk sketsa dari desain website yang akan dibuat dengan bentuk pembagian 1kolom. Gambar 1. Sketsa digital Bagian situs terdiri dari menu yang menampilkan navigasi yang akan ditampilkan atau yang akan disampaikan. Header biasany menampilkan logo atau gambar yang mencerminkan citra diri seseorang, perusahaan atau suatu organisasi. Content adalah sebuah wadah untuk menampilkan informasi dari menu/navigasi yang dipilih oleh pengguna website. Footer berisi copyright, nama, dan alamat dari pemilik website. 81

88 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

89 Gambar 2. Sketsa HTML Contoh dalam Kode HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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/ _e27e1c03b9.jpg" class="gambar1" /> <p>masjid Agung Al-Muttaqin ini merupakan Masjid Terbesar di Kota Lahat. Sebelum Berdirinya Masjid ini, lokasi ini merupakan tempat makam orang China (Kuburan China).Kita dapat memandangi seluruh Kota Lahat dari tempat ini, karena tempat ini termasuk dataran tinggi.</p> </div> <div class="posting"> <h2>gereja Santa Maria</h2> <img src="gambar/ _efb3be8921.jpg" class="gambar1" /> <p>gereja Santa Maria dikenal sebagai gereja tertua di Kota Lahat, Artistik zaman belanda masih terasa sangat kental, Lokasinya tepat di depan Rumah Sakit Umum Daerah (RSUD) Kota Lahat. Tak heran banyak wisatawan lokal maupun 83

90 luar mengunjungi tempat ini hanya untuk melihat keindahan bangunan ini.</p> </div> <div class="posting"> <h2>gedung Olah Raga (GOR) Lahat</h2> <img src="gambar/ _e733a29cdc.jpg" class="gambar1" /> <p>gedung Olahraga (GOR) ini baru selesai dibangun pada pertengahan tahun 2008 ini. Desain bangunan ini merupakan perpaduan antara Rumah Adat Kota Lahat dengan artistik Modern.</p> </div> </div> <div class="clear"></div> </div> <div id="footer">copyright Dini Hari Pertiwi 2010</div> </div> </body> </html> Contosh style pengaturan tampilan "utf-8"; /* CSS Document 15 Desember 2010 */ * { margin:0 auto; padding:0; } body { background:#3793a6; font-family:verdana, Arial, Helvetica, sans-serif; font-size:12px; } #pembungkus_web { width:850px; } #menu { background:#ffffff; width:850px; height:40px; } #menu ul li { list-style:none; float:left; padding: px; height:40px; } #menu ul li a { background: url(gambar/icon-lahat.png) no-repeat left; text-decoration:none; 84

91 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: # 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:# dashed 1px; }.clear { clear:both; } 85

92 BAB 8 DESAIN WEBSITE PERUSAHAAN A. DESAIN LAYOUT Sebelum melakukan desain layout sebaiknya membuat desain sketsa. Berikut ini adalah bentuk sketsa dari desain website yang akan dibuat dengan bentuk pembagian 1kolom. Gambar 1. Sketsa Layout Bagian situs terdiri dari menu yang menampilkan navigasi yang akan ditampilkan atau yang akan disampaikan. Header biasany menampilkan logo atau gambar yang mencerminkan citra diri seseorang, perusahaan atau suatu organisasi. Widget adalah navigasi tambahan selain yang terdapat pada bagian menu. Bagian ini biasanya berisi informasi tambahan, dan tools penunjang lainnya. Content adalah sebuah wadah untuk menampilkan informasi dari menu/navigasi yang dipilih oleh pengguna website. Footer berisi copyright, nama, dan alamat dari pemilik website. 86

93 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

94 Gambar 3. Sketsa HTML Contoh bahasa HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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

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

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

97 #kolom1 ul li h2 { background:#d64f0b; color:#ffffff; height:23px; font-size:13px; padding:7px px; } #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

98 Gambar 4. Contoh Desain Website Restoran 92

99 Gambar 5. Desain Website Perusahaan 93

100 BAB 9 JQUERY A. PENGENALAN JQUERY Jquery adalah javascript library yang merupakan kumpulan kode/fungsi javascript siap pakai, sehingga mempermudah dan mempercepat kita membuat kode javascript. Jika kita membuat kode javascript untuk mempercantik website yang kita desain biasanya menggunakan kode yang cukup panjang, bahkan sangat sulit untuk dipahami. Kesimpulannya jquery menyederhanakan kode javascript. Hal ini sesuai dengan slogannya Write less, do more cukup tulis sedikit, tapi bisa melakukan banyak hal. 1. Mengapa memilih jquery Berikut adalah beberapa alasan yang membuktikan jquery sangat powerful dan layak untuk dijadikan sebuah pilihan untuk memperindah tampilan website : a. jquery telah banyak digunakan oleh website-website terkemuka di dunia. b. Cocok dengan semua browser yang populer, seperti Mozilla, Internet Explorer, Safari, Chrome dan Opera. c. Kompatibel dengan semua versi CSS ( CSS 1 sampai CSS 3 ) d. Dokumentasi, tutorial dan contoh-contohnya lengkap, silahkan kunjungi website resminya di 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

101 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 silahkan pilih versi jquery yang diinginkan, misalnya Development. Gambar 1. Website Resmi jquery 2) Simpan file jquery lalu buat dokumen dasar HTML <html> 95

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

103 <script type="text/javascript"> $(document).ready(function(){ $(".sembunyi").click(function(){ $("#foto").hide("slow"); }); $(".tampil").click(function(){ $("#foto").show("slow"); }) }); </script> </head> <body> <button class="sembunyi">sembunyikan</button> <button class="tampil">tampilkan</button> <p><img id="foto" src="100_3850.jpg" width="250" /></p> </body> </html> Gambar 2. Hasil Contoh jquery Pada contoh tersebut, ada dua class, yaitu tampil dan sembunyi serta terdapat satu id yaitu foto.jadi nanti, skrip jquery yang akan kita buat haru sesuai dengan class dan id yang sudah kita definisikan pada bagian body, misalnya untuk menampilkan foto yang disembunyikan. B. TRIK DASAR PEMAHAMAN JQUERY Kalo kita tengok di website resminya jquery pada bagian dokumentasi ( maka ada sebelas hal yang harus kita dipelajari untuk menguasai jquery atau dikenal dengan sebutan jquery API (Application Programming Interface), diantaranya : jquery Core Selector Attributes 97

104 Traversing Manipulation CSS Events Effects Ajax PluginjQuery UI (User Interface) Utilities Namun sebagai fondasi awal dalam mempelajari jquery yang perlu difahami secara mendasar adalah selector, events, effects. 1. Filosofi Pemrograman jquery Sebelum masuk ke pembahasan dasar-dasar jquery, ada baiknya kita mengetahui dasar dari filosofi jquery, karena secara keseluruhan pemrograman jquery nantinya akan mengacu pada filosofi dasarnya seperti gambar berikut : Gambar 3. Filosofi Pemrograman jquery Pada umunya, perintah jquery digantikan dengan tanda dolar ($) yang merupakan simbol resmi dari fungsi jquery, sehingga sering dituliskan seperti pada gambar berikut : 98

105 Gambar 4. Filosofi Pemrograman jquery(2) Intinya, fungsi jquery akan mencari suatu elemen tertentu yang telah didefinisikan dibagian body, kemudian melakukan sesuatu terhadap elemen tersebut, inilah filosofi dasar dari jquery. Catatatan : jquery mempunyai fungsi-fungsi yang tergabung dalam kelompok class yang berguna untuk menambahkan dan menghapus kelompok class beserta nilainya pada suatu elemen. Ada 3 fungsi yang termasuk dalam kelompok Class, yaitu : 1. addclass( nama_class ); untuk menambahkan class pada elemen yang dipilih. 2. removeclass( nama_class ); untuk menghapus class pada elemen yang dipilih. 3. toggleclass( nama_class ); untuk menambahkan class pada suatu elemen apabila elemen tersebut belum digunakan Class, namun apabila pada elemen tersebut sudah menggunakan class maka pada elemen tersebut akan dihapus. 2. Memahami Selector Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulasi terhadap elemen-elemen tersebut. Adapun elemen-elemen dasar yang dapat dipilih oleh selectors adalah sebagai berikut : Nama tag Id Class 99

106 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 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

107 Gambar 5. Contoh Selector Tag b. Selector ID Cara menggunakan selectors id adalah dengan menyertakan tanda kres (#) sebelum nama elemennya $( #nama_elemen_id ). <html> <head> <title>selector id</title> <script type="text/javascript" src="jquery js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#daftar").addclass("merahkuning"); }); </script> <style type="text/css">.merahkuning { color:#ff0000; font-weight:bold; background:#ffff66; padding:13px; } </style> </head> <body> <div> <p>paragraf Pertama</p> </div> <div> <ul id="daftar"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> </body> </html> 101

108 Gambar 6. Contoh Selector ID c. Selector Class Cara menggunakan selectors class adalah dengan menyertakan tanda titik (.) sebelum nama elemennya $( #nama_elemen_class ). <html> <head> <title>selector class</title> <script type="text/javascript" src="jquery js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#daftar").addclass("merahkuning"); $(".subdaftar").addclass("hijauhitam"); }); </script> <style type="text/css">.merahkuning{ color:#ff0000; font-weight:bold; background:#ffff66; padding:13px; }.hijauhitam { color:#000000; background-color:#66cc33; } </style> </head> <body> <div> <p>paragraf Pertama</p> </div> <div> <ul id="daftar"> <li>item 1</li> <li class="subdaftar">item 2</li> <li>item 3</li> </ul> </div> </body> </html> 102

109 BAB 10 HOSTING DAN DOMAIN A. HOSTING Hosting adalah jasa layanan internet yang menyediakan sumber daya server-server untuk disewakan sehingga memungkinkan organisasi atau individu menempatkan informasi di internet berupa HTTP, FTP, atau DNS. Server hosting terdiri dari gabungan server-server atau sebuah server yang terhubung dengan jaringan internet berkecepatan tinggi. Hosting adalah suatu space atau tempat di internet yang kita gunakan untuk menyimpan datadata situs kita. Entah itu situs perusahaan, situs pribadi, situs blog, dan lain sebagainya. Setiap situs yang hendak kita buat online sehingga banyak orang bisa mengaksesnya, harus disimpan pada suatu host. Kini banyak tersedia host-host yang ditawarkan yang ada di internet. Mulai yang berbayar, sampai yang gratis sekalipun. Yang gratis biasanya nama domain yang kita dapatkan hanyalah subdomain dari situs induk dimana kita mendaftar disitus tersebut. 1. Jenis Jenis Hosting Ada beberapa jenis layanan hosting yaitu shared hosting, VPS atau Virtual Dedicated Server, dedicated server, colocation server. a. Shared Hosting adalah menggunakan server hosting bersama sama dengan pengguna lain satu server dipergunakan oleh lebih dari satu nama domain. Artinya dalam satu server tersebut terdapat beberapa account yang dibedakan antara account satu dan lainnya dengan username dan password. b. VPS, Virtual Private Server, atau juga dikenal sebagai Virtual Dedicated Server merupakan proses virtualisasi dari lingkungan software sistem operasi yang dipergunakan oleh server. Karena lingkungan ini merupakan lingkungan virtual, hal tersebut memungkinkan untuk menginstall sistem operasi yang dapat berjalan diatas sistem operasi lain. c. Dedicated Server adalah penggunaan server yang dikhususkan untuk aplikasi yang lebih besar dan tidak bisa dioperasikan dalam shared hosting atau virtual dedicated server. Dalam hal ini, penyediaan server ditanggung oleh perusahaan hosting yang biasanya bekerja sama dengan vendor. d. Colocation Server adalah layanan penyewaan tempat untuk meletakkan server yang dipergunakan untuk hosting. Server disediakan oleh pelanggan yang biasanya bekerja sama dengan vendor. 103

110 2. Kriteria Memilih Web Hosting Yang harus anda perhatikan ketika memilih hosting untuk blog atau website anda adalah: 1) Kebutuhan anda terhadap space dan bandwidth. Semakin banyak tulisan anda, maka semakin besar space yang akan dibutuhkan. Semakin banyak pengunjung blog anda maka semakin besar bandwidth yang dibutuhkan agar tidak terjadi server full load. 2) Perhatikan layanan dan fitur dari tempat anda akan menghostingkan blog atau website anda. Bisa mencakup software apa saja yang ada di hostingnya serta support dari jasa hostingnya. 3) Target pembaca. Jika anda memilih target pembaca dari dalam negeri ada baiknya menggunakan server lokal saja agar lebih menghemat bandwidth. Tetapi jika anda memilih target yang glogal, maka tak ada salahnya anda memilih server luar negeri seperti di Amerika. 4) Harga yang pas. Konsultasikan kepada mereka yang lebih paham tentang kebutuhan hosting anda agar jasa yang anda sewa sesuai dengan uang yang akan anda keluarkan. 3. Beberapa Penyedia Hosting Lokal di Indonesia a. Qwords b. Idwebhost c. Capoeng.net d. Dijaminmurah e. Rumahweb f. Jagoanhosting 4. Cara Menyewa Web hosting 1) Untuk menyewa jasa hosting anda perlu mengetahui hosting mana saja yang tersedia di tempat anda atau setidaknya di Indonesia. 2) Kemudian anda klik bagian registrasi dari setiap halaman utama jasa hosting tersebut. 3) Ikuti saja langkah yang di instruksikan seperti memilih nama domain, cek ketersediaan nama domain yang anda inginkan seperti di IDwebhost.com, dan selesaikan pembayarannya. 104

111 4) Jika hosting anda sudah online biasanya anda akan mendapat dari penyedia jasa atau chat saja officer yang sedang online di homepagenya. Gambar 1. Website Penyedia Hosting B. DOMAIN Nama Domain adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau server di internet. Nama Domain memberikan kemudahkan pengguna di internet untuk melakukan akses ke server dan mengingat server yang dikunjungi dibandingan harus mengenal deretan nomor atau yang dikenal IP. Level Domain Top Level Domain adalah deretan kata dibelakang nama domain seperti :.com (dotcommercial).net (dotnetwork).org(dotorganization).edu(doteducation).gov(dotgoverment) 105

112 .mil(dotmilitary).info (dotinfo) Ada dua macam Top Level Domain, yaitu Global Top Level Domain (gtld) dan Country Code Top Level Domain (cctld). gtld adalah seperti yang pada di list diatas dan cctld adalah TLD yang diperuntukkan untuk masing-masing negara, seperti Indonesia dengan kode ID (co.id, net.id, or.id) atau Singapura dengan kode SG (com.sg, net.sg, dsb). Second Level Domain (SLD) adalah nama domain yang anda daftarkan. Misalnya nama domain yang anda daftarkan adalah domainku.com, maka domainku adalah SLD dan.comnya adalah TLD. Third Level Domain adalah nama setelah Second Level Domain. Misalnya nama domain yang anda miliki adalah domainku.com, maka anda dapat menambahkan nama lain sebelum domainku, yaitu mail.domainku.com atau estrex.domainku.com. layanan yang menjual third level domain salah satunya adalah enom dengan :.us.com,.br.com,.cn.com, dll. sementara yang memberikan secara cuma cuma adalah memberikan.co.nr secara gratis dan yang memberikan.co.cc secara gratis. Gambar 2. Website Penyedia Domain C. FTP (FILE TRANSFER PROTOCOL) (FTP) adalah suatu protokol yang berfungsi untuk tukar-menukar file dalam suatu network yang mensupport TCP/IP protokol. Dua hal penting yang ada dalam FTP adalah FTP server dan FTP Client. FTP server menjalankan software yang digunakan untuk tukar menukar file, yang 106

113 selalu siap memberian layanan FTP apabila mendapat request dari FTP client. FTP client adalah komputer yang merequest koneksi ke FTP server untuk tujuan tukar menukar file. FTP digunakan dengan meluas dalam komunikasi rangkaian untuk pemindahan fail. Keupayaannya yang meliputi hampir semua jenis OS dalam komunikasi menyebabkan utiliti ini amat penting. Kebanyakkan server mempunyai kemudahan ini. Dan penggunaan transfer file melalui FTP lebih cepat dan mudah dibanding penggunaan web base file manager, hal ini karena command ftp dibuat dalam DOS atau menggunakan program seperti WS-FTP, Cute FTP. Hal ini membuat anda dapat menggunankan rangkaian pemindahan file tanpa perlu brofsing dengan segala macam grafik-grafik yang tidak diperlukan. FTP hanya menggunakan metode autentikasi standar, yakni menggunakan username dan password yang dikirim dalam bentuk tidak terenkripsi. Pengguna terdaftar dapat menggunakan username dan password-nya untuk mengakses, men-download, dan meng-upload berkasberkas yang ia kehendaki. Umumnya, para pengguna terdaftar memiliki akses penuh terhadap beberapa direktori, sehingga mereka dapat membuat berkas, membuat direktori, dan bahkan menghapus berkas. Pengguna yang belum terdaftar dapat juga menggunakan metode anonymous login, yakni dengan menggunakan nama pengguna anonymous dan password yang diisi dengan menggunakan alamat . a. Tujuan utama penggunaan FTP server adalah sebagai berikut : 1) Untuk men-sharing data. 2) Untuk menyediakan indirect atau implicit remote computer. 3) Untuk menyediakan teempat penyimpanan bagi user. 4) Untuk menyediakan transfer data yang reliable dan efisien. b. Kelemahan FTP FTP sebenarnya adalah cara yang tidak aman untuk mentransfer file karena file tersebut ditransfer tanpa melalui enkripsi terlebih dahulu tetapi melalui clear text. Mode text yang dipakai untuk transfer data adalah format ASCII atau format Binary. Secara default, ftp menggunakan mode ASCII untuk transfer data. Karena pengirimannya tanpa enkripsi, maka username, password, data yang ditransfer, maupun perintah yang dikirim dapat di sniffing oleh orang dengan menggunakan protocol analyzer (Sniffer). Solusi yang digunakan adalah dengan menggunakan SFTP (SSH FTP) yaitu FTP yang berbasis pada SSH atau menggunakan FTPS (FTP over SSL) sehingga data yang dikirim terlebih dahulu dienkripsi (dikodekan). a. Upload File ke FTP Berikut ini langkah-langkah upload salah satu website menggunakan jaringan hosting dan domain yang dimiliki oleh STMIK POLTEK PalComTech. 107

114 1) Login ke worksheet 2) Setting password ftp 3) Buka Applikasi Core FTP Gambar 3. Managemen Setting Password Gambar 4. Login FTP 108

115 4) Upload file Gambar 5. Upload File 109