buku webdesain
DESCRIPTION
Buku WebdesainTRANSCRIPT
KATA PENGANTAR
Rasa syukur saya ucapkan kepada Tuhan Yang Maha
Esa, atas berkat dan rahmatNya diberikan kepada saya,
sehingga penulisan buku “ WEB DESIGN “ ini dapat
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,
1
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 ISI2
JUDUL ........................................................................................ 1
KATA PENGANTAR .................................................................... 2
DAFTAR ISI ................................................................................ 4
BAB 1
Adobe Photoshop ...................................................................... 6
A. Pendahuluan ........................................................................ 6B. Mengenal Adobe Photoshop beserta toolbar dan
Ikonnya ................................................................................. 8C. Selection tool serta permainan warna .................................. 12D. Teks dan Vektor .................................................................... 19E. Layer, mask, dan style........................................................... 21F. Efek khusus Adobe Photoshop ............................................. 23
BAB 2
Swish Max ................................................................................... 25
A. Pendahuluan ........................................................................ 25B. Mengenal Swish Max ............................................................ 27C. Menu-menu pada swish max ............................................... 29D. Elemen dasar swish max ....................................................... 36
BAB 3
JQuery .................................................................................. 41
A. Pengertian jQuery................................................................. 41
3
B. Sejarah jQuery ..................................................................... 42C. Manfaat jquery ..................................................................... 45D. Cara penggunaan jquery ....................................................... 46E. Membuat elemen on the fly ................................................. 59F. Situs yang menggunakan jquery ........................................... 62G. Download jQuery .................................................................. 63
BAB 4
Macromedia Dreamweaver 8 ..................................................... 64
A. Pengertian ............................................................................ 64B. Area kerja dreamweaver 8 ................................................... 64C. Menu di dreamweaver 8 ...................................................... 65D. Halaman utama Dreamweaver 8 .......................................... 66E. Mendefinisikan site dengan dreamweaver .......................... 71F. Membuat menu navigasi dengan CSS ................................... 73G. Membuat Flash Text ............................................................. 81H. Membuat Navigasi Bar ......................................................... 82I. Cascading style sheet ........................................................... 84J. Dreamweaver CSS panel ....................................................... 86K. Istilah dalam Style Sheet ...................................................... 89L. Kategori pada CSS propertis ................................................. 92M. Membuat Paragraf dan Daftar List ....................................... 96
DAFTAR PUSTAKA
4
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 seakan-
akan 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
AB
C
D
E F
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 KerjaJalankan 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.
Area kerja Adobe Photoshop dapat dilihat pada gambar 1.1, yaitu:
a. Menu Bar, berisi perintah utama untuk membuka file, save,
7
mengubah ukuran gambar, filter dan lain-lain.b. Option,
berisi pilihan dari tool yang Anda pilih. Misalnya dipilihkuas/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
8
9
Praktek Bagian IPada 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 CS2Untuk membuka gambar gunakan menu File -> Open, sedangkan untuk membuat duplikat gambar gunakan menu Image -> Duplicate.2. Mengubah ukuran gambar dan kanvasJika ukuran gambar diubah, maka gambar akanmembesar atau mengecil, lakukan dengan menuImage -> Image Size. Jika ukuran kanvas diubah,maka ukuran gambar tetap, akan ada kertas putih disekeliling gambar, lakukan dengan menu Image ->Canvas Size.3. Memindahkan gambar ke dokumen lainUntuk memindahkan gambar gunakan Move Tool,dengan catatam gambar yang akan kita pindahkantelah terseleksi.
10
B. SELECTION TOOL SERTA PERMAINAN WARNA
Menyeleksi GambarMenyeleksi 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 kolom2. Lasso Tool, untuk menyeleksi dalam bentuk bebas,
poligonal atau kekontrasan gambar (Magnetic Lasso Tool).
11
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
Permainan Warna1. Sekilas mengenai warnaWarna 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 II1. 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
12
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 ToolSeleksi ini digunakan untuk menyeleksi bentuk
bebas dengan mouse.
4. Polygonal Lasso ToolPolygonal 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 seperti Lasso Tool biasa. Contoh gambar hasil seleksi piramida diperkecil dan diletakkan pada sudut kanan bawah.
5. Magnetic Lasso ToolMagnetic 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 ToolMagic wand tool akan menyeleksi gambar yang
memiliki warna sama.
7. Crop Tool
13
Crop tool digunakan untuk menghilangkan bagian yang tidak diseleksi. Contoh penggunaanya di sini digunakan untuk memperbaiki hasil scan yang miring.
8. Healing Brush ToolHealing 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 ToolSpot 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 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 ToolPatch 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 ToolRed Eye Tool digunakan untuk memperbaiki
warna merah pada mata.
14
12. Clone Stamp ToolClone 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 ToolTool ini digunakan untuk menghapus background
yang memiliki kemiripan warna. Misalnya digunakan untuk menghapus background langit pada gambar kupu-kupu.
14. Magic Eraser ToolSeperti 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 ToolColor 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 ToolPaint Bucket Tool digunakan untuk mengganti background yang memiliki warna sama atau mirip. Background dapat diganti dengan pattern.
17. Gradient Tool
15
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 ToolBrush 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/ContrastBrightness digunakan untuk mengatur kecerahan gambar. Contrast digunakan untuk mengatur ketajaman gambar. Gunakan menu Image -> Adjustment -> Brightness/Contrast.
20. LevelLevel 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. CurvesCurves 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
16
Melalui menu Image -> Adjustment -> Color Balance kita dapat mengatur keseimbangan warna.
23. Photo FilterPhoto filter digunakan untuk memberikan filter pada gambar. Mirip seperti filter yang diletakkan di depan lensa kamera. Gunakan menu Image -> Adjustment -> Photofilter.
24. Replace ColorReplace 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.
25. Hue/SaturationHue/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 ColorMatch 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 ToolHorisontal Type Tool digunakan untuk membuat teks secara horisontal. Hasil teks dapat dipindahkan dengan Move Tool.
18
Horisontal Type Mask ToolHorisontal Type Mask Tool digunakan untuk menyeleksi dalam bentuk teks.
Vektor
Pen ToolPen 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.
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 LayerLayer adalah lapisan tembus pandang. Bagian yang tidak bergambar pada sebuah layer bersifat transparan. Layer dapat ditumpuk dan diatur susunannya. Dengan menggunakan layer, efek-efek akan berlaku dalam layer tertentu saja, tanpa mengganggu layer yang lain.
Quick Mask Mode
20
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 MaskLayer Mask digunakan untuk menyembunyikan bagian tertentu pada layer. Gunakan warna hitam untuk menyembunyikan gambar dan warna putih untuk menampilkan gambar.
Layer StyleLayer Style merupakan teknik memberikan efek tertentu pada suatu layer. Pilih tool Add Layer Style yang ada pada sudut kanan bawah pallete.
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
21
Hasil Filter Liquify
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 StyleLayer Style menambahkan efek ke objek dalam
satu layer yang Anda pilih
E. EFEK KHUSUS ADOBE PHOTOSHOP
Filter LiquifyFilter 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.
22
Gambar hasil Filter Blur
Filter Vanishing PointFilter 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.
Filter BlurFilter Blur digunakan untuk mengaburkan gambar. Yang menarik dalam filter ini adalah mengaburnya gambar dapat dibuat secara radial. Gunakan filter ini melalui menu Filter -> Blur.
23
BAB 2
SWISH MAX
24
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.
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.
25
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 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
26
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.
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
27
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 :
a. File
Menu file memiliki beberapa submenu, diantaranya :
- New (Ctrl+N) : digunakan untuk membuat movie baru
- Open (Ctrl+O) : digunakan untuk membuka file .swi (movie Swishmax) atau file- file
28
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.
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
29
- Paste : digunakan untuk mem-paste 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 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
30
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 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.
31
- 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 property dari satu objek. Menu yang paling sering nanti digunakan adalah :
Grouping :
- Group as Group : digunakan untuk menjadikan sekelompok objek menjadi
32
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
Menu Control menyediakan fasilitas bagaiman movie terseut akan dimainkan dandi preview.
Submenunya antara lain :
- Play Movie : Memainkan movie secara keseluruhan
33
- Play Timeline : untuk memainkan Scene atau Sprite yang sedang aktif
- Play Effect : untuk memainkan bagan dari Scene yang mengandung efek yang dipilih
- Stop : untuk menghentikan movie, scene, atau efek yang sedang dimainkan.
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.
- 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.
34
- 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 bentuk-bentuk 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 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.
35
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 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
36
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 :
- Shape Objects
- Button Objects
- Sprite Objects
- Instance Objects
37
- 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 item-itemnya dalam sebuah movie. Swishscript dapat digunakan untuk :
- 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
38
- 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
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
39
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
JQUERYA. PENGERTIANJQuery 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 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
40
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 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
41
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
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
42
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 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
43
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 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
44
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'); }); });
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,
45
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 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:
46
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="#toggle-hidden-div">Klik di sini untuk menimbulkan atau menyembunyikan</a> <div id="hidden-div" style="display: none"> Konten dalam div </div>
Dengan fungsi $(document).ready()telah memisahkan behavior dan struktur, sehingga
47
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"});}); });
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).
48
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-toggle-anchor").click(function(){alert($(this).text()};);
Dengan penulisan kode JavaScript biasa, mendapatkan element dengan id alert-toggle-anchor document.getElementById("alert-toggle-anchor"), dengan jQuery menjadi $("#alert-toggle-anchor"). String berupa id element merupakan parameter bagi konstruktor class jQuery.
Jadi untuk menginisialisasi objek jQuery adalah dengan $(params) dimana params adalah string yang umumnya merupakan nama element, class atau id dari element di DOM.
49
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”)
Misal untuk mendapatkan element dengan nama class hideMe dan menyembunyikan element tersebut adalah :
$(".hideMe").hide();
50
$(”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 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");
51
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.
Contoh lainnya, misal unordered list : 1 2 3 4
52
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:odd").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(); $("#list").find("li:odd").click(function(){$(this).next().slideToggle();});
53
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 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
54
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(), 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
55
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 mengisi konten dari elemen dengan value, namun HTML diescape sehingga “<" dan ">” diganti dengan HTML entiti. Contoh manipulasi lainnya adalah append().
Misal:
56
<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.
57
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 <html><head>
<title>Belajar Jquery</title><script language="javaScript"
src="../jquery-1.2.3.pack.js"></script><script language="javaScript">
58
$(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');});
});</script>
</head><body><br> <a class="pbw1" href="#">Link</a> || <a class="test" href="#">Test</a> ||
59
<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. • 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
60
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. 3Circle Studio – 3Circle Studio is designer and developer, Justin Carroll. 3Circle Studio - Studio 3Circle adalah perancang dan pengembang, Justin Carroll.
61
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.
62
BAB 4MACROMEDIA DREAMWEAVER 8
A. PENGERTIANMacromedia 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 Halaman Awal
63
C. Menu Di Dreamweaver
Pada halaman awal Dreamweaver 8 terdapat beberapa menu yang dapat dipilih :
Open a Recent ItemPada 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 NewPada 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.
Create From SamplesPada menu ini kita dapat membuat file berdasarkan contoh yang sudah diberikan oleh Dreamweaver
64
D. Halaman Utama Dreamweaver 8
Keterangan :
1. Toolbar DokumenToolbar dokumen digunakan untuk mengubah tampilan dan mengakses fungsi-fungsi penting secara cepat dan mudah. Pada toolbar dokumen terdapat menu untuk berpindah antar dokumen kerja window dan mengatur tampilan area kerja. Untuk mengatur tampilan kita bisa memilih Code, Split dan Design.
2. Menu UtamaMenu Utama berisi semua perintah yang dapat digunakan untuk bekerja pada Dreamweaver.
3. Insert Bar
65
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 LayoutTab layout digunakan untuk membuat layout halaman web. Terdapat tiga jenis layout yang dapat dipilih, yaitu Standard, Expanded dan Layout.
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.
66
Tampilan Insert bar sebagai menu
Tab FormTab form digunakan untuk membuat elemen dalam form, misalnya saja textarea, textfield, radio button, checkbox
Tab TextTab text digunakan untuk membuat pengaturan text. Misalnya saja membuat text italic, strong, underline, h1.
Tab HTMLTab HTML digunakan untuk membuat garis horizontal, menambahkan meta tag dalam tag <head>, dan frame.
Tab ApplicationTab application digunakan jika aplikasi kita sudah berhubungan dengan suatu bahasa pemrograman dan sebuah database.
67
Tab Flash elementsTab flash elements digunakan untuk memasukkan elemen flash dalam dokumen yang kita buat.
4. Code ViewCode View digunakan untuk melihat kode HTML dari halaman web yang sedang kita buat.
5. Panel PropertiesPanel 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 property dari objek yang diinginkan, seleksi dulu objek tersebut.
6. Design ViewDesign 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.
68
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.
69
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.
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 .
70
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, tabel juga berfungsi untuk mengatur tampilan homepage agar lebih menarik.
IMAGES HYPERLINK FORM
71
F. MEMBUAT MENU NAVIGASI DENGAN CSSo 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 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>
72
</ul>
</div>
</body>
</html>
o menuhoriz.html di atas adalah kode HTML untuk membuat list. Tampilannya akan seperti ini :
o 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>
73
<link rel="stylesheet" type="text/css" href="menuhoriz.css" />
</head>
<body>
<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, sans-serif;
font-size: 13px;
74
font-weight: bold;
}
o Langkah berikutnya adalah kita akan menghilangkan lingkaran yang dibuat dengan 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*/
o 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 */
}
75
o 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.
#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*/
76
o 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 {
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 {
77
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}
#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
78
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*/
}
#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 */
}
79
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. 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
80
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. 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
I. CASCADING STYLE SHEET
82
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 StyleExternal 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 halaman akan menggunakan style yang sama.
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 RulesMenampilkan semua styles yang ada.
PropertiesMenampilkan spesifik style yang terpilih
85
Current Mode
Summary for SelectionMenampilkan spesifik style yang terpilih (tidak bisa diedit)
RulesMenampilkan nama style dan pada tag mana style ini digunakan
PropertiesMenampilkan spesifik style yang terpilih dan bisa diedit
Attach Style SheetMenampilkan dialog box untuk menambahkan external style sheet pada dokumen
86
New CSS RuleMenampilkan dialog box untuk membuat aturan CSS yang baru
Edit Style SheetMenampilkan dialog box untuk mengubah aturan CSS yang sedang dipilih
Delete CSS RulesMenghapus aturan CSS yang sedang terpilih
Show Category ViewMembagi CSS properties meenjadi 9 kategori. Font, Background, Block, Border, Box, List, Positioning. Extentions, dan Tables, Content, Quotes
Show List ViewMenampilkan CSS properties berdasarkan alphabet secara berurutan
Show Only Set PropertiesHanya menampilkan CSS properties yang diipilih saja
87
K. ISTILAH DALAM STYLE SHEETStyle 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 .headerBagian pertama sebelum tanda “{}” disebut selector
Declaration, adalah spesifikasi dari elemen pada styleTerdiri 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 Setting marker menjadi huruf besar
TYPE=a Setting marker menjadi huruf kecil
TYPE=I Setting marker menjadi uppercase Roman numerals
TYPE=i Setting marker menjadi lowercase Roman numerals
TYPE=1 Setting marker menjadi nomor
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