Kamis, 24 Maret 2011

Form

1. TextBox, Inputan Pasword, Tombol submit dan reset


<html>
<body>
<form>
   Nama Lengkap : <input type="text" size="30" maxlength="10" name="fieldNama"value=""/>
   </br></br>

   Alamat : <input type="text" size="30" maxlength="10" name="fieldAlamat" value=""/>
    </br></br>

   Password   : <input type="password" size="30" maxlength="10" name="fieldpass" value=""/>
    </br></br>


    <input type="submit" value="Save" />
    <input type="reset" value="Clear" />
 

</form>
</body>
</html>


2. CheckBox, Radio Button, Text Area




<html>
<form>   
  Daftar Hobby </br>
  <input type="checkbox" name="hoby" value="membaca"/>Membaca   
  <input type="checkbox" name="hoby" value="memancing"/>Memancing
  <input type="checkbox" name="hoby" value="renang" checked/>Renang
  <input type="checkbox" name="hoby" value="memancing"/>Sepak Bola
  </br></br>


  Jenis Kelamin</br>
  <input type="radio" name="jk" value="Laki"/>Pria
  <input type="radio" name="jk" value="Perempuan"/>Wanita</br></br>
  

  Komentar :
  </br>
  <textarea name="Komentar" rows="5" cols="25"></textarea></br></br>  
 </form>
</html>

3. Perbedaan ComboBox dan List Box



<html>

Membuat combobox</br></br>
Tingkat Pendidikan</br>
<select name="pend">
<option value="sd">SD</option>
<option value="smp">SMP</option>
<option value="sma">SMA</option>
<option value="pt">Perguruaan Tinggi</option>
</select>
</br></br></br></br>



Membuat Listbox</br></br>
Tingkat Pendidikan</br>
<select name="pend"multiple/>
<option value="sd">SD</option>
<option value="smp">SMP</option>
<option value="sma">SMA</option>
<option value="pt">Perguruaan Tinggi</option>
</select>

</html>

Posted by rhyadh at 20.49 0 comments
Labels:

Jumat, 18 Maret 2011

FRAME

1. Membuat Frame 1





Cara membuat frame adalah dengan mengunakan lebih dari 1 halaman, langkahnya :
  • Pertama Kita buat dahulu isi dari frame kita buat 2 halaman, halaman pertama bernama halaman_a.html yang kedua halaman_b.html
----halaman_a.html-----
<html>
 <head>
 <title>halaman a</title>
 </head>
  <body>
   <h1>ini halaman A</h1>
  </body>
</html>

----halaman_b.html-----
<html>
 <head>
  <title>halaman b</title>
 </head>
  <body>
   <h1>ini halaman B</h1>
  </body>
</html>

  • Kedua kita buat halaman framenya, kita beri nama frame1.html
-----frame1.html-----
<html>
 <head>
 <title>latihan frame</title>
 </head>
  <frameset cols="40%,*">
   <frame src="halaman_a.html"/>
   <frame src="halaman_b.html"/>
  </frameset>
</html>



2. Membuat Frame 2




----halaman_a.html-----
<html>
 <head>
 <title>halaman a</title>
 </head>
  <body>
   <h1>ini halaman A</h1>
  </body>
</html>

----halaman_b.html-----
<html>
 <head>
  <title>halaman b</title>
 </head>
  <body>
   <h1>ini halaman B</h1>
  </body>
</html>


----frame2.html----
<html>
 <head>
 <title>latihan frame</title>
 </head>
  <frameset rows="30%,*">
   <frame src="halaman_a.html">
   <frameset cols="40%,*">
    <frame src="halaman_b.html"/>
    <frame src="halaman_b.html"/>
   </frameset>
  </frameset>
</html>




3. Membuat frame tanpa border




  • Gunakan halaman_a.html dan halaman_b.html yang tadi untuk membuat ini
<html>
 <frameset cols="40%,*" border="0">
  <frame src="halaman_a.html">
  <frame src="halaman_b.html">
 </frameset>
</html>



4. Membuat Frame dengan Link




  • Gunakan halaman_a.html dan halaman_b.html yang tadi untuk membuat ini
  • Buat lagi halaman baru seperti halaman_a.html kita beri nama halaman_c.html

----frame4.html-----
<html>
 <frameset cols="40%,*">
  <frame name="kiri" src="halaman_a.html"/>
  <frame name="kanan" src="halaman_c.html"/>
 </frameset>
</html>




5. Membuat iFrame


<html>
 <body>
  Mencoba IFrame<br/>
  <iframe src="halaman_a.html"
   width="200"
   height="100"
   align"=right"/>
 </body>
</html>










Posted by
rhyadh


at
13.38


0
comments











































TABLE











1. Membuat Table

<html>
<body>
 <table>
   <caption> Tabel Keahlian</caption>
     <tr><th>Name</th><th>Keahlian</th></tr>
     <tr><td>Superman</td><td>Bisa Terbang</td></tr>
    <tr><td>Spiderman</td><td>Nempel Dinding</td></tr>
  </table>
</body>
</html>

ket.
- tag  untuk judul
- tag  untuk isi table
- tag  untuk isi table headline(nama kolom)
- tag  untuk isi-isi tabel 


2. Membuat table dengan background color dan border

<html>
 <body>
   <table bgcolor="yellow" border="5">
   <caption> Tabel Keahlian</caption>
     <tr><th>Name</th><th>Keahlian</th></tr>
     <tr><td>Superman</td><td>Bisa Terbang</td></tr>
     <tr><td>Spiderman</td><td>Nempel Dinding</td></tr>
   </table>
 </body>
</html>


3. Membuat table dengan jarak dan menentukan jarak table


<html>
 <body>
  <table border="10" cellpadding="10" cellspacing="20">
    <caption> Tabel Keahlian</caption>
     <tr><th>Name</th><th>Keahlian</th></tr>
     <tr><td>Superman</td><td>Bisa Terbang</td></tr>
  <tr><td>Spiderman</td><td>Nempel Dinding</td></tr>
  </tabel>
 </body>
</html>

ket.
- tag  untuk memberi jarak antar tabel
- tag  untuk memberi jarak spasi antar table



4. Membuat table dengan ukuran yang diinginkan



<html>
 <body>
  <table border="1" width="300 height="600" align="center">
   <caption> Tabel Keahlian</caption>
     <tr><th>Name</th><th>Keahlian</th></tr>
     <tr><td valign="top">Superman</td><td>Bisa Terbang</td></tr>
     <tr><td valign="middle">Spiderman</td><td>Nempel Dinding</td></tr>
 </body>
</html>



5. Contoh table lainnya

<html>
 <body>
   <table border="1">
   <caption>DAta Mamalia</caption>
     <tr>
      <th rowspan="2" colspan="2"> Mamalia <th colspan="3">Jenis Mamalia</th>
     </tr>
     <tr>
      <th> Orang<br/>Utan    </th><th>Gajah</th><th>Zebra</th>
     </tr>
     <tr>
      <th rowspan="2">Jenis<br/>Kelamin</th>
      <th>Jantan</th>
      <td>15</td><td>5</td><td>8</td>
     </tr>
     <tr>
      <th>Betina</th>
      <td>25</td><td>7</td><td>10</td>
     </tr>
  
   </table>
 </body>
</html>









Posted by
rhyadh


at
12.56


0
comments





































          

        

          

        

Jumat, 04 Maret 2011


          

        







LIST, LINK, HYPERLINK











1.Membuat List

<html>
 <body>
   BAB 1 dengan UL
    <ul>
      <li>hello</li>
      <li>hello</li>
      <li>hello</li>
    </ul>
   BAB 2 dengan OL
    <ol>
      <li>hai</li>
      <li>hai</li>
      <li>hai</li>
    </ol>
 
 </body>
</html>
Ket.
- tag <ul> adalah unorderlist digunakan untuk membuat list berupa bullets
- tag <ol> adalah orderlist digunakan untuk membuat list berupa number
- tag<li> sebagai isi




2. List dengan atribut



<html>
    <body>
        Klarifikasi Hewan dengan UL Circle
            <UL type="circle">
                <li>mamalia</li>
                <li>reptil</li>
                <li>amfibi</li>
            </UL>
 
        Klarifikasi Hewan dengan UL Square
            <UL type="square">
                <li>mamalia</li>
                <li>reptil</li>
                <li>amfibi</li>
            </UL>

         Klarifikasi Hewan dengan UL Disc
            <UL type="disc">
                <li>mamalia</li>
                <li>reptil</li>
                <li>amfibi</li>
            </UL>


          Klarifikasi Hewan dengan OL type "a"
             <OL type="a" start="1">
                <li>mamalia</li>
                <li>reptil</li>
                <li>amfibi</li>
             </OL>
 
          Klarifikasi Hewan dengan OL type "A"
             <OL type="A" start="4">
                <li>mamalia</li>
                <li>reptil</li>
                <li>amfibi</li>
             </OL>

           Klarifikasi Hewan dengan OL type romawi "i"
             <OL type="i" start="8">
                <li>mamalia</li>
                <li>reptil</li>
                <li>amfibi</li>
             </OL>

          Klarifikasi Hewan dengan OL type romawi "I"
             <OL type="I" start="12">
                <li>mamalia</li>
                <li>reptil</li>
                <li>amfibi</li>
             </OL>
 
           Klarifikasi Hewan dengan OL type angka "1"
             <OL type="1" start="16">
                <li>mamalia</li>
                <li>reptil</li>
                <li>amfibi</li>
             </OL>
    </body>
</html>
ket.
- atribut pada tag <ul> hanya type dan berisi square(kotak), circle(lingkaran), disc (bulat penuh)
- atribut pada tag <ol> bertype type(type number apa yang akan kita pakai) dan start(dari angka berapa kita akan mulai)




3. Link and Hyperlink



<html>
      <body>
              Hyperlink ke halaman web <br/>
                    <a href = "Biodata.html"> Go to Biodata </a><br/><br/>

              Link ke email<br/>
                    <a href = "mailto:m.rhyadh@gmail.com">
                          Send a email
                    </a><br/><br/>

               Situs web<br/>
                     <a href = "http://www.google.com">Go to Google </a><br/><br/> 
       </body>
</html>













Posted by
rhyadh


at
09.28


0
comments






















Labels:
,
,
,
















        

      









Langganan:
Postingan (Atom)










save/share/bookmark