Daily Archives: 29 July 2016

Komputer

Cara membuat halaman login dengan HTML

2 Comments

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.