24 Mar 2012

Membuat menu frame dan form pada html

Pada materi kali ini akan dibahas mengenai cara membuat frame dan form pada halaman web, berikut pembahasannya :

A.MENU FRAME
1.Untuk membuat sebuah frame terlebih dahulu kita harus membuat halaman-halaman web yang ingin kita gabungkan dalam frame tersebut. Berikut adalah halaman-halaman web yang telah dibuat berikut sintaknya.


<HTML>

<HEAD> <TITLE> ASAL </TITLE> </HEAD>

<BODY>

<BODY BACKGROUND="uempe.jpg"WIDTH="800"HEIGHT="600">

<H1> <center> <font color="blue">WELCOME TO UNIVERSITAS MUHAMMADIYAH PURWOKERTO </font></H1>

<marquee direction="down"> <center> <font size="5"><font color="red">created by guntur restu perdana</font> </marquee>

<p><font size="6"> <center><font color="white">This Site Connecting People </font></P>

</BODY>

</HTML>


HASILNYA : 
                                    Frame.html


2. selanjutnya membuat menu  frame, berikut sintaknya :

<html>

<head><title> menu </title></head>



<BODY BACKGROUND="BLUE.jpg"WIDTH="600"HEIGHT="600">
<body>



<a href="frame.html" target="isi"><font color="white">Home</font></a><br>

<a href="jajal.html" target="isi"><font color="white">Mahasiswa</font></a><br>

<a href="profil.html" target="isi"><font color="white">Profil</font></a>

</body>

</html>

Hasilnya :


                                      Menu.html

3.membuat profil kita pada frame, sintaknya :

<html>

<head><title> about me </title></head>
<body background="blue.jpg">
<body>
<center>
<h1><img src="gun.jpg" width="200" height="250"><h1>
<font size="4" color="white">nama saya Guntur Restu Perdana<br>saya kuliah di Universitas Muhammadiyah Purwokerto</font>
<BR><I><font size=4 color="white"> Ini blog saya, kunjungi ya ?</I>
<A HREF="http://gunturrestuperdana.blogspot.com/" target="new"><blink><I><font color="white">Buka blog</I></blink> </A>

</center>
</body>

</html>

hasilnya :














                                          Profilku.html

4.selanjutnya membuat header frame,berikut sintaknya :

<html>

<head><title> awalan </title></head>

<body>


<BODY BACKGROUND="BLUE.jpg"WIDTH="600"HEIGHT="600">
<body>

<center>
<IMG SRC="ump.jpg" WIDTH="150"HEIGHT="150">
</center>


hasilnya :














                                         Ump.html


B.MENU FORM 
5.selanjutnya kita membuat form data mahasiswa, berikut sintaknya :
selanjutnya kita buat form,berikut sintaknya :

<html>
<head>
    <title>Form Data Mahasiswa</title>
</head>

<BODY BACKGROUND="blue.jpg">

<form action="coba.html"method="post">
<table border="1" width="40%">
 <tr>
<td width="200" valign="top" colspan="2" bgcolor="white" align="center">
<b>Form Data Mahasiswa</b></td>
</tr>
 <tr>
  <td width="100"><b>Nama</b></td>
  <td width="100"> <input type="text" size="25" />  </td>
 </tr>
 <tr>
  <td width="100"><b>Nim</b></td>
  <td width="100"><input type="text" size="25" />  </td>
 </tr>

</tr>
 <tr>
  <td width="100"><b>Jenis Kelamin</b></td>
  <td width="100"><select name="gender"> 
                    <option>Laki-laki 
                    </option><option>Perempuan   
                        </option></select> 
 </td>
 </tr>
<tr>
  <td width="100"><b>Tempat Tanggal Lahir</b></td>
  <td width="100"><input type="text" size="19"


<td width="100"><input type="text" size="3"

                       
<td width="100"><select name="bulan"> 
                    <option>Januari 
                    </option><option>Februari
                        </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>

                        <select name="Tahun"> 
                    <option>1992 
                    </option><option>1991
                </option><option>1990
                </option><option>1989
                </option><option>1988
                </option></select>               
 </td>
 </tr>


<tr>

  <td width="100"><b>Program Studi</b></td>
  <td width="100"><select name="Program Studi"> 
                    <option>Teknik Informatika 
                    </option><option>Teknik Sipil
                        </option><option>Teknik Elektro
                        </option></select>  
</td>

 </tr>

<td width="100"><b>Angkatan</b></td>
  <td width="100"><select name="Angkatan"> 
                    <option>2010 
                    </option><option>2009
                        </option><option>2008
                        </option></select>  
</td>
 </tr>

<tr>
  <td width="100"><b>Telepon</b></td>
  <td width="100"> <input type="text" size="25" />  </td>
 </tr>

<tr>
  <td width="100"><b>Alamat</b></td>
  <td width="100"> <input type="text" size="25" />  </td>
 </tr>

</tr>
</table>
</center></div>
</td>
</tr>
</table>


<input type="submit"value="Submite"><input type="reset"value="Cancel"><br>
</form>
</body>
</html>

hasilnya :














       

      Jajal.html

6.selanjutnya membuat profil website , berikut sintaknya :


<html>
<head>
    <title>Profil Kampus</title>
</head>


<BODY BACKGROUND="blue.jpg">

 hasilnya :












                                       Profil.html

C. MENGGABUNGKAN HALAMAN
6. Kemudian  kita gabungkan halaman web tersebut ,berikut adalah sintaksnya :

<html>

<head></head>

<frameset rows="26%,74%">

   <frame src="ump.html">

   <frameset cols="21%,58%,21%">

          <frame src="menu.html">

<a href="jajal.html" target="_blank" title="test coba"><img src="jajal.html" alt="test coba" border="0"></a>

          <frame src="frame.html" name="isi">
          <frame src="profilku.html" name="isi">

   </frameset>

</frameset>

</html>   

            hasil akhir











                                       hasil.html

gimana bang ? pusing yah ? sama saya juga pusing loh bang ... hehehe ..
YAUDAH SELAMAT MENCOBA YA BANG ...
 

0 komentar:

Posting Komentar