Oleh: awaludinfajari | Agustus 14, 2011

Latihan 2 : Membuat layout Facebook

Buat file style.css kemudian ketikan sintaks di bawah ini

body{
    margin:0;
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
}
#head{
    height:80px;
    background:#3b5998;
    padding-top:2px;
    position:static;
}
.login{
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    color:ffffff;
}
.submit{
    color:ffffff;
    background:#5972a8;
    border:1px solid #5c6f97;
    height:22px;
    font-weight:bold;
}
.submit2{
    color:ffffff;
    background:#16b840;
    border:1px solid #096822;
    height:35px;
    font-size:14px;
    font-weight:bold;
    width:150px;
}
.foot{
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    color:#7f9cdc;
}
.fontMain{
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 18px;
    color:#0e385f;
    line-height:1.5;
    font-weight:bold;
}
.input{
    height:35px;
}
.font{
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 12px;
    color:#0e385f;
}
.table{
    padding:10px;
}
#main{
    min-height:200px;
    background:#e7eaf3;
    position:relative;
}
#footer{
    clear:both;
    height:40px;
    background:#feffff;
    width:96%;
    margin-right: auto;
    margin-left: auto;
    }

Seteleh itu buat file index.html kemudian ketikan sintaks di bawah ini

Catatan : untuk gambar facebook dan peta jaringan di printscreen dari websitenya aja.

<html>
<head><title>:Desain Layout:</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div id="head">

    <div align="center"><table width="980" >
    <tr>
        <td height="20"></td>
        <td></td>
        <td rowspan="2"valign="top">
        <tablewidth="100%">
            <tr >
                <td width="50%">E-mail</td>
                <td width="40%">Kata Sandi</td>
                <td width="10%"></td>
            </tr>
            <tr >
                <td><input type="text"></td>
                <td><input type="password"></td>
                <td>
                <input type="submit"name="submit"value="Masuk"class="submit">
                </td>
            </tr>
            <tr>
                <td valign="top">
                 <table><tr><td><input type="checkbox" name="izinkan">
                 </td><td>Biarkan saya tetap masuk</td></tr></table</td>
                <td>&nbsp;Lupa Kata Sandi ?</td>
                <td></td>
            </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td width="30%"valign="center">&nbsp;&nbsp;&nbsp;<img src="fb.png">
        </td>
        <td width="29%"></td>
    </tr>
    </table>
    </div>
    </div>
    <div id="main">
    <br>
    <br>
    <div align="center"><table width="982px">
    <tr>
        <tr>
            <td width="60%"valign="top">
            <div>Facebook membantu Anda terhubung dan <br>
            berbagi dengan orang-orang <br>
            dalam kehidupan Anda.<br></div></h3>
            <br>
            <img src="1.jpg">
            </td>
            <td width="40%"valign="top">
                 <div>Mendaftar</div>
                 Gratis, Sampai kapan pun.
                <hr width="98%"color="#5a95cc"size="1"></hr>
                <table>
                <tr>
                    <td align="right" width="30%">Nama Depan :</td>
                    <td>
                    <input type="input"name="input"class="input"size="38"maxlength="30">
                    </td>
                </tr>
                <tr>
                    <td align="right">Nama Depan :</td>
                    <td>
                    <input type="input"name="input"class="input"size="38"maxlength="30">
                    </td>
                </tr>
                <tr>
                    <td align="right">Nama Depan :</td>
                    <td>
                    <input type="input"name="input"class="input"size="38"maxlength="30">
                    </td>
                </tr>
                <tr>
                    <td align="right">Nama Depan :</td>
                    <td>
                    <input type="input"name="input"class="input"size="38"maxlength="30">
                    </td>
                </tr>
                <tr>
                    <td align="right">Nama Depan :</td>
                    <td>
                    <input type="input"name="input"class="input"size="38"maxlength="30">
                    </td>
                </tr>
                <tr>
                    <td align="right">Nama Depan :</td>
                    <td>
                    <input type="input"name="input"class="input"size="38"maxlength="30">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                    <input type="submit"name="submit"value="Mendaftar"class="submit2">
                    </td>
                <tr>
                </table>
            </td>
        </tr>
    </tr>
    </table>
    <br>
    </div>
    </div>
    <div id="footer">
    <br>
    <hr width="100%"size="2">
    <div>&copy Asep Awaludin fajari 2011 · Bahasa Indonesia</div>
    </hr>
    </div>
</body>
</html>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Kategori

%d blogger menyukai ini: