Andeskon Generation

Membuat Rekayasa Halaman Utama Facebook

Copi disini https://drive.google.com/file/d/0B0mE9MpMtzcNemNabUt4M3EwLW8/view?usp=sharing

Membuat Rekayasa Halaman Facebook dengan HTML dan CSS

1. Index.html
Anda dapat membuat script HTML dengan menggunakan Notepad++, kemudian pilih New dan simpan dengan ekstensi .html. Kemudian akan muncul file baru dan Anda dapat mulai membuat script HTML seperti berikut ini:

Email atau Telepon	Kata Sandi
Keep me logged in	Lupa Kata Sandi Anda ?

Facebook membantu Anda berhubungan dan
berhubungan dengan orang-orang dalam kehidupan Anda.

• Create group chats or message just one friend
• Bring conversations to life with photos, emoticons and more
• See who's available and message them instantly on their phone or computer

Daftar

Gratis, Sampai Kapan pun.

Tanggal Lahir

Tanggal
Bulan
Tahun


Why do i need to provide my birthday?




Perempuan
Laki-Laki

By clicking Sign Up, you agree to our Terms and that you have read our
Data Use Policy, including our Cookie Use.

• Bahasa Indonesia
• English (US)
• Español
• Português (Brasil)
• Français (France)
• Deutsch
• Italiano

Mobile	Find Friends	Badges	People	Pages	Places	Apps	Games	Music
About	Create Ad	Create Page	Developers	Careers	Privacy	Cookies	Terms	Help

Facebook © 2016 · Bahasa Indonesia

--->
Simpanlah List Program di atas dengan “nama.html” saya membuatnya dengan Index.html, Anda Bisa memnyimpannya dengan nama yang anda mau. Selanjutnya salin lis css berikut.

2. Style.css
Anda dapat membuat form baru menggunakan Notepad++ dan simpan dengan ekstensi .css. Anda dapat membuat style pada elemen HTML menggunakan script CSS, seperti: desain huruf, warna background, jenis tulisan, tampilan website dan lain sebagainya.
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:95px;
display:block;
background-image:url(images/header.png);
}
#logo{
float:left;
width:200px;
padding:20px 0 0 10px;
}
.login{
float:right;
width:565px;
padding:10px 10px 0 0;
}
input.masuk
{
font:normal 10px Tahoma,Verdana;
color:#000000;
background-color:#448e28;

}
input .masuk:hover
{
display:inline-block;
background-color:lightskyblue;
color:Black;
}
.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;
}
#register a:hover
{
display:inline-block;
background-color:lightskyblue;
color:white;
}

input.masuk
{
font:normal 10px Tahoma,Verdana;
color:#ffffff;
background-color:#448e28;

}
input.Masuk:hover
{
background-color:lightskyblue;
color:white;
}
input.Masuk{
width:60px;
height:20px;
border:none;
background-color:grad;

background-position:center center;
cursor:pointer;

}

input.login{
width:150px;
height:40px;
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:50px;
background-color:#ffffff;
}
#footer #link{
margin:0 30px 0 25px;
border-bottom:silver 1.5px solid;
}
#footer #link ul li
{
display:inline-block;
line-height:30px;
margin-right:10px;
}
#footer #link ul li a:hover
{
background-color:lightskyblue;
color:white;
}
#footer #link2 a:hover
{
background-color:lightskyblue;
color:white;
}
#footer #link2{
margin:0 30px 0 25px;
}
#footer #link2 table tr td{
font:normal 12px Tahoma,Verdana;
}
#footer #link a, #footer #link2 a{
line-height:20px;
margin-right:10px;
}
#footer #copy{
margin:0 30px 0 30px;
}
#copy a:hover
{
background-color:lightskyblue;
color:white;
}

3. Hubungkan HTML ke CSS
Untuk menghubungkan HTML dan CSS, Anda disarankan menyimpan kedua file dalam satu folder sehingga kedua file dapat dihubungkan. Anda selanjutnya dapat membuat link pada file HTML seperti berikut ini: