PHOTOSHOP

Software pengolah foto terhandal sedunia

DREAMWEAVER

Software yang di gunakan untuk operasi pembuatan website

JAVA

Materi java dan mengenal java lebih dalam

MYSQL

Pengolah Database yang sangat friendly

WINDOWS 8

OS terbaru dari Microsoft windows yang kini sedang mendunia.

Sabtu, 15 Desember 2012


MERENCANAKAN SEBUAH WEBSITE
Dalam membuat website harus direncanakan terlebih dahulu apa tujuan dari
pembuatan website, informasi-informasi apa yang akan diberikan dan kepada siapa
informasi-informasi tersebut dituju.
Macromedia Dreamweaver adalah salah satu program pembuatan website yang
mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk
mendesain website yang lebih kreatif dan membuat sebuah site yang komplit. Untuk
mendapatkan hasil lebih bagus, harus didesain dan direncanakan lebih dahulu tiap-tiap
halaman site yang ada.
Rencana dan desain sebuah site
Ketika memulai merencanakan membuat website, diharapkan melakukannya secara
bertahap dan terencana untuk memastikan situs yang dibuat baik dan berhasil. Walaupun
hanya akan membuat homepage pribadi yang hanya akan dilihat dan dikunjungi oleh
teman dan keluarga. Bagi seorang pengajar situs pribadi bisa digunakan untuk
memberikan informasi dan layanan ajar online untuk siswa .
Menentukan tujuan Membuat Web site
Menentukan tujuan site adalah langkah pertama kali yang harus diambil dalam
pembuatan sebuah website. Tulis semua tujuan dan harapan dari pembuatan website, agar
dapat mengingat saat proses mendesain website. Tujuan-tujuan tersebut akan sangat
membantu agar tetap terfokus dan mempunyai target terhadap website yang diinginkan.
Sebuah website yang memberikan berita-berita dengan subjek tertentu sangat berbeda
dengan website yang menjual produk atau komersial.
Memilih sasaran pengunjung situs
Setelah menentukan apa yang diinginkan untuk menyelesaikan website, tentukan
siapa saja atau sasaran pengunjung situs.

Jumat, 14 Desember 2012

Copy dan Paste Selection


Copy dan Paste Selection

Tutorial Photoshop kali ini mengenai copy dan paste selection, mungkin ini adalah pelajaran dasar tapi hal ini diperlukan bagi pemula yang baru mengenal photoshop agar lebih paham apa yg dimaksud seleksidan layer
Tutorial ini merupakan kelanjutan dari sekian tutorial dasar yg disuguhkan disini sebagai pengembangan dari proses seleksi dan pengenalan layer

Sesuai dengan pengalaman penulis dalam hal ini saya pribadi ^_^ dalam menggeluti Photoshop pertama kali memang kesulitan dalam membuat bangun kotak lingkaran maupun bangun lainnya. inilah yg membedakan antara bermain photoshop dan coreldraw , di coreldraw kita bisa dengan mudah membuat bangun bangun vector dengan hanya menggunakan rectangle tool namun di photoshop kita harus pandai - pandai memanfaatkan seleksi (selection).

Seleksi (selection) merupakan magic yang harus dikuasai dalam photoshop apapun dan bagaimanapun caranya. Keahlian seorang master photoshop dimulai dari tahap ini.
Demikian gambaran tentang photoshop semoga bermanfaat bagi para pembaca 

Nah saatnya pengenalan cara pembuatan bangun (kotak) dengan memanfaatkan selection tool

1. Buka Photoshop , disini sy menggunakan photoshop cs4 namun hal ini bukan masalah bagi anda yg masih menggunakan photosohp 7 , CS , CS2 maupun CS3 karena teknik ini bisa diaplikasikan di photoshop manapun

2. Buat lembar kerja baru
Caranya: File >> New (CTRL + N)
Langsung saja tekan OK menurut default photoshop anda

3. Sekarang Buat NEW LAYER (CTRL + SHIFT + N)
nah inilah tadi yg membedakan photoshop dan coreldraw, di corel kita tidak perlu repot membuat layer baru, namun jika di photoshop anda harus membuat layer baru agar gambar yg anda punya tidak tercampur dengan gambar yang lainnya.
Contoh:
buat seleksi dengan 
tutorial photoshop
Rectangular marquee tool (M) dan taruh pointer ke kanvas ( Lembar kerja anda)
Tahan Klik kanan dan terbentuklah seleksi yang ditandai dengan bintik - bintik hitam putih
tutorial photoshop

Klik Fill Tool
tutorial photoshop
Lalu klik seleksi yang anda buat tersebut 
taraa akhirnya jadi berwarna
tutorial photoshop
tekan CTRL + D untuk menghilangkan seleksi / bintik hitam putih tersebut

Nah disini kita bisa lihat bahwa kita mempunyai dua buah layer:
tutorial photoshop
yang artinya bangun kotak yang kita buat akan memiliki kebebasan bergerak yang tinggi (FREE)

4. ok sekarang sesuai judul tutorial ini maka kita akan membahas mengenai membuat copy (cara mengcopy) dari seleksi agar bangun yang kita buat simetris
buat seleksi lagi dengan
tutorial photoshop
Rectangular marquee tool (M)
kira - kira seperti ini
tutorial photoshop
Lalu Tekan CRTL + C (ini adalah perintah untuk meng COPY) dilanjutkan ke CTRL + V (perintah untuk memPASTE hasil copy)
VIOLA 
tutorial photoshop
kita dapatkan bangun yang dimetris

Dengan teknik diatas anda bisa membuat berbagai hal, contohnya bendera INDONESIA:
tutorial photoshop

MENDRAMATISIR AWAN



Bahan

Tehnik yang dibutuhkan
  • Blending
  • Masking

Posting Kali ini kita akan mencoba mengganti awan pada sebuah foto outdoor, agar tampak lebih menarik untuk dilihat, tutorial Mendramatisir Awan ini membahas tentang penerapan tehnik blending dan juga Masking atas saran dari Teman Kaskuser saya rodenroll pada thread Untuk Yang Lagi Belajar Photoshop di Kaskus 

Step 1
Koreksi Kecerahan foto dengan Exposure Adjusment
Masukkan Nilai Exposure sebesar +0.43 Offset tetap 0.000 dan Gamma Correction sebesar 1.30


Step 2
Buka Gambar Awan Lalu Masukkan gambar awan dengan Move Tool dengan cara klik dan tahan sampai ke dalam foto original


Step 3
Atur Posisi Awan hingga menutupi seluruh bagian atas foto original, kemudian lakukan Blending Darken pada layer awan


Step 4
Masking Layer Awan,Tool Masking terdapat pada Pallete Layer add Layer Mask. untuk mengenal tool masking dapat dilihat di postingan saya sebelumnya Mengenal Pallete Layer pada Photoshop Lalu bersihkan sisa maskingan gambar awan yang menimpa layer foto original,
Sebelum membersihkan maskingan layer awan terlebih dulu Reset Foreground dan Background Color ke default ( Foreground berwarna Hitam dan Background berwarna Putih ) Shortcut reset Foreground dan Background color adalah dengan menekan tombol [D] pada keyboard,
Karna prinsip dasar tehnik masking adalah untuk menghilangkan / menyembunyikan area terpilih adalah dengan warna hitam, sedangkan untuk mengembalikan nya adalah dengan warna putih
Setelah Melakukan Reset Foreground dan Background Color Lalu pilih Tool Brush, setelah tool brush terpilih kita bisa memulai membersihkan sisa Maskingan awan yang mengenai layer Foto Original


TEKNIK CUTTING


Mempelajari Cutting atau Seleksi Lebih Dalam

Pembahasan Tools Selection Photoshop saya sudah menjelaskan beberapa Fungsi dari tools seleksi, disini Saya akan menjelaskan lebih lanjut apa dan bagaimana penggunaan tool seleksi

Sebagian Besar Tutorial menyarankan seleksi area dengan menggunakan Pen Tool, Saya secara pribadi menyarankan seleksi area dengan menggunakan Selection Tools, Kenapa ? Karna Selection Tools dapat menyeleksi secara detail, sampai kebagian terumit sekalipun, dalam pelajaran ini, Latihan dan kesabaran serta ketekunan sangat di perlukan, untuk mendapatkan hasil yang akhir yang maksimal.

Butuh Waktu lebih dari 1 Hari untuk memahami Selection Tools ( ini menurut Saya Pribadi ) mungkin bisa sekitar 3 Hari, Seminggu, Bahkan Lebih, Tergantung Niat dan ketekunan kita. ada beberapa tools dalam Selection Tools, seperti yang telah saya Bahas Pada Posting Tools Selection Photoshop tapi disini akan Saya Bahas 3 Tool Saya, Magic WandLasso Tool, dan Poligon Lasso.
Lho.... Kenapa Hanya 3 ?
Cukup Pahami 3 Tool ini Maka Tool Selection Lain nya nga usah saya jelasin juga bisa sendiri, karna memiliki prinsip yang sama

Kita Langsung ke Studi Kasus. Karna Biasa nya Kalo di Praktek-in bisa Cepet ngertinya. Disini Saya Kasih Gambar buat Latihan

Download Gambar Latihan << Klik Kanan Save Link As
Kita Langsung Ke Latihan Bila Gambar nya telah di Donwload. Buka Gambar yang telah di Download pada Photoshop, kemudian Aktifkan Magic Wand
Perhatikan Gambar di bawah ini, Pada Menu Option Magic Wand ada pilihan Opsi Add to selection, aktifkan opsi ini, bila opsi ini aktif maka, secara otomatis seleksi akan bertambah bila kita menyeleksi area berbeda



Sebelum kita melangkah lebih jauh, Saya Akan memberikan Gambaran Tujuan Akhir dari pembahasan kali ini, Gambar di bawah ini adalah contoh dari tujuan akhir pembahasan kali ini :


Kembali ke pembahasan kita mengenai seleksi, setelah memilih  Tool Magic Wand dan Mengaktifkan Opsi Add to selection, maka penuhi area berwarna merah dengan seleksi Magic Wand, Lihat Gambar di bawah untuk lebih jelasnya.


Setelah Semua Area yang berwarna merah terseleksi, dengan kondisi seleksi yang kurang baik, selanjutnya seleksi kembali area yang ingin kita buang dengan menggunakan Lasso Tool, dengan cara yang sama Pilih Lasso Tool kemudian Aktifkan Opsi Add to selection. hasil akhir nya akan tampak seperti ini :


Perhatikan Gambar di Atas, ada Terseleksi dan ada bagian tak terselaksi, bagian yang tak terseleksi adalah bagian pedang yang berada di tengah, sedangkan bagian yang terseleksi adalah bagian luar pedang tersebut. bagian yang terseleksi inilah nantinya yang akan kita hilangkan. kita lanjutkan ke Finishing nya, dengan menggunakan Polygonal Lasso Tool. di Tool inilah kerapian seleksi area akan kita pelajari.

Pilih Polygonal Lasso Tool, kemudian dengan langkah yang sama seperti diatas, aktifkan opsi Add to selection nya. Perbesar gambar ke Arah Bagian yang tak terseleksi ( bagian Pedang ) dengan cara : 
Tahan Tombol [ Ctrl ] dan Scrool Mouse Menuju Bagian Tersebut,
atau bisa juga dengan menggunakan Tombol [ Ctrl ] dan Tombol [ + ], Saya Contohkan disini Zoom Menuju area Mata Pedang, untuk tepat menuju ke arah Mata Pedang, Tahan Tombol [ Spasi ] Pada Keyboard. kemudian klik mouse, kalau benar maka icon tangan akan muncul pada monitor, geser Hingga menuju ke Area Mata Pedang. Perhatikan Gambar di bawah ini :


Gambar Diatas adalah seleksi buruk yang akan kita benahi dengan menggunakan Polygonal Lasso Tool, pada bagian ini di tuntut ketelitian dan kesabaran, perhatikan seleksi yang tidak rata / tidak lurus tersebut, sedangkan pedang nya sendiri, adalah pedang yang lurus bukan pedang dengan Mata Pedang yang tidak rata, tadi kita telah memilih Polygonal Lasso Tool dan sudah mengaktifkan Add to selection nya, rata kan seleksi pedang dengan polygonal lasso tool pada bagian dalam seleksi, Ingat bagian dalam seleksi adalah bagian luar pedang, cotoh nya seperti gambar di bawah ini :


Lakuakan terus menerus hingga semua Area seleksi menjadi rapi. Perhatikan tiap tiap bagian seleksi, bila ada yang tampak kurang rapi, perbaiki bagian tersebut.ada sebuah studi kasus disini, area yang terseleksi terlalu masuk ke dalam area pedang, contoh nya pada gambar di bawah ini :


Lalu Bagaimana memperbaiki Seleksi ini ?
Kalau Tadi kita mengaktifkan opsi Add to selection untuk menambahkan seleksi secra otomatis pada saat kita memilih seleksi yang lain sekarang kita akan mengurangi seleksi tersebut dengan cara menekan Tombol [ Alt ] Pada Keyboard kemudian seleksi area yang akan kita benahi, lihat gambar di bawah :


Bila Seluruh area yang kita inginkan telah terseleksi secara sempurna, klik kanan kemudian pilih feather, masukkan nilai feather radius sebesar 0.5 ( karna kita bekerja pada gambar dengan pixel kecil ). kemudian tekan [Del ] untuk menghilangkan bagian yang telah kita seleksi.

Polygonal Lasso


Polygonal Lasso untuk seleksi lebih rapi


Polygonal Lasso Tool
lagi lagi saya akan membahas tentang seleksi, sebegitu penting kah seleksi ini, hingga saya sering kali mengulas tentang seleksi ini, ya... seleksi termasuk salah satu hal yang terpenting yang harus di pelajari pertama kali, seperti yang pernah saya post pada postingan sebelum nyaApa yang harus di pelajari pertama kali, karna menurut hemat penulis olah digital itu hanyalah rutinitas seleksi, penyamaan warna dan penempatan cahaya yang benar. bila sudah memahami ketiga hal ini, Dijamin... Photoshoper nga usah lagi baca Tutorial Photoshop udah bisa mengolah gambar  dengan hasil yang baik,
sekarang kita akan memahami Polygonal Lasso Tool lebih dalam, di postingan ini saya hanya akan membahas apa itu Polygonal Lasso Tool dan cara mengaktifkannya , pada posting sebelumnya saya telah membahas cara kerja  Polygonal Lasso Tool , dan bagaimana menerapkan Tool ini ke dalam sebuah foto atau gambar digital. sebelumnya akan saya jelaskan apa itu Polygonal Lasso Tool.
Polygonal Lasso Tool adalah salah satu tool seleksi Adobe Photoshop yang memiliki ciri seleksi garis demi garis

Polygonal Lasso Tool terdapat pada bagian Tool seleksi di Tools Box Adobe Photoshop, untuk mengaktifkan Polygonal Lasso Tool cukup dengan klik kanan pada bagian Lasso Tools Selection kemudian pilih Polygonal Lasso Tool.

atau bisa dengan menggunakan Shortcut pada tombol keyboard
[ Shift ] ( tahan Tombol Shift ) Lalu tekan [ L ] beberapa kali sampai muncul Polygonal Lasso Tool.

poligonal

Layout Photoshop


Layout Photoshop

Secara garis besar layout photoshop atau tampilan software adobe photoshop cs3 dapat kita bagi menjadi 5 bagian utama, yang mana kelima bagian utama inilah nantinya yang akan sering kita pergunakan untuk bekerja di lingkungan Photoshop.
5 bagian utama di photoshop :
  1. Menu Bar
  2. Option Bar
  3. Tool Box
  4. Kumpulan Pallete
  5. Kanvas Kerja

Menu Bar


Disini saya mengambil contoh Layout Photoshop default dari Adobe Photoshop CS3. Walaupun saat ini Adobe Systems Incorporated telah meluncurkan versi CS5 yang kaya akan fitur serta kemudahan dalam mengolah gambar digital akan tetapi versi CS3 masih tetap menjadi favorite untuk sebagian pengguna Adobe Photoshop alasan nya karna Adobe Photoshop CS3 dapat bekerja maksimal pada komputer atau laptop yang tidak memiliki spesifikasi tinggi

di dalam menu bar terdapat 9 menu utama yang di dalam menu utama ini terdapat lagi sub-sub menu yang dikelompokkan berdasarkan fungsi dan kegunaan nya masing-masing, secara berurutan menu-menu utama dalam menu bar Adobe Photoshop CS3 adalah : File, Edit, Image, Layer, Select, Filter, View, Windows, dan Help.

9 Menu Utama dalam Menu Bar
  1. File
    berisi sub menu untuk membuka, menutup, menyimpan dan bahkan export
  2. Edit
    Undo dan Redo adalah salah satu fungsi yang terdapat pada menu ini
  3. Image
    fungsi untuk kebutuhan editing gambar terdapat pada menu ini
  4. Layer
    menu untuk memanagement layer di dalam kanvas kerja Photoshop
  5. Select
    berisi fungsi-fungsi untuk mengatur seleksi
  6. Filter
    kumpulan sub menu di dalamnya digunakan untuk menciptakan efek-efek tertentu pada sebuah foto
  7. View
    Pengaturan kanvas kerja diatur pada menu view, baik itu zoom in, zoom out bahkan garis rulers
  8. Windows
    dipergunakan untuk menampilkan atau menyembunyikan Pallete dan komponen photoshop
  9. Help
    Dipergunakan untuk menampilakan bantuan penggunaan Adobe Photoshop

Option Bar

Secara Default letak atau posisi dari option Bar terdapat tepat dibawah Menu Bar Photoshop, opsi-opsi dari option bar ini akan selalu berubah-ubah sesuai dengan tool apa yang sedang kita gunakan, semisal pada saat kita mengaktifkan brush tool maka opsi pada option bar akan berisi pengaturan diameter dan ketebalan brush, kemudian kita juga dapat mengatur blending mode untuk brush, terdapat pula pilihan Opacity dan juga Flow, beda halnya saat kita mengaktifkan Crop Tool, maka option bar akan berisi berapa lebar serta panjang Crop yang akan kita lakukan, juga dapat pula kita input resolusi foto secara otomatis saat kita melakukan cropping. dibawah ini adalah contoh opsi dari option bar saat brush tool di aktifkan dan opsi yang tampil saat crop tool di aktifkan

Tool Box

Dalam bahasa yang sederhana Tool Box adalah sekumpulan alat-alat yang dipergunakan dalam mengolah gambar digital, dan masing-masing alat ini memiliki fungsi dan kegunaan yang berbeda-beda berdasarkan pengelompokannya. Tepat disebelah kiri dalam layout photoshopcs3 default akan kita lihat sekumpulan alat-alat yang nantinya akan kita pergunakan untuk kebutuhan pengolahan gambar, pada bagian atas dari tool box kita akan menemui kelompok alat yang dapat kita pergunakan untuk kebutuhan seleksi gambar, kemudian bagian selanjutnya tepat dibawah kelompok seleksi terdapat alat yang dapat kita pergunakan untuk melakukan cropping, lalu terdapat pula kumpulan alat untuk melakukan retouching, painting dan drawing, yang terakhir terdapat dibagian paling bawah dari tool box adalah alat-alat bantu yang menunjang kita dalam mengolah gambar.

Kumpulan Pallete Photoshop

Bilah sebelah kanan dari Layout Photoshop akan diisi oleh Pallete-Pallete yang telah di kelompokkan berdasarkan fungsi dan kegunaan nya, secara default bilah sebelah kanan dari ruang kerja dari Adobe Photoshop CS3 akan diisi oleh Pallete Navigator, Histogram dan Info pada bilah kedua terdapat pallete Color, Swatches, dan Style. kemudian bilah paling bawah terdapat Pallete Layers, Channel dan Paths.
Tiap-tiap Pallete yang tampil dalam Layout Photoshop dapat kita sesuaikan ukuran dari pallete tersebut, dapat pula kita hilangkan seandainya pallete tersebut jarang kita pergunakan, atau bila suatu saat kita perlukan kita pun dapat memunculkan nya kembali pada menu bar : View – Windows

Kanvas Kerja Photoshop

Di Area inilah tempat kita melakukan olah digital, semua pengetahuan kita tentang tool photoshop akan dapat kita pergunakan pada kanvas kerja, pallete-pallete photoshop yang telah sebelumnya kita pelajari akan sangat berguna saat kita telah mulai melakukan edit foto pada kanvas kerja, pallete layer akan selalu mejadi pendamping anda dalam bekerja di photoshop, begitupun dengan pallete history yang akan membuat kemudahan dalam kita mengorganisir langkah-langkah apa yang telah kita kerjakan pada kanvas kerja, untuk melakukan edit foto dengan cepat, pallete action wajib dipelajari lebih dalam.

Memasukkan Image atau gambar



Ada 2 cara untuk memasukkan image pada Dreamweaver , dengan menggunakan main
menu dan dengan menggunakan Object panel.

1. Klik kursor pada tempat dimana ingin dimasukkan image. (coba diklik tempat
    paling atas pada dokumen)
2. Pilih menu Insert > Image
3. Tampak dialog box untuk memilih file image pilih image yang akan ditampilkan.
4. Klik select, maka image tersebut akan masuk pada dokumen.
    Jika menggunakan cara dengan penggunaan Object panel
    Klik button insert image pada Object panel, maka akan tampak tampilan dialog
    box yang sama, lakukan seperti langkah sebelumnya.
    Membuat rollover image
    Rollover image adalah suatu image yang akan berubah ketika pointer dari mouse diarahkan
    pada image tersebut.
    Rolover image terdiri dari 2 gambar atau image: image pertama akan tampak pada saat
    pertama kali loading browser, dan image kedua akan tampak ketika pointer diarahkan pada
    image tersebut. Pastikan kedua image tersebut mempunyai ukuran yang sama, bila tidak
    sama maka tampilan site tampak tidak teratur.
1. Klik button image rollover pada object panel
2. Maka akan keluar dialog box yang harus diisi nama rollover image tersebut,
    memilih image pertama dan memilih rollover image atau image kedua , alamat url
    atau link yang dituju bila image tersebut diklik.

3. Klik option Preload image rollover, untuk memastikan image rollover tersebut
    jalan bila dibrowse.
4. Klik OK untuk menutup dialog box tersebut bila sudah selesai.

  Rollover image hanya akan tampak pada browser
• Tekan F12 , untuk melihat dokumen pada web browser.
  Arahkan pointer anda pada image tersebut, maka akan tampak image yang
  berubah-ubah.
• Ketika anda selesai melihat file tersebut dalam tampilan browser, tutup window
  browser tersebut.
• Kembali dokumen anda pada Dreamweaver, pilih menu File > Save untuk
  menyimpan file anda tersebut.
  Memasukkan Flash Button
  Pada Macromedia Dreamweaver dapat langsung memasukkan Flash Button
  yang sangat dinamis dan animasi dalam berbagai macam bentuk.
• Klik menu flash button pada Object panel.
  Maka akan keluar sebuah dialog box, yang harus diisi, dengan memilih bentuk-bentuk
  button, menulis teks dan jenis hingga ukuran teks yang akan ditampilkan pada button
  tersebut, memasukkan alamat halaman lain (link).



Membuat Hyperlink dari Property inspector


Membuat Hyperlink dari Property inspector
Membuat hyperlink teks dari halaman yang dibuka ke halaman lain menggunakan
fasilitas property inspector.
1. Pilih teks yang akan dihyperlink.
2. Shadding teks tersebut (tekan tombol kiri pada mouse, pilih teks yang akan di
link), lalu pindahkan kursor pada property inspector bar, klik pada area Link ketik
nama file yang dituju.
3. Pindahkan kursor ke sembarang tempat, maka teks sudah hyperlink
Dapat juga memilih tujuan link dengan membuka lambang folder, maka akan tampak
dialog box, dimana dapat dipilih file yang diinginkan.


Mengenal Lingkungan Kerja Dreamweaver


Area kerja dreamweaverMX akan tampak seperti di bawah ini

• Tampilan di atas adalah tampilan dimana dokumen yang akan dibuat dan diedit.
  Document Toolbar
  Property Inspector
  Insert Panel
  Document Window
  Judul

• Pada Insert panel terdapat icon-icon yang dapat diklik untuk memasukkan object
  pada dokumen dan untuk mengedit pembuatan halaman web.
• Pada property inspector ditampilkan properti-properti dari object atau text yang
  dipilih dan dapat dimodifikasi (contoh = jenis text, ukuran text, dan sebagainya)
• Untuk membuka tampilan windows, inspector dan panel-panel, gunakan menu
  Window. Beri tanda check untuk memilih tampilan mana yang diperlukan pada
  tampilan window.
• Pada baris judul dari tampilan document window ditunjukkan judul halaman,
  nama folder dan nama file ada dalam tanda kurung.
• Status bar, didapat pada bagian paling bawah document window, menunjukkan
  informasi-informasi tentang dokumen yang sedang dibuat.
• Pada tag selector menampilkan HTML control pada text atau object yang dipilih.
  Klik salah satu text atau object maka pada tag selector akan tampak HTML
  control, contoh jika diklik pada dokumen window, pada tag selector akan tampak
  tulisan <body> disini menunjukkan sedang bekerja pada body dari dokumen
  secara HTML.
• Pada Window size pop-up menu dapat dilihat dan mengedit ukuran window yang
  ditampilkan sesuai keinginan
• .Disebelah kanan menu window size pop-up dapat dilihat ukuran besarnya file
   dokumen dan waktu yang dibutuhkan untuk download file pada tampilan window.
   Catatan : Pada ukuran window menggambarkan ukuran dimensi pada browser. Untuk
   contoh, gunakan ukuran “536 x 196 (640 x 480, default)” jika pengunjung situs
   menggunakan Microsoft Internet Explorer atau Netscape Navigator, maka
   konfigurasi tampilannya adalah 640 x 480.

TOOLBAR
Tag Selection Window size
pop-up menu
Code View
Code&Design View
Design View Nama File Tampilan Browser
Refresh

  Toolbar dreamweaver terdapat button-button yang dapat dipilih dalam menampilkan
  dokumen secara cepat : Code (HTML), desain, dan gabungan keduanya yaitu tampilan
  secara HTML dan desain.Toolbar juga menampilkan button-button perintah yang
  terdapat pada sebelah kanan nama dokumen.
• Untuk menampilkan dan menyembunyikan Toolbar, pilih menu View > Toolbar.
• Untuk tampilan dokumen secara kode atau HTML , klik button Code View pada
  toolbar. Disini dapat diedit atau dibuat halaman web secara HTML
• Untuk tampilan dokumen secara kode dan desain, klik button Code & Design View
• Untuk tampilan dokumen secara desain, klik button Design View, disini dapat
  diedit atau dibuat halaman web secara visual.
• Untuk merubah nama dokumen, klik pada title lalu rubah nama dokumen sesuai
  dengan keinginan.
• Untuk melihat halaman web secara browser (Internet Explorer) dengan mengklik
  button Preview Browser.

OBJECT PANEL
Pada Object panel terdapat button-button untuk membuat dan memasukkan object
seperti tabel, layer dan images. Untuk menampilkan dan menyembunyikan Objects panel,
pilih menu Window > Objects.
Memasukkan sebuah Object :
Klik icon button pada Object panel, tergantung pada object yang dipilih. Setelah diklik
salah satu button maka akan tampil Dialog Box yang harus diisi untuk memasukkan
object tersebut. Object panel terdiri dari 7 kategori : Character, Common, Form,
Frames, Head, Invisibles dan Special.
Semua kategori tersebut menampilkan button untuk merubah tampilan : Standart dan
Layout. Untuk saat ini kita hanya akan membicarakan kategori Common atau kategori
yang umum dan biasa dipakai dan kategori Character.

Common
Kategori Common pada Object panel terdiri dari :

• Image
  Memasukkan sebuah gambar atau image pada cursor. Dialog Box akan tampil
  sehingga anda dapat secara spesifik memilih file image yang diinginkan.

• Rollover Image
  Secara khusus dapat dipilih 2 file image yang akan dimasukkan dan
  membuat 2 file image tersebut ditampilkan secara rollover. Rollover adalah bila
  sebuah gambar atau image akan berubah menjadi gambar yang lain bila mouse
  pointer dikenakan pada image tersebut.
• Table
  Menempatkan atau membuat tabel.
• Named Anchor. Untuk melakukan lompatan/link dari suatu teks atau gambar di halaman
  yang sama.
• Navigation Bar Memasukkan beberapa image untuk Navigasi masuk ke site yang lain.
• E-Mail Link Membuat link sebuah e-mail.
• Date Menempatkan tanggal pada halaman web. Dialog Box akan muncul untuk
  spesifikasi format dari tanggal, Dreamweaver akan mengupdate dari tanggal
  secara otomatis setiap kali anda menyimpan file.
• Fireworks HTML Memasukkan file HTML yang sudah dibuat atau sudah ada
  yang dibuat dari program Fireworks.
• Flash Button Memasukkan Flash Button pada halaman web.
• Flash Text Membuat Flash text object.
• Shockwave Menempatkan movie dari Macromedia Shockwave pada halaman web.
  Dialog Box akan muncul agar dapat dipilih sumber file DCR daripada movie, atau
  dapat menggunakan Property inspector untuk menspesifikasi sumber file.
• Generator Menempatkan object Macromedia Generator pada halaman web.

MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML

Dreamweaver menawarkan berbagai macam cara untuk membuat suatu Dokumen, yaitu

• membuat baru, dokumen HTML yang kosong;
pilih menu File > New

• membuka dokumen HTML yang sudah ada
  Pilih menu File > Open

• jika untuk mempersingkat waktu dapat membuat dokumen baru berdasarkan
template (blangko).
Pilih menu File > New from Template. Akan tampak dialog box, daftar
template-template yang ada (template terlebih dahulu harus dibuat sebelum membuat
dokumen baru berdasarkan template)
Pilih salah satu template. Dokumen baru akan dibuat berdasarkan template
tersebut
Menyimpan dokumen :
• Pilih menu File > Save.
• Ketik nama file dan tentukan dimana file tersebut akan disimpan.
  Catatan : Dreamweaver akan secara otomatis menyimpan file tersebut dalam bentuk
  htm atau html.
• Klik button Save untuk menyimpan file tersebut.

Mengatur document properties
Judul halaman, background image, warna-warna teks dan warna link adalah dasar dari
semua dokumen HTML. Judul halaman merupakan identitas dan nama dokumen.
Background image atau gambar background dari suatu halaman (bisa juga memakai
warna untuk background) diatur untuk keseluruhan tampilan dari dokumen tersebut.
Teks dan warna link membantu pengunjung situs membedakan teks mana yang bisa
link/masuk ke halaman lain, dan juga bisa membedakan dari warnanya apakah link
tersebut sudah dikunjungi atau belum.
Merubah judul halaman
Judul dari halaman HTML memberitahu pengunjung site apa yang sedang pengunjung
buka, yang dapat dilihat pada menu bar windows dibawah.
.Untuk mengganti judul halaman :
Langkah-langkah :

• Pilih menu Modify > Page Properties.
• Klik kursor anda pada daerah kosong di halaman web. Lalu pilih Page Properties
dengan mengklik kanan mouse anda. Masukkan judul untuk halaman tersebut
pada title text box.


PERNYATAAN DO.....WHILE


Pernyataan do…while mirip seperti pernyataan while, hanya saja pada do…while
pernyataan yang terdapat didalamnya minimal akan sekali dieksekusi.
Bentuk Umumnya :
do
{
pernyatan ;
} while(kondisi);

PERNYATAAN WHILE


Pernyataan while merupakan salah satu pernyataan yang berguna untuk
memproses suatu pernyataan atau beberapa pernyataan beberapa kali. Pernyataan while
memungkinkan statemen-statemen yang ada didalamnya tidak diakukan sama sekali.
Bentuk Umumnya :

while (kondisi)
{
Pernyataan ;
}



PERNYATAAN SWITCH




Pernyataan swich adalah pernyataan yang digunakan untuk menjalankan salah
satu pernyataan dari beberapa kemungkinan pernyataan, berdasarkan nilai dari sebuah
ungkapan dan nilai penyeleksian.
Pernyataan if…else if jamak dapat dibangun dengan pernyataan switch.
Bentuk Umumnya :
Hal – hal yang perlu diperhatikan adalah :
1. Dibelakang keyword case harus diikuti oleh sebuah konstanta, tidak boleh diikuti
oleh ekspresi ataupun variable.
2. Konstanta yang digunakan bertipe int atau char
3. Jika bentuknya seperti diatas maka apabila ekspresi sesuai dengan konstanta2
maka pernyataan2, pernyataan3 sampai dengan pernyataanlain dieksekusi. Untuk
mencegah hal tersebut, gunakan keyword break;. Jika keyword break digunakan
maka setelah pernyataan2 dieksekusi program langsung keluar dari pernyataan
switch. Selain digunakan dalam switch, keyword break banyak digunakan untuk
keluar dari pernyataan yang berulang ( looping ).
28 Copyright PIK Unsri Agustus 2006
4. pernyataanlain dieksekusi jika konstanta1 sampai konstantaN tidak ada yang
memenuhi ekspresi.
Outputnya : 





VARIABEL, TIPE DATA


VARIABEL

Variabel adalah suatu pengenal (identifier) yang digunakan untuk mewakili suatu
nilai tertentu di dalam proses program. Berbeda dengan konstanta yang nilainya selalu
tetap, nilai dari suatu variable bisa diubah-ubah sesuai kebutuhan. Untuk memperoleh
nilai dari suatu variable digunakan pernyataan penugasan (assignment statement), yang
mempunyai sintaks sebagai berikut :
variable = ekspresi ;

Nama dari suatu variable dapat ditentukan sendiri oleh pemrogram dengan aturan sebagai
berikut :
1. Terdiri dari gabungan huruf dan angka dengan karakter pertama harus berupa
    huruf. Bahasa C ++ bersifat case-sensitive artinya huruf besar dan kecil dianggap
    berbeda. Jadi antara nim, NIM dan Nim dianggap berbeda.
2. Tidak boleh mengandung spasi.
3. Tidak boleh mengandung symbol-simbol khusus, kecuali garis bawah
    (underscore). Yang termasuk symbol khusus yang tidak diperbolehkan antara lain
    : $, ?, %, #, !, &, *, (, ), -, +, =dsb.
4. Panjangnya bebas, tetapi hanya 32 karakter pertama yang terpakai.
    Contoh penamaan variabel yang benar :
    NIM, a, x, nama_mhs, f3098, f4, nilai, budi, dsb.
    Contoh penamaan variable yang salah :
    %nilai_mahasiswa, 80mahasiswa, rata-rata, ada spasi, penting!, dsb

DEKLARASI
Deklarasi diperlukan bila kita akan menggunakan pengenal (identifier) dalam
program. Identifier dapat berupa variable, konstanta dan fungsi.


DEKLARASI VARIABEL
Bentuk umumnya :
Nama_tipe nama_variabel ;
Contoh :
int x; // Deklarasi x bertipe integer
char y, huruf, nim[10]; // Deklarasi variable bertipe char
float nilai; // Deklarasi variable bertipe float
double beta; // Deklarasi variable bertipe double
int array[5][4]; // Deklarasi array bertipe integer
Contoh :

Outputnya :

DEKLARASI KONSTANTA
a.  Menggunakan keyword const
    Contoh : const float PI = 3.14152965;
    Berbeda dengan variable, konstanta bernama tidak dapat diubah
    jika telah diinisialisasi
b. Menggunakan #define
    Contoh : #define PI 3.14152965
    Keuntungan menggunakan #define apabila dibandingkan dengan const adalah
    kecepatan kompilasi, karena sebelum kompilasi dilaksanakan, kompiler pertama
    kali mencari symbol #define (oleh sebab itu mengapa # dikatakan prepocessor
    directive) dan mengganti semua Phi dengan nilai 3.14152965.
Contoh :

TIPE DATA
Tipe data dapat dikelompokkan menjadi atas dua macam :
1. Tipe Dasar.
2. Tipe Bentukkan.

TIPE DASAR
Adalah tipe yang dapat langsung dipakai.

NB : Untuk mengetahui ukuran memori dari suatu tipe digunakan fungsi sizeof(tipe)
Tipe data dapat diubah ( type cast ), misalkan:
float x = 3.345;
int p = int(x);
maka nilai p adalah 3 ( terjadi truncating ).
Tipe data yang berhubungan dengan bilangan bulat adalah char, int, long. Sedangkan
lainnya berhubungan dengan bilangan pecahan.
Contoh :
Outputnya : 18125

Darimana angka 18125 diperoleh ?
Jika variable tidak diinisialisai, namun nilai keluarannya diminta, maka compiler dengan
bijak akan menampilkan nilai acak yang nilainya tergantung dari jenis compilernya.

KARAKTER & STRING LITERAL
String adalah gabungan dari karakter

Panjang String
strlen() à nama fungsi untuk menghitung panjang string
Fungsi strlen() dideklarasikan dalam file string.h. Jadi bila anda ingin menggunakan
fungsi strlen(), maka prepocessor directive #include<string.h> harus dimasukkan dalam
program diatas main().
Contoh :
Outputnya : 14
           13
            7
            1
            0 

Perhatikan, bahwa disetiap akhir baris pernyataan diakhiri dengan tanda titik – koma
(semicolon) “ ; “.
Perhatikan, bahwa :
· ‘ \n ‘ dihitung satu karakter. \n disebut newline karakter
· Endl juga merupakan newline karakter ( sama kegunaannya seperti \n ).
Dalam C++, selain \n terdapat juga beberapa karakter khusus yang biasa disebut escape
sequence characters, yaitu


KEYWORD & IDENTIFIER
Dalam bahasa pemrograman, suatu program dibuat dari elemen-elemen sintaks
individual yang disebut token, yang memuat nama variable, konstanta, keyword, operator
dan tanda baca. 


Output : 66

Program diatas memperlihatkan 15 token, yaitu
main, (, ), {, int, n, =, 66, ;, cout, <<, endl, return, 0 dan }
Token n adalah suatu variable
Token 66,0 adalah suatu konstanta
Token int, return dan endl adalah suatu keyword
Token = dan << adalah operator
Token(, ), {, ;, dan } adalah tanda baca
Baris pertama berisi suatu prepocessor directive yang bukan bagian sebenarnya dari
program

TIPE BENTUKAN
Merupakan tipe yang dibentuk dari tipe dasar. Seperti Tipe Struktur.

TIPE STRUKTUR
Suatu tipe data yang merupakan kumpulan dari tipe data lainnya. Struktur terdiri
dari data yang disebut field. Field – field tersebut digabungkan menjadi satu tujuan untuk
kemudahan dalam operasi.
Bentuk umumnya :

Perhatikan bahwa pada akhir dari typedef struct diberi tanda semicolon.