Tuesday 22 February 2011

Tugas Praktikum 3 - Buat Tampilan Facebook

2/22/2011 08:23:00 am  Ignored Zone  2 comments

Tugas Praktikum 3 - Buat Tampilan Facebook
Eko Fahrudi Silviawan
100533406929
S1 PTI

Klik gambar di atas untuk memperbesar ukuran

Di sini CSS saya masukkan dengan metode embedded CSS. Untuk pengaturan letak content memakai tag <div> dan tidak memakai tag <table> sama sekali..

Download source code

Source Code

<!DOCTYPE html>
<html lang="id">
<head>
<title>Selamat Datang di Face-mu - Masuk, Daftar, atau Pelajari Selengkapnya</title>
<link rel="shortcut icon" href="images/icon.png">
<!-- CSS tak buwat embedded aja lah -->
<style type="text/css">
<!--
body{
    font-family:Arial;
    font-size:11px;
    color:#333;
    margin:0;
    padding:0;
    text-align:left;
    overflow-y:scroll
}
.body-tab{
    margin:0 auto 0 auto;
    width:950px;
}
.stBack {
    background-image:url(images/bg.jpg);
    width: 100%;
    height: 500px;
}
.stHeader {
    width:950px;
    height:75px;
}
.stHeaderBack {
    width:100%;
    height:75px;
    background-color: #3B5998;
}
.stFooter {
    clear:both;
    width:100%;
    height:20px;
    background-color: #3B5998;
   
}
.stFooter .font-tab{
    padding-top:2px;
    color:#FFFFFF;
    font-family:Arial;
    font-size:11px;
    padding-left: 15px;
}
.stLogo {
    width:250px;
    margin-top: 25px;
    float:left;
}
.stLogin {
    margin-top:10px;
    width:420px;
    float:right;
}
.stCenter {
    width:950px;
    height:425px;
}
.stLabelInputDaftar {
    height:27px;
    font-family:Arial;
    font-size:12px;
    color:#3B5998;
    padding-top:7px;
}
.stLabelInputDaftarNoPadding {
    height:34px;
    font-family:Arial;
    font-size:12px;
    color:#3B5998;
}
.stTxtLogin {
    width:150px;
    border:1px solid black;
}
.stTxtDaftar {
    width:200px;
    height:24px;
    border:1px solid #6483C4;
}
.stSelDaftar {
    border:1px solid #6483C4;
}
.stBtn {
    border:1px solid #999;
    border-bottom-color:#888;
    box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow:0 1px 0 rgba(0, 0, 0, .1);
    cursor:pointer;
    display:-moz-inline-box;
    display:inline-block;
    font-size:11px;
    font-weight:normal;
    line-height:normal !important;
    padding:2px 6px;
    text-align:center;
    text-decoration:none;
    color:#FFFFFF;
    vertical-align:top;
    white-space:nowrap;
    /* jelek banget tauk kalo buttonnya dibuat punya border ber-radius.. hiekssss...
    -moz-border-radius:5px; */
}
.bt1{
    background-color:#6483C4;
    background-position:0 -96px;
    border-color:#CCCCCC #6483C4 #6483C4 #CCCCCC;
}
.bt2{
    background-color:#69a74e;
    background-position:0 -96px;
    border-color:#3b6e22 #3b6e22 #2c5115;
    width:150px;
    height:26px;
    font-weight:bold
}
.ftHeader{
    color:#FFFFFF;
    font-family:Arial;
    font-size:12px;
}
.ftHeaderSmall{
    color:#FFFFFF;
    font-family:Arial;
    font-size:9px;
}
.ftHome1 {
    font-family: Arial;
    font-size: 26px;
    font-weight: bold;
    color: #3B5998;
}
.ftHome2 {
    font-family: Arial;
    font-size: 15px;
    color: #3B5998;
}
.ftHome3 {
    height: 37px;
    font-family: Arial;
    font-size: 10px;
    color: #3B5998;
}
.ftHome4 {
    color: #000000;
    font-family: Arial;
    font-size: 10px;
}
.ftHome5 {
    font-size: 18px
}


-->
</style>
</head>


<body>
<div class="stBack">
<div class="stHeaderBack">
<div class="body-tab">


<!-- awal kode header yg berisi logo + tempat buwat login -->
<div class="stHeader">
<div class="stLogo"><img src="images/facemu.png" alt="face-mu" width="151" height="34" /></div>
<div class="stLogin">
<div style="width:170px; float:left">
<div style="height:15px" class="ftHeader">Email:</div>
<div><input type="text" class="stTxtLogin" id="txtUserId" tabindex="1" />
</div>
<div style="height:20px; padding-top:3px; float:left"><input type="checkbox" id="chboxStayLoggedIn" checked="checked" tabindex="3" /></div>
<div style="padding-top:4px"><span class="ftHeaderSmall">Biarkan saya tetap masuk</span> </div>
</div>
<div style="float:left; width:170px">
<div style="height:15px" class="ftHeader">Password:</div>
<div><input type="password" class="stTxtLogin" id="txtUserPass" tabindex="2" />
</div>
<div style="padding-top:4px"><a href="#" style="text-decoration:none"><span class="ftHeaderSmall">Lupa kata sandi Anda?</span></a></div>
</div>
<div style="float:left">
<div style="height:15px"></div>
<div>
  <input type="button" class="stBtn bt1" id="btnLogin" tabindex="4" value="Masuk"  />
</div>
</div>
</div>
</div>
<!-- akhir kode header -->


<!-- awal kode center section -->
<div class="stCenter">
<div style="width:550px; height:425px; float:left">
  <br />
  <p class="ftHome2 ftHome5"><strong>Face-mu membantu Anda terhubung dan berbagi<br />
    dengan orang-orang dalam kehidupan Anda di<br />
    Indonesia    </strong></p>
  <p><img src="images/pulau.png" width="474" height="195" /></p>
</div>
<!-- form daftar -->
<div style="width:335px; height:425px; float:left">
<br />
<span class="ftHome1">Mendaftar</span><br />
<span class="ftHome2">Gratis, sampai kapanpun</span>
<hr style="color:#3B5998" />
<div style="width:120px; float:left">
<div class="stLabelInputDaftar">Nama Depan</div>
<div class="stLabelInputDaftar">Nama Belakang</div>
<div class="stLabelInputDaftar">Email Anda</div>
<div class="stLabelInputDaftarNoPadding">Masukkan Ulang Email</div>
<div class="stLabelInputDaftar">Kata Sandi</div>
<div class="stLabelInputDaftar">Saya Seorang</div>
<div class="stLabelInputDaftar">Tanggal Lahir</div>
</div>
<div style="width:10px; float:left">
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
</div>
<div style="width:200px; float:left">
<div class="stLabelInputDaftarNoPadding">
  <input type="text" id="txtNamaDepan" class="stTxtDaftar" />
</div>
<div class="stLabelInputDaftarNoPadding">
  <input type="text" class="stTxtDaftar" id="txtNamaBelakang" />
</div>
<div class="stLabelInputDaftarNoPadding">
  <input type="text" class="stTxtDaftar" id="txtEmail" />
</div>
<div class="stLabelInputDaftarNoPadding">
  <input type="text" class="stTxtDaftar" id="txtReEmail" />
</div>
<div class="stLabelInputDaftarNoPadding">
  <input type="password" class="stTxtDaftar" id="txtPassword" />
</div>
<div class="stLabelInputDaftar">
  <span class="stLabelInputDaftarNoPadding">
  <select class="stSelDaftar" id="selJeKel" >
    <option>Jenis Kelamin</option>
  </select>
  </span></div>
<div>
  <select class="stSelDaftar" id="selTglLahir" >
    <option>Tgl</option>
  </select>
  <select class="stSelDaftar" id="selBlnLahir" >
    <option>Bulan</option>
  </select>
  <select class="stSelDaftar" id="selThnLahir" >
    <option>Tahun</option>
  </select>
  <br />
  <a href="#" style="text-decoration:none"><span class="ftHome3">Mengapa saya perlu mengisinya?</span></a> </div>
</div>
<div style="clear:both; text-align:center; padding-top:3px"><input type="button" class="stBtn bt2" id="btnDaftar" value="   Mendaftar   "  />
  <hr style="color:#3B5998" />
  <a href="#" style="text-decoration:none"><strong class="ftHome3">Buat halaman</strong></a> <strong class="ftHome4">untuk selebritis, grup musik, atau bisnis</strong></div>
</div>
<!-- akhir kode form daftar -->
</div>
<!-- akhir kode center section -->


</div>
</div>
<div style="height:425px">
</div>


<!-- awal kode footer -->
<div class="stFooter"><div class="font-tab">Tugas ngeblat tampilan facebook &copy; 2011 - Eko fahrudi silviawan</div></div>
<!-- akhir kode footer -->


</div>
</body>
</html>

Posted in:

2 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More