Elfan Go Blog .COM: 2015

Archive for 2015

Cara Hosting Gratis Localhost dengan IdHostinger

ElfanRodh 8/04/2015 09:08:00 PM Add Comment

ElfanRodh

Kali ini saya akan berbagi sedikit tentang cara hosting gratis lewat IdHostinger. oke check it out
1. Buka alamat idhostinger.com
2. Jika anda belum punya akun silahkan daftar di pojok kanan atas, kemudian masukkan data anda
3. Kemudian setelah mendaftar anda akan diminta memverifikasi e-mail anda, caranya buka inbox di e-mail yang sudah anda daftarkan tadi, kemudian klik alamat yang ada di inbox anda
4. Setelah itu anda akan masuk ke Beranda akun anda, klik Hosting baru.

5. Buat alamat dan password anda
6. Masuk ke Menu Hosting-Semua Akun Hosting, klik pada domain yang sudah anda buat, lalu Kelola
7. Klik Database - DatabaseMySql - Import database localhost anda ke myphpadmin dari id hostinger
8. Klik Web - Install Web - Lalu masukkan file web berekstensi .zip anda
9. Klik File - File Manajer 1 - Instal - Akses - Hapus file default. kemudian edit file wp-config lalu edit nama database, nama user, sandi sesuai yang anda buat di idhostinger tadi

Oke, sekian penjelasan singkat dari saya. Bila belum jelas atau ada tambahan dapat berkomentar dibawah,

Terimakasih Salam Sukses !!!

Belajar Bootstrap Pemula

ElfanRodh 5/11/2015 03:56:00 AM Add Comment

ElfanRodh

Assalamu'alaikum Wr. Wb

Oke, di postingtan kali ini kita akan membahas sedikit tentang Bootstrap. What Is Bootstrap ???
Mungkin rekan-rekan yang sedang atau sudah belajar tentang html, css dan javascript sudah mengerti apa itu Bootstrap. Yak langsung saja Gaes. Check It Out ...

1. Pengertian
Bootstrap adalah front-end framework yang bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

2. Fungsi
Pada kesempatan kali ini kita akan belajar sedikit tentang cara menggunakan css pada Bootstrap. Sebelum itu kita buka dulu laman http://getbootstrap.com/. Di dalam Menu Bar laman http://getbootstrap.com/, Kita akan menjumpai banyak pilihan, diantaranya Getting Strarted, CSS, Componens dll. Seperti gambar di bawah ini :
Getting Started, berisi panduan dasar dalam menggunakan Bootstrap
CSS, berisi kumpulan CSS yang sedemikian rupa mengenai macam-macam desain Table, Form, Button, Images dll.

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet dll. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dibuka oleh mobile browser tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar mobile tersebut. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Oke, kita akan belajar hal yang umum yakni Table. Pilih Table di menu sebelah kanan.

Akan muncul banyak pilihan, untuk mempermudah copy saja script dari Getting Started -> Basic Template untuk mendapatkan link.

Setelah itu paste ke Notepad++ dan simpan dengan nama BS.html

Oke, ikuti langkah berikut :

1. Download Bootstrap di laman Getting Started

2. Ekstrak File yang telah di download kemudian jadikan satu folder dengan file BS.html

3. Tinggal memasukkan table dan memanggil class sesuai dengan format di Bootstrap

Dan Hasilnya akan seperti di Bootstrap pula :

selain itu kita juga bisa menambahkan CSS, misal "table table-striped" atau lainnya.

Oke, I think that's enough.

Mungkin cuma itu yang bisa saya postingkan kali ini. Maaf bila ada kata yang kurang mengena di hati hati saudara. Terimakasih sudah membaca :)

Wassalamu'alaikum Wr. Wb

Membuat Halaman Login Facebook menggunakan CSS

ElfanRodh 5/04/2015 04:11:00 AM Add Comment

ElfanRodh

Copy script berikut :

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="crude" />

<style>
    .head{
        float: top;
        width: 100%;
        height: 100px;
        background-color: #3A5795;
        font-family: arial;
        color: white;
    }

    .fb{
        background-color: #3A5795;
        font-family: arial;
        font-weight: bold;
        font-size: xx-large;
        color: white;
        padding: 30px 10px 0 50px;
        float: left;
    }

    .login{
        float: right;
        font-size: x-small;
        padding: 10px 10px 0 0;
    }

    .masuk{
        background-color:#3A5795 ;
        color: white;
    }
    .left{
        float: left;
        width: 50%;
        height: 500px;
        padding: 20px 0 0 30px;
    }
    .right{
        float: right;
        width: 45%;
        height: 500px;
        font-family: arial;
        padding: 15px;
    }

    .isi{
        font-family: arial;
    }

    .foot{
        float: bottom;
        width: 100%;
        height: 100px;
    }

    .tulis{
        font-family: arial;
        font-weight: bold;
        font-size: medium;
        color: black;
        padding: 30px 10px 0 30px;
        float: left;
    }

    .sizeisi{
        font-size: small;
    }

    .mendaftar{
        background-color: #63A551;
        font-family: arial;
        color: white;
        font-size: 30px;
    }

    .link{
       margin:0 30px 0 30px;
       border-bottom:silver 1px solid;
        font-family: arial;
        font-size: 12px;
    }
    .link2{
       margin:0 30px 0 30px;
        font-family: arial;
        font-size: 12px;
    }

    .copy{
       margin:0 30px 0 30px;
        font-family: arial;
        font-size: 12px;
    }

</style>

    <title>Q2</title>
</head>

<body>
<div class="head">
    <div class="fb">facebook</div>
    <div class="login">
        <table>
            <tr>
                <td colspan="2">Email atau Telepon</td>
                <td>Kata Sandi</td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="text" placeholder=""/>
                </td>
                <td>
                    <input type="text" placeholder=""/>
                </td>
                <td>
                    <input class="masuk" type="submit" value="Masuk"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="checkbox">Biarkan saya tetap masuk</input>
                </td>
                <td>Lupa kata sandi</td>
            </tr>
        </table>
    </div>
</div>
<div class="left">
    <div class="tulis">Facebook membantu Anda terhubung dan berbagi dengan orang-orang dalam kehidupan Anda.</div>
    <img src="konek.png"/>
</div>
<div class="right">
    <div class="isi">
<table>
<tr>
    <td><h1>Mendaftar</h1></td>
</tr>

<tr>
    <td>Gratis, sampai kapan pun.</td>
</tr>

<tr>
    <td width="100">
    <form>
    <input type="text" placeholder="Nama Depan" name="namadepan" size="30"></input></td>
    <td width="100">
    <input type="text" placeholder="Nama Belakang" name="namabelakang" size="30"></input><br></td>
</tr>
<tr>
    <td colspan="2">
    <input type="text" placeholder="E-mail atau nomor ponsel" name="email" size="69"></input></td>
</tr>

<tr>
    <td colspan="2">
    <input type="text" placeholder="Masukkan lagi e-mail atau nomor ponsel" name="masukkanemaillagi" size="69"></input></td>
</tr>

<tr>
    <td colspan="2">
    <input type="text" placeholder="Kata sandi baru" name="katasandi" size="69"></input></td>
</tr>

<tr>
    <td colspan="3">Tanggal Lahir</td>
</tr>

<tr>
    <td width="250">
        <select name="tanggallahir">
    <option value="">Tanggal</option>
    <option value="value">1</option>
    <option value="value">2</option>
    <option value="value">3</option>
    <option value="value">4</option>
    <option value="value">5</option>
    <option value="value">6</option>
    <option value="value">7</option>
    <option value="value">8</option>
    <option value="value">9</option>
    <option value="value">10</option>
    <option value="value">11</option>
    <option value="value">12</option>
    <option value="value">13</option>
    <option value="value">14</option>
    <option value="value">15</option>
    <option value="value">16</option>
    <option value="value">17</option>
    <option value="value">18</option>
    <option value="value">19</option>
    <option value="value">20</option>
    <option value="value">21</option>
    <option value="value">22</option>
    <option value="value">23</option>
    <option value="value">24</option>
    <option value="value">25</option>
    <option value="value">26</option>
    <option value="value">27</option>
    <option value="value">28</option>
    <option value="value">29</option>
    <option value="value">30</option>
    <option value="value">31</option>
        </select>

        <select name="bulan">
    <option value="">Bulan</option>
    <option value="value">Januari</option>
    <option value="value">Februari</option>
    <option value="value">Maret</option>
    <option value="value">April</option>
    <option value="value">Mei</option>
    <option value="value">Juni</option>
    <option value="value">Juli</option>
    <option value="value">Agustus</option>
    <option value="value">September</option>
    <option value="value">Oktober</option>
    <option value="value">November</option>
    <option value="value">Desember</option>
        </select>

        <select name="tahun">
    <option value="">Tahun</option>
    <option value="value">2015</option>
    <option value="value">2014</option>
    <option value="value">2013</option>
    <option value="value">2012</option>
    <option value="value">2011</option>
    <option value="value">2010</option>
    <option value="value">2009</option>
    <option value="value">2008</option>
    <option value="value">2007</option>
    <option value="value">2006</option>
    <option value="value">2005</option>
    <option value="value">2004</option>
    <option value="value">2003</option>
    <option value="value">2002</option>
    <option value="value">2001</option>
    <option value="value">2000</option>
    <option value="value">1999</option>
    <option value="value">1998</option>
    <option value="value">1997</option>
    <option value="value">1996</option>
    <option value="value">1995</option>
    <option value="value">1994</option>
    <option value="value">1993</option>
    <option value="value">1992</option>
    <option value="value">1991</option>
    <option value="value">1990</option>
        </select></td>

    <td><div class="sizeisi"><a href="" >Mengapa saya harus memberikan tanggal lahir saya?</a></div></td>
</tr>

<tr>
    <td>
        <input type="radio">Perempuan</input>
        <input type="radio">Laki - laki</input>
    </td>
</tr>

<tr>
    <td colspan="2" width="100"><div class="sizeisi">Dengan mengeklik Mendaftar, Anda menyetujui <a href="">Ketentuan</a> kami dan bahwa Anda telah membaca <a href="">Kebijakan Data</a> kami, termasuk <a href="">Penggunaan Kuki</a>.</div></td>
</tr>

<tr>
    <td ><input type="submit" value="Mendaftar" class="mendaftar" size="300"/></td>
</tr>
</table>
</div>

<hr />
<br />
<b><a href="">Buat halaman </a>untuk selebriti, grup musik, atau bisnis.</b>
</div>

<div class="foot">
    <div class="link">
    <a href="">Bahasa Indonesia</a>
    <a href="">English (US)</a>
    <a href="">Español</a>
    <a href="">Português (Brasil)</a>
    <a href="">Français (France)</a>
    <a href="">Deutsch</a>
    <a href="">Italiano</a>
    </div>
    <div class="link2">
    <table>
    <tr>
        <td><a href="">Mendaftar</a></td>    <td><a href="">Lencana</a></td>
        <td><a href="">Masuk</a></td>    <td><a href="">Halaman</a></td>
        <td><a href="">Messenger</a></td>    <td><a href="">Tempat</a></td>
        <td><a href="">Seluer</a></td>    <td><a href="">Permainan</a></td>
        <td><a href="">Cari Teman</a></td>
    </tr>
    <tr>
        <td><a href="Lokasi"></a></td>    <td><a href="">Karier</a></td>
        <td><a href="">Tentang</a></td>    <td><a href="">Privasi</a></td>
        <td><a href="">Buat Iklan</a></td>    <td><a href="">Ketentuan</a></td>
        <td><a href="">Buat Halaman</a></td>    <td><a href="">Bantuan</a></td>
        <td><a href="">Pengembang</a></td>
    </tr>
    </table>
    </div>
    <div class="copy">
    <br />
        Facebook © 2015 · <a href="">Bahasa Indonesia</a>
    </div>
</div>

</body>
</html>

Dan Hasilnya :

Membuat Formulir Sederhana Menggunakan Notepad++

ElfanRodh 4/20/2015 07:37:00 AM Add Comment

ElfanRodh

Pertama-tama Copy Script dibawah :
<html>
<head>

    <title>Formulir Daftar Isian Peserta</title>
</head>

<body>
<table border="0">
<tr colspan="3" align="center">
    <td width="150"> </td>
    <td width="800"><h4>FORMULIR DAFTAR ISIAN PESERTA <br />
    PEKERJA BUKAN PENERIMA UPAH DAN BUKAN PEKERJA<br />
    BADAN PENYELENGGARA JAMINAN SOSIAL KESEHATAN</h4></td>
    <td width="150"> </td>
</tr>
</table>
<hr color="black"/>
<table border="0">
<tr>
    <td align="left" width="550"><b>Nomor Register Badan Penyelenggara Jaminan Sosial Kesehatan</b><br />
    (diisi oleh petugas BPJS-Kesehatan)</td>
    <td width="550">
    <form>
    <input type="text" name="noregister" size="50"/>
    </form>
    </td>
    <td></td>
</tr>
</table>
<table border="0">
<tr>
    <td width="380">Petugas Verivikasi :</td>
    <td width="380">Tanggal Verivikasi :</td>
    <td width="380">Petugas Entry :</td>
</tr>
<tr>
    <td colspan="3" align="center">DIISI CALON PESERTA</td>
</tr>
</table>
<table border="0">
<tr>
    <td width="300">
    <b>Pekerja Bukan Penerima Upah</b><br />
    <input type="checkbox" name="PBPU">Pekerja Mandiri</input><br />
    <input type="checkbox" name="...">...............</input>
    </td>

    <td width="150">
    <b>Bukan Pekerja</b><br />
    <input type="checkbox" name="inves">Investor</input><br />
    <input type="checkbox" name="pemberi">Pemberi Kerja</input><br />
    </td>

    <td width="250">
    <br />
    <input type="checkbox" name="PPS">Penerima Pensiun Swasta</input><br />
    <input type="checkbox" name="....">...............</input>
    </td>

    <td width="410">
    Pembayaran Iuran Jaminan Kesehatan melalui rekening :<br />
    <input type="checkbox"/>Mandiri</input>
    <input type="checkbox"/>BRI</input>
    <br />
    <input type="checkbox"/>BNI</input>
    <input type="checkbox"/>Lainnya.......</input>
    </td>
</tr>
</table>

<table border="0">
<tr>
<td colspan="6" align="left" bgcolor="brown"><b>I. IDENTITAS PESERTA</b></td>
</tr>

<tr>
    <td colspan="6" align="right">Verifikasi</td>
</tr>
<tr>
    <td>1 Nomor Kartu Keluarga</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>2 NIK/ KITAS/ KITAP</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>3 Nama Lengkap</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>4 Tempat dan Tanggal Lahir</td>
    <td>
    <input type="text" size="40"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>5 Jenis Kelamin</td>
    <td colspan="4">
    <input type="text" size="1"/>1=Laki-laki; 2=Perempuan
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>6 Status Pernikahan</td>
    <td colspan="4">
    <input type="text" size="1"/>1=Kawin; 2=Belum Kawin; 3=Janda; 4=Duda;
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>7 Alamat tempat tinggal</td>
    <td colspan="2">
    <input type="text" size="40"/>
    </td>
    <td>RT
    <input type="text" size="3"/>
    </td>
    <td>RW
    <input type="text" size="3"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td align="right">Desa/ Kelurahan</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td align="right">Kecamatan</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td align="right">Kabupaten/ Kota</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Pos
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>8 Nomor Telpon</td>
    <td>
    <input type="text" size="10"/>
    </td>
    <td>-
    <input type="text" size="35"/>
    </td>
    <td colspan="2">No HP
    <input type="text" size="35"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>9 Kewarganegaraan</td>
    <td>
    <input type="text" size="1"/>1=WNI; 2=WNA
    </td>
    <td colspan="3">Kebangsaan
    <input type="text" size="40"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>10 Jumlah Iuran yang dibayar</td>
    <td colspan="2">Rp
    <input type="text" size="1"/>
    </td>
    <td colspan="2">Kelas Rawat
    <input type="text" size="1"/>1.Kelas I, 2.Kelas II, 3 Kelas III
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>11 Nomor Passport</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>12 No. Polis Asuransi Kesehatan *)</td>
    <td colspan="4">
    <input type="text" size="80"/>(isi jika memiliki polis asuransi kesehatan lainnya)
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>13 No. NPWP</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>14 Alamat E-mail</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>15 Nama Faskes Tingkat Pertama</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Faskes
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>16 Nama Faskes Dokter Gigi</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Faskes
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
</table>

<table border="0">
<tr>
<td colspan="6" align="left" bgcolor="brown"><b>II. IDENTITAS SUAMI-ISTERI</b></td>
</tr>

<tr>
    <td colspan="6" align="right" width="1130">Verifikasi</td>
</tr>
<tr>
    <td>1 Nomor Kartu Keluarga</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>2 NIK/ KITAS/ KITAP</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>3 Nama Lengkap</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>4 Tempat dan Tanggal Lahir</td>
    <td>
    <input type="text" size="40"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>5 Jenis Kelamin</td>
    <td colspan="3">
    <input type="text" size="1"/>1=Laki-laki; 2=Perempuan
    </td>
    <td>NPWP
    <input type="text" size="50"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>

<tr>
    <td>5 Jumlah Iuran yang dibayar</td>
    <td colspan="2">Rp
    <input type="text" size="1"/>
    </td>
    <td colspan="2">Kelas Rawat
    <input type="text" size="1"/>1.Kelas I, 2.Kelas II, 3 Kelas III
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>6 Nomor Passport</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>7 No. Polis Asuransi Kesehatan *)</td>
    <td colspan="4">
    <input type="text" size="80"/>(isi jika memiliki polis asuransi kesehatan lainnya)
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>8 Nama Perusahaan Asuransi</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>

<tr>
    <td>9 Nama Faskes Tingkat Pertama</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Faskes
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>10 Nama Faskes Dokter Gigi</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Faskes
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
</table>

<table border="0">
<tr>
<td colspan="6" align="left" bgcolor="brown"><b>III. IDENTITAS ANAK</b></td>
</tr>

<tr>
    <td colspan="6" align="right" width="1130">Verifikasi</td>
</tr>
<tr>
    <td>1 Nomor Kartu Keluarga</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>2 NIK/ KITAS/ KITAP</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>3 Nama Lengkap</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>4 Tempat dan Tanggal Lahir</td>
    <td>
    <input type="text" size="40"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>5 Jenis Kelamin</td>
    <td colspan="3">
    <input type="text" size="1"/>1=Laki-laki; 2=Perempuan
    </td>
    <td>NPWP
    <input type="text" size="50"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>

<tr>
    <td>5 Jumlah Iuran yang dibayar</td>
    <td colspan="2">Rp
    <input type="text" size="1"/>
    </td>
    <td colspan="2">Kelas Rawat
    <input type="text" size="1"/>1.Kelas I, 2.Kelas II, 3 Kelas III
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>6 Nomor Passport</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>7 No. Polis Asuransi Kesehatan *)</td>
    <td colspan="4">
    <input type="text" size="80"/>(isi jika memiliki polis asuransi kesehatan lainnya)
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>8 Nama Perusahaan Asuransi</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>

<tr>
    <td>9 Nama Faskes Tingkat Pertama</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Faskes
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>10 Nama Faskes Dokter Gigi</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Faskes
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
</table>

<table border="0">
<tr>
<td colspan="6" align="left" bgcolor="brown">.</td>
</tr>

<tr>
    <td colspan="6" align="left" width="1130">Anak Kedua</td>
</tr>
<tr>
    <td>1 Nomor Kartu Keluarga</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>2 NIK/ KITAS/ KITAP</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>3 Nama Lengkap</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>4 Tempat dan Tanggal Lahir</td>
    <td>
    <input type="text" size="40"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>5 Jenis Kelamin</td>
    <td colspan="3">
    <input type="text" size="1"/>1=Laki-laki; 2=Perempuan
    </td>
    <td>NPWP
    <input type="text" size="50"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>

<tr>
    <td>5 Jumlah Iuran yang dibayar</td>
    <td colspan="2">Rp
    <input type="text" size="1"/>
    </td>
    <td colspan="2">Kelas Rawat
    <input type="text" size="1"/>1.Kelas I, 2.Kelas II, 3 Kelas III
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>6 Nomor Passport</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>7 No. Polis Asuransi Kesehatan *)</td>
    <td colspan="4">
    <input type="text" size="80"/>(isi jika memiliki polis asuransi kesehatan lainnya)
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>8 Nama Perusahaan Asuransi</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>

<tr>
    <td>9 Nama Faskes Tingkat Pertama</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Faskes
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>10 Nama Faskes Dokter Gigi</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Faskes
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
</table>

<table border="0">
<tr>
<td colspan="6" align="left" bgcolor="brown">.</td>
</tr>

<tr>
    <td colspan="6" align="left" width="1130">Anak Ketiga</td>
</tr>
<tr>
    <td>1 Nomor Kartu Keluarga</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>2 NIK/ KITAS/ KITAP</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>3 Nama Lengkap</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>4 Tempat dan Tanggal Lahir</td>
    <td>
    <input type="text" size="40"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td>-
    <input type="text" size="3"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>5 Jenis Kelamin</td>
    <td colspan="3">
    <input type="text" size="1"/>1=Laki-laki; 2=Perempuan
    </td>
    <td>NPWP
    <input type="text" size="50"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>

<tr>
    <td>5 Jumlah Iuran yang dibayar</td>
    <td colspan="2">Rp
    <input type="text" size="1"/>
    </td>
    <td colspan="2">Kelas Rawat
    <input type="text" size="1"/>1.Kelas I, 2.Kelas II, 3 Kelas III
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>6 Nomor Passport</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>7 No. Polis Asuransi Kesehatan *)</td>
    <td colspan="4">
    <input type="text" size="80"/>(isi jika memiliki polis asuransi kesehatan lainnya)
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>8 Nama Perusahaan Asuransi</td>
    <td colspan="4">
    <input type="text" size="80"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>

<tr>
    <td>9 Nama Faskes Tingkat Pertama</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Faskes
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
<tr>
    <td>10 Nama Faskes Dokter Gigi</td>
    <td colspan="3">
    <input type="text" size="40"/>
    </td>
    <td>Kode Faskes
    <input type="text" size="15"/>
    </td>
    <td align="right" >
    <input type="text" size="5"/>
    </td>
</tr>
</table>

<hr color="black"/>

<table>
<tr>
    <td colspan="6"><b>Isilah dengan huruf kapital dan mudah dibaca</b><br />
    Yang bertandatangan dibawah ini bertanggungjawab secara hukum terhadap kebenaran data yang tercatum</td>
</tr>

<tr>
    <td align="center" bgcolor="orange"><br /><b>Foto<br>
    Peserta<br />
    Ukuran 3x4<br /></b><br />
    </td>

    <td align="center" bgcolor="orange"><br /><b>Foto<br>
    Suami/ Isteri<br />
    Ukuran 3x4<br /></b><br />
    </td>

    <td align="center" bgcolor="orange"><br /><b>Foto<br>
    Anak ke-1<br />
    Ukuran 3x4<br /></b><br />
    </td>

    <td align="center" bgcolor="orange"><br /><b>Foto<br>
    Anak ke-2<br />
    Ukuran 3x4<br /></b><br />
    </td>

    <td align="center" bgcolor="orange"><br /><b>Foto<br>
    Anak ke-3<br />
    Ukuran 3x4<br /></b><br />
    </td>

    <td align="center">
    ..............................., .................................... 2015<br />
    Tanda Tangan Peserta<br />
    <br />
    <br />
    <br />
    (..........................................................................)
    </td>
</tr>
</table>

</body>
</html>

Dan Hasilnya :

Membuat Tampilan Seperti Facebook dengan Notepad++

ElfanRodh 4/10/2015 01:26:00 AM Add Comment

ElfanRodh

Copy Script dibawah :

<html>
<head>

<style>

    #biru{
    background-color:#333399;
    color:#FFFFFF;
    font-size:12px;
    }
    #size{
    font-size:12px;
    }
    #arial{
    font-family:Arial, Helvetica, sans-serif
    }
    #hijau{
    background-color:#00CC66;
    size:landscape;
    color:#FFFFFF;
    }
</style>

    <title>Untitled 1</title>
</head>

<body id="arial">

<table border="1">

<tr>
    <td rowspan="4" id="biru"><pre>            </pre></td>
</tr>

<tr>
    <td rowspan="3" id="biru"></td>
    <td width="150" id="biru">Email atau telpon</td>
    <td colspan="2" id="biru">Kata Sandi</td>
    <td rowspan="3" id="biru"><pre>            </pre></td>
</tr>

<tr>
    <td id="biru">
    <form>
        <input type="text" size="40"/>
    </td>
    <td id="biru">
        <input type="password" size="32"/>
    </td id="biru">
    <td id="biru">
        <input type="submit" value="Masuk"/></td>
    </form>
    </td>
</tr>

<tr>
    <td id="biru">
        <input type="checkbox"/>Biarkan saya tetap masuk</td>
    <td colspan="2" id="biru">
        <a href="">Lupa kata sandi?</a></td>
</tr>
<br>
<br>
<tr>
    <td rowspan="13"></td>
    <td rowspan="2" fontstyle="bold" width="300"><h3>Facebook membantu Anda terhubung dan berbagi dengan orang-orang dalam kehidupan Anda.</h3></td>
    <td colspan="3"><h1>Mendaftar</h1></td>
    <td rowspan="13"></td>
</tr>

<tr>
    <td>Gratis, sampai kapanpun.</td>
</tr>

<tr>
    <td rowspan="10"><img src="pyNVUg5EM0j.png"></td>
</tr>

<tr>
    <td width="100">
    <form>
    <input type="text" placeholder="Nama Depan" name="namadepan" size="30"></input></td>
    <td width="100">
    <input type="text" placeholder="Nama Belakang" name="namabelakang" size="30"></input><br></td>

<tr>
    <td colspan="2">
    <input type="text" placeholder="E-mail atau nomor ponsel" name="email" size="69"></input></td>
</tr>

<tr>
    <td colspan="2">
    <input type="text" placeholder="Masukkan lagi e-mail atau nomor ponsel" name="masukkanemaillagi" size="69"></input></td>
</tr>

<tr>
    <td colspan="2">
    <input type="text" placeholder="Kata sandi baru" name="katasandi" size="69"></input></td>
</tr>

<tr>
    <td colspan="3">Tanggal Lahir</td>
</tr>

<tr>
    <td>
<select name="tanggallahir">
    <option value="">Tanggal</option>
    <option value="value">1</option>
    <option value="value">2</option>
    <option value="value">3</option>
    <option value="value">4</option>
    <option value="value">5</option>
    <option value="value">6</option>
    <option value="value">7</option>
    <option value="value">8</option>
    <option value="value">9</option>
    <option value="value">10</option>
    <option value="value">11</option>
    <option value="value">12</option>
    <option value="value">13</option>
    <option value="value">14</option>
    <option value="value">15</option>
    <option value="value">16</option>
    <option value="value">17</option>
    <option value="value">18</option>
    <option value="value">19</option>
    <option value="value">20</option>
    <option value="value">21</option>
    <option value="value">22</option>
    <option value="value">23</option>
    <option value="value">24</option>
    <option value="value">25</option>
    <option value="value">26</option>
    <option value="value">27</option>
    <option value="value">28</option>
    <option value="value">29</option>
    <option value="value">30</option>
    <option value="value">31</option>
</select>

<select name="bulan">
    <option value="">Bulan</option>
    <option value="value">Januari</option>
    <option value="value">Februari</option>
    <option value="value">Maret</option>
    <option value="value">April</option>
    <option value="value">Mei</option>
    <option value="value">Juni</option>
    <option value="value">Juli</option>
    <option value="value">Agustus</option>
    <option value="value">September</option>
    <option value="value">Oktober</option>
    <option value="value">November</option>
    <option value="value">Desember</option>
</select>

<select name="tahun">
    <option value="">Tahun</option>
    <option value="value">2015</option>
    <option value="value">2014</option>
    <option value="value">2013</option>
    <option value="value">2012</option>
    <option value="value">2011</option>
    <option value="value">2010</option>
    <option value="value">2009</option>
    <option value="value">2008</option>
    <option value="value">2007</option>
    <option value="value">2006</option>
    <option value="value">2005</option>
    <option value="value">2004</option>
    <option value="value">2003</option>
    <option value="value">2002</option>
    <option value="value">2001</option>
    <option value="value">2000</option>
    <option value="value">1999</option>
    <option value="value">1998</option>
    <option value="value">1997</option>
    <option value="value">1996</option>
    <option value="value">1995</option>
    <option value="value">1994</option>
    <option value="value">1993</option>
    <option value="value">1992</option>
    <option value="value">1991</option>
    <option value="value">1990</option>
</select></td>
    <td id="size"><a href="" >Mengapa saya harus memberikan tanggal lahir saya?</a></td>
</tr>

<tr>
    <td>
<input type="radio">Perempuan</input>
<input type="radio">Laki - laki</input>
    </td>
</tr>

<tr>
    <td colspan="2" width="100" id="size">Dengan mengeklik Mendaftar, Anda menyetujui <a href="">Ketentuan</a> kami dan bahwa Anda telah membaca <a href="">Kebijakan Data</a> kami, termasuk <a href="">Penggunaan Kuki</a>.</td>
</tr>

<tr>
    <td ><input type="submit" id="hijau" value="Mendaftar"/></td>
</tr>
</form>
</table>
</body>
</html>

Dan Hasilnya :

Cara Membuat Tabel dan Link di Web

ElfanRodh 4/02/2015 02:14:00 AM Add Comment

ElfanRodh

Setelah Sebelumnya kita belajar tentang membuat Web Sederhana, kali ini saya akan menjelaskan sedikit tentang cara membuat tabel dan menghubungkan dengan link di halaman Web. Berikut adalah scriptnya :

1. Tabel Pertama ("Beri Nama TABEL 1.htm")

<!DOCTYPE HTML>

<html>

<head>

<title>TABEL TEKA TEKI 1-a</title>

</head>

<body>

<caption>Data Kuliah</caption>

<tr>

<th rowspan=2 width="150">KELAS</th>

<th colspan=2 width="150">KETERANGAN</th>

</tr>

<tr>

<th width="75">LULUS</th>

<th width="75">TIDAK LULUS</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Dan ini adalah Hasilnya

2. Tabel Kedua (Beri Nama "TABEL 2.htm")

<!DOCTYPE HTML>

<html>

<head>

<title>TABEL TEKA TEKI 1-b</title>

</head>

<body>

<table>

<tr>

<th bgcolor=#b8cce4 colspan=7><br>PROVINSI JAWA TIMUR <br/>KOTA SURABAYA<br /><br /></th>

</tr>

<tr>

</tr>

<tr>

<th align="left" colspan=4>Gubernur Suryo</th>

</tr>

<tr>

<td>Tempat/Tanggal Lahir</td>

<th align="left" colspan=2>Surabaya, 11 Maret 1990</th>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td>Gol Darah :</td>

</tr>

<tr>

<td>Alamat</td>

<th align="left">Jl. Pemuda</th>

</tr>

<tr>

</tr>

<tr>

<th align="left">Rungkut</th>

</tr>

<tr>

<td>Kecamatan</td>

<th align="left">Rungkut</th>

</tr>

<tr>

<td>Agama</td>

<th align="left" colspan="2">Rungkut</th>

<td>Status :</td>

</tr>

<tr>

<td>Pekerjaan</td>

<th align="left" colspan="2">Pelajar / Mahasiswa</th>

</tr>

<tr>

<td>Berlaku hingga</td>

<th align="left" colspan="2">11 Maret 2014</th>

</tr>

<tr>

<td>Kewarganegaraan</td>

</tr>

<tr>

<td bgcolor=#91d250 colspan=7 ><br/>Syarat pengambilan KTP :

<ol>

<li>Membawa pas foto ukuran 3x4 berwarna</li>

<li>Membawa KTP lama</li>

<li>Membawa Kartu Keluarga</li>

</ol>

</td>

</tr>

</table>

</body>

</html>

Dan ini adalah Hasilnya

Kemudian Hubungkan Kedua Tabel menggunakan Link, Caranya :

Ketik script berikut di Halaman "TABEL 1.htm" dibawah script </table>

<br/>

<a href="TABEL 2.htm">Menuju Tabel 2</a>

Kemudian ketik script berikut di "TABEL 2.htm" dibawah script </table>
</br>
<a href="TABEL 1.htm">Menuju Tabel 2</a>

Dan Hasilnya

Demikian Sekilas Cara Membuat Tabel dan Link di Web