Archive for 2013
Belajar Membuat Frame
Sekarang membuat frame, yang baru saja di pelajari. Dan sebagai contohnya sebagai berikut :
dan ini script nya :
<html>
<head>
<title> Document Frameset </title>
</head>
<frameset cols="33%,43%,23%" frameborder="1">
<frameset rows=",200">
<frame src="form.html" name="satu" scrolling="no" frameborder="0">
<frame src="Tabel.html" name="dua" scrolling="yes" noresize>
</frameset>
<frame src="Form-2.html" name="tiga" frameborder="0">
<frame src="Latihan.html" name="empat" frameborder="1">
<nonframes>
Ada 4 halaman :
<ol>
<li><a href="form.html">Halaman 1</a></li>
<li><a href="Tabel.html">Halaman 2</a></li>
<li><a href="Form-2.html"></a></li>
<li><a href="Latihan.html"></a></li>
</ol>
</noframes>
</frameset>
</body>
</html>
Disitu link nya saya masukkan tugas tugas sebelumnya, anda bisa menggantinya semau anda dengan link yang mau anda tampilkan.
Kalau berminat silahkan download !
Membuat Form dalam Tabel
Setelah kita belajar membuat form, sekarang kita membuat form di dalam tabel. Penasaran?
Cekidot !!!...
Ini contoh yang saya bikin :
Cekidot !!!...
Ini contoh yang saya bikin :
Adapun script nya sebagai berikut :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Form dalam Tabel</title>
<style type="text/css">
<!--
.style4 {font-size: 24px; }
.style5 {font-size: 18px; }
.style9 {font-size: 12px}
-->
</style>
</head>
<body>
<table width="396" height="491" border="0">
<tr>
<td height="439" align="left" valign="top" background="../../edit.jpg"><p class="style4">Sign Up</p>
<p class="style5">It's Free and always will be</p>
<hr align="left" width="400" />
<table width="366" height="306" border="0">
<tr>
<td width="107">First Name : </td>
<td width="243"><form id="form1" name="form1" method="post" action="">
<label>
<input name="textfield" type="text" />
</label>
</form></td>
</tr>
<tr>
<td>Last Name : </td>
<td><form id="form7" name="form7" method="post" action="">
<label>
<input type="text" name="textfield2" />
</label>
</form></td>
</tr>
<tr>
<td>Your Email : </td>
<td><form id="form8" name="form8" method="post" action="">
<label>
<input name="textfield3" type="text" size="35" maxlength="35" />
</label>
</form></td>
</tr>
<tr>
<td>Re-enter Email : </td>
<td><form id="form9" name="form9" method="post" action="">
<label>
<input name="textfield4" type="text" size="35" maxlength="35" />
</label>
</form></td>
</tr>
<tr>
<td>New Password : </td>
<td><form id="form10" name="form10" method="post" action="">
<label>
<input type="password" name="textfield5" />
</label>
</form></td>
</tr>
<tr>
<td>I am : </td>
<td><form id="form11" name="form11" method="post" action="">
<label>
<select name="select">
<option>Select One</option>
<option>Male</option>
<option>Female</option>
</select>
</label>
</form></td>
</tr>
<tr>
<td>Birthday : </td>
<td><form id="form12" name="form12" method="post" action="">
<label>
<select name="select2">
<option selected="selected">Mount</option>
<option>January</option>
<option>February</option>
<option>Maret</option>
<option>April</option>
<option>Mei</option>
<option>Juni</option>
<option>Juli</option>
<option>Agustus</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Desember</option>
</select>
</label>
<label>
<select name="select3">
<option>Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</label>
<label>
<select name="select4">
<option>Year</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
</select>
</label>
</form></td>
</tr>
<tr>
<td height="45" colspan="2"><div align="center">
<form id="form13" name="form13" method="post" action="">
<label> <br />
<input type="submit" name="Submit2" value="Sign Up" />
</label>
</form>
</div></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="348" height="83" border="0" bgcolor="blue">
<tr>
<td width="144" height="25" bgcolor="blue">Email</td>
<td width="144" bgcolor="blue">Password</td>
<td width="113" bordercolor="blue" bgcolor="blue"> </td>
</tr>
<tr>
<td height="26" bgcolor="blue"><form id="form2" name="form2" method="post" action="">
<label>
<input type="text" name="textfield6" />
</label>
</form></td>
<td bgcolor="blue"><form id="form3" name="form3" method="post" action="">
<label>
<input type="password" name="textfield7" />
</label>
</form></td>
<td bordercolor="blue" bgcolor="blue"><form id="form6" name="form6" method="post" action="">
<label>
<input type="submit" name="Submit" value="Login" />
</label>
</form></td>
</tr>
<tr>
<td height="24" bgcolor="blue"><form id="form4" name="form4" method="post" action="">
<label> <span class="style9">
<input type="checkbox" name="checkbox" value="checkbox" />
Keep Me Login</span></label>
</form></td>
<td bgcolor="blue"><form action="" method="post" name="form5" class="style9" id="form5">
For Got Your Password
</form></td>
<td bordercolor="blue" bgcolor="blue"> </td>
</tr>
</table>
<p> </p>
</body>
</html>
Langsung download aja Gan
Belajar Membuat Form
Pertemuan kali ini kita akan belajar membuat Form, yang mana saya akan membuat form sederhana seperti dibawah ini :
Dan ini script nya :
<html>
<head>
<title> Contoh Penggunaan Formulir </title>
</head>
<body>
<form action="info.html" method="post">
Nama :
<input type="Text" Name="Nama" Size ="20" Maxlength="20">
<br>
Hobby :
<input type ="Text" Name="Hobby" Size="25" Maxlength="40">
<br>
<input type="SUBMIT" Value="kirim">
<input type="RESET" value="Kosongkan">
<br> <br>
<input type="CHECKBOX" Name="Anggur" checked> Anggur <br>
<input type="CHECKBOX" Name="jeruk">Jeruk<br>
<input type="CHECKBOX" Name="Melon">Melon<br>
<br>
<input type="RADIO"
Name="sex" Checked>Pria<br>
<input type="RADIO"
NAme="sex">Wanita<br>
<input type="RADIO"
NAme="sex">Belum ditentukan<br>
<br>
Komentar Anda<br>
<Textarea Name="Komentar"
Rows= "5" Cols="40" Wrap>
</Textarea>
<br>
Olahraga yang paling anda sukai
<select name="olahraga">
<option value ="Sepakbola" Selected> Sepak Bola
<option value ="Bulutangkis">Bulutangkis
<option value ="Tenismeja">Tenis Meja
<option value ="Basket"> Basket
<option value ="Lain-Lain"> Lain-Lain
</select>
</form>
</body>
</html>
Langsung saja kalau mau download Cekidot
Dan ini script nya :
<html>
<head>
<title> Contoh Penggunaan Formulir </title>
</head>
<body>
<form action="info.html" method="post">
Nama :
<input type="Text" Name="Nama" Size ="20" Maxlength="20">
<br>
Hobby :
<input type ="Text" Name="Hobby" Size="25" Maxlength="40">
<br>
<input type="SUBMIT" Value="kirim">
<input type="RESET" value="Kosongkan">
<br> <br>
<input type="CHECKBOX" Name="Anggur" checked> Anggur <br>
<input type="CHECKBOX" Name="jeruk">Jeruk<br>
<input type="CHECKBOX" Name="Melon">Melon<br>
<br>
<input type="RADIO"
Name="sex" Checked>Pria<br>
<input type="RADIO"
NAme="sex">Wanita<br>
<input type="RADIO"
NAme="sex">Belum ditentukan<br>
<br>
Komentar Anda<br>
<Textarea Name="Komentar"
Rows= "5" Cols="40" Wrap>
</Textarea>
<br>
Olahraga yang paling anda sukai
<select name="olahraga">
<option value ="Sepakbola" Selected> Sepak Bola
<option value ="Bulutangkis">Bulutangkis
<option value ="Tenismeja">Tenis Meja
<option value ="Basket"> Basket
<option value ="Lain-Lain"> Lain-Lain
</select>
</form>
</body>
</html>
Langsung saja kalau mau download Cekidot
Latihan Membuat Tabel
Setelah belajar membuat tabel, kita langsung latihan membuat tabel.
Contoh tabel yang saya buat seperti ini :
Dan ini scriptnya
Untuk tabel pertama :
<table width="80%" height="50%" border="2" align="center" bordercolor="black" bgcolor="aqua">
<tr>
<td colspan="2"><center>1</td>
<td colspan="2" rowspan="2"><center>4</td>
<td rowspan="4"><center>5</td>
</tr>
<tr>
<td><center>2</td>
<td><center>3</td>
</tr>
<tr>
<td colspan="2"><center>6</div></td>
<td colspan="2"><center>7</div></td>
</tr>
<tr>
<td colspan="2"><center>8</td>
<td><center>9</td>
<td><center>10</td>
</tr>
</table>
Untuk tabel kedua :
<table width="100%" height="50%" border="1" align="center">
<tr>
<td colspan="5" bgcolor="yellow"><center>SATU</td>
</tr>
<tr>
<td colspan="2" bgcolor="green"><center>DUA</td>
<td width="217" bgcolor="green"><center>TIGA</td>
<td width="228" bgcolor="green"><center>EMPAT</td>
<td width="159" bgcolor="green"><center>LIMA</td>
</tr>
<tr>
<td colspan="2" bgcolor="red"><center>ENAM</td>
<td colspan="2" bgcolor="red"><center>TUJUH</td>
<td rowspan="2"><center>DELAPAN</td>
</tr>
<tr>
<td width="140"><center>SEMBILAN</td>
<td colspan="2"><center> SEPULUH</td>
<td> <center>SEBELAS</td>
</tr>
<tr>
<td> <center>DUA BELAS </td>
<td colspan="3"><center>TIGA BELAS </td>
<td rowspan="2"><center>ENAM BELAS </td>
</tr>
<tr>
<td><center>EMPAT BELAS </td>
<td colspan="3"><center>LIMA BELAS</td>
</tr>
</table>
Jika anda ingin download keduanya, silahkan di Klik
Contoh tabel yang saya buat seperti ini :
Dan ini scriptnya
Untuk tabel pertama :
<table width="80%" height="50%" border="2" align="center" bordercolor="black" bgcolor="aqua">
<tr>
<td colspan="2"><center>1</td>
<td colspan="2" rowspan="2"><center>4</td>
<td rowspan="4"><center>5</td>
</tr>
<tr>
<td><center>2</td>
<td><center>3</td>
</tr>
<tr>
<td colspan="2"><center>6</div></td>
<td colspan="2"><center>7</div></td>
</tr>
<tr>
<td colspan="2"><center>8</td>
<td><center>9</td>
<td><center>10</td>
</tr>
</table>
Untuk tabel kedua :
<table width="100%" height="50%" border="1" align="center">
<tr>
<td colspan="5" bgcolor="yellow"><center>SATU</td>
</tr>
<tr>
<td colspan="2" bgcolor="green"><center>DUA</td>
<td width="217" bgcolor="green"><center>TIGA</td>
<td width="228" bgcolor="green"><center>EMPAT</td>
<td width="159" bgcolor="green"><center>LIMA</td>
</tr>
<tr>
<td colspan="2" bgcolor="red"><center>ENAM</td>
<td colspan="2" bgcolor="red"><center>TUJUH</td>
<td rowspan="2"><center>DELAPAN</td>
</tr>
<tr>
<td width="140"><center>SEMBILAN</td>
<td colspan="2"><center> SEPULUH</td>
<td> <center>SEBELAS</td>
</tr>
<tr>
<td> <center>DUA BELAS </td>
<td colspan="3"><center>TIGA BELAS </td>
<td rowspan="2"><center>ENAM BELAS </td>
</tr>
<tr>
<td><center>EMPAT BELAS </td>
<td colspan="3"><center>LIMA BELAS</td>
</tr>
</table>
Jika anda ingin download keduanya, silahkan di Klik
Membuat Tabel
Pertemuan pada web design ini, kita belajar membuat tabel pada halaman web/html.
Ini contoh yang saya bikin :
Dan ini scriptnya :
<html>
<head>
<title> Membuat Tabel </title>
</head>
<body>
<p><b> Membuat Tabel </p></b>
<table border="1" bordercolor="Blue" bgcolor="red" cellpadding="8" cellspacing="0" widht="100%">
<tr> <!-- <tr> artinya membuat sebuah baris -->
<td> Ini kolom 1 pada baris 1</td>
<td> Ini kolom 2 pada baris 1</td>
<tr>
<td> Ini kolom 1 pada baris 2 </td>
<td> Ini kolom 2 pada baris 2 </td>
</tr>
</table>
</body>
</html>
Yang ingin download langsung saja Cekidot
Ini contoh yang saya bikin :
Dan ini scriptnya :
<html>
<head>
<title> Membuat Tabel </title>
</head>
<body>
<p><b> Membuat Tabel </p></b>
<table border="1" bordercolor="Blue" bgcolor="red" cellpadding="8" cellspacing="0" widht="100%">
<tr> <!-- <tr> artinya membuat sebuah baris -->
<td> Ini kolom 1 pada baris 1</td>
<td> Ini kolom 2 pada baris 1</td>
<tr>
<td> Ini kolom 1 pada baris 2 </td>
<td> Ini kolom 2 pada baris 2 </td>
</tr>
</table>
</body>
</html>
Yang ingin download langsung saja Cekidot
Membuat Order List dan Unorder List
Latihan Web Design kali ini ialah tentang membuat Order List dan Unorder list.
Inilah contoh yang saya buat, walaupun sederhana :
Dan ini adalah script nya:
<html>
<head>
<title> List </title>
</head>
<body>
<ol type=1>
<li> Eren
<li> Mikasa
<li> Armin
</ol>
<br>
<ul type="crircle">
<li> Armin </li>
<li> Mikasa </li>
<li> Eren </li>
</ul>
</body>
</html>
Jika ingin mendownloadnya, silahkan Disini
Inilah contoh yang saya buat, walaupun sederhana :
Dan ini adalah script nya:
<html>
<head>
<title> List </title>
</head>
<body>
<ol type=1>
<li> Eren
<li> Mikasa
<li> Armin
</ol>
<br>
<ul type="crircle">
<li> Armin </li>
<li> Mikasa </li>
<li> Eren </li>
</ul>
</body>
</html>
Jika ingin mendownloadnya, silahkan Disini
Membuat HTML Terserah
Ini adalah pertama kali pertemuan pembelajaran WEB Design. Ini tugas pertama yang di instruksikan. Membuat halaman web/html sederhana.
Ini yang saya buat :
Ini contoh script nya :
<html>
<head>
<Title>Point Blank</title>
</head>
<body bgcolor ="silver">
<Font face="Tahoma"><font size="26"><Font color="blue"><center>MY CHAR POINT BLANK </font></font></font></center><br>
<p Align=center>Nickname : ADMissMayuyu <br>
Server Favorite: Server Polos 378 Server FC 408<Br>
Clan : -AMERINDORKY- <br>
<img src="chara.jpg" width=400 height=500><br>
</p>
</body>
</html>
Apabila anda ingin mendownload scriptnya. Silahkan Disini
Membuat Data Diri dan Menggunakan tag Pre
Tugas Web selanjutnya ialah membuat data diri
sendiri.
Inilah contoh yang saya buat:
Inilah contoh yang saya buat:
Yang pengen membuat seperti di atass, ini script
nya. Silahkan di coba :
<html>
<head>
<title>Rizki Tamias</title>
</head>
<body background ="3.jpg">
<body bgcolor ="silver">
<HR width ="450" size ="15"
color ="pink">
<center>
<U>Belajar</U> <I>bahasa pemograman</I> <font color
="green">web</font> <b>ternyata mudah
juga</b></center>
<HR width ="450" size ="15"
color ="pink">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<pre> <font color ="blue">
Nama :
Rizki Tamias
Kelas : XII
TKJ2
TTL : Pekanbaru, 14 Juni
Alamat : Pekanbaru
Hobi : Banyak
</font>
<img
src= "tamias.jpg" width ="200" hight"200">
</pre>
</body>
</html>
Yang pengen download scriptnya silahkan Disini
Mengatur Font dan Membuat Link
Pada pertemuan web design selanjutanya kita membuat latihan yaitu mengatur font face , size dan membuat sebuah link yang di aplikasikan pada text.
Inilah hasilnya :
Dan inilah script nya :
<html>
<head>
<title> Latihan 2-8 </title>
</head>
<body>
<font size="1" face="arial" color="red"> Ini size 1 <br>
<font size="2" face="Comic Sans MS" color="red"> Ini size 2 <br>
<font size="3" face="algerian" color="red"> Ini size 3 <br>
<font size="4" face="calibri" color="red"> Ini size 4 <br>
<font size="5" face="elephant" color="red"> Ini size 5 <br>
<font size="6" face="CASTELLAR" color="red"> Ini size 6 <br>
<font size="7" face="viner hand itc" color="red"> Ini size 7 <br>
<br>
<a href="https://www.facebook.com/"><font size="8" face="viner hand itc" color="red"> Ini size 8 </a> <br>
</body>
</html>
Untuk link nya saya bikin facebook.com, anda bias menggantikannya ke link yang ada inginkan.
Untuk yang ingin download Disini
.jpg)
