Modul Digital Imaging & Design Web

D3 Manajemen INformatika STMIK YADIKA BANGIL - 2014

D3 Manajemen INformatika STMIK YADIKA BANGIL - 2014BAB IPENGANTAR DESAIN WEBPengertian Desain WebDesain web adalah sebuah karya seni dan proses membuat satu halaman web atau seluruh situs web. Proses tersebut mungkin melibatkan segi estetika dan mekanik dari sebuah operasi situs web, perancangan web (web design) adalah istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan, meskipun mengutamakan tampilan dan nuansa situs web. Beberapa aspek yang dapat dimasukkan dalam desain grafis dan produksi web adalah animasi, pemilihan warna, pilihan font, desain navigasi, kreasi konten atau isi, penulisan HTML/XML, dan pemrograman. Tujuan dari web design adalah untuk membuat website sekumpulan konten online termasuk dokumen dan aplikasi yang berada pada server web / server. Sebuah website dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis.Perancang web atau desainer web (web designer) adalah orang yang memiliki keahlian menciptakan konten presentasi (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna-akhir melalui World Wide Web, menggunakan Web browser atau perangkat lunak Web-enabled lain seperti televisi internet, Microblogging, RSS, dan sebagainya.Secara umum, tugas seorang desainer web adalah menentukan tampilan dan hasil dari sebuah situs web. Secara langsung atau tidak, Anda harus menguasai dan memahami hal-hal yang berkaitan dengan tampilan dari sebuah situs web.Dengan berkembangnya spesialisasi dalam desain komunikasi dan bidang teknologi informasi, ada kecenderungan kuat untuk menarik garis yang jelas antara web design khusus untuk halaman web dan pengembangan web secara keseluruhan dari semua layanan berbasis web.Seorang desainer web juga harus memahami penerapan aspek-aspek yang terdapat di dalam desain situs web, meskipun tidak menguasai. Seperti halnya JavaScript, Anda tidak wajib mengetahui dan mampu membuat JavaScript sendiri untuk kebutuhan desain, namun pengetahuan tentang bagaimana dan tata cara penerapan JavaScript pada desain situs akan sangat menguntungkan bila Anda memahaminya.Tugas seorang desainer web tidaklah semudah yang dibayangkan, penguasaan software-software grafis dan animasi dan penulisan HTML saja tidak cukup untuk membuat website yang baik.Prinsip Desain WebDalam membuat desain web, sekarang ini banyak sekali template-template atau contoh-contoh jadi yang telah disediakan. Akan tetapi terkadang apa yang ditampilkan dalam template tersebut tidak sesuai dengan keinginan dan kebutuhan Anda. Untuk itu seorang desainer web sangat perlu dan butuh untuk melakukan langkah desain sendiri untuk halaman web Anda tersebut, agar sesuai dengan keinginan dan kebutuhan Anda.Berikut ini adalah beberapa prinsip dasar yang harus Anda ketahui sebagai seorang desainer web: Hasil Karya SendiriSebagai seorang desainer, harus mempunyai kesadaran untuk tidak meniru atau menggunakan karya orang lain. Begitu pula seorang desainer web, hindarilah untuk menggunakan ikon, animasi, tombol, dan lain-lain, yang telah digunakan atau dibuat oleh orang lain. KomposisiPerhatikan komposisi warna yang akan digunakan dalam website yang dibuat. Gunakan selalu Palette 216WebColor, yang dapat diperoleh dari Adobe.com, hal ini untuk mencegah terjadinya dither pada image yang berformat GIF. Dalam membangun website suatu perusahaan, desainer web selalu menyesuaikan warna yang digunakan dengan Corporate Color perusahaan tersebut. Untuk kemudian warna-warna tadi digunakan sebagai warna dominan atau sebagai elemen pendukung (garis, background, button, dsb). SederhanaDalam membuat sebuah desain, tampilan web diusahakan untuk dibuat simpel, hal ini bertujuan agar tampilan website.tersebut terlihat rapi, bersih dan juga informatif. KenyamananDesainer web selalu memperhatikan aspek kenyamanan user dalam membaca dan menelusuri website tersebut. Pilih ukuran fonts yang tepat sehingga mudah dibaca, tempatkan link sedemikian rupa sehingga mudah dan cepat untuk diakses dan lebih penting lagi adalah Informatif. Menentukan PrioritasTentukan prioritas dari pesan yang akan disampaikan, misalnya: Judul harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul yang berukuran hampir sama. Hal ini akan membingungkan user untuk menentukan pesan mana yang harus dibaca/dilihat lebih dahulu. KonsistenTentukan font apa yang akan digunakan sebagai body-text, judul, subjudul, dan sebagainya, sehingga website tersebut akan terlihat disiplin dan rapi. Sesuaikan jenis huruf yang digunakan dengan misi dan visi website tersebut, misalnya: hindari menggunakan font Comic dalam membangun website suatu perusahaan resmi.Software Desain WebBerikut ini adalah beberapa kategori dan jenis software yang perlu diketahui oleh seorang calon desainer web:a. Software Membuat DesainUntuk membuat desain suatu website biasanya para desainer web dimulai dengan software ini sebagai tampilan sementara atau dalam membuat layout website. Adobe Photoshop : Desain berbasis titik (bitmap), dan dapat memotong gambar-gambar ke dalam format html. Adobe Fireworks : Desain berbasis titik (bitmap), vector, dan dapat memotong gambar-gambar ke dalam format html. Adobe Image Ready : Memotong gambar-gambar ke dalam format html. Adobe Illustrator : Desain berbasis vector CorelDraw : Desain berbasis vector Adobe Freehand : Desain berbasis vektorb. Software Menambahkan EfekMenambahkan efek dilakukan untuk menghidupkan desain yang telah Anda rancang. Seperti menambah efek cahaya, tekstur dan manipulasi teks. Adobe Fireworks : Efek teks Painter : Memberikan efek lukisan Ulead Photo Impact : Efek frame dan perancangan ikon yang cantik. Plugins Photoshop: Seperti Andromeda, Alien Skin, Eye Candy, Kais Power Tool, dan Xenofex juga sangat mendukung untuk memberi efek desain sewaktu Anda mendesain layout website di Photoshop.c. Software AnimasiPenambahan animasi perlu untuk membuat website agar kelihatan menarik dan hidup. Adobe Flash : Menampilkan animasi berbasis vektor yang berukuran kecil. Adobe Fireworks : Membuat animasi file gif. 3D Studio Max : Untuk membuat objek dan animasi 3D. Gif Construction Set: Membuat animasi file gif. Microsoft Gif Animator : Membuat animasi file gif. Swift 3D : Merancang animasi 3D dengan format file Flash. Swish : Membuat berbagai macam efek text dengan format file Flash.d. Software Web EditorSoftware web editor digunakan untuk menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman web dengan teks dan sedikit bahasa script. Adobe Dreamweaver Microsoft Frontpage Alaire Homesite Cold Fusion Net Object Fusione. Software Pemrograman WebHal ini dilakukan setelah sebagian besar desain website telah selesai. Pemrograman bertugas sebagai akses database, form isian dan membuat web lebih interaktif. Contoh : membuat Buku Tamu, Fromulir Pendaftaran, Forum, Chatting, Portal, Lelang, dan Iklan baris. PHP ASP ( Active Server Page ) CGI ( Common Gateway Interface ) Perlf. Software Upload ke Web HostingFile html Anda harus diletakkan (upload) di suatu tempat (hosting) agar orang di seluruh dunia dapat melihat website Anda. Adobe Dreamweaver: dengan fasilitas Site FTP Microsoft Frontpage : dengan fasilitas Publish LeapFTP Bullet FTP CuteFTP WS-FTP

BAB IIPENGENALAN DASAR HTMLDokumen HTMLHTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam web browser. Ada dua cara untuk membuat web page, dengan HTML editor atau editor text biasa (misal : notepad). Penamaan DokumenDokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi .htm atau .htmlDefinisi ElemenDokumen HTML disusun elemen-elemen atau komponen dasar pembentu HTML. Contoh dari elemen dokumen HTML adalah : head , body, table, paragraf, list.Definisi TagTag digunakan untuk menandai elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (, tanda lebih besar. Tag umumnya berpasangan, sebagai contoh Dengan . Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan : - Elemen HTML yang diperlukanElemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag ,, dan .Setiap dokumen terdiri atas tag head dan body. Elemn Head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan ditampilkan di browser. Sehingga setiap dokumen HTML harus mempunyai pola sebagai berikut :

-- Informasi tentang dokumen HTML

-- Informasi yang akan ditampilkan dalam web browser

Setiap dokumen html harus diwali dengan menuliskan tag dan tag di akhir dokumen. Tag ini menandai dokumen HTML yang berarti adalah dokumen HTML dalam satu dokumen hanya ada satu elemen html. Section atau elemen head ditandai dengan tag diawal dan tag diakhir. Section ini beiris informasi tentang dokumen HTML, mislnya informasi judul html yang ditandai dengan tag dan diakhiri dengan tag . Section body ditandai dengan tag dan diakhiri dengan tag diakhir. Section body merupakan isi dokumen yang akan ditampilakn pada browser.Contoh Listing 2.1 : contoh1.html

Belajar Web Design

ini adalah halaman HTML

Penjelasan ContohTag pertama pada dokumen html anda adalah ,. Tag ini memberi tahu bahwa ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen anda adalah . Tag ini memberi tahu browser bahwa ini adalah akhir dari dokuemn HTML. Teks antara dan adalah informasi header. Informasi header tidak ditampilkan pada window browser. Hanya teks yang berada diantara dan yang akan ditampilakan pada browser. Teks diantara dan adalah judul dokumen yang akan ditampilkan pada window caption.

Gambar 2.1 Hasil di Browser

Penggunaan Tag Tag HTML diapit dengan dua karakter kurung bersudut, < dan >. Tag HTML secara normal selalu berpasangan seperti dengan Tag HTML tidak case sensitive, berarti dama dengan Atribut TagTag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. Tag berikut tidak mempunyai atribut : . Tag ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna putih.2.7.1 Tag HTMLMerupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan keharusan untuk membuat dokumen HTML.Tag sebagai pembuka dokumen HTML dan tag sebagai penutup dokumen HTML. Contoh Listing 2.2:

........................

2.7.2 Tag HeadMerupakan tag setelah untuk menuliskan keterangan tentang dokumen HTML. Isi teks diantara dengan tidak akan ditampilkan di dalam browser.Contoh Listing 2.3:

Belajar Web Design

2.7.3 TitleMerupakan tag yang digunakan untuk menuliskan judul dokumen HTML. Hasil tag ini akan ditampilkan dalam window caption browser.Contoh Listing 2.4:Belajar Web Design HTML

2.7.4 BodyMerupakan section dalam dokumen HTML yang akan ditampilkan dalam browser.Contoh Listing 2.5:

Belajar Web Design

ini adalah section HTML yang ditampilkan di browser

BAB IIIFORMATTING (HTML)Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal, miring, digarisbawahi,dll.Pemformatan Teks Menebalkan huruf (bold) Memiringkan huruf (italic) Digarisbawahi Mengecilkan huruf Superscript SubscriptContoh Listing 3.1.1: formatteks.html

Format Teks

Tulisan ini ditebalkan (bold)Tulisan ini ditebalkan (strong) Tulisan ini miring (emphasize) Tulisan ini besar (big)Tulisan ini miring (italic) Tulisan ini subscript Tulisan ini superscript

Gambar 3.1. Contoh formatteks.html

Teks PreformatTag dan dapat kita gunakan untuk menampilkan sesuai dengan dokumen web tersebut dalam editor teks.Contoh Listing 3.2.1 : pre.html

Tag Preformatted

This section provides a brief overview of the menus in Dreamweaver.The File menu and Edit menu contain the standard menu items forFile and Edit.menus, such as New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo

Ini adalahpreformatted text.Menampilkan spasiDan line break apa adanya.

Tag PRE cocok digunakan untuk menampilkan kode bahasa pemrograman komputer :

for i = 1 to 10 print inext i

Gambar 3.2 Contoh pre

QuotationTag digunakan untuk membuat sebagian teks yang dikutip sebagai suatu blok sendiri. Kebanyakan browser umumnya menggunakan margin untuk kutipan teks tadi untuk memisahkan dari teks yang mengelilinginya.Contoh Listing 3.3.1 : quotation.html

quotation

tulisan ini BUKAN quotation

tulisan ini adalah quotation

Gambar 3.3 Contoh qoutation

ParagrafSetiap paragraf harus dimulai dengan memberi tag . Diakhir paragraf tidak diharuskan menuliskan sebagai akhir paragraf, karena tag tidak didefinisikan mempunyai tag akhir. Setiap paragraf harus dimulai dengan kembali. Setiap pergantian paragraf ditandai dengan tag Contoh - Listing 3.4.1: paragraf2.html

Paragraf

Pada tahun 1950-an Kolonel Sanders (pendiri KFC) mulai mengendarai mobilnya dari kota ke kota untuk memulai bisnis KFC-nya, dengan cara menawarkan resep rahasianya dari satu restoran ke restoran yang lainnya. Kadang beliau tidur di dalam mobilnya dan memakan ayam buatannya sendiri untuk bisa bertahan. Dia baru dapat mencapai tujuannya setelah bertemu dengan orang yang ke-1010. Orang tersebut berpikir ayam Kolonel tersebut cukup bagus untuk di jual ke publik

Contoh lainnya Thomas Alfa Edison yang mengalami kegagalan sebanyak 9000 kali sebelum akhirnya ia menemukan bola lampu. Dia tidak menyesal dengan kegagalan-kegagalannya, bahkan ia berkata beruntung menemukan 8999 cara yang salah dalam membuat bola lampu. Kemudian ia dapat membuat 1093 paten, orang yang paling banyak memegang paten dalam sejarah Amerika

Gambar 3.4 Contoh hasil paragraf2.html

Line BreakKita dapat memaksa ganti baris pada dokumen web dengan tag
. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf.Contoh Listing 3.5.1:

Ganti Baris

ini adalah baris ke 1

HeadingTag heading aklan membuat tulisan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading dimanfaatkan untuk menandai judul topic atau untuk menunjukkan tingkat keberartian dati teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar.Contoh Listing 3.6.1:

Heading

Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

Gambar 3.5 Contoh heading

Garis PembatasSebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag AtributKeterangan

AlignMenentukan letak garis : center,left,right

ColorMenentukan warna garis

SizeMenentukan ukuran garis

WidthMenentukan tebal garis

Contoh Listing 3.7.1:

Horizontal Rule

Paragraf pertama

Paragraf keduapertama

Gambar 3.6 Garis Pembatas

KomentarDalam sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. Untuk membuat komentar dengan menggunakan tag: sebagai akhir komentar.Contoh Listing 3.8.1:

Horizontal Rule

Tulisan ini akan ditampilkan di browser

List ItemList item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Contoh: Kita mau mengelompokkan data-data berikut : Pisang, Jambu, Apel, Anggur dapat kita kelompokkan ke dalam kelompok: Buah-buahan.a. Ordered ListUntuk membuat list terurut nomor (ordered list), kita gunakan tag pembuka

dan penutup

, sedangkan untuk mendata setiap itemnya menggunakan tag sebagai pembuka dan sebagai penutup.ol kependekan dari Ordered List, li kependekan dari List Item.Contoh Listing 3.9.1: orderedlist1.html

Ordered List

Daftar Hari :

Selasa

Jum'at

Minggu

Daftar Kuliah :

Web Design

Pemrograman web

Database

Nomor item ordered list secara default menggunakan angka 1,2,3,.dst.Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag

.

Gambar 3.7. Contoh hasil list

Atribut type pada tag

:TypeArti

IAngka ditampilkan dengan angka romawi huruf besar

iAngka ditampilkan dengan angka romawi huruf kecil

AAngka ditampilkan dengan abjad huruf besar

aAngka ditampilkan dengan abjad huruf kecil

Contoh - Listing 3.9.2 : orderedlist2.html

Ordered List

Daftar Hari :

Senin

Selasa

Rabu

Kamis

Jum'at

Sabtu

Minggu

Daftar Kuliah :

Web Design

Pemrograman web

Database

Gambar 3.8 Contoh hasil list

b. Unordered ListUntuk membuat list tidak terurut nomor (Unordered List), kita gunakan tag pembuka

dan penutup

, sedangkan untuk mendata setiap itemnya menggunakan tag sebagai pembuka dan sebagai penutup.ul kependekan dari Unordered List, li kependekan dari List ItemItem unordered list secara default mengunakan noktah.Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag

.Atribut type pada tag

:TypeArti

CircleBullet Lingkaran

DiscBullet Titik

SquareBullet Kotak

Contoh Listing 3.9.4: unorderedlist2.html

Unordered List

Daftar Hari :

Senin

Selasa

Rabu

Kamis

Jum'at

Sabtu

Minggu

Keterangan : unordered list dengan type = circle.

Gambar 3.9 Contoh hasil pengaturan bullet

c. Nested ListList item dapat digunakan secara bersarang, maksudnya di dalam list ada list item lagi.Contoh Listing 3.9.5 : nestedlist.html

Nested List

Semangka

Melati

Anggrek

Kendaraan

Sepeda Motor

Gambar 3.10 Contoh hasil nested list

d. Definition ListDefinition List terdiri diapit oleh tag dan tag menentukan definition term serta tag menentukan definition itu sendiriContoh - Listing 3.9.6 : definitionlist.html

Definition List

Contoh Definition List

Web Design Belajar HTML - Macromedia Dreamweaver Pemrograman Web Belajar PHP MySQL

Gambar 3.11 Contoh hasil definition list

e. Tag-tag List HTMLTag AwalKeterangan

Mendefinisikan Ordered List

Status Bar. Untuk lebih memahami kegunaan status bar, bisa praktekkan sbb:1) Buat dokumen baru, dengan memilih menu File > New... (shorcut keyboard: Ctrl+N). Akan keluar dialog seperti gambar 7.5, isikan nilai2nya seperti pada gambar 1.5 dan kemudian klik tombol Ok.2) Tahan tombol Alt, kemudian klik kiri pada status bar, akan terlihat keterangan dokumen image yang sedang aktif.3) Apabila kita perhatikan gambar 7.6, Paint Bucket Tool kebetulan sedang aktif, dan pada status bar nya terdapat juga keterangan dari tool tersebut. Untuk jelasnya silakan baca pada keterangan gambar yang ada di bawah gambar 7.6.

Gambar 7.5 Pembuatan dokumen baru

Gambar 7.6 Pembukaan dokumen baru

Keterangan:A. Skala tampilan pada kanvas (view area image) (gambar 7.6.G), pada gambar menunjukkan skala ampilan adalah 100%B. Paint Bucket Tool pada toolbox sedang aktifC. Informasi/Keterangan tentang dokumen yang sedang aktif di kanvas (view area image).D. Informasi/Keterangan tentang dokumen yang sedang aktif di kanvas (view area image). Untuk menampilkan, tekan Alt+Klik atau Ctrl+Klik pada (gambar 7.6.C) .E. Digunakan untuk mengubah informasi/keterangan pada (gambar 7.6.C)F. Penjelasan singkat mengenai tool yang sedang aktif (pada contoh ini Paint Bucket Tool)G. View area image atau kanvas, merupakan area dokumen image yang sedang kita edit.

7.1.5 PalettePalette Photoshop berguna untuk memudahkan dalam navigasi maupun editing image. Untuk menyembunyikan/menampilkan palette, digunakan menu Window, kemudian pilih palette yang ingin disembunyikan/ditampilkan.7.1.6 Palette WellPalette well digunakan untuk memudahkan dalam pengaturan palette. Namun palette well hanya tersedia jika resolusi layar lebih besar dari 800 x 600 (resolusi minimal yang disarankan adalah 1024 x 768). Apabila suatu palette diletakkan di palette well, maka palette akan bersifat tersembunyi. Ketika title dari palette diklik, barulah palette akan ditampilkan. Jika area di luar palette di klik, maka palette tersebut akan tersembunyi kembali.Untuk menyimpan palette ke dalam palette well, seret (drag) tab palette ke dalam palette well hingga palette well ter-highlight.(Gambar 7.7, memperlihatkan palette tab navigator di-drag ke palette well)

Gambar 7.7 Palette Well

ToolboxBerikut ini akan dijelaskan mengenai fungsi dari masing-masing tools yang terdapat pada toolbox Adobe Photoshop 8.0. Untuk cara penggunaan lebih detil masing-masing tools akan dijelaskan secara terpisah pada bagian selanjutnya.

Gambar 7.8. ToolboxKeterangan:A. Marquee toolB. Move toolC. Lasso toolD. Magic Wand toolE. Crop toolF. Slice toolG. Patch toolH. Brush toolI. Stamp toolJ. History Brush toolK. Eraser toolL. Paint Bucket toolM. Sharpen toolN. Burn toolO. Path Selection toolP. Type toolQ. Pen toolR. Custom Shape toolS. Notes toolT. Eyedropper toolU. Hand toolV. Zoom tool

7.2.1 Marquee ToolRectangular Marquee (Shortcut keyboard: M, atau Shift + M) untuk membuat area selection berbentuk segi empat.pada gambar.

Elliptical Marquee (Shortcut keyboard: M, atau Shift + M) untuk membuat area selection berbentuk elips atau lingkaran pada gambar.

Single Row Marquee untuk membuat area selection satu baris pada gambar (ukuran tinggi selection adalah 1 pixel)

Single Column Marquee untuk membuat area selection satu kolom pada gambar (ukuran lebar selectionadalah 1 pixel).

7.2.2 Move Tool(Shortcut keyboard: V) Digunakan untuk menggeser/memindah selection, layers, dan guides.

7.2.3 Lasoo Tool (Shortcut keyboard: L, atau Shift + L untuk mengubah jenis Lasoo)Lasoo digunakan untuk membuat area selection dengan bentuk bebas

Polygonal Lasoo digunakan untuk membuat area selection berbentuk poligon

Magnetic Lasoo digunakan untuk membuat area selection dengan cara menempelkan tepi selection pada area tertentu pada image.

7.2.4 Magic Wand Tool(Shortcut keyboard: W) Digunakan untuk membuat area selection yang memiliki warna serupa. Perbedaan toleransi warna dapat diatur pada tool option bar.

7.2.5 Crop Tool(Shortcut keyboard: C) Digunakan untuk memangkas image (memotong dan membuang area tertentu dari image)

7.2.6 Slice Tool(Shortcut keyboard: K, atau Shift + K untuk mengubah jenis slice)Slice Tool digunakan untuk membuat potongan-potongan gambar dari suatu gambar

Slice Select Tool digunakan untuk memilih potongan pada suatu gambar

7.2.7 Healing Brush, Patch, Color Replacement Tool (Shortcut keyboard: J, atau Shift + J mengubah tool)Patch Tool digunakan untuk mengecat/melukis pada area tertentu gambar dengan pola (pattern) atau sample tertentu. Cocok untuk memberbaiki gambar yang rusak.

Healing Brush Tool digunakan untuk mengecat/melukis gambar dengan pola atau sample tertentu. Cocok untuk memperbaiki gambar yang agak rusak.

Color Replacement Tool digunakan untuk mengecat/mewarnai gambar dengan pola warna tertentu.

7.2.8 Brush, Pencil Tool(Shortcut keyboard: B, atau Shift + B untuk mengubah tool)Brush Tool digunakan untuk melukis gambar dengan goresan kuas

Pencil Tool digunakan untuk melukis gambar dengan goresan pencil

7.2.9 Stamp Tool (Shortcut keyboard: S, atau Shift + S untuk mengubah jenis stamp)Clone Stamp Tool digunakan untuk melukis gambar dengan sample image tertentu

Pattern Stamp Tool digunakan untuk melukis gambar dengan menggunakan pola tertentu

7.2.10 History Brush Tool (Shortcut keyboard: Y, atau Shift + Y untuk mengubah jenis)History Brush Tool digunakan untuk melukis gambar menggunakan snapshot atau state history dari gambar 2.

Art History Tool digunakan untuk melukis gambar menggunakan snapshot atau state history dari gambar, dengan model artistik tertentu.

7.2.11 Eraser Tool (Shortcut keyboard: E, atau Shift + E untuk mengubah jenis eraser)Eraser digunakan untuk menghapus pixel gambar dan mengembalikannya ke state tertentu.

Background Eraser digunakan untuk menghapus area tertentu gambar menjadi transparan.

Magic Eraser digunakan untuk menghapus area tertentu gambar yang memiliki warna yang serupa menjadi transparan dengan satu kali klik.

7.2.12 Paint Bucket, Gradient Tool (Shortcut keyboard: G, atau Shift + G)Paint Bucket Tool digunakan untuk mengecat area yang dipilih dengan warna foreground atau pola tertentu.

Gradient Tool digunakan untuk mengecat area yang dipilih (selected area) dengan perpaduan banyak warna.

7.2.13 Blur, Sharpen, Sharpen Tool (Shortcut keyboard: R, atau Shift + R)Blur Tool digunakan untuk menghaluskan/mengaburkan area tertentu pada gambar.

Sharpen Tool digunakan untuk menajamkan area tertentu pada gambar.

Smudge Tool digunakan untuk menggosok/mencoreng area tertentu pada gambar

7.2.14 Dodge, Burn, Sponge Tool (Shortcut keyboard: O, atau Shift + O)Dodge Tool digunakan untuk menerangkan warna di area tertentu pada gambar

Burn Tool digunakan untuk menggelapkan warna di area tertentu pada gambar

Sponge Tool digunakan untuk mengubah saturation di area tertentu pada gambar

7.2.15 Path Selection Tool (Shortcut keyboard: A, atau Shift + A untuk mengubah jenis)Path Selection Tool digunakan untuk melakukan selection path

Direct Selection Tool digunakan untuk mengubah anchor dan direction point dari path.

7.2.16 Type tool(Shortcut keyboard: T, atau Shift + T untuk mengubah jenis)Horizontal Type Tool digunakan untuk membuat tulisan secara horizontal

Vertical Type Tool digunakan untuk membuat tulisan secara vertikal

Horizontal Type Mask Tool digunakan untuk membuat selection berbentuk tulisan secara horizontal

Vertical Type Mask Tool digunakan untuk membuat selection berbentuk tulisan secara vertikal

7.2.17 Pen ToolPen Tool (Shortcut keyboard: P, atau Shift + P) digunakan untuk membuat path dengan lengkung-lengkung yang halus

Freeform Pen Tool (Shortcut keyboard: P, atau Shift + P) digunakan untuk membuat path berbentuk bebas

Add Anchor Point Tool digunakan untuk menambah anchor point pada path

Delete Anchor Point Tool digunakan untuk menghapus anchor point tertentu pada path

Convert Point Tool digunakan untuk mengubah anchor dan direction point tertentu pada path

7.2.18 Shape Tool (Shortcut keyboard: U, atau Shift + U untuk mengubah jenis)Rectangle Tool digunakan untuk menggambar bentuk segi empat

Rounded Rectangle Tool digunakan untuk menggambar segi empat melengkung

Ellipse Tool digunakan untuk menggambar ellipse

Polygon Tool digunakan untuk menggambar polygon

Line Tool digunakan untuk menggambar garis lurus

Custom Shape Tool digunakan untuk menggambar bentuk tertentu dari daftar bentuk yang dapat dipilih pada option bar

7.2.19 Notes Tool (Shortcut keyboard: N, atau Shift + N untuk mengubah jenis)Notes Tool digunakan untuk membuat catatan pada gambar

Audio AnnotationTool digunakan untuk membuat suara/audio pada gambar

7.2.20 Eyedropper, Measure Tool (Shortcut keyboard: I, atau Shift + I untuk mengubah jenis)Eyedropper Tool digunakan untuk mengambil sample warna pada gambar untuk warna foreground

Color Sampler Tool digunakan untuk mengambil berbagai sample warna pada gambar

Measure Tool digunakan untuk mengukur jarak atau sudut pada gambar

7.2.21 Hand Tool(Shortcut keyboard: H) Digunakan untuk menggeser/memindah bidang pandang gambar di dalam kanvas.

7.2.22 Zoom Tool(Shortcut keyboard: Z) Digunakan untuk memperbesar atau memperkecil tampilan gambar.

BAB VIIITEKS EFEK (PHOTOSHOP)Pada bab ini akan jelaskan contoh-contoh membuat efek teks dengan menggunakan aplikasi editor gambar photoshop.MEMBUAT FIRE BURNING TEKS EFEK Untuk memulai membuat tulisan berapi adalah mengikut langkah-langkah sebagai berikut :1. Buat document baru 800 x 600 Pixel2. Berikan warna Background hitam, kemudian buat teks hingga seperti gambar

Gambar 8.1 Gambar Awal3. Kemudian restireze teks dengan cara klik kanan pada layer teks dan pilih restireze, lihat gambar :

Gambar 8.2 Memilih Resterize Type

4. Kemudian berikan efek wind (Klik MenuFilter > Stylis > Wind),Atur sesuai gambar :

Gambar 8.3 Memilih Stylize dan MethodMaka hasilnya akan seperti ini:

Gambar 8.4 Hasil Stylize dan Method5. kemudian ulangi lagi efek wind ato bisa langsung tekan Ctrl + F 2x(untuk mengulangi efek yang terakhir digunakan).Sehingga hasilnya seperti ini :

Gambar 8.5 Hasil Efek Wind6. Berikan efek wind lagi ( ulangi langkah no 4 ) bedanya pada pengaturan direction (from the right dan from the lift).Hasilnya kira-kira seperti ini :

Gambar 8.6 Hasil efek wind7. Sekarang kita putar 90 cw ( klikedit > transfrom > rotate 90 derajat cw) seperti ini :

Gambar 8.7 Memilih 90 cw8. Nah sekarang kita kasih lagi efek wind (ulangi langkah 4 dan 5 ). Hasilnya:

Gambar 8.8 Hasil efek wind kedua9. kita rotate kembali agar kembali kesemula yaitu(KlikEdit> Transfrom > Rotate 90 derajat Ccw)

Gambar 8.9 Memilih 90 ccw10. Selanjutnya menambah efek apinya, sebelumnya kita ubah mode warna ke Grayscale ( klikimage > mode > grayscale), lalu kita ubah lagi ke indexed color ( klikimage > mode > indexed color),

Gambar 8.10 menambah 11. Terakhir kita sulut deh apinya dengan color table( KlikImage> Mode > Color Table), dan atur sesuai dengan gambar:

Gambar 8.11 Hasil Akhir

MEMBUAT TEKS EFEK FANTASTIC

Gambar 8.12 Teks Efek FantasticAdapun langkah-langkah untuk membuat Teks efek dengan fantastic seperti gambar digambar diatas adalah sebagai berikut :a. Langkah 1- Jalankan Program Photoshop, lebih baik jika anda menggunakan Photoshop yang versi CS (Creative Suite) karena akan lebih mudah. - Buat lembar kerja baru File -> New ->Ukuran kanvas 400 X 300 dan disini warna dari background adalah gunakan hexadecimal 03122f.b. Langkah 2- Ubah warna Foreground dengan0958d9dan Background dengan 03122f-Buat Layer baru Caranya: TekanShift + Ctrl + N-Akses Menu Utama Filter -> Render -> CloudsHasil

Gambar 8.13 Hasil render- Ubah Blending Mode ke"Color Dodge"c. Langkah 3- GunakanHorizontal Type Tool Pengaturan:

Gambar 8.14 Menu Menambah tulisanKemudian ketik : STAR LIGHTHasilnya :

Gambar 8.15 Menambah tulisan

Saatnya memberi effek Akses Menu Utama pilih:Layer -> Layer Style -> Outer Glow Kemudian klikInner GlowHasilnya :

Gambar 8.16 Hasil Langkah 3 dan setelah itu klik kananLayer Tekspada Layer Pallete dan pilihDuplicate Layer.d. Langkah 5 Akses Menu Utama pilihEdit -> Transform -> Flip VerticalKemudian gunakanMove Tooluntuk menggeser ke bawah tulisan yang di FLip tersebut.e. Langkah 6 Masuk ke Blending Option dan atur seperti ini

Hasilnya:

Gambar 8.17 Hasil Langkah 6

Filter -> Blur -> Glaussian Blur Atur Blur ke 1.1 Lalu OKf. Langkah 7 Gunakan Eraser Tool dan hapus separuh teks Hasilnya:

Gambar 8.18 Hasil Langkah 7 Duplicate Background Layer Caranya: Klik kanan background layer lalu pilih duplicate layer TambahkanLens Flare Caranya: Menu UtamaFilter -> Render -> Lens FlarePilih105mm PrimeHasilnya .Gambar 8.19 Hasil Render Langkah 7 Edit Lens Flare Caranya: Menu Utama Edit - Fade Lens FlareHasilnya

Gambar 8.20 Hasil Akhir

BAB IXMANIPULASI GAMBAR (PHOTOSHOP)Pada bab ini akan jelaskan contoh-contoh melakukan manipulasi gambar dengan menggunakan aplikasi editor gambar photoshop.Melakukan Resample Gambar Buka gambar, pilih sebuah file gambar

Gambar 9.1 Contoh gambar Pilih Image > Image size untuk menampilkan kotak dialog. Pilih kotak cek Resample Image untuk mengubah nilai resolution dan nilai Width dan Height. Ubah nilai Width dan Height. Klik OK.Mengubah Ukuran CetakJika ingin mengubah tampilan pada halaman, dan tidak ingin mengubah jumlah pixel pada halaman, ubah resolusi agar dapat mencetak gambar lebih besar atau lebih kecil tanpa menambah atau mengurangi satu pixelpun. Buka gambar Pilih Image > Size. Matikan resample image agar tidak ada pixel yang dipengaruhi pada saat mengubah ukuran gambar. Ubahlah setting ukuran output dengan memilih resolusi ideal pada table berikut ini. Klik OK.Tabel 9.1 Beberapa ukuran cetak standarPrinterResolusi IdealBatas MinimalBatas Maksimal

Print Laser 300 ppi120 ppi90 ppi150 ppi

Print Laser 600 ppi180 ppi135 ppi225 ppi

Newsprint180 ppi135 ppi225 ppi

Coated Magazine Stock267 ppi200 ppi330 ppi

Printer InkJet Warna300 ppi240 ppi400 ppi

Super-fine coated stock350 ppi260 ppi440 ppi

Memutar Canvas.Digunakan untuk menampilkan submenu yang berisikan pilihan untuk memutar atau membalik gambar. Berikut ini submenu dari Rotate canvas :- 180o : memutar gambar yang terbalik agar kembali pada kakinya, Alt + I, E, 1.- 90o CW : memutar gambar 90 derajat searah jarum jam, Alt + I, E, 9.- 90o CCW : memutar gambar 90 derajat berlawanan jarum jam, Alt + I, E, 0)- Arbiritary : meluruskan gambar.- Flip horizontal : memperbaiki teks yang terbalik (alt + I + E + H).- Flip vertikal : membalik bagian atas dan bawah gambar (alt + I, E, V) Gambar 9.2 Memutar gambar 180o, 90o CW dan 90o CCW

Memotong Detail Gambar Yang Tidak PerluTool Crop berfungsi untuk memotong sisa gambar atau elemen latar belakang yang tidak perlu. Klik Icon tool crop (tekan C) Gambar batas crop, geser di dalam jendela gambar untuk membuat sebuah segi empat di sekitar bagian gambar yang ingin dipertahankan Geser dalam batasan crop untuk memindahkannya. Geser tangkai untuk mengubah ukuran batasan gambar, tekan shift dan geser untuk mengubah ukurannya secara profesional. Geser di luar batas crop untuk menegakkan dan memotong gambar dalam satu operasi. Titik pemotongan akan menjadi titik pusat perputaran jika menggeser tangkai dengan alt atau option. Klik tanda cek pada baris pilihan, pilih Image-Crop-Klik ganda dalam batas crop tekan enter.

Gambar 9.3 Memotong Detail Gambar

Menambahkan copyright & URL.Cara lain menambahkan cap pribadi ke dalam gambar adalah dengan pernyataan hak cipta atau copyright. Pilih file info, pada PC tekan Alt+F lalu I. Ketikkan caption, pada field Caption ketikkan apa saja mulai dari satu kalimat hingga beberapa paragraf mengenai gambar anda. Masukkan pernyataan hak cipta, bentuk standar adalah simbol/tanggal/pemegang hak cipta, seperti misalnya 2014 Type & Graphics, Inc. Ketikkan URL, jika anda memiliki situs internet, ketikan alamatnya (dikenal dengan istilah Universal Resource Locator) pada kotak image URL. Ketikkan alamat lengkapnya, seperti : http://www.press.eeepis-its.edu. Klik OK, simpan gambar anda dalam format apa saja.Membuat Spesial Efek dengan PhotoshopPada bagian ini kita akan mengaplikasikan photoshop pada pembuatan efek khusus. Efek ini berguna untuk mempercantik gambar yang kita olah. Bukan itu saja, kita bisa menciptakan bermacam gambar digital yang unik. Kreativitas adalah kuncinya.Membuat Efek LukisanEfek lukisan sangat populer dan sering digunakan, karena merupakan trik yang ampuh sekaligus dapat membuat foto menjadi lebih artistik.Adapun langkah-langkahnya adalah :

Gambar 9.4 Gambar Hasil Efek Lukisan Buka Gambar Ubah layer background menjadi mode normal dengan klik ganda Klik : Filter > Artistik > Dry Bush Pada palet layer klik tombol : Add layer mask. Akan muncul ikon layer mask berwarna putih di samping kanan layer tumbnail pada palet layer. Klik layer mask, kemudian pilih menu : Image > Adjustment Invert atau tekan Crtll+I untuk menjadikan layer mask tersebut menjadi berwarna hitam. Pastikan warna foreground putih pada Toolbox dan klik Brush tool, pilih bentuk sapuan kuas yang diinginkan pada palet Brushes, agar lebih artistik pilih bentuk kuas dekokratif. Sapukan Tool dan hasil image akan muncul secara otomatis sesuai bentuk sapuan kuas. Tambahkan Filter > Texture > Texturize untuk memberi kesan kasar pada permukaannya.Membuat Efek Rintik HujanEfek rintik hujan sering digunakan untuk membuat efek pemandangan dan dapat membuat foto menjadi lebih artistik. Adapun langkah-langkahnya adalah :

Gambar 9.5 Gambar Hasil Efek Hujan Buka Gambar Klik : Filter > Noise > Add Noise. Dalam kotak dialog Add Noise masukkan nilai Amount sesuai kebutuhan, antara 100 hingga 400% tergantung seberapa banyak efek hujan yang akan diterapkan. Pada menu distribution pilih Gaussian, aktifkan kotak cek Monochrome. Klik OK Tambahkan : Filter > Blur > Motion Blur, masukkan angle antara 50 hingga 65 derajat, Distance antara 20 hingga 60px. Klik OK

Menggunakan MaskingMask berguna untuk menyembunyikan sementara sebagian area pada layer. Teknik ini berguna saat kita menggabungkan beberapa elemen image dalam komposisi disain. Kita dapat menghapus sebagian area image yang tidak diinginkan tanpa kehilangan image aslinya, dengan layer ini kita juga bisa membuat efek gradasi. Adapun langkah-langkahnya adalah : Klik : Select > Deselect atau tekan Crtl+D untuk menghilangkan seleksi area pada image Pada palet layer, pilih layer yang akan kita tambahkan mask Untuk membuat mask dengan menampilkan keseluruhan bagian layer, klik tombol New Layer Mask pada palet layer atau pilih Layer > Add Layer Mask > Reveal All Untuk membuat mask dengan menyembunyikan keseluruhan bagian layer, Alt+Klik tombol New Layer Mask atau pilih Layer > Add Layer Mask > Hide All Untuk membuat mask dengan menampilkan bentuk seleksi setelah membuat seleksi, klik tombol New Layer Mask Untuk mengedit Layer Mask, pilih Brush Tool, gunakan warna foreground putih untuk mengurangi area mask, hitam untuk menambah area mask, dan abu-abu untuk membuat mask transparan

Gambar 9.6 Gambar Hasil Masking

9.12 MEMANIPULASI IMAGE DENGAN SELECTION TOOLSSeleksi juga mampu memanipulasi gambar yang sudah ada sehingga menjadi sesuai dengan yang kita inginkan. berikut ini beberapa hal yang bisa dilakukan oleh seleksi. 9.14.1 Menduplikat ImageGambar yang telah diseleksi bisa dikopi dan ditempel sebanyak yang kita suka atau ditempelkan ke gambar yang lain. Caranya bagian gambar yang telah diseleksi dikopi dengan memilih menu Edit > Copy. Kemudian tempel di gambar tersebut atau di gambar lain dengan memilih menu Edit > Paste.

Gambar 9.7 Menduplikat Image

9.14.2 Memotong ImageSeleksi juga bisa kita gunakan untuk memotong. Jadi hanya bagian yang diseleksi yang akan hilang. Caranya dengan menekan keyboard delete atau memilih menu Edit > Cut. 9.14.3 Mengkopi Image ke Image yang lainUntuk mengkopi gambar yang diseleksi ke gambar lain bisa dilakukan dengan cara didrag lalu dimasukkan ke dalam gambar lain. Caranya buat seleksi untuk gambar yang akan dikopi, lalu buka file gambar yang akan ditempel oleh gambar yang telah diseleksi tersebut. Letakkan kedua gambar berdampingan agar pada saat mendragnya lebih mudah. Lalu drag gambar yang diseleksi dengan menggunakan move tool menuju gambar yang kedua. Atur posisinya agar sesuai.

BAB XPENGENALAN DASAR CSSPengertian CSSCascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen HTML. CSS memungkinkan kita untuk mengatur tampilan dari banyak dokumen html dengan satu file serta untuk merubah tampilan dari banyak dokumen html tersebut secara cepat dan praktis.Sederhanya CSS merupakan kumpulan dari tag html yang kita buat kedalam satu file dan dengan metode penulisan tersendiri yang telah distandarisasi oleh W3C (World Wide Web Consortium).10.1 Manfaat CSSSeperti yang telah kita ketahui dengan tag html pun kita telah bisa mengatur tampilan halaman html tersebut dan mengapa harus menggunakan CSS lagi? Banyak manfaat jika kita mengatur tampilan menggunakan CSS.Bayangkan jika anda misalnya ingin mengganti warna font di web/blog anda, tentu saja anda harus mengedit lagi satu persatu file html dari web/blog tersebut. dan bagaimana jika filenya berjumlah puluhan bahkan ratusan? pasti akan banyak memakan waktu dan tenaga. Dengan CSS kode HTML menjadi lebih sederhana dan lebih mudah diatur.10.2 Cara Menggunakan CSSAda tiga cara penempatan kode CSS dalam HTML, yaitu :A. Internal CSSYaitu menuliskan secara langsung script CSS kedalam file HTML.Contoh :

CSS Pertamaku

p {color: white;}body {background-color: black;}

Ayo belajar CSS

Keterangan : yang berwarna biru adalah script CSSB. External CSSExternal CSS adalah kita membuat file CSS tersendiri dengan eksistensi *.css dan terpisah dari file html dan didtempatkan di folder lain atau di folder yang sama dengan file html tersebut. browser akan menbaca file tersebut dan akan menampilkan file html sesuai dengan format yang telah kita atur dalam file CSS.Contoh :

CSS Pertamaku

Ayo belajar CSS

Keterangan : yang berwarna biru adalah lokasi dari file CSSC. Inline CSSYaitu menuliskan secara langsung script CSS kedalam tag HTML.Contoh :

CSS Pertamaku

Ayo belajar CSS

Keterangan : yang berwarna biru adalah script CSSDari ketiga cara di atas saya menganjurkan anda untuk menggunakan Eksternal CSS.Sintaks CSSDalam menuliskan tag CSS maka terdapat sedikit perbedaan dalam aturan penulisan dengan tag HTML. jika dalam HTML kita akan memformat suatu komponen maka kita gunakan tag dan atribut. contohnya jika kita ingin memformat paragraf menggunakan align (perataan kanan kiri) maka kita menggunakan sintaks berikut . p adalah tag dan align=center adalah atributnya.Sedangkan jika menggunakan CSS, sintaks yang kita gunakan adalah Selector, Property dan ValuePenulisan kode CSS dibuat menjadi tiga bagian, yaitu:selector { property1: value; property2:value; dst} SelectorSelector pada CSS sama dengan tag atau komponen pada HTML yaitu yang terdapat antara tanda < dan tanda > misalnya , ,

dll. PropertySelector pada CSS sama dengan atribut pada HTML yaitu. berfungsi untuk memberi nilai dari selector. ValueValue adalah nilai yang kita berikan kepada propertyContoh :Jika di HTML kita memformat paragraf dengan maka dengan CSS menjadi p {text-align: right;}Keterangan : p adalah selector dan text-align adalah property, right; adalah value atau nilai dari property. jika di HTML kita menggunakan tanda tetapi pada CSS kita menggunakan tanda {} p dalam CSS tidak terdapat dalam tanda { dan tanda } tetapi sebelum tanda tersebut. Jika dalam HTML untuk menunjukan Value atau nilai dari atribut kita menggunakan sama dengan (=) sedangkan dalam CSS untuk menunjukan value atau nilai dari property kita menggunakan tanda titik dua (:). setelah memberi value di CSS, kita harus menambahkan tanda titik koma (;) di belakangnya. Jika selector lebih dari satu dan memiliki property dan value yang sama maka gunakan tanda koma (,)Class dan ID Class SelectorDengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalnya dua type paragraf, peragraf pertama menggunakan align-left dan yang paragraf satu lagi menggunakan align-center.Contoh Penggunaan atribut class di dalam HTML :Paragraf ini rata kiriparagraf ini rata tengahmaka penulisan pada file CSS-nya menjadi :.left {text-align: left}.center {text-align: center}Keterangan : Pada penulisan nama class dalam file CSS diawali dengan tanda titik (.) Tidak dianjurkan memberi nama class dengan angka Nama class tidak boleh menggunakan spasi, jika nama class lebih dari dua suku kata maka berikan tanda hubung (-) atau (_) ID SelectorID selector digunakan dengan tujuan mendefinisikan per-elemen dasar. setiap halaman id selector hanya boleh digunakan dengan satu id unik, itulah yang menjadi perbedaannya dengan class selector. Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. tetapi dengan id selector kita hanya diperbolehkan memanggil satu id untuk satu elemen yang sama.Contoh:Paragraf ini ditulis dengan huruf tebal dan warna merahParagraf ini ditulis dengan huruf miring dan warna birumaka penulisan pada file CSS-nya menjadi :#tebal { font-weight : bold;color : red; }#miring { font-style : italic;color: blue; }Keterangan : Pada penulisan nama id dalam file CSS diawali dengan tanda pagar (#) Nama id dapat ditulis dengan angka, huruf atau garis bawah Karakter pertama sebaiknya huruf atau garis bawah (_)Penulisan Komentar Dalam CSSDalam pemograman kita mengenal istilah komentar yaitu bermanfaat untuk memberi penjelasan pada bagian tertentu dari kode yang kita tulis. dan tulisan ini tidak akan ikut dieksekusi oleh browser.Cara memberi komentar pada CSS adalah diawali tanda /* dan di akhiri tanda */Contoh :.left {text-align: left}.center {text-align: center}/*ini adalah komentar*/BAB XIPROPERTY & VALUE SELECTOR [CSS]Setelah pada bab sebelumnya dijelaskan konsep dasar css beserta cara menggunakan kode CSS maka bab ini akan dijelaskan macam-macam property dan value selector pada CSS. Pengaturan Warna (Color)Berikut adalah bentuk syntax untuk pengaturan warna:Selector {color: value}Nilai/value color dapat berupa kode hexadecimal(#ff0000), nama warna dalam bahasa Inggris ("red") ataupun berupa nilai rgb (rgb(255,0,0)).Names of the colorsrgb-valueshexadecimal valuesRed255,0,0#FF0000Yellow255,255,0#FFFF00Green0,128,0#008000Blue0,0,255#0000FFWhite255,255,255#FFFFFFh1 { color: #FF0000; }/* Menggunakan bentuk hexadecimal */pre { color: rgb(0,0,255); }/* Menggunakan bentuk RGB (0-255) */p { color: blue; }/* Menggunakan bentuk nama warna */Contoh:Pengaturan Background Halaman WebDi dalam pembuatan background, CSS menggunakan property background yang diletakkan di dalam selector body, tidak hanya itu juga, Anda juga dapat menggunakan property-property background yang berkaitan dengan gambar. Berikut adalah penggunaan property yang digunakan dalam pengaturan background: background-color background-image background-repeat background-attachment background-positiona) background-colorElemen memuat semua content pada sebuah dokumen HTML. Sehingga, untuk mengubah warna latarbelakang pada halaman web, property background-color harus digunakan pada elemen .Untuk dapat memberlakukan background-color pada elemen-elemen lain, seperti contoh dibawah berikut background-color digunakan pada elemen dan :body {background-color: #FFCC66;}h1 {color: #990000;background-color: #FC9804;} b) background-imageDengan Property CSS background-image kita dapat menggunakan gambar butterfly.gif sebagai latar belakang halaman web. butterfly.gifPada contoh background-image ini digunakan file gambar butterfly.gif. Bila ingin melakukan pengaturan background berupa gambar pada halaman web, maka selector yang digunakan adalah body, serta harus menetapkan lokasi dari image/gambar itu sendiri.body { background-color: #FFCC66;background-image: url(butterfly.gif);}c) background-repeatPada contoh diatas, halaman web akan tertutupi oleh gambar butterfly yang diulang-ulang (repeat) baik secara horizontal maupun vertikal. Dengan menggunakan property background-repeat kita dapat menampilkan gambar satu kali dalam satu halaman web. Tabel berikut ini menampilkan empat macam value pada property background-repeat.ValueDescriptionbackground-repeat: repeat-xThe image is repeated horizontallybackground-repeat: repeat-yThe image is repeated verticallybackground-repeat: repeatThe image is repeated both horizontally and verticallybackground-repeat: no-repeatThe image is not repeatedBerikut adalah contoh implementasi, penggunaan value no-repeat untuk menghilangkan pengulangan gambar background: body { background-color: #FFCC66;background-image: url(butterfly.gif); background-repeat: no-repeat;}d) background-attachmentAttachment adalah cara peletakkan background berdasarkan kondisi halaman. Dengan menggunakan teknik ini Anda dapat menciptakan gambar background yang selalu ditampilkan ditengah halaman walaupun halaman telah digulung (scroll) ke bawah. Tabel dibawah ini menampilkan dua buah value pada property background-attachment.ValueDescriptionbackground-attachment: scrollThe image scrolls with the page - unlockedbackground-attachment: fixedThe image is lockedBerikut adalah contoh implementasi penggunaan value fixed, yang akan membuat gambar tetap berada pada satu posisi:body { background-color: #FFCC66;background-image: url(butterfly.gif); background-repeat: no-repeat;background-attachment: fixed;}e) background-positionSecara default, sebuah gambar background akan berada pada posisi kiri atas pada layar. Property background-position dapat digunakan untuk mengubah posisi default ini. Terdapat beberapa cara untuk menge-set nilai pada property background-position. Contohnya, posisi dengan value 100px 200px, berarti posisi background image adalah 100px dari kiri dan 200px dari sisi atas, pada browser. Koordinat dapat berupa persentase dari jendela browser, ataupun nilai fixed units (contohnya dapat berupa pixels, centimetres) atau Anda pun dapat menggunakan kata top, bottom, center, left dan right.Tabel berikut menampilkan nilai yang digunakan pada property background-position:ValueDescriptiontop leftAtas kiri halamantop centerAtas tengah halamantop rightAtas kanan halamancenter leftTengah kiri halamancenter centerPusat halamancenter rightTengah kanan halamanbottom leftBawah kiri halamanbottom centerBawah tengah halamanbottom rightBawah kanan halamanx-% y-%Menggunakan nilai persenBerikut ini adalah contoh penggunaan value pada property background-position:ValueDescriptionbackground-position: 2cm 2cmThe image is positioned 2 cm from the left and 2 cm down the pagebackground-position: 50% 25%The image is centrally positioned and one fourth down the pagebackground-position: top rightThe image is positioned in the top-right corner of the pageSyntax CSS berikut adalah contoh untuk setting background image dengan posisi bawah kanan halaman:body { background-color: #FFCC66;background-image: url(butterfly.gif); background-repeat: no-repeat;background-attachment: fixed;background-position: bottom right;}12.2 Susunan Penulisan BackgroundPenggunaan property background dapat memperpendek penulisan beberapa property, sehingga memudahkan pembacaan. Perhatikan contoh berikut dibawah!.body { background-color: #FFCC66;background-image: url(butterfly.gif); background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;}Dengan menggunakan background kita mendapat hasil yang sama, hanya dengan penulisan satu baris:background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;Susunannya adalah sebagai berikut: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]Jika nilai sebuah property tidak ditetapkan, maka secara otomatis akan di set pada nilai default nya. Berikut ini adalah contoh jika nilai pada property background-attachment dan background-position tidak ditetapkan:background: #FFCC66 url("butterfly.gif") no-repeat;Maka nilai dari property akan diset dengan nilai default nya, yaitu scroll dan kiri atas.Tag elemen untuk membuat List di dalam dokumen HTML adalah: digunakan untuk list yang tidak berurutan (unordered list) kemudian, digunakan untuk list yang berurutan kemudian diikuti adalah list menu yang akan ditampilkan (list item).Untuk lebih jelasnya perhatikan contoh berikut ini:Menu A Menu B Menu C Hasil yang akan ditampilkan di browser: Menu A Menu B Menu CMenu A Menu B Menu C Hasil yang akan ditampilkan di browser:1. Menu A2. Menu B3. Menu CDidalam CSS ada beberapa perintah untuk mengontrol tampilan dari list style, diantaranya adalah:1. List Style ImageKita dapat menggunakan sebuah image yang digunakan sebagai penanda item pada lists dengan menggunakan property list-style-image. Berikut adalah syntax penulisannya:list-style-image: url(path_to_image.gif, jpg or png);Value: url none2. List Style PositionDengan menggunakan property list-style-position kita dapat memposisikan list item.list-style-position: value;Values: inside outside3. List Style TypeDengan menggunakan property list-style-type kita bisa menentukan tipe penanda dari sebuah list item.list-style-type: value;Values: none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-irohaNote: Pada beberapa jenis browser, halaman web mungkin ditampilkan berbeda, tergantung jenis browser yang digunakan (pada praktikum ini, direkomendasikan menggunakan browser Firefox).11.4 HyperlinkHyperlink atau juga sering disebut dengan Link adalah salah satu metode yang dibuat dalam web site untuk memperkaya informasi yang ditampilkan, karena akan dapat menciptakan beberapa hubungan dari web yang kita bangun menuju web-web yang ada diluar. Selain itu juga akan lebih memperkaya informasi yang akan ditampilkan di dalam halaman web. Di dalam web HTML, tag yang digunakan untuk menciptakan link adalah sebagai berikut: ...Pemicu Pada Tag diatas Anda dapat memasukkan file yang akan dijadikan target link pada attribut href, sedangkan pemicu merupakan kata pemicu yang digunakan atau dapat dimasukkan berupa gambar sebagai pemicunya. Untuk melakukan pengaturan Link, HTML menyediakan atribut sebagai berikut:AtributKeteranganlinkKeadaan awal pemicu linkvlinkKeadaan pemicu link setelah dikunjungialinkKeadaan pemicu link yang aktifBerikut adalah contoh pengaturan standar pada halaman web HTML menggunkan nilai alink, link, dan vlink. Pengaturan pada link Mesin pencari Google Anda dapat mempergunakan CSS untuk mengatur warna hypertext link, dengan warna yang berbeda untuk link yang belum pernah anda akses, link yang pernah anda akses dan link yang akan kemudian anda akses serta link yang aktif. Anda bahkan dapat mengatur warnanya pada saat kursor mouse berada diatas daerah yang akan dilink. Berikut adalah atribut yang digunakan untuk melakukan pengaturan Link:SelectorKeterangana:linkUntuk warna link yang belum diakses a:visitedUntuk warna link yang telah diaksesa:activeUntuk warna link ketika link diklika:hoverUntuk warna link ketika mouse berada diatasnyaBerikut adalah syntax penulisan pada CSS:a:link { property: value }a:visited{ property: value }a:active { property: value }a:hover { property: value }Apabila menggunakan class selector, syntaxnya menjadi:a.class:link { property: value }a.class:visited{ property: value }a.class:active { property: value }a.class:hover { property: value }Dari syntax diatas, Anda dapat menggunakan semua property yang berkaitan dengan pengaturan teks, font, background maupun border.Kebanyakan orang ketika mereka melihat garis bawah dibawah sebuah link selalu mengira itu adalah bagian teks yang diberi link. Umumnya orang memberikan warna biru pada teks yang diberi link ke halaman atau alamat internet lain. Anda disarankan untuk meninggalkan warna link ini apabila warna latar belakang menyebabkan teks anda yang diberi link jadi sulit terbaca. Berikut ini adalah pilihan formatting yang umum digunakan pada link: color text-decoration font-weight font-style font-family font-size background-colorTabel telah lama kita kenal sebagai tag yang dipergunakan untuk membuat layout sebuah Web. Karena kemudahannya, penggunaan tabel lebih disukai untuk membuat layout situs menggunakan WYSIWYG Editor seperti Dreamweaver atau Frontpage.Fakta Menggunakan Tabel:1) Lebih mudah untuk digunakan dibandingkan dengan CSS Layout2) Proses desain layout tabel lebih mudah menggunakan editor WYSIWYG seperti Dreamweaver atau Frontpage3) Tabel dapat rusak dalam beberapa browser yang biasa kita gunakan, yang menyebabkan disfungsi dalam layout.4) Meningkatkan jumlah tag HTML yang tidak perlu, hingga akan menaikan ukuran file.Kini, tabel telah digunakan pada banyak halaman Web yang online di internet, yaitu sekitar 95% menggunakan tabel untuk layouting. Biasanya, kita mendapati tabel pada situs-situs dengan konten yang berat seperti situs Portal, atau pada situs yang lebih sederhana seperti pada situs-situs perusahaan korporat atau pendidikan.Dari sekian banyak isu dari penggunaan tabel, yang paling mengancam adalah mengenai kompabilitas browser baik itu bagi pengguna mapun bagi developer Web. Dari sekian banyak browser yang beredar diantaranya adalah Internet Explorer, Netscape, Mozilla, dan Opera yang memiliki cara kerja yang berbeda. Hal ini berarti pengetesan harus dilakukan untuk mengetes kompabilitas desain pada browser-browser tersebut. Selain itu, menggunakan tabel untuk layout biasanya menggunakan editor WYSIWYG yang biasanya menghasilkan tag-tag yang tidak perlu dipergunakan yang akhirnya meningkatkan besar File. Cara membaca tabel setiap browser berbeda-beda, pada browser-browser seperti Netscape dan IE akan menampilkan isi tabel dihalaman Web begitu ditemukan tag penutup dari tabel. Hal ini tentu akan terkesan bahwa situs terasa lambat dan berat.1. Table BordersProperti border digunakan untuk menentukan batas tabel dalam CSS.Contoh:table,td{ border: 1px solid blue;}Perhatikan contoh diatas, tabel memiliki garis ganda. Untuk menampilkan garis tidak ganda, gunakan properti border-collapse.2. Border CollapseBerikut adalah value yang dapat digunakan pada property ini:PropertyValuesborder-collapsecollapseseperatenoneBerikut adalah contoh penerapan:table{ border-collapse:collapse;}table,td{ border: 1px solid blue;}3. Border SpacingProperty border-spacing digunakan untuk menetapkan jarak antar cell pada tabel, border-spacing dapat memiliki sebuah nilai, sebagai contoh border-spacing:5px; dimana jarak spasi 5px akan berlaku untuk semua sisi. Atau juga dapat berisi dua buah nilai, misalnya border-spacing:5px 10px; yang akan menetapkan nilai pertama sebagai jarak spasi horizontal dan nilai kedua sebagai jarak spasi vertikal.table { border-spacing:20px;}4. Lebar dan Tinggi TabelLebar dan tinggi tabel didefinisikan dengan properti width dan height. Contoh dibawah ini, lebar tabel 45% dan tinggi th 50px :table {width:45%; }th{height:60px;color:#3399CC;}table,th,td{ border: 3px solid #000000;}5. Perataan Teks TabelProperti text-align pada tabel mengatur perataan teks secara horizontal, seperti left, right, atau center :td.kanan{ text-align:right; font-style:italic; color:purple; }Properti vertical-align pada tabel mengatur perataan teks secara vertikal, seperti top, bottom, atau middle :td {height:50px;vertical-align:bottom;}6. Tabel PaddingUntuk memberi ruang antara batas border dengan konten dalam sebuah tabel, gunakan properti padding pada elemen th dan td :td { padding:10px; color:purple; font-weight:bold;}7. Warna TabelUntuk lebih menarik, tabel diberi warna pada border, background, atau teks :table, td, th {border:3px solid purple;}th {background-color:purple;color:white;font-style:italic;}Pada table berikut ditampilkan attribut formatting yang digunakan pada Tabel HTML dan padanan CSSnya:BAB XIICSS BOXPada bab ini akan dijelaskan cara membuat CSS BOX dengan menggunakan CSS. Didalam html, semua elemen seperti p, div, h dan lain-lain pada dasarnya dianggap kolom kotak yang membungkus isi (html) didalam css, istilah model kotak / box css digunakan ketika berbicara tentang design dan tata letak.Ada beberapa property dalam box model CSS diantaranya Border, Padding, Margin dan content HTML itu sendiri. Setiap box model ini memungkinkan kita untuk membuat jarak antara yang satu dengan yang lainya, jadi dengan box model ini setiap kolom bisa di beri ukuran jarak antara satu dengan yang lainya sehingga kotak-kotak kolom tidak tampil menyatu dan tampak lebih bagus untuk di lihat. Agar lebih mudah memahami, perhatikan gambar 12.1 yang merupakan tampilkan ilustrasi box model :Gambar 12. 1 CSS BOXPenjelasan : Margin : memungkinkan kita untuk memberi jarak batas antara kolom kotak satu dengan yang lainya. margin tidak memiliki background warna (transparan) Border sama halnya dengan border memungkinkan kita memberi jarak bedanya border kita bisa mendefinisikan warna background Padding memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content Content adalah isi seperti text dan gambar yang ada di kolom elemen HTML seperti div, p, h, dan lainnya12.1. Margin Margin adalah jarak area kerja dalam meletakkan komponen-komponen web yang dihitung dari dinding-dinding browser. Sehingga dengan melakukan pengaturan margin, berarti menciptakan sebuah pembatas antara area kerja dengan dinding browser. Perhatikan gambar ilustrasi dibawah ini:Gambar 12. 2 Layout MarginKode CSS untuk pengaturan margin seperti gambar illustrasi diatas adalah:body {margin-top: 100px;margin-right: 40px;margin-bottom: 10px;margin-left: 70px;}Bentuk kode CSS diatas dapat juga ditulis dengan bentuk seperti berikut:body {margin: 100px 40px 10px 70px;}Possible ValuesValueDescriptionautoThe browser sets the margin. The result of this is dependant of the browser.lengthDefines a fixed margin (in pixels, pt, em, etc.) %Defines a margin in % of the containing elementProperty margin dapat ditulis dengan bentuk dari satu hingga empat value, seperti berikut di bawah ini: margin:25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px margin:25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px margin:25px 50px; top and bottom margins are 25px right and left margins are 50px margin:25px; all four margins are 25pxSelain menggunakan tag sebagai selector, Anda juga dapat menggunakan tag HTML lain yang berhubungan dengan objek yang ditampilkan, sebagai contoh Anda dapat menerapkannya pada elemen tabel.Gambar 12. 3 Contoh Layout dengan CSS BoxBorder jika diartikan adalah pembatas. Pada umumnya seorang designer web akan membuat sebuah pembatas yang digunakan untuk membatasi beberapa element. Penggunaan border mengijinkan Anda untuk memberi pembatas terhadap beberapa element web seperti seperti text, paragraph, maupun gambar yang Anda tampilkan di halaman web. Berikut ini merupakan syntax penggunaan property border:selector { border: width style color;}Property border merupakan property shortcut untuk menetapkan width, style, dan color dari border hanya dengan satu langkah. a) Pengaturan ukuran border (border-width)Property border-width memiliki syntax sebagai berikut:selector { border-width : Value }Berikut adalah ukuran yang dapat digunakan pada property border-width:PropertiesValueBorder-widthcmpxem%Selain value bentuk diatas dapat juga digunakan value dalam bentuk lain, yaitu: thin, medium dan thin, seperti yang ditunjukkan pada gambar berikut ini.Gambar 12. 3 Ketebalan Borderb) Pengaturan border width pada tiap sisiUntuk melakukan pengaturan tiap sisi border maka dapat menggunakan property border-top-width, border-right-width, border-left-width, dan border-bottom-width. Berikut adalah penulisan syntaxnya: selector { border-top-width: value;border-right- width: value;border-down- width: value;border-left- width: value;} c) Pengaturan warna border (border-color)Pada saat melakukan perubahan warna border, property yang digunakan adalah property border-color. Value yang digunakan dapat berupa bentuk RGB, nama warna dalam bahasa inggris maupun kode hexa, contohnya: "#123456", "rgb(123,123,123)", "yellow". Berikut adalah penulisan syntax border-color:selector { border-color: value }d) Pengaturan warna pada setiap sisi borderProperties yang digunakan pada tahap perubahan warna border disesuaikan dengan sisi yang akan diubah, misalnya akan dilakukan pengubahan warna pada sisi bagian kanan, maka properties yang digunakan adalah border-right-color dan begitu juga pada sisi kiri, atas maupun bawah. Berikut adalah penulisan syntax dalam pengaturan warna border: selector { border-top-color: value;border-right-color: value;border-down-color: value;border-left-color: value;}PropertiesValueKeteranganborder-top-colorborder-colorMerubah warna border atasborder-right-colorborder-colorMerubah warna border kananborder-down-colorborder-colorMerubah warna border bawahborder-left-colorborder-colorMerubah warna border kirie) Pengaturan bentuk border (border-style)Property border-style digunakan untuk menciptakan border dengan bentuk-bentuk yang berbeda, berikut adalah penulisan syntax border-color:selector { border-style: value value value }Dari penulisan syntax diatas, property border-style digunakan dalam pembuatan border, sedangkan value adalah nilai yang berkaitan dengan bentuk style yang dikehendaki. Berikut adalah bentuk-bentuk style yang dapat digunakan:PropertiesValueborder-styleNonehiddendotteddashedsoliddoublegrooveridgeinset outsetContoh:h1,h2,h3 { border-style:groove; }f) Pengaturan style border kanan, kiri, atas dan bawah Property border-right-style, border-left-style, border-top-style dan border-bottom-style digunakan untuk pengaturan style pada sisi border kanan, kiri, atas dan bawah. Contoh:h1{ border-right-style: dotted;border-bottom-style: solid;border-left-style: outset;border-top-style: ridge;}12.2 PaddingPengaturan padding, adalah melakukan pengaturan terhadap jarak didalam (inner) antara border dengan content dari elemen. Tabel berikut menampilkan jenis padding beserta nilainya.PropertiesValueKeteranganpaddingpadding-topPengaturan batas isi web dengan objek yang ada di sampingnya.padding-rightpadding-bottompadding-leftpadding-topLengthPengaturan jarak padding sebelah atas%padding-rightlengthPengaturan jarak padding sebelah kanan%padding-bottomlengthPengaturan jarak padding sebelah bawah%padding-leftlengthPengaturan jarak padding sebelah kiri%Untuk melakukan pengaturan padding pada halaman, maka Anda harus menggunakan tag sebagai selectornya, syntaknya adalah sebagai berikut:body {padding-top: value;padding-right: value;padding-bottom: value;padding-left: value;}12.3 Dimensi Pada Halaman WebPengaturan dimensi adalah teknik pengaturan ukuran pada suatu objek web. Dengan menggunkan property yang berkaitan dengan dimensi ini, Anda dapat dengan mudah melakukan pengaturan ukuran besar atau kecil suatu objek web.12.3.1. Dimensi GambarDi dalam aplikasi web pada web HTML, biasanya Anda melakukan pengaturan besar atau kecil sebuah objek dengan menentukan lebar dan panjangnya. Begitu juga dengan CSS yang menyediakan fungsi untuk pengaturan dimensi. Pada tabel berikut ini ditampilkan property serta nilai/value yang berkaitan dengan pengaturan dimensi gambar.PropertiesValueKeteranganwidthlengthPengaturan lebar objek, untuk menggunakan nilai alami gunakan auto.AutoheightlengthPengaturan tinggi objek.AutoAnda dapat menerapkannya dengan bentuk penulisan kode CSS seperti berikut:img.class{width: value;height: value;}12.3.2. Dimensi Pada ParagrafApabila pada gambar yang dilakukan adalah pengaturan lebar dan tinggi, maka yang dapat dilakukan di dalam pengaturan paragraf adalah melakukan pengaturan yang berkaitan dengan jarak tinggi antar baris pada paragraf. Untuk dapat memberi jarak tinggi antar baris pada paragraf, property yang digunakan adalah line-height. Syntaxnya adalah:p.class{ line-height: value;}Pada tabel berikut ini ditampilkan nilai/value dalam pengaturan dimensi halaman:PropertiesValueKeteranganline-heightlengthUkuran panjang autoUkuran otomatisModul Ajar Desain Web1

Modul Digital Imaging & Design Web

Documents