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
CSS
Frameworkyang bisa di download secara gratis diantaranya yaitu:
Ø
Bootstrap
http://getbootstrap.com/
Ø
Skeleton
http://getskeleton.com/
Ø
Foundation
http://foundation.zurb.com/
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