Anda di halaman 1dari 99

KATA PENGANTAR

Rasa syukur saya ucapkan kepada Tuhan Yang Maha Esa, atas berkat dan rahmatNya diberikan kepada saya, sehingga penulisan buku WEB DESIGN terselesaikan. Buku ini saya buat sebagai salah satu syarat untuk Mengikuti Ujian Akhir Semester V mata kuliah WEB DESIGN 2 di STMIK Pringsewu. Oleh karena pengetahuan yang sangat terbatas dalam penyelesaian pembuatan buku ini masih banyak mendapat hambatan dan kesulitan serta kejanggalan - kejanggalan, Baik mengenai susunan kalimat maupun pembahasan masalah. Dan saya berprinsip semua hambatan dan kesulitan itu adalah hal yang biasa (wajar) dalam proses pematangan diri. Buku ini dapat terselesaikan dengan bantuan dari beberapa pihak, dan saya ucapkan terima kasih kepada : 1. Bapak Saiful Isnandar, S.Kom., M.T.I. Selaku dosen pengampu mata kuliah Web Design, ini dapat

2. Teman-teman kelas S1 Visual Basic yang saling membantu dalam pembuatan buku ini, 3. Keluarga saya yang selalu memberi semangat serta dukungan-dukungannya. Akhir kata saya ucapkan terima kasih semoga buku ini dapat bermanfaat bagi seluruh pembaca. Terima kasih. Pringsewu, Oktober 2012

GA LUH MAYDAWATI P 10100012

DAFTAR ISI
JUDUL ......................................................................................... 1 KATA PENGANTAR ..................................................................... 2 DAFTAR ISI ................................................................................. 4 BAB 1 Adobe Photoshop ....................................................................... 6 A. Pendahuluan ......................................................................... B. Mengenal Adobe Photoshop beserta toolbar dan Ikonnya .................................................................................. C. Selection tool serta permainan warna .................................. D. Teks dan Vektor .................................................................... E. Layer, mask, dan style............................................................ F. Efek khusus Adobe Photoshop ............................................. BAB 2 Swish Max .................................................................................... 25 A. B. C. D. Pendahuluan ......................................................................... Mengenal Swish Max ............................................................ Menu-menu pada swish max ................................................ Elemen dasar swish max ....................................................... 25 27 29 36 6 8 12 19 21 23

BAB 3 JQuery ................................................................................... 41 3

A. B. C. D. E. F. G.

Pengertian jQuery .................................................................. Sejarah jQuery ...................................................................... Manfaat jquery ..................................................................... Cara penggunaan jquery ....................................................... Membuat elemen on the fly ................................................. Situs yang menggunakan jquery ........................................... Download jQuery ..................................................................

41 42 45 46 59 62 63

BAB 4 Macromedia Dreamweaver 8 ...................................................... 64 A. B. C. D. E. F. G. H. I. J. K. L. M. Pengertian ............................................................................. Area kerja dreamweaver 8 .................................................... Menu di dreamweaver 8 ....................................................... Halaman utama Dreamweaver 8 .......................................... Mendefinisikan site dengan dreamweaver .......................... Membuat menu navigasi dengan CSS ................................... Membuat Flash Text ............................................................. Membuat Navigasi Bar .......................................................... Cascading style sheet ............................................................ Dreamweaver CSS panel ....................................................... Istilah dalam Style Sheet ....................................................... Kategori pada CSS propertis ................................................. Membuat Paragraf dan Daftar List ....................................... 64 64 65 66 71 73 81 82 84 86 89 92 96

DAFTAR PUSTAKA

BAB 1
ADOBE PHOTOSHOP
A. PENDAHULUAN
Dewasa ini perkembangan dunia digital khususnya computer semakin hari semakin tak terbendung lagi. Software yang barupun bermunculan seiring dengan kebutuhan manusia akan kemudahan hidupnya. Mulai dari software-software sederhana sampai ke software-software yag sifatnya rumit dan membutuhkan ilmu-ilmu tersendiri untuk

memahaminya. Tidak ketinggalan dunia seni khususnya dunia grafis, software-software untuk mendukung dunia ini seakanakan tidak akan pernah tenggelam dan sepertinya akan selalu bermunculan sesuai dengan image dan kreatifitas seni yang tiada mengenal batas. Sebagai contoh foto-foto seperti disamping, diedit dengan menggunakan Adobe Phostoshop. Hasil gambar olahan Adobe Photoshop ini juga banyak dilihat di berbagai mass media baik cetak ataupun tayangan langsung seperti pada website, brosur, koran, majalah, dan media lainnya. Adobe Photoshop adalah software pengolah gambar yang sangat powerfull dengan segala fasilitasnya. 5

Saat ini Adobe telah mengeluarkan Adobe Photoshop CS3 yang lebih powerfull. Versi sebelumnya, yaitu Adobe Photoshop CS2, Adobe Photoshop CS, dan Adobe

Photoshop 7, masih sering dipakai untuk komputer lama (pentium 3 ke bawah). Tutorial Adobe Photoshop kali ini dibagi dalam 5 bagian utama : 1. Mengenal Adobe Photoshop beserta ToolBar dan ikon-ikonnya. 2. Selection Tool serta permainan warna 3. Teks dan Vektor 4. Layer, Mask, Style 5. Efek khusus Photoshop

A. MENGENAL ADOBE PHOTOSHOP BESERTA TOOLBAR DAN IKONNYA


6

Apa itu Adobe Photoshop? Adobe Photoshop adalah software pengolah gambar yang sangat powerfull dengan segala fasilitasnya. Hasil gambar olah dengan Adobe Photoshop ini banyak dilihat di berbagai website, brosur, koran, majalah, dan media lainnya. Mengenal Area Kerja Jalankan Adobe Photoshop kemudian pilih menu File -> Open. Kemudian pilih buka gambar apa saja. Sebagai contoh di buka gambar asef.jpg (lihat gambar 1.1). Seringkali letak tool-tool (palette) Adobe Photoshop sudah berubah dimodifikasi oleh pengguna sebelumnya. Untuk mengembalikan letak palette ini gunakan menu Windows -> Workspace -> Reset Palette Location. B A D C E F

Area kerja Adobe Photoshop dapat dilihat pada gambar 1.1, yaitu: a. Menu Bar, 7

berisi perintah utama untuk membuka file, save, mengubah ukuran gambar, filter dan lain-lain. b. Option, berisi pilihan dari tool yang Anda pilih. Misalnya dipilih kuas/brush, maka ukuran/diameter brush ada di sini. c. Gambar, menampilkan gambar yang sedang dibuat atau diedit. d. Pallete Well, cara cepat untuk mengakses palet brushes, tool resets dan Layer Comps. Juga dapat digunakan untuk meletakkan palet yang sering digunakan. e. Toolbox, berisi tool untuk menyeleksi dan memodifikasi gambar. f. Palette, berisi jendela-jendela kecil yang di dalamnya terdapat perintah dan pilihan untuk dokumen/gambar yang sedang dikerjakan.

Tool-tool yang lain

Praktek Bagian I Pada bagian ini kita akan mencoba mempraktikkan materi yang tersaji di atas agar dapat lebih memehami sekaligus mengerti tentang uraian-uraian yang telah tersajikan. 1. Memulai adobe photoshop serta Membuka dokumen dan membuat duplikat dokumen

Untuk memulai Adobe photoshop, terlebih dahulu kita klik baris star pada desktop, kemudian pilih All Program dan klik Adobe Photoshop CS2 Untuk membuka gambar gunakan menu File -> Open, sedangkan untuk membuat duplikat gambar gunakan menu Image -> Duplicate. 2. Mengubah ukuran gambar dan kanvas Jika ukuran gambar diubah, maka gambar akan membesar atau mengecil, lakukan dengan menu Image -> Image Size. Jika ukuran kanvas diubah, maka ukuran gambar tetap, akan ada kertas putih di sekeliling gambar, lakukan dengan menu Image -> Canvas Size. 3. Memindahkan gambar ke dokumen lain Untuk memindahkan gambar gunakan Move Tool, dengan catatam gambar yang akan kita pindahkan telah terseleksi.

10

B. SELECTION TOOL WARNA

SERTA PERMAINAN

Menyeleksi Gambar Menyeleksi berarti memilih bagian tertentu dari gambar. Dengan seleksi kita dapat mengcopy, mengubah, menggeser, atau menambahkan efek kepada bagian yang terseleksi tanpa mempengaruhi bagian lain. Ada tiga cara menyeleksi yaitu: 1. Marquee Tool, yaitu menyeleksi dalam bentuk kotak, elips, row, dan kolom 2. Lasso Tool, untuk menyeleksi dalam bentuk bebas, poligonal atau kekontrasan gambar (Magnetic Lasso Tool). 3. Magic Wand Tool, untuk menyeleksi berdasarkan persamaan warna. Tipe seleksi ada dua (dapat dipilih pada Option Bar), yaitu: 1. Normal, memiliki pinggiran yang tajam. 2. Feather, memiliki pinggiran yang halus atau kabur. Marquee Tool Lasso Tool Magic Wand Tool

11

Permainan Warna 1. Sekilas mengenai warna Warna apapun dapat dinyatakan dalam tiga warna dasar (RGB) yaitu merah, hijau, dan biru. Cara menyatakan warna yang lain adalah dengan mode HSL yaitu Hue, Saturation, dan Lightness. Mode lain adalah CMYK (Cyan, Magenta, Yellow, Black). Praktek Bagian II 1. Rectangular Marquee Tool Gunakan rectangular marquee tool untuk memotong gambar dalam bentuk kotak. Gunakan menu Select -> Transform Selection untuk mengubah seleksi dan menu Select -> Feather untuk mengatur ketajaman pinggiran potongan. 2. Elliptical Marquee Tool Digunakan untuk membuat seleksi elips atau lingkaran. Anda dapat menggunakan Select -> Transform Selection (atau klik kanan) untuk mengubah bidang yang mau diseleksi. Gunakan menu Select -> Feather untuk mengatur ketajaman tepi gambar. Gunakan Select -> Inverse untuk membalik seleksi. 3. Lasso Tool Seleksi ini digunakan untuk menyeleksi bentuk bebas dengan mouse. 4. Polygonal Lasso Tool Polygonal Lasso Tool digunakan untuk menyeleksi gambar yang memiliki tepi garis lurus, misalnya piramida pada gambar 2.5. Jika tombol Alt ditekan maka Polygonal Lasso Tool akan berfungsi 12

seperti Lasso Tool biasa. Contoh gambar hasil seleksi piramida diperkecil dan diletakkan pada sudut kanan bawah.

5. Magnetic Lasso Tool Magnetic Lasso Tool penggunaanya cukup mudah, karena dengan tool ini seleksi gambar akan secara otomatis membuat garis seleksi pada gambar yang berwarna kontras. 6. Magic Wand Tool Magic wand tool akan menyeleksi gambar yang memiliki warna sama. 7. Crop Tool Crop tool digunakan untuk menghilangkan bagian yang tidak diseleksi. Contoh penggunaanya di sini digunakan untuk memperbaiki hasil scan yang miring. 8. Healing Brush Tool Healing Brush Tool digunakan untuk memperbaiki gambar pada bagian tertentu. Aktifkan tool ini, kemudian tekan Alt + Klik pada objek pada bagian yang tidak berkeriput, kemudian klik pada bagian yang keriputnya ingin dihilangkan. 9. Spot Healing Brush Tool Spot Healing Brush Tool digunakan untuk memperbaiki kerusakan gambar. Di sini Anda tidak perlu menentukan area yang akan digunakan sebagai patokan, karena akan secara otomatis terpilih dari area di

13

sekitarnya. Misalnya digunakan untuk menghilangkan keretakan pada patung Tool ini merupakan tool baru pada Adobe Photoshop CS2 yang tidak ada pada versi sebelumnya.

10. Patch Tool Patch Tool digunakan untuk memperbaiki gambar. Tool ini dibuat dengan cara membuat selection dengan mouse atau dengan menahan tombol ALT untuk menghasilkan bentuk poligonal. Selanjutnya drag ke daerah yang akan dijadikan patokan perbaikan. 11. Red Eye Tool Red Eye Tool digunakan untuk memperbaiki warna merah pada mata. 12. Clone Stamp Tool Clone Stamp Tool digunakan untuk membuat duplikat area pada gambar, atau yang disebut cloning. Tekan ALT pada objek yang akan dikloning, kemudian gunakan mouse pada area tempat objek baru mau diletakkan. 13. Background Eraser Tool Tool ini digunakan untuk menghapus background yang memiliki kemiripan warna. Misalnya digunakan untuk menghapus background langit pada gambar kupukupu.

14

14. Magic Eraser Tool Seperti Background Eraser Tool, tool ini akan menghapus area dengan warna sama, namun efeknya adalah ke seluruh gambar, bukan hanya area yang diklik. 15. Color Replacement Tool Color Replacement Tool akan mengubah warna gambar tanpa mengubah bentuk dari gambar tersebut. Tool ini akan secara otomatis hanya mengubah area dengan warna sama menjadi warna lain yang dikehendaki. 16. Paint Bucket Tool Paint Bucket Tool digunakan untuk mengganti background yang memiliki warna sama atau mirip. Background dapat diganti dengan pattern. 17. Gradient Tool Gradient tool digunakan untuk menghasilkan warna gradasi. Jangan lupa lakukan seleksi terlebih dahulu bagian mana yang akan diisi warna gradasi. Jika tidak, maka seluruh kanvas terisi dengan gradasi. 18. Brush Tool Brush Tool digunakan sebagai kuas dalam mengambar dengan mouse. Atur besar kecilnya brush, hardness, opacity, dan flow. Bush Tool dapat juga bekerja pada mode Air Brush. 19. Brightness/Contrast Brightness digunakan untuk mengatur kecerahan gambar. Contrast digunakan untuk mengatur ketajaman gambar. Gunakan menu Image -> Adjustment -> Brightness/Contrast. 15

20. Level Level berfungsi mirip dengan Brightness/Contrast namun lebih fleksible karena warna dapat diatur warna gelap, warna menengah, dan warna terang. Level dapat bekerja pada selection atau seluruh kanvas. Gunakan menu Image -> Adjustment -> Level. 21. Curves Curves bekerja seperti level, namun Anda mengatur warna RGB dalam bentuk curva. Gunakan menu Image > Adjustment -> Curves. Curva dapat diatur otomatis, mode RGB atau diatur sendiri-sendiri untuk tiap-tiap warna. 22. Color Balance Melalui menu Image -> Adjustment -> Color Balance kita dapat mengatur keseimbangan warna. 23. Photo Filter Photo filter digunakan untuk memberikan filter pada gambar. Mirip seperti filter yang diletakkan di depan lensa kamera. Gunakan menu Image -> Adjustment -> Photofilter. 24. Replace Color Replace Color digunakan untuk mengganti warna tertentu dalam gambar, sedangkan warna yang lain tidak ikut berubah. Misalnya untuk mengganti warna apel dengan tanpa mengubah warna background. Gunakan menu Image -> Adjusments -> Replace Color.

16

25. Hue/Saturation Hue/Saturation digunakan untuk mengganti warna pada keseluruhan gambar/seleksi. Hue adalah warna, sedangkan Saturation adalah tebal/tipisnya warna. Gunakan tool ini melalui Image -> Adjustment -> Hue/Saturation. Perubahan warna dapat diatur pada chanel master, atau tiap-tiap warna.

26. Match Color Match Color akan menyamakan warna gambar source kepada gambar yang akan diubah. Misalnya di sini akan diubah gambar danau3.jpg, menjadi suasana matahati terbit seperti gambar acuan. Gunakan tool ini melalui menu Image -> Adjustment -> Match Color.

17

C. TEKS DAN VEKTOR


Teks Horisontal Type Tool Horisontal Type Tool digunakan untuk membuat teks secara horisontal. Hasil teks dapat dipindahkan dengan Move Tool.

Horisontal Type Mask Tool Horisontal Type Mask Tool digunakan untuk menyeleksi dalam bentuk teks. Vektor Pen Tool Pen Tool digunakan untuk membuat garis lurus dan garis lengkung dalam bentuk vektor. Klik sekali untuk membuat anchor point, kemudian jika kurva telah terbentuk, drag anchor point untuk membuat direction point. Path yang dibuat oleh Pen Tool dapat diubah menjadi selection.

18

Rectangle, Ellipse, Poligon, dan Custom Shape Tool Tool ini berguna untuk menghasilkan bentuk kotak (rectangle), ellips, poligon, dan berbagai macam bentuk lain yang telah disediakan oleh Adobne Photoshop. Bentuk-bentuk tersebut misalnya hati, lampu, not balok, dan lain sebagainya.

19

D. LAYER, MASK, DAN STYLE


Layer Memahami Layer Layer adalah lapisan tembus pandang. Bagian yang tidak bergambar pada sebuah layer bersifat transparan. Layer dapat ditumpuk dan diatur susunannya. Dengan menggunakan layer, efekefek akan berlaku dalam layer tertentu saja, tanpa mengganggu layer yang lain. Quick Mask Mode Quick Mask Mode digunakan untuk menyeleksi dengan menggunakan Brush Tool. Aktifkan tool ini dengan menekan tombol Q pada keyboard atau memilih tool Quick Mask Mode. Layer Mask Layer Mask digunakan untuk menyembunyikan bagian tertentu pada layer. Gunakan warna hitam untuk menyembunyikan gambar dan warna putih untuk menampilkan gambar. Layer Style Layer Style merupakan teknik memberikan efek tertentu pada suatu layer. Pilih tool Add Layer Style yang ada pada sudut kanan bawah pallete.

20

Menampilkan/ Menyembunyikan Layer atau Group atau Syle Layer atau Group atau efek layer dalam Palet Layers dapat ditampilkan maupun disembunyikan kapan saja. Jika Anda tidak ingin menampilkan salah satu objek, Anda tidak perlu menghapus layer tersebut tetapi cukup menyembunyi-kannya. Meskipun pada Palet Layers masih muncul nama layer tersebut tetapi tidak akan ikut tercetak dalam image. Yang akan dicetak adalah seluruh layer atau group yang nampak dalam Palet Layers. Membuat Layer Mask Dengan layer mask, Anda dapat menampilkan maupun menyembunyikan bagian tertentu dari layer atau melindungi area tertentu dari editing. Anda dapat membuat layer mask dengan dua cara: Layer Mask adalah gambar bitmap bergantung resolusi yang dibuat dengan lukisan atau tool yang dipilih. Vektor Mask adalah resolusi yang mandiri dan dibuat dengan suatu pena atau tool Shape. Pada palet Layers, layer mask dan vektor mask ditampilkan sebagai thumbnail tambahan di sebelah kanan thumbnail layer. Untuk layer mask, thumbnail ini dipresentasikan sebagai channel grayscale yang terbuat ketika Anda membuat sebuah layer mask. Layer Style Layer Style menambahkan efek ke objek dalam satu layer yang Anda pilih 21

E. EFEK KHUSUS ADOBE PHOTOSHOP


Filter Liquify Filter Liquify dapat mengubah gambar secara langsung dengan menggunakan mouse. Misalnya memperbesar/memperkecil mata, menggeser alis, dan sebagainya. Filter ini dapat digunakan melalui menu Filter -> Liquify.

Hasil Filter Liquify

Filter Vanishing Point Filter Vanishing Point digunakan untuk meng-klone gambar dalam bentuk perspektif. Filter ini dapat digunakan melalui menu Filter -> Vanishing Point. Area sumber kloning ditentukan dengan menekan Alt + Click. Fitur merupakan fitur baru dalam Adobe Photoshop CS2.

22

Filter Blur Filter Blur digunakan untuk mengaburkan gambar. Yang menarik dalam filter ini adalah mengaburnya gambar dapat dibuat secara radial. Gunakan filter ini melalui menu Filter -> Blur.

Gambar hasil Filter Blur

23

BAB 2
SWISH MAX

A. Pendahuluan Dasar-dasar Animasi Komputer bukanlah barang baru di era informasi ini, sekarang dalam pemerintahan sudah memiliki Departemen sendiri yaitu Dekominfo. Pada semua bidang pekerjaan, penggunaan komputer menjadi suatu keharusan, karena aktifitas kerja menjadi lebih mudah. Bagi individu yang tidak memiliki kemampuan menggunakan computer akan membuatnya tersisih dalam dunia kerja.

24

Komputer tidak dapat dilepaskan dari dunia pendidikan. Bahkan di perguruan tinggi, ilmu komputer menjadi suatu mata kuliah. Mengapa Swish? Saat ini ada banyak aplikasi-aplikasi yang dapat digunakan untuk membangun sebuah game, seperti C, C++, visual basic dan masih banyak lainnya. Saat ini telah bermunculan program-program animasi diantaranya adalah Macromedia Flash dan SwishMax. Animasi-animasinya lebih sering digunakan untuk movie/film, banner iklan, button, navigasi atau presentasi, baik dalam sebuah homepage maupun berdiri sendiri. selain itu dapat juga digunakan untuk membuat game-gamne sederhana, seperti game pendidikan Program ini dapat didownload secara gratis versi trialnya di http://www.swishzone.com Dari beberapa program animasi yang ada, SwishMax paling mudah untuk digunakan dan juga menarik minat banyak kaum flasher maupun web developer. Swishmax memiliki feature yang cukup untuk menghasilkan animasi komplek yang indah, baik animasi teks, image, grafik dan suara. Selain itu Script nya pun mudah dipelajari, karena adanya menu guided yang disediakan untuk pemula. SwishMax merupakan pengembangan dari Program Swish v.2, yang kini telah memiliki 230 bulit-in efek seperti efek Explode, Vortex, 3D Spin, Snake dan banyak lainnya. Seperti halnya Swish, SwishMax juga memilki alat bantu 25

untuk membuat garis, kotak, elips, kurva bazier, gerak animasi, sprite, tombol roll over dan lainnya. Format dasar SwishMax adalah swi file, namun dapat juga diekspor kedalam file flash (swf), movie (avi) ataupun execute(exe) program yang dapat dijalankan berdiri sendiri. Sehingga animasi Swishmax dapat diletakkan langsung di web, atapun diikutkan dalam presentasi Microsoft Powerpoint dan Microsoft Word. B. MENGENAL SWISH MAX Spesifikasi Hardware Program SwishMax membutuhkan beberapa klasifikasi hardware untuk dapat berjalan dengan baik. Syarat minimun hardware yang harus dipenuhi adalah : - Windows 95/98/NT4/2000/XP - Pentium P2 - 64Mb RAM - Monitor 800x600 pixel dengan 256 warna

Antarmuka SwishMax

Dalam modul ini tidak akan dijelaskan menu-menu dan fungsinya yang ada padaSwishMax.

26

SwishMax memiliki tampilan antarmuka/ruang kerja yang cukup bagus, yang terdiri dari beberapa komponen, yaitu : - Main men - Toolbox - Toolbar-toolbar termasuk toolbar Standar, insert, dan control - Panel-panel termasuk panel Timeline, Outline, Layout, dan Text - Status Bar Setiap komponen tersebut diatas masing-masing memiliki berbagai macam fungsi dan fasilitas yang mendukung dalam pembuatan animasi Flash. Gambar berikut menampilkan masing-masing komponen yang telah disebutkan diatas . Main Menu

Main Menu merupakan menu utama dari SwishMax, karena didalmnya terdapat menu-menu yang akan sering kita gunakan. Main menu terletak dibagian paling atas dari window SwishMax. Menu-menu ini juga dapat diakses melalui toolbar-toolbar yang ada. C. MENU-MENU PADA SWISH MAX Menu-menu yang terdapat pada main menu adalah : 27

a. File Menu file memiliki submenu, diantaranya : beberapa

- New (Ctrl+N) : digunakan untuk membuat movie baru - Open (Ctrl+O) : digunakan untuk membuka file .swi (movie Swishmax) atau file- file format lain tapi masih didukung oleh SwishMax. - Save (Ctrl+S) : digunakan untuk menyimpan movie yang sedang aktif - Save As : digunakan untuk menyimpan movie yang aktif dengan nama baru - Export : digunakan untuk mengexpor movie SwishMax menjadi file .swf, movie(.avi), file .html dan file execute (.exe). Selain submenu diatas masih banyak ada menu-menu lainnya yang dapat dipelajari dan dicoba sendiri.

28

b.Edit Menu Edit memungkinkan kita melakukan editing/perubahan pada suatu movie. Submenu dari menu edit antara lain : - Copy : digunakan untuk meng-copy object atau efek yang dipilih pada clipboard - Paste : digunakan untuk mempaste object atau efek dari Clipboard ke movie SwishMax yang sedang aktif - Delete : digunakan untuk menghapus object atau efek yang sedang dipilih

c. View Menu View berisi fasilitas untuk mengubah tampilan movie, mengatur Toolbar yang 29

ditampilkan, menampilkan grid dan sebaginya. Menu View memilki submenu antara lain : - Zoom In : digunakan untuk memperbesar tampilan pada panel layout - Zoom Out : digunakan untuk mempekecil tampilan pada panel layout - Fit Scene In Window : digunakan untuk menampilkan scene tampak semuanya/mencukupi pada panel layout. d. Insert Menu Insert digunakan untuk menambahkan suatu objek kedalam movie, baik berupa text, button, sprite dan lainnya. Selain objek, melalui menu ini juga efek dan Script ditambahkan kedalam objek atau movie. Submenunya antara ain : Scene : untuk menambahkan scene baru kedalam movie - Text : digunakan untuk menyisipkan 30

teks kedalam scene/sprite/group. - Button : digunakan ntuk menambahkan button/tombol kedalam scene/sprite/group. - Sprite : digunakan untuk menyisipkan sprite kedalam scene/sprite/group. - Image : digunakan untuk menyisipkan image/gambar kedalam scene/sprite/group. - Content : untuk menyisipkan file eksternal kedalam movie. Perintah ini sama dengan perintah File Import

- Effect : digunakan untuk menambahkan efek pada objek yang dipilih. Efek yang tersedia cukup banyak pada SwishMax, dan dapat langsung dilihat. - Script : digunakan untuk menambahkan script/ perintah pada suatu objek atau pada frame yang dipilih. Script disini dapat berupa Event, Action atau Difine Functions. Script yang telah dibuat dapat diedit pada Panel Script (berbentuk tab berdampingan dengan Layout. e. Modify Menu ini menyediakan fasilitas untuk melakukan perubahan pada 31

property dari satu objek. Menu yang paling sering nanti digunakan adalah :

Grouping : - Group as Group : digunakan untuk menjadikan sekelompok objek menjadi satu group. Efek komplek dapat diaplikasikan ke group. - Group as Button : untuk menjadikan sekelompok objek yang dipilih menjadi suatu Button/tombol. - Group as Sprite : untuk menjadikan sekelompok objek yang dipilih menjadi suatu sprite. - Group As Shape : untuk menjadikan sekelompok objek yang dipilih menjadi sebuah shape. - Ungroup : untuk memecah group atau sprite menjadi objek terpisah. - Convert to button : untuk mengkonversi suatu objek menadi sebuah button. - Convert to Sprite : untuk mengkonversi suatu objek mendjadi sebuah sprite. f. Control

32

Menu Control menyediakan fasilitas bagaiman movie terseut akan dimainkan dandi preview. Submenunya antara lain : - Play Movie : Memainkan movie secara keseluruhan - Play Timeline : memainkan Scene atau Sprite yang sedang aktif untuk

- Play Effect : untuk memainkan bagan dari Scene yang mengandung efek yang dipilih - Stop : untuk menghentikan movie, scene, atau efek sedang dimainkan. yang

Toolbox

Toolbox merupakan sekelompok tombol-tombol sebagi alat bantu yang diletakkan dalam suatu area yang akan digunakan untuk menghasilkan suatu objek. Tollbox secara default teretak paling kiri dari Panel Layout .Tool yang ersedia antara lain : - Select : untuk memilih, memindahkan atau menskala objek dengan cara mengklik dan men-drag objek yang dipilih.

33

- Reshape : untuk membentuk ulang grafik cara mengklik dan men-drag objek yang dipilih. - Fill transporm : untuk mentrasformasi gradient atau image fill tanpa merubah objek - Motion Path : untuk memplot jalur gerak dari suatu objek dengan cara mengklik dan men-drag objek yang dipilih. - Line : untuk menggambar garis - Pencil : untuk menggambar bebas dengan teknik pencil - Bezier : untuk menggambar set dari kurva bazier atau segemen garis - Text : untuk menambahkan teks pada movie - Elipse/Circle : untuk menggambar elips atau lingkaran - Rectangle/Square : untuk menggambar kotak/kurva - Auto Shape : untuk menggambar objek dengan bentukbentuk tertentu. D. ELEMEN DASAR SWISH MAX Movie Sebelum kita belajar lebih jauh tentang pembuatan game dengan SwishMax, perlu kita ketahui dulu elemen-elemen dasar dari sebuah animasi Flash yang dibentuk dari SwishMax. Hal pertama yang arus kita pahami adalah animasi 34

yang dibuat dengan SwishMax akan kita sebut dengan movie. Sedangkan movie itu sendiri terdiri dari satu atau lebih scene, dan setiap scene memiliki satu atau lebih timeline. Timeline adalah kumpulan beberapa frame. Dari setiap timeline dari sebuah scene dapat kita tepatkan objek, dan objek itu dapat pula kita beri efek. Efek-efek akan mulai dan berhenti pada frame tertentu dan dapat dikontrol melalui Script. Untuk membuat sebuah movie baru, kita tinggal menekan tombol File > New atau menekan bersamaan tombol CTRL dan tombol N. Scene Scene adalah kumpulan dari beberapa objek yang telah diberi efek-efek tertentu dalam sebuah timeline. Scene baru dapat dibuat dengan menekan tombol Insert > Scene. Untuk menambahkan sebuah objek ke dalam Scene, kita cukup menekan salah satu objek yang ada pada Tollbox, kemudian klik atau drag pada Layout Panel dimana kita akan menempatkan objek tersebut. Timeline dan Frame Seperti halnya sebuah film biasa, Scene terdiri atas beberapa buah frame yang akan berjalan berurutan ataupun tidak yang dapat dikontrol melalui perintah

35

pada panel Script. Sedangkan Timeline merupakan kumpulan dari frame-frame, yang dimulai dari frame sebelah kiri dan berakhir pada frame sebelah kanan. Untuk lebih jelasnya perhatikan gambar berikut : Baris teratas merupakan frame events yang berhubungan dengan action-action pada scene Contoh diatas adalah Scene_1. Sebuah action akan dijalankan bila movie telah sampai pada frame-frame tertentu. Dalam satu frame biasanya terdapat satu atau lebih action. Sedangkan baris-baris dibawahnya merupakan frame yang berhubungan dengan objek-objek yang ada pada Scene. Baris-baris tersebut ditampilkan dalam urutan tertentu, dimana obyek yang lebih diatas akan tampil lebih diatas dalam tampilan pada layout. Seperti contoh diatas, obyek text akan tampil diatas obyek Shape, begitu seterusnya jika ada obyek-obyek dibawahnya. Object Dalam Swishmax dikenal ada dua obyek, yaitu Obyek Sederhana dan Obyek Komplek a. Obyek Sederhana Obyek sederhana hanya mengandung sebuah elemen/elemen tunggal. Obyek sederhana dalam SwishMax meliputi : 36

- Shape Objects - Button Objects - Sprite Objects - Instance Objects - Text Objects (input, dynamic dan static dimana Target dicentang) - Groups Objects (yang diberi nama dan Target dicentang) - Sound Objects b. Obyek Komplek Obyek komplek terbuat dari beberapa shape. Obyek ini meliputi : - Text Objects (statics dan Target tidak dicentang) - Groups Objects ( yang tidak diberi nama atau Target tidak dicentang). Swishscript Swishscript merupakan pengganti dari Panel Action pada Swish v.2. Swishscript adalah bahasa yang digunakan dalam Swishmax untuk memprogram sebuah movie dan itemitemnya dalam sebuah movie. Swishscript dapat digunakan untuk :

37

- mendifinisikan Action-action yang akan terjadi pada suatu frame tertentu, ketika dua buah obyek bertemu/bertabrakan, atau ketika kita akan meng-input variable dari file external. - Mengontrol dalam pemakain suara/sound - Berinteraktif dengan file-file external seperti PHP, ASP ataupun Text - Untuk menifinisikan property fisik dari sebuah obyek dan lain-lainnya

Swishscript inilah bagian yang sangat penting dan menarik dari Swishmax, karena dengan adanya script ini banyak yang dapat kita lakukan seolah-olah kita sedang menggunakan suatu bahasa pemrograman. Ada dua mode yang diberikan, yaitu mode Guide yang menampilkan action-action yang umum dan sering digunakan, dan mode Expert yang semua action diketik sendiri. Untuk pemula lebih baik menggunakan mode guide. Seperti halnya dalam suatu bahasa pemrograman, SwisHscript juga mengenal istilah yang kita sebut dengan variable. Variabel biasanya digunakan untuk menyimpan suatu nilai, baik berupa masukan ataupun nilai keluaran/hasil, seperti contoh berikut : x=3+1 38

maka varibel x akan tersimpan dengan nilai (3+1) atau 4. Jika kita lihat contoh berikut : y = x * x // y = 16 x= x + 1 // x = 5, dimana nilai x sebelumnya adalah 4 Perlu diperhatikan, dalam Swishscript tanda // digunakan sebagai area komentar. Variabel juga dapat digunakan untuk menyimpan nilai berupa teks (variable string) seperti contoh berikut : Pesan = selamat pagi // pesan= selamat pagi.

BAB 3
JQUERY
A. PENGERTIAN JQuery merupakan suatu framework ( library ) javascript yang menerapkan bagaimana interaksi antara javascript dan HTML. jQuery merupakan library open source dengan lisensi GNU General Public License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang menginginkan fungsi 39

lebih, JQuery memungkinkan penambahan fungsionalitas dalam bentuk plugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara gratis di internet. jQuery adalah pustaka JavaScript yang cepat dan ringkas yang menyederhanakan traversing dokumen HTML, penanganan event, animasi, dan interaksi Ajax untuk mempercepat pengembangan web JQuery merupakan library Javascript yang akan membuat aplikasi web yang kita buat menjadi lebih waah, baik dari sisi user-interface, proses maupun interaktivitas.

B. SEJARAH JQUERY 1. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya jQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. 2. 20 Feb 2009 Pemeliharaan rilis: jQuery 1.3.2 Rilis 3. 21 Januari 2009 Bug fix release: jQuery 1.3.1 Rilis 4. Januari 14, 2009 3. Ulang tahun dari jQuery : jQuery 1,3 dan jQuery Foundation 5. 28 Agustus, 2008 jQuery situs redesign 6. 14 Jul 2008 jQuery UI 1.5.2 7. 2 Jun 2008 jQuery UI 1,5 rilis 8. 24 Mei 2008 jQuery 1.2.6 40

9. 21 Mei 2008 jQuery 1.2.5: fix for bad build of 1.2.4 10. 19 Mei 2008 jQuery 1.2.4: bug fixing rilis 11. 5 Mei 2008 jQuery UI baru situs: 1.5b4 UI dan efek baru 12. 8 Feb 2008 jQuery 1.2.3: AIR, Namespacing, dan UI Alpha 13. 15 January 2008 Bug fix for jQuery 1.2, library is now 2 years old: jQuery 1.2.2: 2nd Birthday Present 14. September 17th, 2007 New user interface library for jQuery: jQuery UI: Interactions and Widgets 15. 10 September, 2007 jQuery 1,2 dirilis: jQuery 1,2: jQuery.extend ( "Awesome") 16. August 24th, 2007 jQuery 1.1.4: Faster, More Tests, Ready for 1.2 17. 5 Jul 2007 Bug 1.1.3 untuk memperbaiki jQuery: jQuery 1.1.3.1 18. 1 Jul 2007 versi baru dirilis jQuery: jQuery 1.1.3: 800% + Faster, masih 20KB 19. 1 Jul 2007 Pengumuman baru UI modul yang sedang dikembangkan: jQuery UI 20. June 18th, 2007 New Plugin Repository 21. May 20th, 2007 Third bug fix test release for 1.1: jQuery 1.1.3a 2 April, 2007 Mailing list dipindahkan ke Google Groups, kode sekarang diselenggarakan oleh Amazon S3: Grup Google dan Amazon S3 22. March 11th, 2007 11 people attend the first jQuery meetup at SXSWi 23. February 27th, 2007 Second bug fix release for 1.1: jQuery 1.1.2 41

24. Januari 22, 2007 Pertama bug fix release untuk versi baru: jQuery 1.1.1 25. Januari 14, 2007 jQuery Birthday: 1.1, Situs Baru, New Docs 26. Januari 11, 2007 rilis Beta jQuery 1.1: jQuery 1.1b 27. 8 Jan 2007 Alpha rilis versi baru: jQuery 1.1a 28. 27 Desember, 2006 Perencanaan untuk jQuery 1.1: The Path ke 1,1 29. December 12th, 2006 Last bug fix release for 1.0: jQuery 1.0.4 7 November, 2006 Pemenang dari kontes diumumkan jQuery tombol: Tombol jQuery Contest Pemenang 30. October 27th, 2006 Third bug fix release for 1.0: jQuery 1.0.3 31. October 9th, 2006 Second bug fix release for 1.0: jQuery 1.0.2 , with minor API changes (posted on 13 October) 32. 2 September, 2006 versi XML API dirilis: Mengambil jQuery Dokumentasi ke tingkat berikutnya 33. August 31st, 2006 First bug fix release for 1.0: jQuery 1.0.1 34. 26 Agustus, 2006 Pertama versi stabil jQuery: jQuery 1,0 35. July 10th, 2006 Blogger recruitment begins: Bloggers Wanted . 36. 30 Jun 2006 jQuery 1.0 - Alpha Release 37. 23 Jun 2006 Perencanaan untuk jQuery 1,0: The Road to 1,0 38. 29 Mei 2006 jQuery tersedia melalui SVN: SVN Akses ke jQuery

42

39. September 7th, 2006 First sponsored developer joins the project: Sponsored jQuery Deve 40. 27 Mei 2006 jQuery dipindahkan di bawah lisensi MIT: jQuery di bawah lisensi MIT 41. 24 April, 2006 Thickbox dirilis: Thickbox 42. 21 Mar 2006 Bug perbaikan dan fitur-fitur baru: Accordion, nilai, oncomplete, dan perbaikan bug! 43. February 26th, 2006 Ajax added to jQuery: Ajax, new fx, and more! 44. February 23rd, 2006 Bug fix release: Bugs Squished, Ajax on the way 45. Januari 27, 2006 jQuery Mailing List menyiapkan: jQuery Mailing List 46. Januari 24, 2006 jQuery Blog menyiapkan: jQuery Blog 47. Januari 25, 2006 Pertama jQuery Plugin Dibangun: First jQuery Plugin 48. January 14th, 2006 jQuery Announced at BarCampNYC: BarCampNYC Wrap-up

C. Manfaat JQuery Berikut adalah manfaat yang bisa didapatkan dengan menggunakan jQuery : o Mengakses bagian halaman tertentu dengan mudah tanpa adanya library Javascript khusus, o untuk mengakses suatu bagian tertentu dari halaman harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik dengan menyesuaikan 43

struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.

D. Cara-cara penggunaan Jquery Berikut adalah contoh sederhana penggunaan jQuery: Klik di sini untuk menimbulkan atau menyembunyikan

1 2 3 4 5 $(document).ready( function() { $("#toggle-hidden-div").click( function() { $("#hidden-div").slideToggle('slow'); }); }); 44

Untuk memudahkan penggunaan jQuery, ada baiknya Anda mengenal sedikit tentang DOM (Document Object Model), CSS (Cascading Style Sheets) dan JavaScript. Persiapan lainnya adalah jQuery.js. Ada dua format yang bisa diunduh, yaitu: terkompresi (ukuran lebih kecil) dan tidak terkompresi (baik untuk debugging dan mengetahui sulap di balik jQuery). Jika sudah mengunduhnya, pastikan jQuery dimasukkan ke dalam dokumen HTML Anda:

1 2 3 4 <script src="path/jQuery.js" type="text/javascript"></script> <script type="text/javascript"> // kode ditulis di sini nantinya </script> Sesuaikan path src nya dengan direktori jQuery.js berada. Kebanyakan apa yang kita kerjakan dengan jQuery adalah membaca dan memanipulasi DOM, jadi sebelum kita bermain DOM dengan jQuery pastikan DOM sudah diload. jQuery menyediakan fungsi $(document).ready() dimana semua fungsi yang kita definisikan di dalamnya akan segera di load setelah DOM di 45

load dan sebelum konten (gambar, text, dsb) di load. Dengan memanfaatkan fungsi ini kita bisa memisahkan behavior (JavaScript) dari struktur (HTML). Lebih jelasnya perhatikan kode JavaScript berikut: 1 2 <script src="path/jQuery.js" type="text/javascript"></script> 3 4 5 6 7 8 <script type="text/javascript"> $(document).ready( function() { $("#toggle-hidden-div").click( function() { $("#hidden-div").slideToggle('slow'); }); }); </script>

Bagian dari HTML yang dirujuk adalah: 1 2 3 4 <a id="toggle-hidden-div" href="#togglehidden-div">Klik di sini untuk menimbulkan atau menyembunyikan</a> 46

<div id="hidden-div" style="display: none"> Konten dalam div </div> Dengan fungsi $(document).ready()telah memisahkan behavior dan struktur, sehingga tidak perlu meng-attach event onclick pada element a dengan id toggle-hidden-div (baris 1). Dengan jQuery, element pada dokumen dapat kita daftarkan event tanpa perlu menuliskannya di struktur (HTML).

Contoh lainnya: Perhatikan warna latar, tulisan dan bold yang terjadi. Ini tanpa penggunaan CSS, tapi manipulasi DOM dengan fungsi css() jQuery. Kodenya: 1 2 3 $(document).ready(function() { $("#attach-event a").mouseover(function() {$(this).css({backgroundColor: "black", fontWeight: "bold"; color: "white"});}).mouseout(function() {$(this).css({backgroundColor: "#EAF3FA", fontWeight: "normal", color: "black"});}); });

47

Contoh di atas adalah menunggu DOM di load, mendapatkan element melalui selector, mendaftarkan penangan event ke element tersebut kemudian saat event terjadi penangan akan beraksi (entah memberikan effect, memanipulasi style atau mendapatkan nilai atribut dari element). jQuery menyediakan fungsi untuk penanganan event seperti click(), mouseover(), mouseout(), submit(), change(), dsb. Semua fungsi tersebut dapat dibaca di referensi API jQuery khusus Event.

Selector Untuk mendapatkan element dalam DOM, jQuery menyediakan beragam selector. Yang sering digunakan adalah CSS dan XPath Selector. Contoh: Text pada button. Klik!! Kodenya: $("#alert-toggleanchor").click(function(){alert($(this).text()};); Dengan penulisan kode JavaScript biasa, mendapatkan element dengan id alert-toggleanchor document.getElementById("alert-toggleanchor"), dengan jQuery menjadi $("#alerttoggle-anchor"). String berupa id element merupakan parameter bagi konstruktor class jQuery. 48

Jadi untuk menginisialisasi objek jQuery adalah dengan $(params) dimana params adalah string yang umumnya merupakan nama element, class atau id dari element di DOM. Tanda $ dalam JavaScript adalah karakter yang legal dan valid untuk identifier, jQuery menggunakannya sebagai alias dari class jQuery. Jadi $(table) dan jQuery(table) akan melakukan hal yang sama.

Dengan objek jQuery, element dalam DOM bisa kita manipulasi dengan method / fungsi yang tersedia dari objek jQuery, seperti click() untuk mendaftarkan event, slideToggle() untuk memberikan efek pada element terserbut, atau text() untuk mendapatkan text di dalam element.

Contoh selector lainnya: $(#nama-id-element) Misal untuk mendapatkan element dengan id alert-toggle-anchor dan memberinya warna text putih dan latar hitam: $("#alert-toggle-anchor").css({color: "white", backgroundColor: "black"}); $(.nama-class-element) 49

Misal untuk mendapatkan element dengan nama class hideMe dan menyembunyikan element tersebut adalah : $(".hideMe").hide(); $(nama-element) Misal untuk mendapatkan semua element p dan memberinya class yellow: $("p").addClass("yellow"); $(elementF > childElementF:first-child)

Misal untuk mendapatkan semua element span yang merupakan anak pertama dari element p dan memberinya class biru: $("p > span:first-child").addClass("biru"); $(input*@name=nama_element+) Misal untuk mendapatkan element input dengan name username dan memperoleh value-nya. $("input*@name=username+).val(); $(element_name:odd) Selector di atas akan mengambil element ganjil dari target element_name. Metode ini sering 50

digunakan pada element list dan table. Misal kita ingin memberikan class alt ke tr ganjil dari table dengan class mytable $("table.mytable tr:odd").addClass("alt"); Ragam selector lainnya dapat dilihat di API jQuery untuk Selector. DOM ( Document Object Model ) Selain selector dengan CSS, XPath, dan kustom lainnya, jQuery juga menyediakan fungsi-fungsi untuk menjelajahi DOM (traversing) seperti:

1 2 3 $("tr").css({border: "1px solid #000"}).filter(".alt").each(function(i){ $(this).append("yeah " + i); });

Pertama, cari semua tr, lalu beri border hitam setebal 1 pixel, dari semua tr tersebut ambil yang hanya memiliki class alt (filter). Dari tr yang sudah difilter, masing-masing (each) tambahkan text yeah + i, dimana i merupakan index (dimulai dari 0) dari hasil tr yang sudah difilter.

51

Contoh lainnya, misal unordered list : 1 2 3 4 5 6 <ul id="list"> <li>item ke-1</li> <li>item ke-2</li> <li>item ke-3</li> <li>item ke-4</li> </ul> Kita ingin membuat list ganjil dapat diklik dan jika diklik akan menampilkan list dibawahnya, yang sebelumnya sudah dihide. Kodenya: 1 $("#list").find("li:even").hide().end().find("li:o dd").click(function(){$(this).next().slideToggle();}) ; Kode bisa dipersingkat dengan cara chaining, dimana objek jQuery hanya memilih satu kali element dengan id list. Dengan metode chaining ukuran kode menjadi lebih kecil dibanding dengan kode berikut yang kurang lebih sama:

1 2

$("#list").find("li:even").hide();

52

$("#list").find("li:odd").click(function(){$(this).nex t().slideToggle();});

Yang pertama dilakukan adalah mendapatkan element dengan id list, lalu cari anak element li yang genap, sembunyikan element genap tersebut. Hal serupa bisa dilakukan dengan $("#list li:even").hide(), tapi dengan fungsi end() penulisan kode menjadi lebih singkat dan baik. Dengan end() kita mundur ke state element terpilih sebelumnya, yaitu element dengan id list. Lalu dilanjutkan lagi dengan mencari anak element li ganjil dan mendaftarkan penangan event onclick, dimana element list berikutnya (next()) akan diberi efek slideToggle saat element li ganjil ini di click. Kata this disini merujuk ke element sebenarnya (yaitu element li:odd). Jika menjadi parameter 53

bagi class jQuery (dalam hal ini menjadi $(this)), maka bisa dimanfaatkan method dari jQuery untuk Manipulasi DOM, Traversing, Event, dsb. Jika hanya this, maka akan mengacu ke elemen sebenarnya dan bisa kita manfaatkan properties atau method yang tersedia pada element tersebut, misal this.href, this.value, this.focus() atau this.reset().

Atribut dan Manipulasi DOM Selain menyediakan fungsi untuk mendapatkan element dalam DOM, jQuery juga menyediakan fungsi-fungsi untuk mendapatkan atribut dari element. Kodenya: $("#mybutton").click(function(){alert("type="+$(" input[@name=myinputtxt]").attr("type")+ "\nvalue="+$("input[@name=myinputtxt]").val()) ;}); Untuk mendapatkan nilai atribut element gunakan fungsi attr(). Fungsi ini juga bisa untuk menset nilai atribut dan membuang atribut dari element. Selain atribut element, jQuery juga menyediakan fungsi untuk memanipulasi class dari element, seperti: addClass(), hasClass(), 54

removeClass dan toggleClass(). Contoh lainnya, yaitu mengubah konten div berikut: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Untuk mengganti konten dalam div tersebut kita bisa menggunakan fungsi html() untuk memanipulasi element dalam DOM.

1 2 3 4 5 $(function(){ $("#lorem-ipsum-button").click(function(){ $("#lorem-ipsum-div").html("hell yeah..<br /><strong>jQuery</strong> rocks!!"); }); }); Serupa dengan method innerHTML, method html(value) akan mengisi konten dari elemen dengan value. Ada juga method text(value) yang 55

mengisi konten dari elemen dengan value, namun HTML diescape sehingga <" dan "> diganti dengan HTML entiti. Contoh manipulasi lainnya adalah append(). Misal: <div id="mydiv"><p>dalam sebuah paragraf</p></div> Dengan menggunakan append() $("#mydiv").append("<p>paragraf ke-2</p>") maka menjadi: <div id="mydiv"><p>dalam sebuah paragraf</p><p>paragraf ke-2</p></div> Banyak manipulasi untuk menyisipkan konten ke dalam element seperti : append(), appendTo, prepend(), prependTo(). Selain menyisipkan konten ke dalam, jQuery juga menyediakan fungsi untuk menyisipkan ke luar setelah/sebelum element, menyalin, mengganti dan menghapus element. Lebih lengkapnya ada di dokumentasi jQuery.

56

E. Membuat Element On The Fly Dengan javascript kita dapat membuat element kemudian menyisipkannya ke element lain dengan cara berikut: 1 2 3 4 var el = document.getElementById(id_element); var new_el = document.createElement("div"); new_el.appendChild(document.createTextNode("konten dalam div baru")); el.appendChild(new_el); Dengan jQuery: 1 $("<div>konten dalam div baru</div>").appendTo("#id_element");

Latihan 57

<html> <head> <title>Belajar Jquery</title> <script language="javaScript" src="../jquery-1.2.3.pack.js"></script> <script language="javaScript"> $(document).ready(function(){ $("a.pbw1").click(function(){ alert($("div.pr p").size()); }); $("a.test").click(function(){ $("div.pr p.second").hide("slow"); return false; }); $("a.testShow").click(function(){ $("div.pr p.second").show("slow"); return false; }); $("a.test2").click(function(){ $("div.pr").hide("slow"); return false; }); $("a.test3").click(function(){ $("div.pr").show("slow"); return false; }); $("#belajar").click(function(){ alert('hasil dari klik disini'); }); }); 58

</script> </head> <body> <br> <a class="pbw1" href="#">Link</a> || <a class="test" href="#">Test</a> || <a class="testShow" href="#">Test Show</a> || <a class="test2" href="#">Test2</a> || <a class="test3" href="#">Test3</a> <br> <div class="pr"> <p class="first" style="display: block;"> Pemrograman Berbasis Web 1 </p> <p class="second" style="display: block;"> Baris 2, Pemrograman Berbasis Web 1 </p> <div id="belajar"> Klik Disini </div> </div> </body> </html> Membuat aplikasi hello word dengan jQuery berisi semboyan jQuery yang bisa ditampilkan ataupun disembunyikan. Keterangan : 1. Menyertakan (include) file library JQuery. Pastikan letak dari file library sudah benar. 2. Perintah-perintah JQuery.

59

Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap ditampilkan maka jalankan juga perintah yang ada di dalamnya. Hal ini mirip dengan event onLoad yang biasanya diletakkan di tag <body>. Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link dengan class=show ( $(a.show) ) diklik (lihat link baris ke-22). Jadi jika link di-klik maka paragraf dengan nama class=jQuery ( $(p.jQuery) ) akan tampil dengan durasi tampil slow. Paragraf yang akan ditampilkan adalah paragraf baris ke-24 sampai 27. Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang mengandung nama class=jQuery.

F. Situs situs yang menggunakan jQuery Situs situs yang sudah menggunakan jQuery diantaranya adalah : Google - Kode pencarian IBM IBM GamesWorkshop A British permainan dan produksi perusahaan Retailing NBC - Official site untuk jaringan televisi NBC. MLB Official site of Major League Baseball MLB Official site Major League ESPN ESPN Oracle Enterprise Software National Instruments - Ujian dan peralatan pengukuran. Mozilla Firefox Addon Community 3 - A Mobile Media Company Britain's first and only pure play 3G operator. 3 - A Mobile Media Perusahaan Inggris pertama dan satu-satunya operator 3G murni bermain.

60

3Circle Studio 3Circle Studio is designer and developer, Justin Carroll. 3Circle Studio - Studio 3Circle adalah perancang dan pengembang, Justin Carroll.

G. Download jQuery Situs resmi JQuery dapat diakses di http://jQuery.com/. Dan library JQuery dapat didownload di alamat http://docs.jQuery.com/Downloading_jQuery. Tersedia library jQuery dalam 2 (dua) jenis yaitu minified dan uncompressed. Minified jika kita ingin menggunakannya saja dalam website kita (ukuran 18 KB), sedangkan uncompressed jika kita berkeinginan turut serta mengembangkan code jQuery.

61

BAB 4
MACROMEDIA DREAMWEAVER 8
A. PENGERTIAN Macromedia Dreamweaver adalah program untuk membuat dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript, PHP, ASP, ColdFusion, dan XML. B. Area Kerja Dreamweaver 8 62

Halaman Awal

C. Menu Di Dreamweaver

Pada halaman awal Dreamweaver 8 terdapat beberapa menu yang dapat dipilih : Open a Recent Item Pada menu ini akan ditampilkan beberapa file yang sebelumnya pernah kita buka dengan menggunakan Dreamweaver 8. Atau di paling bawah ada Open yang dapat digunakan untuk membuka file yang lain. Create New Pada menu ini kita dapat memilih dokumen baru apa yang akan kita buat dengan menggunakan Dreamweaver 8. Ada banyak pilihan, diantaranya HTML, ColdFusion, PHP, ASP, JavaScript, CSS.

63

Create From Samples Pada menu ini kita dapat membuat file berdasarkan contoh yang sudah diberikan oleh Dreamweaver

D. Halaman Utama Dreamweaver 8

Keterangan : 1. Toolbar Dokumen Toolbar dokumen digunakan untuk mengubah tampilan dan mengakses fungsi-fungsi penting secara cepat dan mudah. Pada toolbar dokumen terdapat 64

menu untuk berpindah antar dokumen kerja window dan mengatur tampilan area kerja. Untuk mengatur tampilan kita bisa memilih Code, Split dan Design. 2. Menu Utama Menu Utama berisi semua perintah yang dapat digunakan untuk bekerja pada Dreamweaver. 3. Insert Bar

Insert bar merupakan tempat semua perangkat kerja (tombol) tang digunakan untuk membuat halaman web. Insert bar mempunyai dua jenis tampilan, yaitu tampilan sebagai menu dan tampilan sebagai tab. Tab Common Berisi semua tombol yang sering atau umum digunakan untuk membuat halaman web. Tombol yang ada di Tab Common antara lain Hyperlink, Email Link, Named Anchor, Table, Images.

Tab Layout Tab layout digunakan untuk membuat layout halaman web. Terdapat tiga jenis layout yang dapat dipilih, yaitu Standard, Expanded dan Layout. 65

Untuk Standard view tampilan dokumen seperti biasa (berupa garis-garis tabel) Untuk Expanded view menampilkan border tabel yang direnggangkan sehingga semua rancangan tabel dapat dilihat dengan jelas baik itu baris dan kolomnya. Untuk Layout view rancangan tabel ditampilkan sebagai kotak-kotak yang dapat di-drag, dan diatur ulang ukurannya dengan mudah.

Tampilan Insert bar sebagai menu

Tab Form Tab form digunakan untuk membuat elemen dalam form, misalnya saja textarea, textfield, radio button, checkbox Tab Text

66

Tab text digunakan untuk membuat pengaturan text. Misalnya saja membuat text italic, strong, underline, h1. Tab HTML Tab HTML digunakan untuk membuat garis horizontal, menambahkan meta tag dalam tag <head>, dan frame. Tab Application Tab application digunakan jika aplikasi kita sudah berhubungan dengan suatu bahasa pemrograman dan sebuah database. Tab Flash elements Tab flash elements digunakan untuk memasukkan elemen flash dalam dokumen yang kita buat.

4. Code View Code View digunakan untuk melihat kode HTML dari halaman web yang sedang kita buat. 5. Panel Properties Panel properties merupakan panel yang digunakan untuk melihat dan mengubah property dari semua objek yang ada di area kerja. Masing-masing objek mempunyai property yang berbeda. Untuk melihat
67

property dari objek yang diinginkan, seleksi dulu objek tersebut. 6. Design View Design View digunakan untuk melihat tampilan web dari kode HTML yang kita buat.
Panel Group Panel group terdiri dari beberapa panel yang digunakan sebagai window pembantu untuk bekerja di Dreamweaver. Terdapat lima buah panel yaitu Design, Code, Application, Tag Inspector dan Files. Pada panel Files berisi semua files (html, image, swf) jika anda telah mendefinisikan suatu site ke dalam area kerja Dreamweaver. Pada panel code berisi semua penjelasan dari tag-tag HTML dan cara penggunaanya. Panel Design berisi format-format CSS yang ada pada dokumen yang sedang dikerjakan.

68

E. MENDEFINISIKAN SITE DENGAN DREAMWEAVER

Dreamweaver memberikan kemudahan dalam manajemen file yang digunakan dalam membuat halaman web. Untuk itu diperlukan pengaturan agar Dreamweaver mengenali file-file Anda. Mendefinisikan site artinya mendefinisikan project baru kepada area kerja Dreamweaver. 69

Untuk mendefinisikan site baru, klik menu site > Manage Site Kemudian pilih New > Site untuk menampilkan window baru yang berisi pengaturan site yang akan dibuat. Atau anda juga dapat mengaksesnya melalui menu utama Site > New Site. Pilih tab Advanced > Category > Local Info untuk mengatur folder-folder tempat file yang akan digunakan dalam membuat halaman web .

TABEL Dalam pembuatan website, tabel memiliki fungsi yang tidak kalah penting dengan tag-tag HTML lainnya. Pertama tabel berfungsi untuk menampilkan informasi secara terstruktur, ringkas dan mudah dibaca. Kedua,

70

tabel juga berfungsi untuk mengatur tampilan homepage agar lebih menarik. IMAGES HYPERLINK FORM

F. MEMBUAT MENU NAVIGASI DENGAN CSS o Sebenarnya menu navigasi bisa kita buat dengan menggunakan tabel. Tapi, kali ini kita akan menggunakan css. Kita membutuhkan dua buah file dalam tutorial ini , yaitu menuhoriz.html dan menuhoriz.css. Awalnya kita akan membuat 71

sebuah list item dan kemudian list item kita buat menjadi menu horizontal.
<!simpan dengan nama menuhoriz.html -> <html> <head> <title>Menu Navigasi</title> </head> <body> <div <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About Me</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> </body> </html>

72

menuhoriz.html di atas adalah kode HTML untuk membuat list. Tampilannya akan seperti ini :

Selanjutnya akan kita buat sebuah file menuhoriz.css untuk membuat tulisan menjadi huruf tebal, merubah jenis font dan ukuran font. o Dalam file menuhoriz.html juga kita tambahkan tag <link rel="stylesheet" type="text/css" href="menuhoriz.css" /> Maksudnya adalah agar file menuhoriz.css dapat kita jadikan external style sheet.
<html> <head> <title>Menu Navigasi</title> <link rel="stylesheet" type="text/css" href="menuhoriz.css" /> </head> <body>

73

<div id="navigation"> <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About Me</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> </body> </html> /* simpan dengan nama menuhoriz.css*/ #navigation { font-family: Arial, Helvetica, sansserif; font-size: 13px; font-weight: bold; }

Langkah berikutnya adalah kita akan menghilangkan lingkaran yang dibuat dengan 74

menggunakan tag <ul>. Tambahkan style berikut ke dalam file menuhoriz.css anda.
#navigation ul { list-style: none; /* untuk menghilangkan bullet */ margin: 0; /* gak usah dikasih jarak dengan elemen lain*/ padding: 0; /* antara border dan elemen tidak usah dikasih jarak*/ padding-top: 4px; /* tapi antara border atas dan elemen kita beri jarak 4px*/

Karena kita akan membuat menu horizontal, maka elemen <li> akan kita jadikan horizontal. Tambahkan style berikut ke dalam file menuhoriz.css anda
#navigation li { display: inline; /* membuat li menjadi horizontal */ }

Menu di atas sudah hampir jadi, hanya saja garis bawah yang ada dalam link sebaiknya dihilangkan. Tambahkan background dan ubah warna huruf. Tambahkan style berikut ke dalam file menuhoriz.css. 75

#navigation a:link, #navigation a:visited { padding: 3px 10px 2px 10px; /* menentukan jarak batas atas kanan bawah dan kiri masig-masing elemen*/ color: #ffffff; /* merubah warna huruf*/ background-color: #F38901; /* mengganti background color */ text-decoration: none; /* menghilangkan garis bawah*/ border: 1px solid #711515; /* memberikan border*/

Langkah terakhir adalah memberikan efek ketika kursor berada di atas link tersebut. Hal ini dimaksudkan untuk memberi perbedaan menu ketika user akan memilih sebuah menu.
#navigation a:hover {

76

color: #0099ff; /* merubah warna huruf*/ background-color: #ffffff; /* mengganti background color */ font-size : 15px; /* merubah ukuran huruf */ cursor: crosshair; /* merubah bentuk kursor */

Ini adalah isi lengkap file menuhoriz.css

/* simpan dengan nama menuhoriz.css */ #navigation { font-family: Arial, Helvetica, sansserif; font-size: 13px; font-weight: bold;

77

} #navigation ul { list-style: none; /* untuk menghilangkan bullet */ margin: 0; /* gak usah dikasih jarak dengan elemen lain*/ padding: 0; /* antara border dan elemen tidak usah dikasih jarak*/ padding-top: 4px; /* tapi antara batas atas dan elemen kita beri jarak 4px*/ } #navigation li { display: inline; /* membuat li menjadi horizontal */ } #navigation a:link, #navigation a:visited { padding: 3px 10px 2px 10px; /* menentukan jarak batas atas kanan bawah dan kiri masig-masing elemen*/ color: #ffffff; /* merubah warna huruf*/ background-color: #F38901; /* mengganti background color */

78

text-decoration: none; /* menghilangkan garis bawah*/ border: 1px solid #711515; /* memberikan border*/ } #navigation a:hover { color: #0099ff; /* merubah warna huruf*/ background-color: #ffffff; /* mengganti background color */ font-size : 15px; /* merubah ukuran huruf */ cursor: crosshair; /* merubah bentuk kursor */ }

G. MEMBUAT FLASH TEXT Flash text hampir sama dengan rollover, bedanya flash text hanya merubah warna huruf saja. Masuk ke menu Insert -> Media -> Flash Text. Pilih jenis huruf, ukuran dan atribut font lainnya.

79

Kolom Color digunakan untuk menentukan warna huruf Kolom Rollover Color digunakan untuk menentukan warna huruf ketika kursor melewati huruf awal. Kolom text adalah text yang akan ditampilkan Kolom Link adalah URL dari text tersebut ketika diklik Bg Color digunakan untuk menentukan latar belakang huruf Kolom save as adalah nama file yang akan disimpan

H. MEMBUAT NAVIGASI BAR Navigasi bar merupakan sekumpulan image yang digunakan seperti menu untuk menjelajahi isi web tersebut. Masuk ke menu Insert -> Image Objects -> Navigation Bar Tanda + dan digunakan untuk menambahkan atau mengurangi menu. 80

Kolom Element name digunakan untuk menentukan nama menu Kolom Up image digunakan untuk memilih gambar awal Kolom Over Image digunakan untuk mengganti gambar awal ketika kursor meleawti gambar awal Kolom Down image digunakan untuk mengganti gambar awal ketika kursor diklik Kolom Over while down image digunakan untuk mengganti gambar jika gambar yang asli belum selesai diload Kolom alternate text digunakan untuk text alternative Kolom When clicked, go to URL digunakan untuk menentukan URL jika menu diklik Checkbox Preload Images digunakan untuk menentukan apakah gambar akan diload sebelumnya Checkbox Show Down image initially digunakan untuk menentukan apakah gambar pada Kolom Over while down image akan diload paling awal Menu Insert digunakan untuk menentukan apakah menu akan dibuat secara vertical atau horizontal.

81

82

I.

CASCADING STYLE SHEET

CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style yang akan digunakan pada sebuah website. CSS adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML atau sekedar mejadi rujukan oleh HTML dalam pendefinisian style. CSS menggunakan kode-kode yang tersusun untuk menetapkan style pada elemen HTML atau dapat juga digunakan membuat style baru yang biasa disebut class CSS dapat mengubah besar kecilnya text, mengganti warna background pada sebuah halaman, atau dapat pula mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan oleh CSS. Singkatnya, CSS digunakan untuk mengatur susunan tampilan pada halaman HTML.

Ada 3 tipe CSS berdasarkan peletakannya dalam sebuah dokumen HTML External Style External style sheets merupakan dokumen css yang disimpan dalam file berbeda dengan file HTML. File ini berekstension .css

83

Untuk menyertakan file css, letakkan tag berikut ke dalam <head> <link rel="stylesheet" type="text/css" href=namafile.css" /> </head> Biasa dipakai jika beberapa menggunakan style yang sama. halaman akan

Internal Style : CSS diletakkan di antara tag <head> <style type=text/css> letakkan css di sini </style> </head>

Inline Style : CSS diletakkan di dalam tag HTML <h1 style=color: #0099ff;font-family: verdana; size: 18pt;>

84

J.

DREAMWEAVER DAN CSS PANEL Untuk membuat CSS di Dreamweaver, telah tersedia CSS Panel. CSS Panel dapat dimunculkan melalui menu Window >> CSS Styles

All Mode All Rules Menampilkan semua styles yang ada. Properties Menampilkan spesifik style yang terpilih

85

Current Mode Summary for Selection Menampilkan spesifik style yang terpilih (tidak bisa diedit) Rules Menampilkan nama style dan pada tag mana style ini digunakan Properties Menampilkan spesifik style yang terpilih dan bisa diedit Attach Style Sheet Menampilkan dialog box untuk menambahkan external style sheet pada dokumen 86

New CSS Rule Menampilkan dialog box untuk membuat aturan CSS yang baru Edit Style Sheet Menampilkan dialog box untuk mengubah aturan CSS yang sedang dipilih Delete CSS Rules Menghapus aturan CSS yang sedang terpilih Show Category View
Membagi CSS properties meenjadi 9 kategori. Font, Background, Block, Border, Box, List, Positioning. Extentions, dan Tables, Content, Quotes

Show List View Menampilkan CSS properties berdasarkan alphabet secara berurutan Show Only Set Properties Hanya menampilkan CSS properties yang diipilih saja

87

K. ISTILAH DALAM STYLE SHEET Style rule Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H1> di tampilkan dengan warna biru. Selector selector { property1: value; property2:value, . . .} H1{ color:green; background-color:orange}

Style sheets terdiri dari dua bagian: Selector , adalah nama dari style, bisa berupa tag seperti <p> atau nama lain seperti .header Bagian pertama sebelum tanda ,- disebut selector Declaration, adalah spesifikasi dari elemen pada style Terdiri dari property dan value Antara property yang satu dan yang lainnya dipisahkan dengan tanda ; (titik koma)

88

Meng-attach Style Sheet ke dalam dokumen HTML

Anda dapat menyertakan style sheet yang sudah ada ke dalam dokumen HTML Klik kanan pada dokumen HTML yang sedang diedit di Dreamweaver, pilih CSS Styles >> Attach Style Sheet Pilih file CSS yang akan di-attach Anda bisa memilih radio button Add as Link, jika ingin meng-attach sebagai external style Atau pilih Import jika ingin menjadikannya internal style

Menambahkan style baru atau style yang sudah ada Untuk menambahkan style baru, bisa melalui beberapa cara Klik kanan di bawah CSS Panel dan pilih New Melalui menu Text >> CSS Styles >> New

89

Setelah tampil dialog box di atas, pilih dahulu selector type Class, membuat style yang dapat digunakan untuk banyak content halaman seperti text, gambar, layer. Pada kotak name tuliskan nama style dan diawali dengan tanda titik (.) Misalnya .kotak Tag , mendefiniskan ulang tag HTML yang sudah ada. Pada kotak name pilih tag HTML yang ada. Advanced, membuat style yang merupakan kombinasi dari tag HTML, dan tag dengan spesifik id. Misalnya saja a:hover, a:link, a:visited Pada pilihan define in, pilih New Style Sheet File, jika Anda ingin membuat style CSS pada file yang baru This document only, jika Anda ingin membuat CSS pada dokumen yang sedang aktif Klik OK, sehingga akan muncul dialog box rule definition

90

L. Kategori-kategori yang ada pada CSS Properties Type

Background

Block

91

Border

Box

92

List

Positioning

Extentions

93

M. MEMBUAT PARAGRAF DAN DAFTAR LIST 1. Membuat Paragraf Anda dapat mulai meletakkan kalimat text di halaman web dalam bentuk paragraf, maka untuk keperluan ini HTML menyediakan tags <P>. Perintah ini mempunyai beberapa atribut. Tag <P> umumnya untuk menandai suatu paragraf baru. Anda juga dapat menggunakan tag <BR> untuk memulai baris baru, namun pemakaian tag <P> terutama digunakan untuk membuat group paragraf dengan formatting style tertentu. Sama halnya dengan tag heading, tag paragraf <P> memiliki atribut untuk mengatur alignment atau pengatur posisi, yaitu left untuk meratakan paragrap di kiri, right untuk perataan sebelah kanan, dan 94

center untuk meletakkan pada posisi tengah horizontal.

Untuk

melihat

properti

tag

paragraf

ini

di

Dreamweaver bisa dengan cara seperti pada tag <body> diatas, yaitu Ctrl+F5 dengan cursor text diletakkan tepat di tag <P>. 2. Membuat Daftar/List Dalam praktikum Pemrograman Web ini

diperkenalkan cara membuat daftar atau list, yaitu bisa dengan 3 macam cara, yaitu : unordered list ordered list definisi

Unordered List Unordered list biasanya ditandai dengan pemakaian bullet untuk menandai sebuah item dari list. Bullet 95

adalah karakter tertentu yang berupa karakter symbol, misalkan bullet dengan bentuk tanda panah, rumah, segitiga, dan sebagainya. Untuk membuat list dengan menggunakan sebuah bullet di gunakan tag <UL> (unordered list) sebagai tanda tag awal dan </UL> sebagai tanda tag penutup. Untuk item-item di dalam list harus diawali dengan tag <LI> dan boleh tidak memakai tanda akhir tag. Bentuk default tanda item dalam tag <UL> adalah bullet. Untuk mengubah Anda dapat menggunakan atribut TYPE dengan diikuti nilai kontanta. Konstanta ini mewakili karakter symbol yang akan digunakan. Sedangkan item-item dari daftar tadi ditandai dengan memberikan tag <LI>. Ordered List Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered list dimulai dengan tag <OL> dan diakhiri dengan tag </OL>. Ordered list mempunyai beberapa tipe penomoran yang dapat digunakan, yaitu :

96

Attribute Description
COMPACT Render list dalam compact form TYPE=A TYPE=a TYPE=I

Setting marker menjadi huruf besar Setting marker menjadi huruf kecil Setting marker menjadi uppercase Roman numerals Setting marker menjadi lowercase Roman numerals Setting marker menjadi nomor

TYPE=i

TYPE=1

START=n Setting marker mulai dari n

Apabila Anda menuliskan atribut TYPE pada tag <OL> maka tipe tersebut akan dipakai sebagai default dari seluruh item. Namun Anda juga dapat memberikan tipe untuk masing-masing item, yaitu dengan memberikan atribut TYPE pada tag <LI>. Atribut START dipakai pada tag <OL> dan digunakan untuk menentukan nomor dari item pertama. 97

DAFTAR PUSTAKA
http://www.google.co.id http://www.wikipedia.com http://www.zaefhpoels.blogspot.com swishmax menu dan ilmu computer.com www.universitasmercubuana.com http://www.zaskia.wordpress.com

98

99