Membuat Tabel Bervariasi warna Dengan Bootstrap

Assalamualaikum Wr.Wb

Pada postingan ini saya akan melanjutkan tutorial menggunakan Botstrap yaitu membuat tabel bervariasi warna,seperti apa?mari kita mulai

• Tuliskan tag wajib di bawah ini jika ingin menggunakan bootstrap dan bagi yang belum punya silahkan download dulu

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

•  Lalu tinggal kita buat tabelnya

<div class="container">
  <h2>Ini contoh tabel berwarna dengan bootstrap</h2>
  <p>Ada beberapa style tabel yang telah di sediakan dalam bootstrap yaitu: .defaulf(tabel background putih) .success(tabel background hijau) ,info(tabel background biru muda) , danger(tabel background merah)warning(tabel bakcground kuning) dan active(tabel background abu-abu)</p>
  <table class="table">
    <thead>
      <tr>
        <th>Nama Depan</th>
        <th>Nama Belakang</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>crus</td>
        <td>Def</td>
        <td>email@mereka.com</td>
      </tr>     
      <tr class="success">
        <td>cres</td>
        <td>john</td>
        <td>email@mereka.com</td>
      </tr>
      <tr class="danger">
        <td>cros</td>
        <td>Moe</td>
        <td>email@mereka.com</td>
      </tr>
      <tr class="info">
        <td>cris</td>
        <td>Dooley</td>
        <td>email@mereka.com</td>
      </tr>
      <tr class="warning">
        <td>crus</td>
        <td>Refs</td>
        <td>email@mereka.com</td>
      </tr>
      <tr class="active">
        <td>cras</td>
        <td>veson</td>
        <td>email@mereka.com</td>
      </tr>
    </tbody>
  </table>
</div>

Dan ini hasil tabel yang kita buat

  

Yang masih kurang jelas silahkan lihat ss coding di bawah

Oke sekian dulu postingan kali ini semoga bermanfaat di balik banyaknya kekurangan,sekian.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

Tutorial Bootstrap Image Shapes

Assalamualaikum Wr.Wb

Pada postingan sebelumnya sudah saya bahas sedikit tentang pengertian bootstrap dan kali ini saya akan berbagi sedikit tutorial tentang Image Shapes,seperti apa itu? lansung saja kita mulai.oh ya sebelumnya bagi yang belum punya bootstrap silakan download dulu di getbootstrap.com/.

• Rounded Cornes

Massukan tag wajib bootstrap di bawah ini
 

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Berikut tag HTML nya
 

<div class="container">
  <h2>Rounded Corners</h2>
  <p>Contoh Rounded Corners</p>           
  <img src="123.JPEG" class="img-rounded" alt="123" width="304" height="236">
</div>

 Untuk lebih jelasnya lihat ss coding di bawah

Dan inilah hasilnya

• Circle

 Massukan tag wajib bootstrap di bawah ini
 

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Masukkan tag HTML nya

<div class="container">
  <h2>Circle</h2>
  <p>Contoh Image Circle</p>           
  <img src="123.JPEG" class="img-circle" alt="123" width="304" height="236">
</div>

SS Coding

SS Hasilnya

• Thumnail

Massukan tag wajib bootstrap di bawah ini
 

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Masukkan tag HTML nya

<div class="container">
  <h2>Thumbnail</h2>
  <p>Contoh Image Thumbnail</p>           
  <img src="123.JPEG" class="img-thumbnail" alt="123" width="304" height="236">
</div>

SS coding

   

SS Hasilnya

Mudah bukan untuk membuat shapes pada gambar ? Namun kamu harus download bootstrap dan  saya sarankan gambar serta file html nya  di simpan pada folder bootstrap supaya mudah dan tidak ribet serta semua style akan berfungsi dengan baik.Oke sekian dulu postingan kali ini semoga bermanfaat,Sekian.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

Mengenal Bootstrap

Assalamulaikum Wr.Wb

Kalau pada postingan saya yang sebelumnya banyak membahas mengenai tutorial tutorial HTML dan Css,pada postingan kali ini saya akan sedikit membahas tentang apa itu Bootstrap.

• Latar Belakang

Kebutuhan akan website sekarang ini sudah sangat banyak,dengan adanya bootstrap bisa mempermudah dan mempercepat dalam pembuatan tampilan website.Dengan adanya postingan ini dan postingan selanjutnya tentang bootstrap di harapkan bisa di jadikan sebagai pembelajaran kita semua termasuk saya sendiri.

• Pengertian

Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman web  yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi Css (clas) dalam berkas HTML yang Telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Dengan kata lain Bootstrap Adalah kumpulan style siap pakai,Jadi jika teman teman ingin membuat tampilan web dengan menggunakan bootstrap maka teman - teman tidak perlu repot - repot membuat style dari awal karena di Bootstrap sudah menyediakan itu.

Berikut keunggulan Bootstrap

• Estimasi waktu sedikit lebih cepat. Karena elemen-elemen yang biasa ada dalam sebuah website pada umumnya sudah dibuatkan class-nya oleh bootstrap ini, jadi kita tinggal memanggilnya dalam theme.
• Terlihat lebih rapi untuk tampilan template bootstrap. Mungkin ini akan sedikit relatif, karena kebiasaan disetiap masing-masing developer membuat coding pasti berbeda-beda. Namun pada dasarnya karena bootstrap sudah terstruktur, untuk modifikasi class dan penambahan class memang sebaiknya mempertahankan kerapihan kode yang sudah ada lebih dulu.
• Template yang menggunakan Bootstrap juga tampak lebih ringan.
• Alat Dan Bahan

1. Software Text - editor(notepad++,sublime)
2. File bootstrap  

• Tahap Penyelesaian

1. Download dulu Bootstrapnya,kunjungi getbootstrap.com/ 
2. Setelah itu ekstrak Bootstrapnya
3. Jika sudah di ekstrak coba buat halaman (HTML) baru dan simpan pada file Bootstrap yang telah di ekstrak tadi.
4. Masukkan tag dasar untuk memanggil bootstrap 

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>

Masukkan tag di atas di antara atribut <head> dan </head>

Jika sudah memasukkan tag di atas teman - teman tingal memanggil style nya dengan HTML.

• Kesimpulan

Dengan adanya bootstrap membuat tampilan website menjadi lebih mudah dan cepat.Lebih jelasnya tunggu di postingan saya yang lain yang akan membahas mengenai bootstrap.

Mungkin pada postingan berikutnya saya akan berbagi tutorial tentang Bootstrap ini.Oke mungkin cukup sekian dulu postingan kali ini sampai jumpa di postingan berikutnya.

• Referensi

http://w3schools.com/ 

Wassalamualaikum Wr.Wb 

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