{"id":602,"date":"2026-06-24T17:33:57","date_gmt":"2026-06-24T10:33:57","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=602"},"modified":"2026-06-25T14:22:22","modified_gmt":"2026-06-25T07:22:22","slug":"bab-4-typography-dan-warna","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-4-typography-dan-warna\/","title":{"rendered":"BAB 4 – TYPOGRAPHY DAN WARNA"},"content":{"rendered":"\n

Tujuan Pembelajaran<\/h2>\n\n\n\n

Setelah mempelajari bab ini peserta mampu:<\/p>\n\n\n\n

    \n
  1. Memahami Typography Bootstrap.<\/li>\n\n\n\n
  2. Menggunakan heading Bootstrap.<\/li>\n\n\n\n
  3. Membuat teks profesional.<\/li>\n\n\n\n
  4. Mengatur ukuran teks tanpa CSS.<\/li>\n\n\n\n
  5. Menggunakan warna Bootstrap. <\/li>\n\n\n\n
  6. Mengatur warna teks. <\/li>\n\n\n\n
  7. Mengatur background. <\/li>\n\n\n\n
  8. Membuat tampilan lebih menarik.<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    A. Apa Itu Typography?<\/h1>\n\n\n\n

    Typography adalah teknik mengatur tampilan tulisan agar lebih mudah dibaca dan terlihat menarik.<\/p>\n\n\n\n

    Dalam Bootstrap, typography sudah disediakan sehingga kita tidak perlu membuat CSS sendiri.<\/p>\n\n\n\n

    \n\n\n\n

    B. Heading Bootstrap<\/h1>\n\n\n\n

    Bootstrap mendukung heading:<\/p>\n\n\n\n

    <h1>Judul H1<\/h1>
    <h2>Judul H2<\/h2>
    <h3>Judul H3<\/h3>
    <h4>Judul H4<\/h4>
    <h5>Judul H5<\/h5>
    <h6>Judul H6<\/h6><\/code><\/pre>\n\n\n\n
    Hasil:<\/p>\n\n\n\n
    H1<\/h1>\n\n\n\n
    H2<\/h2>\n\n\n\n
    H3<\/h3>\n\n\n\n
    H4<\/h4>\n\n\n\n
    H5<\/h5>\n\n\n\n
    H6<\/h6>\n\n\n\n
    \n\n\n\n
    Praktik 1<\/h1>\n\n\n\n
    Buat file:<\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
    <head>
    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/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><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    C. Display Heading<\/h1>\n\n\n\n
    Untuk membuat tulisan besar seperti banner:<\/p>\n\n\n\n
    <h1 class=\"display-1\">Display 1<\/h1>
    <h1 class=\"display-2\">Display 2<\/h1>
    <h1 class=\"display-3\">Display 3<\/h1><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Praktik 2<\/h1>\n\n\n\n
    <div class=\"container\">

    <h1 class=\"display-1\">
    BOOTSTRAP 5
    <\/h1>

    <p>Belajar Web Modern<\/p>

    <\/div><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    D. Lead Text<\/h1>\n\n\n\n
    Lead digunakan untuk membuat paragraf utama.<\/p>\n\n\n\n
    <p class=\"lead\">
    Bootstrap adalah framework CSS yang sangat populer.
    <\/p><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Praktik 3<\/h1>\n\n\n\n
    <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><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    E. Text Alignment<\/h1>\n\n\n\n
    Rata Kiri<\/h3>\n\n\n\n
    <p class=\"text-start\">
    Teks rata kiri
    <\/p><\/code><\/pre>\n\n\n\n
    Rata Tengah<\/h3>\n\n\n\n
    <p class=\"text-center\">
    Teks rata tengah
    <\/p><\/code><\/pre>\n\n\n\n
    Rata Kanan<\/h3>\n\n\n\n
    <p class=\"text-end\">
    Teks rata kanan
    <\/p><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Praktik 4<\/h1>\n\n\n\n
    Buat halaman profil sekolah dengan:<\/p>\n\n\n\n
      \n
    • Judul rata tengah<\/li>\n\n\n\n
    • Motto sekolah rata kiri<\/li>\n\n\n\n
    • Nama kepala sekolah rata kanan<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n
      Latihan Bab 4<\/h1>\n\n\n\n
        \n
      1. Apa yang dimaksud Typography?<\/li>\n\n\n\n
      2. Apa fungsi Display Heading?<\/li>\n\n\n\n
      3. Apa fungsi class lead?<\/li>\n\n\n\n
      4. Apa fungsi text-center?<\/li>\n\n\n\n
      5. Apa fungsi text-end?<\/li>\n<\/ol>\n\n\n\n
        \n\n\n\n
        Tugas Praktik Bab 4<\/h1>\n\n\n\n
        Buat halaman:<\/p>\n\n\n\n
        PORTAL SEKOLAH

        Selamat datang di website sekolah

        Visi sekolah...
        Misi sekolah...<\/code><\/pre>\n\n\n\n
        Ketentuan:<\/p>\n\n\n\n
        Gunakan text-center.<\/p>\n\n\n\n
        Gunakan display heading.<\/p>\n\n\n\n
        Gunakan lead text.<\/p>\n\n\n\n
        A. Color System Bootstrap<\/h1>\n\n\n\n
        Bootstrap menyediakan warna bawaan.<\/p>\n\n\n\n
        Class<\/th>Warna<\/th><\/tr><\/thead>
        primary<\/td>Biru<\/td><\/tr>
        secondary<\/td>Abu<\/td><\/tr>
        success<\/td>Hijau<\/td><\/tr>
        danger<\/td>Merah<\/td><\/tr>
        warning<\/td>Kuning<\/td><\/tr>
        info<\/td>Biru muda<\/td><\/tr>
        dark<\/td>Hitam<\/td><\/tr>
        light<\/td>Putih<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
        \n\n\n\n
        B. Mengubah Warna Teks<\/h1>\n\n\n\n
        <p class=\"text-primary\">
        Teks Biru
        <\/p><\/code><\/pre>\n\n\n\n
        \n\n\n\n
        Praktik 1<\/h1>\n\n\n\n
        <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><\/code><\/pre>\n\n\n\n
        \n\n\n\n
        C. Background Color<\/h1>\n\n\n\n
        <div class=\"bg-primary\">
        Konten
        <\/div><\/code><\/pre>\n\n\n\n
        \n\n\n\n
        Praktik 2<\/h1>\n\n\n\n
        <div class=\"bg-primary text-white p-3\">

        Selamat Datang

        <\/div><\/code><\/pre>\n\n\n\n
        \n\n\n\n
        D. Kombinasi Warna<\/h1>\n\n\n\n
        <div class=\"bg-dark text-light p-3\">

        Dashboard Admin

        <\/div><\/code><\/pre>\n\n\n\n
        \n\n\n\n
        Praktik 3<\/h1>\n\n\n\n
        Buat:<\/p>\n\n\n\n
        Header Biru

        Konten Putih

        Footer Hitam<\/code><\/pre>\n\n\n\n
        Menggunakan class Bootstrap.<\/p>\n\n\n\n
        \n\n\n\n
        Latihan Bab 4<\/h1>\n\n\n\n
          \n
        1. Apa fungsi text-primary?<\/li>\n\n\n\n
        2. Apa fungsi bg-success?<\/li>\n\n\n\n
        3. Mengapa perlu kombinasi warna?<\/li>\n\n\n\n
        4. Apa fungsi text-white?<\/li>\n\n\n\n
        5. Apa fungsi bg-dark?<\/li>\n<\/ol>\n\n\n\n
          \n\n\n\n
          Tugas Praktik Bab 4<\/h1>\n\n\n\n
          Buat halaman informasi sekolah menggunakan:<\/p>\n\n\n\n
            \n
          • Header biru<\/li>\n\n\n\n
          • Isi putih<\/li>\n\n\n\n
          • Footer hitam<\/li>\n<\/ul>\n\n\n\n
            <\/p>\n","protected":false},"excerpt":{"rendered":"
            Tujuan Pembelajaran Setelah mempelajari bab ini peserta mampu: A. Apa Itu Typography? Typography adalah teknik mengatur tampilan tulisan agar lebih…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[20],"tags":[35],"class_list":["post-602","post","type-post","status-publish","format-standard","hentry","category-tutorial-bootstrap","tag-tutorial-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":3,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/602\/revisions"}],"predecessor-version":[{"id":624,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/602\/revisions\/624"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}