Sunday 25 October 2015

Tutorial Cara Desain Web Menggunkan Css dan Boostrap Yang Mudah Dengan Contoh Program Html

Setelah pada artikel sebelumnya membahas Arti Web dan Perbedaan Web Statis dengan Dinamis, pada artikel  kali akan membahas tentang Cara Mendisain Web Agar Lebih Menarik. Langsung saja ke penjelasannya.

Tips Merancang dan Mendesain Web Menggunakan Css dan Boostrap Yang Bagus Dengan Contoh Skrip Penggunaanya Serta Pengertian dan Manfaat Css.

Ada banyak sekali Cara Untuk Mendesain Sebuah Web Agar Tampilannya Bagus diantaranya dengan menggunakan gambar yang menarik, css, boostrap atau dengan layouting yang bagus. Kali ini yang akan saya jelaskan adalah cara mendesign Web Menggunakan Css dan Boostrap.
CSS framework adalah sekumpulan abstraksi yang disediakan oleh pengembang framework untuk memberikan fungsionalitas umum dari aplikasi, yang kemudian dapat digunakan oleh pengguna framework untuk membangun sebuah aplikasi spesifik.

Beberapa hal yang di pertimbangkan untuk memakai CSS Framework,yaitu:
·         Save Time yaitu  Mempercepat Pengerjaan Desain
·         Customizable yaitu Bisa diubah sesuai keinginan
·         Consistency yaitu  Sudah terdokumentasi dengan baik
·         Updates yaitu  Selalu ada update terbaru
·         Responsive yaitu  Bisa diakses dari mana saja

CSS Frameworkyang bisa di download secara gratis diantaranya yaitu:
Ø  Bootstrap
http://getbootstrap.com/
Ø  Skeleton
http://getskeleton.com/
Ø  Foundation
http://foundation.zurb.com/
                                                                           
http://auxeleri.blogspot.co.id/
    

Twitter Bootstrap merupakan sebuah framework yang dapat menyelesaikan permasalahandalam mendesain web. Bootstrap diciptakan oleh dua orang programmer di Twitter, yaitu mark octo dan jacob thornton pada tahun 2011. Kemudian pada januari 2012, Bootstrap merealease versi 2.0 yang didalamnya sudah memasukkan fitur responsive layout.
Manfaat  bootstrap yaitu mampu menghadirkan desain yang minimalis namun modern. Bootstrap dilengkapi dengan html, css, dan js untuk segala macam hal, tetapi dapat diringkas dengan beberapa kategori yang terdapat pada dokumentasi bootstrap.

Framework bootstrap dapat diunduh pada link berikut :
http://getbootstrap.com/getting-started/


 Cara menggunkan boostrap
Pertama download bootsrap terlebih dahulu, kemudian ekstrak file boostrap yang sudah di download tadi, selanjutnya buat folder Css di tempat anda menyimpa file html kamu. Kemudian pastekan file boostrap tadi di folder Css tersebut.

<!DOCTYPE html>
<html>
<head>
<title>Contoh menggunkan Bootsrap</title>
     <link href = “css/bootstrap.min.css rel=”stylesheet”                         media=”screen””>
</head>
<body>
     <div class=”row”>
           <div class=”col-xs-6 col-md-4”>
                <h3> Content1 <h3>
                <p>Lorem ipsum dolor sit amet, consectetur     adipiscing elit. Donec imperdiet tincidunt urna, vitae sodales risus ornare sed. Donec porttitor quam iaculis, suscipit magna quis, vehicula enim. Ut vel nisl odio. Curabitur egestas nisl ac dui rutrum, sit amet mollis leo rutrum. In vel ex eget sem pretium faucibus vel convallis ligula. Duis efficitur lectus vitae tortor suscipit, sit amet posuere mauris efficitur. Donec imperdiet ligula a libero imperdiet, in dignissim nisi pellentesque. Duis ac leo ac nulla pellentesque tempus. Mauris at eros sit amet nisl bibendum tempor</p>
           </div>
           <div class=”col-xs-6 col-md-4”>
                <h3> Content1 <h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet tincidunt urna, vitae sodales risus ornare sed. Donec porttitor quam iaculis, suscipit magna quis, vehicula enim. Ut vel nisl odio. Curabitur egestas nisl ac dui rutrum, sit amet mollis leo rutrum. In vel ex eget sem pretium faucibus vel convallis ligula. Duis efficitur lectus vitae tortor suscipit, sit amet posuere mauris efficitur. Donec imperdiet ligula a libero imperdiet, in dignissim nisi pellentesque. Duis ac leo ac nulla pellentesque tempus. Mauris at eros sit amet nisl bibendum tempor</p>
           </div>
           <div class=”col-xs-6 col-md-4”>
                <h3> Content1 <h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet tincidunt urna, vitae sodales risus ornare sed. Donec porttitor quam iaculis, suscipit magna quis, vehicula enim. Ut vel nisl odio. Curabitur egestas nisl ac dui rutrum, sit amet mollis leo rutrum. In vel ex eget sem pretium faucibus vel convallis ligula. Duis efficitur lectus vitae tortor suscipit, sit amet posuere mauris efficitur. Donec imperdiet ligula a libero imperdiet, in dignissim nisi pellentesque. Duis ac leo ac nulla pellentesque tempus. Mauris at eros sit amet nisl bibendum tempor</p>
           </div>
     </div>

     <footer>
   Copyright &Copy; 2015 <a href="#">Admin</a>. ALl Right Reserved.
     </footer>
</body>

</html>

Demikian sedikit ilmu tentang Tips mendisain Sebuah Halaman Web. semoga bermanfaat.

No comments:

Post a Comment

Fakta-Fakta Tentang Otak dan Tips Bijak Manajemen Otak Agar Bekerja Optimal

CARA BIJAK MANAJEMEN OTAK GELOMBANG OTAK Berdasarkan pengukuaran dengan menggunakan alat ukur yang disebut EEG (electro encephalograph...