Scribd
Unggah
11 tayangan

Pemrograman Web - Bootstrap

Dokumen ini menjelaskan cara membuat website portfolio sederhana menggunakan framework Bootstrap, yang merupakan alat populer untuk pengembangan web responsif. Langkah-langkah mencakup pengaturan file HTML dan CSS, serta penjelasan tentang berbagai kelas dan atribut Bootstrap yang digunakan untuk mendesain elemen-elemen halaman. Selain itu, terdapat informasi mengenai gaji front-end developer di Indonesia dan referensi untuk belajar lebih lanjut tentang Bootstrap.

Diunggah oleh

suholee1140
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
11 tayangan

Pemrograman Web - Bootstrap

Dokumen ini menjelaskan cara membuat website portfolio sederhana menggunakan framework Bootstrap, yang merupakan alat populer untuk pengembangan web responsif. Langkah-langkah mencakup pengaturan file HTML dan CSS, serta penjelasan tentang berbagai kelas dan atribut Bootstrap yang digunakan untuk mendesain elemen-elemen halaman. Selain itu, terdapat informasi mengenai gaji front-end developer di Indonesia dan referensi untuk belajar lebih lanjut tentang Bootstrap.

Diunggah oleh

suholee1140
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

Dasar-Dasar Pemrograman Web

Pertemuan 5 – Membuat Website Portfolio Menggunakan Framework Bootstrap

Bootstrap adalah framework front-end (antarmuka pengguna) yang bersifat open-source, yang
digunakan untuk mempermudah dan mempercepat pengembangan halaman web atau aplikasi web
yang responsif dan mobile-first. Dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter pada
tahun 2010, Bootstrap kini menjadi salah satu framework paling populer di dunia untuk desain web.

Mempelajari Bootstrap memiliki banyak manfaat, terutama bagi pengembang web yang ingin
membangun aplikasi atau situs web yang responsif, efisien, dan konsisten.

Berikut gambaran gaji front-end-developer di Indonesia menurut Jobstreet.com:


Baik, berikut ini kita akan sedikit latihan membuat web portfolio sederhana, ikuti langkah-langkah
berikut:

1. Buka situs https://getbootstrap.com/ dan klik menu "Docs". Pada halaman Introduction, temukan
bagian "Get started with Bootstrap". Gulir ke bawah hingga menemukan kode di dalam kotak
merah seperti yang ditunjukkan pada gambar di bawah ini. Salin kode tersebut ke file index.html.
Berikut adalah tampilan file index.html setelah kode dari Bootstrap yang telah disalin dimasukkan
ke dalamnya:
2. Sesuaikan bagian <title> menjadi “My Portfolio”. Hapus baris <h1>Hello, world!</h1> pada bagian
<body>, kemudian tambahkan komentar seperti contoh berikut:
3. Buat file baru bernama style.css, lalu hubungkan file index.html dengan file tersebut.

4. Untuk membuat navbar, ketikkan “navbar” pada kolom pencarian bootstrap:

Lalu, gulir ke bawah hingga menemukan contoh tampilan navbar sederhana. Salin kode HTML
tersebut, kemudian tempelkan di bagian navbar pada file index.html:

Kemudian, ubah dan sesuaikan kode navbar tersebut sehingga menjadi seperti yang ditunjukkan
pada gambar di bawah ini:
Berikut ini penjelasan fungsi dari class bootstrap yang kita tambahkan pada kode di atas:
• bg-primary : Memberikan latar belakang berwarna biru pada elemen
• navbar-dark : Mengubah warna teks menjadi putih untuk tampilan di atas latar
belakang gelap
• shadow-sm : Memberikan bayangan kecil pada elemen (shadow).
• fixed-top : Menempelkan navbar ke bagian atas halaman meskipun pengguna
menggulir ke bawah.
• container : Memberikan margin otomatis pada sisi kiri dan kanan.
• ms-auto : Memberikan margin otomatis pada sisi kiri dan kanan.

5. Pada bagian jumbotron, tambahkan kode HTML berikut:

Berikut ini adalah penjelasan mengenai fungsi dari setiap class Bootstrap yang telah ditambahkan
pada kode di atas (ditandai dengan garis bawah merah) dan kode SVG (ditandai dengan kotak
merah):
• jumbotron : Ini bukan class dari bootstrap, tetapi class yang kita buat sendiri. Silakan
buat class tersebut pada file style.css. Berikut kode css dari class
jumbotron yang perlu ditambahkan pada file style.css:

• text-center : Kelas ini digunakan untuk menengahkan teks secara horizontal.


• src=”img/foto.png” : Atribut src untuk menentukan sumber gambar yang akan ditampilkan
dalam elemen <img>. Dalam contoh ini, gambar yang digunakan adalah
foto.jpg yang berada di dalam folder img.
• rounded-circle : Digunakan untuk memberikan efek penyempurnaan bentuk elemen
menjadi lingkaran.
• img-thumbnail : Untuk memberikan gaya border dan padding pada gambar.
• display-4 : Kelas ini digunakan untuk membuat teks heading (h1, h2, dst.) lebih
besar.
• lead : Kelas ini digunakan untuk membuat teks lebih menonjol dengan
memberikan ukuran font yang sedikit lebih besar dan sedikit jarak antar
baris.
• Kode SVG : SVG (Scalable Vector Graphics) adalah format gambar berbasis XML yang
digunakan untuk menggambar grafik dua dimensi. Dalam kode ini, SVG
digunakan untuk membuat efek gelombang di bagian bawah jumbotron.
Kode ini bisa kita dapatkan dari situs: https://getwaves.io/
6. Pada bagian about, tambahkan kode HTML berikut:

Berikut ini adalah penjelasan mengenai fungsi dari setiap id, class Bootstrap, dan kode SVG yang
telah ditambahkan pada kode di atas:

• id=”about” : Atribut id="about" memberikan identifikasi unik pada elemen <section>


ini. ID digunakan untuk menghubungkan elemen section about dengan
anchor link <a class="nav-link" href="#about">About</a> pada navbar.
• container : Memberikan margin otomatis pada sisi kiri dan kanan.
• row : Kelas row adalah bagian dari sistem grid Bootstrap yang digunakan untuk
mengelompokkan kolom-kolom di dalamnya.
• justify- : Kelas ini menjadikan kolom-kolom yang ada dalam row akan berada di
content- tengah secara horizontal.
center
• fs-5 : Kelas ini digunakan untuk mengatur ukuran font. Kelas ini menetapkan
ukuran font menjadi ukuran 5 dalam skala ukuran font Bootstrap.
Skala Ukuran Font Bootstrap:
➢ fs-1 — Ukuran font terbesar.
➢ fs-2 — Sedikit lebih kecil dari fs-1.
➢ fs-3 — Ukuran font sedang.
➢ fs-4 — Ukuran font lebih kecil, biasanya untuk subjudul.
➢ fs-5 — Ukuran font lebih kecil lagi, cocok untuk teks biasa yang tidak
terlalu mencolok.
➢ fs-6 — Ukuran font terkecil, sering digunakan untuk teks yang lebih
kecil seperti keterangan atau footer.
• text-center : Kelas ini digunakan untuk menengahkan teks secara horizontal.
• col-md-4 : Kelas col-md-4 dalam Bootstrap adalah bagian dari sistem grid responsif
yang digunakan untuk menentukan lebar kolom dalam sebuah row
berdasarkan ukuran layar. Kelas ini memberitahu Bootstrap untuk
menampilkan elemen sebagai kolom dengan lebar tertentu saat layar
berada pada ukuran medium (md) atau lebih besar.
Penjelasan:
- col: Menunjukkan bahwa elemen ini adalah bagian dari sistem grid
Bootstrap dan akan menjadi kolom.
- md: Menunjukkan bahwa kelas ini berlaku pada ukuran layar medium
ke atas. Dalam konteks Bootstrap, ukuran layar medium (md)
biasanya dimulai dari lebar 768px.
- 4: Menentukan jumlah kolom yang akan digunakan oleh elemen
tersebut. Bootstrap grid system terbagi menjadi 12 kolom dalam satu
baris (row), sehingga col-md-4 berarti elemen ini akan mengambil 4
kolom dari total 12 kolom grid yang tersedia, yaitu sekitar 1/3 dari
lebar baris.
• Kode SVG : (sudah dijelaskan sebelumnya di atas)
7. Pada bagian projects, tambahkan kode HTML berikut:
Dan tambahkan kode berikut pada file style.css untuk memberikan warna latar belakang pada
section project:

Berikut ini adalah penjelasan mengenai fungsi dari setiap id, class Bootstrap, dan kode SVG yang
telah ditambahkan pada file HTML di atas:

• id=”projects” : Atribut id="projects" memberikan identifikasi unik pada


elemen <section> ini. ID digunakan untuk menghubungkan
elemen section projects dengan anchor link <a class="nav-
link" href="#projects">Projects</a> pada navbar.
• container : Memberikan margin otomatis pada sisi kiri dan kanan.
• row : Kelas row adalah bagian dari sistem grid Bootstrap yang
digunakan untuk mengelompokkan kolom-kolom di
dalamnya.
• text-center : Kelas ini digunakan untuk menengahkan teks secara
horizontal.
• mb-3 : Kelas ini memberikan margin bawah sebesar 1rem.
• col : Menunjukkan bahwa elemen ini adalah bagian dari sistem
grid Bootstrap dan akan menjadi kolom.
• justify-content-center : Kelas ini menjadikan kolom-kolom yang ada dalam row akan
berada di tengah secara horizontal.
• col-md-4 : (sudah dijelaskan sebelumnya di atas)
• card : Kelas ini digunakan untuk membuat elemen kartu (card).
Kartu ini adalah komponen UI yang sering digunakan untuk
menampilkan informasi dalam bentuk box yang terstruktur
dengan gambar, teks, dan konten lainnya.
• src=”img/projects/1.jpg” : Atribut src untuk menentukan sumber gambar yang akan
ditampilkan dalam elemen <img>. Dalam contoh ini, gambar
yang digunakan adalah 1.jpg yang berada di dalam folder
img/projects/.
• card-img-top : Kelas ini untuk menampilkan gambar di bagian atas kartu
(card). Gambar ini akan mengisi lebar kartu secara penuh.
• card-body : Kelas ini adalah bagian dari kartu (card) yang berfungsi
untuk menampung konten lainnya seperti teks deskripsi
atau elemen lain yang ingin Anda tampilkan di dalam kartu.
• card-text Kelas ini digunakan untuk memberikan gaya pada teks di
dalam kartu, menjadikannya lebih terstruktur dan rapi.
• Kode SVG : (sudah dijelaskan sebelumnya di atas)
8. Pada bagian contact, tambahkan kode HTML berikut:

Berikut ini adalah penjelasan mengenai fungsi dari setiap id, class Bootstrap, dan kode SVG yang
telah ditambahkan pada file HTML di atas:

• id=”contact” : Atribut id="contact" memberikan identifikasi unik pada


elemen <section> ini. ID digunakan untuk menghubungkan
elemen section contact dengan anchor link <a class="nav-
link" href="#contact">Contact</a> pada navbar.
• mb-3 : (sudah dijelaskan sebelumnya di atas)
• col : (sudah dijelaskan sebelumnya di atas)
• justify-content-center : (sudah dijelaskan sebelumnya di atas)
• col-md-6 : (sudah dijelaskan sebelumnya di atas)
Perbedaannya: col-md-6 berarti elemen ini akan mengambil
6 kolom dari total 12 kolom grid yang tersedia, yaitu sekitar
1/2 dari lebar baris.
• form-label : Kelas ini untuk memberikan gaya pada elemen <label>
dalam formulir (form).
• form-control : Kelas ini digunakan untuk memberikan gaya pada elemen
input form seperti <input> dan <textarea>. Kelas ini
memberi tampilan yang konsisten dan responsif pada
elemen formulir, termasuk pengaturan lebar, padding,
border, dan radius.
• btn : Kelas btn adalah kelas dasar untuk elemen tombol di
Bootstrap.
• btn-primary : Kelas ini digunakan untuk memberikan tombol dengan
warna utama (biasanya biru dalam tema Bootstrap default).

9. Pada bagian footer, tambahkan kode HTML berikut:

Berikut ini adalah penjelasan mengenai fungsi dari setiap class Bootstrap yang telah ditambahkan
pada file HTML di atas:

• bg-primary : Untuk memberikan latar belakang berwarna primer pada elemen. Warna
primer ini adalah warna dasar yang digunakan dalam tema Bootstrap,
biasanya berupa warna biru.
• text-white : Digunakan untuk mengubah warna teks menjadi putih.
• pb-5 : Untuk menambahkan padding bawah (padding bottom) sebesar 3rem
(atau 48px) pada elemen. Nilai 5 merujuk pada unit skala dari 0 hingga 5
dalam Bootstrap, di mana 5 adalah padding terbesar.
• <i class="bi : Ini merupakan kode untuk menampilkan sebuah icon yang sudah
bi-heart-fill disediakan oleh bootstrap. Berikut langkah-langkahnya:
text- 1. Klik menu “Icons” pada dokumentasi Bootstrap:
danger"></i
> 2. Scroll ke bawah hingga menemukan bagian instalasi icon bootstrap:

3. Salin kode yang ditandai kotak merah pada gambar di atas, dan tempel
kode tersebut pada bagian <head>:
4. Klik salah satu icon yang ingin digunakan atau ketik nama icon yang
ingin dicari:

5. Salin kode yang ditandai kotak merah pada gambar berikut dan tempel
kode tersebut pada file index.html:

• fw-bold : Digunakan untuk membuat teks menjadi tebal (bold).

10.Tambahkan kode css berikut ini pada file style.css agar masing-masing section memiliki padding
atas sebesar 5rem:
11. Berikut ini kode HTML secara keseluruhan:
12. Berikut kode CSS secara keseluruhan:
13. Berikut tampilan website yang telah dibuat:
14. Berikut referensi playlist Youtube untuk mempelajari framework css Bootstrap lebih mendalam
yang dapat diikuti (jika berminat):
➢ https://www.youtube.com/watch?v=ZwMVRjPEi0M

Anda mungkin juga menyukai