Membuat Web Sederhana (1)
Hi………!, kali ini gw mao bikin web sederhana itung-itung mengimplementasikan apa yang pernah gw baca-baca dari blog -blog suhu-suhu gw! (aduh gw kok ngomongnya di ulang-ulang mulu-mulu sich!)
Gw mo bikin web paling sederhana yg gw dedikasikan bt men tmen w yg nyubi banget!
Pertama siapkan dahulu bahan-bahannya : (kayak mo demo masak za neh!)
1. Notepad, gw yakin dikompi men temen ada semuanya klo gak dihapus ato ga kena virus! 😀
2. Gambar-gambar buat bikin backgroundnya! Bisa diunduh di penyedia gambar! klo gw sich pakenya biasa donlod di sxc.hu
3. Script-script hasil nyolong dari blog suhu-suhu gw! tar w kasih dech scriptnya!
OK. Lets go!
Pertama buka notepad trus bikin kode html :
<html>
<head>
<!–KDJMG-PF9JB-BYQ3V-H697Q-CWGHC–>
<script language=’JavaScript’>
var txt=” Update statusmu via apa saja yang penting narcis abizzzz…!!”;
var kecepatan=150;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(“bergerak()”,kecepatan);}bergerak();
</script>
<title></title>
</head>
<link href=”http://i991.photobucket.com/albums/af37/adeendang/gambar-icon-annoyed-kartun.jpg” rel =”shortcut icon”/>
<body bgcolor=”grey”><center>
<table border=”1″ width=”1200″ height=”0″ background=”http://i991.photobucket.com/albums/af37/adeendang/bg_table1.jpg”>
<tr>
<td align=”center” background=”http://i991.photobucket.com/albums/af37/adeendang/green.jpg”><h4><font color=”#333333″ style=”impact”>Update Via BlackBerry</font></h4></td><td align=”center” background=”http://i991.photobucket.com/albums/af37/adeendang/green.jpg”><h4><font color=”#333333″ style=”impact”>Update Via Android</font></h4></td><td align=”center” background=”http://i991.photobucket.com/albums/af37/adeendang/green.jpg”><h4><font color=”#333333″ style=”impact”>Update Via ipad</font></h4></td><td align=”center” background=”http://i991.photobucket.com/albums/af37/adeendang/green.jpg”><a href=”http://jatake1.weebly.com”><h4><font color=”#333333″ style=”impact”>Klik Disini</font></h4></a></td>
</tr>
<tr>
<td align=”left”>
<iframe allowtransparency=”true” frameborder=”0″ height=”500″ name=”fblivestreamIFrame_0″ scrolling=”no” src=”http://www.facebook.com/widgets/livefeed.php?api_key=51f324dd2ecb3a25b356a3170e9b5d51&xid=YOUR_EVENT_XID&width=300&height=500&hide_friends_tab=0&locale=en_US” style=”border: medium none; display: block; height: 500px; width: 300px;” width=”300″><br /></iframe>
<a href=”http://indraone.blogspot.com/”><button style=”width:300px; background:#345487; color:#FFFFFF”>Update Status Facebook</button></a>
</td>
<td align=”center”>
<iframe allowtransparency=”true” frameborder=”0″ height=”500″ name=”fblivestreamIFrame_0″ scrolling=”no” src=”http://www.facebook.com/widgets/livefeed.php?api_key=04b50bebf1d83578433afeb3d0eceb90&xid=YOUR_EVENT_XID&width=300&height=500&hide_friends_tab=0&locale=en_US” style=”border: medium none; display: block; height: 500px; width: 300px;” width=”300″><br /></iframe>
<a href=”http://indraone.blogspot.com/”><button style=”width:300px; background:#345487; color:#FFFFFF”>Update Status Facebook</button></a>
</td>
<td align=”right”>
<iframe allowtransparency=”true” frameborder=”0″ height=”500″ name=”fblivestreamIFrame_0″ scrolling=”no” src=”http://www.facebook.com/widgets/livefeed.php?api_key=16582d499d1cc64def340e4f12f67fd5&xid=YOUR_EVENT_XID&width=300&height=500&hide_friends_tab=0&locale=en_US” style=”border: medium none; display: block; height: 500px; width: 300px;” width=”300″><br /></iframe>
<a href=”http://indraone.blogspot.com/”><button style=”width:300px; background:#345487; color:#FFFFFF”>Update Status Facebook</button></a>
</td>
<td valign=”top”><center><h1><font color=”blue”>Ayo update status kamu via apa saja!</font></h1></center>
<IFRAME FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=300 HEIGHT=250 SRC=”http://ad.z5x.net/st?ad_type=iframe&ad_size=300×250§ion=499560″></IFRAME><br>
<ol>
<li>Pastikan FB kamu OL</li>
<li>Pilih lokasi via mana akan diupdate</li>
<li>Silahkan update status kamu</li>
<li>Cek hasilnya di FB kamu</li>
</ol>
<center><h6>copyright © Ade Endang 2011</h6></center>
</td>
</tr>
</table></center>
</body>
</html>
Sederhana sekali bukan?
Bagi yang nyubi bisa dibilang gak sederhana! kalo yang profesional pasti cma mencibirkan bibir saja! 🙂
OK kita kupas habis kode per kode! Lets go!
<html>
<head>
<!–KDJMG-PF9JB-BYQ3V-H697Q-CWGHC–>
<script language=’JavaScript’>
var txt=” Update statusmu via apa saja yang penting narcis abizzzz…!!”;
var kecepatan=150;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(“bergerak()”,kecepatan);}bergerak();
</script>
<html> yaitu tag awal klo mo bikin web! pasti pake html (hypertext markup language) kalo mo tau lebih lengkapnya cari za di wikipedia.
<head> artinya kepala! wkakaka semua org yg dah lulus kuliah juga tau! pokoknya setelah tag html biasanya dilanjutkan dengan <head> fungsinya untuk meletakan judul, script dan lain-lain.
<!–KDJMG-PF9JB-BYQ3V-H697Q-CWGHC–> kalo yang ini jgn dibahas! coz ini cuma iseng doang! klo gak slah ini keyword apa gitu! sengaja w cantumin supaya klo lg nyari keyword yg lupa w tinggal buka situs ini za! heee 😆
<script language=’JavaScript’>
var txt=” Update statusmu via apa saja yang penting narcis abizzzz…!!”;
var kecepatan=150;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(“bergerak()”,kecepatan);}bergerak();
</script> kalo yang ini penting! ini adalah script yang gw dapet dari suhu bloger gw! script ini berfungsi untuk menampilkan judul yang bisa berjalan contohnya gw mau bikin judulnya kayak begini : Update statusmu via apa saja yang penting narcis abizzzz…!! karena ini adalah web update status facebook ya gw kasih judul kayak gini! jangan lupa script ini ditaro di area <head>
area <head> maksudnya diantara <head> …… </head>
<title></title>
</head>
<link href=”http://i991.photobucket.com/albums/af37/adeendang/gambar-icon-annoyed-kartun.jpg” rel =”shortcut icon”/>
<body bgcolor=”grey”><center>
<table border=”1″ width=”1200″ height=”0″ background=”http://i991.photobucket.com/albums/af37/adeendang/bg_table1.jpg”>
Lanjut lagi yua!
<title></title>
Kode title berfungsi buat ngisi judul! tapi berhubung judulnya udah pake script jadi dikosongin za! seharusnya yang normal diatara title ada judulnya yang biasa-biasa aza! contoh : <title>Update Status</title>
Bagi temen-temen yang udah penasaran kaya apa jadinya neh kode-kode! coba di klik za http://jatake.weebly.com kita belajar sedikit demi sedikit oke! 😀
</head> nah yang ini namanya closing tag! pokoknya klo nemuin kode yang awalnya ada garis miring itu berarti closing tag (tag penutup) sebelumnya berarti ada <head> bla bla bla </head> 😀
<link href=”http://i991.photobucket.com/albums/af37/adeendang/gambar-icon-annoyed-kartun.jpg” rel =”shortcut icon”/>
kode diatas berguna untuk membuat simbol / icon dari judul web kita! biasanya klo gak pake kode gituan gambarnya cuma kertas kosong doang! caranya agak ribet juga! tapi tenang buat yang nyubi ane bagi ilmunya neh!
- cari atau bikin icon / gambar apa aja tapi ukurannya harus 12 x 12 px, terus formatnya jpg, gif , png. kalo gw sich caranya cari di google, gambar yang menurut gw aneh, terus gw edit di paint ukurannya jadi 12 x 12 px, jgn lupa disave dengan format jpg.
- Upload gambar yang udah jadi ke situs upload gambar! gw biasanya upload di photo bucket
- Setelah diupload pastinya kita dapet direct link nya! copy direct link nya dan paste di notepad html kita tadi tepat di bawah </head> jangan lupa setelah kita mengetikan <link href=”…………………….. paste disini ……….“rel=”shortcut icon”/>
Kalo bener maka hasilnya pasti terlihat ada muncul gambar icon di samping judul web kita! coba chek lagi di web http://jatake.weebly.com Bersambung…!
adegondang 
