BAB 4 – TYPOGRAPHY DAN WARNA
Tujuan Pembelajaran
Setelah mempelajari bab ini peserta mampu:
- Memahami Typography Bootstrap.
- Menggunakan heading Bootstrap.
- Membuat teks profesional.
- Mengatur ukuran teks tanpa CSS.
- Menggunakan warna Bootstrap.
- Mengatur warna teks.
- Mengatur background.
- Membuat tampilan lebih menarik.
A. Apa Itu Typography?
Typography adalah teknik mengatur tampilan tulisan agar lebih mudah dibaca dan terlihat menarik.
Dalam Bootstrap, typography sudah disediakan sehingga kita tidak perlu membuat CSS sendiri.
B. Heading Bootstrap
Bootstrap mendukung heading:
<h1>Judul H1</h1>
<h2>Judul H2</h2>
<h3>Judul H3</h3>
<h4>Judul H4</h4>
<h5>Judul H5</h5>
<h6>Judul H6</h6>Hasil:
H1
H2
H3
H4
H5
H6
Praktik 1
Buat file:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>SMK Teknologi Indonesia</h1>
<h2>Jurusan RPL</h2>
<h3>Pemrograman Web</h3>
</div>
</body>
</html>C. Display Heading
Untuk membuat tulisan besar seperti banner:
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>Praktik 2
<div class="container">
<h1 class="display-1">
BOOTSTRAP 5
</h1>
<p>Belajar Web Modern</p>
</div>D. Lead Text
Lead digunakan untuk membuat paragraf utama.
<p class="lead">
Bootstrap adalah framework CSS yang sangat populer.
</p>Praktik 3
<div class="container">
<h1>Belajar Bootstrap</h1>
<p class="lead">
Framework CSS yang membantu membuat website lebih cepat dan responsif.
</p>
<p>
Ini adalah paragraf biasa.
</p>
</div>E. Text Alignment
Rata Kiri
<p class="text-start">
Teks rata kiri
</p>Rata Tengah
<p class="text-center">
Teks rata tengah
</p>Rata Kanan
<p class="text-end">
Teks rata kanan
</p>Praktik 4
Buat halaman profil sekolah dengan:
- Judul rata tengah
- Motto sekolah rata kiri
- Nama kepala sekolah rata kanan
Latihan Bab 4
- Apa yang dimaksud Typography?
- Apa fungsi Display Heading?
- Apa fungsi class lead?
- Apa fungsi text-center?
- Apa fungsi text-end?
Tugas Praktik Bab 4
Buat halaman:
PORTAL SEKOLAH
Selamat datang di website sekolah
Visi sekolah...
Misi sekolah...Ketentuan:
Gunakan text-center.
Gunakan display heading.
Gunakan lead text.
A. Color System Bootstrap
Bootstrap menyediakan warna bawaan.
| Class | Warna |
|---|---|
| primary | Biru |
| secondary | Abu |
| success | Hijau |
| danger | Merah |
| warning | Kuning |
| info | Biru muda |
| dark | Hitam |
| light | Putih |
B. Mengubah Warna Teks
<p class="text-primary">
Teks Biru
</p>Praktik 1
<div class="container">
<p class="text-primary">Data Siswa</p>
<p class="text-success">Data Berhasil Disimpan</p>
<p class="text-danger">Data Gagal Disimpan</p>
</div>C. Background Color
<div class="bg-primary">
Konten
</div>Praktik 2
<div class="bg-primary text-white p-3">
Selamat Datang
</div>D. Kombinasi Warna
<div class="bg-dark text-light p-3">
Dashboard Admin
</div>Praktik 3
Buat:
Header Biru
Konten Putih
Footer HitamMenggunakan class Bootstrap.
Latihan Bab 4
- Apa fungsi text-primary?
- Apa fungsi bg-success?
- Mengapa perlu kombinasi warna?
- Apa fungsi text-white?
- Apa fungsi bg-dark?
Tugas Praktik Bab 4
Buat halaman informasi sekolah menggunakan:
- Header biru
- Isi putih
- Footer hitam