Hosting Gratis

Sunday, February 17, 2013

Membuat Desain Website Berbasis HTML Dengan Notepad++


 Pengenalan Tag Pada HTML

Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu diawali dengan <x> dan ditutup dengan </x> dimana x adalah perintah dari apa yang kita inginkan.
·         Daftar Tag Pada HTML
ELEMEN DASAR
Jenis Dokumen
<HTML></HTML>
(terdapat pada awal dan akhir dari file HTML)
Judul
<TITLE></TITLE>
(harus selalu terdapat pada mukadimah)
Mukadimah (Header)
<HEAD></HEAD>
(keterangan umum, seperti judul dsb.)
Batang Tubuh
<BODY></BODY>
(isi dari halaman HTML)





FORMAT TAMPILAN
Huruf Tebal
<B></B>
(Bold)
Huruf Miring
<I></I>
(Italic)
Garis Bawah
<U></U>
(Underline - jarang digunakan)
Rata Tengah
<CENTER></CENTER>
(Center - berlaku untuk teks maupun gambar)
Huruf Kedip
<BLINK></BLINK>
(Blinking - tag terlucu sampai kini)
Ukuran Huruf
<FONT SIZE=?></FONT>
(Font Size - boleh diisi dari 1 sampai 7)
Warna Huruf
<FONT COLOR="#$$$$$$"></FONT>

Pilih Jenis Huruf
<FONT FACE="***"></FONT>


PEMISAH
Paragraf
<P></P>
(tag penutup seringkali tak diperlukan)
Align Text
<P ALIGN=LEFT|CENTER|RIGHT></P>
 
Pndah Baris
<BR>
(pindah ke baris berikut)
Garis Datar
<HR>
(Horizontal Rule)
Penataan Letak Garis
<HR ALIGN=LEFT|RIGHT|CENTER>
 
Tebal Garis
<HR SIZE=?>
(dalam satuan pixel)
Lebar Garis
<HR WIDTH=?>
(dalam satuan pixel)
Lebar Garis Persentasi
<HR WIDTH="%">
(dalam persentasi terhadap lebar halaman)

LATAR BELAKANG DAN WARNA
Latar Belakang Gambar
<BODY BACKGROUND="URL">
(Tiled Background)
Warna Latar Belakang
<BODY BGCOLOR="#$$$$$$"
(Background Color - urutan: merah/hijau/biru)
Warna Huruf Teks
<BODY TEXT="#$$$$$$">


TABEL
Rancangan Tabel
<TABLE></TABLE>

Garis Batas Tabel
<TABLE BORDER=?></TABLE>

Lebar Tabel
<TABLE WIDTH=?>
(dalam satuan pixel)
Lebar Tabel Persentasi
<TABLE WIDTH="%">
(dalam satuan persen terhadap lebar halaman)
Baris dalam Tabel
<TR></TR>
 
Penataan Letak Baris
<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
 
Sel dalam Tabel
<TD></TD>
(harus ada dalam setiap baris tabel)
Penataan Letak Sel
<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
 
Kepala Tabel
<TH></TH>
(Table Header - seperti data dengan Bold dan Center)
Penataan Letak Kepala Tabel
<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
 
Warna Kepala Tabel
<TH BGCOLOR="#$$$$$$">



A.    Dasar dasar HTML

1.      Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah ini:

<html>
<head>
  <title> My First HTML Project </title>
</head>
  <body BGCOLOR=“Green” TEXT=“Red”>
     WELCOME TO MY WEBSITE
</body>
<body bgcolor=”#00ff00”>
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:
 
Gambar 1.  Judul Tab Halaman

2.      Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:

<html>
<head>
 <title> Tag P, Br dan Hr </title>
</head>
<body>
 <p>Ini adalah paragraf pertama, yang berisi 3 baris.  Baris satu, dua dan tiga. <br><br></p>
 <p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p>
<hr> Ini adalah garis horizontal.
</body>
<body bgcolor=”#00ff00”>
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:
 
Gambar 2. Mengatur Paragraf

3.      Mengatur ukuran huruf, buka notepad++,  kemudian ketikan code dibawah ini:

<html>
<head>
<title> Tag Heading </title>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
<body bgcolor=”#00ff00”>
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:
 
Gambar 3.  Ukuran Huruf

4.      Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:

<html>
<head>
<title>format tulisan</titele>
</head>
<body>
teks normal <br>
<small> teks small </small><br>
<big> teks big</big><br>
<b> teks tebal </b><br>
<i> teks miring </i><br>
<u> teks bergaris bawah </u><br>
Contoh superscript : x <sup>2</sup><br>
Contoh subscript : H<sub>2</sub>O<br>
<strike> Ini teks tercoret </strike><br>
<font size = 5 face = verdana>
menggunakan tag font
</font>
</body>
<body BGCOLOR ="#00FF00">
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:
 
Gambar 4. Format tulisan

5.      Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:

<html>
<head>
      <title> From komentar </title>
</head>
<body>
<table>
<tr>
<tdcolspan="3">&nbsp;</td></tr><tr>
  <td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=text name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type=text name="email"></td>
</tr>
<tr>
<td valign=top>Komentar</td>
<td valign=top>:</td>
<td><textarea name="komentar" rows=6 width=200></textarea></td>
</tr>
<tr>
<td colspan="3"><input type=submit name="submit"
value=submit></td>
</tr>
</table>
</body>
<body BGCOLOR ="#00FF00">
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:
 
Gambar 5. From komentar

6.      Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:

<html>
<head>
<title>warna-warna</title>
</head>
<body>
<table width="300" border="1">
<tr>
    <td colspan="3" align="center">warna-warna </td>
</tr>
<tr>
    <td bgcolor="#00FF00">Hijau</td>
    <td bgcolor="#FFFF00">Kuning</td>
    <td bgcolor="#FF0000">Merah </td>
</tr>
<tr>
    <td bgcolor="#999999">Abu-abu</td>
    <td bgcolor="#0000FF">Biru</td>
    <td bgcolor="#FF9900">Orange</td>
</tr>
<tr>
    <td bgcolor="#663300">Cokelat</td>
    <td bgcolor="#3399CC">Biru muda</td>
    <td bgcolor="#FF00FF">Merah muda</td>
</tr>
</table>
</body>
<body BGCOLOR ="#00FF00">
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:
 
Gambar 6. Tabel

B.     Hyperlink

1.      Membuat hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>
<head>
      <title> Judul tab </title>
      </head>
<body>
      Ini hyperlink ke wordpress
      <a href="http://www.wordpress.com/" title="Masuwordpress"> Wordpress </a>
      <br>Klik dan masuk ke yahoo<a href="http://www.yahoo.com/" title="Masuk yahoo"> Yahoo </a>
      <br>Masuk ke facebook anda
<a href="http://http://www.facebook.com/" title="Masuk ke facebook"> Facebook </a>
</body>
<body BGCOLOR ="#00FF00">
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:
 
Gambar 7 link halaman web lain


2.      Membuat hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>
<head>
      <title> Judul tab </title>
      </head>
<body>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/home.html" title="ke Rumah"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Graphic1.jpg" border="0" width="80" height="30"/></a>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/profil.html" title="Profilku"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/profil.jpg" border="0" width="100" height="30"/></a>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/html_colors.html" title="Kode Warna Pada HTML"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Kode%20Warna.jpg" border="0" width="150" height="30"/></a>
<a href="file:///C:/Users/COMPAQ/Documents/HTML.1/kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/kata%20kata.jpg" border="0" width="100" height="30"/></a>
</body>
<body BGCOLOR ="#00FF00">
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 8 berikut:
 
Gambar 8. Link Antar Bagian Dalam Web

C.    Membuat Website Sederhana

1.      Membuat halaman login pada website, buka notepad++, kemudin ketikan atau copy saja code dibawah ini:

<html>
<head>
<title>login web</title><link rel='icon' href='gambar/B.png'>
</head>
<body>
<p align="center"> <font  size="6" color="#FF6600" >
Silahkan mengisi data yang ada di bawah untuk masuk ke website saya :)</font>
</p>
<table align="center">
<td><form method="post" action="home.html"><label><font color="#FF6600">Nama Anda:</label>
<br>
<input type="text" name="nama" value=""></br>
<label><font color="#FF6600">Email Atau telepon:</label>
<br>
<input type="text" name="Email" value=""></br><label><font color="#FF6600">Alamat:</label>
<br>
<input type="text" name="Alamat" Value=""></br>
<label><font color="#FF6600">Tanggal Lahir </label>
<br>
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="select2">
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">Nopember</option>
<option value="12">Desember</option>
</select>
<select name="select3">
<option value="2001">1988</option>
<option value="2002">1989</option>
<option value="2003">1990</option>
<option value="2004">1991</option>
<option value="2005">1992</option>
<option value="2006">1993</option>
<option value="2007">1994</option>
<option value="2008">1995</option>
<option value="2009">1996</option>
</select></br>
<label><font color="#FF6600">Jenis Kelamin </label>
<br><font color="red">Pria
<font color="#CCFF00">Wanita</br>
<input type="submit" Value="Masuk">
</td>
</table>
<body background="gambar/aaa.png">
<EMBED SRC="MP3/Greenday%20-%20I%20walk%20Alone.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>
<p align="center"> <font  size="1" color="#FF6600" ><BLINK>..... Dalam penggisiannya harus jujur yaa, jangan bo'onk  :) ......
</body>
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, background dapat anda ganti sendiri sesuai dengan kesukaan anda.

Hasilnya seperti pada gambar 9 berikut:
 
Gambar 9. Halaman login

2.      Membuat halaman awal, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>
<head>
      <title>Home</title>
<link rel='icon' href='gambar/alien.ico'>
</head>
<body>
      <center><table width='1000' height='400' border="0" background='gambar/xx.jpg' cellpadding="0" cellspacing="<tr>
<td colspan="2" color="white" align='center'>
<img src="gambar/1.png" width="1000" height="400">
</td>
</tr>
<tr height="50"><td colspan='2' background='gambar/zz.jpg' align='left' height="20">
<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>
<left>      <ul><a href="home.html" title="ke Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>
<a href="http://mp3skull.com/"  title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80' height='30'></font></a>
<a href="profilku.html" title="Profilku"><img src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>
<a href="html_colors.html" title="Kode Warna Pada HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120' height='30'></a>
<a href="http://www.gametop.com/" title="Tempat Game"><img src='gambar/GAME.jpg' BORDER='0' width='80' height='30'></a>
<a href="http://www.w3schools.com/html/html_intro.asp" title="Tutorial HTML.w3schools.com"><img src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>
<a href="kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a>
</ul></left>
</td>
</tr>
<tr>
<td width='796' height='700' background='gambar/zz.jpg' valign='top' >
<p><font color="yellow" size="5">~Dasar-dasar Membuat Website Berbasis HTML~</font>
<p align="lift"><font  color="white">Nah, anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???
<br />
Nggak ada kan??? nah, maka dari itu, saya, Rian hidayat, akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum itu,? ada yang perlu diketahui.<br />
<br />
<a name='more'></a><br />
<span id="more-712"></span><br />
<b>tag &lt;&gt;</b><br />
digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.<br />
Tag container adalah tag yang berisi text yang akan ditampilkan
setelah tag ditutup. Contoh: &lt;td&gt; text yang ditampilkan
&lt;/td&gt;.<br />
Tag biasa, yahh&#8230;tag aja, contoh &lt;BR&gt; (break). &lt;br&gt; kaga perlu ditutup oleh tag &lt;/br&gt;, tapi jika sintak yang digunakan tag container, contoh: &lt;h1&gt;, yah mesti ditutup dengan &lt;/h1&gt;.<br />
Tag yang digunakan untuk mengakhiri sintak punya karakter /(slash) sebelum sintaknya, contohnya: &lt;td&gt; &lt;/td&gt;<br />
Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: &lt;body bgcolor=&#8221;red&#8221;&gt; &lt;/body&gt;. atau &lt;input type=&#8221;text&#8221;&gt;.<br />
<b>LANGKAH 1</b><br />
<ul>
<li>MEMBUKA NOTEPAD.</li>
</ul>
<b>LANGKAH 2</b> <br />
<ul>
<li>MENGETIKKAN SINTAK/SYNTAX.</li>
</ul>
Berikut ini adalah syntax dasar yang membentuk suatu HTML.<br />
pertama, ketikkan<br />&lt;html&gt;<br />
tekan enter, kemudian ketik<br />&lt;head&gt;<br />Dalam container head, kita bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa mengetikan sintak &lt;title&gt; judul halaman web &lt;/title&gt;. Untuk sintak lain nanti saja.<br />Sekarang ketikkan sintak title tadi, jadi seperti ini:<br />&lt;head&gt; &lt;title&gt; judul halaman web &lt;/title&gt; &lt;/head&gt;<br />
Kemudian ketikkan &lt;body&gt;. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari &lt;body&gt;.<br />Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:<br />
&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt; Judul Halaman Web &lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;/body&gt;<br />?<br />
&nbsp; <br />
<br />Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :<br />&lt;body&gt;<br />Contoh text yang ditampilin di halaman web, By: Rian Hidayat<br />&lt;/body&gt;<br />terus, jika sudah, ketikkan &lt;/html&gt;, script lengkapnya seperti ini :<br />&lt;html&gt;<br />&lt;head&gt;<br />
&lt;title&gt; Judul Halaman Web &lt;/title&gt;<br />
&lt;/head&gt;<br />&lt;body&gt;<br />Contoh text yang ditampilkan di halaman web, By: Rian Hidayat<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />
kalo udah, sekarang save dengan nama dasarHTML.<br />
kalo udah disave, buka data yang tadi di save.<br />?<br />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???<br />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.
<div style='clear: both;'></div>
</textarea>
<font="left" form method="post" action="file:///C:/Users/COMPAQ/Documents/HTML.1/new%204.html">
<input type="hidden" name="friendID" value="123456">
<textarea name="f_comments" cols="40" rows="5"">
Enter your comments here...
</textarea><br>
<input type="submit" value="coments" />
<input type="reset" value="Reset" />
</form>
</td>
<td width='200' height='700' bgcolor='' valign='top'>
<table align="left" width='200' border='0' bgcolor='' bordercolor='green'>
<tr align='center'>
<td><p><a href="http://www.facebook.com/" target="_blank" title="Masuk ke Facebook"> <img src="gambar/facebook.ico" border="0" width="90" height="70"/></a></td>
<td><p><a href="http://www.youtube.com/" target="_blank" title="Masuk ke youtube"> <img src="gambar/youtube.ico" border="0" width="90" height="70"/></a><td>
</p>
</tr>
</table>
<table align='left' width='200' border='0' bgcolor='' bordercolor='green'>                            
<center>
<td width="200" valign="top"><font color="#FFFF00" face="Cooper Std Black">
<b>TUTORIAL HTML</b>
<ul>
<li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>
<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>
<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>
</ul></font></table></td>
</tr>
<tr height="50">
s<td colspan='2'background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td></tr>
</table><div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">
<img border="0" src="gambar/twitter.ico" title="follow my twitter" alt="animasi bergerak gif" /></a><small><center></div>
<div style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a href='#top'>
<img border="0" src="gambar/top.png" width='50' height='50' title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center>
</div>
<div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a href='login.html'>
<img border="0" src="gambar/c.png" width='40' height='40' title="Kembali ke login" alt="animasi bergerak gif" /></a><small><center></div>
<body background='gambar/yy.jpg'></body>
<EMBED SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED></html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 10 berikut:

 
Gambar 10. Halaman awal

3.      Membuat data pribadi atau profil, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>
<head>
      <title>Profilku</title>
<link rel='icon' href='gambar/alien.ico'>
</head>
<body>
      <center><table width='1000' height='400' border="0" background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >
<tr>
  <td colspan="2" color="white" align='center'>
<img src="gambar/1.png" width="1000" height="400">
</td>
</tr>
 <tr height="50">
<td colspan='2' background='gambar/zz.jpg' align='left' height="20">
<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>
      <left><ul><a href="home.html" title="ke Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>
<a href="http://mp3skull.com/"  title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80' height='30'></font></a>
<a href="profilku.html" title="Profilku"><img src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>
      <a href="html_colors.html" title="Kode Warna Pada HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120' height='30'></a>
      <a href="http://www.gametop.com/" title="Tempat Game"><img src='gambar/GAME.jpg' BORDER='0' width='80' height='30'></a>
      <a href="http://www.w3schools.com/html/html_intro.asp" title="Tutorial HTML.w3schools.com"><img src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>
      <a href="kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a></ul></left></td></tr>
<tr><td width='796' height='700' background='gambar/zz.jpg' valign='top' >
      <p><table align="center" border="0" bgcolor="" cellpadding="0" cellspacing="8" >
      <td><tr><td colspan="2" align="center"><font face="Bauhaus 93" size="8" color="#0066FF"><b>PROFILKU</b></td></tr>
      <tr><br><table>
<P align="center"><font color="#00FFFF">
      <img src="gambar/rian.JPG" border="7" width="250" height="300">
<tr><td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NAMA</p></b></td>
      <td><font size="5"color="#00FFFF">: Rian Hidayat</p></td></tr>
      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>ALAMAT</p></b></td>
<td><font size="4"color="#00FFFF">: Weru, Sukoharjo</td></tr>
      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>TTL</p></b></td>
      <td><font size="5"color="#00FFFF">: Sukoharjo, 09-November-1993</td></tr>
      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>PEKERJAAN</p></b></td>
      <td><font size="5"color="#00FFFF">: Mahasiswa</td></tr>
      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>HOBY</p></b></td>
      <td><font size="5"color="#00FFFF">: Tidur</td></tr>
      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NO.TELPONE</p></b></td>
      <td><font size="5"color="#00FFFF">: 085728282066</td></tr>
      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>EMAIL</p></b></td>
      <td><font size="5"color="#00FFFF">: hrian89@gmail.com</td>
      </tr></table>
<table><P align="center"><font color="#00FFFF"><img src="gambar/bram.JPG" border="7" width="250" height="300"></p>
      <tr><td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NAMA</p></b></td>
            <td><font size="5"color="#00FFFF">: Bram Putra P.</p></td></tr>
            <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>ALAMAT</p></b></td>
            <td><font size="4"color="#00FFFF">: Laweyan, Surakarta</td></tr>
            <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>TTL</p></b></td>
            <td><font size="5"color="#00FFFF">: Surakarta, 13-April-1992</td></tr>
            <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>PEKERJAAN</p></b></td>
            <td><font size="5"color="#00FFFF">: Mahasiswa</td></tr>
            <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NO.TELPONE</p></b></td>
            <td><font size="5"color="#00FFFF">: XXXXXXXXXXXXXX </td>
      </tr></table></td>
      <td width='200' height='700' bgcolor='' valign='top'>
<table align="left" width='200' border='0' bgcolor='' bordercolor='green'>
<tr align='center'><td><p><a href="http://www.facebook.com/" target="_blank" title="Masuk ke Facebook"> <img src="gambar/facebook.ico" border="0" width="90" height="70"/></a></td>
<td><p><a href="http://www.youtube.com/" target="_blank" title="Masuk ke youtube"> <img src="gambar/youtube.ico" border="0" width="90" height="70"/></a><td>
      </p></tr>
      </table>
<table align='left' width='200' border='0' bgcolor='' bordercolor='green'>
            <center>
      <td width="200" valign="top"><font color="#FFFF00" face="Cooper Std Black">
      <b>TUTORIAL HTML</b>
      <ul><li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>
      <li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>
      <li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>
      </ul></font></table></td></tr>
      <tr height="50"><td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>
      </tr></table><div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">
<img border="0" src="gambar/twitter.ico" title="follow my twitter" alt="animasi bergerak gif" /></a><small><center>
</div>
      <div style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a href='#top'>
<img border="0" src="gambar/top.png" width='50' height='50' title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center></div>
      <div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a href='login.html'>
      <img border="0" src="gambar/c.png" width='40' height='40' title="Kembali ke login" alt="animasi bergerak gif" /></a><small><center>
      </div>
      <body background='gambar/yy.jpg'>
</body>
<EMBED SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 11 berikut:
Gambar 11. Membuat data pribadi

4.      Membuat album galery, buka notepad++, kemudian ketikan atau bisa copy saja code dibawah ini:

<html>
<head>
      <title>Profilku</title>
<link rel='icon' href='gambar/alien.ico'>
</head>
<body>
      <center>
<table width='1000' height='400' border="0" background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >
      <tr>
<td colspan="2" color="white" align='center'>
<img src="gambar/1.png" width="1000" height="400">
</td>
</tr>
<tr height="50">
<td colspan='2' background='gambar/zz.jpg' align='left' height="20">
<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>
      <left>
      <ul><a href="home.html" title="ke Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>
      <a href="http://mp3skull.com/"  title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80' height='30'></font></a>
      <a href="profilku.html" title="Profilku"><img src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>   <a href="html_colors.html" title="Kode Warna Pada HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120' height='30'></a>
      <a href="http://www.gametop.com/" title="Tempat Game"><img src='gambar/GAME.jpg' BORDER='0' width='80' height='30'></a>    <a href="http://www.w3schools.com/html/html_intro.asp" title="Tutorial HTML.w3schools.com"><img src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>  <a href="kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a>
      </ul></left>
      </td></tr>
      <tr>
<td width='796' height='700' background='gambar/zz.jpg' valign='top' >
      <p><table align="center" border="0" bgcolor="" cellpadding="0" cellspacing="8" >
      <td>
<p><b><center><font face="Bauhaus 93" size="7" color='#0000FF'>Galery</font></center></b></p><b>
<table color="blue" align="center" border="9px">
<tr><p align="center"><font color="#00FFFF" size='6'>Album Kegiatan Teknisi</font>
      <td><img src="file:///D:/Tugas%20HTML/Gambar/a.png" border="3" width="300" height="300" /></td>
      <td><img src="file:///D:/Tugas%20HTML/Gambar/b.png" border="3" width="300" height="300" /></td>
      <tr><td><img src="file:///D:/Tugas%20HTML/Gambar/c.png" border="3" width="300" height="300" /></td>
      <td><img src="file:///D:/Tugas%20HTML/Gambar/d.png" border="3" width="300" height="300" /></td>
      <tr><td><img src="file:///D:/Tugas%20HTML/Gambar/e.png" border="2" width="300" height="300" /></td>
      <td><img src="file:///D:/Tugas%20HTML/Gambar/f.png" border="3" width="300" height="300" /></td></p></tr>
</table>
      </td>
<td width='200' height='700' bgcolor='' valign='top'>
      <table align="left" width='200' border='0' bgcolor='' bordercolor='green'><tr align='center'>
      <td><p><a href="http://www.facebook.com/" target="_blank" title="Masuk ke Facebook"> <img src="gambar/facebook.ico" border="0" width="90" height="70"/></a></td>
      <td><p><a href="http://www.youtube.com/" target="_blank" title="Masuk ke youtube"> <img src="gambar/youtube.ico" border="0" width="90" height="70"/></a><td>
      </p></tr></table>
<table align='left' width='200' border='0' bgcolor='' bordercolor='green'>
            <center>
<td width="200" valign="top"><font color="#FFFF00" face="Cooper Std Black">
      <b>TUTORIAL HTML</b><ul>
      <li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>
      <li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>
      <li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>
      </ul></font></table></td></tr>
<tr height="50">
<td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>
      </tr></table>
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">
<img border="0" src="gambar/twitter.ico" title="follow my twitter" alt="animasi bergerak gif" /></a><small><center></div> <div style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a href='#top'>
      <img border="0" src="gambar/top.png" width='50' height='50' title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center></div>
<div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a href='login.html'><img border="0" src="gambar/c.png" width='40' height='40' title="Kembali ke login" alt="animasi bergerak gif" /></a><small><center></div>
<body background='gambar/yy.jpg'>
</body>
<EMBED SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 12 berikut:
Gambar 12. Galery

5.      Membuat artikel html tentang cara membuat tulisan bergerak, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>
<head>
      <title>Cara membuat tulisan bergerak</title>
<link rel='icon' href='gambar/alien.ico'>
</head>
<body>
      <center>
<table width='1000' height='400' border="0" background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >
<tr>
<td colspan="2" color="white" align='center'>
<img src="gambar/1.png" width="1000" height="400">
</td>
</tr>
<tr height="50">
<td colspan='2' background='gambar/zz.jpg' align='left' height="20">
<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>
<left>
                  <ul><a href="home.html" title="ke Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>
                  <a href="http://mp3skull.com/"  title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80' height='30'></font></a>
                  <a href="profilku.html" title="Profilku"><img src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>
                  <a href="html_colors.html" title="Kode Warna Pada HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120' height='30'></a>
                  <a href="http://www.gametop.com/" title="Tempat Game"><img src='gambar/GAME.jpg' BORDER='0' width='80' height='30'></a>
                  <a href="http://www.w3schools.com/html/html_intro.asp" title="Tutorial HTML.w3schools.com"><img src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>
                  <a href="kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a>
                  </ul></left>
                  </td>
</tr>
<tr>
<td width='796' height='700' background='gambar/zz.jpg' valign='top' >
<b><center><span style="font-size: large;" align='center'><font color='#0066FF' size='5'>Tutorial Membuat Tulisan Menjadi Bergerak</font></span></center></b>
<br />
<br /><font color='#00FFFF'>Marquee tag digunakan untuk menggerakkan sama ada perkataan ataupun gambar. Dalam contoh ini, saya akan tunjukkan beberapa cara untuk menggunakan Marquee tag ini untuk menggerakkan tulisan anda.</font><br />
<br />
<div style="color: #FFFF00;">
<marquee direction="down" height="50"><center>
<b>Teks Bergerak Ke Bawah...</b></center>
</marquee>
</div>
<div style="color: #FFFF00;"><marquee direction="right"><b>Teks Bergerak Ke Kanan...</b></marquee>
</div>
<div style="color: #FFFF00;"><marquee direction="left"><b>Teks Bergerak Ke Kiri...</b></marquee>
</div>
<br />
<div style="color: #FFFF00;">
<marquee direction="up" height="50"><center>
<b>Teks Bergerak Ke Atas...</b></center>
</marquee>
</div>
<br />
<a name='more'></a><br /><br /><span style="font-size: large;"><font color='#00FFFF'><b>1.</b></span> Seperti yang anda lihat di atas, Teks ini bergerak ke kiri dan ke kanan. Anda boleh gunakan kode dibawah ini untuk melakukan tricks tersebut.</font><br />
<br />
<div class="code"><br /><span style="color: white;">&lt;marquee direction="</span>
<b><span style="color: #FFFF00;">right</span></b><span style="color: white;">"&gt;This text scrolls right...&lt;/marquee&gt;</span></div><br />
<br /><font color='#00FFFF'>Apa yang anda perlukan, gantikan teks yang bewarna <b><span style="color:#FFFF00;">kuning</span></b> kepada arah mana anda akan teks tu Scroll. Anda boleh pilih sama ada - up, down, right, left.</font><br /><br />
<div style="color: #FF0000;"><marquee scrollamount="30"><b>Teks ini Macam Ferari..</b></marquee></div><br /><span style="font-size: large;"><font color='#00FFFF'><b>2.</b></span> Anda boleh mengubah kelajuan teks dengan menggunakan kod di bawah ni.</font>
<br /><br />
<div class="code"><br /><span style="color: white;">&lt;marquee scrollamount="</span><b><span style="color:#FF6600;">30</span></b><span style="color: white;">"&gt;</span><span style="color: #FF0000;">Teks ni Macam Ferari..</span><span style="color: white;">&lt;/marquee&gt;
</span></div><br /><br /><font color='#00FFFF'>Ubah nomer yang bewarna <b><span style="color:#FF6600;">Oren</span></b> untuk mengubah kelajuan.</font>
<br /><br />
<div style="color: #f1c232;"><marquee scrolldelay="300"><b>Teks ini seperti Siput..</b></marquee></div><br />
<div class="code"><br/><span style="color: white;">&lt;marquee scrolldelay="</span><b><span style="color:#00FF00;">300</span></b><span style="color: white;">"&gt;Teks ini seperti Siput..&lt;/marquee&gt;
</span></div><br /><br /><b><span style="font-size: large;"><font color='#00FFFF'>3.</span></b> Ubah nomer yang bewarna <b><span style="color:#00FF00;">hijau</span></b> untuk mengubah kelajuan.
</font><br /><br /><div style="color: #6600CC;"><marquee behavior="alternate"><b>Teks ini Melantun</b></marquee>
</div><br /><font color='#00FFFF'>Untuk membuatkan teks anda melantun seperti di atas ini. Gunakan kode di bawah.
</font><br /><br />
<div class="code"><br /><span style="color: white;">&lt;marquee behavior="alternate"&gt;</span><b style="color: #6600CC;">Teks ini Melantun</b><span style="color: white;">&lt;/marquee&gt;
</span></div><br /><br /><b><font color='#00FFFF'>4.</b> Ok. Seterusnya cara untuk menetapkan ruangan untuk Marquee bergerak
</font><br /><br /><div style="color: #0066FF;">
<marquee width="200"><b>Teks ini bergerak dalam kelebaran 200 width</b></marquee></div><br /><div class="code"><br />
<span style="color: white;">&lt;marquee width="</span><span style="color: #00FF00;">200</span><span style="color: white;">"&gt;Teks ini bergerak dalam kelebaran 200 width&lt;/marquee&gt;</span></div>
<br /><font color='#00FFFF'>Anda boleh tentukan width mengikut kesukaan anda dengan menukarkan nomer yang bewarna <b><span style="color: #00FF00;">hijau</span></b>.
</font><br /><br /><span style="font-size: large;"><b><font color='#00FFFF'>5.</b></span> Seterusnya saya akan menggabungkan beberapa kode Marquee ini bersama.
</font><br /><br />
<div style="color: #33FF33;"><marquee behavior=”alternate” scrollamount=”30” width=”400”><b>Teks Paling Awesome</b></marquee></div>
<br /><font color='#00FFFF'>Ini merupakan kode yang saya gunakan untuk membuat teks bergerak seperti yang di atas.
</font><br /><br />
<div class="code">
<br />
<span style="color: white;">&lt;marquee behavior="alternate" width="400" scrollamount="30"&gt;</span><b style="color: #33FF33;">Teks Paling Awesome</b><span style="color: white;">&lt;/marquee&gt;
</span></div>
<br />
<br /><font color='#00FFFF'>Sekarang, anda boleh coba dalam blog anda, anda juga boleh gabungkan kode-kode marquee ini mengikut kesukaan anda masing-masing.<br /></font><br /></td>
<td width='200' height='700' bgcolor='' valign='top'>
      <table align="left" width='200' border='0' bgcolor='' bordercolor='green'>
      <tr align='center'>
      <td><p><a href="http://www.facebook.com/" target="_blank" title="Masuk ke Facebook"> <img src="gambar/facebook.ico" border="0" width="90" height="70"/></a></td><td><p><a href="http://www.youtube.com/" target="_blank" title="Masuk ke youtube"> <img src="gambar/youtube.ico" border="0" width="90" height="70"/></a><td>
      </p></tr></table>
     <table align='left' width='200' border='0' bgcolor='' bordercolor='green'>
          <center>
<td width="200" valign="top"><font color="#FFFF00" face="Cooper Std Black">
      <b>TUTORIAL HTML</b>
      <ul><li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>
      <li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>
      <li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>
      </ul></font></table></td></tr><tr height="50"><td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>
</tr>
</table>
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">
<img border="0" src="gambar/twitter.ico" title="follow my twitter" alt="animasi bergerak gif" /></a><small><center>
</div>
<div style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a href='#top'>
<img border="0" src="gambar/top.png" width='50' height='50' title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center></div>
<div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a href='login.html'>
<img border="0" src="gambar/c.png" width='40' height='40' title="Kembali ke login" alt="animasi bergerak gif" /></a><small><center></div><body background='gambar/yy.jpg'>
</body>
<EMBED SRC="MP3/A7x_Afterlife.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 12 berikut:
Gambar 13. Artikel tulisan bergerak

405 comments:

  1. tutorial yang bagus mas.

    ReplyDelete
  2. trimaksih atas tutorialnya saudara...tgs dari dosen untuk buat web samkin lancar...he..he...

    ReplyDelete
  3. Bro ente mah ngajarin cara INSTANT, kalau kayak gini gk akan KREATIF bagi para PEMULA

    ReplyDelete
    Replies
    1. jadi dimana mas saya bisa dapet basic referensi tuk buat website,karna saya masih belum mengerti sama sekali tentang bahasa ato kode yang harus digunakan

      mohon infonya :)

      Delete
  4. makasih mas ilmunya,,
    :)
    law buat coment gini gimana caranya mas?????

    ReplyDelete
  5. untuk offline bisa kan?
    maksudnya pribadi/tanpa dipublikasikan ke publik

    ReplyDelete
  6. Thanks gan ;-)
    Visit and Follow my blog !!
    http://asfa-id.blogspot.com/

    ReplyDelete
  7. Sedikit sedikit saya coba tutorialnya.mudah mudahan berhasil

    ReplyDelete
  8. bagus mas, lebih dari membantu. terimakasih

    ReplyDelete
  9. web yg keren,,, sangat membantu

    ReplyDelete
  10. mo coba belajar oprek2 ah. nice sharing mas

    ReplyDelete
  11. gimana cara jadiin web online?? :D

    ReplyDelete
  12. makasih ilmunya...

    cara jadiin web onlinenya gimana

    ReplyDelete
  13. izin copas gan untuk nambah pengetahuan :D

    ReplyDelete
  14. sering-sering yaa share yg ginian.
    keren, keren,

    tks

    ReplyDelete
  15. thank's gan jadi bisa ene ngerjain tugas sekolah

    ReplyDelete
  16. Makasih banyak infonya gan.... banyak sekali pengetahuan yang saya dapat di sini

    ReplyDelete
  17. klo mengatur rata kiri gimana min??

    ReplyDelete
  18. kok ysng bikin koment
    pas diklik sumbit nggak muncul ya comment nya itu knp ?

    ReplyDelete
  19. kunjungi segera killerbee8.blogspot.com
    download anime one piece.......sub indo

    ReplyDelete
  20. permisi , mau tanya memasukan gambar dan background
    gimana yah ?

    ReplyDelete
    Replies
    1. begini caranya:
      img src="./latihan/gambar/baramg.jpg" width="1000"> height="100">
      tapi kalau backgroundnya saya nggak tahu

      Delete
  21. terimakasih atas infonya kang.. mudah mudahan bisa sangat berguna bagi saya..

    ReplyDelete
  22. mas, kalau bisa di kasih warna beda untuk yang harus di ganti seperti nama gambar atau link link

    ReplyDelete
  23. Salut banget sumpah ... ngeliatnya aja jadi cengo gitu... ribet .. tapi oke hasilnya.. terima kasih untuk artikelnya .. sangat membantu ... :D

    ReplyDelete
  24. oke,,, bagus n membantu saya banget,, tapi jujur sampai sekarang sya belum mengerti,,

    ReplyDelete
  25. Makasiih yah atas info nya lumayan buat ngulik dannambah pengetahuan..

    ReplyDelete
  26. ijin kopas ya kakaaakk,, diajarin lebih mau bangetss :-)
    tx

    ReplyDelete
  27. mkasi.. brow, tk jajal e

    ReplyDelete
  28. kalo tu gambar ga ada di pc or laptop kita tampilannya blank kita mesti rubah dulu di ling gambar nya ya kalo ga salah.

    ReplyDelete
  29. Keren gan, scriptnya banyak banget gan.. izin copas yah gan

    ReplyDelete
  30. mantap bro,bisa buat nambah wawasan ,

    ReplyDelete
  31. Thanks Broo, Sangat membantu buat awal eksplorasi :D

    ReplyDelete
  32. thanks gan for ilmunya

    ReplyDelete
  33. keren gan ilmunya saya salut (y)

    ReplyDelete
  34. makasih yah buat ilmunya bermanfaat banget :D

    ReplyDelete
  35. makasih banget tutorialnya sangat membantu saya,,,

    ReplyDelete
  36. thanks ya kk,tutorialnya sangat membantu saya dalam belajar web desain...

    ReplyDelete
  37. saran saya sih, jgn suruh orang copy paste HTMLny ke notepad mereka itu cara instant dan orang dijamin bakal gak ngerti, lebih baik uraikan dan jelaskan masing" fungsi HTML yang panjang itu,
    thx anyway

    ReplyDelete
  38. makasih gan...
    sangat bermanfaat..
    :)

    ReplyDelete
  39. kk kalo menguba kursor di blog menggunakan html kayk mna kk...?

    ReplyDelete
  40. ga ngerti cara naro fotonya ni kaka

    ReplyDelete
  41. ijin copas ya gan, mw belajar bwt website

    ReplyDelete
  42. tutorialnya sangat membantu terima kasih atas informasinya. .

    ReplyDelete
  43. mantab gan, mksih tutorial nya, sangat2 membantu ...

    ReplyDelete
  44. wah..wah.. ini artikel bagus bangat, ane uda nyari kemana2 tp teorinya susah karena kurang detil... tp yg satu ini patut diajungkan 2 jempol... saya pribadi masih ingin banyak belajar.. kl bisa hub. saya di 085715335476... ya mas/mba.. berapa saya harus bayar ??

    ReplyDelete
  45. lagunya ... enggak sukses diputar

    ReplyDelete
  46. cara pasang gambar background nya gmna,kok ini gak ada ya,malah ijo semua warnanya

    ReplyDelete
  47. gan cara bikin link nya gi mana,

    ReplyDelete
  48. sipp deh,,,lumayan nambah2 ilmu :-)

    ReplyDelete
  49. makasih atass infonya ya

    semoga ilmunya makin keren

    ReplyDelete
  50. sangat bermanfaat bro .. :)

    ReplyDelete
  51. Trima kasih ya mas.. atas pengajarannya..
    saya mau nanya mas,, waktu saya nyoba buat nya berhasil tapi kenapa wktu mau mmbuat halaman awal,, bacaan profil, home saya tidak keluar ya mas..

    mohon penjelasan nya...

    ReplyDelete
  52. makasih gan untuk infonya sangat bermanfaat sekali

    ReplyDelete
  53. terima kasih banget gan tutorialnya ... sangat bermanfaat buat tugas kuliah saya ...

    ReplyDelete
  54. makasih mas yang baik,..
    ijin copas ya mas,

    ReplyDelete
  55. thankz dh mau berbgi iLmu,,, salam oLahraga om :D

    ReplyDelete
  56. thank brow
    jadi bisa buat tugas dari guru nich
    mohon ijin copas ya.....

    ReplyDelete
  57. Tank's lot brow...

    ReplyDelete
  58. kalo mau kasih gambar gitu gan gmana????
    soalnya, saya di suruh buat web dengan gambar!!

    ReplyDelete
  59. terimakasih :) saya sangat terbantu :D

    ReplyDelete
  60. susah susah gmpang ........ tpi byak susahnya hehe
    tpi harus tetep mencoba

    ReplyDelete
  61. gan ad copy ma spa ni

    by onal

    ReplyDelete
  62. download notepadnya dmana?

    ReplyDelete
  63. saya sudah ikut tp kok nggak muncul?

    ReplyDelete
  64. mas cara rubah body back ground gimana kok gambar nya ga muncul

    ReplyDelete
    Replies
    1. lokasi folder gambar nya salah kali mas itu ?

      Delete
  65. masih ada yg salah tuch coding nya mas.... di cek lagi "membuat web sederhana"

    ReplyDelete
  66. siip makasih tutor nya. moga2 cepet bisa :)

    ReplyDelete
  67. mantab
    tengkyu gan

    ReplyDelete
  68. sangat bermanfaat ,, thanks om

    ReplyDelete
  69. cakep ! sangat membantu. Thank You...

    ReplyDelete
  70. Terimakasih gan postingannya sangat bermanfaat! keren!

    ReplyDelete
  71. Thanks gan! ilmunya,keren abis! but,ane msh bingung nih cara membuat background gambar. ane udh cba2 kyk pnjlsnnya agan,tapi ga muncul2 di website..mhn bntuannya gan! thanks alot's!

    ReplyDelete
  72. cara masukin gambarnya gmn gan?

    ReplyDelete
  73. sipp gan bermanfaat sekali buat newbie seperti kita2 ini

    ReplyDelete
  74. ini mah gak instan..!! trus CSS nya ikut kode spa?folder2nya gmana?nie kan bukan word. yang cetak lngsung jalan..
    mohon info yg jelas lg dong gan

    ReplyDelete
  75. tq om sangat membantu, tpi sdikit masukan, background blognya bkin tulisan agag kesulitan utk dbaca om, tq

    ReplyDelete
  76. thx sangat membantu....
    ijin nyoba

    ReplyDelete
  77. makasih gan dah share ilmunya. . . . sangat berguna (y)

    ReplyDelete
  78. numpang tanya gan, judul lagu yang ada di blog ini apa ya ? trus band apa yang nyanyiin ? :D

    ReplyDelete
  79. ini program klo di adobe dreamweaver jalan kgk?

    ReplyDelete
  80. kayak mna cara bikin dua background dalam 1 website?

    ReplyDelete
  81. Makasih..
    Jadi lebih mengerti, lumayan rinci

    ReplyDelete
  82. thanks gan jadi nambah pengetahuan saya

    ReplyDelete
  83. Bisa buat bahan baca"an .. :)

    ReplyDelete
  84. Wah2 hebat baget.. izin copas ya gan, sy mau convert to PDF untuk enak dibaca. Sukses slalu gan..

    ReplyDelete
  85. gan cara nginputkan gambarnya gimana sih ?

    ReplyDelete
  86. hhe... terima kasih mas infonya. lumayan buat bekal koding otodidak...

    ReplyDelete
  87. bro kalo cara buat pass gini gmana ya
    email|password

    ReplyDelete
  88. ijin copas ya mas ... tapi jujur aja nih saya tidak mengerti membuat website thu gmana. thanks sangat membantu..

    ReplyDelete
  89. cari-cari eh akhirnya ketemu juga blog ttg ini
    izin share ya..
    very useful (y)

    ReplyDelete
  90. terima kasih mas, atas tuorial nya , tinggal saya edit lagi buat ngerjain tugas dr dosen bikin web

    ReplyDelete
  91. gan tolong dishare cara postingnya donk

    ReplyDelete
  92. ijin comot gan terimakasih infonya sangat bermanfaat sekali :) wicak emx

    ReplyDelete
  93. lengkap. thank you :)

    ReplyDelete
  94. cara mengonlinekannya gmn gan? tolong balesnya ke email saya ya

    ReplyDelete
  95. kok gg kebuka ya? apa yang salah kira2.

    ReplyDelete
  96. KEREEEEEEEEEEEEEEEEEEEEEEEEEEEEEN

    ReplyDelete
  97. Keren :) sangat membantu makasihh

    ReplyDelete
  98. gan numpang tanya
    itu yg form login pas di pria dan wanita ga ada tombol optionnya ya ?
    barusan saya copas ga ada tombol optionnya

    ReplyDelete
  99. cara mengubah gambar nya gimana ya? ko gambar nya ga muncul ya?

    ReplyDelete
  100. wooooooooooow your desing is so niceeeeeeeeeeeeeeee

    ReplyDelete
  101. Super komplit tutorialnya gan ..thankk

    ReplyDelete
  102. GG gan.. Langsung Praktek...

    Mampir juga di blog ane ya gan di inilhooo.blogspot.com

    ReplyDelete
  103. Bagus kak, aku cobain , thanks .

    ReplyDelete
  104. makasih atas info nya :)
    mu langsung di coba ;)
    mudah'han berhasil. aamiin :) :* :*

    ReplyDelete
  105. Sangat Membatu sekali,,,terimakasihhhhhh

    ReplyDelete
  106. Terima kasih informasinya. Kunjungin balik ya http://www.tamahost.com

    ReplyDelete
  107. makasih banyak ya mas brooo "good job"

    ReplyDelete
  108. terimakasih banyak bang, lanjutkan!!!

    ReplyDelete
  109. Infonya sangat bermanfaat, thx
    http://momentsurabaya.com

    ReplyDelete
  110. makasih buat materinya.. :) bagus sekali

    ReplyDelete
  111. terimaksih,,,semoga bermanfaat

    ReplyDelete
  112. Gan, Terimakasih banyak ilmunya dah mau di sharing,... klo boleh minta resferensinya gan yang bisa didownload buat ane kuliah.. mantep nih klo dipraktekin lebih lanjut.. TQ ya gan ditunggu sopt file nya...

    ReplyDelete
  113. Uhhhhhh keren! thx artikelnya hebat nih!

    ReplyDelete
  114. Tutorialnya sangat bermanfaat bgt ms,thank u ya ms.

    ReplyDelete
  115. makasih telah membagikan ilmu nya suhu .

    ReplyDelete
  116. Rekomendasi Artikel Terkait ->

    SUBSTANSI :

    Mengenal Layout Semantik HTML 5
    Contoh Elemen Semantik Terbaru di HTML5
    Contoh Layout Halaman Website
    Praktik Membuat Halaman Sederhana dengan HTML5

    Pranala -> Praktek Membuat Halaman Website Dengan HTML 5

    ReplyDelete
  117. Wah keren .. Ngebantu banget buat saya belajar :)

    ReplyDelete
  118. mantap gan...bermanfaat..

    www.sawarnaraya.com

    ReplyDelete
  119. This comment has been removed by the author.

    ReplyDelete
  120. makasih banget mas sungguh amalmu akan mengalir terus tiada henti

    ReplyDelete
  121. Terima Kasih Bro sdh sgt membantu.

    ReplyDelete
  122. mas kenapa saya nggak bisa ganti backgroung yaa? :(

    ReplyDelete
  123. bermanfaat banget gan, ini share yang aku cari.

    ReplyDelete
  124. pusing juga gan kalau belajar nya manual begini hehe

    ReplyDelete
  125. makasih mas, bisa buat materi belajar aku dikampus kalau ada tugas :)

    ReplyDelete
  126. share lagi yah gan tentang codingan yang lainnya

    ReplyDelete
  127. pusing banget gan, matanya ga kuat hhahah

    ReplyDelete
  128. carai waktu luang kalau begini, sulit juga kalau sampe ga konsen

    ReplyDelete
  129. disimpan dimana scriptnya? dan bagaimana berhubungan dengan web?

    ReplyDelete
  130. wah , lumayan nih mas tutorial nya .
    ane praktekan dulu deh :)

    ReplyDelete
  131. Thanks infonya gan...

    Bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini Belajar Membuat Web

    ReplyDelete