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 <></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: <td> text
yang ditampilkan
</td>.<br />
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>.<br />
Tag yang digunakan untuk mengakhiri sintak punya
karakter /(slash) sebelum sintaknya, contohnya: <td>
</td><br />
Kita juga dapat mengetik attribut di dalam sebuah
tag, contoh: <body bgcolor=”red”> </body>.
atau <input type=”text”>.<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
/><html><br />
tekan enter, kemudian ketik<br
/><head><br />Dalam container head, kita bisa mengetikan
beberapa sintak, tapi yangpaling penting jangan lupa mengetikan sintak
<title> judul halaman web </title>. Untuk sintak
lain nanti saja.<br />Sekarang ketikkan sintak title tadi, jadi seperti
ini:<br /><head> <title> judul halaman web
</title> </head><br />
Kemudian ketikkan <body>. Tag body
merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu
berasal dari <body>.<br />Body tuh tag container, jadi
mesti ditutup. Hasil sampai sekarang:<br />
<html><br
/><head><br /><title> Judul Halaman Web
</title><br />
</head><br />
<body><br />
</body><br />?<br />
<br />
<br />Selanjutnya bagaimana cara menampilkan
tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya
seperti ini :<br /><body><br />Contoh text yang
ditampilin di halaman web, By: Rian Hidayat<br /></body><br
/>terus, jika sudah, ketikkan </html>, script lengkapnya
seperti ini :<br /><html><br
/><head><br />
<title> Judul Halaman Web
</title><br />
</head><br
/><body><br />Contoh text yang ditampilkan di halaman
web, By: Rian Hidayat<br />
</body><br />
</html><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
Sumber : http://riyant17.blogspot.com
0 komentar:
Posting Komentar