Biongo Attacker

Cara membuat tabel menjadi menarik dengan CSS

Pada kesempatan yang indah ini saya akan memberikan kepada anda Cara membuat tabel menjadi menarik dengan CSS.Dan untuk melanjutkannya alangkah baiknya ketika anda mengetahui apa itu tabel terlebih dahulu.Baik saya akan jelaskan, Tabel adalah daftar yang berisi ikhtisar sejumlah data-data informasi yang biasanya berupa kata-kata maupun bilangan yang tersusun dengan garis pembatas.Membuat tabel dengan html mungkin bagi anda para programer website sudah tidak asing lagi, tetapi bagamaimana dengan mempercantik nya? Untuk itu pada kesempatan ini saya akan memberikan tutorial dimana kita akan mempercantik sebuah tabel dengan css.Langsung saja ke tutorialnya.

Tutorial Cara membuat tabel menjadi menarik dengan CSS

Copy script html di bawah ini dan kemudian copy juga script css di bawah nya script html.

 
<!DOCTYPE>
<html>
<head>
 <title>Styling Table</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
    <table width="1000" cellpadding="5">
     <tr class="head">
         <th width="44">No</th><th width="200">Nama</th><th width="152">TempatTinggal</th><th width="118">Status</th>
        </tr>
        <tr class="satu">
         <td align="center">1</td>
          <td>Alsaskar Mirando</td>
          <td>Manado</td><td align="center">Jomblo</td>
        </tr>
        <tr class="dua">
         <td align="center">2</td>
         <td>Bintang Algaza</td><td>Manado</td><td align="center">Jomblo</td>
        </tr>
        <tr class="satu">
         <td align="center">3</td>
         <td>Irsyad Assegaf</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
        <tr class="dua">
         <td align="center">4</td>
         <td>Diin Fach Rudin</td>
          <td>Manado</td>
          <td align="center">Kawin</td>
        </tr>
        <tr class="satu">
         <td align="center">5</td>
         <td>Alan Rian</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
        <tr class="dua">
         <td align="center">6</td>
         <td>Fikri Doka</td>
         <td>Manado</td><td align="center">Jomblo</td>
        </tr>
        <tr class="satu">
         <td align="center">7</td>
         <td>Wahyu Saputra</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
        <tr class="dua">
          <td align="center">8</td>
          <td>Jhun Matoka</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
        <tr class="satu">
          <td align="center">9</td>
          <td>David Sambenthiro</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
        <tr class="dua">
          <td align="center">10</td>
          <td>Haryono</td>
          <td>Manado</td>
          <td align="center">Jomblo</td>
        </tr>
    </table>
 
</body>
</html>


table, th, td {
 border-collapse:collapse;
 border:3px solid #f25170;
 font-size:20px;
}

.head {
 background: #202020;
}

.head th {
 padding:5px;
 color:#376180;
 font-size:30px;
 font-family:Techno, Impact, sans-serif;
}

.satu {
 background-color:#f66414;
}

.dua {
 background-color:#c39797;
}

.satu:hover, .dua:hover {
 background-color:#eae23e;
 font-weight:bold;
 cursor:pointer;
}

Catatan : pada kode html di atas terdapat <link rel="stylesheet" type="text/css" href="style.css"> jika kalian memberikan nama lain bukan style.css maka gantilah style.css itu dengan nama file yang kalian berikan nama lain.Style.css itu hanyalah sebagai contoh.

Dan hasilnya akan seperti pada gambar di bawah ini.

Script di atas bisa kalian edit sesuka kalian.
Dan akhir kata, Semoga Bermanfaat.

Cara membuat textarea membatasi dan menghitung karakter dengan bantuan javascript

Hallo sobat semua bertemu lagi bersama saya nih.Pada kesempatan ini saya akan membahas tentang bagaimana Cara membuat textarea membatasi dan menghitung karakter dengan bantuan javascript.Kemarin-kemarin kita sudah membahas tentang Cara memanggil javascript di html.Dimana tutorial kali ini ketika kita masukkan teks dia akan membatasinya dengan bantuan javascript.Atau sebagai contoh kita ambil disini twitte, ketika anda membuat tweet baru di twitter pasti anda melihat angka yang semakin hari semakin berkurang ketika anda menulis teks baru lagi, nah tidak lain halnya dengan tutorial kali ini yang akan kita bahas bersama-sama.Jika sobat semakin penasaran mari kita mulai.

Cara membuat textarea membatasi dan menghitung karakter dengan bantuan javascript

oke mari kita langsung saja.
copy atau anda bisa ketik langsung script di bawah ini.

<html>
<head>
<script language="javascript" type="text/javascript"> 
 var maxAmount = 500;
 function textCounter(textField, showCountField) {
  if (textField.value.length > maxAmount) {
   textField.value = textField.value.substring(0, maxAmount);
  } else { 
   showCountField.value = maxAmount - textField.value.length;
  }
 }
</script>
</head>
<body>
<h1><font color="blue"> Tutorial belajar Javascript Dengan Biongo Attacker </h1></font>
<br>
 <form>
  <textarea name="ta" rows="10" cols="9" style="width:340px;" onKeyDown="textCounter(this.form.ta,this.form.countDisplay);" onKeyUp="textCounter(this.form.ta,this.form.countDisplay);"></textarea>
  <br>
  <input readonly type="text" name="countDisplay" size="5" maxlength="5" value="500"> Sisa Karakter
 </form>
 <br>
 <i>Jangan lupa untuk like fanspage kami <a href="https://www.facebook.com/BiongoAttacker" target="_blank"> Disini </a><br> Dan jangan lupa untuk mengunjungi blog kami ^_^ selalu.</i>
</body>
</html>

setelah anda copy script diatas anda simpan dengan extension html contoh java.html.
Dan hasilnya kemungkinan besar akan seperti pada gambar di bawah ini.