DomaiNesia

Saturday 6 February 2016

Membuat Box Model Dasboard Dan Login Administrator Mengunakan Kode HTML Dan CSS.

       11 comments

MEMBUAT DASHBOARD

Dashboard berisi konten dan menu yang dapat dipilih untuk menuju sebuah halaman tertentu. Menu Berita akan menampilkan daftar berita yang sudah dimasukkan, tombol untuk input berita baru, tombol untuk mengedit atau menghapus berita, dan beberapa fungsi lainnya. Ketika memilih sebuah menu, maka akan diarahkan ke sebuah halaman lain. Namun disini saya membuat halaman dasboard yang bersifat statis bukan dinamis,,ingin tau bedanya web statis dengan web dinamis temen-temen bisa baca di halaman ini .klik ,,silakan dikembangkan sendiri sebagai latihan.
1. Pertama-tama Kita buat CSS nya untuk Dasboard. Seperti di bawah ini scriptnya.
Save scripnya dengan nama style.css
/* style Header */
#header {
 background:yellow;
 height: 80px;
 width: 99%;
 padding: 10px 0px 0px 10px;
}
/* style sidebar */
#sidebar {
 background:gray;
 height: 520px;
 width: 15%;
 padding: 20px;
}
/* style content */
#content {
 height: 500px;
 width: 75%;
 float: right;
 border:dotted gray 1px;
 padding: 20px;
}
/* costum navigasi */
.nav {
 font-family: arial;
}
.a {
 text-decoration: none;
}

2. Kemudian buat  file  dasboard.html kemudian ketik script berikut dan letakkan pada area konten.
Kemudian Save dengan nama Dasboard.html
<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="75px">
 </div>

 <div id="content">
  Selamat datang admin !
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:




3. Selanjutnya buat file Tambah Berita  kemudian ketik script berikut.
Kemudian Save dengan nama Tberita.html 
<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>

 <div id="content">
  <div align="center">
   <h3>Tambah Berita</h3>
   
  </div>

  <fieldset>
   <legend>Tambah Berita</legend>
   <table>
    <tr>
     <td>Judul Berita</td>
     <td>:</td>
     <td><input type="text" name="text" size="30" maxlength="30"/></a></td>
    </tr>
    <tr>
     <td>Waktu Kejadian</td>
     <td>:</td>
     <td><input type="text" name="text" size="30" maxlength="30"/></td>
    </tr>
    <tr>
     <td>Banyak korban</td>
     <td>:</td>
     <td><input type="text" name="text" size="30" maxlength="30"/></td>
    </tr>
    <tr>
     <td>Keterangan</td>
     <td>:</td>
     <td><textarea name="alamat" cols="50" required="" style="margin: 0px; height: 187px; width: 414px;"></textarea></td>
    </tr>
    <tr>
     <td>Upload Gambar</td>
     <td>:</td>
     <td><input type="file" name="gambar"></td>
    </tr>
    <tr>
     <td>
      <button type="submit" name="save">Save</button>
      <button type="reset" name="reset">Reset</button>
     </td>
    </tr>
   </table>
  </fieldset>
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="thome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="galeri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:


4. Kemudian buat file Lihat Berita  kemudian ketik script berikut.


Kemudian Save dengan nama Lberita.html 

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>

 <div id="content">
  <h3><center>Kejadian Seputar bulan Desember Tahun 2015</center></h3>
  <br><br>
  <fieldset>
   <legend>Berita Terhangat</legend>
   <br>
   <form>
   <table  width="900" border="1" align="center">
    <tr bgcolor="#36c2ff">
     <th>Judul Berita</th>
     <th>Waktu Kejadian</th>
     <th>Banyak Korban</th>
     <th>Keterangan</th>
     <th>Foto</th>
    </tr>
    <tr>
     <td>Hujan Badai Dijepang</td>
     <td>12/12/2015</td><td>10 Rumah</td>
     <td>Hujan Badai</td>
     <td><img src="jepang.jpg" width="50px"></td>
    </tr>
    <tr>
     <td>Begal Dibegal</td>
     <td>28/12/2015</td>
     <td>1 babak belur</td>
     <td>Begal</td>
     <td><img src="begal.jpg" width="50px"></td>
    </tr>
    <tr>
     <td>Meriahnya Tahun Baru</td>
     <td>31/12/2015</td>
     <td>Tidak ada korban</td>
     <td>Tahun Baru</td>
     <td><img src="tahun baru.jpg" width="50px"></td>
    </tr>
    <tr>
     <td>Kapal Marina</td>
     <td>20/12/2015</td>
     <td>20 orang</td>
     <td>Tenggelam</td>
     <td><img src="kapal.jpg"width="50px"></td>
    </tr>
    <tr>
     <td>Hujan</td>
     <td>25/12/2015</td>
     <td>25 Rumah Rusak</td>
     <td>Kebanjiran</td>
     <td><img src="banjir.jpg" width="50px"></td>
    </tr>
    </table>
   </form>

  </fieldset>
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:




5. Kemudian buat file Tambah Informasi  kemudian ketik script berikut.

Kemudian Save dengan nama Tinformasi.html 

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>

 <div id="content">
  <center><h3><b>Informasi</b></h3></center>
  <fieldset>
   <legend>Tambahkan Informasi</legend>
   <form>
    <table border="0">
     <tr>
      <td><b>Judul Berita</b></td>
      <td><input type="text" name="judul berita"/></td><br/>
     </tr>
     <tr>
      <td><b>Waktu Kejadian</b></td>
      <td><input type="text" name="waktu kejadian"/></td><br/>
     </tr>
     <tr>
      <td><b>Keterangan</b></td><br/>
      <td><textarea name="alamat" cols="30" rows="5"></textarea></td><br/>
     </tr>
    </table>
    <input type="Submit" value="Simpan"> <input type="Reset" value="Batal">
   </form>
  </fieldset>
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:





6. Kemudian buat file Lihat Informasi  kemudian ketik script berikut.
Kemudian Save dengan nama Linformasi.html 

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>

 <div id="content">
  <h3><center>Berikut Informasi Seputar Bulan Desember Tahun 2015</center></h3>
  <br><br>
  <fieldset>
   <legend>Lihat Informasi</legend>
   <form>
    <table  width="900" border="1" align="center">
     <tr bgcolor="#36c2ff">
      <th>Judul Informasi</th>
      <th>Waktu Kejadian</th>
      <th>Keterangan</th>
     </tr>
     <tr>
      <td>Malam Pergantian Tahun</td>
      <td>31/12/2015</td>
      <td>Tahun Baru 2016</td>
     </tr>
    </tr>
    <tr>
     <td>Libur Tahun Baru</td>
     <td>01/01/2016</td>
     <td>Libur</td>
    </tr>
    <tr>
     <td>Kampus UIT</td><td>23/12/2015</td><td>Aktif</td>
    </tr>
   </table>
  </form>

 </fieldset>
</div>

<div id="sidebar">
 <ol>Berita
  <li><a href="tberita.html">Tambah Berita</a></li>
  <li><a href="lberita.html">Lihat Berita</a></li>
 </ol>
 <hr>
 <ol>Informasi
  <li><a href="tinformasi.html">Tambah Informasi</a></li>
  <li><a href="linformasi.html">Lihat Informasi</a></li>
 </ol><hr>
 <ol>HOME
  <li><a href="thome.html">Tambah Home</a></li>
  <li><a href="lhome.html">Lihat Home</a></li>
 </ol><hr>
 <ol>Download
  <li><a href="tfile.html">Tambah file</a></li>
  <li><a href="lfile.html">Lihat file</a></li>
 </ol><hr>
 <ol>Galeri
  <li><a href="tgaleri.html">Tambah Galeri</a></li>
  <li><a href="lgaleri.html">Lihat Galeri</a></li>
 </ol><hr>
 <ol>Contact
  <li><a href="ktambah.html">Lihat Contact</a></li>
 </ol>
</div>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:


7. Kemudian buat file Tambah Home kemudian ketik script berikut.



Kemudian Save dengan nama Thome.html 

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>
 <div id="content">
  <form>
   <center><h3>HOME</h3></center>
   <fieldset>
    <legend>Tambahkan Home</legend>
    <table border="0">
     <tr>
      <td>Nama</td>
      <td>:</td>
      <td><input type="text" name="NAMA"/></td>
     </tr>
     <tr>
      <td>Jenis Kelamin</td>
      <td>:</td>
      <td><input type="text" name="JK"/></td>
     </tr>
     <tr>
      <td>Alamat</td>
      <td>:</td>
      <td><input type="text" name="alamat"/></td>
     </tr>
     <tr>
      <td>Agama</td>
      <td>:</td>
      <td><input type="text" name="alamat"/></td>
     </tr>
     <tr>
      <td>Hobi</td>
      <td>:</td>
      <td><input type="text" name="alamat"/></td>
     </tr>
     <tr>
      <td>Status</td>
      <td>:</td>
      <td><input type="text" name="alamat"/></td>
     </tr>
    </table>
    <br>
    Upload Gambar
    <input type="file" name="gambar"/><br/>
    <input type="Submit" value="Save"> <input type="Reset" value="reset ">
   </form>
  </fieldset>
 </div>
 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:


8. Kemudian buat file Lihat Home kemudian ketik script berikut.




Kemudian Save dengan nama Lhome.html 
<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>
 <div id="content">

  <form>
   <center><h3>HOME</h3></center>
   <fieldset>
    <legend>Home</legend>
    <table border="0" align="center">
     <tbody>
      <h3><center>Selamat Datang di Web sederhana kami ini</center></h3>
      <div align="center">
       <img src="g/profile.jpg" width="200px" height="200px">
      </div>
      <tr>
       <td>Nama</td>
       <td>:</td>
       <td>Putu ariana</td>
      </tr>
      <tr>
       <td>Jenis kelamin</td>
       <td>:</td>
       <td>Laki-laki</td>
      </tr>
      <tr>
       <td>Alamat</td>
       <td>:</td>
       <td>Rapocini Raya</td>
      </tr>
      <tr>
       <td>Agama</td>
       <td>:</td>
       <td>Hindu</td>
      </tr>
      <tr>
       <td>Hobi</td>
       <td>:</td>
       <td>Memancing</td>
      </tr>
      <tr>
       <td>Status</td>
       <td>:</td>
       <td>Lajang</td>
      </tr>
     </tbody>
    </table>
   </fieldset>
  </div>
  <div id="sidebar">
   <ol>Berita
    <li><a href="tberita.html">Tambah Berita</a></li>
    <li><a href="lberita.html">Lihat Berita</a></li>
   </ol>
   <hr>
   <ol>Informasi
    <li><a href="tinformasi.html">Tambah Informasi</a></li>
    <li><a href="linformasi.html">Lihat Informasi</a></li>
   </ol><hr>
   <ol>HOME
    <li><a href="thome.html">Tambah Home</a></li>
    <li><a href="lhome.html">Lihat Home</a></li>
   </ol><hr>
   <ol>Download
    <li><a href="tfile.html">Tambah file</a></li>
    <li><a href="lfile.html">Lihat file</a></li>
   </ol><hr>
   <ol>Galeri
    <li><a href="tgaleri.html">Tambah Galeri</a></li>
    <li><a href="lgaleri.html">Lihat Galeri</a></li>
   </ol><hr>
   <ol>Contact
    <li><a href="ktambah.html">Lihat Contact</a></li>
   </ol>
  </div>
 </body>
 </html>
Berikut penampakannya jika dijalankan melalui browser:



9. Kemudian buat file Tambah File Untuk Download Software atau Aplikasi kemudian ketik script berikut.





Kemudian Save dengan nama Tfile.html 


<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>
 <div id="content">
  <form>
   <center><h3>UPLOAD DATA FILE</h3></center>
   <fieldset>
   <legend>Tambahkan file</legend>
   <table border="0">
    <tr>
     <td>Nama File</td>
     <td>:</td>
     <td><input type="text" name="NAMA"/></td>
    </tr>
    <tr>
     <td>Judul File</td>
     <td>:</td>
     <td><input type="text" name="JK"/></td>
    </tr>
    <tr>
     <td>Extensi</td>
     <td>:</td>
     <td><input type="text" name="alamat"/></td>
    </tr>
   </table>
   <br>
   Upload Data
   <input type="file" name="gambar"/><br/>
   <input type="Submit" value="Save"> <input type="Reset" value="reset ">
  </form>
  </fieldset>
 </div>
 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:


10. Kemudian buat file Lihat File Untuk Download Software atau Aplikasi kemudian ketik script berikut.





Kemudian Save dengan nama Lfile.html 
<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>
 <div id="content">
  <center><h3><b>Download Software</b></h3></center>
  <fieldset>
   <legend>Download Sofware</legend>
   <table>

    <tr>
     <td> 1. Web browser</td>
     <tr>
      <td><a href="aplikasi/28.0.1500.71_chrome_installer.exe">Google_chrom</a></td>    
     </tr>
     <tr>
      <td><a href="aplikasi/Firefox Setup 23.0b5.exe">Mozila Firefox</a></td>
     </tr>
     <tr></tr>
     <tr>
      <td>2. Pemrograman Destop</td>
     </tr>
     <tr>
      <td><a href="aplikasi/destop/Borland Delphi 7.rar">Borland Delphi 7</a></td>
     </tr>
     <tr>
      <td><a href="aplikasi/destop/Java Netbeans v8.0.2 - 32 Bit.rar">Java Netbeans v8.0.2 - 32 Bit</a></td>
     </tr>
     <tr>
      <td><a href="aplikasi/destop/Visual Studio 6.0 Enterprise Edition - Key 422 111111.zip">Visual Studio 6.0</a></td>
     </tr>
    </tr>
    
   </table>

  </fieldset>
 </div>
 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:


11. Kemudian buat file Tambah Galeri kemudian ketik script berikut.





Kemudian Save dengan nama Tgaleri.html 
<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>
 <div id="content">
  <center><h3><b>Download Software</b></h3></center>
  <fieldset>

   <legend>Download Sofware</legend>
   <table border="0">
    <tr>
     <td><b>Judul galery</b></td>
     <td><input type="text" name="judul berita"/></td><br/>
    </tr>
    <tr>
     <td>Upload Data</td> 
     <td><input type="file" name="gambar"/><br/></td>
    </tr>
    <tr>
     <td>
      <input type="Submit" value="Simpan">
      <input type="Reset" value="Batal">
     </td>
    </tr>
   </table>

  </fieldset>
 </div>
 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:


12. Kemudian buat file Lihat Galeri kemudian ketik script berikut.





Kemudian Save dengan nama Lgaleri.html 
<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>

 <div id="content">
  <center><h3><b>Informasi</b></h3></center>
  <fieldset>
   <legend>Tambahkan Informasi</legend>
   <form>
   <a href="Musik/puspa.mp3" target="blank"><img src="img/ada-band.jpg" style="float: left; height: 150px; margin: 0px 50px 10px 30%; width: auto;" border="1" />
    <a href="img/profile.jpg" target="blank"><img src="img/profile.jpg" style="float: left; height: 150px; margin: 0px 10px 10px 0px; width:auto;" border="1" />
    </a>
   </form>
  </fieldset>
 </div>

  <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:


13. Kemudian buat file Lihat Contact kemudian ketik script berikut.





Kemudian Save dengan nama Ktambah.html 
<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>
 <div id="content">

  <form>
   <center><h3>Contact</h3></center>
   <fieldset>
    <legend>Contact</legend>
    <table border="0" align="center">
     <tbody>
      <h3><center>Selamat Datang di Web sederhana kami ini</center></h3>
      <div align="center">
       <img src="g/profile.jpg" width="200px" height="200px">
      </div>
      <tr>
       <td>Nama</td>
       <td>:</td>
       <td>Putu ariana</td>
      </tr>
      <tr>
       <td>Jenis kelamin</td>
       <td>:</td>
       <td>Laki-laki</td>
      </tr>
      <tr>
       <td>Alamat</td>
       <td>:</td>
       <td>Rapocini Raya</td>
      </tr>
      <tr>
       <td>Agama</td>
       <td>:</td>
       <td>Hindu</td>
      </tr>
      <tr>
       <td>Hobi</td>
       <td>:</td>
       <td>Memancing</td>
      </tr>
      <tr>
       <td>Status</td>
       <td>:</td>
       <td>Lajang</td>
      </tr>
     </tbody>
    </table>
   </fieldset>
  </div>
  <div id="sidebar">
   <ol>Berita
    <li><a href="tberita.html">Tambah Berita</a></li>
    <li><a href="lberita.html">Lihat Berita</a></li>
   </ol>
   <hr>
   <ol>Informasi
    <li><a href="tinformasi.html">Tambah Informasi</a></li>
    <li><a href="linformasi.html">Lihat Informasi</a></li>
   </ol><hr>
   <ol>HOME
    <li><a href="thome.html">Tambah Home</a></li>
    <li><a href="lhome.html">Lihat Home</a></li>
   </ol><hr>
   <ol>Download
    <li><a href="tfile.html">Tambah file</a></li>
    <li><a href="lfile.html">Lihat file</a></li>
   </ol><hr>
   <ol>Galeri
    <li><a href="tgaleri.html">Tambah Galeri</a></li>
    <li><a href="lgaleri.html">Lihat Galeri</a></li>
   </ol><hr>
   <ol>Contact
    <li><a href="ktambah.html">Lihat Contact</a></li>
   </ol>
  </div>
 </body>
 </html>

Berikut penampakannya jika dijalankan melalui browser:



Sekian untuk tutorial Dasboard nya sekarang beralih ke login administrator.

Membuat Login Administrator.


Pada Artikel sebelumnya saya sudah membahas cara membuat Dasboard dengan HTML. Kali ini saya akan memberikan tips Cara membuat Login Form dengan HTML.

Teknik yang saya gunakan kali ini hanya untuk pemula. Disini saya masih menggunakan teknik cara membuat table. Tapi dengan dimodifikasi sedikit kita bisa merubahnya menjadi sesuatu yang baru. 

Coba perhatikan source code dibawah ini :

 
<!DOCTYPE html>
<html>
<head>
 <title>log in | Administrator</title>
 <style>
  body{margin: 200px 500px; background:aqua;}
 </style>
</head>
<body>
 <form action="#" method="GET">
  <h3>Welcome To Administrator</h3>
  <hr>

  <table>
   <tr>
    <td>user name</td><td>:</td><td>  <input type="text" name="username"/></td>
   </tr>
   <tr>
    <td>Password </td><td>:</td><td> <input type="password" name="password"/></td>
   </tr>
   <tr>
    <td></td><td></td> <td><input type="submit" name="login" value="log in"/> <input type="submit" name="cencel" value="cencel"/></td>
   </tr>
  </table>
 </form>
</body>
</html>


Penjelasannya ::
  • Di dalam <table>...</table> kita bisa mengasih attribut tinggi dan lebar juga. kita tinggal mengasih nilai pada attribut tersebut (height & width).
  • <div align="center>... </div> gunanya untuk membuat text rata tengah.
  • <strong>...</strong> untuk membuat text menjadi cetak tebal.
  • Tag <input> untuk menentukan sebuah field input, dimana pengguna bisa memasukan data. Sebuah input dapat bervariasi dalam banyak cara, tergantung type attribut.
  • attribut text pada input untuk membuat text field.
  • attribut password untuk membuat text field rahasia.
  • attribut submit untuk button.
Hasil Tampilannya ::


Tutorial untuk pembuatan login administratornya udah selesai kita beralih ke tutorial box modelnya.

Membuat Box Model Mengunakan Kode Html Dan CSS


Setelah selesai belajar dasar-dasar css beserta stylenya, sekarang kita mulai memasuki materi yang lebih advance lagi. Yang akan kita bahas kali ini adalah box css. Didalam html, semua elemen seperti p, div, h dan lain-lain pada dasarnya dianggap kolom kotak yang membungkus isi (html) didalam css, istilah “model kotak / box” digunakan ketika berbicara tentang design dan tata letak.


Berikut ini adalah Script dari Kode HTML untuk membuat Box Model scriptnya ada di bawah ini:

1. Pertama-tama Kita buat CSS nya untuk Box Model Seperti di bawah ini scriptnya.
Save di folder css kemudian dengan nama style.css

/* Bagian header */
#header {
 background:yellow;
 height: 100px;
 width: 1348px;
 border : 1px solid silver;
}
/* Bagian navbar */
#nav {
 background: aqua;
 padding: 10px;
}
/* Bagian a href*/
a {
 padding: 10px;
 background: none;
 text-decoration: none;
 font-family: Times;
}
/* Bagian nav hover */
a:hover {
 color: red;
 background: white;
 font-size: 15px;
}
/* Bagian Content */
#content {
 background: white;
 border : dotted 1px gray;
 height: auto;
 padding: 20px;
}
/* Bagian Footer */
#footer {
 background: gray;
 height: 30px;
 text-align: center;
 font-family: arial;
 padding: 10px;
}

2.  Kemudian buat  file  index.html kemudian ketik script berikut dan letakkan pada area konten.
Kemudian Save dengan nama index.html
<!DOCTYPE html>
<html>
<head>
 <title>Box</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="90px" height="90px">
 </div>
 <div id="nav">
  <a class="nav-item" href="index.html">Home</a>
  <a class="nav-item" href="berita.html">Berita </a>
  <a class="nav-item" href="informasi.html">Informasi </a>
  <a class="nav-item" href="galery.html">Galery </a>
  <a class="nav-item" href="Download.html">Download </a>
  <a class="nav-item" href="contact.html">Contact </a>
 </div>
 <div id="content">
 <h3><center>Selamat Datang di Web sederhana kami ini</center></h3>
 <div align="center">
  <img src="g/profile.jpg" width="200px" height="200px">
 </div>
 <table border="0" align="center">
  <tbody>
   <tr>
    <td>Nama</td>
    <td>:</td>
    <td>Putu ariana</td>
   </tr>
   <tr>
    <td>Jenis kelamin</td>
    <td>:</td>
    <td>Laki-laki</td>
   </tr>
   <tr>
    <td>Alamat</td>
    <td>:</td>
    <td>Rapocini Raya</td>
   </tr>
   <tr>
    <td>Agama</td>
    <td>:</td>
    <td>Hindu</td>
   </tr>
   <tr>
    <td>Hobi</td>
    <td>:</td>
    <td>Memancing</td>
   </tr>
   <tr>
    <td>Status</td>
    <td>:</td>
    <td>Lajang</td>
   </tr>
  </tbody>
  </table>
 </div>
 <div id="footer">
  <small>All Reserved Design by Putu's Belog http//:fikombk-putu-ariana.blogspot.co.id</small>
 </div> 
</body>

</html>
Berikut penampakannya jika dijalankan melalui browser:



3.  Kemudian buat  file  berita.html kemudian ketik script berikut

Kemudian Save dengan nama berita.html

<!DOCTYPE html>
<html>
<head>
 <title>Box</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
 <!-- Bagian header -->
 <div id="header">
  <img src="img/logo.png" width="90px" height="90px">
 </div>
 <!-- Bagian nav -->
 <div id="nav">
  <a class="nav-item" href="index.html">Home</a>
  <a class="nav-item" href="berita.html">Berita </a>
  <a class="nav-item" href="informasi.html">Informasi </a>
  <a class="nav-item" href="galery.html">Galery </a>
  <a class="nav-item" href="Download.html">Download </a>
  <a class="nav-item" href="contact.html">Contact </a>
 </div>

 <!-- Bagian conten -->
 <div id="content">
  <h3><center>BERITA TERKINI DAN TERHANGAT</center></h3>
  <br><br>
  <fieldset>
   <legend>Berita Seputar Mancanegara</legend>
   <h4>HUJAN BADAI MELANDA JEPANG</h4>
  <p style="text-indent:55px"><img src="g/jepang.jpg" style="float:left;" />
  Tim SAR dibantu regu penyelamat dari Kepolisian Jepang masih melakukan pencarian puluhan warga Jepang yang menghilang akibat banjir bandang yang melanda sebagian besar wilayah Tokyo.
  Seperti diberitakan CBS News, Jumat (12/12/2015), akibat Badai Tropis Etau dan hujan deras berhari-hari yang melanda sebagian besar wilayah Tokyo, sungai-sungai meluap dan menimbulkan gelombang arus air hingga menghanyutkan beberapa rumah.
  <p style="text-indent:55px">Berdasarkan laporan salah satu media Jepang, sungai-sungai di wilayah utara Tokyo banyak yang meluap dan membuat ratusan ribu warga mengungsi.
  Sementara di Kota Joso terlihat lusinan warga telah ditarik oleh helikopter regu penyelamat dan dikirim menuju pusat evakuasi bencana yang berlokasi di wilayah yang relatif lebih aman.
  Hingga kini sebanyak 3.500 warga memenuhi pusat evakuasi bencana dengan kondisi yang cukup memprihatinkan. Ribuan warga itu hanya mengenakan pakaian yang mereka gunakan sewaktu dievakuasi.
  </p><br>
  <hr>
  <h3>BEGAL</h3>
  <p style="text-indent:55px"><img src="g/begal.jpg" style="float:left;" />
  Aksi begal semakin menjadi-jadi. Pelaku yang didominasi orang dewasa, kini mulai merambah ke remaja.

  Seperti kasus begal yang diungkap Subdit Reserse Mobile (Resmob) Direktorat Reserse Kriminal Umum Polda Metro Jaya baru-baru ini. 3 orang begal asal Lampung dibekuk polisi, 2 di antaranya masih dibawah umur.
  Mereka adalah FB (23), JD (20), dan SF (16). Pembegal motor asal Lampung Selatan.
  Kanit V Subdit Resmob Ditreskrimum Polda Metro Jaya, Kompol Handik Zusen mengatakan ketiga pelaku kerap menjalankan aksinya di kawasan Depok, Jawa Barat. Berdasarkan laporan warga sekitar tentang maraknya pencurian kendaraan motor, kemudian polisi mulai melakukan penyelidikan.

  <p style="text-indent:55px">Alhasil, ketiga pelaku tersebut ditangkap pada 21 Oktober 2015 malam di kawasan Depok, Jawa Barat. Berdasarkan keterangan dari ketiga pelaku, sambung Handik, mereka tengah menyasar korban selanjutnya.
  Ia mengungkapkan, modus pencurian yang biasa dilakukan oleh ketiga pelaku itu adalah dengan menyisir daerah target operasi mereka. Bilamana daerah terlihat sepi dan minim penerangan, barulah mereka menggondol motor korban.
  </p>
  <hr>
  <H4>TENGGELAMNYA KAPAL MARINA</H4>
  <p style="text-indent:55px"><img src="g/kapal.jpg" style="float:left;" />
   Badan SAR Nasional kembali menemukan jasad penumpang Kapal Motor Marina Baru 2B yang tenggelam di Teluk Bone, Sulawesi Selatan, Rabu (23/12) siang ini. Total, telah ditemukan 14 jasad oleh tim Basarnas.

  Korban tenggelamnya KM Marina yang baru ditemukan pada hari ini berjumlah 7 orang. Para korban dilaporkan telah meninggal saat ditemukan oleh tim evakuasi di lapangan.</p>

  "Ditemukan lagi 7 korban meninggal dunia di perairan Teluk Bone. Korban ditemukan oleh Kapal Negara (KN) Pacitan," ujar Kepala Humas Basarnas Zainul Thahar kepada CNNIndonesia.com, Selasa (23/12).
  </p><br><br><br>
  <hr>
  <H3>MERIAHNYA TAHUN BARU</H3>
  <p style="text-indent:55px"><img src="g/TAHUN BARU.jpg"  width="150px" height="120px" style="float:left;" />
  Jawa Timur, akan dimeriahkan dengan berbagai acara hiburan panggung dengan penampilan artis-artis lokal ternama. Selain itu, pesta kembang api juga akan digelar.

  "Sebenarnya yang menjadi leading sector untuk acara ini adalah Biro Kesejahteraan Rakyat (Kesra). Namun karena diminta membantu, kita juga sanggup menyediakan kembang api untuk dinyalakan di dalam halaman Gedung Grahadi," kata Kepala Biro Administrasi Umum Pemprov Jawa Timur, Hizbul Wathan, di Surabaya, Kamis (31/12/2015).
  </p>
  <br><br><br>
  <hr>
  <H3>HUJAN YG NEBGAKIBATKAN BANJIR</H3>
  <p style="text-indent:55px;"><img src="g/banjir.jpg" style="float:left;" />
  Curah hujan di Jakarta antara 100-200 mm per hari. Ini juga membuat hulu sungai lainnya mencapai ketinggian siaga II,lanjut dia.
  Hal ini tentu harus menjadi perhatian Pemprov DKI Jakarta. Bila dibutuhkan, BNPB siap bekerja dalam masa 10 hari siaga bencana dan 7 hari tanggap bencana.

  "Tapi ini memerlukan pernyataan langsung dari kepala daerah. Kalau tidak ada pernyataan siaga bencana kami tidak bisa intervensi," tutup Sutopo.
  </p>

  </fieldset>
  
 </div>
 <!-- Bagian Footer -->
 <div id="footer">
  <small>All Reserved Design by Putu's Belog http//:fikombk-putu-ariana.blogspot.co.id</small>
 </div>
</body>

</html>

Berikut penampakannya jika dijalankan melalui browser:



4.  Kemudian buat  file  informasi.html kemudian ketik script berikut

Kemudian Save dengan nama informasi.html

<!DOCTYPE html>
<html>
<head>
 <title>Box</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="90px" height="90px">
 </div>
 <div id="nav">
  <a class="nav-item" href="index.html">Home</a>
  <a class="nav-item" href="berita.html">Berita </a>
  <a class="nav-item" href="informasi.html">Informasi </a>
  <a class="nav-item" href="galery.html">Galery </a>
  <a class="nav-item" href="Download.html">Download </a>
  <a class="nav-item" href="contact.html">Contact </a>
 </div>
 <div id="content">
  <h3><center>Informasi terkini</center></h3>
  <br><br>
  <fieldset>
   <legend>Informasi</legend>
   <ol><li><H3>MERIAHNYA TAHUN BARU</H3></li>
  <p style="text-indent:55px">
  Jawa Timur, akan dimeriahkan dengan berbagai acara hiburan panggung dengan penampilan artis-artis lokal ternama. Selain itu, pesta kembang api juga akan digelar.

  "Sebenarnya yang menjadi leading sector untuk acara ini adalah Biro Kesejahteraan Rakyat (Kesra). Namun karena diminta membantu, kita juga sanggup menyediakan kembang api untuk dinyalakan di dalam halaman Gedung Grahadi," kata Kepala Biro Administrasi Umum Pemprov Jawa Timur, Hizbul Wathan, di Surabaya, Kamis (31/12/2015).
  </p>
  <li><H3>Libur Tahun Baru</H3></li>
  <p style="text-indent:55px">Liburan tahun baru yg memadati taman wisata bogor pada tagal 01/01/2016 ini sangatlah membuat petugas kewalahan memenuhi kebutahan tiket pengunjung yg hapir habis, pada liburan kali ini banyak sekali tempat wisata yg begitu ramai didatangi pengunjun </p>
  <li><h3>Kampus UIT Kembali Aktif</h3></li>
  <p style="text-indent:55px">Kampus UIT kembali aktif pada tanggal 23/12/2015 setelah lama mengalami status non akti yg diberikan oleh pangkalan DIKTI pada akhir Agustus lalu. Dari sekian banyak kampus diseluruh indonesia yg telah dinonaktifkan hanya beberapa saja yg baru saja kembali aktif termasuk UIT kali Ini menyusul. </p>
   </ol>

  </fieldset>
 </div>
 <div id="footer">
  <small>All Reserved Design by Putu's Belog http//:fikombk-putu-ariana.blogspot.co.id</small>
 </div> 
</body>

</html>

Berikut penampakannya jika dijalankan melalui browser:



5.  Kemudian buat  file  Galeri.html kemudian ketik script berikut

Kemudian Save dengan nama Galery.html

<!DOCTYPE html>
<html>
<head>
 <title>Box</title>
 <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head>

<body>
 <div id="header">
  <img src="img/logo.png" width="90px" height="90px">
 </div>
 <div id="nav">
  <a class="nav-item" href="index.html">Home</a>
  <a class="nav-item" href="berita.html">Berita </a>
  <a class="nav-item" href="informasi.html">Informasi </a>
  <a class="nav-item" href="Galery.html">Galery </a>
  <a class="nav-item" href="Download.html">Download </a>
  <a class="nav-item" href="contact.html">Contact </a>
 </div>
 <div id="content">
 <fieldset>
   <legend>Galery</legend>
  <center><h3><b>Galery Saya</b></h3></center>
  <div>  
   <a href="Musik/puspa.mp3" target="blank"><img src="img/ada-band.jpg" style="float: left; height: 150px; margin: 0px 50px 10px 30%; width: auto;" border="1" />
    <a href="img/profile.jpg" target="blank"><img src="img/profile.jpg" style="float: left; height: 150px; margin: 0px 10px 10px 0px; width:auto;" border="1" />
    </a>
   </div>
  </div>
  <div id="footer">
   <small>All Reserved Design by Putu's Belog http//:fikombk-putu-ariana.blogspot.co.id</small>
  </fieldset>
 </div>
 </body>
 </html>

Berikut penampakannya jika dijalankan melalui browser:



6.  Kemudian buat  file  Download.html kemudian ketik script berikut

Kemudian Save dengan nama Download.html

<!DOCTYPE html>
<html>
<head>
 <title>Box</title>
 <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head>

<body>
 <div id="header">
  <img src="img/logo.png" width="90px" height="90px">
 </div>
 <div id="nav">
  <a class="nav-item" href="index.html">Home</a>
  <a class="nav-item" href="berita.html">Berita </a>
  <a class="nav-item" href="informasi.html">Informasi </a>
  <a class="nav-item" href="Galery.html">Galery </a>
  <a class="nav-item" href="Download.html">Download </a>
  <a class="nav-item" href="contact.html">Contact </a>
 </div>
 <div id="content">
  <center><h3><b>Download Software</b></h3></center>
  <fieldset>
   <legend>Download Sofware</legend>
   <table>

    <tr>
     <td> 1. Web browser</td>
     <tr>
      <td><a href="aplikasi/28.0.1500.71_chrome_installer.exe">Google_chrom</a></td>    
     </tr>
     <tr>
      <td><a href="aplikasi/Firefox Setup 23.0b5.exe">Mozila Firefox</a></td>
     </tr>
     <tr></tr>
     <tr>
      <td>2. Pemrograman Destop</td>
     </tr>
     <tr>
      <td><a href="aplikasi/destop/Borland Delphi 7.rar">Borland Delphi 7</a></td>
     </tr>
     <tr>
      <td><a href="aplikasi/destop/Java Netbeans v8.0.2 - 32 Bit.rar">Java Netbeans v8.0.2 - 32 Bit</a></td>
     </tr>
     <tr>
      <td><a href="aplikasi/destop/Visual Studio 6.0 Enterprise Edition - Key 422 111111.zip">Visual Studio 6.0</a></td>
     </tr>
    </tr>
    
   </table>

  </fieldset>
 </div>
 <div id="footer">
  <small>All Reserved Design by Putu's Belog http//:fikombk-putu-ariana.blogspot.co.id</small>
 </div> 
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:



7.  Kemudian buat  file  Contact.html kemudian ketik script berikut

Kemudian Save dengan nama Contact.html

<!DOCTYPE html>
<html>
<head>
 <title>Box</title>
 <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head>

<body>
 <div id="header">
  <img src="img/logo.png" width="90px" height="90px">
 </div>
 <div id="nav">
  <a class="nav-item" href="index.html">Home</a>
  <a class="nav-item" href="berita.html">Berita </a>
  <a class="nav-item" href="informasi.html">Informasi </a>
  <a class="nav-item" href="Galery.html">Galery </a>
  <a class="nav-item" href="Download.html">Download </a>
  <a class="nav-item" href="contact.html">Contact </a>
 </div>
 <div id="content">
  <center><h3><b>Contact Persone</b></h3></center>
  <fieldset>
   <legend>Input Data Anda</legend>

   <form action="#" method="GET">
    <table>
     <tr>
      <td>Name</td>
      <td>:</td>
      <td> <input type="text" name="nama" size="20" maxlength="20" /> </td>
     </tr>
     <tr>
      <td>Email Address</td>
      <td>:</td>
      <td> <input type="email" name="email" size="30" maxlength="40" /> </td>
     </tr>
     <tr>
      <td>Phone Number</td>
      <td>:</td>
      <td> <input type="phone" name="phone" size="30" maxlength="40" /> </td>
     </tr>
     <tr>
      <td>Messange</td>
      <td>:</td>
      <td><textarea name="alamat" cols="50" required=""></textarea></td>
     </tr>
     <tr>
     <td>
      <button type="submit" value="simpan">Simpan</button>
      <button type="reset" value="reset">Reset </button>
     </td>
      
     </tr>
    </table>

   </form>
  </fieldset>
 </div>
 <div id="footer">
  <small>All Reserved Design by Putu's Belog http//:fikombk-putu-ariana.blogspot.co.id</small>
 </div> 
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:



Sekian tutorial Dari saya yang berjudul 
Membuat Box Model Dasboard Dan Login Administrator Mengunakan Kode HTML Dan CSS.
Apabila anda kebingungan dengan tutorial ini anda bisa bertanya dengan cara meningalkan pesan di comentar di bawah.

Kemudian jika anda ingin mendownload sourcodenya bisa download di bawah ini ada link atau icon download


Sekian Dan Terimakasih Semoga Bermanfaat bagi temen-temen.
Lokasi: Makassar, Makassar City, South Sulawesi, Indonesia

11 comments:

  1. Ikhwan7 March 2016 at 10:24

    ini bisa dikembangkan menjadi system administrator untuk aplikasi-aplikasi tertentu

    ReplyDelete
    Replies
    1. Putu Ariana7 March 2016 at 13:21

      iya bisa gan,,ini cuman pake html css doang gan masih statis,,,kalo udah pake php formnya udah dinamis gan.

      Delete
  2. Hendra Pratama7 March 2016 at 10:57

    thank's infonya gan...bermanfaat buat nambah-nambah ilmu...

    ReplyDelete
  3. Unknown16 March 2016 at 03:24

    makasih gan...mau praktek bookmark duluuu

    ReplyDelete
  4. Unknown16 March 2016 at 04:09

    makasihh ya gan,ane baru baca setengah tutorialnya hehehe
    izin ctrl + d ya gan :D

    ReplyDelete
  5. Unknown16 March 2016 at 06:00

    ijin bookmark dulu hehe

    ReplyDelete
  6. Unknown6 January 2017 at 21:18

    mantap dan bermanfaat, saran gan ...tambahin kodingan untuk Visual Basic untuk administrasi siswa

    ReplyDelete

luvne.com luvne.com ayeey.com cicicookies.com mbepp.com kumpulanrumusnya.comnya.com.com