Masih dengan pengalaman belajar desain web meskipun belum masuk kelas premium. Berikut ini tulisan lanjutan tentang cara install bootstrap secara offline. Kali ini saya akan belajar memasukan kode bootstrap kedalam file htm atau file html.
Bagi yang belum tahu, file htm atau html adalah jenis file halaman web standar di internet. Halaman inilah yang menjadi project kita dalam belajar desain web.
Adapun tool yang digunakan seperti biasa yaitu Visual Studio Code. Untuk itu, bagi yang terlewat silahkan install terlebih dahulu via Microsoft Store atau installer. Dan bagi teman-teman pengguna Linux juga bisa install vscode.
Langsung saja, berikut ini pengalaman belajar saya tentang cara input kode bootstrap secara offline.
Cara Input Kode Bootstrap Secara Offline
Cara memasukan kode bootstrap secara offline bisa dilakukan dengan beragam tool. Namun untuk artikel kali ini kita mencoba VSCode. Karena saya lihat dari para mentor juga menggunakan Visual Studio Code.
Terlebih lagi tool ini memiliki kemampuan yang bisa diperluas dengan extension. Salah satunya adalah live server untuk melihat preview pada browser. Untuk itu, agar bisa mengikuti tutorial ini disarankan sudah install live server pada vscode.
Begitu juga file css dan javascript bawaan booststrap yang harus sudah diunduh. Untuk cara unduh serta pengaturannya di vscode bisa melihat kembali pada tautan berikut ini. Setelah itu, silahkan simak cara input kode bootstrap ke dalam file html di bawah ini.
1. Buka Visual Studio Code dan lihat bagian primary side bar.
2. Pada saat folder "bootstrap" terseleksi silahkan buat sebuah file html. Caranya dengan menekan kombinasi tombol: Ctrl + Alt + Windows + N. Cara lainnya dengan klik icon "New file" seperti terlihat pada screenshot di bawah.
3. Ketik nama file, misalnya "index.html" atau "index.htm" kemudian tekan enter.
4. Pindah ke bagian isi file html yang baru saja dibuat. Silahkan ketik "!" kemudian klik "! Emmet Abreviation".
5. Sintaks html dasar secara otomatis tertulis di layar. Tag <meta name = viewport"> juga tertera di sana. Sebagaimana dimaklumi, tag ini sangat dibutuhkan agar tampilan responsif untuk perangkat mobile. Lihat! Isi file index.html baru saja dibuat dengan cara otomatis dengan VSCode.
6. Ketikan tag <link rel="stylesheet" href="css/" > dan pilih "file booststrap.css "untuk melengkapi sintaks.
7. Link file css bootstrap ini: "<link rel="stylesheet" href="css/bootstrap.css" >" tempatkan sebelum tag </head>.
8. Lakukan hal yang sama untuk file javascriptnya.
9. Tempatkan script ini: <script type="text/javascript" src="js/bootstrap.js"></script> sebelum tag </body>.
10. Tekan kombinasi tombol Alt + L Alt + O untuk membuka live server. Cara lainnya bisa dengan klik kanan kemudian pilih opsi:"Open with Live Server".
11. Klik "Allow access".
12. Fungsi live server sudah berjalan, judul yang terlihat pada tab browser juga berfungsi.
13. Silahkan buat sebuah tulisan misalnya: <h1>Haloooo, rekan-rekan Sebardi Blog</h1>. Tempatkan kode tersebut diantara tag <body> dan </body> kemudian klik File > Save atau tekan kombinasi tombol Ctrl + S untuk menyimpan file.
14. Tampilan pada halaman web akan terlihat seperti berikut ini.
15. Sekarang masukan kode-kode bootstrap untuk menguji. Misalnya dengan menambahkan class="text-info" dan "text-danger". Contoh pada nomor 13 di atas, kodenya dilengkapi menjadi:
<p class="text-danger">.text-danger</p>.
16. Maka terjadi perubahan pada halaman web menjadi seperti berikut.
Kesimpulan
Untuk memodifikasi halaman web di atas kita hanya menambahkan class yang terdapat pada bootstrap. Cara ini terlihat lebih simpel jika dibandingkan dengan cara biasa. Kesederhanaan inilah yang menjadi daya tarik untuk mempelajari bootstrap. Terutama bagi pemula yang belajar komputer secara otodidak.
Begitu juga dengan tool yang digunakan yaitu Visual Studio Code. Sebagaimana terlihat pada praktikum di atas yang tidak menggunakan aplikasi web server. Betul, tutorial di atas tidak menggunakan Xampp, Wamp atau Laragon.
Akan tetapi preview with browser tetap bisa dijalankan. Dan ini fungsi Live Server yang merupakan extension VSCode. Anda tertarik untuk menggunakan Bootstrap dengan Visual Studio Code? Mudah-mudahan artikel selanjutnya tidak bosan membahas tool yang satu ini.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar