tag:blogger.com,1999:blog-638138533443125232024-03-13T07:39:12.750+07:00Artikel☼ Mahsun Huda ☼http://www.blogger.com/profile/13779443357484713753noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-63813853344312523.post-45643980225588261482010-03-28T15:05:00.021+07:002010-03-29T22:21:15.199+07:00Membuat Form Login dengan PHP<br/><span style="font-style: italic;font-family:arial;" >Assalaamu'alaikum Wr. Wb.</span><br /><br /><span style="font-family:arial;">Mari belajar membuat form login sederhana dengan menggunakan PHP.</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_kLwv89Hqzec/S7DEZRBBRCI/AAAAAAAAAGM/Kim7jf7j8g8/s1600/login.bmp"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 182px;" src="http://1.bp.blogspot.com/_kLwv89Hqzec/S7DEZRBBRCI/AAAAAAAAAGM/Kim7jf7j8g8/s200/login.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5454075087089124386" /></a><br /><span style="font-family:arial;">copy-lah kode berikut ke notepad dan simpan dengan nama index.php</span><br /><br /><span style="font-family:courier new;"><head></span><br /><span style="font-family:courier new;"><title>Demo Login</title></span><br /><span style="font-family:courier new;"><style type="text/css"></span><br /><span style="font-family:courier new;"><!--</span><br /><span style="font-family:courier new;"> .huruf {</span><br /><span style="font-family:courier new;"> color: #ffd700;</span><br /><span style="font-family:courier new;"> font-size: 14px;</span><br /><span style="font-family:courier new;"> font-weight: bold;</span><br /><span style="font-family:courier new;"> text-decoration: none;</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> .border1 {</span><br /><span style="font-family:courier new;"> margin: auto;</span><br /><span style="font-family:courier new;"> border: 2px solid red;</span><br /><span style="font-family:courier new;"> background: #4b0008;</span><br /><span style="font-family:courier new;"> margin-top:100px;</span><br /><span style="font-family:courier new;"> width: 300px;</span><br /><span style="font-family:courier new;"> height: 270px;</span><br /><span style="font-family:courier new;"> border-width: medium;</span><span style="font-family:courier new;"> }<br /></span>.border2 {<br />height: auto;<br />background: #4b0008;<br />padding: 5px 40px 5px 40px;<br />}<br />body {<br />background-color: #e9967a;<br />}<br /><div style="font-family: courier new;" class="fullpost">--><br /></style><br /></head><br /><br /><body><br /><script type="text/javascript"><br />function Proses() {<br /> var FormLogin = document.getElementById("FormLogin");<br /> if (FormLogin.username.value == "") {<br /> alert("Username kosong. Isi Username dengan benar..!");<br /> return;<br /> }<br /> if (FormLogin.password.value == "") {<br /> alert("Password belum dimasukkan. Silakan ulangi lagi..!");<br /> return;<br /> }<br />}<br /></script><br /><br /><form name="FormLogin" id="FormLogin" action="validasi.php" method="post"><br /><div class="border1"><br /><div class="border2"><br /> <h3 align="center"><font color="yellow" size="6">LOGIN</font></h3><br /> <hr size="4" style="border-color: #c0c0c0;"/><br /><br /> <p class="huruf"><b>Username</b><br /><br /> <input type="text" name="username" size="32"/><br /> </p><br /><br /> <p class="huruf"><b>Password</b><br /><br /> <input type="password" name="password" size="32"/><br /> </p><br /><br /> <p><br /> <input type="submit" value="login" onclick="Proses();"/><br /> </p><br /><br /></form><br /></body><br /></html><br /><br /><br /><span style="font-family:arial;">Untuk validasi copy-lah kode di bawah ini dan simpan dengan nama validasi.php (jadikan satu folder dengan file index.php)</span><br /><br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br /><br /><head><br /><style type="text/css"><br /><!--<br />.huruf {<br />color: #ffd700;<br />font-size: 14px;<br />font-weight: bold;<br />text-decoration: none;<br />}<br />.border1 {<br />margin: auto;<br />border: 2px solid red;<br />background: #4b0008;<br />margin-top:100px;<br />width: 300px;<br />height: 260px;<br />border-width: medium;<br />}<br />.border2 {<br />height: auto;<br />background: #4b0008;<br />padding: 5px 40px 5px 40px;<br />}<br />body {<br />background-color: #e9967a;<br />}<br />--><br /></style><br /></head><br /><br /><body><br /><div class="huruf"><br /><?php<br />require_once('index.php');<br />$user = 'admin';<br />$pass = '12345';<br />if ((isset($_REQUEST['username']) == $user)&&($_POST['password'] == $pass)){<br /> echo "<strong><font size='2' color=yellow>Selamat Datang </strong></center>". $_POST['username'];<br />}<br />else {<br /> echo "<strong><font size='2' color=red>Username & Password SALAH</strong></center>";<br />}<br />?><br /></div><br /></body><br /></html><br /><br /><br />SELAMAT MENCOBA..!<br /></div>☼ Mahsun Huda ☼http://www.blogger.com/profile/13779443357484713753noreply@blogger.com1tag:blogger.com,1999:blog-63813853344312523.post-38665100786349221172010-03-14T17:29:00.010+07:002010-03-15T11:41:33.463+07:00Passing Argumen di PHP<br/><span style="font-style:italic;">Assalaamu'alaikum Wr. Wb.</span><br /><br />Kali ini saya akan melakukan sedikit review agar teman-teman mudah dalam memahami tentang <span style="font-style:italic;">Passing By Value</span> dan <span style="font-style:italic;">Passing By Reference</span> dengan cara membandingkannya.<br /><br /><span style="font-weight:bold;">1. Passing by Value</span><br /><br />Secara default, semua nilai yang di-pass masuk atau keluar dari fungsi adalah <span style="font-style:italic;">passing by value</span>, bukan <span style="font-style:italic;">by reference</span>. Ini berarti PHP membuat kopian dari nilai original dan nilai kopian itulah yang kita akses dan kita manipulasi, bukan nilai originalnya.<br /><br />Dengan begitu bagaimanapun kita ubah nilai itu, tidak akan mengubah nilai originalnya…<br /><div class="fullpost">contoh:<br /><br /><?php<br />function Total($nilai) {<br />$nilai++;<br />}<br />$input=7;<br />Total($input);<br />echo $input;<br />?><br /><br />Penjelasan:<br />Pada saat fungsi Total dipanggil,<br /><br />Total($input);<br /><br />Fungsi tersebut akan memasukkan nilai dari variabel $input ke dalam argumennya, jadi disini argumen fungsi total adalah 7 (ini adalah nilai aslinya). selanjutnya PHP meng-copy nilai asli tersebut, kemudian hasil copy-nya digunakan untuk proses manipulasi fungsi, sedangkan nilai yang asli dibiarkan tidak berubah. Proses manipulasinya sbb:<br /><br />$nilai++;<br />$nilai = $nilai + 1<br />$nilai = 5 + 1<br />$nilai = 6<br /><br />Untuk output,<br />echo $input;<br /><br />Nilai variabel $input yang diambil disini adalah nilai variabel aslinya, sehingga hasil manipulasi fungsi tadi tidak dipakai, karena bukan nilai asli. Jadi outputnya adalah 7.<br /><br />Tetapi apabila menggunakan <span style="font-style:italic;">passing by reference</span> akan bernilai 8.<br /><br />Bagaimana outputnya akan bernilai 8? akan saya jelaskan lebih dahulu tentang <span style="font-style:italic;">passing by reference</span>.<br /><br /><span style="font-weight:bold;">2. Passing by Reference</span>:<br /><br />berbeda dengan passing by value yang bersifat mengkopi, passing by reference memberikan nilai aslinya untuk diakses dan dimanipulasi, dengan contoh yang sama seperti diatas, kita akan modifikasi menjadi mekanisme passing by reference.<br /><br />Untuk mengubah jadi passing by reference, kita hanya cukup menambahkan operator & pada argumennya.<br /><br /><?php<br />function Total(&$nilai) {<br />$nilai++;<br />}<br />$input=7;<br />Total($input);<br />echo $input;<br />?><br /><br />Penjelasan:<br /><br />Sesuai dengan penjelasan passing by reference diatas, nilai yang diakses & dimanipulasi adalah nilai aslinya, dengan begitu hasil manipulasi fungsilah yang gunakan sebagai outputnya, yaitu 8.<br /><br />Finish… Mudahkan, saya ingatkan lagi bahwa ini hanya sekedar untuk mempermudah pemahaman teman2 saja, sengaja saya menggunakan bahasa yang umum agar lebih mudah dimengerti..<br /><br />SELAMAT MENCOBA...!!<br /></div>☼ Mahsun Huda ☼http://www.blogger.com/profile/13779443357484713753noreply@blogger.com0tag:blogger.com,1999:blog-63813853344312523.post-10804010075709240212010-03-14T16:20:00.007+07:002010-03-14T16:56:03.342+07:00Aplikasi Greeting Menggunakan PHP<span style="font-style: italic;font-family:arial;" ><br />Assalaamu'alaikum Wr. Wb.</span><br /><br /><span style="font-family:arial;">Kali ini sedikit saya akan memberikan tips dalam membuat aplikasi Greeting dengan menggunakan PHP. Sebelumnya yang dimaksud dengan PHP (</span><span style="font-style: italic;font-family:arial;" >PHP: Hypertext Preprocessor</span><span style="font-family:arial;">) merupakan salah satu bahasa </span><span style="font-style: italic;font-family:arial;" >webscripting</span><span style="font-family:arial;"> yang sangat powerful. Sejak pertama kali diperkenalkan, bahasa ini dimaksudkan untuk menghasilkan halaman-halaman web yang dinamis. Hingga saat ini, PHP banyak sekali digunakan dalam membuat aplikasi web, baik lokal maupun Internet—dinamis, dan atraktif.</span><br /><br /><span style="font-family:arial;">Sebelum kita memulai membuat program PHP, maka kita harus menginstall terlebih dahulu Web Server seperti WAMPP, XAMPP, dll. Namun kali ini saya menggunakan XAMPP dan silakan download </span><a style="font-family: arial;" href="http://www.4shared.com/file/240907280/fdcb17b/WampServer.html">DI SINI</a><span style="font-family:arial;">. Setelah diinstall kemudian ketikkan kode di bawah ini menggunakan NOTEPAD dan simpan dalam folder htdocs (karena menggunakan XAMPP) dengan format *.php (Nama_File.php).</span><br /><div class="fullpost" style="font-family:arial;">Untuk mempermudah dalam mengorganisir kode program, keberadaan fungsi atau prosedur sangat membantu. Pada contoh program Greeting sederhana ini saya menggunakan prosedur, dimana ada pengembalian nilai dalam prosedur tersebut.<br /><br /><br /><span style="font-family:courier new;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"></span><br /><span style="font-family:courier new;"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></span><br /><span style="font-family:courier new;"><head></span><br /><span style="font-family:courier new;"> <title>GREETING TIMES</title></span><br /><span style="font-family:courier new;"></head></span><br /><span style="font-family:courier new;"><body></span><br /><span style="font-family:courier new;"> <?php</span><br /><span style="font-family:courier new;"> $nol = 0;</span><br /><span style="font-family:courier new;"> $jam = 1;</span><br /><span style="font-family:courier new;"> function greeting($jam) {</span><br /><span style="font-family:courier new;"> if ($nol == 0) {</span><br /><span style="font-family:courier new;"> if (($jam >= 1) AND ($jam <= 10)) {</span><br /><span style="font-family:courier new;"> $ucapan = 'Selamat Pagi !';</span><br /><span style="font-family:courier new;"> } elseif (($jam >= 11) AND ($jam <= 14)) {</span><br /><span style="font-family:courier new;"> $ucapan = 'Selamat Siang !';</span><br /><span style="font-family:courier new;"> } elseif (($jam >= 15) AND ($jam <= 18)) {</span><br /><span style="font-family:courier new;"> $ucapan = 'Selamat Sore !';</span><br /><span style="font-family:courier new;"> } elseif (($jam >= 19) AND ($jam <= 24)) {</span><br /><span style="font-family:courier new;"> $ucapan = 'Selamat Malam !';</span><br /><span style="font-family:courier new;"> } else {</span><br /><span style="font-family:courier new;"> $ucapan = 'hehehe...!';</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> return ($ucapan);</span><br /><span style="font-family:courier new;"> } </span><br /><span style="font-family:courier new;"> echo 'Assalaamu\'alaikum... <br/>';</span><br /><span style="font-family:courier new;"> echo 'Hallo semua, ';</span><br /><span style="font-family:courier new;"> echo greeting($jam); </span><br /><span style="font-family:courier new;"> ?></span><br /><span style="font-family:courier new;"></body></span><br /><span style="font-family:courier new;"></html></span><br /><br /><br />SELAMAT MENCOBA...!!<br /></div>☼ Mahsun Huda ☼http://www.blogger.com/profile/13779443357484713753noreply@blogger.com0tag:blogger.com,1999:blog-63813853344312523.post-38190562704366957052010-03-07T18:40:00.005+07:002010-03-07T19:06:00.315+07:00Aplikasi Kalkulator Menggunakan JavaScript<span style="font-style: italic;font-family:arial;" ><br />Assalaamu'alaikum Wr. Wb.</span><br /><br /><span style="font-family:arial;">Teman-teman, tentunya kalian sudah pada tahu apa itu HTML. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web. Nah kali ini saya akan sedikit membahas tentang JavaScript dan apa hubungannya dengan HTML.</span><br /><br /><span style="font-family:arial;">Scripting merupakan jenis lain dari pemrograman, yang umumnya lebih mudah dipahami. Script dapat disisipkan ke dalam dokumen HTML dengan menggunakan tag <script>. Tidak seperti style sheet, script bisa terlihat di</span><br /><span style="font-family:arial;">dalam <head> ataupun <body>.</span><br /><div class="fullpost" style="font-family:arial;">Berikut ini adalah contoh source code untuk aplikasi kalkulator:<br /><br /><span style="font-family:courier new;"><!DOCTYPE html</span><br /><span style="font-family:courier new;">PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</span><br /><span style="font-family:courier new;">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span><br /><span style="font-family:courier new;"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></span><br /><span style="font-family:courier new;"><head></span><br /><span style="font-family:courier new;"> <title>KALKULATOR ONLINE</title></span><br /><span style="font-family:courier new;"> <script language="javascript" type="text/javascript"></span><br /><span style="font-family:courier new;"> <!--</span><br /><span style="font-family:courier new;"> var flag = false;</span><br /><span style="font-family:courier new;"> function nilai(angka) {</span><br /><span style="font-family:courier new;"> if (flag) calc.b.value += angka;</span><br /><span style="font-family:courier new;"> else calc.a.value += angka;</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> function add() {</span><br /><span style="font-family:courier new;"> calc.operator.value = '+'</span><br /><span style="font-family:courier new;"> flag = true;</span><br /><span style="font-family:courier new;"> calc.b.focus()</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> function less() {</span><br /><span style="font-family:courier new;"> calc.operator.value = '-'</span><br /><span style="font-family:courier new;"> flag = true;</span><br /><span style="font-family:courier new;"> calc.b.focus()</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> function multiply() {</span><br /><span style="font-family:courier new;"> calc.operator.value = '*'</span><br /><span style="font-family:courier new;"> flag = true;</span><br /><span style="font-family:courier new;"> calc.b.focus()</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> function divide() {</span><br /><span style="font-family:courier new;"> calc.opetaor.value = '/'</span><br /><span style="font-family:courier new;"> flag = true;</span><br /><span style="font-family:courier new;"> calc.b.focus()</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> //--></span><br /><span style="font-family:courier new;"> </script></span><br /><span style="font-family:courier new;"></head></span><br /><span style="font-family:courier new;"><body></span><br /><span style="font-family:courier new;"> <table border="1" align="center" cellspacing=2 cellpadding=10 bgcolor="#4b0008"></span><br /><span style="font-family:courier new;"> <tr></span><br /><span style="font-family:courier new;"> <th bgcolor="#800000" width="350"></span><br /><span style="font-family:courier new;"> <font size="4" color="#ffff00">Aplikasi Kalkulator Sederhana</font></span><br /><span style="font-family:courier new;"> </th></span><br /><span style="font-family:courier new;"> </tr></span><br /><span style="font-family:courier new;"> <tr></span><br /><span style="font-family:courier new;"> <td align="center" bgcolor="#e9967a"></span><br /><span style="font-family:courier new;"> <form name=Calculator action="#"></span><br /><span style="font-family:courier new;"> <input type="text" name="operan1" size="3" /></span><br /><span style="font-family:courier new;"> <select name="operator" onchange="setSelected(this);"></span><br /><span style="font-family:courier new;"> <option>-Operator-</option></span><br /><span style="font-family:courier new;"> <option value="+">+</option></span><br /><span style="font-family:courier new;"> <option value="-">-</option></span><br /><span style="font-family:courier new;"> <option value="*">x</option></span><br /><span style="font-family:courier new;"> <option value="/">/</option></span><br /><span style="font-family:courier new;"> </select></span><br /><span style="font-family:courier new;"> <input type="text" name="operan2" size="3" /></span><br /><span style="font-family:courier new;"> <input type="button" name="equal" value="=" onclick="Calculator.result.value=eval(Calculator.operan1.value + Calculator.operator.value + Calculator.operan2.value)" /></span><br /><span style="font-family:courier new;"> <input type="text" name="result" size="12" disabled="true" /></span><br /><span style="font-family:courier new;"> </form></span><br /><span style="font-family:courier new;"> </td></span><br /><span style="font-family:courier new;"> </tr></span><br /><span style="font-family:courier new;"> <tr></span><br /><span style="font-family:courier new;"> <td align="center" bgcolor="#e9967a"></span><br /><span style="font-family:courier new;"> <font size="2"><b>CopyRight &copy; 2010 by Mahsun Huda<br/>Mahasiswa PTI - UM</b></font></span><br /><span style="font-family:courier new;"> </td></span><br /><span style="font-family:courier new;"> </tr></span><br /><span style="font-family:courier new;"> </table></span><br /><span style="font-family:courier new;"></body></span><br /><span style="font-family:courier new;"></html></span><br /><br /><br />Jika nanti programnya dijalankan, maka hasilnya seperti gambar berikut:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_kLwv89Hqzec/S5OWR8BqgeI/AAAAAAAAAFQ/WPd_iNeTN50/s1600-h/Kalkulator.bmp"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 200px; height: 163px;" src="http://3.bp.blogspot.com/_kLwv89Hqzec/S5OWR8BqgeI/AAAAAAAAAFQ/WPd_iNeTN50/s200/Kalkulator.bmp" alt="" id="BLOGGER_PHOTO_ID_5445861609336111586" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_kLwv89Hqzec/S5OUiJpT42I/AAAAAAAAAFI/CL78E8caK4o/s1600-h/Kalkulator.bmp"><br /></a><br /><br />SELAMAT MENCOBA...!!<br /></div>☼ Mahsun Huda ☼http://www.blogger.com/profile/13779443357484713753noreply@blogger.com0tag:blogger.com,1999:blog-63813853344312523.post-19965282715288139182010-02-28T22:21:00.016+07:002010-03-01T00:13:37.180+07:00Desain Web Menggunakan CSS<br/><span style="font-style: italic;font-family:arial;" >Assalaamu'alaikum Wr. Wb.</span><br /><br /><span style="font-family:arial;">Mendesain web memang nggak ada bosen-bosennya.</span><br /><span style="font-family:arial;">Setelah kemaren belajar mendesain web menggunakan tabel, kali ini akan dibahas bagaimana mendesain web menggunakan CSS. Sebelumnya apa itu CSS?</span><br /><br /><span style="font-family:arial;">CSS (</span><span style="font-style: italic;font-family:arial;" >Cascading Style Sheets</span><span style="font-family:arial;">) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML.</span><br /><br /><span style="font-family:arial;">CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada struktur isi.</span><div class="fullpost"><span style="font-family:arial;">Sebagai latihan, kita akan membuat kerangka desain semacam berikut:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_kLwv89Hqzec/S4qWmuuwcFI/AAAAAAAAAEk/xf1QHGIazY0/s1600-h/Kerangka_CSS.JPG"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 262px; height: 164px;" src="http://3.bp.blogspot.com/_kLwv89Hqzec/S4qWmuuwcFI/AAAAAAAAAEk/xf1QHGIazY0/s200/Kerangka_CSS.JPG" alt="" id="BLOGGER_PHOTO_ID_5443328691754004562" border="0" /></a><br /><span style="font-family:arial;">Maka, kode CSSnya seperti di bawah ini:</span><br /><span style="font-family:arial;">(simpan file dengan nama </span><span style="font-weight: bold;font-family:arial;" >mystyle.css</span><span style="font-family:arial;">)</span><br /><br /><span style="font-family:courier new;">#wrapper {</span><br /><span style="font-family:courier new;">margin: auto;</span><br /><span style="font-family:courier new;">width: 1000px;</span><br /><span style="font-family:courier new;">border: 1px solid red;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#header {</span><br /><span style="font-family:courier new;">margin: auto;</span><br /><span style="font-family:courier new;">width: 1000px;</span><br /><span style="font-family:courier new;">height: 90px;</span><br /><span style="font-family:courier new;">border: 1px solid blue;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#inner {</span><br /><span style="font-family:courier new;">float: left;</span><br /><span style="font-family:courier new;">margin: 5px 0;</span><br /><span style="font-family:courier new;">border: 1px solid black;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#sidebar {</span><br /><span style="font-family:courier new;">float: left;</span><br /><span style="font-family:courier new;">margin-right: 0px;</span><br /><span style="font-family:courier new;">width: 200px;</span><br /><span style="font-family:courier new;">height: 440px;</span><br /><span style="font-family:courier new;">border: 1px solid red;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#wadah {</span><br /><span style="font-family:courier new;">float: left;</span><br /><span style="font-family:courier new;">width: 794px;</span><br /><span style="font-family:courier new;">height: 440px;</span><br /><span style="font-family:courier new;">border: 1px solid green;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#top {</span><br /><span style="font-family:courier new;">float: top;</span><br /><span style="font-family:courier new;">width: 795px;</span><br /><span style="font-family:courier new;">height: 151px;</span><br /><span style="font-family:courier new;">border: 1px solid green;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#content {</span><br /><span style="font-family:courier new;">float: left;</span><br /><span style="font-family:courier new;">width: 480px;</span><br /><span style="font-family:courier new;">height: 275px;</span><br /><span style="font-family:courier new;">margin-left: 15px;</span><br /><span style="font-family:courier new;">border: 1px solid red;</span><br /><span style="font-family:courier new;">padding: 10px 0px 0px 0px;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#right{</span><br /><span style="font-family:courier new;">float: right;</span><br /><span style="font-family:courier new;">width: 270px;</span><br /><span style="font-family:courier new;">height: 150px;</span><br /><span style="font-family:courier new;">margin-top: 10px;</span><br /><span style="font-family:courier new;">border: 2px solid #8b0000;</span><br /><span style="font-family:courier new;">padding: 10px 0px 0px 10px;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#footer {</span><br /><span style="font-family:courier new;">clear: both;</span><br /><span style="font-family:courier new;">width: 1000px;</span><br /><span style="font-family:courier new;">height: 45px;</span><br /><span style="font-family:courier new;">border: 1px solid blue;</span><br /><span style="font-family:courier new;">}</span><br /><br /><span style="font-family:arial;">Kemudian untuk kode HTMLnya adalah:</span><br /><span style="font-family:arial;">(simpan file dengan nama </span><span style="font-weight: bold;font-family:arial;" >Kerangka_CSS.html</span><span style="font-family:arial;">)</span><br /><span style="font-family:arial;">Jadikan satu folder dengan file </span><span style="font-weight: bold;font-family:arial;" >mystyle.css</span><br /><br /><span style="font-family:courier new;"><!DOCTYPE html</span><br /><span style="font-family:courier new;">PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</span><br /><span style="font-family:courier new;">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span><br /><span style="font-family:courier new;"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></span><br /><span style="font-family:courier new;"><head></span><br /><span style="font-family:courier new;"><title>Kerangka Desain CSS</title></span><br /><span style="font-family:courier new;"><link rel="stylesheet" href="mystyle.css" type="text/css" /></span><br /><span style="font-family:courier new;"></head></span><br /><span style="font-family:courier new;"><body></span><br /><span style="font-family:courier new;"><div id="wrapper"></span><br /><span style="font-family:courier new;"> <div id="header"></span><br /><span style="font-family:courier new;"> Header</span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="inner"></span><br /><span style="font-family:courier new;"> <div id="sidebar"></span><br /><span style="font-family:courier new;"> Sidebar</span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="wadah"></span><br /><span style="font-family:courier new;"> <div id="top"></span><br /><span style="font-family:courier new;"> Top</span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="bottom"></span><br /><span style="font-family:courier new;"> <div id="content"></span><br /><span style="font-family:courier new;"> Content</span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="right"></span><br /><span style="font-family:courier new;"> Right</span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="footer"></span><br /><span style="font-family:courier new;"> Footer</span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"></div></span><br /><span style="font-family:courier new;"></body></span><br /><span style="font-family:courier new;"></html></span><br /><br /><br /><span style="font-family:arial;">Sehingga, dengan sedikit sentuhan kreatifitas kerangka tadi bisa menjadi seperti ini:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_kLwv89Hqzec/S4qerH5xtgI/AAAAAAAAAEs/PWphrA8IiQM/s1600-h/Desain_CSS.JPG"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 268px; height: 156px;" src="http://2.bp.blogspot.com/_kLwv89Hqzec/S4qerH5xtgI/AAAAAAAAAEs/PWphrA8IiQM/s200/Desain_CSS.JPG" alt="" id="BLOGGER_PHOTO_ID_5443337563323610626" border="0" /></a><br /><span style="font-family:arial;">Dan kode program untuk CSSnya:</span><br /><span style="font-family:arial;">(simpan dengan nama </span><span style="font-weight: bold;font-family:arial;" >style_css.css</span><span style="font-family:arial;">)</span><br /><br /><span style="font-family:courier new;">#wrapper {</span><br /><span style="font-family:courier new;"> margin: auto;</span><br /><span style="font-family:courier new;"> width: 1000px;</span><br /><span style="font-family:courier new;"> border: 0px solid red;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#header {</span><br /><span style="font-family:courier new;"> margin: auto;</span><br /><span style="font-family:courier new;"> width: 1000px;</span><br /><span style="font-family:courier new;"> height: 100px;</span><br /><span style="font-family:courier new;"> border: 0px solid blue;</span><br /><span style="font-family:courier new;"> background: url("bgheader.jpg");</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#kiri {</span><br /><span style="font-family:courier new;"> float: left;</span><br /><span style="font-family:courier new;"> margin-left: 0px;</span><br /><span style="font-family:courier new;"> width: auto;</span><br /><span style="font-family:courier new;"> height: auto;</span><br /><span style="font-family:courier new;"> border: 0px solid yellow;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#kanan {</span><br /><span style="font-family:courier new;"> float: right;</span><br /><span style="font-family:courier new;"> margin-right: 10px;</span><br /><span style="font-family:courier new;"> width: auto;</span><br /><span style="font-family:courier new;"> height: auto;</span><br /><span style="font-family:courier new;"> border: 0px solid yellow;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#logo { </span><br /><span style="font-family:courier new;"> float: left;</span><br /><span style="font-family:courier new;"> margin-left: 0px; </span><br /><span style="font-family:courier new;"> width: 80px;</span><br /><span style="font-family:courier new;"> height: 80px;</span><br /><span style="font-family:courier new;"> border: 0px solid red;</span><br /><span style="font-family:courier new;"> padding: 10px 0px 0px 10px;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#teks { </span><br /><span style="font-family:courier new;"> float: left;</span><br /><span style="font-family:courier new;"> margin-right: 0px; </span><br /><span style="font-family:courier new;"> border: 0px solid red;</span><br /><span style="font-family:courier new;"> padding: 25px 0px 0px 20px;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#menuatas { </span><br /><span style="font-family:courier new;"> float: top;</span><br /><span style="font-family:courier new;"> margin-left: 0px; </span><br /><span style="font-family:courier new;"> border: 0px solid red;</span><br /><span style="font-family:courier new;"> padding: 0px;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#cari { </span><br /><span style="font-family:courier new;"> float: buttom;</span><br /><span style="font-family:courier new;"> margin-top: 30px; </span><br /><span style="font-family:courier new;"> margin-left: 35px; </span><br /><span style="font-family:courier new;"> border: 0px solid red;</span><br /><span style="font-family:courier new;"> padding: 0px;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#inner {</span><br /><span style="font-family:courier new;"> float: left;</span><br /><span style="font-family:courier new;"> <!-- margin: 5px 0; --></span><br /><span style="font-family:courier new;"> border: 1px solid black;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#sidebar { </span><br /><span style="font-family:courier new;"> float: left;</span><br /><span style="font-family:courier new;"> margin-right: 0px; </span><br /><span style="font-family:courier new;"> width: 200px;</span><br /><span style="font-family:courier new;"> height: 440px;</span><br /><span style="font-family:courier new;"> border: 0px solid red;</span><br /><span style="font-family:courier new;"> background: #e9967a;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#wadah {</span><br /><span style="font-family:courier new;"> float: left;</span><br /><span style="font-family:courier new;"> width: 798px;</span><br /><span style="font-family:courier new;"> height: 440px;</span><br /><span style="font-family:courier new;"> border: 0px solid green;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#top {</span><br /><span style="font-family:courier new;"> float: top;</span><br /><span style="font-family:courier new;"> width: 795px;</span><br /><span style="font-family:courier new;"> height: 151px;</span><br /><span style="font-family:courier new;"> border: 0px solid green;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#content {</span><br /><span style="font-family:courier new;"> float: left;</span><br /><span style="font-family:courier new;"> width: 480px;</span><br /><span style="font-family:courier new;"> height: 275px;</span><br /><span style="font-family:courier new;"> margin-left: 15px;</span><br /><span style="font-family:courier new;"> border: 0px solid red;</span><br /><span style="font-family:courier new;"> padding: 10px 0px 0px 0px;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#right{</span><br /><span style="font-family:courier new;"> float: right;</span><br /><span style="font-family:courier new;"> width: 270px;</span><br /><span style="font-family:courier new;"> height: 150px;</span><br /><span style="font-family:courier new;"> margin-top: 10px;</span><br /><span style="font-family:courier new;"> border: 2px solid #8b0000;</span><br /><span style="font-family:courier new;"> background: #e9967a;</span><br /><span style="font-family:courier new;"> padding: 10px 0px 0px 10px;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#footer {</span><br /><span style="font-family:courier new;"> clear: both;</span><br /><span style="font-family:courier new;"> width: 1000px;</span><br /><span style="font-family:courier new;"> height: 45px;</span><br /><span style="font-family:courier new;"> border: 0px solid blue;</span><br /><span style="font-family:courier new;"> background: #a9a9a9;</span><br /><span style="font-family:courier new;">}</span><br /><span style="font-family:courier new;">#garis {</span><br /><span style="font-family:courier new;"> clear: both;</span><br /><span style="font-family:courier new;"> width: 1000px;</span><br /><span style="font-family:courier new;"> height: 7px;</span><br /><span style="font-family:courier new;"> border: 0px solid blue;</span><br /><span style="font-family:courier new;"> background: #000000;</span><br /><span style="font-family:courier new;">}</span><br /><br /><span style="font-family:arial;">Sedangkan kode program untuk HTMLnya:</span><br /><span style="font-family:arial;">(simpan dengan nama </span><span style="font-weight: bold;font-family:arial;" >Desain_CSS.html</span><span style="font-family:arial;">)</span><br /><span style="font-family:arial;">Jangan lupa, simpan dalam satu folder dengan file </span><span style="font-weight: bold;font-family:arial;" >style_css.css</span><br /><br /><span style="font-family:courier new;"><!DOCTYPE html</span><br /><span style="font-family:courier new;">PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</span><br /><span style="font-family:courier new;">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span><br /><span style="font-family:courier new;"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></span><br /><span style="font-family:courier new;"><head></span><br /><span style="font-family:courier new;"> <title>Mendesain Web dengan CSS</title></span><br /><span style="font-family:courier new;"> <link rel="stylesheet" href="style_css.css" type="text/css" /></span><br /><span style="font-family:courier new;"> <style type="text/css"></span><br /><span style="font-family:courier new;"> <!--</span><br /><span style="font-family:courier new;"> .border1 {</span><br /><span style="font-family:courier new;"> border: 1px solid red;</span><br /><span style="font-family:courier new;"> padding: 10px;</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> .border2 {</span><br /><span style="font-family:courier new;"> padding: 10px 0px 0px 200px;</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> .huruf {</span><br /><span style="font-family:courier new;"> color: yellow;</span><br /><span style="font-family:courier new;"> font-size: 12px;</span><br /><span style="font-family:courier new;"> font-weight: bold;</span><br /><span style="font-family:courier new;"> text-decoration: none;</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> .huruf2 {</span><br /><span style="font-family:courier new;"> color: black;</span><br /><span style="font-family:courier new;"> font-size: 14px;</span><br /><span style="font-family:courier new;"> text-decoration: none;</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> #menumakanan {</span><br /><span style="font-family:courier new;"> width: 185px;</span><br /><span style="font-family:courier new;"> height: 25px;</span><br /><span style="font-family:courier new;"> font-size: 16px;</span><br /><span style="font-family:courier new;"> padding: 5px 0px 0px 15px;</span><br /><span style="font-family:courier new;"> color: #ffffff;</span><br /><span style="font-family:courier new;"> background: #4b0008;</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> #menu ul {</span><br /><span style="font-family:courier new;"> width: 200px;</span><br /><span style="font-family:courier new;"> list-style-type:none;</span><br /><span style="font-family:courier new;"> padding:0; margin:0;</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> #menu a:link, #leftmenu a:visited, #leftmenu a:active {</span><br /><span style="font-family:courier new;"> padding-left: 15px;</span><br /><span style="font-family:courier new;"> text-decoration: none;</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> #menu a {</span><br /><span style="font-family:courier new;"> padding: 5px 0px 5px 15px; display: block;</span><br /><span style="font-family:courier new;"> background: #a52a2a no-repeat left center;</span><br /><span style="font-family:courier new;"> margin: 0px 0px 1px; color: #c0c0c0;</span><br /><span style="font-family:courier new;"> }</span><br /><span style="font-family:courier new;"> #menu a:hover {</span><br /><span style="font-family:courier new;"> background: #b22222 no-repeat left center; color: #ffffff;</span><br /><span style="font-family:courier new;"> } </span><br /><span style="font-family:courier new;"> --></span><br /><span style="font-family:courier new;"> </style></span><br /><span style="font-family:courier new;"></head></span><br /><span style="font-family:courier new;"><body></span><br /><span style="font-family:courier new;"> <div id="wrapper"></span><br /><span style="font-family:courier new;"> <div id="header"></span><br /><span style="font-family:courier new;"> <div id="kiri"></span><br /><span style="font-family:courier new;"> <div id="logo"></span><br /><span style="font-family:courier new;"> <img src="logo.jpg" width="80" height="80"/></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="teks"></span><br /><span style="font-family:courier new;"> <font color="#ffff00"size="5"><b>Rumah Makan "SARI"</b></font><br/></span><br /><span style="font-family:courier new;"> <font color="#ffff00"size="3"><b>Jl. Terusan Ambarawa No.11 Malang 65145 / Telp. 9091196 </b></font></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="kanan"></span><br /><span style="font-family:courier new;"> <div id="menuatas"></span><br /><span style="font-family:courier new;"> <a href="home.html" class="huruf">Home |</a></span><br /><span style="font-family:courier new;"> <a href="sitemap.html" class="huruf">Sitemap |</a></span><br /><span style="font-family:courier new;"> <a href="rss.html" class="huruf">RSS |</a></span><br /><span style="font-family:courier new;"> <a href="contact.html" class="huruf">Contact |</a></span><br /><span style="font-family:courier new;"> <a href="about.html" class="huruf">About Us</a></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="cari"></span><br /><span style="font-family:courier new;"> <p class="huruf"></span><br /><span style="font-family:courier new;"> Search: <input type="text" /></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="garis"></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="inner"></span><br /><span style="font-family:courier new;"> <div id="sidebar"></span><br /><span style="font-family:courier new;"> <div id="menumakanan"></span><br /><span style="font-family:courier new;"> <b>MENU MAKANAN</b></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="menu"></span><br /><span style="font-family:courier new;"> <ul> </span><br /><span style="font-family:courier new;"> <li><a href="ayam_panggang">Ayam Panggang</a></li></span><br /><span style="font-family:courier new;"> <li><a href="bebek_panggang">Bebek Panggang</a></li></span><br /><span style="font-family:courier new;"> <li><a href="soto_ayam">Soto Ayam</a></li></span><br /><span style="font-family:courier new;"> <li><a href="soto_daging">Soto Daging</a></li></span><br /><span style="font-family:courier new;"> </ul></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="wadah"></span><br /><span style="font-family:courier new;"> <div id="top"></span><br /><span style="font-family:courier new;"> <img src="foto.png" width="795" height="153"/></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="bottom"></span><br /><span style="font-family:courier new;"> <div id="content"></span><br /><span style="font-family:courier new;"> <font size="5"><b>Ayam Panggang Spesial</b></font><hr align="left" width="250"/></span><br /><span style="font-family:courier new;"> <img src="ayam_panggang.jpg" height="150" width="204"/><br/></span><br /><span style="font-family:courier new;"> Ayam panggang spesial merupakan menu favorit Rumah Makan "SARI".<br/></span><br /><span style="font-family:courier new;"> Banyak pengunjung yang datang dan memesan menu ini, bahkan dari<br/></span><br /><span style="font-family:courier new;"> luar kotapun tidak ketinggalan untuk mencoba resep rahasia kami ini.<br/></span><br /><span style="font-family:courier new;"> Rumah Makan Sari, memang paling ciamik...!!!</span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="right"></span><br /><span style="font-family:courier new;"> <font size="4"><b>Berita Terbaru:</b></font></span><br /><span style="font-family:courier new;"> <ul></span><br /><span style="font-family:courier new;"> <li><a href="lowongan_pegawai.html" class="huruf2">Dibutuhkan pegawai baru</a></li></span><br /><span style="font-family:courier new;"> <li><a href="lomba_masak.html" class="huruf2">Lomba memasak tingkat kota</a></li></span><br /><span style="font-family:courier new;"> <li><a href="daftar_menu.html" class="huruf2">Daftar menu masakan favorit</a></li></span><br /><span style="font-family:courier new;"> </ul></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> <div id="footer"></span><br /><span style="font-family:courier new;"> <p class="border2"></span><br /><span style="font-family:courier new;"> CopyRight &copy; 2010 by Mahsun Huda - Mahasiswa PTI - Teknik Elektro - Universitas Negeri Malang</span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"> </div></span><br /><span style="font-family:courier new;"></body></span><br /><span style="font-family:courier new;"></html></span><br /><br />SELAMAT MENCOBA...!!!<br /></div>☼ Mahsun Huda ☼http://www.blogger.com/profile/13779443357484713753noreply@blogger.com0tag:blogger.com,1999:blog-63813853344312523.post-13298697425831632692010-02-21T18:45:00.000+07:002010-02-21T21:36:57.748+07:00Desain Web Menggunakan Tabel<br/><span style="font-style: italic;">Assalaamu'alaikum Wr. Wb.</span><br /><br />Mendesain merupakan salah satu langkah awal yang tidak kalah pentingnya dalam membangun sebuah website. Dalam mendesain sebuah web, biasanya disesuaikan dengan kebutuhan dan juga tujuan dibuatnya website itu sendiri. Dalam HTML (<span style="font-style: italic;">Hypertext Markup Language</span>), ada cara yang paling sederhana dalam mendesain web, yaitu dengan menggunakan tabel.<br /><br />Tabel biasanya digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. Akan tetapi, dengan fleksibilitas HTML memungkinkan kita untuk menampilkan data di dalam tabel secara atraktif. Artinya, Tidak hanya sebatas pada data tabular saja, namun juga mengizinkan kita melakukan pemformatan.<br /><br />Seperti kita tahu bahwa dalam membuat tabel diawali dengan tag ‹table›, kemudian ada tiga tag dasar yang mengikutinya, diantaranya:<br /><div class="fullpost">• Tag ‹th› atau <span style="font-style: italic;">table heading</span> yang berfungsi mendefinisikan header.<br />• Tag ‹tr› atau <span style="font-style: italic;">table row</span> yang berfungsi mendefinisikan baris.<br />• Tag ‹td› atau <span style="font-style: italic;">table data</span> yang berfungsi mendefinisikan sel.<br /><br />Selanjutnya itu kita bisa mendesain kerangka web seperti berikut:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_kLwv89Hqzec/S4EwQzA7dqI/AAAAAAAAAEE/6Ak5R2R5zFU/s1600-h/Kerangka+Web.JPG"><img style="margin: 10px auto 10px; display: block; text-align: center; cursor: pointer; width: 276px; height: 167px;" src="http://2.bp.blogspot.com/_kLwv89Hqzec/S4EwQzA7dqI/AAAAAAAAAEE/6Ak5R2R5zFU/s200/Kerangka+Web.JPG" alt="" id="BLOGGER_PHOTO_ID_5440682889970415266" border="0" /></a><br /><br />Kemudian kita bisa mengembangkan sesuai dengan kreasi kita, sehingga menjadi:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_kLwv89Hqzec/S4ExDMyvuKI/AAAAAAAAAEM/4mrFtQvDSyc/s1600-h/Desain+Web.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 274px; height: 152px;" src="http://3.bp.blogspot.com/_kLwv89Hqzec/S4ExDMyvuKI/AAAAAAAAAEM/4mrFtQvDSyc/s200/Desain+Web.jpg" alt="" id="BLOGGER_PHOTO_ID_5440683755883706530" border="0" /></a><br /><br />Bagi yang tertarik untuk mempelajarinya, bisa <a href="http://www.4shared.com/file/226668103/df80bf0e/Desain_WebTable.html">DOWNLOAD</a> source kodenya.<br /></div>☼ Mahsun Huda ☼http://www.blogger.com/profile/13779443357484713753noreply@blogger.com0