Kamis, 30 April 2015

Membuat Desain Layout Sederhana dengan CSS

     No comments
Assalamu'alaikum Wr. Wb

Disini saya akan berbagi informasi mengenai pembuatan layout menggunakan Css dan dibawah ini saya akan membuat layout tampilan sederhana dari sebuah "Twitter"


yang pertama buatlah script dan beri nama Twitter.Html 




selanjutnya buka file baru dan beri nama Twitter.Css

jika sudah selesai silahkan buka Twitter.Html nya tadi....
dan ini hasilnya




Selamat mencoba :)
Wassalamu'alaikum Wr. Wb

Rabu, 22 April 2015

Membuat Formulir Bidikmisi

     No comments
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="johan nur" />
<title>Formulir Bidikmisi</title>
</head>

<body>
<table  align="center" cellspacing="0" cellpadding="10">
<tr>
<td rowspan="3"><img src="C:/Users/TOSHIBA/Pictures/bidikmisi.JPG" width="170" height="75" /></td>
<th width="500">LAMPIRAN 3 : FORMULIR PENDAFTARAN</th>
<td rowspan="4" style="border: solid 3px #000000; text-align: center;  " width="100"> PASFOTO <br />TERBARU <br />3X4 </td>
   
</tr>
<tr>
<th width="500">PROGRAM BIDIKMISI DIKTI KEMENDIKBUD 2013</th>
   
</tr>
<tr>
<td align="center" width="500" >(Formulir diisi dengan huruf kapital)</td>
   
</tr>
<td>&nbsp;</td>
<tr>
</tr>
</table>

<table align="center" border="0">
<tr>
<td colspan="7"><strong>I. DATA DIRI</strong></td>
</tr>
<tr>
<td ><dd>1. &nbsp;NAMA LENGKAP</dd></td>
<td colspan="6">: <input type="text" maxlength="35" name="NAMA" size="90" /></td>

</tr>
<tr>
<td><dd>2. &nbsp; JENIS KELAMIN</dd></td>
<td >: <input type="radio" value="LAKI-LAKI" name="Gender"/>Laki-Laki&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" value="PEREMPUAN" name="Gender"/>Perempuan</td>
</tr>
<tr>
<td><dd>3. &nbsp;AGAMA</dd></td>
<td colspan="6">: <input type="radio" value="ISLAM" name="AGAMA"/>Islam&nbsp;&nbsp;&nbsp;
<input type="radio" value="RPOTESTAN" name="AGAMA"/>Protestan&nbsp;&nbsp;&nbsp;
<input type="radio" value="KATOLIK" name="AGAMA"/>Katolik&nbsp;&nbsp;&nbsp;
<input type="radio" value="HINDU" name="AGAMA"/>Hindu&nbsp;&nbsp;&nbsp;
    <input type="radio" value="BUDDHA" name="AGAMA"/>Budha&nbsp;&nbsp;&nbsp;
    <input type="radio" value="KONGHUCU" name="AGAMA"/>Konghucu</td>
</tr>
<tr>
<td><dd>4. &nbsp;KAB/KOTA LAHIR </dd></td>
<td colspan="6">: <input type="text" name="KOTA"/></td>
</tr>
<tr>
<td><dd>5. &nbsp;TANGGAL LAHIR </dd></td>
<td colspan="6">: <input type="text" name="TGL" maxlength="2"/>-
    <input type="text" name="BLN" maxlength="2"/>-
    <input type="text" name="THN" maxlength="4"/>
    Tanggal-Bulan-Tahun</td>
</tr>
<tr>
<td><dd>6. &nbsp;ALAMAT</dd></td>
<td colspan="6">: <input type="text" name="ALAMAT" maxlength="35"/></td>
</tr>
<tr>
<td><dd>7. &nbsp;KODE POS</dd></td>
<td colspan="6">: <input type="text" name="KODEPOS" maxlength="5"/></td>
</tr>
<tr>
<td><dd>8. &nbsp;TELEPON RUMAH</dd></td>
<td colspan="6">: <input type="text" name="KODETLP" maxlength="4"/>-
<input type="text" name="NOTLP" maxlength="6"/>(Kode wilayah-No telepon)</td>
</tr>
<tr>
<td><dd>9. &nbsp;HP</dd></td>
<td colspan="6">: <input type="text" name="hp" maxlength="12"/></td>
</tr>
<tr>
<td colspan="7"><strong>II. KELUARGA</strong></td>
</tr>
<tr>
<td><dd>1. &nbsp;NAMA AYAH/WALI</dd></td>
<td colspan="6">: <input type="text" name="AYAH"/></td>
</tr>
<tr>
<td><dd>2. &nbsp;PEKERJAAN AYAH/WALI</dd></td>
<td colspan="6">: <input type="radio" value="PNS" name="PEKERJAAN"/>PNS&nbsp;&nbsp;&nbsp;
    <input type="radio" value="Peg. SWASTA" name="PEKERJAAN"/>Peg. SWASTA&nbsp;&nbsp;&nbsp;
<input type="radio" value="WIRAUSAHA" name="PEKERJAAN"/>WIRAUSAHA&nbsp;&nbsp;&nbsp;
<input type="radio" value="TNI/POLRI" name="PEKERJAAN"/>TNI/POLRI&nbsp;&nbsp;&nbsp;
    <input type="radio" value="NELAYAN" name="PEKERJAAN"/>NELAYAN&nbsp;&nbsp;&nbsp;
    <input type="radio" value="LAINNYA" name="PEKERJAAN"/>LAINNYA &nbsp;
        <input type="text" name="PEKERJAAN"/></td>
</tr>
<tr>
<td><dd>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BEKERJA SEBAGAI</dd></td>
<td colspan="6">: <input type="text" name="PEKERJAAN1"/></td>
</tr>
<tr>
<td><dd>3. &nbsp;NAMA IBU</dd></td>
<td colspan="6">: <input type="text" name="IBU"/></td>
</tr>
<tr>
<td><dd>4. &nbsp;PEKERJAAN AYAH/WALI</dd></td>
<td colspan="6"><input type="radio" value="PNS" name="PEKERJAAN"/>PNS&nbsp;&nbsp;&nbsp;
<input type="radio" value="Peg. SWASTA" name="PEKERJAAN"/>Peg. SWASTA&nbsp;&nbsp;&nbsp;
<input type="radio" value="WIRAUSAHA" name="PEKERJAAN"/>WIRAUSAHA&nbsp;&nbsp;&nbsp;
<input type="radio" value="TNI/POLRI" name="PEKERJAAN"/>TNI/POLRI&nbsp;&nbsp;&nbsp;
    <input type="radio" value="NELAYAN" name="PEKERJAAN"/>NELAYAN&nbsp;&nbsp;&nbsp;
    <input type="radio" value="LAINNYA" name="PEKERJAAN"/>LAINNYA &nbsp;
        <input type="text" name="PEKERJAAN"/></td>
</tr>
<tr>
<td><dd>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BEKERJA SEBAGAI</dd></td>
<td colspan="6">: <input type="text" name="PEKERJAAN1"/></td>
</tr>
<tr>
<td><dd>5. &nbsp;JUMLAH TANGGUNGGAN</dd></td>
<td colspan="6">: <input type="text" name="TANGGUNGAN" maxlength="2"/> ORANG</td>
</tr>
<tr>
<td><dd>6. &nbsp;HP ORANG TUA</dd></td>
<td colspan="6">: <input type="text" name="hp" maxlength="12"/></td>
</tr>
<tr>
<td><dd>7. &nbsp;STATUS ORANG TUA</dd></td>
    <td colspan="6"> : AYAH&nbsp; <input type="text" name="ayah" maxlength="1" size="2"/> &nbsp;&nbsp;&nbsp;
    IBU&nbsp; <input type="text" name="ibu" maxlength="1" size="2"/> &nbsp;&nbsp;&nbsp;
1. &nbsp;KANDUNG&nbsp;&nbsp;
    2. &nbsp;TIRI&nbsp;&nbsp;
    3. &nbsp;ANGKAT&nbsp;&nbsp;
    4. &nbsp;LAINNYA&nbsp;&nbsp;
</td>
</tr>
<tr>
<td><dd>8. &nbsp;PENDIDIKAN ORANG TUA</dd></td>
    <td colspan="6"> : AYAH&nbsp; <input type="text" name="pendidikan ortu" maxlength="1" size="2"/> &nbsp;&nbsp;&nbsp;
    IBU&nbsp; <input type="text" name="ibu" maxlength="1" size="2"/> &nbsp;&nbsp;&nbsp;
1. &nbsp;SD/MI&nbsp;&nbsp;
    2. &nbsp;SMP/MTS&nbsp;&nbsp;
    3. &nbsp;SMA/MA&nbsp;&nbsp;
    4. &nbsp;D2/D3&nbsp;&nbsp;
    5. &nbsp;S1/D4&nbsp;&nbsp;
</tr>
<tr>
<td><dd>9. &nbsp;ORANG TUA KANDUNG</dd></td>
    <td colspan="6">: AYAH&nbsp; <input type="text" name="ayah" maxlength="1" size="2"/> &nbsp;&nbsp;&nbsp;
    IBU&nbsp; <input type="text" name="ibu" maxlength="1" size="2"/> &nbsp;&nbsp;&nbsp;
1. &nbsp;MASIH HIDUP&nbsp;&nbsp;
    2. &nbsp;SUDAH WAFAT&nbsp;&nbsp;
    3. &nbsp;LAINNYA&nbsp;&nbsp;
</tr>
<tr>
<td colspan="7"><strong>III. RUMAH TINGGAL KELUARGA</strong></td>
</tr>
<tr>
<td><dd>1. &nbsp;KEPEMILIKAN</dd></td>
    <td colspan="6">: <input type="text" name="pemilik rmah" maxlength="1" size="2"/> &nbsp;&nbsp;&nbsp;
    (1. &nbsp;SENDIRI;&nbsp;&nbsp;
    2. &nbsp;SEWA TAHUNAN;&nbsp;&nbsp;
    3. &nbsp;SEWA BULANAN;&nbsp;&nbsp;
    4. &nbsp;MENUMPANG;&nbsp;&nbsp;
    5. &nbsp;TIDAK MEMILIKI;&nbsp;&nbsp;
    (4)&(5) LANGSUNG IV)</td>
</tr>
<tr>
    <td><dd>2. &nbsp;TAHUN PEROLEHAN</dd></td>
    <td colspan="6">: <input type="text" name="thn" maxlength="4" size="10"/></td>
</tr>  
<tr>
    <td><dd>3. &nbsp;SUMBER LISTRIK</dd></td>
    <td colspan="6">: <input type="text" name="listrik" maxlength="1" size="10"/>&nbsp;&nbsp;&nbsp;
    <input type="text" name="ayah" maxlength="1" size="20"/>&nbsp;&nbsp;&nbsp;
    (1. &nbsp;PLN;&nbsp;&nbsp;
    2. &nbsp;GENSET/MANDIRI;&nbsp;&nbsp;
    3. &nbsp;TENAGA SURYA;&nbsp;&nbsp;
    4. &nbsp;PLN & GENSET ;&nbsp;&nbsp;
    5. &nbsp;TIDAK ADA; )&nbsp;&nbsp;
    </td>
</tr>  
<tr>
<td><dd>4. &nbsp;LUAS TANAH</dd></td>
    <td colspan="6">: <input type="text" name="tanah" maxlength="1" size="2"/> &nbsp;&nbsp;&nbsp;
    (1. &nbsp; > 200  M <sup>2</sup> ;&nbsp;&nbsp;
    2. &nbsp; 100-200  M <sup>2</sup> ;&nbsp;&nbsp;
    3. &nbsp; 50-99  M <sup>2</sup> ;&nbsp;&nbsp;
    4. &nbsp; < 25-50 M <sup>2</sup> ;&nbsp;&nbsp;)</td>
</tr>
<tr>
<td><dd>5. &nbsp;LUAS BANGUNAN</dd></td>
    <td colspan="6">: <input type="text" name="bangunan" maxlength="1" size="2"/> &nbsp;&nbsp;&nbsp;
    (1. &nbsp; > 200  M <sup>2</sup> ;&nbsp;&nbsp;
    2. &nbsp; 100-200  M <sup>2</sup> ;&nbsp;&nbsp;
    3. &nbsp; 50-99  M <sup>2</sup> ;&nbsp;&nbsp;
    4. &nbsp; < 25-50 M <sup>2</sup> ;&nbsp;&nbsp;)</td>
</tr>
<tr>
<td><dd>6. &nbsp;MANDI CUCI KAKUS</dd></td>
    <td colspan="6">: <input type="text" name="mck" maxlength="1" size="2"/> &nbsp;&nbsp;&nbsp;
    (1. &nbsp;KEPEMILIKAN SENDIRI DIDALAM;&nbsp;&nbsp;
    2. &nbsp;KEPEMILIKAN SENDIRI DILUAR;&nbsp;&nbsp;
    3. &nbsp;BERBAGI PAKAI; )&nbsp;&nbsp;</td>
</tr>
<tr>
<td><dd>7. &nbsp;SUMBER AIR</dd></td>
    <td colspan="6">: <input type="text" name="air" maxlength="1" size="2"/>KEMASAN &nbsp;&nbsp;&nbsp;
    &nbsp; <input type="text" name="ayah" maxlength="1" size="2"/>PDAM &nbsp;&nbsp;&nbsp;
    &nbsp; <input type="text" name="ayah" maxlength="1" size="2"/>SUMUR &nbsp;&nbsp;&nbsp;
    &nbsp; <input type="text" name="ayah" maxlength="1" size="2"/>SUNGAI/MATA AIR /GUNUNG&nbsp;&nbsp;&nbsp;
    </td>
</tr>
<tr>
<td><dd>7. &nbsp;JARAK DARI PUSAT KOTA / KAB</dd></td>
    <td colspan="6">: <input type="text" name="jarak" maxlength="1" size="2"/>KM
    </td>
</tr>
<tr>
<td><dd>9. &nbsp;JUMLAH ORANG TINGGAL</dd></td>
    <td colspan="6">: <input type="text" name="jumlah orang" maxlength="2" size="2"/>ORANG
    </td>
</tr>  
<tr>
<td colspan="7"><strong>IV. EKONOMI KELUARGA</strong></td>
</tr>
<tr>
<td ><dd>1. &nbsp;PENGHASILN AYAH/WALI</dd></td>
<td colspan="6">: <input type="text" maxlength="35" name="NAMA"  /></td>

</tr>
<tr>
<td><dd>2. &nbsp; PENGHASILAN IBU</dd></td>
<td colspan="6">: <input type="text" maxlength="35" name="NAMA" /></td>
</tr>
<tr>
<td colspan="7"><strong>V. PENDIDIKAN</strong></td>
</tr>
<tr>
<td><dd>1. &nbsp; KODE SEKOLAH ASASL</dd></td>
<td colspan="6">: <input type="text" maxlength="35" name="NAMA" /> Nomor Pokok Sekolah Nasional</td>
</tr>
<tr>
<td><dd>2. &nbsp; NAMA SEKOLAH</dd></td>
<td colspan="6">: <input type="text" maxlength="35" name="NAMA" /> </td>
</tr>
<tr>
<td><dd>3. &nbsp; NOMOR INDUK</dd></td>
<td colspan="6">: <input type="text" maxlength="8" name="NAMA" /> Nomor Induk Siswa Nasional </td>
</tr>
<tr>
<td><dd>4. &nbsp; TAHUN LULUS</dd></td>
<td colspan="6">: <input type="text" maxlength="4" name="NAMA" /> </td>
</tr>
<tr>
<td><dd>5. &nbsp; JURUSAN</dd></td>
<td colspan="6">: <input type="text" maxlength="8" name="NAMA" /> </td>
</tr>
<tr>
<tr>
    <td ><dd>6. URUTAN PRESTASI DI SEKOLAH</td>
    <td colspan="6"></td>
<tr>
</tr>
    <td ><dd><dd>a. Semester 4</td>
    <td colspan="6">:<input type="text" value="" maxlength="2" />
    Nilai Rapor:<input type="text" value="" maxlength="2" /></td>
<tr>
</tr>
    <td ><dd><dd>b. Semester 5</td>
    <td colspan="6">:<input type="text" value="" maxlength="2" />
    Nilai Rapor:<input type="text" value="" maxlength="2" /></td>
<tr>
</tr>
    <td ><dd><dd>c. Semester 6</td>
    <td colspan="6">:<input type="text" value="" maxlength="2" />
    Nilai Rapor:<input type="text" value="" maxlength="2" /></td>
<tr>
<tr>
    <td ><dd>7. PRESTASI KO / EKSTRA KURIKULER TERBAIK </td>
    <td colspan="6"></td>
<tr>
</tr>
    <td ><dd><dd>a. Prestasi 1</td>
    <td colspan="6">:<input type="text" value="" maxlength="20"/></td>
<tr>
</tr>
    <td ><dd><dd>b. Prestasi 1</td>
    <td colspan="6">:<input type="text" value="" maxlength="20"/></td>
</tr>
<tr>
    <td  colspan="7"><strong>VI. PILIHAN</strong></td>
<tr>
</tr>
    <td ><dd>1. KODE PERGURUAN TINGGI</td>
    <td colspan="6">:<input type="text" value="" maxlength="6"/></td>
<tr>
</tr>
    <td ><dd>2. NAMA PERGURUAN TINGGI</td>
    <td colspan="6">:<input type="text" value="" maxlength="20"/></td>
<tr>
</tr>
    <td ><dd>3. NAMA PRODI PILIHAN 1</td>
    <td colspan="6">:<input type="text" value="" maxlength="20" />
    KODE
    :<input type="text" value="" /></td>
<tr>
</tr>
    <td ><dd>4. NAMA PRODI PILIHAN 2</td>
    <td colspan="6"">:<input type="text" value="" />
    KODE
    :<input type="text" value="" /></td>
</tr>
<tr>
    <td  colspan="7"><strong>VII. RENCANA HIDUP DI LOKASI PENDIDIKAN YANG DITUJU APABILA DITERIMA</strong></td>
</tr>
<tr>
    <td ><dd>1. RENCANA TEMPAT TINGGAL </td>
    <td colspan="6">:<input type="text" value="" />
    (1. Bersama Keluarga/Kenalan; 2. Kos/Sewa; 3. Pesantren; 4. Belum Ada)</td>
</tr>
<tr>
    <td ><dd>2. ADA DUKUNGAN KELUARGA </td>
    <td>:<input type="text" value="" />
    (1. Ya; 2. Tidak)</td>
</tr>
<tr>
    <td ><dd>3. TRANSPORT DARI DAERAH ASAL </td>
    <td colspan="6">:<input type="text" value="" />
    1. Pesawat terbang : <input type="text" value="" />
    2. Kapal laut : <input type="text" value="" />
    3. Kendaraan Darat : <input type="text" value="" /></td>
</tr>
<tr>
    <td ><dd>4. TRANSPORT SEHARI-HARI </td>
    <td colspan="6">:<input type="text" value="" />
    (1.Sepeda Motor 2.Sepeda; 3.Becak; 4.Kendaraan Umum; 5.Lainnya)
    :<input type="text" value="" /></td>  
</tr>
<tr>
    <td colspan="7"><strong>VIII. CATATAN KHUSUS</strong></td>
</tr>
<tr>
    <td >KONDISI KESEHATAN </td>
    <td colspan="6">:<input type="text" value="" /></td>
</tr>
<tr>
    <td >(sakit kronis, ketunaan, dsb) </td>
    <td colspan="6">:<input type="text" value="" /></td>
</tr>
<tr>
<td align="center" colspan="3"> Dengan Ini Saya Menyatakan Dengan penuh Kesadaran untuk taat dan patuh terhadap ketentuan umum dan<br />khusus Bidikmisi, Menjunjung tinggi kehormatan pribadi, keluarga, almamater dan asal sekolah dengan mengisi<br />segala informasi sebenar-benarnya. Saya bersedia diknai sanksi apabila melanggar ketentuan dan memberikan<br />informasi yang tidak benar. </td>
</tr>
<tr>
<td colspan="3" align="right">................................................  ................................................</td>
</tr>
<td><br /></td>
</tr>
<tr>
<td colspan="3" align="right">(................................................  ................................................)</td>
</tr>
<tr>
<td colspan="3" align="right">Nama Lengkap Pendaftar&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
</table>


</body>
</html>





Hasil Akhir :









Senin, 06 April 2015

Belajar membuat Form Di HTML

     No comments


Assalamu'alaikum. Wr.Wb
Hayy guyysss...kali ini saya mau berbagi informasi mengenai pembuatan Form di HTML...
Dibawah ini ada contoh script mengenai Form nya..







Dan ini Hasil nya :



Sekian postingan dari saya......semoga bermanfaat yaa...
Dan selamat mencoba :)

Wassalamu'alaikum Wr. Wb

luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com