Elfan Go Blog .COM: May 2015

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

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 :

Elfan Go Blog .COM

Belajar Bootstrap Pemula

Membuat Halaman Login Facebook menggunakan CSS