Program Study
Sistem Informasi
Mata Kuliah
DAFTAR ISI
BAB 1. PEMAHAMAN DASAR WEBSITE ... 1
A. PENGANTAR DESAIN WEB ... 1
1. DESAIN WEB ... 1
2. WWW (WORLD WIDE WEB) ... 1
3. CARA KERJA WWW ... 2
4. BROWSER WEB ... 3
5. FUNGSI WEBSITE ... 3
B. JENIS SITUS WEBSITE ... 4
1. ALAT PEMASARAN ... 4
2. NILAI TAMBAH ... 4
C. ISTILAH-ISTILAH DALAM PEMROGRAMAN WEB ... 6
BAB 2. PRINSIP – PRINSIP DESAIN WEBSITE ... 8
A. MERUMUSKAN TUJUAN MEMBUAT WEBSITE ... 9
B. KONSEP DASAR DESAIN ... 9
C. ELEMEN LAYOUT ... 10 1. KESEIMBANGAN ... 10 2. KONTRAS ... 12 3. KONSISTENSI... 12 4. RUANG KOSONG ... 13 D. PEWARNAAN ... 15
1. ASPEK PSIKOLOGI WARNA ... 15
2. WARNA DALAM DESAIN WEB ... 16
F. LAYOUT ... 22
1. MODEL LAYOUT TOP INDEX ... 22
2. MODEL LAYOUT BOTTOM INDEX ... 23
3. MODEL LAYOUT LEFT INDEX... 23
4. MODEL LAYOUT RIGHT INDEX ... 24
5. MODEL LAYOUT SPLIT INDEX ... 24
6. MODEL LAYOUT ALTERNATING INDEX... 24
G. PEMBUATAN LAYOUT ... 25
H. KRITERIA SITUS WEB YANG BAIK ... 25
1. USABILITY ... 25 2. NAVIGASI ... 26 3. GRAFIK DESAIN ... 27 4. CONTENT ... 27 5. COMPATIBILTY ... 28 6. LOADING TIME... 28 7. FUNCTIONALITY ... 28
BAB 3. PENGENALAN BAHASA HTML... 29
A. DEFINISI HTML... 29
B. STRUKTUR DASAR HTML... 29
C. FORMAT TAMPILAN SDERHANA ... 30
1. TAG UNTUK HEADLINE ... 30
2. PARAGRAF ... 31
3. TAG STYLE SEDERHANA... 32
D. FORMAT ELEMEN TEXT ... 33
FORMAT TEXT ... 33
E. ANCHOR DAN LINK ... 38
F. IMAGE ... 39
G. LIST ITEM... 41
1. ORDERED LIST / LIST BERNOMOR ... 41
3. KONTROL RADIO BUTTON ... 47
4. KONTROL CHECKBOX ... 48
5. KONTROL SELECT ... 48
6. KONTROL TEXT AREA ... 49
7. KONTROL BUTTON ... 50
BAB 4. PENGENALAN CSS ... 52
A. KEGUNAAN CSS ... 52 B. KEUNTUNGAN CSS... 52 C. KEKURANGAN CSS ... 54 D. CARA PENULISAN CSS ... 54 E. SYNTAX CSS ... 56 F. ID DAN CLASS ... 57 G. PROPERTI CSS ... 58 1. BACKGROUND ... 58 2. FONT ... 58 3. TEXT ... 59 4. BORDER ... 605. MARGIN DAN PADDING ... 60
6. PSEUDO CLASS ... 62
BAB 5. FORM ... 64
A. BACKGROUND ... 64
B. BORDER... 66
BAB 6. DESAIN SITUS WEB ... 67
A. PEMBUATAN SKETSA ... 67
B. TAHAPAN DESAIN DENGAN PHOTOSHOP ... 68
1. MEMBUAT HEADER ... 68
2. MEMBUAT BODY WEBSITE... 72
BAB 8. DESAIN WEBSITE PERUSAHAAN ... 82
A. DESAIN LAYOUT... 82
B. TAHAPAN SKETSA HTML ... 83
BAB 9. JQUERY ... 89
A. PENGENALAN JQUERY ... 89
B. TRIK DASAR PEMAHAMAN JQUERY... 92
BAB 10. HOSTING DAN DOMAIN ... 98
A. HOSTING ... 98
1. JENIS – JENIS HOSTING... 98
2. KRITERIA MEMILIH WEB HOSTING ... 99
3. BEBERAPA PENYEDIA HOSTING LOKAL DI INDONESIA... 99
4. CARA MENYEWA WEB HOSTING ... 99
B. DOMAIN ...100
BAB 1
PEMAHAMAN DASAR WEBSITE
A. PENGANTAR DESAIN WEB
1. Desain Web
Desain web adalah seni dan proses dalam menciptakan halaman web tunggal atau keseluruhan. Sebagian dari aspek yang mungkin tercakup pada desain web atau produksi web adalah
menciptakan animasi dan grafik, pemilihan font, pemilihan warna, navigasi, isi. Desain web juga menggabungkan pada seni programing dan pengembangan e-commerce. Desain web adalah suatu format penerbitan elektronik.
Desain web sangat melibatkan estetika dan mood. Estetika berasal dari bahasa Yunani
aisthesis, yang kemudian dipopulerkan oleh Alexander Gottlieb Baungarten(1714-1762) dengan nama aesthetica. Secara sederhana estetika bisa diartikan sebagai seni keindahan yang
mempengaruhi kenyamanan pengguna secara visual karena karya seni yang memenuhi nilai-nilai 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 dariWorld Wide Web, atau lebih dikenal dengan nama web. Web adalah sebuah layanan yang didapat oleh pemakai komputer apabila komputernya tersambung dengan internet. Dengan web, pengguna komputer diseluruh dunia dapat saling berinteraksi dengan pengguna internet lainnya tanpa harus beranjak dari tempat dimana internet itu diakses. Dengan akses internet maka pengguna layanan internet dapat dengan mudah
memperoleh informasi yang diinginkan, bahkan dapat menyimpan program, atau gambar yang ditampilkan dari media internet.
Web merupakan suatu ruangan yang dapat menampung informasi dalam jaringan Internet pada sebuah browser, dengan menambahkan kemampuan untuk mengolah kode-kode tertentu yang secara umum dinamakan tag-tag (delimiter) dan kemampuan untuk dapat meloncat (link) dari halaman satu ke halaman lainnya dan kemampaun untuk pengolah sebuah gambar, suara, animasi, bahkan pengolahan database dari sebuah aplikasi berbasis web.
Pada perkembangan selanjutnya, web lebih banyak dikenal dengan nama Internet, karena kemampuan dari interface web yang dapat mengelolah layanan-layanan yang terdapat pada internet.
3. Cara Kerja WWW
Gambar 1. Cara kerja WWW
Penjelasan Cara Kerja WWW
1. Informasi – informasi yang dibuat disimpan dalam sebuah dokumen web pages pada sebuah tempat penyimpanan, yaitu hardisk.
2. Dokumen web yang disimpan dalam sebuah harddisk terletak pada web server apabila komputer yang dimaksud telah dilengkapi dengan web server seperti IIS, PWS atau Apache Server. Dalam hal ini komputer bertugas sebagai server sekaligus menyimpan informasi.
3. Komputer yang bertugas sebagaiclient membaca informasi yang terdapat pada web pages melalui sebuah jaringan internet dengan mengambil informasi yang tersimpan pada komputer server.
4. Komputerclientmenampilkan halaman web dengan menggunakan sebuah program khusus, yaitu browser.
4. Browser Web
Browser web adalah program yang digunakan untuk menampilkan informasi dari suatu halaman web yang tersimpan dalam komputer. Dengan menerapkan Grafik User Interface(GUI), maka para pengguna internet dengan mudah mengakses informasi-informasi yang terdapat pada internet.
Cara Kerja Browser Web
1. Browser web mengambil sebuah informasi melalui jaringan internet pada sebuah server web dengan perintah request.
2. Server web memberikan umpan balik atau feedback, dengan memberi perintah responen
3. Browser web menampilkan informasi yang telah diterima dari server web.
5. Fungsi Website
Sebelum mendesain web, tentukan dan pahami beberapa fungsi situs web agar desain yang dibuat sesuai dengan fungsi, estetika danmoodyang dikehendaki :
Fungsi Komunikasi
Website yang digunakan untuk komunikasi adalah website-website yang digunakan untuk email, form contact, cahtting, forum dan sebagainya.
Fungsi Informasi
Website ini biasanya berisi teks dan grafik yang dapat didownload dengan cepet dan website untuk fungsi informasi sebaiknya dilakukan pembatasan untuk penggunaan animasi, gambar dan elemen bergerak. Website yang memberikan informasi misalnyaNews, Profile, Company, Library, Referencedan 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.
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 updateterhadap produk yang akan dijual.
Perencanaan dalam merancang situs:
1. Adanya marketing tool
3. Halaman situs user friendly(mudah untuk dipahami).
4.
Transaksi hanya dapat dilakukan secaraofflineb. E-Commerce
Adalah sebuah situs yang digunakan untuk melalukan transaksi pembelian dan pembayaran secaraonline
.
Bila sebuah halaman web yang akan disusun adalah halaman web yang berorintasi bisnis, tujuan yang harus dicapai halaman web itu adalah meningkatkan order penjualan dari pelanggan, menciptakan order dari pelanggan baru dan menekan keseluruhan biaya pengeluaran.
Beberapa hal yang harus diperhatikan adalah :
1. Membuat nama domain sendiri.
2. Kecepatan akses sangat penting jadi jangan terlalu banyak menggunakan animasi bergerak.
3. Pemilihan server (keamanan, kemudahan akses, stabilitas sistem server) 4. Tampilan situs memiliki kesan profesional
5. Email balasan
6. Cara pembayaran yang selengkap mungkin 7. Pencarian yang memudahkan pengunjung 8. Proses transaksi cepat dan mudah
c. E-Learning
Adalah sebuah website yang ditujukan sebagai media pembelajaran. E-learning bisa juga digunakan untuk pembelajaran jarak jauh, untuk pelatihan.
Syarat yang harus terpenuhi dalam sebuah e-learning :
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.
3. TCP/IP adalah kependekan dari Transmission Control Protocol / Internet Protocol artinya protokol yang terdiri dari sub-protokol, yang beroperasi pada lapisan yang berbeda. Ini merupalan protokol standar internet. Protokol ini memberikan nomor Unix pada setiap komputer yang terkoneksi.
4. URL adalah kependekan dari Uniform Resource Locators, artinya sebuah alamat didalam internet yang terdiri atas 2bagian. Bagian pertama pengenalan protokol dan bagian kedua adalah pengenalan domain.
5. HTTP adalah kependekan dari Hypertext Markup Language, artinya protokol yang berfungsi untuk mendefinisikan dan menjelaskan bagaimana server dan client berinteraksi dalam mengirim dan menerima dokumen web.
BAB 2
PRINSIP – PRINSIP DESAIN WEBSITE
Untuk membangun suatu website yang baik, seorang web designer sebaiknya memperhatikan prinsip – prinsip yang ada, terlepas ia mempunyai bakat seni atau tidak. Adapun prinsip – prinsip yang harus diperhatikan antara lain:
1. Unik, Yang dimaksud dengan unik dalam mendesain suatu website adalah kesadaran seorang designer untuk tidak meniru atau menggunakan karya orang lain.
2. Komposisi, Untuk memperindah tampilan halaman web, seorang web designer harus betul – betul memahami komposisi, baik bentuk maupun warna yang akan digunakan dalam website yang dibuatnya.
3. Simple, Banyak dari seorang web designer yang memegang prinsip – prinsip “Keep it Simple”. Hal ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif. 4. Semiotik, Arti semiotik adalah ilmu yang mempelajari tentang tanda – tanda. Dalam
hal ini diharapkan pengunjung dapat dengan mudah dan cepat mengerti keika melihat tanda dan gambar yang ada dalam suatu website.
5. Ergonomis, Ergonomis dalam mendesain website adalah kepunyaan yang akan didapatkan pengunjung dalam membacadan kecepatan yang akan diperoleh
pengunjung dalam mencari informasi. Hal – hal yang perlu diperhatikkan oleh seorang webdesigener untuk mencapai prinsip ini adalah :
a. pemilihan ukuran fon yang tepat dan mudah dibaca
b. menempatkan link sedemikian rupa sehingga mudah dan dapat diakses dan yang lebih penting lagi adalah suatu website terlihat lebih informative.
1. Fokus, Fokus adalah hierarki prioritas dari pesan yang akan disampaikan, dengan adanya fokus tersebut, diharapkan pengunjung dapat memahami dan menentukan pesan mana yang lebih dulu harus dibaca atau dilihat.
2. Konsistensi, Konsistensi adalah pemilihan bentuk atau style yang digunakan pada elemen – elemen perancangan web dan digunakan pada semua halaman website. Website yang konsisten akan memberikan identitas tersendiri dan mampu
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.
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.
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.
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.
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.
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
Menegaskan sebuah elemen Mempermudah pemahaman layout Membuat halaman tampak dinamis Mempermudah membaca text
D. PEWARNAAN
Warna merupakan sensitivitas yang berhubungan dengan indra. Warna dapat merebut
perhatian, menarik, menolak, menggemaskan bahkan warna bisa mempengaruhi emosi. Warna dapat menimbulkan kesan pertama pada pengunjung ketika menjelajah sebuah situs web. Warna modern biasanya terkesan bersih dan bercahaya, seperti biru dan kuning. Warna bersahabat biasanya terkesan ceria dan menyenangkan, seperti orange, kuning, hijau. Warna perusahaan biasanya bersih, seperti biru, putih dan abu – abu. Warna anak – anak biasanya terkesan ceria dan menonjol, seperti merah, kuning dan biru (warna primer).
1. Aspek Psikologi Warna
Warna mempunyai emosi yang melekat, yang bisa ditimbulkan dengan memperlihatkan keserasian warna dengan cara yang benar. Berikut ini yang makna terkandung di dalam warna :
Warna Makna Positif Makna Negatif
Merah Kekuatan, energi, tenaga, hasrat , cinta. Dengan sedikit memberikan warna merah bisa menimbulkan gairah, membangkitkan semangat, mendorong keinginan.
Bahaya, perang, kekejaman, kekerasan, api, darah. Terlalu banyak warna merah bisa disangka terlalu agresif .
Merah Muda Kewanitaan (feminim),
keremajaan (masa muda). Naif,kelemahan, kekurangan. Orange Kehangatan, bersemangat,
ceria, keseimbangan, musim gugur, menimbulkan getaran
Meminta dan mencari perhatian
Kuning Sinar matahari, emas, kekayaan, keberuntungan, kehidupan.
Tidak jujur, pengecut, cemburu, iri hati,
penghianatan, penipuan, kebohongan, resiko, sakit Hijau Alam, lingkungan, hidup, Kecemburuan, nasib buruk, iri
kesuburan, harapan. hati, dengki. Biru Kepercayaan, kesetiaan,
ketenangan, kedamaian, ketulusan, kesejukan, air, awan, harmoni, kebersihan, konservatif, percaya diri, penyembuhan. Merupakan warna yang aman dipakai untuk desain.
Kesedihan, kedinginan, depresi, penurunan vitalitas.
Ungu Kebangsawanan, perubahan,
spiritual. Kesombongan, keangkuhan,kejam, kasar, duka cita. Coklat Tanah, bumi, netral, hangat,
keamanan, perlindungan Tumpul, kotor, membosankan Abu-abu Modern, cerdas, bersih,
kokoh, masa depan, intelektual .
Umur tua, kesedihan, bosan.
Putih Kesucian, kebersihan, kemurnian, kesederhanaan, damai, kebaikan, disiplin, perawan, perkawinan, musim dingin, musim salju.
Kematian ( budaya timur ), dingin, mandul, steril, klinik, hampa.
Hitam Kekuatan, keanggunan, kemewahan, misteri, kecanggihan, kemakmuran, kepuasan, pengalaman, keras, kokoh, sangat kuat.
Kematian ( budaya barat ), takut, setan, kesedihan, duka cita, marah, anonim,
penyesalan.
2. Warna dalam Desain Web
Warna banyak berperan dalam pembuatan situs, beberapa variasinya antra lain : a. Menegaskan elemen yang dianggap penting.
b. Menarik perhatian.
c. Membimbing pembaca untuk menentukan daerah mana yang seharusnya lebih dahulu dibaca.
d. Menghubungkan antara satu elemen dengan yang lain (penggunaan warna background halaman yang sama dengan background foto)
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.
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%.
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
Biru-hijau Biru Biru-ungu Ungu
E. TIPOGRAFI
Tipografi adalah seni dalam huruf yang meliputi pemilihan huruf, penentuan ukuran yang tepat, dimana teks dapat diputus, spasi jarak, dan bagaimana teks dapat dengan mudah dibaca.
1. Jenis Huruf
Jenis huruf sangat banyak, tapi secara garis besar dapat dikategorikan menjadi lima, yaitu: a. Serif
Jenis huruf ini merupakan jenis huruf yang tradisional, cirinya mempunyai “kaki” atau “ekor”, misalnya Times New Roman, Garamond, Palatino. Karena bentuk hurufnya yang berkaki membuat garis tidak kelihatan, ini memudahkan mata pembaca untuk menelusuri dan membaca teks. Jadi huruf ini cocok dipakai untuk teks yang panjang dengan jarak spasi yang sedikit. Bentuk huruf ini memberikan kesan formal, intelektual, anggun dan konservatif. Cocok dipakai untuk organisasi, pemerintahan, pendidikan dan perusahaan.
Gambar 11. Font Serif
b. Sans-Serif
Sans-serif yang berarti tidak berkaki (bahasa perancis), misal jenis huruf ini adalah Helvetica, Arial, Verdana dan Avant Garde. Jenis ini terlihat sederhana dan tidak formal, sehingga cocok untuk judul dan subjudul. Jika ingin menggunakan jenis ini untuk teks utama, imbangi dengan memberikan jarak spasi yang agak lebar pada teks.
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
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.
3) Usahakan jangan lebih dari dua belas kalimat dalam satu baris teks, kanera akan mempersulit pembacaan.
4) Hindari pemakaian kombinasi dua huruf yang sangat mirip, karena menghasilkan kontras yang rendah, ini menyebabkan ketidakserasian dan ketidakcocokan dalam pandangan
5) Membatasi pemakaian jenis huruf dalam satu halaman. Jangan sampai melebihi tiga atau empat jenis huruf.
6) Hindari penggunaan slider (penggulungan halaman) lebih dari sekali. Apabila banyak artikel yang ingin ditampilkan, buatlah link ke halaman lain.
7) Ukuran huruf untuk isi halaman adalah 10-14 point dan judul adalah 14-30 point. 8) Memberikan ketebalan dan huruf besar (kapital) pada teks untuk judul, agar dapat
membedakan dengan isi halaman
9) Hindari telalu banyak huruf besar karena akan memperlambat kecepatan membaca dan memboroskan ruang
10) Hindari pemakaian jenis huruf monospace untuk isi halaman, karena memerlukan banyak perhatian untuk membacanya. Hal ini dapat mengalihkan pesan yang ingin disampaikan.
F. LAYOUT
Layout adalah proses penataan dan pengaturan teks atau grafik pada halaman. Layout meliputi penyusunan, pembagian tempat dalam suatu halaman pengaturan jarak spasi, pengelompokan teks dan grafik, dan penekanan pada suatu bagian tertentu. Secara umum, halaman web memaki lima jenis layout dan pemilihan layout yang disesuaikan jenis informasi yang ditampilkan.
1. Model Layout Top Index
Biasanya digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine.
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.
Gambar 19. Model Layout Right Index
5. Model Layout Split Index
Halaman akan terjaga keseimbangannya.Gambar 20. Model Layout Top Index
6. Model Layout Alternating Index
Biasanya digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah dan lain – lain.
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.
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.
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 denganbackground.
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.
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.
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.
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.
Head. Bagian header dokumen HTML, secara umum berisi informasi mengenai dokumen.
Body. Merupakan isi dokumen sebenarnya
C. FORMAT TAMPILAN SDERHANA
1. Tag untuk Headline
Tag Headline/heading adalah tag yang digunakan untuk membuat judul dari isi dokumen HTML. tag heading memiliki 6buah bilangan terdiri atas 1, 2, 3, 4, 5 dan 6. Masing-masing bilangan yang terdapat pada heading berfungsi untuk mewakili ukuran ukuran dari besarnya tag heading. Bilangan pertama merupakan ukuran terbesar sedangkan yang terkecil adalah bilangan terakhir.
Sintag Heading/headline adalah sebagai berikut :
<hn [properti]> ...</hn>
Keterangan :
n adalah bilangan yang terdiri dari 1 sampai 6
Properti kemampuan tambahan yang dimiliki tag heading
Properti Keterangan
Align
Left, Right, Center, Justify
Pengaturan letak headline/heading. <h1 align=”left”> isi text </h1>
Gambar 23. Struktur Headline
Gambar 24. Contoh Heading
2. Paragraf
Digunakan untuk memberi pengaturan paragraf pada text yang akan ditampilkan.
Properti Keterangan Align
Left, Right, Center, Justify
Pengaturan letak patagraf. <p align=”left”> isi text </p>
Contoh penggunaan paragraf
Gambar 25. Contoh Paragraph
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 texttebal <strong> <B> Untuk membuat textmiring <EM> <I> Untuk huruffixed <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
D. FORMAT ELEMEN TEXT
1. Format Text
a. Cetak Tebal / Bold
Cetak tebal digunakan untuk menebalkan teks agar berbeda dengan teks lainnya dalam sebuah dokumen HTML.
b. Cetak Miring / Italic
Cetak miring digunakan untuk menampilkan agar text yang akan ditampilkan agak sedikit lebih miring dari text yang lainnya dalam sebuah dokumen HTML.
c. Cetak Garis Bawah / Underline
Garis bawah digunakan untuk menampilkan agar text yang akan ditampilkan memiliki garis dibawak kalimat dalam dokumen HTML.
d. Mengecilkan Huruf / Small
Untuk mengecilkan huruf didalam dokumen HTML. digunakan tag small untuk membuat text agar tampak berbeda dari teks yang lainnya.
Contoh :
<p>nama saya dini, <small>19 Juli 1987
</small> saya dilahirkan </p>
<b>text </b>
<i>text </i>
<u>text </u>
Hasil
Gambar 29. Tag Style Small
e. Membesarkan Huruf / Big
Untuk membesarkan huruf di dalam dokumen HTML digunakan tag big untuk membuat sebuah text agar tampak berbeda dari text yang lainnya.
Contoh :
<p>nama saya dini, <big>19 Juli 1987 </big>
saya dilahirkan </p>
Gambar 30. Tag Style Big
f. Mencoret Text / Strike
Untuk mencoret sebuah kata pada sebuah dokumen HTML sebagai perbedaan dengan penggunaan kata yang lainnya.
<big>text </big>
Contoh :
g. Subscript dan Superscript
Untuk membuat rumus aritmatika berupa pemangkatan dan rumus kimia didalam dokumen HTML.
Contoh :
2<sup>5</sup> + 5<sup>2</sub>
H<sub>2</sub>SO<sub>4</sub>
Gambar 31. Tag Style Sup & Sub
<p>nama saya dini, <strike>19 Juli 1987
</strike> saya dilahirkan </p>
<sup>text superscript</sup>
<sub>text subscript</sub>
h. Tag Pre-Formatted Text
Merupakan tag yang digunakan untuk membuat satu blog tulisan yang tata letaknya dapat kita atur sesuai dengan keinginan kita dan sesuai dengan tampilan pada saat pembuatan.
Contoh :
Gambar 32. Contoh Tag Style PRE
Gambar 33. Tag Style PRE
i. Tag Garis Pemisah Horizontal
Digunakan untuk membuat garis pemisah antar baris atau untuk membuat garis horizontal sepanjang lebar halaman homepage.
<HR> tidak memiliki tag penutup
Berikut adalah property yang bisa disisipkan pada tag <HR>
Properti Fungsi
Align Posisi garis ( center, left, right)
Size Ukuran tebal garis
Width Ukuran lebar/panjang garis
Color Warna garis
Contoh :
Gambar 34. Contoh Tag Style HR
Gambar 35. Tag Style HR
E. ANCHOR DAN LINK
Dokumen HTML dilengakapi dengan kemampuan yang berpindah-pindah dari halaman satu ke halaman lainnya (link). Link dalam halaman HTML ditandai dengan menggaris bawahi teks yang akan di link, atau pointer mouse akan berubah menjadi bentuk jari apabila berada pada objek link atau (gambar/text).
<a href=”nama dokumen yang dilink” [atribut] >..text/gambar...</a>
Hyperlink dibedakan menjadi :
1. Link Absolut
Adalah sebuah link yang digunkan untuk mengaitkan halaman webyang satu dengan halaman web yang lainnya didalam situs internet.
<a href=”alamat internet” [atribut] >..text/gambar...</a>
Contoh :
<a href=”http://www.palcomtech.ac.id”>PalComTech</a>
2. Link Relatif
Adalah link yang digunakan untuk mengaitkan halaman web yang satu dengan halaman web lainnya di dalam satu komputer tanpa harus menuliskan secara lengkap alamat situs internet seperti pada alamat link absolut.
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 lainGIF (Graphics Interchange Format), JPEG ( Joint Photographics Experts Group).
<img src=”lokasi gambar”[properti]>
Berikut adalah properti yang bisa disisipkan pada gambarProperti 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(%)
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>
</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>
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.
<table[properti]> <tr> <th>...</th> <th>...</th> </tr> <tr> <td>...</td> <td>...</td> </tr> </table> Keterangan :
<table> adalah tag yang berfungsi untuk mendefinisikan sebuah table <tr> adalah tag yang berfungsi untuk membuat baris
<th> adalah tag yang berfungsi untuk membuat tag heading/judul <td> adalah tag yang berfungsi untuk membuat sel/kolom.
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.
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.
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
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 ButtonProperti 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.
<input type=”checkbox” [properti]>
Property Radio CheckboxProperti 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>
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>
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]>
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)
BAB 4
PENGENALAN CSS
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
CSS (Cascading Style Sheet) secara sederhana adalah sebuah metode yang digunakan untuk mempersingkat penulisan tag HTML, seperti font, color, text, dan tabel menjadi lebih ringkas sehingga tidak terjadi pengulangan penulisan.
CSS adala bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS, memungkinkan kita untuk menampilkan halaman yang sama dengan format berbeda.
CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
A. KEGUNAAN CSS
Beberapa kegunaan atau manfaat menggunakan CSS antara lain :
1. Mempersingkat penulisan tag HTML: kita tidak perlu mendefinisikan setiap tag dengan properti dan nilai yang sama.
2. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan penulisan.
3. Mudah dan cepat dalam memaintenance : dikarenakan file CSS yang dibuat secara terpisah, maka anda tidak perlu merombak semua elemen atau properti dalam HTML, cukup mengedit file CSS-nya saja.
4. CSS bisa melakukan apa yang tidak bisa dilakukan oleh HTML, misalnya kita bisa memberi warna pada input box atau scrollbar, yang tentunya tidak bisa dilakukan oleh bahasa HTML.
B. KEUNTUNGAN CSS
Sebelum kehadiran CSS, seorang webmaster harus bekerja ekstra keras menuliskan tag-tag HTML baik untuk mendesain layout ataupun untuk memberi gaya tampilan (style) pada bagian-bagian tertentu dari situ web yang akan dibuatnya. Pekerjaan ini tentu semakin berat apabila
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 halaman-halaman 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 situs-situs web yang menggunakan table sebagai pondasi layoutnya.
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, useratau 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.
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.
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;
#menu { background:#FFFFFF; width:850px; height:40px; } #menu ul li { list-style:none; float:left; padding:0 0 0 10px; height:40px; }
E. SYNTAX CSS
Di dalam penulisan CSS ada dua bagian utama yaituselektor dansatu atau lebih deklarasi.
Selektorbiasanya adalah elemen HTML yang akan di format tampilannya. Setiapdeklarasiterdiri dari bagian propertidannilaidari properti tersebut. Propertiadalah atribut yang akan kita rubah. Setiappropertimempunyainilai. Contoh:
Gambar 52. Deklarasi CSS
Setiap deklarasi selalu diakhir dengan semicolon, dan kumpulan deklarasi selalui diapit oleh tanda kurung kurawal.
F. ID DAN CLASS
Selain selektor-selektor umum yang sering dipakai (tag-tag html) kita dapat menggunakan ID dan Class untuk membuat selektor sendiri.
1. Selektor ID
Selektor ID digunakan untuk memilih satu buah elemen yang unik.
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
Contoh: H1#logo { background-image: url(images/gradient.jpg); background-repeat: repeat-x; }
2. Font
Properti font digunakan untuk mengatur efek-efek yang berkenaan dengan “huruf”. Properti-properti font diantaranya adalah:
Font-style Font-weight Font-size Font-family
Contoh:
body { font-family: Arial, Helvetica, Sans-Serif; font-weight: bold; font-size: 12px; }
Keterangan:
Kode diatas akan memberikan efek penggunaan Huruf Arial, jika tidak ada jenis huruf tersebut maka akan dilanjutkan dengan huruf-huruf setelah tanda koma. Kemudian teks akan menjadi tebal dan ukurannya sebesar 12px.
3. Text
a. Text ColorDigunakan 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:
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
