MEMBUAT WEBSITEE RESPONSIVE MENGGUNAKAN BOOTSTRAP

Membuat Website Responsive 100% Menggunakan Bootstrap  

PART 1
APA ITU BOOTSTRAP

Boostrap adalah kerangka kerja HTML, CSS dan JS paling populer untuk mengembangkan (mendesain lebih bagus) website responsif yang di desain untuk siapapun dan dimanapun. Dengan Bootstrap kita dapat membuat website lebih cepat dan lebih mudah, dan responsif disemua perangkat user. Bootstrap bisa digunakan untuk para pemula, pengguna tingkat lanjut atau bahkan project kelas dunia.

Pada CSSnya Bootstrap menggunakan 2 processor paling popular yaitu Less dan Sass. Satu framework untuk segala jenis perangkat, Bootstrap mampu merubah bentuk dari ukuran perangkat (komputer/lattop) ke ukuran perangkat lainnya (HP Smartphone) tanpa merusak bentuk website hanya dengan menerapkan kode tunggal. Dengan Bootstrap juga kita bisa mendapatkan dokumentasi penting dan keren mengenai HTML, CSS dan jQuery nya. Bootstrap ini merupakan Open Source yang ditempatkan, dikembangkan dan dirawat di GitHub.

Template HTML Responsive di Semua Perangkat

Pada dasarnya membuat website responsive dengan Bootstrap terbilang mudah dengan syarat harus mengetahui class–class yang sudah disediakan bootstrap beserta fungsinya. Bootstrap sudah mengkemas code-code HTML yang banyak barisnya (class di HTML-CSS) menjadi sedikit baris code HTML-nya (class container). Misalnya kalau kita membuat Tombol Submit dengan tanpa Bootstrap (pakai code HTML-CSS ) maka diperlukan ada 2 buah file yaitu file HTML yang berisi code code panjang seperti berikut ini:
         <div class="subscribe"> <h3>Subscribe</h3>
            <form>
               <input type="submit" value="Kirim">
            </form>
         </div><!--akhir class subscribe-->

dan satu lagi diperlukan file CSS-nya yang berisi code code panjang juga seperti berikut ini:
/* class subscribe */
.buaya .widget .subscribe {
   margin: 0 5px;
   border-top: 5px solid #333;
}
.buaya .widget .subscribe h3 {
   text-align: center;
   margin: 10px 0 10px;
}
.buaya .widget .subscribe input[type="submit"] {
   width: 50%;
   padding: 5px;
   cursor: pointer;t
   margin-bottom: 5px;
   margin-left: 50px;
}
/* akhir class subscribe */

Tapi bila kita membuat tombol Submit dengan menggunakan Bootstrap, maka diperlukan hanya 1 buah file HTML yang link ke file bootstrap.min.css (di folder CSS Bootstrap) yaitu file HTML yang berisi code code praktis cukup satu baris saja seperti berikut ini:

<input class="btn btn-primary" type="Submit" value="Kirim">

Sebelumnya saya pernah buatkan tutorial membuat website menggunakan HTML CSS Sesi 1 (8 part) sampai Sesi 2 (7 part), silahkan dilihat terlebih dahulu untuk memahami tag-tag HTML. Kalau sudah paham mari lanjutkan membuat website menggunakan Bootstrap akan menjadi lebih mudah.

Mempersiapkan Bootstrap

Pertama, silahkan download Bootstrapnya versi terbarunya terlebih dahulu di getbootstrap.com.
klik linknya ini: https://getbootstrap.com/
Cara mendownloadnya adalah berikut ini:
1. Klik tombol Download Bootstrap untuk mulai mengunduh, jangan Download Source ataupun Download Sass, tetapi klik Download Bootstrap
2. Setelah berhasil di unduh silahkan extract file nya maka akan muncul folder Bootstrap versi terbarunya (misalnya Bootstrap-4.4.1-dist).
3. Buka folder Bootstrap tersebut dan didalamnya ada folder CSS, JS, copy semua folder lalu tempelkan dimana kalian ingin memulai project pembuatan web Bootstrap ini. Misalnya saya disini meletakkan Bootstrap-4.4.1-dist di folder yang baru yaitu folder C:\Tutorial Web Bootstrap , maka saya copy 2 folder tadi (CSS, JS) dan paste didalam folder “Tutorial Web Bootstrap” ini, selesai deh! Selanjutnya kita mulai membuat desain websitenya.

CARA MENGGUNAKAN BOOTSTRAP

Menggunakan Framework Bootstrap dapat dilakukan dengan 2 cara yaitu: secara offline (di direktori lokal) untuk browser Internet Explorer, dan secara konek (terhubung) ke internet saat menggunakan bootstrap.

MENGGUNAKAN BOOTSTRAP SECARA OFFLINE

Silahkan buka code editor yang digunakan, misalnya Sublime Text atau Adobe Dreamweaver. Silahkan buat file baru dengan ekstensi file .html untuk halaman beranda (home page) misalkan buat nama filenya home.html atau lebih populer index.html. Simpan file index.html ini di dalam folder project “Tutorial Web Bootstrap” tadi (sejajar dengan folder-folder Bootstrap yang di copas (copy-paste) tadi.

Nah, didalam file index.html ini mulailah membangun struktur web HTML seperti biasa. Saya anggap kalian sudah memahami pola HTML makanya ingin lanjut membuat web menggunakan framework Bootstrap. Adapun struktur template Bootstrap adalah seperti berikut ini, copas (copy paste)-kan code dibawah ini, paste-kan ke halaman lembar kerja file index.html tersebut:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, Saya sedang belajar Bootstrap.</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Lihat hasilnya di browser (lihat gambar):

Bila diperhatikan code <meta ... ada ditempelkan didalam tag kepala (<head> </head),

yaitu:

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-

fit=no">

code <meta ... ini didalam tag kepala (<head> </head) karena harus dipanggil lebih awal dibanding code-code source lain agar supaya index.html ini benar-benar responsive atau website dengan Bootstrap mampu kompatibel disemua perangkat user (komputer/lattop, HP Smartphone) tanpa merusak bentuk website. Untuk membuat index.html ini benar-benar responsive, code tersebut harus diletakkan tepat setelah <head>.

Kemudian  code <link ditempelkan di dalam tag kepala juga (<head></head) seperti berikut ini:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

code tersebut ditempelkan di dalam tag kepala (<head></head) tapi setelah <meta viewport,  dengan menggunakan tag <link> seperti biasa ketika kita memanggil source file, dengan  maksud ketika menggunakan framework Bootstrap, kita harus memanggil source Bootstrap yang tadi sudah di paste-kan di folder CSS Bootstrap, sehingga code link diatas menjadi seperti berikut ini:

<link rel="stylesheet" href="Tutorial Web Bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Selanjutnya di dalam bagian body (<body> </body>) ada ditempelkan code <script  berikut ini:

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  

Kode  tersebut diatas difungsikan untuk optional JavaScript, baris pertama untuk memanggil jQuery,  baris kedua untuk memanggil Popper.js, dan baris ketiga untuk memanggil Bootstrap.js. Kemudian
agar Bootstrap bisa digunakan, kita panggil file bootstrap.min.js yang ada didalam folder JS Bootstrap tadi, ditempelkan di bagian baris ketiga ini di sebelum tag penutup body (</body>),  Dan juga  jQuery.js  harus kita panggil, tetapi karena file jQuery yang berisi code-nya belum ada, maka kita copas aja url berikut :  https://code.jquery.com/jquery-3.4.1.slim.min.js  pastekan ke tab browser, lalu setelah tampil semua code jQuery tersebut kita copas (caranya tekan Ctrl + A, lalu tekan Ctrl C) lalu pastekan ke lembar kerja baru code editor (Sublime Text) dan beri nama filenya
jquery-3.4.1.slim.min.js  kemudian simpan file jquery-3.4.1.slim.min.js  tersebut di dalam folder js yang sudah ada.
Sehingga code <script diatas menjadi seperti berikut ini:

<script src="Tutorial Web Bootstrap/bootstrap-4.4.1-dist/js/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="Tutorial Web Bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  

Sehingga sekarang keseluruhan file index.html akan terlihat seperti ini:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="Tutorial Web Bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, Saya sedang belajar Bootstrap.</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="Tutorial Web Bootstrap/bootstrap-4.4.1-dist/js/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="Tutorial Web Bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Nah, sekarang Bootstrap sudah bisa digunakan secara offline (tanpa koneksi internet).

Sebenarnya yang wajib dalam Bootstrap adalah yang dua ini:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="Tutorial Web Bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Tag <meta neme="viewport"> berfungsi untuk menyesuaikan tampilan web terhadap layar pengguna. Jadi jika dibuka di layar yang lebih kecil, ia akan melakukan sekala sesuai ukuran lebar layarnya. Tag ini wajib, bila kita ingin membuat web yang responsif.

Selanjutnya tag <link rel="..."> berfungsi untuk menyisipkan file CSS bootstrap ke dalam dokumen HTML.

Kenapa menyisipkan bootstrap.min.css bukan boostrap.css?

Pertanyaan bagus.

File bootstrap.min.css adalah file yang sudah dikompres —ukurannya lebih kecil—dan siap digunakan untuk produksi (production).

Sedangkan file bootstrap.css biasanya digunakan untuk development. Jika kita ingin memodifikasi Bootstrap, kita bisa lakukan dari file ini.

MENGGUNAKAN BOOTSTRAP SECARA ONLINE

Kita harus konek ke internet saat menggunakan bootstrap ini, lalu kita ke browser mengunjungi situs getbootstrap.com, klik link ini https://getbootstrap.com/
Di bagian menu documentation-nya Bootstrap,  di kotak search ketikkan template (kita cari template), lalu tekan enter, lalu code yang ditampilkan kita copy-kan dan ditempelkan ke lembar kerja code editor (Sublime Text) ke file indeks.html yang kosong yang sudah kita buat sebelumnya, codenya seperti berikut ini:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, Saya sedang belajar Bootstrap.</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Sebelum lanjut lebih jauh, silahkan copy code berikut ini: <meta http-equiv="X-UA-Compatible" content="IE=edge"> dan tempelkan di antara tag <meta charset...  dan dengan tag  h<meta name...:, sehingga code <meta ... menjadi seperti berikut ini:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
<meta name="viewport" content="width=device-width, initial-scale=1">

Untuk membuat index.html ini benar-benar responsive, code tersebut harus diletakkan tepat setelah <head> karena harus dipanggil lebih awal dibanding code-code source lain.

Selanjutnya, supaya index.html ini bersahabat baik dengan browser Internet Explorer silahkan tambahkan kode berikut (berupa comment HTML) tempelkan di sebelum tag penutup kepala (</head>) yaitu berikut ini:

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Bila diperhatikan source code  ini berupa link, artinya kita harus konek ke internet saat menggunakan bootstrap ini, jika ingin digunakan secara offline (di direktori lokal) untuk browser Internet Explorer silahkan kunjungi link yang ada di src=”link” kemudian copy semua isinya dan simpan sebagai file .js. Setelah itu tinggal diganti deh src=”...” nya dengan nama file dan direktori dimana kalian menyimpannya. Kalau kurang paham, abaikan saja ini bukan hal yang penting untuk dibahas saat ini.

Sampai sini, file index.html akan terlihat seperti ini:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible"

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


    <title>Hello, world!</title>

    <!--[if lt IE 9]>

       <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

   <![endif]-->
  </head>
  <body>
    <h1>Hello, Saya sedang belajar Bootstrap.</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Perhatikan code <script... di dalam file indeks.html tersebut, seperti ini:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

ini adalah  jQuery dari perpustakaan Google API, ini berupa link yang tentu memerlukan koneksi internet. Jika ingin menggunakannya offline silahkan kunjungi link tersebut lalu copy semua codenya dan tempelkan di file baru kemudian save dan beri nama sesuai keinginan dengan ekstensi file .js. Setelah itu ganti link didalam src=”” nya dengan nama file .js yang baru dibuat beserta direktorinya.

Sekarang, index.html ini sudah siap dibangun menggunakan framework Bootstrap. Tinggal pikirkan bagaimana kalian ingin membuat template untuk index.html ini.

Tetapi selanjutnya tutorial Bootstrap ini ke depannya saya menggunakan Bootstrap secara online (konek internet), sehingga struktur template Bootstrap yang didalam file index.html yang digunakan nantinya adalah seperti berikut ini:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible"

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


    <title>Hello, world!</title>

    <!--[if lt IE 9]>

       <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

   <![endif]-->
  </head>
  <body>
    <h1>Hello, Saya sedang belajar Bootstrap.</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

.

PART 2

Lay Out Halaman Single Post Bootstrap

Dalam pembuatan website menggunakan Bootstrap, tentu tidak bisa langsung selesai. Kita perlu membuatnya beberapa part pengerjaan, kalau membuatnya lagi dari nol (awal) tentunya capek bukan? padahal padahal kita sudah punya website HTML-CSS, makanya website HTML-CSS yang sudah kita buat di tutorial Sesi 1 (8 part) dan Sesi 2 (7 part) kita teruskan saja pengembangannya lebih lanjut dengan menggunakan framework Bootstrap. 




Supaya sesuai dengan judulnya membuat website responsif menggunakan Bootstrap sebagai kelanjutan dari website HTML-CSS yang sudah kita rancang, saya di sini sudah gambarkan rencana website responsif menggunakan Bootstrap yang akan dibuat seperti ini: (lihat gambar).













Dibagian halaman beranda (home page) kita sudah buat dengan menggunakan HTML-CSS, kemudian frame work Bootstrap akan kita gunakan untuk membuat bagian halaman single post atau halaman sub (sub sub) single post, kalau tidak mau capek-capek menulis teks dokumen di lembar kerja teks editor (sublime text) ada baiknya bisa saja langsung menampilkan dokumen asli (sumber dari docx, pdf) yang sudah dikonversi menjadi dokumen htm, lalu dimasukkan ke bagian halaman tampilan paling terakhir (ke halaman terakhir yang sebagai sub sub single post).





Menggunakan Bootstap untuk membuat sebuah website responsif dari nol (awal),  memang caranya praktis, tinggal kita copas code suatu bagian class container-nya dari documentation Bootstrap-nya, lalu di pastekan ke teks editor (sublime teks) lalu dimodifikasi sedikit nilai nilai class tersebut dan bila perlu diberi gayanya di CSS sehingga jadi deh selesai apa yang kita inginkan template sudah terpenuhi.  

Menggunakan Bootstrap itu memang memudahkan bagi manusia (user) dalam membuat code code yang praktis dan membuatnya tidak terlalu lama,  tapi bagi computer atau perangkat lain pada bagian mesinnya yang mencari, mengolah, mengartikan dan mengkompile code code tersebut ia membutuhkan waktu yang lama dalam berproses agar bisa tampil suatu halaman web seperti apa yang kita inginkan, ini akan mempengaruhi SEO Ranking website kita di mesin pencari google.




Jadi suatu website yang kita rancang agar responsif, maka tampilan di bagian halaman beranda (home page) biarlah ia tetap menggunakan code code HTML-CSS, sedangkan di bagian halaman single post atau halaman sub single post bisa diterapkan menggunakan codo code Bootstrap, kemudian halaman terakhir menggunakan code code HTML-CSS, di setiap halaman terakhir tampilan dari menu atau class seharusnya kembali lagi menggunakan code code HTML-CSS, atau bila tak memungkinkan tampilan halaman terakhir bisa menerapkan langsung dari sumber asli dokumen yang telah dikonversi ekstensinya menjadi .htm.

Suatu website yang direkomendasikan bagi pengunjung yang datang ke situs web kita adalah website yang aman dan nyaman, pengunjung bisa berselancar menjelajahi di setiap bagian yang ada dengan memakai panduan navigasi yang telah kita buat arah jalur jalurnya dengan jelas dan benar, fungsi navigagi agar tidak membuat pengunjung terjebak atau tersesat, sehingga pengunjung betah berlama lama melihat semua isi dan konten website kita tersebut. Suatu tampilan halaman harus akan terhubung dengan halaman lainnya, Suatu tampilan halaman harus akan terhubung dengan sub halaman-nya untuk mendeskripsikan atau menjelaskan halaman sebelumnya tersebut.









Pada bagian halaman utama (home page) yang tampil, bila kita klik lebih lanjut akan bisa 3 kali progres lagi menuju halaman lainnya. lalu pada bagian halaman single post yang tampil, bila kita klik lebih lanjut akan bisa 2 kali progres lagi menuju halaman lainnya. lalu pada bagian halaman sub single post yang tampil, bila kita klik lebih lanjut akan bisa 1 kali progres lagi menuju halaman lainnya. dan pada bagian halaman terakhir (sub sub single post ) yang tampil, tidak bisa kita klik lebih lanjut  lagi menuju halaman lainnya, sebab itulah halaman yang terakhir yang hanya bisa kembali ke home atau mengklik click go to back di tab browser.






Sekarang, bila kita perhatikan gambar skema hubungan antar halaman tersebut diatas, maka dalam membuat website responsif menggunakan Bootstrap sebagai kelanjutan dari rancangan pengembangan website HTML-CSS yang sudah kita buat sebelumnya, kita terapkan progres ke-1 tampilan halaman bagi home page (halaman beranda ) dengan tetap menggunakan HTML-CSS, progres ke-2 tampilan halaman bagi halaman single post dengan menggunakan Bootstrap, progres ke-3 tampilan halaman bagi halaman sub single post dengan menggunakan Bootstrap juga, dan progres ke-4 tampilan halaman bagi halaman terakhir (sub sub single post) dengan menggunakan HTML-CSS kembali, atau bisa menerapkan langsung dari sumber asli dokumen yang telah dikonversi ekstensinya menjadi .htm.

Sebelum lanjut lebih jauh, ini kan suasa natal, tolong tambakan code HTML  berikut ini tuliskan di sesudah  <div class="widget"> atau di sebelum <div class="musik"> yang di file membuatwebsite2.html, yaitu berikut ini:




<div class="pohonNatal">

<h5>SELAMAT HARI NATAL 25-12-2019</h5><img src="images/received_2186734258216512.gif"></a><a href="">

</div><!-- akhir class Pohon natal-->




Kemudian kita beri gaya/style class pohonNatal ini di CSS di file style2.css, tuliskan di sesudah /* akhir class widget */ atau di sebelum   .buaya .widget .musik  yaitu ini:


/* class pohon natal */

 .buaya .widget .pohonNatal h5 {

   text-align: center;

 }

 .buaya .widget .pohonNatal img {

   margin-left: 3.5px; 

 }

/* akhir class pohon natal */

Kemudian download lagu natal berikut ini, link Download di sini LAGU NATAL NON STOP 4 JAM




setelah di download, lalu simpan file mp3 tersebut di folder yang sama sejajar dengan file


lagu lagu lainnya yaitu di folder Tutorial Today/Daftar lagu.

Kemudian mari kita rayakan hari Natal ini non stop 4 jam dengan cara hapus code HTML 


berikut ini:




<audio controls><source src="Daftar lagu/Jesus_Take_The_Wheel2 (iring).mp3" 


type="audio/mp3"> </audio>


code HTML tersebut terletak di setelah <div class="musik">


<h3>PMD MUSIC CREATION</h3>, 






lalu gantikan code yang dihapus tersebut dengan code HTML class musik berikut ini:


<audio controls><source src="Daftar lagu/LAGU NATAL NON STOP 4 JAM.mp3" type="audio/mp3"> 


</audio>




Semoga berhasil, dan SELAMAT MENDENGAR LAGU LAGU NATAL 25-12-2019 DARI PMD Sesawi-AK










PERSIAPAN MEMULAI MEMBUAT KONTEN SINGLE POST MENGGUNAKAN BOOTSTRAP






Sebelum memulai menggunakan bootstrap, pastikan semua konten atau isi halaman beranda 


(home page) yang di buat dengan HTML-CSS sudah lengkap seluruhnya, seperti contoh hasil 


berikut (lihat gambar):











Halaman beranda (home page) ini telah kita buat dengan menggunakan html-css, ke depannya 


nanti pada bagian Artikel Disarankan recomended atas akan kita rencanakan dengan 3 buah 


artikel, dan di bagian recomended bawah juga 3 buah Artikel Disarankan, dan pada bagian 


class buaya juga akan kita buat video. Tetapi sekarang kita fokus ke pembuatan halaman 


single post dengan menggunakan bootstrap, jadi kita hanya tinggal menghubungkan home page 


dengan setiap halaman single post yang dibuat dengan bootstrap nantinya. 


 


Membuat konten single post sebagai progres ke-2 dari halaman yang hendak ditampilkan 


dengan menggunakan Bootstrap, pertama tama kita harus melakukan migrasi semua file dan 


folder yaitu memindahkannya dari folder Tutorial Today ke folder Tutorial Web Botstrap. 


Adapun file/folder yang dipindahkan tersebut adalah: 


1. folder image


2. folder dokumen.


3. folder Daftar lagu


4. folder pemograman


5. file membuatwebsite2.html


semua file/folder tersebut diletakkan sejajar dengan file indeks.html yang di dalam folder


Tutorial Web Bootstrap.


Kemudian melakukan migrasi juga file style2.css dipindahkan kedalam folder


bootstrap -4.4.1-dist/css,


Di dalam folder ini kita buat suatu folder lagi yang diberi nama style, nah di dalam folder


style inilah kita letakkan file style2.css, sehingga letak pencarian alamat file css ini 


adalah di folder bootstrap -4.4.1-dist/css/style/style2.css 




Langkah berikutnya adalah membuka file membuatwebsite2.html (file ini ada di dalam folder


Tutorial Web Bootstrap) dan membuka file style2.css (file ini ada di dalam folder 


bootstrap-4.4.1-dist/css/style) buka di teks editor (Sublime Text).


Kemudian pada lembar kerja file membuatwebsite2.html dituliskan kode HTML berikut ini, 


letakkan di sesudah head (<head>) yaitu berikut ini:






<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Akhir Required meta tags -->






Kemudian tuliskan code HTML berikut ini, letakkan di sesudah code


<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>, 


yaitu berikut ini:






<link href="bootstrap-4.4.1-dist/css/style/style2.css" type="text/css" rel="stylesheet">


<link href="website sp bootstrap.html">






Tag code HTML <link href="bootstrap-4.4.1-dist/css/style/style2.css" type="text/css" 


rel="stylesheet"> berfungsi untuk menghubungkan link file CSS yang terdapat di dalam folder


css bootstrap agar dapat dipanggil ke dalam file membuatwebsite2.html.






Kemudian buat suatu file HTML baru, nantinya ini sebagai file single post yang menggunakan


bootstrap, diberi nama filenya misalnya website sp bootstrap.html. Lalu buat link-nya 


seperti code HTML ini  <link href="website sp bootstrap.html"> adalah code yang berfungsi 


menghubungkan link file membuatwebsite2.html dengan single post bootstrap yang ada di


dalam file website sp bootstrap.html. Dan nantinya seterusnya setiap file yang berupa 


single post yang menggunakan bootstrap harus dipanggil di file membuatwebsiite2.html ini, 


dengan cara menuliskan code <link href="'> seperti contoh tersebut di atas, tuliskan di 


setelah code tag <meta ...








Selesai deh, kita tinggal berkreasi membangun pengembangan website kita dengan membuat 


setiap konten/halaman single post yang dibuat dengan bootstrap, tentunya harus memakai code


HTML menurut struktur templatenya Bootstrap, dan kita harus sering-sering berkunjung ke 


menu documentation-nya situs  Bootstrap https://getbootstrap.com/  untuk mendapatkan code 


HTML dari struktur template/konten yang kita butuhkan. Sebagai contoh kita akan membuat 

halaman single post berikut ini (lihat gambar berikut, halaman ini dibuat dengan HTML-CSS),

kita akan buat halaman single post tersebut dengan menggunakan bootstrap yang diproses 

bertahap demi tahap , di part 3 dan part-part selanjutnya. 







PART 3

MEMBUAT MENU NAVBAR DENGAN BOOTSTRAP




Bootstrap telah menyediakan class dan komponen navbar yang siap dipakai sehingga kita tidak

perlu lagi menulis code css-nya dari nol, cukup hanya memanggil class yang telah disediakan

oleh bootstrap tersebut.

Menu navbar dengan bootstrap ini akan kita buat di file website sp bootstrap.html yang di-

simpan di sejajar dengan file indeks.html, untuk itu kita copas code HTML berikut, pastekan

ke lembar kerja file website sp bootstrap.html, sebagai template dari single post pembuatan

oleh bootstrap, yaitu berikut ini:


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible"

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Membuat Website sp bootstrap</title>

    <!--[if lt IE 9]>

       <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

   <![endif]-->
</head>
  <body>
      <!-- Optional JavaScript --> 
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>









Kemudian kita buka documentation bootstrap, klik link-nya ini https://getbootstrap.com/, 

lalu klik component > navbar, ini untuk mencari navbar, setelah muncul 

kemudian kita pilih model navbar yang kita inginkan, seperti disini saya memilih navbar 

dengan ada dropdown-nya, lalu copas code HTMLnya seperti berikut ini, tuliskan di setelah 

body (<body>) atau di sebelum comment <!-- Optional JavaScript -->  yaitu berikut ini:


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>




Kemudian code Bootstrap tersebut kita modifikasi sedikit, yaitu seperti menghapus 

code <nav class="navbar navbar-expand-lg navbar-light bg-light">, lalu diganti 

dengan code ini <nav class="navbar navbar-expand-lg navbar-light bg-primary">



agar background navbar-nya berwarna biru.

Kemudian code <a class="navbar-brand" href="#">Navbar</a> kita hapus dan 

gantikan dengan code ini <a class="navbar-brand" href="#">

PMD Sesawi-AK</a>    

Hasilnya akan terlihat seperti gambar berikut ini:      

Kemudian code menu list-nya kita rubah menjadi sesuai dengan kebutuhan menu di

website kita seperti code berikut ini:

<li class="nav-item">
        <a class="nav-link" href="#">Tutorial</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Daftar Lagu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Lagu PMD Sesawi-AK</a>
          <a class="dropdown-item" href="#">Lagu Indonesia</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Lagu Barat</a>
          <a class="dropdown-item" href="#">Etnis Music</a>
          <a class="dropdown-item" href="#">Dokumen</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Artikel</a>
      </li>
   

Membuat Navbar yang menetap di bagian atas situs, walaupun di scroll ke bawah akan tetap 

menetap di atas. Ini menguntungkan agar para visitor tidak kesulitan scroll lagi ke atas 

hanya untuk melihat menu. Fix top navbar dibuat cukup dengan memberikan class 

navbar-fixed-top pada bagian <nav> maka akan menjadi :

<nav class="navbar navbar-expand-lg navbar fixed-top navbar-light bg-primary"> 

simpan dan lihat hasilnya !






Pada file membuatwebsite2.html yang di dalam folder Tutorial Web Bootstrap kita sudah 

membuat code code HTML-CSS sebagai halaman beranda (home page) website yang kita 

rancang, yaitu:

Code HTML-CSS sebagai Home page (file membuatwebsite2.html)

<!doctype html>

<html>
   <head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Akhir Required meta tags -->
      <title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
   <link href="bootstrap-4.4.1-dist/css/style/style2.css" type="text/css" rel="stylesheet">
<link href="website sp bootstrap.html">
<link href="single pos.html">
<link href="single pos 1.html">
<link href="single pos 2.html">
   </head>
<body>
   <header>
      <img src="images/logo pmd.jpg">
   </header>
   <menu>
      <nav><ul>
         <li><a href="">Home</a>
          <ul><li> <a href="ul.html">Tentang Kami</a></li>
          </ul>   
      <li>Artikel
        <ul><li>Artikel Terlaris
        <ul><li><a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm">TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1)</a></li></ul> 
        <li> Artikel Terbaru
          <ul><li><a href="dokumen/DIBERKATI DAN MEMBERKATI.htm">DIBERKATI DAN MEMBERKATI</a></li></ul>            
      <li>Artikel Disaran
        <ul><li><a href="PEMBAHARUAN KALENDER 1.htm">PEMBAHARUAN KALENDER</a></li></ul>
      </li></li></li></li></ul></li>
      <li>Tutorial
     <ul><li> <a href="ul.html">Artikel Terbaru</a></li>
      <li> <a href="ul.html">Artikel Musik</a></li>
     </ul>
      <li>Sabda
      <ul><li> Sabda Minggu
        <ul><li> <a href="dokumen/DIBERKATI DAN MEMBERKATI.htm">DIBERKATI DAN MEMBERKATI</a></li></ul>
      <li> <a href="ul.html">Roti Hidup</a></li>
     </ul>
      <li>Design
     <ul><li> <a href="ul.html">Artikel Terbaru</a></li>
      <li> <a href="ul.html">Artikel Musik</a></li>
     </ul>
      <li>Musik
     <ul><li> <a href="website sp bootstrap.html">Musik PMD Sesawi-AK</a></li>
      <li> <a href="">Musik Trendy</a></li>
     </ul>
     <li><a href="">Kontak</a></li>
   </ul></nav>
   </menu>
   <div class="recomended">
   <h1>Artikel Disarankan</h1>
      <div class="recomendedKiri">  
         <h3><a href="single pos 2.html"><img src="dokumen/gbr2.png"> Luni Solar Kreator Allah</a></h3>
         <p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single pos.html"><strong>Baca Selengkapnya</strong></a></p>
      </div><!--akhir class recomendedKiri-->
      <div class="recomendedKanan">
 <h3><a href="single pos.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
         <p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. 
<a href="single pos.html"><strong>Baca Selengkapnya</strong></a></p>
<br/><br/>
      </div><!--akhir class recomendedKanan-->
<div class="recomendedKiriBawah">      <h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
         <p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
 <a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>     
      </div><!--akhir class recomendedKiriBawah-->
<div class="recomendedKananBawah">
         <h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
         <p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
 <a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
      </div><!--akhir class recomendedKananBawah-->
   </div><!--akhir class recomended-->
   <div class="buaya">
      <div class="widget">
      <div class="pohonNatal">
<h5>SELAMAT HARI NATAL 25-12-2019</h5><img src="images/received_2186734258216512.gif"></a><a href="">
</div><!-- akhir class Pohon natal-->
         <div class="musik">
<h3>PMD MUSIC CREATION</h3>
<audio controls><source src="Daftar lagu/LAGU NATAL NON STOP 4 JAM.mp3" type="audio/mp3"> </audio>
   <p><a href="single pos 2.html"><strong>Daftar Lagu: </strong></a></p><br/>
   </div><!--akhir class musik-->
<div class="iframe">
   <iframe width="100%" height="265" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/729319318&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
 </div><!-- akhir class iframe-->  
        <div class="artikelTerlaris">
            <h3>Artikel Terlaris</h3>
   <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas  <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </a></p><br/>
  <a href="pemograman/DASAR PEMOGRAMAN HTML.html" > <img src="pemograman/logo html.png" ><h4>Tutorial Dasar Pemograman HTML</h4></a> <p>HTML adalah singkatan dari Hyper Text Mark-up Language yaitu suatu bahasa pemrograman komputer yang menggunakan kode kode program berupa bahasa yang di mark-up yang dimengerti oleh mesin komputer yang aplikasinya sudah ada tertanam di dalam komputer.  <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </a></p><br/>
            <img src="images/empat.jpg">
            <a href=""><h4>Terlaris Tiga</h4></a>
            <p>ey College in Virginia, looked up one of the more obscure Latin words</p>
         </div><!--akhir class artikelTerlaris-->
         <div class="mediaSosial">
           <h3>Media Sosial, Let's Connect !</h3>
            <a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
            <a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
            <a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
            <a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
            <a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
            <a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
            <a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class mediaSosial-->
         <div class="subscribe">
            <h3>Subscribe</h3>
            <form>
               Nama:<br/><input type="text" required><br/>
               Email:<br/><input type="email" required>
               <input type="submit" value="Kirim">
            </form>
         </div><!--akhir class subscribe-->
<div class="komentar">
<h3>Komentar</h3>
            <form>
               <input type="text" required placeholder="Nama Anda...">
               <input type="email" required placeholder="Email Anda...">
               <textarea name="isiKomentar" required placeholder="Tulis Komentar Anda Disini..."></textarea>
               <input type="submit" value="Kirim Komentar">
            </form>
         </div><!--akhir class komentar-->
         <div class="footerKiri">
            <a a=""></a>
            <h3>a</h3>
              </div><!--akhir class Footer Kiri-->
      </div><!--akhir class footerKiri-->
      <div class="artikelTerbaru">
         <a href=""></a>
         <a href="dokumen/DIBERKATI DAN MEMBERKATI.htm"><h2><img src="dokumen/gbr4.png">DIBERKATI DAN MEMBERKATI</h2></a>
         <p>Mazmur 37:25-26
 <br/>37:25 Dahulu aku muda, sekarang telah menjadi tua, tetapi tidak pernah kulihat orang benar ditinggalkan, s  atau anak cucunya meminta-minta roti; 37:26 tiap hari ia menaruh belas kasihan dan memberi pinjaman,  dan anak cucunya menjadi berkat. </p><br/>
         <a href=""></a>
         <a href="pemograman/MEMBUAT WEBSITE HTML-CSS PRAKTIS (SESI 1)"><img src="images/layout home page.png"><h2>Cara Membuat Website HTML-CSS Praktis (Sesi 1)</h2></a>
         <p>PART 1
<br>
Dalam pembuatan website, tentu tidak bisa langsung selesai. Kita perlu membuatnya beberapa part pengerjaan, begitu juga artikel Cara Membuat Wesbite Sederhana HTML CSS ini akan dibagi menjadi 11 part karena setiap partnya akan banyak penjelasan yang bisa diikuti dan mudah-mudahan bisa menjadi ilmu baru buat yang belum tahu.</p>
</br>
         <a href=""><img src="dokumen/hadiah natal.png"></a>
         <a href="dokumen/HADIAH NATAL YANG Terindah"><h2>Hadiah Natal Yang Terindah</h2></a>
         <p>Panggilan dan pilihan Allah
Kita diberi nafas hidup yakni Roh-Nya Allah dan segala sesuatunya untuk kita mengerti kehendak Allah, mengenal karya Allah melalui pesona alam semesta ciptaan-Nya, dan mengenal karakter Allah melalui perwujudan diri-Nya dalam diri Anak-Nya yang tunggal Yesus Kristus, agar kita beroleh anugerah janji-janji Tuhan di dalam kerajaan Sorga-Nya. Dari semua janji-janji Tuhan yang ada, hanya janji keselamatanlah sebagai janji yang berharga dan yang sangat besar.
2 Petrus 1:3 Karena kuasa  ilahi-Nya telah menganugerahkan kepada kita segala sesuatu yang berguna untuk hidup yang saleh oleh pengenalan kita akan Dia, yang telah memanggil kita  oleh kuasa-Nya yang mulia dan ajaib. 
</p>
       </div>
<div class="pagination">
   <li class="kiri"><a href="">&larr; Sebelumnya</a></li>
   <li class="kanan"><a href="">Selanjutnya &rarr;</a></li>
</div><!--akhir class pagination-->
 </div><!--akhir class Artikel Terbaru-->
      </div>
   </div><!--akhir class buaya-->
<div class="footer">
     <p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>

Pada bagian menu-nya sudah kita rubah sedikit dan ada dibuat menu musik yang link ke 

halaman single post (file website sp bootstrap.html) dengan cara menuliskan code link 

<a href=" "> </a> seperti berikut ini:

<li>Musik
     <ul><li> <a href="website sp bootstrap.html">Musik PMD Sesawi-AK</a></li>
      <li> <a href="">Musik Trendy</a></li>


Dari halaman beranda (home page) oleh file membuatwebsite2.html bila kita klik menu music, 
maka ia akan link ke halaman single post website sp bootstrap.html  ini karena file 
website sp bootstrap.html  sudah bisa dipanggil ke file membuatwebsite2.html dengan adanya
link codenya <a href="website sp bootstrap.html">Musik PMD Sesawi-AK</a> yang tertulis di 
bagian daftar menu musik di file membuatwebsite2.html tersebut. Dan setiap halaman single 
post pakai bootstrap harus bisa dipanggil dari/oleh halaman beranda (home page) dengan cara
menuliskan/menambahkan code link-nya <a href=" "> </a> yang dari menu (navbar), atau code 
link-nya <link href=" nama file bootstrap.html"> yang dari bagian kepala (<head>)

Sehingga secara keseluruhan code bootstrap untuk pembuatan menu navbar, adalah sebagai

berikut:

Code Bootstrap sebagai halaman single post

(file website sp bootstrap.html)

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Membuat Website sp bootstrap</title>
  </head>
  <body>
    <h1></h1>
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-light bg-primary">
  <a class="navbar-brand" href="#">PMD Sesawi-AK</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tutorial</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Daftar Lagu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Lagu PMD Sesawi-AK</a>
          <a class="dropdown-item" href="#">Lagu Indonesia</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Lagu Barat</a>
          <a class="dropdown-item" href="#">Etnis Music</a>
          <a class="dropdown-item" href="#">Dokumen</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Artikel</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<div class="container-fluid">
  <div class="container">
    <div class="row">
     <div class="col md 12"></div> 
    </div>
  </div>
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

mudah membuat navbar pakai bootstrap, bukan? selanjutnya nantikan tutorial berikutnya di 

part 4.

PART 4
MEMBUAT JUMBOTRON BOOTSTRAP
 
Jumbotron merupakan area besar pada Bootstrap yang berfungsi untuk mendapatkan perhatian 
lebih bagi para pengunjung jika melihat Jumbotron pada suatu website, umumnya digunakan 
untuk menampilkan sebuah infromasi penting.

Seacara default, Jumbotron berwarna dasar abu-abu dengan rounded sisi. Banyak yang menerap-
kan Jumbotron pada bagian header, atau setelah header diganti oleh Jumbotron, tapi bisa 
juga diletakkan di tempat lain.

Untuk awal percobaan, tidak perlu memikirkan hal lain seperti styling warna, gaya text, 
ukuran, dsb. cukup ikuti saja tutorial ini dan pastikan Jumbotron berhasil tampil.

Terdapat 2 model Jumbotron yang umum ditemukan di internet, yaitu Jumbotron di dalam 
container dan Jumbotron di luar container. Ini tergantung pada desain yang disenangi.

Jumbotron di dalam container
Jumbotron di dalam container adalah Jumbotron yang berada di dalam container, artinya 
sejajar dengan container. Ini biasanya digunakan oleh situs web / blog yang lebih 
menyenangi boxed layout. Untuk membuat Jumbotron di dalam container, kita kunjungi kembali
documentation-nya bootstrap klik link ini https://getbootstrap.com/,lalu klik bagian 
component > jumbotron untuk 
menampilkan struktur code jumbottron-nya bootstrap, seperti berikut ini:
Untuk membuat Jumbotron di dalam container cukup gunakan struktur code 
bootstrap seperti yang terlihat di bawah ini, maka hasilnyapun Jumbotron tersebut akan berada sejajar dengan container seperti yang terlihat pada contoh gambar di bawah.
 
<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>


Jumbotron di luar container
Berbeda dengan Jumbotron di dalam container, Jumbotron di luar container berada di luar 
sebuah container yang artinya ia bisa saja memiliki ukuran lebih lebar tanpa terbatas oleh
container manapun. Ini umum digunakan oleh situs yang memiliki tata letak site-wide atau 
boxed (jika boxed, ini akan memiliki lebar tidak sama dengan container).

Jumbotron di luar container memberi lebar dan posisi jumbotron terlihat tidak dibatasi oleh
sebuah container. Ini terlihat lebih menarik bagi beberapa layout termasuk boxed layout. 
Untuk membuat Jumbotron di luar container cukup copas dari struktur code jumbotron-nya 
bootstrap, seperti berikut ini:
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>
Ya, perbedaan Jumbotron ini hanya dibedakan oleh posisi atau tata letaknya saja. Untuk 
style lainnya seperti memberikan warna background, bentukan (shape), dan hal lainnya dapat 
disesuaikan sesuai desain dari blog itu sendiri.

Ingat saja class jumbotron jika di kemudian hari ingin membuat Jumbtron lagi, untuk posisi 
bisa disesuaikan tergantung dimana kamu meletakkan class tersebut.

Tapi kali ini kita akan membuat jumbotron di dalam container, dengan menampilkan gambar sub
logo musik yang akan kita letakkan logo musik ini di bagian header atau di atas menu 
(navbar), ini kita kreasikan di  file website sp bootstrap.html. sebagai halaman single 
post-nya bootstrap.