Selasa, 15 Februari 2011

Tugas Praktikum Modul 3

<!DOCTYPE html
public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">

<head>
    <title>Selamat Datang di Face-mu - Masuk, Daftar, atau Pelajari Selengkapnya</title>
    <link rel="shortcut icon" href="icon.png"/>
    <style type="text/css">
<!--
    .atas{
    background-color:RoyalBlue;
    padding: 15px;
    height: 50px;
    }
    .tengah{
    background-image:url(bg.jpg);
    padding: 15px;
    height: 450px;
    }
    .bawah{
    background-color:RoyalBlue;
    padding: 15px;
    height: 15px;
    }
    .font1{
    font-family: Arial;
    color: RoyalBlue;
    }
    .font2{
    font-family: Arial;
    color: RoyalBlue;
    font-size: 12px;
    }
    .font3{
    font-family: Arial;
    font-size: 11px;
    color: RoyalBlue;
    font-weight: bold;
    }
    .font4{
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    }
    .font5{
    font-family: Arial;
    font-size: 9px;
    color: RoyalBlue;
    font-weight: bold;
    }
    .font6{
    font-family: Arial;
    color: White;
    font-size: 12px;
    }
    .font7{
    font-family: Arial;
    color: White;
    font-size: 11px;
    }
    .button-daftar{
    -moz-border-radius-topleft:5px 5px;
    -moz-border-radius-topright:5px 5px;
    -moz-border-radius-bottomleft:5px 5px;
    -moz-border-radius-bottomright:5px 5px;
    -webkit-border-radius-topleft:5px 5px;
    -webkit-border-radius-topright:5px 5px;
    -webkit-border-radius-bottomleft:5px 5px;
    -webkit-border-radius-bottomright:5px 5px;
    -chrome-border-radius-topleft:5px 5px;
    -chrome-border-radius-topright:5px 5px;
    -chrome-border-radius-bottomleft:5px 5px;
    -chrome-border-radius-bottomright:5px 5px;
    background-color: RoyalBlue;
    border: 1px solid white;
    padding: 0px;
    width: 100px;
    height:25px;
    font-family: Arial;
    color: White;
    font-size: 12px;
    font-weight: bold;
    }
    .button-masuk{
    -moz-border-radius-topleft:5px 5px;
    -moz-border-radius-topright:5px 5px;
    -moz-border-radius-bottomleft:5px 5px;
    -moz-border-radius-bottomright:5px 5px;
    -webkit-border-radius-topleft:5px 5px;
    -webkit-border-radius-topright:5px 5px;
    -webkit-border-radius-bottomleft:5px 5px;
    -webkit-border-radius-bottomright:5px 5px;
    -chrome-border-radius-topleft:5px 5px;
    -chrome-border-radius-topright:5px 5px;
    -chrome-border-radius-bottomleft:5px 5px;
    -chrome-border-radius-bottomright:5px 5px;
    background-color: RoyalBlue;
    border: 1px solid white;
    padding: 0px;
    width: 50px;
    height:20px;
    font-family: Arial;
    color: White;
    font-size: 11px;
    font-weight: bold;
    }
-->
</style>

</head>
<body>

<div class="atas">
    <img src="facemu.png" align="left"/>
    <form action="" method="post">
    <table border=0 align="right">
    <tr>
        <td><span class="font6">E-mail :</span></td>
        <td>
        <span class="font6">Password :</span></td>
        <tr><td>
        <input type="text"/>
        </td>
        <td>
        <input type="text"/>
        </td>
        <td><input type="submit" value="Masuk"
        class="button-masuk"/></td>
        </tr>
    </tr>
    <tr>
        <td>
        <input type="checkbox">
        <span class="font7">Biarkan saya tetap masuk</span>
        </td>
        <td>
        <span class="font7"><u>Lupa kata sandi Anda?</u></span>
        </td>
    </tr>
    </table>
</div>

<div class="tengah">
Face-mu membantu Anda terhubung dan berbagi dengan orang-orang dalam kehidupan Anda di Indonesia.
<p>
<p>
<p>

  
    <img src="fbq.jpg" align="left"/>
    <h1><span class="font1">Mendaftar</span></h1>
    <span class="font1">Gratis, sampai kapanpun</span>
    <hr align="left" width="310" color="RoyalBlue"/>
    <form action="" method="post">
    <table border=0>
    <tr>
        <td><span class="font2">Nama Depan</span></span></td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td><span class="font2">Nama Belakang</span></td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td><span class="font2">E-mail Anda</span></td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td><span class="font2">Masukkan Ulang E-mail
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span></td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td><span class="font2">Kata Sandi Baru</span></td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td><span class="font2">Saya Seorang</span></td>
        <td>
        <select name="Jenis Kelamin"/>
        </td>
    </tr>
    <tr>
        <td><span class="font2">Tanggal Lahir</span></td>
        <td>
        <select name="Tanggal"/>
        </select>
        <select name="Bulan"/>
        </select>
        <select name="Tahun"/>
        </select>
        </td>
    </tr>
    <tr>
    <td><td>
        <span class="font5">Mengapa saya perlu mengisinya?
        </span></td></td>
    </tr>
    <tr>
        <td><td>
        <input type="submit" value="Mendaftar" class="button-daftar"/>
        </td>
    </tr>
    </table>
    <hr align="left" width="310" color="RoyalBlue"/>
    <tr align="centre"><span class="font3">Buat halaman</span>
    <span class="font4">untuk selebritis, grup musik, atau bisnis
    </span></tr>
</div>


<div class="bawah">
    <span class="font6">
    Face-mu &copy 2011 - NoeBunga*Hindriyani
    </span>
</div>

</body>
</html>

Tidak ada komentar:

Posting Komentar