Membuat Tabel Color Dengan Css

Assalamualaikum Wr.Wb

Pada kesempatan kali ini saya akan berbagi tutorial membuat tabel color dengan menggunakan css,tidak usah panjang lebar mari kita mulai.

Seperti biasa kita buat style untuk tabel yang akan kita buat,Letakkan diantara tag <head> dan </head>

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #ff00ff;
    color: white;
}
</style>

Itu tadi untuk syle tabel sekarang mari kita buat tabelnya dengan menggunakan HTML

<table>
  <tr>
    <th>Nama depan</th>
    <th>Nama belakang</th>
    <th>Saldo</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

Dan berikut hasil tabel yang kita buat

   
SS coding dari tabel di atas

Mungkin sekian dulu tutorial tabel color semoga bermanfaat dan sampai jumpa di postingan berikitnya.Sekian.

Referensi:http://w3schools.com/

Wassalamulaikum Wr.Wb

Membuat Form Sederhana

Assalamualaikum Wr.Wb

Pada kesempatan kali ini saya akan berbagi sedikit tutorial membuat form sederhana,form ini saya buat dengan menggunakan style css.Langsung saja kita mulai,ada 3 bagian form yang akan saya buat kali ini yaitu :input teks,menu select,dan tombol button.

Seperti biasa kita buat style untuk form yang akan kita buat

• Style untuk input teks dan menu select

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #cc00cc;
    border-radius: 4px;
    box-sizing: border-box;
}

•  Style untuk button submit

input[type=submit] {
    width: 100%;
    background-color: #1a1aff;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

• Style untuk efek hover saat kita mengarahkan mouse ke tombol submit

input[type=submit]:hover {
    background-color: #45a049;}

•  Style untuk div yaitu untuk mengatur tempat form yang kita buat

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

Itu tadi untuk style nya sekarang mari kita buat form nya dengan HTML

<div>
  <form>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Nama Awal">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Nama Akhir">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="indo">Indonesia</option>
    </select>
 
    <input type="submit" value="Submit">
  </form>
</div>      

Berikut SS coding nya bagi yang kurang jelas

Dan ini di hasilnya

Oke itu tadi sedikit tutorial membuat form sederhana semoga bermanfaat di balik banyaknya kekurangan sampai jumpa di postingan berikutnya,sekian.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

Mengatur List Dengan CSS

Assalamualaikum Wr.Wb

Pada postingan sebelumnya saya telah membahas tentang galery responsive,dan kali ini saya akan berbagi sedikit ilmu yaitu bagaimana mengatur List dengan CSS.Oke mari kita mulai

•   Different List Item Markers

  ini di gunakan untuk list seperti: List Lingkaran,romawi,huruf dll
  
  

  <style>
  ul.a {
      list-style-type: circle;
  }
  
  ul.b {
      list-style-type: square;
  }
  
  ol.c {
      list-style-type: upper-roman;
  }
  
  ol.d {
      list-style-type: lower-alpha;
  }
  </style>
  
  Letakkan kode di atas di antara atribut <head> dan </head> 
  
  Berikut untuk scrip list Html nya
  
  <p>Ini Hasilnya</p>
  <ul class="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
  </ul>
  
  <ul class="b">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
  </ul>
  
  <p>Example of ordered lists:</p>
  <ol class="c">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
  </ol>
  
  <ol class="d">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
  </ol>

  
  SS Hasilnya
  
  

• Position The List Item Markers

   Ada dua macam tag di sini yaitu inside dan outside
  
  • Inside membuat list agak menjorok ke dalam
  • Outside membuat list agak menjorok ke luar 
   
  Berikut tag style nya

<style>
ul.a {list-style-position:inside;}
ul.b {list-style-position:outside;}
</style>

Dan ini tag List Html nya

 <p>List Inside</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>List Outside</p>
<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

SS Hasilnya

• Styling List With Colors 

  Ini untuk memberi efek warna pada list yang kita buat
  
  
  berikut style nya

  <style>
  ol {
      background: #ff9999;
      padding: 20px;
  }
  
  ul {
      background: #3399ff;
      padding: 20px;
  }
  
  ol li {
      background: #ffe5e5;
      padding: 5px;
      margin-left: 35px;
  }
  
  ul li {
      background: #cce5ff;
      margin: 5px;
  }
  </style>

   

Berikut tag list Html nya

<p>List Inside</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<p>List Outside</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

Berikut SS Hasil

Oke,itu tadi sedikit tutorial mengatur list dengan Css,semoga bermanfaat sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

Tutorial Membuat Galery Responsive

Assalamualaikum Wr.Wb

Galery Responsive? mengapa saya memposting kembali tentang web Responsive?Karena sebuah tampilan web responsiv memang sangat penting sekarang ini,karena orang tidak selalu saja browsing lewat laptop atau komputer tapi terkadang lewat perangkat yang memiliki layar yang kecil seperti smartphone misalnya.Mungkin sekarang justru lebih banyak orang yang browsing lewat hp,untuk itu sangatlah penting untuk membuat tampilan web responsive.Oke langsung saja kita mulai membuat galery responsive.

Seperti pada postingan sebelumnya kita buat style untuk galery kita
Letakkan atribut di antara <style> dan </style>

<head>
<style>
        div.img{
            border: 1px solid #ccc;
        }
        div.img:hover{
            border: 1px solid #777;
        }
        div.img img{
            width: 100%
            height:auto;
        }
        div.desc{
            padding: 15px;
            text-align: center;
        }
        *{
            box-sizing: border-box;
        }
        .responsive{
            padding: 0 6px;
            float: left;
            width: 24.99999%;
        }
        @media only screen and (max-width: 700px){
            .responsive{
                width: 49.99999%;
                margin: 6px 0;
            }
        }
        @media only screen and (max-width: 500px){
            .responsive{
                width: 100%;
            }
        }
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
    </style>
 </head>

Itu dia untuk style nya sekarang tag untuk galery itu sediri.Letakkan tag di antara <body> dan </body>

<body>
<h2>Contoh Galery Responsive</h2>
<div class="responsive">
    <div class="img">
        <img src="ss1.jpeg" width="300" height="200">
        <div>Beri deskripsi untuk gambar</div>
    </div>
</div>

<div class="responsive">
    <div class="img">
        <img src="ss2.jpeg" width="300" height="200">
        <div>Beri deskripsi untuk gambar</div>
    </div>
</div>

<div class="responsive">
    <div class="img">
        <img src="ss3.jpeg" width="300" height="200">
        <div>Beri deskripsi untuk gambar</div>
    </div>
</div>

<div class="clearfix"></div>
<div style="padding: 6px;">
    <p>Itu tadi contoh galeri Responsive</p>
    <p>Resize ukuran browser untuk melihat responsive atau tidaknya galery ini</p>
</div>
</body> 

Catatan: Untuk nama dan format gambar harus sesuai dengan nama dan format gambar yang ingin di masukkan.Dan untuk ukuran dapat di sesuaikan dengan keinginan teman - teman semua.

Ini SS cuplikan coding nya

 Berikut hasilnya

Oke itu tadi tutorial membuat galery responsive,silakan di sesuaikan dan di perindah tampilannya sesuai dengan keinginan teman - teman semua terimakasih sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb 

Membuat Navbar Responsive Dengan CSS

Assalamualaikum Wr.Wb

Pada postingan kali ini saya akan berbagi sedikit ilmu tentang bagaimana cara membuat navbar responsiv dengan css.Apa itu Css? Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.Untuk labih jelasnya baca DI SINI.

Lalu apa itu navbar responsiv? yaitu navbar yang tampilannya bisa menyesuaikan dengan layar perangkat kita baik itu komputer,tablet hp dll.

Untu lebih jelasnya lihat gambar di bawah ini

Sudah jelas bukan? Oke,mari kita mulai

Untuk membuat tampilan responsiv gunakan tag <meta> dalam atribut <head>

• tag meta

<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

selanjutnya kita buat style untuk navbarnya.Letakkan <style> pada < /style>

Berikut SS Codingnya

Yang udah gak sabar nih codingnya :v

<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {margin:0;}
    ul.topnav{
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #ff1a75;
    }
    ul.topnav li{
        float: left;
    }
    ul.topnav li a{
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    ul.topnav li a:hover:not(.active) {background-color: #111;}
    ul.topnav li a.active{background-color:  #00aaff}
    ul.topnav li.right{float: right;}
@media screen and (max-width: 600px){
    ul.topnav li.right,
    ul.topnav li{float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
    <li><a class="active" href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li class="right"><a href="#">About</a></li>
</ul>
<div style="padding: 0 16px;">
    <h2>Contoh Navbar Responsive</h2>
    <p>Responsive web desain ini mungkin mengingatkan kita pada desain web liquid jaman dulu (sebelum populernya fixed width). Pada artikel ini, Jeffrey Zeldman menulis: It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. (Beberapa diantara kita menuju penggunaan liquid webdesign, kembali sebagaimana tahun 1990an, hanya saja tidak lagi jelek). Ya, responsive web desain memang bukan liquid desain, tetapi lebih tepat liquid with style :D.</p>
    <p>Responsive web desain ini mungkin mengingatkan kita pada desain web liquid jaman dulu (sebelum populernya fixed width). Pada artikel ini, Jeffrey Zeldman menulis: It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. (Beberapa diantara kita menuju penggunaan liquid webdesign, kembali sebagaimana tahun 1990an, hanya saja tidak lagi jelek). Ya, responsive web desain memang bukan liquid desain, tetapi lebih tepat liquid with style :D.</p>
</div>
</body>
</html>

oh ya,saya tidak akan menjelaskan satu persatu mengenai tag di atas jadi silahkan di pelajari sendiri hehe, ya karena akan banyak sekali jika saya jelaskan satu persatu.Oke sekian berbagi ilmu membuat navbar responsiv semoga bermanfaat di balik banyaknya kekurangan postingan ini.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb