Thursday, April 13, 2017

Membuat CardFan Pada Image Dengan CSS

     No comments
Animasi dalam sebuag website itu sangatlah penting untuk membuat content web lebih interaktif , terlebih lagi animasi yang digunakan sangat menarik, misalnya slider, pop up gambar dan juga animasi-animasi lainnya. Tapi, dikesempatan kali ini saya akan berbagi trik membuat cardfan pada gambar, itu seperti membuat latar gambar dibalik gambar. Contoh seperti pada gambar :


Untuk kodingnya tidak terlalu panjang dan ribet, kodingnya dibawah :





<!doctype html>



<html><head>



<title>Cardfan</title>



<style type="text/css">



<!--



#cardfan, #cardfan img { width: 400px; height: 350px; }



#cardfan { margin: 0 auto; }



#cardfan img { border: 32px solid #ffe;



box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);



position: absolute;



transform-origin: center 300px;



}



#cardfan:hover img:first-child {



transform: rotate(25deg);



}



#cardfan:hover img:last-child {



transform: rotate(−25deg);



}



-->



</style>



</head>



<body>



<div id="cardfan">



<img src="gambar agan. disini" alt="terserah agan">



<img src="gambara agan disini" alt="terserah agan">



</div>



</body>



</html>

Catatan:
Untuk tulisan berwarna merah ganti dengan nama gambar yang ingin ditampilkan
misalnya, /image/gambar.jpg

Selamat mencoba dan semoga berhasil !

Wednesday, April 12, 2017

Membuat Tabel Keren Dengan Caption

     No comments
Pada tutorial kali ini saya akan membagikan contoh membuat tabel sederhana yang mudah dipahami struktur syntaxnya. Untuk membuat membuat desain tabel ini silahkan ikuti langkah-langkah berikut :



kode CSS :
table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 5px;

        table-layout: auto;

}
caption { background: #444;

          caption-side: top;

          color: #fff;

          font-weight: bold;

          line-height: 1.4;

          margin: 0 5px;

          padding: 15px;

}

caption h2 { font-size: 20px;

             margin: 0 0 10px 0;

}

caption p { font-size: 16px;

            margin: 0;

}

thead th,

tfoot th,

tfoot td { background: #eee;

}

th, td { padding: 10px;

}

thead th:first-child {

  text-align: left;

}

tbody th,

tfoot th { text-align: left;

}

#kuantitas-column { width: 200px;

}

#harga-column { background: #ddd;

}

kode html : 

<body>



<table>

  <caption>

    <h2>Tabel Inventarisasi Barang</h2>

    <p>Anda dapat memanfaatkan tabel ini untuk menginventarisasi

       semua barang kebutuhan Anda.</p>

  </caption>

  <colgroup>

    <col id="produk">

    <col id="kuantitas">

    <col id="harga">

    <col id="total">

  </colgroup>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>
</body>
karena css nya tidak banyak sebaiknya diibuat dalam satu file saja agar tidak terlalu banyak membuat file pada directory

untuk kode lengkapnya :

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Tabel Keren Dengan Caption</title>

<style type="text/css">

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 5px;

        table-layout: auto;

}



caption { background: #444;

          caption-side: top;

          color: #fff;

          font-weight: bold;

          line-height: 1.4;

          margin: 0 5px;

          padding: 15px;

}
caption h2 { font-size: 20px;
    margin: 0 0 10px 0;

}
caption p { font-size: 16px;
          margin: 0;

}
thead th,
tfoot th,
tfoot td { background: #eee;
}
th, td { padding: 10px;
}
thead th:first-child {
  text-align: left;
}
tbody th,
tfoot th { text-align: left;
}
#kuantitas-column { width: 200px;
}
#harga-column { background: #ddd;
}
-->

</style>

</head>

<body>

<table>

  <caption>

    <h2>Tabel Inventarisasi Barang</h2>

    <p>Anda dapat memanfaatkan tabel ini untuk menginventarisasi

       semua barang kebutuhan Anda.</p>

  </caption>

  <colgroup>

    <col id="produk">

    <col id="kuantitas">

    <col id="harga">

    <col id="total">

  </colgroup>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

</body>
</html>

setelah semua telah selesai maka akan menghasilkan tampilan seperti pada gambar


Selamat mencoba dan semoga bermanfaat !

Tuesday, April 11, 2017

Menampilkan Value Combobox Dengan Javascript

     No comments
Combobox memiliki banyak manfaat salah satunya untuk menampilkan data saat kita klik,
Langsung saja ke koding, dibawah ini :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
 
<script>
function tampilkan(){
 
  var nama_data=document.getElementById("form1").select1.value;
  var p_kontainer=document.getElementById("container");
 
  if (nama_data=="my web1")
    {
        p_kontainer.innerHTML="Klik untuk melihat <a target='_blank' onclick='new windows' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }
  else if (nama_data=="my web2")
    {
        p_kontainer.innerHTML="Klik untuk <a target='_blank' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }
  else if (nama_data=="my web3")
    {
        p_kontainer.innerHTML="Klik disini <a target='_blank' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }else{
  p_kontainer.innerhtml="";
 }
}
</script>
</head>
<body>
<h2>Menampilkan Hasil Form HTML dengan JavaScript</h2>
 
<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Pilih : </label>
  <select id="select1" name="select1" onclick="tampilkan()">
 <option value="">Pilih
    <option value="my web1">My Website</option>
    <option value="my web2">My Website</option>
    <option value="my web3">My Website</option>
  </select>
  
</form>
 
<p id="container"></p>
 
</body>
</html>

Membuat Form Login Keren Dengan HTML dan CSS

     No comments
Dalam pemebuatan sebuah web perlu form login untuk membedakan user dengan admin, untuk itu perlu form yang keren dan enak dilihat mata serta simple.
langsung saja ke koding css nya sebagai berikut :

<!--
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #404040;
  background: #2d4259;
}

.register-judul {
  width: 270px;
  line-height: 43px;
  margin: 50px auto 20px;
  font-size: 19px;
  font-weight: 500;
  color: white;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  background: #d7604b;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #dc745e, #d45742);
  background-image: -moz-linear-gradient(top, #dc745e, #d45742);
  background-image: -o-linear-gradient(top, #dc745e, #d45742);
  background-image: linear-gradient(to bottom, #dc745e, #d45742);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.register {
  margin: 0 auto;
  width: 230px;
  padding: 20px;
  background: #f4f4f4;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}

input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.register-masukan {
  display: block;
  width: 100%;
  height: 38px;
  margin-top: 2px;
  font-weight: 500;
  background: none;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
}
.register-masukan:focus {
  border-color: #1e9ce6;
  outline: 0;
}

.register-tombol {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 25px;
  font-size: 16px;
  font-weight: bold;
  color: #494d59;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: #fcfcfc;
  border: 1px solid;
  border-color: #d8d8d8 #d1d1d1 #c3c3c3;
  border-radius: 2px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
  -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
}

.register-tombol:active {
  background: #eee;
  border-color: #c3c3c3 #d1d1d1 #d8d8d8;
  background-image: -webkit-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: -moz-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: -o-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: linear-gradient(to bottom, #eeeeee, #fcfcfc);
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
}

.register-tombol:focus {
  outline: 0;
}

.register-tukar {
  height: 32px;
  margin-bottom: 15px;
  padding: 4px;
  background: #6db244;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #60a83a, #7dbe52);
  background-image: -moz-linear-gradient(top, #60a83a, #7dbe52);
  background-image: -o-linear-gradient(top, #60a83a, #7dbe52);
  background-image: linear-gradient(to bottom, #60a83a, #7dbe52);
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
}

.register-tukar-input {
  display: none;
}

.register-tukar-label {
  float: left;
  width: 50%;
  line-height: 32px;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.register-tukar-input:checked + .register-tukar-label {
  font-weight: 500;
  color: #434248;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: white;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

:-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}

::-moz-placeholder {
  color: #aaa;
  font-weight: 300;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: #aaa;
  font-weight: 300;
}

:-ms-input-placeholder {
  color: #aaa;
  font-weight: 300;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

-->


dan untuk koding htmlnya dibawah ini : 

<body>
  <h1 class="register-judul">Selamat Datang</h1>
  <form class="register" action="" method="post">
    <!--div class="register-tukar">
      <input type="radio" name="web" value="GPIB EKKLESIA DUMAI" id="gpib" class="register-tukar-input" checked>
      <label for="gpib" class="register-tukar-label">GPIB</label>
      <input type="radio" name="web" value="APRIL YANTONIUS SIHURA" id="aprilucyanto" class="register-tukar-input">
      <label for="aprilucyanto" class="register-tukar-label">YANTONIUS S.</label>
    </div-->
    <input type="email" class="register-masukan" placeholder="Alamat Email">
    <input type="password" class="register-masukan" placeholder="Password">
    <input type="submit" value="Login" class="register-tombol">
  </form>
</body>


Kalau Untuk kode Lengkapnya :

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>contoh css 8.1</title>

<style type="text/css">

<!--

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}



article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

  display: block;

}



body {

  line-height: 1;

}



ol, ul {

  list-style: none;

}



blockquote, q {

  quotes: none;

}



blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



body {

  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;

  color: #404040;

  background: #2d4259;

}



.register-judul {

  width: 270px;

  line-height: 43px;

  margin: 50px auto 20px;

  font-size: 19px;

  font-weight: 500;

  color: white;

  color: rgba(255, 255, 255, 0.95);

  text-align: center;

  text-shadow: 0 1px rgba(0, 0, 0, 0.3);

  background: #d7604b;

  border-radius: 3px;

  background-image: -webkit-linear-gradient(top, #dc745e, #d45742);

  background-image: -moz-linear-gradient(top, #dc745e, #d45742);

  background-image: -o-linear-gradient(top, #dc745e, #d45742);

  background-image: linear-gradient(to bottom, #dc745e, #d45742);

  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

}



.register {

  margin: 0 auto;

  width: 230px;

  padding: 20px;

  background: #f4f4f4;

  border-radius: 3px;

  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

}



input {

  font-family: inherit;

  font-size: inherit;

  color: inherit;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.register-masukan {

  display: block;

  width: 100%;

  height: 38px;

  margin-top: 2px;

  font-weight: 500;

  background: none;

  border: 0;

  border-bottom: 1px solid #d8d8d8;

}

.register-masukan:focus {

  border-color: #1e9ce6;

  outline: 0;

}



.register-tombol {

  display: block;

  width: 100%;

  height: 42px;

  margin-top: 25px;

  font-size: 16px;

  font-weight: bold;

  color: #494d59;

  text-align: center;

  text-shadow: 0 1px rgba(255, 255, 255, 0.5);

  background: #fcfcfc;

  border: 1px solid;

  border-color: #d8d8d8 #d1d1d1 #c3c3c3;

  border-radius: 2px;

  cursor: pointer;

  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);

  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);

  -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);

  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);

}



.register-tombol:active {

  background: #eee;

  border-color: #c3c3c3 #d1d1d1 #d8d8d8;

  background-image: -webkit-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: -moz-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: -o-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: linear-gradient(to bottom, #eeeeee, #fcfcfc);

  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);

  box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);

}



.register-tombol:focus {

  outline: 0;

}



.register-tukar {

  height: 32px;

  margin-bottom: 15px;

  padding: 4px;

  background: #6db244;

  border-radius: 2px;

  background-image: -webkit-linear-gradient(top, #60a83a, #7dbe52);

  background-image: -moz-linear-gradient(top, #60a83a, #7dbe52);

  background-image: -o-linear-gradient(top, #60a83a, #7dbe52);

  background-image: linear-gradient(to bottom, #60a83a, #7dbe52);

  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);

  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);

}



.register-tukar-input {

  display: none;

}



.register-tukar-label {

  float: left;

  width: 50%;

  line-height: 32px;

  color: white;

  text-align: center;

  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);

  cursor: pointer;

}



.register-tukar-input:checked + .register-tukar-label {

  font-weight: 500;

  color: #434248;

  text-shadow: 0 1px rgba(255, 255, 255, 0.5);

  background: white;

  border-radius: 2px;

  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);

  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);

}



:-moz-placeholder {

  color: #aaa;

  font-weight: 300;

}



::-moz-placeholder {

  color: #aaa;

  font-weight: 300;

  opacity: 1;

}



::-webkit-input-placeholder {

  color: #aaa;

  font-weight: 300;

}



:-ms-input-placeholder {

  color: #aaa;

  font-weight: 300;

}



::-moz-focus-inner {

  border: 0;

  padding: 0;

}



-->

</style>

</head>

<body>

  <h1 class="register-judul">Selamat Datang</h1>

  <form class="register" action="" method="post">

    <!--div class="register-tukar">

      <input type="radio" name="web" value="GPIB EKKLESIA DUMAI" id="gpib" class="register-tukar-input" checked>

      <label for="gpib" class="register-tukar-label">GPIB</label>

      <input type="radio" name="web" value="APRIL YANTONIUS SIHURA" id="aprilucyanto" class="register-tukar-input">

      <label for="aprilucyanto" class="register-tukar-label">YANTONIUS S.</label>

    </div-->

    <input type="email" class="register-masukan" placeholder="Alamat Email">

    <input type="password" class="register-masukan" placeholder="Password">

    <input type="submit" value="Login" class="register-tombol">

  </form>

</body>

</html>

Tuesday, April 4, 2017

Membuat Tabel Keren dengan HTML dan CSS

     No comments
Pada tutorial kali ini saya akan membuat Tabel pada HTML dengan CSS.

Berikut adalah tampilan gambar dari tutorial ini :


Langsung saja elemen css dibawah ini :
<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 10px 5px;

        table-layout: auto;

        empty-cells: hide;

}

thead th,

tfoot th,

tfoot td { background: #eee;

}

th, td { border: 1px solid #ccc;

         padding: 10px;

}

thead th:first-child {

  text-align: left;

}

tbody th,

tfoot th { text-align: left;

}

tbody tr:nth-child( even ) {

  background: #ddd;

}

-->


dan berikut adalah kode untuk tabel standar :

<table>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

dan untuk kode lengkapnya :

<html>

<head>

<title>Tabel Keren dengan CSS</title>

<style type="text/css">

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 10px 5px;

        table-layout: auto;

        empty-cells: hide;

}



thead th,

tfoot th,

tfoot td { background: #eee;

}



th, td { border: 1px solid #ccc;

         padding: 10px;

}



thead th:first-child {

  text-align: left;

}



tbody th,

tfoot th { text-align: left;

}



tbody tr:nth-child( even ) {

  background: #ddd;

}

-->

</style>

</head>

<body>



<table>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

</body>

</html>