Selasa, 28 Februari 2017

Mengenal Dan Mengetahui Fungsi Jumbotron Pada Bootstrap

Assalamualaikum Wr.Wb



Apa kabar semua?semoga sehat selalu pada postigan kali saya ingin berbagi sedikit pengetahuan yaitu tentang Jumbotron pada Bootstrap.Apa itu Jumbotron? yaitu merupakan sebuah style yang telah tersedia di Bootstrap yang bisa kita gunakan untuk meletakkan content yang berukuran cukup besar misalnya seperti untuk membuat header web ataupun content-content gambar yang di rasa membutuhkan ukuran yang cukup besar bisa menggunakan bootstrap agar tampilannya lebih rapi,oke lebih baik kita mulai saja.

  • Jumbotron Inside Container
Yaitu jumbotron yang berada di dalam container,artinya tampilan jumbotron lebarnya tidak memenuhi layar,tuliskan tag bawah ini

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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>

</head>
<body>
<div class="container">
<div class="jumbotron">
    <h1>Bootstrap Inside Container</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
   
</div>

</body>
</html>

Dan hasilnya adalah seperti berikut


  
  • Jumbotron Outside Container
yaitu tampilan jumbotron yang lebarnya akan memenuhi layar,tuliskan tag di bawah ini

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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>

</head>
<body>
<div class="jumbotron">
<h1>Jumbotron outside container</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>   
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>   
</div>
</body>
</html>

Dan inilah hasilnya

 


Berikut jika jumbotron di gunakan untuk membuat tampilan header web dengan menggunakan gambar, tinggal masukkan gambar pada jumbotron atur lebar dan tinggi gambar dan contoh hasilnya seperti di bawah


untuk gambar di atas lebih jelasnya lihat ss coding di bawah




Oke mungkin sekian dulu postingan kali ini semoga bermanfaat sampai jumpa di postingan berikutnya terimakasih sudah mau berkunjung.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Read More

Senin, 27 Februari 2017

Mengenal Bootstrap Grid

Assalamualaikum Wr.Wb

Oke teman - teman kali ini saya ingin mengajak teman semua untuk mengenal bootstrap grid,apa itu? Bootstrap Grid yaitu ukuran untuk mengatur besar kecl bagian elemet pada tampilan web yang ingin kita buat,selain itu juga bisa mempermudah kita untuk membuat tampilan layout sebuah web dan bisa untuk mengatur keresponsivan tampilan web yang kita buat.Ada 4 jenis grid pada bootstrap yaitu:
  • col-lg
Di gunakan untuk mengatur grid pada layar monitor komputer yang berkuran besar.
  • col-md
Di gunakan untuk mengatur grid pada layar monitor komputer yang berukuran medium.
  • col-sm
Di gunakan untuk mengatur grid pada layar tablet.
  • col-xs
Di gunakan untuk mengatur grid pada layar handphone.

Selain itu ada 12 size grid pada bootstrap,di mulai dari size 1 yaitu paling kecil 
sampai 12 merupakan size paling lebar.Mari kita coba untuk lebih jelasnya,kali ini saya akan menggunakan grid col-sm dengan size 1,2,3,4,dan 12.

Tuliskan tag di bawah ini,oh ya ini sudah saya tambahkan style css agar lebih jelas tampilannya antara element yang satu dengan yang lain

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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>
      div{
          background-color: #0066ff;
          color: white;
          border: 1px solid #fff;
          text-align: center;
          padding: 10px;
      }
  </style>
</head>
<body>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>

<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>

<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>

<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>


<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>

<div class="col-md-12">col-md-12</div>
</body>
</html>
Bila kurang jelas silakan lihat ss coding di bawah
 
Dan inilah hasilnya
 

Ya mungkin sekian dulu postingan kali ini semoga bermanfaat sampai jumpa dipostingan berikutnya terimakasih sudah mau berkunjung.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Read More

Sabtu, 25 Februari 2017

Mengenal Dan Menerapkan Glyphicons Pada Bootstrap

Assalamualaikum Wr.Wb



Oke pada kesempatan kali ini saya akan berbagi sedikit tutorial mengenai glyphicons pada bootstrap.Apa itu glyphicons?Glyphicons adalah kumpulan icon ringan yang telah di sediakan oleh bootstrap dan warnanya bisa di ganti - ganti seperti font,itu menurut pendapat saya sendiri lho ya?jika salah mohon di benarkan.Baiklah tidak usah panjang lebar mari kita mulai.

  • Pertama download boostrap dulu bagi yang belum punya,setelah itu tuliskan tag 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>

  •  Setelah itu kita masukkan tag untuk memanggil icon,saya akan mencoba membuat icon signal
<div class="col-sm-4">
        <span class="glyphicon glyphicon-signal logo"></span>   
        </div>    

Berikut SS hasilnya


Catatan:Icon di atas telah saya ubah warna dan ukurannya utuk lebih jelasnya silahkan lihat ss coding yang saya sertakan di akhir postingan ini.
  • Selanjutnya kita coba icon Globe atau bumi
 <div class="col-sm-4">
        <span class="glyphicon glyphicon-globe logo"></span>  
        </div>

Berikut SS Hasilnya




  • Lalu kita coba menampilkan icon user
 <div class="col-sm-4">
        <span class="glyphicon glyphicon-user logo"></span>  
        </div>

SS Hasilnya

  
  •  Yang terakhir kita coba untuk menampilkan icon music
 <div class="col-sm-4">
        <span class="glyphicon glyphicon-music logo2"></span>  
        </div>
 SS Hasilnya
 
Sebenarnya banyak sekali icon - icon yang ada pada glyphicons Bootstrap silahkan di sesuikan dengan kebutuhan masing - masing.Dan yang belum jelas mengenai glyphicons bisa lihat ss coding di bawah


Oke cukup sekian  postingan kali ini mengenai glyphicons semoga bermanfaat di balik banyaknya kekurangan sekian.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Read More

Jumat, 24 Februari 2017

Tutorial Membuat Button Dengan Bootstrap Button

Assalamualaikum Wr.Wb



Pada kesempatan kali ini saya akan berbagi tutorial membuat button dengan bootstrap.Ada 7 macam style tombol yang resedia pada bootstrap yaitu:
Default,Primary,Success,Info,Warning,Danger dan Link.Baiklah mari kita mulai

  • Button Default,yaitu button biasa berwarna putih
kali ini saya akan meletakkan button pada DIV agar tertata rapi.Tuliskan tag di bawah ini.
<div class="container">
 <h2>Contoh Button Styles</h2>
  <button type="button" class="btn btn-default">Default</button>
 </div>
Untuk hasilnya nanti saya sertai screenshoot di bawah
  • Button Primary, yaitu button dengan warna biru
  <div class="container">
<button type="button" class="btn btn-primary">Primary</button>
 </div>
  • Button Succes, yaitu button dengan warna hijau
  <div class="container"> 
<button type="button" class="btn btn-success">Success</button>
</div> 
  •  Button Info, yaitu button dengan warna biru muda
 <div class="container">
 <button type="button" class="btn btn-info">Info</button>
</div>  
  •  Button Warning, yaitu button dengan warna kuning
<div class="container">
<button type="button" class="btn btn-warning">Warning</button>
</div>
  •  Button Danger, yaitu button dengan warna merah
 <div class="container">
 <button type="button" class="btn btn-danger">Danger</button>
</div> 
  •  Button link, yitu button dengan tampilan link
 <div class="container">
 <button type="button" class="btn btn-link">Link</button>
</div> 
Tag di atas untuk membuat satu jenis tombol,jika di gabungkan tag nya seperti di bawah
<!DOCTYPE html>
<html>
<head>
    <title>Bosstrap Button</title>
<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>
</head>
<body>
<div class="container">
  <h2>Contoh Button Styles</h2>
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>     
</div>
</body>
</html>
Berikut SS hasilnya
  
SS coding nya
  
Mudah bukan untuk membuat button dengan bootstrap?Oke mungkin sekian dulu untuk tutorial kali ini sampai jumpa di postingan berikutnya.Sekian.

Referensi:http://w3schools.com/ 
 
Wassalamulaikum Wr.wb 
Read More

Kamis, 23 Februari 2017

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
Read More

Rabu, 22 Februari 2017

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

Read More

Selasa, 21 Februari 2017

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 
Read More

Senin, 20 Februari 2017

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
Read More

Sabtu, 18 Februari 2017

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
Read More

Jumat, 17 Februari 2017

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
Read More

Kamis, 16 Februari 2017

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 
Read More