Tutorial Belajar Website PHP MySQL ASP.Net Photoshop Coreldraw Flash Template » Tutorial HTML http://www.ilmuwebsite.com Webmaster Resource Center Wed, 01 Sep 2010 07:25:51 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Dasar-Dasar Membuat Web Dengan HTML http://www.ilmuwebsite.com/tutorial-html/dasar-dasar-membuat-sebuah-web-html http://www.ilmuwebsite.com/tutorial-html/dasar-dasar-membuat-sebuah-web-html#comments Fri, 20 Nov 2009 13:42:25 +0000 Admin Dasar Dasar Membuat Web Dengan HTML tutorial html web desain grafisNah, anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???

Nggak ada kan??? nah, maka dari itu, saya, C.H.I.P. Sensei, akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum itu,  ada yang perlu diketahui.

tag <>

digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.

Tag container adalah tag yang berisi text yang akan ditampilkan setelah tag ditutup. Contoh: <td> text yang ditampilkan </td>.

Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.

Tag yang digunakan untuk mengakhiri sintak punya karakter / (slash) sebelum sintaknya, contohnya: <td> </td>

Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.

LANGKAH 1

  • MEMBUKA NOTEPAD.

LANGKAH 2

  • MENGETIKKAN SINTAK/SYNTAX.

Berikut ini adalah syntax dasar yang membentuk suatu HTML.

pertama, ketikkan

<html>

tekan enter, kemudian ketik

<head>

Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.

Sekarang ketikkan sintak title tadi, jadi seperti ini:

<head> <title> judul halaman web </title> </head>

Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.

Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:

<html>

<head>

<title> Judul Halaman Web </title>

</head>

<body>

</body>

 

Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :

<body>

Contoh text yang ditampilin di halaman web, By: C.H.I.P. Sensei

</body>

terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :

<html>

<head>

<title> Judul Halaman Web </title>

</head>

<body>

Contoh text yang ditampilkan di halaman web, By: C.H.I.P. Sensei

</body>

</html>

kalo udah, sekarang save dengan nama dasarHTML.

kalo udah disave, buka data yang tadi di save.

 

Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???

Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,  yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.

 

Sekian tutorial dari C.H.I.P. Sensei. Meskipun sedikit semoga bermanfaat untuk anda yang baru memulai membuat website menggunakan HTML.

]]> http://www.ilmuwebsite.com/tutorial-html/dasar-dasar-membuat-sebuah-web-html/feed 9 Trik Membuat Submit Button dengan Image http://www.ilmuwebsite.com/tutorial-html/trik-membuat-submit-button-dengan-image http://www.ilmuwebsite.com/tutorial-html/trik-membuat-submit-button-dengan-image#comments Mon, 05 Oct 2009 15:55:03 +0000 Loka Dwiartara button dengan imageOke, mungkin pada awalnya kebanyakan dari web developer pun pernah bertanya-tanya bagaimana membuat suatu image menjadi submit button dari suatu form. Dan fungsi seperti ini memang ternyata telah dipakai pada beberapa Content Management System favorit, joomla misalnya, ketika anda melakukan suatu save item, entah itu article, ataupun product di virtuemart yang memanfaatkan component backendnya, disana terlihat sebuah image yang memiliki sebuah fungsi sebagai submit button. Ada 2 trik yang biasanya sering digunakan, pertama memanfaatkan tag html, dan yang terakhir memanfaatkan fungsi javascript sederhana.


Ya, kita coba terlebih dahulu untuk trik yang pertama …

Buat sebuah file, namakan terserah anda, saya menamakannya imgbtn.html, kemudian isi didalamnya :

<html><head></head><body>

<form name=”formulir” action=”kirim.php” method=”POST”>
Nama : <input type=”text” name=”nama”>
<input type=”image” src=”submit_icon.jpg” alt=”Submit button”>
</form>

</body></html>

Yang memiliki fungsi intinya :
baris <input type=”image” src=”submit_icon.jpg” alt=”Submit button”>
membuat sebuah input dengan type image.

kemudian, file kirim.php, file ini digunakan untuk menangkap apa yang telah dikirim oleh imgbtn.html, tentunya anda harus memiliki sebuah web server yang telah terinstall didalam pc anda untuk mencobanya. Tapi diakhir artikel html ini penulis menyediakan file demo dari artikel ini.

File kirim.php
< ?php
echo $_POST['nama'];
?>

Anda tidak dapat menggunakan fitur seperti hover button dalam trik yang pertama ini, tag input type=’image’ tidak mengizinkan anda untuk perubahan gambar ketika mouse over, ataupun ketika mouse out. Fitur perubahan image/gambar ketika mouse over atau mouse out didapatkan dengan menggunakan trik yang selanjutnya.

Kemudian trik yang terakhir, ini trik pengembangan dari trik sebelumnya. Jika trik yang pertama itu hanya membolehkan gambar yang statik, maka trik yang kedua ini anda dapat memasang fitur perubahan gambar ketika mouseover ataupun mouseout.

Sediakan sebuah file imgtbn2.html, berisi :

<html><head></head><body>

<form name=”formulir” action=”kirim.php” method=”POST”>

Nama : <input type=”text” name=”nama”>

<a href=”javascript:document.formulir.submit()”
onmouseover=”document.formulir.sub_but.src=’submit_icon.jpg’”
onmouseout=”document.formulir.sub_but.src=’submit_icon_hover.jpg’”
onclick=”return val_form_this_page()”>
<img src=”submit_icon_hover.jpg” border=’0′ alt=”Submit this form” name=”sub_but” />
</a>

</form>

</body></html>

trik yang terakhir ini, menggunakan tag <a> dan memanfaatkan fungsi javascript yang diembedkan.
Statement intinya :
onclick=”return val_form_this_page()”>
ketika image di klik maka kembalikan nilai yang terisi dalam form di document untuk kemudian di kirim ke action targetnya, yakni kirim.php.
Dengan trik ini

dan file kirim.php yakni file php untuk menangkap variable yang dikirim.
< ?php
echo $_POST['nama'];
?>

Sekian, anda dapat menggunakan trik ini untuk digunakan dalam melakukan development website anda. Terima kasih.
Oleh : Loka Dwiartara.

File tutorial ini dapat anda download disini :

http://www.ilmuwebsite.com/file_tutorial/trikimagebutton.zip

Dan untuk mencoba file tutorial diatas silahkan klik :

http://www.ilmuwebsite.com/file_tutorial/trikimagebutton/imgbtn.html
http://www.ilmuwebsite.com/file_tutorial/trikimagebutton/imgbtn2.html

]]> http://www.ilmuwebsite.com/tutorial-html/trik-membuat-submit-button-dengan-image/feed 1 Tab CSS Menu Sederhana http://www.ilmuwebsite.com/tutorial-html/tab-css-menu-sederhana http://www.ilmuwebsite.com/tutorial-html/tab-css-menu-sederhana#comments Sun, 31 May 2009 03:43:58 +0000 Admin Tab CSS Menu Sederhana tutorial html web desain grafisSuka dengan CSS menu? cobalah membuat CSS menu anda sendiri.
Berikut ada contoh membuat menu CSS sederhana, untuk proses belajar anda bisa memodifikasinya :)
Code nya:

 


——————————
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
    <head>
         <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″/>
         <title>DHTML Tab,JavaScript Tab</title>
    <style type=”text/css”>
         #tabs {display: block;float: left;width: 160px;}
         .panel {border: solid 1px #D8D8D8;border-top: none;background-color: #FFFFFF;padding: 0px;width: 158px;overflow: auto;clear: left;}
         .tab_bdr{padding: 0px;width: 158px;border: 0px;border: 1px solid #645DB5;height: 4px;margin:0px;background: #645DB5;clear: left;font-size: 0px;}
         .tab{font-family:tahoma; FONT-SIZE: 11px;background:#BA0808;color:#FFFFFF;cursor:pointer;border:none;border-bottom: 1px solid #FFFFFF;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-decoration:none;}
         .tab_sel{font-family:tahoma; FONT-SIZE: 11px;background:#645DB5;color:#FFFFFF;cursor:pointer;border:none;border-bottom:1px solid #645DB5;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-decoration:none;}
    </style>
    <script language=”JavaScript” type=”text/javascript”>
    var panels = new Array(‘panel1′, ‘panel2′); // IDs of the content panels must be put here
    var tabs = new Array(‘tab1′, ‘tab2′); // IDs of the tabs must be put here
    function displayPanel(nval)
    {
         for(i = 0; i < panels.length; i++)
         {
             document.getElementById(panels[i]).style.display = (nval-1 == i) ? ‘block’:'none’;
             document.getElementById(tabs[i]).className=(nval-1 == i) ? ‘tab_sel’:'tab’;
         }
    }
    </script>
    </head>
    <body>
         <div id=”tabs”>
             <div id=”tab1″ class=”tab_sel” align=”center” onClick=”javascript: displayPanel(’1′);”>Tab 1</div>
             <div id=”tab2″ class=”tab” style=”margin-left:1px;” align=”center” onClick=”javascript: displayPanel(’2′);”>Tab 2</div>
         </div>
    <div class=”tab_bdr”></div> <!– This is the div used to show a thick border below the tab and above the panel–>
         <div class=”panel” id=”panel1″ style=”display: block”>1</div> <!– The display panels for the respective tabs can be put here –>
         <div class=”panel” id=”panel2″ style=”display: none”>2</div>
    </body>
</html>
——————————

contoh jadi:

 

{source}

    <style type="text/css">         #tabs {display: block;float: left;width: 160px;}         .panel {border: solid 1px #D8D8D8;border-top: none;background-color: #FFFFFF;padding: 0px;width: 158px;overflow: auto;clear: left;}         .tab_bdr{padding: 0px;width: 158px;border: 0px;border: 1px solid #645DB5;height: 4px;margin:0px;background: #645DB5;clear: left;font-size: 0px;}         .tab{font-family:tahoma; FONT-SIZE: 11px;background:#BA0808;color:#FFFFFF;cursor:pointer;border:none;border-bottom: 1px solid #FFFFFF;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-decoration:none;}         .tab_sel{font-family:tahoma; FONT-SIZE: 11px;background:#645DB5;color:#FFFFFF;cursor:pointer;border:none;border-bottom:1px solid #645DB5;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-decoration:none;}    </style>    <script language="JavaScript" type="text/javascript">    var panels = new Array('panel1', 'panel2'); // IDs of the content panels must be put here    var tabs = new Array('tab1', 'tab2'); // IDs of the tabs must be put here    function displayPanel(nval)    {         for(i = 0; i < panels.length; i++)         {             document.getElementById(panels[i]).style.display = (nval-1 == i) ? 'block':'none';             document.getElementById(tabs[i]).className=(nval-1 == i) ? 'tab_sel':'tab';         }    }    </script>

         <div id="tabs">             <div id="tab1" class="tab_sel" align="center" onClick="javascript: displayPanel('1');">Tab&nbsp;1</div>             <div id="tab2" class="tab" style="margin-left:1px;" align="center" onClick="javascript: displayPanel('2');">Tab&nbsp;2</div>         </div>    <div class="tab_bdr"></div> <!-- This is the div used to show a thick border below the tab and above the panel-->
         <div class="panel" id="panel1" style="display: block">1</div> <!-- The display panels for the respective tabs can be put here -->         <div class="panel" id="panel2" style="display: none">2</div>

{/source}

Terimakasih

]]> http://www.ilmuwebsite.com/tutorial-html/tab-css-menu-sederhana/feed 0 Membuat Box Style Link Cantik ala dr.emi dengan CSS http://www.ilmuwebsite.com/tutorial-html/membuat-box-style-link-cantik-ala-dremi-dengan-css http://www.ilmuwebsite.com/tutorial-html/membuat-box-style-link-cantik-ala-dremi-dengan-css#comments Sun, 31 May 2009 03:20:04 +0000 Admin Membuat Box Style Link Cantik ala dr.emi dengan CSS tutorial html web desain grafisJimanee nDesign box link cantik dengan menggunakan CSS ?

Pernah liat page link nyang ada di :  http://www.dremi.info/tutorial/photoshop-forum.php ???
nah bagian paging na gw pake CSS bwat bikin box link na, kali ini kita bikin nyang sama tapi dengan style CSS nyang berbeda.

Simple aja mulai dengan style ke gini:

 

<style>
    #pagin a
    {
    font-family:Tahoma;
    font-size:11px;
    display:block;
    float:left;
    cursor:pointer;
    color:#00c;
    text-decoration:none;
    display:inline-block;
    border:1px solid #ccc;
    padding:.3em .7em;
    margin:0 .38em 0 0;
    text-align:center
    }
    #pagin a:hover
    {
    background:#f0f7e8;
    border:1px solid #83bc46
    }
    #pagin a.sel
    {
    color:#333;
    font-weight:normal;
    background:#f0f7e8;
    cursor: default;
    border:1px solid #83bc46
    }
    </style>

 

Tros terapkan ke dalam halaman HTML lu:

 

<div id=”pagin”>
    <a class=”sel”>1</a><a href=”http://csslovers.co.cc”>2</a>
    <a href=”http://dremi468.blogspot.com”>3</a>
    <a href=”http://dremi.info/tutorial/photoshop-forum.php”>4</a>
    </div>

heehe jadi dah, lagi lagi tutorial CSS na singket !!! biarin weks :P !!

Penasaran kan mao liat hasilna ?? klik ajah link dibawah ini, bwat preview hasilna:

http://www.dremi.info/web/tips/css-box-style-design.html

 

Tros kalo mao download disini:

http://www.ziddu.com/download/1774822/css-box-style-design.rar.html

]]> http://www.ilmuwebsite.com/tutorial-html/membuat-box-style-link-cantik-ala-dremi-dengan-css/feed 4 Beautifull Form dr.emi with CSS http://www.ilmuwebsite.com/tutorial-html/beautifull-form-dremi-with-css http://www.ilmuwebsite.com/tutorial-html/beautifull-form-dremi-with-css#comments Sun, 31 May 2009 03:05:18 +0000 Admin Beautifull Form dr.emi with CSS tutorial html web desain grafisBijimane bikin form nyang kaga mbosenin ???? Nyang mantap dan oke punya dahh!
Nah kali ni kite bakalan bikin form make css style.. cantik dah pokokna :D kayak pacar gw.. haa…

Style na si ke gini ajah:

 

 

 

<style type=”text/css”>
<!–
body,td,th {
font-family: Trebuchet MS;
font-size: 11px;
color: #333333;
}
body {
background-color: #FFFFFF;
margin-left: 20px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #0099FF;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #0099FF;
}
a:hover {
text-decoration: none;
color: #009900;
}
a:active {
text-decoration: underline;
color: #0099FF;
}
#OrangeWhiteBox {
background-color:#FFFBF2;
padding: 5px;
margin-bottom:5px;
border:2px solid #FFE9D2;
width:550px;
}
#GreyWhite {
background-color: #FBFBFB;
padding: 5px;
margin-bottom:5px;
border:2px solid #F4F4F4;
width:550px;
text-align:center;
}
/* BOX DESIGN BY dr.emi */

#formM { margin:0px;padding-left:20px;padding-bottom:20px;}
#formM h1 { padding-left:72px;padding-top:10px; font-size:18px;padding-bottom:10px; color:#990000; }
#formM p { padding-left:72px;padding-top:10px; font-size:11px;padding-bottom:10px; }
#formM .inputM{
border:1px solid #C0C0C0;
color:#666666;
background:url(beautifull-form.gif) 0 0 repeat-x; /*support IE, FF*/
height:26px;
font-size:16px;
}
#formM .textareaM{
border:1px solid #C0C0C0;
color:#666666;
font-size:16px;
}
#formM label{
display:block;
margin-bottom:10px;
color:#666666;
}

#formM label span{
display:block;
float:left;
padding-right:6px;
width:70px;
text-align:right;
font-weight:bold;
font-size:16px;
}
#formM .spacer{margin-left:80px;
margin-bottom:10px;
font-size:11px;
color:#555555;
}
#formM .buttonM{
background:url(coklat.gif) 0 0 no-repeat;
border:1px solid #3b6e22;
height:26px; width:100px;
color:#FFFFFF;
font-size:14px;
text-decoration:none;
font-weight:bold;
}
.spacerA { clear:both; height:20px; margin:0px; padding:0px; }
–>
</style>

Nah lu bikin dah form na, nysuaiin ama style css diatas:

<div id=”OrangeWhiteBox”>

<div id=”formM”>
<h1>Komentar gw bwat eloh ! :P (bahasa abg mumet) </h1>
<form id=”form1″ name=”form1″ method=”post” action=”">
<label><span>Nama </span>
<input name=”name2″ type=”text” class=”inputM” id=”name2″ value=”dr.emi” size=”20″ />
</label>

<label><span>E-Mail </span>
<input name=”name” type=”text” class=”inputM” id=”name” value=”lia@cintaku.com” size=”20″ />
</label>

<label><span>No. HP </span>
<input name=”name” type=”text” class=”inputM” id=”name” value=”081300004000″ size=”20″ />
</label>

<label><span>Website</span>
<input name=”name” type=”text” class=”inputM” id=”name” value=”http://” size=”41″/>
(* kosong ? yo ra popo </label>

<label><span>Komentar</span>
<textarea cols=”38″ rows=”5″ class=”textareaM”>sumpeh deh ! gueh naksir ama eloh ! mau jadi gebetan gue kagak ?</textarea>
</label>
<label>
<div class=”spacer”><input type=”submit” name=”Submit” value=”Kirim” class=”buttonM”/>
</label>
</div>

</form>
</div>

</div>
<p class=”spacerA”> </p>
<div id=”GreyWhite”><a href=”http://dremi.info/forum” target=”_blank”>Falling in love to dr.emi ? Just Click Here !</a></div>

Cepet banged !!!! ??? iye mang cpet bikin na, palagi kalo make dreamweaver, kaga usah ribet ….

ni preview na kalo udah jadi…

Photobucket

Mao coba html na ? klik na disini …

Nyang mao nDownload disinih …

Sumbangkan sedikit ilmu lu, bwat kebaikan… kami tunggu di http://dremi.info/forum

Woke ! Met malem mingguan yak :D thanks !

]]> http://www.ilmuwebsite.com/tutorial-html/beautifull-form-dremi-with-css/feed 0 Mengetik Realtime dengan Document Object Model http://www.ilmuwebsite.com/tutorial-html/mengetik-realtime-dengan-document-object-model http://www.ilmuwebsite.com/tutorial-html/mengetik-realtime-dengan-document-object-model#comments Sat, 30 May 2009 16:24:23 +0000 Admin Mengetik Realtime dengan Document Object Model tutorial html web desain grafisPada kesempatan kali  ini saya akan membawakan tutorial judulnya “Ngetik Realtimen dengan Document Object Model” maksudnya itu saat kita ngetik di input box,atau textarea hasil ketikan kita  dapat langsung display di tempat yang kita inginkan, bisa huruf per huruf  maupun dapat kita setting kata per kata.  caranya cukup sederhana yaitu adalah memanipulasi dengan DOM. Apa itu DOM, anda dapat membacanya disini  namun saya lebih menyebutnya yaitu cara untuk mendinamiskan ke-statis-an html.

sudah banyak library javascript yang memudahkan kita untuk mendinamiskan  tampilan html tanpa harus merefresh browser dengan DOM ini, seperti library prototype, mootools, jquery, DOJO ,  dan masih banyak lagi.
listnya saya sudah bundle di javascript:framework

ok langsung saja … pertama yang akan kita buat yaitu halaman html.
berikut code halaman html yang saya buat untuk tutorial ini

———————————————————-
<html>
<head>
    <TITLE>ngetik realtime</TITLE>
</head>

<body>

    <textarea id=”tempatMengetik”></textarea>
   
    <div id=”hasilKetikan”></div>

</body>
</html>
————————————————————

setelah itu simpan dengan ketik.html

anda lihat kembali file ketik.html
disana ada elemen textarea yang di beri id=”tempatMengetik”,
dan sebuah div yang di beri id=”hasilKetikan” dimana di dalam div  inilah hasil ketikan dan kita menginput huruf di textarea akan muncul.

lalu edit file ketik.html tadi dan tambahkan barisan javascript berikut

————————————————————-
<script>
function displayType(){
    var inputKetikan =  document.getElementById(“tempatMengetik”);
    var targetKetikan =  document.getElementById(“hasilKetikan”);
    targetKetikan.innerHTML = inputKetikan.value;   
}
</script>
————————————————————-

dan sebuah event onkeyup pada element textarea

————————————————————–
<textarea id=”tempatMengetik”  onkeyup=”displayType()”></textarea>
————————————————————-

maka hasil terakhir dari file ketik.html menjadi seperti ini

————————————————————
<html>
<head>
    <TITLE>ngetik realtime</TITLE>
</head>
<script>
function displayType(){
    var inputKetikan =  document.getElementById(“tempatMengetik”);
    var targetKetikan =  document.getElementById(“hasilKetikan”);
    targetKetikan.innerHTML = inputKetikan.value;   
}
</script>

<body>
    <textarea id=”tempatMengetik”  onkeyup=”displayType()”></textarea>
   
    <div id=”hasilKetikan”>     </div>

</body>
</html>
————————————————————

simpan file tersebut dan anda buka dengan browser kesayangan anda, dan mulailah  memasukan beberapa huruf kedalam textarea tersebut dan lihatlah apa yang  terjadi.
tiap huruf yang anda masukan di sana akan langsung muncul di browser anda tanpa  harus merefresh browser tersebut.

penjelasannya adalah :
maksud dari function displayType() adalah kita membuat variabel inputKetikan  yang menyimpan element yang kita beri id=”tempatMengetik”, dan
variabel targetKetikan yang menyimpan element yang kita beri  id=”hasilKetikan”.

lalu baris
     targetKetikan.innerHTML =  inputKetikan.value;   
menugaskan variabel targetKetikan meng-outputnya berupa HTML dari nilai yang di  input dalam variabel(element) inputKetikan.

untuk memunculkan huruf per huruf di halaman web tersebut untuk itulah di  elemen textarea kita beri event onkeyup.

sederhana bukan !, code javascript sederhana ini adalah dasar dari membuat  halaman web lebih dimanis tanpa harus merefresh kembali browser anda.
untuk melihat hasilnya ada dapat mengunjungi link ini

ok mungkin tutorial yang tidak seberapa ini bisa bermanfaat untuk kita semua

oleh :
nick : i_am

email : i_am.zlam@yahoo.com
web : http://fughu.com/i_am

]]> http://www.ilmuwebsite.com/tutorial-html/mengetik-realtime-dengan-document-object-model/feed 0 Membuat Status YM http://www.ilmuwebsite.com/tutorial-html/membuat-status-ym http://www.ilmuwebsite.com/tutorial-html/membuat-status-ym#comments Sat, 30 May 2009 23:16:50 +0000 Admin Membuat Status YM tutorial html web desain grafisMenampilkan status YM (yahoo Messanger) di website kita sangatlah penting, terutama bagi website-website yang bergerak dalam bidang bisnis, gunanya ya sebagai CS (Customer Support), kalau untuk website community ya.. bisa sebagai tempat ngobrol dsb.

Cara membuat status YM di website kita sangatlah mudah sekali kita tinggal lah menambahkan tag HTML berikut:


<a href=”ymsgr:sendIM?adit51“><img src=”http://opi.yahoo.com/online?u=adit51&amp;m=g&amp;t=1″ border=”0″ height=”16″ width=”64″></a>

Dimana: “adit51” adalah ID Yahoo kamu, ID Yahoo dapat diperoleh jika anda mempunyai email di yahoo, jika tidak … ya segera bikin saja email yahoo..
Ex: jika email yahoo kamu adit51@yahoo.com, maka ID YM kamu adalah: adit51

Gimana mudah bukan ?
Artikel ini sudah kami kirimkan pada email2 anda (tentunya jika anda sudah langganan).

Terimakasih :)

]]> http://www.ilmuwebsite.com/tutorial-html/membuat-status-ym/feed 8 Tutorial Ultimate Mendapatkan Website Gratis Full http://www.ilmuwebsite.com/tutorial-html/tutorial-ultimate-mendapatkan-website-gratis-full http://www.ilmuwebsite.com/tutorial-html/tutorial-ultimate-mendapatkan-website-gratis-full#comments Sat, 30 May 2009 16:08:45 +0000 Admin Tutorial Ultimate Mendapatkan Website Gratis Full tutorial html web desain grafisSelamat siang semuanya,   kali ini saya akan coba menunjukkan suatu kombinasi yang efektif, efisien,   sempurna dan gratis… Tutorial ini merupakan rangkuman dan gabungan dari   dua tutorial sebelum nya, yaitu domain gratis dan hosting   gratis… Dari hasil riset saya selama 3 hari mengenai perpaduan   domain gratis dan hositng gratis, saya menemukan titik temu yang   sempurna.

Pertama target riset saya lakukan terhadap dua penyedia domain   redirection gratis yaitu uni.cc dan co.cc,   setelah saya teliti ternyata mereka berdua menyediakan “modify DNS”, ya… 

“modify DNS” adalah fasilitas untuk mengarahkan DNS domain ke hosting kita,   feature ini sangat bagus mengingat penyedia free domain redirection yang lain   hanya memberikan redirection biasa seperti domain gratis co.nr atau domain gratis .tk dan hanya sebatas cloaking…(Cloaking tidak efektif dan dibenci   google).

Selanjutnya adalah mencari hosting gratisan yang cocok dan bagus, saya mencoba 3 free hosting, sebagai test.., mereka yaitu :

Hosting Gratis:
1. 50webs.com
2. 000webhost
3. Freehostia.com

Test penggabungan co.cc dengan 50webs.com, DNS saya arahkan ke   50webs.com, pihak co.cc ok..!!, tapi setelah saya cek ternyata pihak 50webs.com   memberikan “0″ addon domain (alias tidak mengizinkan “addon domain”, katanya sih   harus upgrade )…. Test gagal..

Test penggabungan co.cc dengan   000webhost berjalan lancar hanya dengan beberapa jam saja, domain co.cc sudah konek dengan hosting 000webhost. Begitu juga dengan Freehostia, mereka juga bisa konek.

Caranya co.cc dg 000webhost:

  1. Anda register dulu di uni.cc: https://www.co.cc/regist/regist_account.php?go_url=/my_account/my_account.php
  2. Setelah register anda login, pilih salah satu website anda ex: narutopicture.co.cc
  3. Klik tombol “Set up“, lalu masukkan dns1.000webhost.com dalam kotak Name Server1 dan dns2.000webhost.com dalam kotak Name Server2.
  4. Anda register ke 000webhost: http://www.000webhost.com/order.php
  5. Masukkan domain co.cc anda ex: narutopicture.co.cc ke kotak: I want to host my own domain (domain must be registered already).
  6. Lalu anda isi form-form yang lain sesuai dengan data anda, dan submit
  7. Tunggu 24 Jam dan Jadi deh…. 

 Caranya uni.cc dg Freehostia:

  1. Anda register dulu di uni.cc, lalu  DNS nya uni.cc arahkan ke Free   Hostia (freehostia.com), Name Server-nya ada, lihat saja pada menu Addon Domain  
  2. Lalu pada cPanel Free Hostia (freehostia.com) pilih Addon Domain, masukkan   domain kamu tadi, ex: ilmuwebsite.uni.cc (tanpa www)  
  3. Tunggu 24 Jam dan Jadi deh….

Silahkan coba..Gratis..

Update:
Setelah saya perhatikan uni.cc meminta anda untuk memasang banner mereka,   jika tidak maka domain uni.cc anda akan di hapus.
Teman2 juga lebih banyak   yang suka dengan co.cc daripada uni.cc

]]> http://www.ilmuwebsite.com/tutorial-html/tutorial-ultimate-mendapatkan-website-gratis-full/feed 5 Membuat Logo Pada Addres Bar http://www.ilmuwebsite.com/tutorial-html/membuat-logo-pada-addres-bar http://www.ilmuwebsite.com/tutorial-html/membuat-logo-pada-addres-bar#comments Sat, 30 May 2009 23:04:07 +0000 Admin Membuat Logo Pada Addres Bar tutorial html web desain grafisFavicon adalah icon kecil yang ada di url address bar, bisa juga masuk dalam daftar bookmark jika kita mem bookmark suatu situs yang mempunyai Favicon, untuk ukurannya favicon sendiri adalah 16 x 16 pixel.

Berikut tutorial nya bagaimana cara membuat Logo pada URL Address Browser:
caranya siapkan icon favorite anda, download icon-icon dibawah ini:

http://www.webdeveloper.com/favicon.ico
http://www.oscmax.com/favicon.ico
http://www.coffeecup.com/favicon.ico
http://unblock-url.qarchive.org/favicon.ico
http://www.pizzahut.com/favicon.ico
http://www.starbucks.com/favicon.ico

Membuat Logo Pada Addres Bar tutorial html web desain grafis
Setelah itu silahkan klik kanan salah satu icon, lalu pilih Save Image As.. -> lalu save
Cara pemasangannya bisa anda Upload dan letakkan di direcrtory root  dengan nama: favicon.ico

atau bisa juga letakkan tag di bawah ini dalam header anda
<head>
….
<LINK REL=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
</head>

]]> http://www.ilmuwebsite.com/tutorial-html/membuat-logo-pada-addres-bar/feed 4 Cara Membuat RSS 2.0 http://www.ilmuwebsite.com/tutorial-html/cara-membuat-rss-20 http://www.ilmuwebsite.com/tutorial-html/cara-membuat-rss-20#comments Sat, 30 May 2009 22:51:48 +0000 Admin Cara Membuat RSS 2.0 tutorial html web desain grafisSaya akan coba menjelaskan tentang apa itu RSS, cara membuat RSS, serta fungsinya.
RSS adalah salah satu bentuk dari Web Syndication, RSS singkatan dari “Really Simple Syndication”, Versi dari RSS: 0.91, 0.92 dan 2.0

Berikut yang akan saya bahas adalah RSS versi 2.0, mengapa??
Karena versi 2.0 adalah versi terbaru dan banyak di pakai.

– Fungsi dari RSS

Web Syndication adalah sedikit potongan kecil dari content/isi website kita yang kita share dengan website lain. Fungsi dari Web Syndication adalah memberikan Feed kepada website lain yang menggunakan RSS website kita.
Format Web Syndication: RSS, ATOM, RDF.

– Cara Membuat RSS
Perlu anda ketahui dalam pembuatan RSS ada beberapa Element yang wajib, dan Optional

+ Yang Wajib

 

 Element  Deskripsi  Contoh
title Sama dengan title dari website anda Belajar Website | Menbuat Website
link URL dari title http://www.ilmuwebsite.com
description Kalimat yang menjelaskan title Web Development, Pendidikan Ilmu
Web Website Secara Gratis
dan Bahasa Indonesia

+ Yang tidak Wajib

 

 Element  Deskripsi  Contoh
language  Bahasa, jika English maka web kita
di golongkan sbg web English		  en-us
copyright Copyright untuk content title Copyright 2007, ilmuwebsite.com
managingEditor Email dari Editor black.scorpio.night@gmail.com
webMaster Email Webmaster black.scorpio.night@gmail.com
pubDate tanggal publikasi Sat, 07 Sep 2002 0:00:01 GMT
lastBuildDate Waktu terakhir perubahan content Sat, 07 Sep 2002 9:42:31 GMT
category kategori category>Newspapers</category>
generator generator yg digunakan MightyInHouse Content System v2.3
docs    
cloud    
ttl    
image image yang digunakan dlm RSS
yg di izinkan: GIF, JPEG or PNG 		 
textInput    
skipHours    
skipDays    

FireFox dan Opera sangat support dengan RSS.

Berikut sedikit contoh RSS 2.0 dari ilmuwebsite.com, anda bisa mengembangkan sendiri:

——-
<?xml version=”1.0″?>
<rss version=”2.0″>
  <channel>
    <title>RSS 2.0 | Update Artikel Terbaru Dari ilmuwebsite.com</title>
    <link>http://www.ilmuwebsite.com/</link>
    <description>ilmuwebsite.com adalah sebuah organisasi / komunitas yang bergerak dalam pengembangan tehnik pembuatan website. Kami ada untuk membantu teman-teman yang ingin belajar membuat website. Tujuan kami adalah membantu perkembangan website Indonesia</description>
    <language>en-us</language>
    <pubDate>Sat, 31 Mar 2007 12:00:00 GMT</pubDate>
    <lastBuildDate>Sat, 31 Mar 2007 12:00:00 GMT</lastBuildDate>
    <docs>http://blogs.law.harvard.edu/tech/rss</docs>
    <generator>Weblog Editor 2.0</generator>
    <managingEditor>black.scorpio.night@gmail.com</managingEditor>
    <webMaster>black.scorpio.night@gmail.com</webMaster>
   
      <item>
      <title>News | Sedikit penjelasan Web Syndication</title>
      <link>http://www.ilmuwebsite.com/</link>
      <description>
<img src=”TN_psd0171.JPG” align=”right” >
Saya akan sedikit jelaskan tentang Web Syndication Apa itu Web Syndication?? Web Syndication adalah sebagian kecil dari website content yang tersedia untuk website lain Secara umum Web Syndication adalah sedikit potongan content dari website kita dimana content tersebut meliputi materi yang selalu kita update seperti “latest news”, “tutorial” atau “forum post”[...]
      </description>
      <guid></guid>
      </item>
   

      <item>
      <title>Kuliah PHP | Penjelasan fungsi include();</title>
      <link>http://www.ilmuwebsite.com/</link>
      <description>
- include()
- include_once()
- require()
Fugnsi di atas berguna untuk menggabungkan file PHP atau bukan PHP kedalam file PHP
+++ include()
sebagai contoh
[...]
       </description>
       </item>
   

      <item>
      <title>PHP Tutorial | Validasi Form dengan PHP</title>
      <link>http://www.ilmuwebsite.com/</link>
      <description>
Anda mau membuat peraturan untuk form-form di website anda??
Seperti:

- Nomor Telephone Harus memakai awalan “0″ dan minimum 5 angka
- Email Harus [...]
      </description>
      </item>
   

      <item>
      <title>HTML | Advance CSS</title>
      <link>http://www.ilmuwebsite.com/</link>
      <description>
Di sini saya akan jelaskan bagaimana cara membuat CSS tingkat lanjut
ini adalah lanjutan dari artikel saya yang kemarin yaitu “Sedikit Perkenalan dengan CSS”
[...]
      </description>
      </item>
   

      <item>
      <title>Domain | Domain Gratis | CO.NR</title>
      <link>http://www.ilmuwebsite.com/</link>
      <description>
Teman-teman saya mau informasikan bahwa ada penyedia domain gratis yang lumayan bagus
Salah satunya adalah
[...]
      </description>
      </item>

      <item>
      <title>AwardSpace | Free PHP MySql</title>
      <link>http://www.ilmuwebsite.com/</link>
      <description>
Hari ini saya akan coba membahas free hosting yang bisa dikatakan bagus untuk free
host kelas PHP Mysql
Sebelumnya, saya berterima kasih kepada teman-teman yang telah memberitahukan
bahwa awardspace cocok untuk di bahas
[...]
      </description>
      </item>

      <item>
      <title>Hacking | Sedikit penjelasan mengenai XSS vulnerability</title>
      <link>http://www.ilmuwebsite.com/</link>
      <description>
Apaan sih XSS tuh ?
Mungkin anda yang akrab dengan dunia internet pernah men dengar istilah SQL Injection, XSS atau Cross Site Scripting. 2 kelemahan atau vulnerability pada sebuah website yang kerap kali dimanfaatkan oleh para cracker untuk
[...]
      </description>
      </item>

      <item>
      <title>Linux | Baru !!! Fedora Core 7 Test 2</title>
      <link>http://www.ilmuwebsite.com/</link>
      <description>
Pagi-pagi surfing langsung dapet kabar bagus. Proyek lanjutan RedHat linux yaitu Fedora Core terbaru yakni versi 7 Test ke 2, udah siap di download
[...]
      </description>
      </item>

      <item>
      <title>Jaringan | Sedikit Penjelasan Hardware Jaringan</title>
      <link>http://www.ilmuwebsite.com/</link>
      <description>
]Yup, kali ini saya akan coba jelaskan sedikit gambaran mengenai fungsi dari hardware jaringan yang telah di request. Yakni Router, Switch dan Hub. Langsung aja ke bahasannya
[...]
      </description>
      </item>

</channel>
</rss>

——-

Jika di buka dengan firefox hasilnya seperti ini:
Cara Membuat RSS 2.0 tutorial html web desain grafis

Setelah anda membuat RSS, anda bisa mem-verifikasi ke:
Feed Validator —>> http://www.feedvalidator.org

Ingat RSS harus di update terus, mengikuti perkembangan content website

Article Last Update on 23 Februari 2008
Link Updated
Semua File dapat di download di sini > Cara Membuat RSS 2.0

]]> http://www.ilmuwebsite.com/tutorial-html/cara-membuat-rss-20/feed 3