Cara membuat halaman login dengan HTML


Salam ….
Kali ini saya akan berbagi cara membuat tampilan halaman login pada webside. tentu belum koneksinya, karena disini kita belum menggunakan PHP Apache serta aplikasi databasenya. Disini kita masih hanya menggunakan NotePad.

Haloman login yang akan kita bangun dihiasi atau diatur gaya tampilan halam web agar lebih elegan dengan CSS (Cascading Style Sheet).
penulisan CSS bisa dilakukan dengan cara :

  1. langsung
    1. Langsung pada baris elemen HTML (inline Style).
    2. pada file HTML namun berada diantara head (internal style).
  2. penulisan file terpisah dari file html (external style).

langsung saja silahkan Copy script dibawah dan paste pada halaman notepad baru kemudian dengan extention “namafile.htm”, kemudian tutup lalu jalankan.

Script –>

<html>
<head>
<title>Halaman login</title>
</head>
<body bgcolor=”#00FFFF”>
<div style=”margin-left:35%; margin-top:15%; border:3px solid #a1a1a1; padding: 10px 35px; box-shadow: 7px 7px 6px; border-radius:35px; background:#CCFF99; width:250; height:130″>

<fieldset style=”height: 110″><legend>Silahkan Login Dahulu !</legend>

<form>

<p style=”margin-top:6; margin-bottom:6″>User ID <input type=text name=”userid1″ size=3 style=”width: 140; position:relative; left:15″></p>
<p style=”margin-top:6; margin-bottom:6″>Password <input type=password name=”pswd1″ size=3 style=”width: 140; position:relative; left:5″></p>
<input type=button name=btn_login onclick=”alert(‘belum ada koneksi’)” value=”Login” style=”box-shadow: 1px 1px 2px; border-radius:10px; background:#00FF00; margin-left: 30; margin-top:6; width: 75; height: 25″>
<input type=button name=btn_cancel onclick=”btnCancel()” value=”Cancel” style=”box-shadow: 1px 1px 2px; border-radius:10px; background:#FFFF00; margin-left: 5; margin-top:6; width: 75; height: 25″>

</form>

</fieldset>

</d iv>
</body>
</html>

contoh diatas disebut dengan “Inline style”
Semoga bermanfaat

CSS Bag 2
CSS Bag 3
Download contoh file disini.

Advertisements

2 thoughts on “Cara membuat halaman login dengan HTML”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s