3

3.
Membuat Layout Halaman Login Facebook
Sekarang kita masuk pada point utama dalam pembahasan kita, yaitu menyusun layout
dengan menggunakan TAG DIV.
<html>
<head>
<title>Membuat Design Halaman Depan Facebook</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>

<div id="header">
<div id="logo">
<img src="images/logo.png"/>
</div>
<div id="login">
<table>
<tr><td>Email or Phone</td><td
colspan="2">Password</td></tr>
<tr>
<td><input type="text"
class="text"/></td><td ><input type="password" class="text"/></td>
<td><input type="submit" value="Log
In"/></td>
</tr>
<tr><td><input type="checkbox"> Keep me logged
in</td><td colspan="2">Forgot your password ?</td></tr>
</table>
</div>
</div>

<div id="content">
<div id="wrapper">
<div id="mobile">
<img src="images/mobile.png"/> <br/>
<h2>Chat for free and reduced rates with Facebook
Messenger</h2>
<ul>
<li>Create group chats or message just one
friend</li>
<li>Bring conversations to life with photos,
emoticons and more</li>
<li>See who's available and message them
instantly on their phone or computer</li>
</ul>
<input type="submit" class="button_mobile"
value=" "/>
</div>
<div id="register">
<h1>Sign Up</h1>
<p>It's free and always will be.</p>
<input type="text" class="reg" size="20"
placeholder="First Name">
placeholder="Last Name"> <br/><br/>
placeholder="Your Email"><br/><br/>
placeholder="Re-enter Email"><br/><br/>
placeholder="New Password"><br/>
<p>Birthday</p>
<select><option>Month</option></select>
<select><option>Day</option></select>
<select><option>Year</option></select>
<span style="font:normal 10px Tahoma,Verdana;">
<a href="">Why do i need to provide my
birthday?</a>
</span><br/><br/>
<input type="radio" name="radio"> Female
<input type="radio" name="radio"> Male
<br/><br/>
<p>By clicking Sign Up, you agree to our <a
href="">Terms</a> and that you have read our
<a href="">Data Use Policy</a>, including our <a
href="">Cookie Use</a>.</p>
<input type="submit" class="login" value=" "/>
</div>
<div id="clear"> </div>
</div>
</div>

<div id="footer">
<div id="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 id="link2">
<table>
<tr>
<td><a href="">Mobile</a></td> <td><a href="">Find
Friends</a></td>
<td><a href="">Badges</a></td> <td><a
href="">People</a></td>
<td><a href="">Pages</a></td> <td><a
href="">Places</a></td>
<td><a href="">Apps</a></td> <td><a href="">Games</a></td>
<td><a href="">Music</a></td>
</tr>
<tr>
<td><a href="">About</a></td> <td><a href="">Create
Ad</a></td>
<td><a href="">Create Page</a></td> <td><a
href="">Developers</a></td>
<td><a href="">Careers</a></td> <td><a
href="">Privacy</a></td>
<td><a href="">Cookies</a></td> <td><a
href="">Terms</a></td>
<td><a href="">Help</a></td>
</tr>
</table>
</div>
<div id="copy">
Facebook © 2013 · <a href="">English (US)</a>
</div>
</div>
</body>
</html>
Ternyata kodenya cukup banyak ya ... ? Jangan ill feel dengan kode HTML, dalam mwmbuat
design sebuah layout halaman website, kita akan selalu berhadapan dengan bahasa HTML /
XHTML. Kalau kita menyerah menghadapi Bahasa HTML, kita tidak akan bisa mempunya
layout website yang bagus :D
Kalau script diatas kita pilah - pilah, maka akan kita dapatkan masing - masing bagian seperti
berikut :
» Struktur Dasar HTML
<html>
<head>
<title>Membuat Design Halaman Depan Facebook</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
</body>
</html>
» Layour Header Website


<div id="header">
<div id="logo">
<img src="images/logo.png"/>
</div>
<div id="login">
<table>
<tr><td>Email or Phone</td><td
colspan="2">Password</td></tr>
<tr>
<td><input type="text"
class="text"/></td><td ><input type="password" class="text"/></td>
<td><input type="submit" value="Log
In"/></td>
</tr>
<tr><td><input type="checkbox"> Keep me logged
in</td><td colspan="2">Forgot your password ?</td></tr>
</table>
</div>
</div>
» Layout Content Website


<div id="content">
<div id="wrapper">
<div id="mobile">
<img src="images/mobile.png"/> <br/>
<h2>Chat for free and reduced rates with Facebook
Messenger</h2>
<ul>
<li>Create group chats or message just one
friend</li>
<li>Bring conversations to life with photos,
emoticons and more</li>
<li>See who's available and message them
instantly on their phone or computer</li>
</ul>
<input type="submit" class="button_mobile"
value=" "/>
</div>
<div id="register">
<h1>Sign Up</h1>
<p>It's free and always will be.</p>
placeholder="First Name">
placeholder="Last Name"> <br/><br/>
placeholder="Your Email"><br/><br/>
placeholder="Re-enter Email"><br/><br/>
placeholder="New Password"><br/>
<p>Birthday</p>
<select><option>Month</option></select>
<select><option>Day</option></select>
<select><option>Year</option></select>
<span style="font:normal 10px Tahoma,Verdana;">
<a href="">Why do i need to provide my
birthday?</a>
</span><br/><br/>
<input type="radio" name="radio"> Female
<input type="radio" name="radio"> Male
<br/><br/>
<p>By clicking Sign Up, you agree to our <a
href="">Terms</a> and that you have read our
<a href="">Data Use Policy</a>, including our <a
href="">Cookie Use</a>.</p>
<input type="submit" class="login" value=" "/>
</div>
<div id="clear"> </div>
</div>
</div>
» Layout Footer Website


<div id="footer">
<div id="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 id="link2">
<table>
<tr>
<td><a href="">Mobile</a></td> <td><a href="">Find
Friends</a></td>
<td><a href="">Badges</a></td> <td><a
href="">People</a></td>
<td><a href="">Pages</a></td> <td><a
href="">Places</a></td>
<td><a href="">Apps</a></td> <td><a href="">Games</a></td>
<td><a href="">Music</a></td>
</tr>
<tr>
<td><a href="">About</a></td> <td><a href="">Create
Ad</a></td>
<td><a href="">Create Page</a></td> <td><a
href="">Developers</a></td>
<td><a href="">Careers</a></td> <td><a
href="">Privacy</a></td>
<td><a href="">Cookies</a></td> <td><a
href="">Terms</a></td>
<td><a href="">Help</a></td>
</tr>
</table>
</div>
<div id="copy">
Facebook © 2013 · <a href="">English (US)</a>
</div>
</div>
Kira - kira seperti itulah bagian - bagian design diatas jika kita pilah - pilah sesuai dengan
lokasi penempatannya yaitu : Header, Content dan Footer
4. Membuat CSS
Adapun design HTML kita diatas tidak akan mempunyai bentuk yang bagus sebelum kita
buat script CSSnya, struktur dari CSS untuk layout diatas dapat kita lihat seperti pada contoh
dibawah ini
html,body{
margin:0 0 0 0;
padding:0 0 0 0;
}
h1,p{
margin:5px 0 5px 0;
}
a{
color:#6388b9;
text-decoration:none;
}
/* CSS HEADER */
#header{
height:85px;
display:block;
background-image:url(images/header.png);
}
#logo{
float:left;
width:200px;
padding:20px 0 0 10px;
}
#login{
float:right;
width:370px;
padding:10px 10px 0 0;
}
#login table{
font:normal 12px Tahoma,Verdana;
color:#ffffff;
}
/* CSS CONTENT */
#content{
background-image:url(images/content.png);
min-height:500px;
}
#content #wrapper{
width:1000px;
padding:30px 0 0 0;
margin-left:auto;
margin-right:auto;
color:#666666;
}
#content #wrapper #mobile{
width:555px;
float:left;
}
ul{
margin:0 0 0 0;
padding:0 0 0 20px;
}
input.button_mobile{
width:142px;
height:40px;
border:none;
background-color:transparent;
background-image:url(images/button-mobile.png);
background-position:center center;
cursor:pointer;
}
#content #wrapper #register{

width:400px;
float:right;
}
#content #wrapper #register{
border-bottom:silver 1px solid;
}
input.login{
width:200px;
height:55px;
border:none;
background-color:transparent;
background-image:url(images/button.png);
background-position:center center;
cursor:pointer;
}
#clear{
display:block;height:1px;clear:both;
}
/* CSS FOOTER */
#footer{
display:block;
height:150px;
background-color:#ffffff;
}
#footer #link{
margin:0 30px 0 30px;
border-bottom:silver 1px solid;
}
#footer #link2{
}
#footer #link2 table tr td{
}
#footer #link a, #footer #link2 a{
line-height:30px;
margin-right:10px;
}
#footer #copy{
}
Pada contoh diatas, kami juga sudah memilah - milah fungsi dari bagian - bagian CSSnya,
dimana CSS untuk header kami tandai dengan kode /* CSS HEADER */ dan juga untuk
bagian - bagian yang lainnya.
Apakah masih bingung dengan kode - kode CSS seperti font, margin, padding, display dan
lain - lainnya, silahkan baca kembali postingan kami kategori Posting CSS :D.
Cukup sederhana bukan contoh scriptnya, silahkan mencoba untuk mengembangkannya pada
aplikasi - aplikasi sesuai dengan keinginan anda. Jangan lupa klik LIKE atau SEND jika
menurut anda tutorial kami ini cukup bermanfaat dan bisa dimengerti oleh para pembaca

3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3

Uploaded by

Copyright:

Available Formats

3.

Membuat Layout Halaman Login Facebook

» Struktur Dasar HTML

» Layour Header Website

» Layout Content Website

» Layout Footer Website

#content #wrapper #register{

You might also like