Home > Komputer > Membuat Web Sederhana (1)

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&#8221; 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”&gt;
<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&amp;xid=YOUR_EVENT_XID&amp;width=300&amp;height=500&amp;hide_friends_tab=0&amp;locale=en_US&#8221; 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&amp;xid=YOUR_EVENT_XID&amp;width=300&amp;height=500&amp;hide_friends_tab=0&amp;locale=en_US&#8221; 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&amp;xid=YOUR_EVENT_XID&amp;width=300&amp;height=500&amp;hide_friends_tab=0&amp;locale=en_US&#8221; 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&section=499560″></IFRAME><br&gt;
<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 &copy 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&#8221; 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”&gt;

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&#8221; 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!

  1. 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.
  2. Upload gambar yang udah jadi ke situs upload gambar! gw biasanya upload di photo bucket
  3. 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…!

Categories: Komputer
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: