WahyuZulkarnainSTKIPYAPIS_DOMPU_NTB

Catatan:

1. Siapkan file:
 Css
 font-awesome
 js
file tersebut kemudian saya integrasi kedalam satu folder dengan nama ‘assets’
2. Siapkan 3 foto yang kemudian beri nama:
 run.png
 keep.png
 happy.png

ketiga foto diatas jadikan kedalam satu folder dengan nama ‘img’

3. Siapkan file font-awesome

A. MEMBUAT CAROUSEL
1. Buatlah folder dengan nama ‘kamus’ lalu simpan di desktop

2. Buatlah halaman kerja baru pada visual code dan simpan dengan nama index.html
 WahyuZulkarnainSTKIPYAPIS_DOMPU_NTB

3. Setelah itu buatlah tag pembuka html

jika kalian menggunakan visual code, maka kalian cukup ketik html:5 dan tag dasar html akan langsung muncul.

4. Selanjutnya untuk membuat carousel/slide bergeser kalian bisa menuju link

https://getbootstrap.com/docs/4.5/components/carousel/.
Disini saya akan mengambil carousel dengan with controls. Lalu klik copy untuk menggandakan kode.

5. Kemudian pastekan hasil copy kedalam file index.html didalam tag body
 WahyuZulkarnainSTKIPYAPIS_DOMPU_NTB

6. Langkah selanjutnya adalah menghubungkan file index.html dengan file css. File css adalah framework yang
mengatur dan mengelola layout website. HTML mengatur konten dan struktur halaman web, sedangkan CSS
berurusan dengan layout situs.
 
Didalam tag head, kamu harus memanggil file bootstrap.css

Pada bagian href=”assets/css/bootstrap.css” adalah sebuah instruksi untuk memanggil file bootstrap.css
dimana file tersebut ada didalam folder assets, kemudia pilih folder css, didalam folder css ada file
bootstrap.css.

7. Kemudian hubungkan file html dengan file javascript. Masukan perintah javascript kedalam tag body

8. Langkah selanjutnya adalah menjalankan fungsi dari carousel.

 WahyuZulkarnainSTKIPYAPIS_DOMPU_NTB

Pada bagian tag <img src=”…” class=”d-block w-100” alt=”…”> adalah untuk memasukan gambar. Ingat bahwa
gambar yang saya miliki, saya simpan didalam folder yang dikasih nama ‘img’

Sesuai gambat yang ada diatas, saya memasukan tiga foto dengan nama run.png, happy.png, dan keep.png

Pada bagian alt=”Gambar1” ini merupakan alternatif jika sewaktu-waktu web kita mengalami koneksi buruk dan
gambar tidak dapat ditampilkan, maka sebagai alternatif akan ditampilkan tulisan ‘Gambar1’

Berikut tampilannya:

SELESAI !!!
 WahyuZulkarnainSTKIPYAPIS_DOMPU_NTB

B. MEMBUAT NAVBAR

1. Dalam membuat navbar kalian tidak perlu pusing, karna berbagai macam navbar sudah tersedia di bootstrap.
Kunjungi link ini https://getbootstrap.com/docs/4.5/components/navbar/ untuk mengcopy kode
pemrograman navbar. Disini saya akan pilih navbar supported content lalu klik copy.

2. Lalu paste hasil copy kedalam tag body dibawah carousel. Maka hasilnya seperti dibawah ini.

Karena saya ingin mengganti warna navbarnya menjadi warna gelap (dark), maka bagian navbar-light bg-light,
diganti menjadi navbar-dark bg-dark
 WahyuZulkarnainSTKIPYAPIS_DOMPU_NTB

C. MENAMBAHKAN font-awsome
Disini saya akan membubuhkan icon pada setiap menu

1. Pertama hubungkan file html dengan file font-awesome terlebih dulu

2. Berhubung saya hanya membutuhkan empat menu, maka bagian menu navbar akan saya hapus
 WahyuZulkarnainSTKIPYAPIS_DOMPU_NTB

3. Pada menu home hapus tag <span>

Lalu tambahkan tag <i> didalam tag <a>

4. Lakukan kegiatan nomor 3 ke semua menu

Berikut beberapa icon yang saya tambahkan:
- Menu Home

- Menu Link

- Menu Dropdown
 WahyuZulkarnainSTKIPYAPIS_DOMPU_NTB

- Menu Disabled