Membuat layout halaman login facebook dengan TAG DIV dan CSS

Selamat berjumpa kembali dengan tutorial Kreatif, kali ini kami akan membahas tentang cara membuat layout design website seperti halaman depan / halaman login facebook dengan menggunakan TAG DIV dan CSS. Setiap penggna internet tentu tau seperti apa halaman login Facebook ketika kita buka dengan Browser komputer kita, maka kita akan mendapati tampilan seperti terlihat pada gambar diatas.

 

Bagaimana cara membuat tampilan tersebut, mari kita bahas caranya melalui beberapa langkah berikut ini

1. Siapkan Design halaman login facebook

Gambar diatas kami capture menggunakan screen capture yang merupakan Plugin / Add on dari Mozilla Firefox.

2. Memotong gambar sesuai kebutuhan

Gunakan Aplikasi Image editing seperti Photoshop atau Corel Draw untuk memotong - motong gambar sesuai dengan kebutuhan, adapun potongan - potongan gambar yang kami lakukan terlihat pada gambar dibawah ini :


layout design facebook

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>
<!-- Design 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>
<!-- Design 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>
			<input type="text" class="reg" size="20" placeholder="First Name"> 
			<input type="text" class="reg" size="19" placeholder="Last Name"> <br/><br/>
			<input type="text" class="reg" size="45" placeholder="Your Email"><br/><br/>
			<input type="text" class="reg" size="45" placeholder="Re-enter Email"><br/><br/>
			<input type="text" class="reg" size="45" 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>
<!-- Design 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>
</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

<!-- Design 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

<!-- Design 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>
			<input type="text" class="reg" size="20" placeholder="First Name"> 
			<input type="text" class="reg" size="19" placeholder="Last Name"> <br/><br/>
			<input type="text" class="reg" size="45" placeholder="Your Email"><br/><br/>
			<input type="text" class="reg" size="45" placeholder="Re-enter Email"><br/><br/>
			<input type="text" class="reg" size="45" 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

<!-- Design 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{
	font:normal 12px Tahoma,Verdana;
	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{
	font:normal 12px Tahoma,Verdana;
	display:block;
	height:150px;
	background-color:#ffffff;
}
#footer #link{
	margin:0 30px 0 30px;
	border-bottom:silver 1px solid;
}
#footer #link2{
	margin:0 30px 0 30px;
}
#footer #link2 table tr td{
	font:normal 12px Tahoma,Verdana;
}
#footer #link a, #footer #link2 a{
	line-height:30px;
	margin-right:10px;
}
#footer #copy{
	margin:0 30px 0 30px;
}

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

Untuk mencoba contoh design yang sudah kami buat, silahkan Download Contoh Layout Design


Komentar pembaca

arijalhtml itu asikk,, tp bikin pusing mas :Dposting pada :2015-04-20 08:30:28
Antari Terima kasih atas sharing ilmunya, kebaikannya tak kan terlupakan.posting pada :2015-06-05 13:30:25
smart kiosmantap banget ganposting pada :2016-04-01 14:33:55
adimakasih banyak ganposting pada :2016-06-17 14:27:27
erickHtml itu memang menyenangkan, bisa membuat sesuatu menjadi menarik dengan kode2 html yg sedikit buat pusing :vposting pada :2017-01-18 20:10:41
roy vinsmenarik dengan berbagi info saya dapat menamba wawasan.. thanks foer scrip HTML dan CSS nya... smoga laman ni bnyak pengunjungnya and Subcribe's. :) :)posting pada :2017-02-19 12:05:47
Jadwal Bolagan ,, ini maksudnya bikin login kaya semacam ( LOGIN Via Fb) begitu bukan?posting pada :2017-05-08 20:56:36
selokbesuki.blogspot.comagan yang baik hati... ini pembahasan kok semakin di baca semakin bingung ya... hahahaha lagi di coba2 iniposting pada :2017-10-27 18:07:25
fitrimantap min,posting pada :2017-11-01 21:44:50
         
     
         
 
         
   
         
   
 

Tulis komentar