Kamis, 05 Januari 2017

Home » » Cara membuat layout halaman login facebook dengan HTML dan CSS

Cara membuat layout halaman login facebook dengan HTML dan CSS

Tidak ada komentar





   Baiklah kali ini saya akan membagikan cara membuat layout halaman login facebook dengan HTML dan CSS. Untuk yang belum mengerti apa itu HTML dan CSS berikut penjelasannya.


 - HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).


- Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.


Ok kembali ke inti dari postingan ini saya akan membagikan cara membuat layout halaman login facebook dengan HTML dan CSS.
      
      1. pertama kalian harus menyiapkan logo berikut…


      kirimkeponsel.jpg 
      

facebookicon.jpg

logofacebook.jpg

mendaftar.jpg

backgroundphone.jpg


2.   Copy codingan berikut ke notepad dan save dengan format html.

<html>
<head>
                <title>Facebook</title>
                <link rel="shortcut icon" href="facebookicon.jpg"/>
                <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body bgcolor ="#F5FFFA">

<body>
<!-- Design Header website -->
<div id="header">
                <div id="logo">
                                <img alt="images" src="logofacebook.jpg"/>
                </div>
                <div id="login">
                                <table>
                                <tr><td>Email atau Telepon</td><td colspan="2">Kata Sandi</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">tetap masuk </td><td colspan="2">Lupa Kata Sandi ?</td></tr>

                                </table>
                </div>
</div>
<!-- Design Content website -->
<div id="content">
                <div id="wrapper">
                                <div id="mobile">
                                                <img src="backgroundphone.jpg"/> <br/>
                                                <h2>mengobrol gratis dan lebih hemat dengan facebook messenger</h2>
                                                <ul>
                                                                <li>lakukan obrolan grup atau kirim pesan kepada seorang teman saja</li>
                                                                <li>hidupkan percakapan dengan foto, emotikon, dan banyak lagi</li>
                                                                <li>lihat teman yang online dan kirimi pesan langsung diponsel atau komputer mereka </li>
                                                </ul>
                                                <input type="submit" class="button_mobile" value=" "/>
                                </div>
                                <div id="register">
                                                <h1>Mendaftar</h1>
                                                <p>Ini gratis sampai kapan pun.</p>
                                                <input type="text" class="reg" size="20" placeholder="Nama Depan">
                                                <input type="text" class="reg" size="19" placeholder="Nama Belakang"> <br/><br/>
                                                <input type="text" class="reg" size="45" placeholder="Email"><br/><br/>
                                                <input type="text" class="reg" size="45" placeholder="Masukkan Kembali email"><br/><br/>
                                                <input type="text" class="reg" size="45" placeholder="Kata Sandi baru"><br/>
                                                <p>Tanggal Lahir</p>
                                                <select><option>Bulan,<option value="">January</option></select>
                                                <select><option>Hari<option value="">1</option> </select>
                                                <select><option>Tahun<option value="">1990</option></select>
                                                <span style="font:normal 10px Tahoma,Verdana;">
                                                                <a href="">Mengapa Saya Harus Memberikan
                                                                                                Tanggal lahir Saya?</a>
                                                </span><br/><br/>
                                                <input type="radio" name="radio"> Perempuan
                                                <input type="radio" name="radio"> Laki Laki      <br/><br/>
                                                <p>Dengan mengklik mendaftar, maka anda setuju dengan <a href="">Ketentuan</a>kami dan bahwa Anda sudah membaca
                                                <a href="">Kebijakan Data</a>, Kami, termasuk <a href="">Penggunaan Cookie</a> kami. Anda akan menerima Pemberitahuan SMS dari Facebook dan dapat menolaknya kapan saja.</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="">Bahasa Melayu</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 © 2016 · <a href="">English (US)</a>
                </div>
</div>
</body>
</html>

3.  Kemudian copy codingan berikut di notepad yang baru dan save dengan nama “style.css”

html,body{
                margin:0 0 0 0;
                padding:0 0 0 0;
}
h1,p{
                margin:10px 0 10px 0;
}
a{
                color:#6388b9;
                text-decoration:none;
}
/* CSS HEADER */
#header{
                height:85px;
                display:80px;
                background-image:url(ganti dengan warna biru tua .jpg);
}
#logo{
                float:left;
                width:200px;
                padding:20px 0 0 10px;
}
#login{
                float:right;
                width:570px;
                padding:10px 10px 0 0;
}
#login table{
                font:normal 12px Tahoma,Verdana;
                color:#ffffff;
}
/* CSS CONTENT */
#content{
                background-image:url(ganti dengan warna background facebook .jpg);
                min-height:500px;
}
#content #wrapper{
                width:1000px;
                padding:25px 0 0 0;
                margin-left:auto;
                margin-right:auto;
                color:#666666;
}
#content #wrapper #mobile{
                width:500px;
                float:left;
}

ul{
                margin:0 0 0 0;
                padding:0 0 0 20px;
}
input.button_mobile{
                width:145px;
                height:40px;
                border:none;
                background-color:transparent;
                background-image:url(kirimkeponsel.jpg);
                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(Mendaftar.jpg);
                background-position:center center;
                cursor:pointer;
}
#clear{
                display:block;height:1px;clear:both;
}

/* CSS FOOTER */
#footer{
                font:normal 11px 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 11px Tahoma,Verdana;
}
#footer #link a, #footer #link2 a{
                line-height:20px;
                margin-right:10px;
}
#footer #copy{
                margin:0 30px 0 30px;
}


4. Pastikan semua gambar logo dan codingannya berada dalam satu folder.


5. Terakhir kalau cara kalian benar maka hasilnya seperti ini..

      nb: sudah banyak yang diedit tapi dari segi codingan tetap sama.





Share:

0 komentar:

Posting Komentar

Wikipedia

Hasil penelusuran

Game