lebih jauh dengan Flash 5 ~ Global Surfing

Dasar-dasar Design Web

L I C E N C E

Judul	:	Dasar-dasar Design Web
Penulis	:	Komarudin Surya
Copyright	:	Suryatekno © 2008
Aturan	:	Materi ini boleh Anda Copy hanya untuk kepentingan Pribadi. Tidak boleh diperjual-belikan, atau dimanfaatkan untuk kepentingan Komersial. Pengutipan atau pemindahan sebagian atau keseluruhan materi ke situs ataupun Media Lain, tidak di ijinkan dengan alasan apapun tanpa seijin dari Penulis cq:Komarudin Surya.

Akhir yang Bahagia dari sang Designer

Berikut ini adalah beberapa perintah pendukung yang wajib juga Anda kuasai untuk menyempurnakan pengetahuan Anda dalam men-design sebuah tampilan Website yang sederhana tetapi profesional.

1. <a href="aaa" target="x" title="yy"> - Perintah ini digunakan untuk berpindah dari satu target ke target yang lain nya. - Dalam sebuah situs, pasti ada suatu Teks atau Images atau animasi yang bila di klik, akan menuju suatu target tertentu yang dapat berupa halaman web yang lain, atau sebuah images yang lain. Untuk dapat berpindah dari target satu ke target yang lain nya, digunakan perintah ini. Perintah ini juga disebut Hyperlink. Ada beberapa atribut yang digunakan oleh perintah ini antara lain :

href - Atribut ini merupakan inti dari perintah <a> ini, isi atau content nya berupa alamat link ( URL ) yang dituju. Misalkan Anda punya sebuah halaman web dengan nama filenya adalah halaman2.html dan disimpan pada folder myweb , maka penulisan nya menjadihref="myweb/halaman2.html".
target - Atribut ini digunakan untuk menyatakan target link dibuka pada halaman yang sama, halaman yang lain dengan tidak menutup halaman yang memanggilnya, atau pada sebuah frame tersendiri yang ditentukan. Bila atribut target ini diisi dengan self, maka link yang dipanggil akan dibuka pada halaman yang sama dengan link yang memanggilnya. Bila diisi dengan blank maka link yang dipanggil akan dibuka pada halaman lain tanpa menutup halaman yang memanggilnya. Sedangkan bila diinginkan dibuka pada sebuah frame maka atribut target ini diisi dengan nama frame yang menjadi target.
title - Atribut ini digunakan untuk memberi keterangan berupa sebuah teks atau images yang akan ditampilkan bila kursor mendekati link ini.

Contoh Penulisan nya :

<a href="myfolder/halamanku.html" target="self" title="Klik ini untuk menuju halamanku">Halamanku</a>

<a href="http://www.suryascience.co.nr" target="blank" title="Klik untuk menuju ke situs SSC">Surya Science Club</a>

<a href="http://www.google.com" target="frame4" title="Cari kata dengan google">Google</a>

Perhatikan contoh penulisan diatas..!, Kata yang menjadi hyperlinknya adalah kata atau kalimat yang di apit oleh perintah <a> dan </a> bukan title nya. Pada ketiga contoh diatas, maka yang menjadi hyperlinknya adalah : Halamanku, Surya Science Club dan Google.

2. <frameset> dan <frame> - Perintah ini digunakan untuk membagi layar menjadi beberapa bagian sesuai yang kita kehendaki. - Adakalanya suatu website mempunyai beberapa bagian yang sama misalnya Header yang menampilkan menu navigasi dari website tersebut. Agar menu tersebut tetap terbuka dan dapat diakses oleh user maka header yang berisi menu ini ditempatkan pada sebuah Frame atau jendela. sedangkan isi atau content nya dibuka pada frame yang lain, untuk keperluan tersebut maka digunakanlah perintah Frame ini. Contoh yang paling mudah Anda temui untuk penggunaan frame ini adalah program HELP dari Browser yang Anda gunakan, coba saja Anda klik program help dari Browser yang Anda gunakan, disitu Anda akan menemui contoh Aplikasi dari perintah Frame. Program HELP pada umumnya menempatkan link pemanggil pada bagian kiri, dan content yang dipanggil diperlihatkan pada jendela yang lain disebelah kanan. Perintah Frameset biasanya diikutti oleh perintah frame dan mempunyai beberapa atribut yang digunakan antara lain :

I . Untuk Perintah Frameset

rows - Atribut ini digunakan untuk memberikan ukuran baris dari suatu frame yang akan dibuat.
cols - Atribut ini digunakan untuk memberikan ukuran kolom dari suatu frame yang akan dibuka.
onload - Atribut ini digunakan untuk mengeksekusi suatu aplikasi ketika frame ini selesai di load oleh browser.
onunload - Atribut ini digunakan untuk mengeksekusi suatu aplikasii ketika frame ini ditutup oleh browser.

II . Untuk perintah Frame

name - Atribut ini digunakan untuk menamakan sebuah frame agar dapat dikenali oleh aplikasi yang lain.
src - Atribut ini digunakan untuk menentukan sumber atau alamat sebuah link / URL, yang akan ditampilkan pada frame.
frameborder - Atribut ini digunakan untuk menentukan besarnya garis tepi ( border ) dari frame.
marginwidth - Atribut ini digunakan untuk menentukan besarnya jarak margin kiri ( batas kiri ) dari isi frame yang akan ditampilkan.
marginheight - Atribut ini digunakan untuk menentukan besarnya jaraka margin atas ( batas atas ) dari isi frame yang akan ditampilkan.
noresize - Atribut ini digunakan untuk memberitahukan kepada browser agar tidak merubah ukuran secara otomatis, sehingga besarnya frame ditentukan secara manual.
scrolling - Atribut ini digunakan untuk memberitahukan kepada browser agar content yang melebihi ukuran frame dapat di gulung atau tidak. Pilihannya no, yes, atau auto.

Contoh penulisan frame dengan 2 jendela :

Misalkan Anda mempunyai dua buah file HTML yang akan ditampilkan kedua-duanya pada satu window di browser, file pertama akan ditampilkan pada frame sebelah kiri dengan ukuran 40% dari lebar frame, sedangkan file yang lainnya ditampilakan disebelah kanan dengan ukuran 60% dari lebar frame. File yang pertama bernama : file_a1.html dan file kedua bernama file_a2.html, maka penulisan perintah frame untuk hal tersebut seperti dibawah ini.

Catatan 1 : Misalkan Anda mempunyai lagi file yang ketiga dan akan ditampilkan pada frame yang kedua secara bergiliran dengan file yang kedua. Pada file pertama disediakan link untuk membuka file yang ketiga pada frame kedua, maka link tersebut harus disertakan target dari frame yang kedua. contoh link nya : <a href="file_a3.html" title="contoh file yang dibuka pada frame ke-2"target="jendela2">Klik untuk membuka file ke-3</a>
Perhatikan penulisan target pada link diatas, target diisi oleh nama frame yang akan membuka file tersebut.

Sebagai contoh klik lah link ini, agar Anda lebih paham dengan perintah FRAMESET dan Frame ini.

CONTOH FRAME DENGAN BEBERAPA FILE DAN LINK.

Catatan 2 : File HTML yang menggunakan perintah Frameset tidak boleh ada perintah <body> dan </body>, bila perintah ini Anda cantumkan maka frameset tidak dapat berfungsi.

Contoh penulisan frame dengan 4 jendela :

Contoh tampilan frame dengan 4 jendela klik link ini :

CONTOH FRAME DENGAN 4 JENDELA

Catatan 3 : Untuk membagi ukuran jendela menjadi sama besar, maka digunakan tanda bintang ( * ).

3. <iframe> - Berbeda dengan perintah frame diatas, Perintah iframe ini dapat Anda masukan di dokumen HTML yang mana saja, jadi Anda tidak perlu membuat lagi sebuah file HTML yang digunakan untuk membuat frame. Anda dapat meletakkan perintah iframe ini di tempat mana saja dalam dokumen HTML. Contoh perintah ini bisa Anda lihat pada tombol AGENDA yang ada di bagian atas situs ini, atau pada Halaman Guest Book situs ini juga. Perintah iframe inipun mempunyai beberapa atribut antara lain :

name - Atribut ini digunakan untuk memberikan nama untuk perintah iframe.
src - Atribut ini digunakan untuk memberitahu alamat link atau URL yang akan dibuka pada jendela iframe.
width - Atribut ini digunakan untuk menentukan lebar dari iframe yang dibuat, ukuran nya digunakan satuan pixel. contoh : width="300".
height - Atribut ini digunakan untuk menentukan tinggi dari iframe yang dibuat, ukuran nya digunakan stuan pixel. contoh : height="600".

Contoh penulisan nya :

4. <input name="nn" type="button" value="xx" onclick="app"> - Perintah ini digunakan untuk beberapa keperluan yang menggunakan tampilan tombol - Pada pembahasan mengenai link diatas, Anda sudah di jelaskan mengenai bagaimana membuat sebuah link berupa teks. Agar tampilan design web Anda terlihat lebih menarik, perintah button ini dapat Anda gunakan untuk mengganti link-link yang berupa teks. Sebagai contoh penggunaan button adalah tombol dibawah ini yang saya gunakan untuk memudahkan Anda dalam berpindah halaman web. Perintah button ini mempunyai beberapa atribut, antara lain :

name - Atribut ini digunakan untuk menamakan tombol button yang dibuat.
value - Atribut ini digunakan untuk menampilkan teks dalam button yang akan dibuat.
onclick - Atribut ini digunakan untuk menentukan fungsi button yang akan digunakan ketika tombol button itu di klik. - Perintah dalam atribut onclick ini sebenarnya adalah perintah JavaScript yang di adopsi kedalam HTML.

Beberapa perintah pada atribut onclick yang umum digunakan dalam pemakaian tombol button ini antara lain :

parent.location="xxx" , - digunakan sebagai tombol link, tanda xxx di isi dengan alamat link atau url.
alert('xxx') , - digunakan sebagai peringatan berupa pop-up window, tanda xxx di isi dengan teks yang akan ditampilkan dalam pop-up window tersebut.
confirm('xxx') , - digunakan untuk menampilkan konfirmasi berupa pop-up window dengan pilihan tombol OK atau CANCEL, tanda xxx di isi dengan teks yang akan ditampilkan dalam pop-up windows tersebut.
window.open('xxx') , - digunakan untuk membuka sebuah link pada jendela yang lain, tanda xxx di isi dengan alamat link atau url.

Contoh penulisan nya :

<input name="testlink" type="button"
value="Test Tombol" onclick="parent.location='http://www.suryascience.co.nr'">

tampilan di browser ==
<input name="testalert" type="button"
value="Test Alert" onclick="javascript:alert('Tombol yang Anda tekan Salah..!')">

tampilan di browser ==
<input name="testconfirm" type="button"
value="Test Confirm" onclick="javascript:confirm
('Apakah Anda yakin dengan piliha Anda..?')">

tampilan di browser ==
<input name="testwinop" type="button"
value="Test open window"
onclick="javascript:window.open
('http://ballz.ababa.net/suryascience/sponsor.html','test',
'toolbar=no,statusbar=no,menubar=no,
left=500,top=350,width=218,height=220'); " target="_blank">

tampilan di browser ==

Cobalah Anda test contoh tombol diatas...!, bagaimana...?, lebih menarik bukan..!. Yang perlu Anda perhatikan pada penulisan diatas adalah peletakan tanda kutip ( " ) , tanda ini jangan sampai lupa Anda tuliskan. Bila Anda salah dalam penempatan nya maka perintah tersebut tidak akan berfungsi.

Contoh pembuatan FORM lengkap

Hmmmm....., Saya salut pada Anda yang dengan gigih mempelajari tutorial ini. Sebenarnya masih banyak yang belum saya ungkapkan mengenai perintah-perintah pendukung HTML. Saya sengaja tidak menjelaskan semuanya agar Anda menjadi orang yang kreatif dan aktif dalam mempelajari tutorial ini.

Agar Anda menjadi orang yang aktif, carilah beberapa referensi mengenai tag-tag HTML ini dari media yang lain atau dari situs yang lain. Dengan demikian Ilmu yang Anda dapatkan akan berkembang. Atau mungkin juga Anda sudah benar-benar menguasai semua yang dijelaskan pada tutorial ini..!, kalau demikian adanya tolonglah berbagi dengan rekan-rekan yang lain melalui forum yang kami sediakan untuk mengamalkan ilmu yang Anda peroleh. Klik link ini untuk menuju ke SSC FORUM.

Contoh pembuatan form lengkap.

<table width="95%" cellpadding="5" cellspacing="0" border="2">
<tr valign="middle">
<td align="center">
<img src="images/smalogospc.jpg" alt="Surya Putra Computama" border="0">
</td>
<td colspan="3" align="center">
<h3><b>Formulir Pemesanan Barang</b></h3>
</td></tr>
<tr valign="middle">
<td colspan="4" align="center">
Isilah beberapa keterangan di bawah ini dengan benar,
agar barang yang Anda pesan sesuai dengan yang Anda inginkan
serta untuk menghindari kesalahan pengiriman.
</td></tr>
<tr valign="middle">
<td colspan="2" rowspan="2" align="center">
<form name="pesanbrg" target="_self"
action="http://www.suryascience.co.nr/sendform.php"
method="post" enctype="multipart/form-data">
<input type="hidden" name="usernum" value="12345678">
<input type="hidden" name="spc" value="2">
Keterangan Mengenai Barang yang dipesan
</td>
<td colspan="2" align="center">
<select name="nama_barang">
<option selected value="">Pilih barang yang Anda pesan..</option>
<option value="Modul_Fiska">Modul Multimedia Fisika SMU</option>
<option value="Modul_Matematika">Modul Multimedia Matematika SMU</option>
<option value="Modul_Biologi">Modul Multimedia Biologi SMU</option>
<option value="Modul_Kimia">Modul Multimedia Kimia SMU</option>
<option value="Modul_Elektro">Modul Multimedia Elektronika</option>
<option value="Modul_Webdesign1">Modul Multimedia Web Design Bagian 1</option>
<option value="Modul_Webdesign2">Modul Multimedia Web Design Bagian 2</option>
<option value="Modul_elektro">Modul Multimedia Elektronika</option>
</select>
</td></tr>
<tr valign="middle">
<td align="center">
Jumlah :<br><br>
<input name="jumlah" type="tesks" size="3"> Buah.
</td>
<td align="center">
Jenis Kertas Modul<br>
<input name="jenis_kertas" type="radio" value="hvs"> H V S<br>
<input name="jenis_kertas" type="radio" value="koran"> Koran
</td></tr>
<tr valign="middle">
<td rowspan="2" align="center">
Keterangan Pemesan
</td>
<td align="center">
Nama depan<br>
<input name="nama_depan" type="teks" size="12">
</td>
<td align="center">
Nama belakang<br>
<input name="nama_belakang" type="teks" size="12">
</td>
<td align="center">
Umur<br>
<input name="umur" type="teks" size="5">
</td></tr>
<tr valign="middle">
<td align="center" colspan="2">
Alamat pengiriman<br>
<textarea name="alamat_pengiriman" rows="2" cols="20">
</textarea>
</td>
<td align="center">
Kode Pos<br>
<input name="Kota" type="teks" size="12"><br>
Telephone<br>
<input name="telephone" type="teks" size="12">
</td></tr>
<tr valign="middle">
<td colspan="2" align="center">
Jenis Pembayaran
</td>
<td colspan="2" align="left">
<input name="pembayaran" type="radio" value="tunai">   Tunai / Cash<br>
<input name="pembayaran" type="radio" value="kartu_kredit">   Kartu Kredit<br>
<input name="pembayaran" type="radio" value="transfer">   Transfer Bank
</td></tr>
<tr valign="middle">
<td colspan="4" align="center">
Isilah data di bawah ini bila jenis pembayaran Anda melalui Kartu Kredit
</td></tr>
<tr valign="top">
<td colspan="2">
Jenis Kartu Kredit<br>
<input name="jenis_kartu" type="checkbox" value="visa">   Visa<br>
<input name="jenis_kartu" type="checkbox" value="master_card">   Master Card<br>
<input name="jenis_kartu" type="checkbox" value="american_ex">   American Express<br>
<input name="jenis_kartu" type="checkbox" value="hsbc">   H S B C<br>
<input name="jenis_kartu" type="checkbox" value="world_bank">   World Banking
</td>
<td colspan="2" align="center">
<fieldset>
<legend>Confidential</legend>
Nomer Kartu
<br><br>
<input name="no_kartu1" type="password" size="3" maxlength="5"> -
<input name="no_kartu2" type="password" size="3" maxlength="5"> -
<input name="no_kartu3" type="password" size="3" maxlength="5"> -
<input name="no_kartu4" type="password" size="3" maxlength="5"><br>
<hr>
Masa Expired sampai dengan<br>
<input name="bulan_exp" type="teks" size="2"> -
<input name="tahun_exp" type="teks" size="4">
</fieldset>
</td></tr>
<tr valign="middle">
<td colspan="4" align="center">
<input name="reset" type="reset" value="Bersihkan Form">    
<input name="selesai" type="submit" value="Kirim Form" onclick="confirm('Apakah Anda yakin untuk mengirim Form ini..?')">
</form>
</td></tr>
<tr valign="middle">
<td colspan="4">
Catatan :
<ul>
<li>Bukti transfer harap dikirim ke alamat SPC bila pembayaran Anda melalui transfer Bank.</li>
<li>Kami tidak akan mengganti barang yang hilang bila tidak disertai bukti yang sah dari pihak berwenang.</li>
<li>Kami tidak akan mengganti barang yang hilang karena kesalahan pengisian alamat pengiriman pada form ini.</li>
<li>Penggantian barang yang hilang karena kesalahan kami, hanya diganti dengan barang yang sama sesuai pesanan.</li>
</ul>
</td></tr>
</table>

Setelah di jalankan pada browser, penulisan tag formulir isian di atas menjadi seperti berikut ini :

	Formulir Pemesanan Barang
Isilah beberapa keterangan di bawah ini dengan benar, agar barang yang Anda pesan sesuai dengan yang Anda inginkan serta untuk menghindari kesalahan pengiriman.
Keterangan Mengenai Barang yang dipesan
		Jumlah : Buah.	Jenis Kertas Modul H V S Koran
Keterangan Pemesan	Nama depan	Nama belakang	Umur
	Alamat pengiriman		Kode Pos Telephone
Jenis Pembayaran		Tunai / Cash Kartu Kredit Transfer Bank
Isilah data di bawah ini bila jenis pembayaran Anda melalui Kartu Kredit
Jenis Kartu Kredit Visa Master Card American Express H S B C World Banking		ConfidentialNomer Kartu - - - Masa Expired sampai dengan -

Catatan : Bukti transfer harap dikirim ke alamat SPC bila pembayaran Anda melalui transfer Bank. Kami tidak akan mengganti barang yang hilang bila tidak disertai bukti yang sah dari pihak berwenang. Kami tidak akan mengganti barang yang hilang karena kesalahan pengisian alamat pengiriman pada form ini. Penggantian barang yang hilang karena kesalahan kami, hanya diganti dengan barang yang sama sesuai pesanan.

Nah dengan demikian, maka semua yang dikeluhkan tongtong pada awal bab ini mengenai penempatan objek, pembuatan tabel serta pembuatan form telah terselesaikan. Dan selanjutnya sang designer kita menikah dengan wanita pujaan hatinya berkat bantuan Anda...

Posted in: info,InfoBlog

Global Surfing

Monday, October 4, 2010

lebih jauh dengan Flash 5

Formulir Pemesanan Barang

0 komentar:

Post a Comment

Archives