Breaking News

Membuat Halaman Web Pertama Dengan Bootstrap

Januari 18, 2018

  1. Judul
Membuat Halaman Web Pertama Dengan Bootstrap


  1. Pendahuluan
Kali ini saya akan memposting apa yang saya lakukan dalam mempelajari Bootstrap kali ini. Sebelumnya saya sngat bingung sekali mempraktikan bootstrap pertama kali tapi lama kelamaan saya tidak sabar karena saat saya mencoba terus menerus tapi hasil tampilannya tidak sesuai lalu saya bertanya kepada teman saya dan ternyata setelah saya tahu tenyata bootstrap itu lumayan mudah bagi saya. Langsung saja ya….


  1. Pengertian
Bootstrap adalah kerangka front-end gratis untuk pengembangan web lebih cepat dan mudah.


  1. Latar belakang dan batasan permasalahan
Saya mempelajari bootstrap karena saya ingin bisa membuat suatu web yang baik dan menarik.


  1. Maksud dan tujuan
Ingin bisa mempraktikan dan membuat web yang rapid an menarik.


  1. Hasil yang diharapkan
Web yang dapat diminati banyak orang dan bermanfaat bagi banyak orang.


  1. Alat dan Bahan
  1. Laptop
  2. File Items
  3. Text Editor
  4. Browser


  1. Proses tahap pekerjaan
Kali ini saya membuat halaman web dengan bootstrap.
  1. Tambahkan doctype HTML5
Bootstrap menggunakan elemen HTML dan property CSS yang memerlukan DOCTYPE HTML5. Selalu sertakan DOCTYPE HTML5 di awal halaman, bersama atribut lang dan set karakter yang benar :
<!DOCTYPE html>
<html lang="en">   
 <head>      
<meta charset="utf‐8">    
</head> 
</html>
  1. Bootstrap 3 adalah ponsel pertama
Bootstrap dirancang untuk responsive terhadap perangkat mobile. Gaya mobile pertama adalah bagian dari kerangka inti.
Untuk memastikan rendering dan sentuhan zoom yang benar, tambahkan tag <meta> berikut di dalam elemen <head> :
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
Bagian width=device-width mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).
initial-scale=1 bagian ini menetapkan tingkat pembesaran awal saat halaman pertama kali dimuat oleh browser.
  1. Wadah
Bootstrap juga membutuhkan elemen yang mengandung unsur untuk membungkus isi situs.
Ada dua kelas container untuk dipilih :
  1. Kelas .container menyediakan wadah lebar tetap responsive
  2. Kelas .container-fluid menyediakan wadah lebar penuh, yang mencakup seluruh area pandang
Contoh berikut menunjukkan kode untuk halaman Bootstrap dasar (dengan wadah lebar tetap responsive):


<!DOCTYPE html> 
<html lang="en"> 
<head>   
<title>Bootstrap Example</title>    
<meta charset="utf‐8">    
<meta name="viewport" content="width=device‐width, initial‐scale=1">   
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container">    
<h1>My First Bootstrap Page</h1>    
<p>This is some text. </p>  
</div> 
</body>
</html>


Hasilnya seperti ini :
  1. Hasil yang didapatkan
Itu tadi yang saya pelajari dan yang paling penting kita harus memasukkan perintah di bawah ini :
<html lang="en">
<head>
  <title>Bootstrap 3.3.6 Template dasar</title>
        <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<Link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/lips/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>
  </head>
<Body>
<h1>Bootstrap Pertamaku</h1>
</body>
</html>




  1. Temuan permasalahan
Saya menemukan masalah saat saya melihat hasil yang saya buka tapi hasilnya masih belum sesuai.


  1. Kesimpulan
Kalua anda mencoba jangan cepat menyerah tapi jika anda benar-benar sudah tidak bisa maka cobalah bertanya kepada orang yang benar.


  1. Referensi
Ebook Memulai%20Bootstrap.pdf




Tidak ada komentar

Langganan: Posting Komentar ( Atom )