Bissmillah Hirahmanirahim
Assalamualaikum
Pertemuan pada tanggal 20 Desember 2010, mempelajari 2 (dua) materi yaitu penggunaan fungsi Tag Iframe dan pembuatan Form Pembelian. Materi kali ini tidak banyak berbeda dengan materi pembuatan frame yang lalu. Hanya terdapat sedikit modifikasi dibeberapa baris HTML.
- Penggunaan Fungsi Tag Iframe
Fungsi tag Iframe berbeda dengan tag frame biasa. Pada Iframe terdapat bar scrolling disini kanan. Jadi tampilan yang didalam frame tidak ditampilkan keseluruhan. Namun, hanya ditampilkan sebagian saja. Dan untuk melihat isinya secara keseluruhan, dapat di-scroll kebawah atau keatas.
Tampilan dari hasil akhir fungsi Iframe sangat rapih dan teratur, jika dibandingkan dengan tampilan hasil akhir para fungsi frame biasa. Untuk jelasnya bisa dilihat pada gambar berikut.
Berikut tag HTML yang diperlukan:
<html>
<head>
<title>Frame
</title>
</head>
<body>
Ini adalah contoh Iframe yang berisi dengan sebuah file berlatar belakang berwarna.<br>
<iframe src=isi.html width=300 height=200>
</body>
</html>
Pada praktikum Penggunaan Fungsi Iframe, menggunakan 3 file HTML yang berbeda untuk membangun tampilan website seperti diatas. Kedua file HTML yang lain adalah sebagai berikut.
Gambar 2: isi.html
Berikut tag HTML yang diperlukan:
<html>
<head>
<title>
Isi
</title>
</head>
<body bgcolor="blue">
<font color="yellow">Ini adalah halaman dengan background biru. Klik gambar dibawah ini untuk membuka file dengan latar belakang berwarna merah.</font><br>
<a href="merah.html"><img src="sunset.jpg" width=200></a>
</body>
</html>
Gambar 3: merah.html
Berikut tag HTML yang diperlukan:
<html>
<head>
<title>
Backgroud Merah
</title>
</head>
<body bgcolor="red">
</body>
</html>
- Pembuatan Form Pembelian
Materi selanjutnya adalah cara pembuatan form pembelian. Pada materi ini Kita menggabungkan beberapa fungsi tag HTML didalamnya. Antara lain tag IFrame, Pre, dan beberapa button radio, dll.
Pada dasarnya form pembelian ini hanya terdiri dari halaman HTML yang isinya hanya button-button isian layaknya form biasa. Namun dikombinasikan dengan fungsi Iframe. Berikut gambar tampilan hasil akhirnya.
Gambar 4: Tampilan hasil akhir Form Pembelian
Berikut tag HTML yang diperlukan:
<html>
<head>
<title>Frame
</title>
</head>
<body>
<iframe src=formpembelian.html width=450 height=450>
</body>
</html>
Sama halnya dengan materi sebelumnya, pada materi ini pun tidak hanya file HTML saja yang diperlukan, melainkan ada satu file HTML lagi yang harus dibuat agar dapat menghasilkan tampilan hasil akhir seperti diatas. Berikut gambarnya.
Gambar 5: Dasar dari from pembelian
Berikut tag HTML yang diperlukan:
<html>
<head>
<title>From Data Pembelian
</title>
</head>
<body bgcolor="gray">
<center>
<b>Masukan Data Pembelian Anda</b>
</center>
<pre>
Nama (Maks 25 karakter) :<input type=text name="nama" size=10 max length=25><br>
Nomor Kartu Kredit :<input type=text name="nomor"><br>
PIN :<input type=password name="pass"><br>
Pilih Jenis Pembayaran :<select name="pembayaran">
<option> Tunai </option>
<option> Kredit </option>
</select><br><br>
Pilih Jenis Pengiriman :<input type=radio name="send" value="kilat">Kilat
<input type=radio name="biasa">Biasa<br>
Pilih Accessoris Tambahan :<input type=checkbox name="handsfree">Handsfree
<input type=checkbox name="casing">Casing
<input type=checkbox name="tas">Tas<br><br>
<center>
<input type=reset value="Batal"> <input type=submit value="Beli">
</center>
</pre>
</body>
</html>
Langkah terakhir dalam pengerjaan pertemuan 8 ini adalah simpel, yaitu Jangan lupa setiap file disimpan dengan ekstensi .html. hehehe...
Dari tag HTML pada setiap gambar, tidak ada yang begitu menyulitkan. Hanya saja Kita harus teliti dalam penamaan file, peletakan file, meng-link-kan suatu file dan mengatur ukuran dari baris dan kolom untuk tabel/frame tersebut.
Sekian tulisan saya, terkait tentang Praktikum Pemodelan dan SImulasi pertemuan ke-8 ini. Mohon maaf kalau ada kekurangan atau kesalahan dalam pengetikan kata-kata dan juga sourcecode yang digunakan. Bila ada tanggapan, Anda dapat mengetikan komentar diakhir dari tulisan ini.
Mau tidak repot dan tidak capek
>>Download Disini<<
Terimakasih
Wassalamualaikum...
0 comments:
Post a Comment