BOOTSTRAP
Bagaimana caranya untuk membuat halaman web menggunakan BOOTSTRAP?
Pada artikel ini, saya akan menjelaskan bagaimana cara membuat halaman web Bootstrap. Tentunya kita sudah tahu apa itu Bootstrap. lalu, bagaimana cara membuat web menggunakan bootstrap? Check here!
Ini adalah hasil halaman web yang akan dibuat:
 |
| Tampilan Notepad++ |
Setelah membuka aplikasi Notepad++, Kamu dapat langsung mengisi dengan tag-tag utama terlebih dahulu,seperti berikut ini:
Untuk membuat web dengan html5, css dan bootstrap, kamu harus menggunakan tag yang telah ditentukan. Kamu bisa menambahkan tag di dalam tag <head> dan </head> seperti ini :
untuk membuat header, kamu bisa menggunakan tag <header> dan </header> setelah tag </head>
Lalu untuk membuat kolom-kolom, kamu bisa menggunakan tag <section> dan </section> setelah tag </header> seperti ini :
Untuk membuat tulisan Love quote, birthday quote dan happy quote, kamu bisa membuatnya di dalam tag <section> namun sebelumnya, kamu harus membuat "class" pada setiap section seperti ini:
setelah itu, kamu dapat mengisi setiap section dengan menu yang kamu inginkan, seperti ini:
Maka hasil sementara halaman web kamu seperti ini :
Untuk memperindah dan mempercantik tulisan "Love quote,Birthday quote dan Motivation quote", kamu bisa menambahkan sebuah gambar icon disebelah tulisan tersebut. caranya adalah dengan kamu bisa melihat di bagian bawah <section class="col-md-4", terdapat <h3>Love quote</h3>. kamu bisa menambahkan di bagian tersebut seperti ini:
Setelah itu, jika ingin membuat sebuah menu dimana kamu ingin melihat quote lainnya, kamu bisa menambah tombol (BTN) setelah tag </ul> di masing-masing kolom, seperti ini:
lakukan pada kedua section lainnya dengan tag yang sama
Agar Bootstrapnya nyambung/kelihatan, kamu bisa kembali ke atas dan membuat tag dibawah <header>. Agar Pembaca tertarik dengan tulisan kamu, kamu dapat menggunakan JUMBOTRON. Langkahnya seperti ini:
Maka hasil sementara dari halaman web kamu seperti ini :
Untuk membuat Navigasi(Menu) di Bootstrap, arahkan bagian sebelum <header>, dibawah <body> seperti ini:
Agar warna navigasi(menu) tersebut berubah/berbeda, maka kamu dapat mengubah "navbar-default" menjadi "navbar-inverse" seperti ini:
Setelah mengikuti langkah diatas, kamu bisa menyimpan ke folder dimana terdapat semua file-file mengenai bootstrap, agar tampilan dapat terlihat ketika di reload.
Maka, Selesai sudah. Selamat mencoba dan semoga berhasil!
Nama : Clara Paskalia Tambun
NPM : 1306470911
MID 2013 B
Tidak ada komentar:
Posting Komentar