Membuat Website

menggunakan CSS
& Bootstrap

Untung Subagyo, M.Kom.

Berdo’a
Safety Induction
Posisi Duduk
• DUDUK TEGAP TIDAK MEMBUNGKUK

• POSISI LEHER TEGAP TIDAK MENUNDUK KE DEPAN

• ATUR KURSI SEHINGGA SANDARANNYA MENOPANG LEKUK

TULANG BELAKANG
Perhatikan Jarak Mata dengan
Layar
• Atur agar tidak terlalu dekat untuk mengurangi resoki
pancaran radiasi layar monitor yang dapat menimbulkan
kelelahan pada mata
PERHATIKAN BAHAYA KELISTRIKAN
Istirahatkan Mata

20 20 20
Terima Kasih atas Perhatian Anda

Selamat Mengikuti Pembelajaran

 Perkenalan

• Untung Subagyo
• Karanggamblok 01/05, Pejagoan, Kebumen
• 081227009435
• [email protected]
• Certified Web Developer by BNSP
• Certified Trainer by BNSP
• Certified Fundamental Azure by Microsoft
• MTCNA by Mikrotik

• Search di Google dengan keyword : Kebumen San francisco

Presentation title 20XX 10

 • Pengantar/Perkenalan (08.00 – 08.30)
• Pengenalan CSS (08.30 – 10.00)
• Pengenalan Javascript (10.00 – 11.30)

Agenda • Pengenalan Bootstrapt (12.30 – 15.30)

Presentation title 20XX 11

 Tools/Software

VSCode (Editor Text)

Browser (Chrome, Edge)

Presentation title 20XX 12

 CSS
(Cascading Style Sheet)
Membuat Website lebih cantik dan menarik

Presentation title 20XX 13

 Apa itu CSS?

• CSS (Cascade Style Sheet) adalah sebuah bahasa untuk mengatur tampilan web
sehingga terlihat lebih menarik dan indah.
• Dengan CSS, kita dapat mengatur layout (tata letak), warna, font, garis,
background, animasi, dan lain-lain.

Presentation title 20XX 14

 Mengapa Menggunakan CSS?

Tanpa CSS Dengan CSS

• Subtitle

Presentation title 20XX 15

 Tips Belajar CSS

• Tips #1: Cara Menghapal Kode CSS

• Tips #2: Gunakan Inspect Elemen
• Tips #3: Gunakan VS Code
• Tips #4: Gunakan Cheat Sheet

Presentation title 20XX 16

 Cara menulis CSS

• Internal CSS –> ditulis di dalam tag <style>;

• Inline CSS –> ditulis di atribut elemen HTML;
• External CSS –> ditulis di file CSS terpisah dengan HTML.

Presentation title 20XX 17

 Struktur Dasar CSS

• Struktur kode CSS terdiri dari tiga bagian:

1.Selektor;
2.Blok Deklarasi;
3.Properti dan nilanya.

Presentation title 20XX 18

 Selektor

• kata kunci untuk memilih elemen HTML yang akan kita beri style.

• Selektor dapat berupa nama tag, class, id, dan atribut.

Presentation title 20XX 19

 Blok Dekorasi

• tempat kita menuliskan atribut atau properti CSS yang akan diberikan ke pada elemen
yang telah diseleksi.

• Satu blok deklarasi, bisa dipakai oleh lebih dari satu selektor.

Presentation title 20XX 20

 Properti dan nilainya

• sekumpulan aturan yang akan diberikan kepada elemen yang dipilih.

• Setiap properti harus diakhiri dengan titik koma (;).

• Apabila hanya terdapat satu properti, boleh tidak menggunakan titik koma.
• Properti harus ditulis di dalam blok deklarasi.
• Nilai untuk properti kadang diapit tanda petik, kadang juga tidak.
• Biasanya yang diapit dengan tanda petik adalah nilai yang berupa teks.

Presentation title 20XX 21

 Komentar di CSS

• dipakai untuk memberikan informasi tambahan di kode CSS.

• Dapat juga digunakan untuk menonaktifkan beberapa kode tertentu
• Cara menulis komentar di CSS dilakukan dengan tanda /* dan diakhiri
dengan */.

Presentation title 20XX 22

 Macam Selektor CSS

• Ada 6 macam selektor di CSS:

• Selektor Tag
• Selektor Class
• Selektor ID
• Selektor Atribut
• Selektor Universal
• Selektor Pseudo

Presentation title 20XX 23

 Selektor tag / Type Selector

• memilih elemen berdasarkan nama tag.

Presentation title 20XX 24

 Selektor Class

• selektor yang memilih elemen berdasarkan nama class yang diberikan.

Selektor class dibuat dengan tanda titik di depannya.

• cara menggunakan selektor ini di HTML adalah dengan menambahkan

atribut class di dalamnya.

Presentation title 20XX 25

 Selektor Class

• Sebuah elemen HTML dapat menggunakan satu atau lebih class.

Presentation title 20XX 26

 Selektor ID

• Hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh digunakan oleh
satu elemen saja.
• Selektor ID ditandai dengan tanda pagar (#) di depannya.

Presentation title 20XX 27

 Selektor Atribut

• Selektor yang memilik elemen berdasarkan atribut.

• Selektor ini hampir sama seperti selektor Tag.

Presentation title 20XX 28

 Selektor Universal

• Selektor yang digunakan untuk menyeleksi semua elemen pada jangkauan (scope)
tertentu.

• Selektor universal bisanya digunakan untuk me-reset CSS.

• Pada halaman HTML, ada beberapa CSS bawaan browser
seperti padding dan margin pada elemen tertentu.
• Reset bertujuan untuk menghilangkan padding dan margin tersebut.

Presentation title 20XX 29

 Pseudo Selektor

• Selektor untuk memilih elemen semu seperti state pada elemen, elemen before dan
after, elemen ganjil, dan sebagainya.
• Ada dua macam pseudo selektor:
• pseudo-class selektor untuk state elemen;
• pseudo-element selektor untuk elemen semu di HTML.

Presentation title 20XX 30

 Pseudo Class

• Selain :hover ada beberapa selektor pseudo-class

• selektor untuk memilih state pada elemen. lainnya:

• Contohnya seperti elemen saat diklik, saat

fokus, saat disentuh, dan lain sebagainya. • :link untuk memlih link yang belum dikunjungi;
• :visited untuk memlih link yang sudah dikunjungi;
• :active untuk memilih elemen yang sedang aktif,
seperti saat diklik;
• :focus untuk memlih elemen yang sedang dalam
keadaan fokus, misal teks lagi diinput.
• :checked untuk memilih elemen yang dicentang pada
checkbox.

Presentation title 20XX 31

 Pseudo Element

• Selektor untuk memilih elemen semu.

Elemen semu yaitu elemen yang seolah-
olah kita tambahkan di HTML.

Presentation title 20XX 32

 Pseudo-element vs pseudo-class

• Selektor pseudo-element menggunakan tanda titik dua ganda (::) sedangkan pseudo-
class pakai satu titik dua (:).

• Berikut ini beberapa contoh selektor pseudo-element:

• ::before untuk memilh elemen semu sebelum elemen;
• ::after untuk memilh elemen semu setelah elemen;
• ::marker untuk memilh marker pada list;
• ::placeholder untuk memilih teks placeholder pada elemen input teks;

Presentation title 20XX 33

 Mewarnai teks

• Warna adalah properti yang paling sering digunakan dalam CSS.

• Porperti color merupakan properti untuk memberikan warna pada teks.

Presentation title 20XX 34

 Nilai valid untuk warna

• Nama warna
• Kode Heksadesimal
• Fungsi rgb() dan rgba()
• Fungsi hsl() dan hsla()

Presentation title 20XX 35

 Tips Menggunakan warna

• Tips #1: Tak perlu dihapal

• Tips #2: Gunakan Inspect Elemen
• Tips #3: Konsisten untuk Nilai Warna

Presentation title 20XX 36

 Contoh Kasus

Presentation title 20XX 37

 Javascript
Membuat Website lebih interaktif
Bahasa pemrograman yang wajib dipelajari jika ingin
mendalami dunia web development

Presentation title 20XX 38

 Javascript?

Presentation title 20XX 39

 Javascript?

• Bahasa pemrograman yang awalnya dirancang untuk berjalan di atas

browser.
• Seiring perkembangan zaman, javascript dapat digunakan pada sisi Server, Game, IoT,
Desktop, dsb.

Presentation title 20XX 40

 Program Javascript Pertama

Presentation title 20XX 41

 Cara Menulis Kode Javascript di HTML?

1.Embed (Kode Javascript ditempel langsung pada HTML. Contoh: yang tadi)
2.Inline (kode Javascript ditulis pada atribut HTML)
3.Eksternal (Kode Javascript ditulis terpisah dengan file HTML)

Presentation title 20XX 42

 Penulisan Kode javascript dengan Embed

• Javascript dapat ditulis di dalam

tag <head> dan <body>.
• Mana yang lebih bagus?
• Banyak yang merekomendasikan
menuliskannya di dalam <body>,
karena akan membuat web di-
load lebih cepat.

Presentation title 20XX 43

 Kode javascript Inline

• Kita menulis kode javascript di dalam atribut HTML.

• Biasanya digunakan untuk memanggil suatu fungsi pada event tertentu.

Presentation title 20XX 44

 Kode javascript Eksternal

• Kita menulis kode javascript secara terpisah dengan file HTML.

• Cara ini biasanya digunakan pada proyek-proyek besar, karena diyakini—dengan cara
ini—dapat lebih mudah mengelola kode project.

Presentation title 20XX 45

 Menerapkan javascript pada kasus

Presentation title 20XX 46

 Bootstrap
Framework CSS

Presentation title 20XX 47

 Bootstrap?

• Mau buat web dengan cepat?

• Mau kode HTML-nya konsisten?
• Mau buat tampilan web yang responsive dan bagus?
• Bootstrap saat ini menjadi framework yang sangat populer dalam pengembangan
web.
• Bootstrap adalah framework CSS yang bersifat Free dan Open Source. Bootstrap
menyediakan class-class CSS dan beberapa fungsi Javascript untuk mempermudah
pembuatan web.

Presentation title 20XX 48

 Sejarah

• Bootstrap awalnya bernama Twitter Blueprint.

• Karena waktu itu pertama kali dikembangkan oleh Mark Otto dan Jacob Thornton di
Twitter.
• Tujuan awalnya untuk menjaga konsistensi pada tool internal di Twitter. Karena
sebelum adanya Bootstrap, tim Twitter sudah menggunakan beberapa library untuk
membuat tampilan (GUI) Twitter.
• Akan tetapi tidak konsisten sehingga kode jadi sulit dirawat (maintenance).

Presentation title 20XX 49

 Sejarah

• Berangkat dari masalah tersebut:

• Mark Otto dan tim kecil yang berisi programmer mulai mendesain dan membuat
sebuah tool internal yang dinamakan Twitter Blueprint.
• Setelah beberapa bulan pengembangan, banyak programmer lainnya ikut
berkontribusi pada proyek ini sebagai partisipasi dalam Hack Week (Sebuah
Hackathon yang ada di tim Development Twitter).
• Kemudian Twitter Blueprint diubah namanya menjadi Bootstrap dan dirilis sebagai
proyek Open Source pada 19 Agustus 2011.

Presentation title 20XX 50

 Bootstrap 2 dan 3

• 31 Januari 2012 → Bootstrap 2

• Dirilis dengan penambahan dukungan pada Glyphicons, penambahan beberapa komponen,
dan juga perubahan pada komponen yang sudah ada.
• Pada Versi ini sudah mendukung responsive web design, yakni sebuah layout yang dapat
menyesuaikan diri pada ukuran perangkat yang digunakan.
• 19 Agustus 2013 → Bootstrap 3.
• Didesain ulang dengan konsep Flat design dan menggunakan pendekatan Mobile first.

Presentation title 20XX 51

 Bootstrap 4

• 29 Okteober 2014, Bootstrap 4 rilis dan versi finalnya rilis pada tanggal 18 Januari
2018. Versi final artinya versi yang tidak dilanjutkan pengembangannya.
• Beberapa perubahan pada rilis ini:
• Penulisan ulang kode mayor;
• Mengganti Less dengan Sass;
• Menambahkan Normalize CSS;
• Menghapus dukungan IE8, IE9, dan iOS6;
• Mendukung CSS Flex Box
• dan masih banyak lagi

Presentation title 20XX 52

 Bootstrap 5

• Bootstrap 5 resmi dirilis versi Alpha pada tanggal 16 Juni 2020. Berikutnya versi Beta
dirilis pada 7 Desember 2020.
• Beberapa perubahan pada Bootstrap 5:
• Menghapus jQuery;
• Penulisan ulang pada sistem grid;
• Migrasi dari Jekyll ke Hugo untuk web dokumentasi Bootstrap;
• Menghapus dukungan untuk IE10 dan IE11;
• Menambahkan sekumpulan SVG icons;
• dan masih banyak lagi

Presentation title 20XX 53

 Menggunakan Bootstrap pada HTML

1.Menggunakan CDN;
2.Download secara manual;
3.Download dengan package manager;

Presentation title 20XX 54

 Menggunakan CDN

Presentation title 20XX 55

 Latihan

• Buatlah folder baru dengan nama belajar-bootstrap

• Buatlah file HTML baru dengan nama hello-bootstrap.html.

Presentation title 20XX 56

Presentation title 20XX 57
 Download Bootstrap Secara Manual

• Download Bootstrap
• Ekstrak folder css dan js ke dalam folder belajar-bootstrap.
• Buat file HTML baru dengan nama bs-lokal.html.

Presentation title 20XX 58

Presentation title 20XX 59
 Fungsi Tag Meta Viewport

• Tag meta adalah tag HTML yang biasanya digunakan untuk memberikan instruksi
tertentu untuk web browser dan bot.

• Viewport adalah area web yang terlihat oleh user.

Presentation title 20XX 60

 Contoh

• Perhatikan di atribut content, di sana kita menggunakan beberapa variabel untuk

viewport:
• width untuk mengatur lebar halaman, jika membarikan nilai device-width maka lebar
akan mengikuti ukuran lebar dari perangkat;
• initial-scale adalah variabel untuk mengatur sekala (z00m) dari halaman web.

Presentation title 20XX 61

 Mengapa Bootstrap Membutuhkan Tag Meta Viewport?

• Bootstrap adalah Framework yang mengutamakan tampilan untuk mobile

(mobile first), artinya halaman web harus responsif.

• Responsif artinya bisa menyesuaikan diri dengan perangkat yang digunakan

oleh user/pengunjung web.

• Nah, untuk bisa membuat web menjadi responsive.. kita membutuhkan

bantuan dari tag <meta name='viewport'> untuk mengatur viewport.

Presentation title 20XX 62

 Latihan

Presentation title 20XX 63

 Jalankan

• Jalankan di Browser
• Jalankan di Mobile
• Bandingkan

Presentation title 20XX 64

 Memahami Sistem Grid

• Bagian terpenting yang harus dipahami pada Bootstrap adalah sistem grid.
• Apabila kita memahami sistem grid.., maka akan bisa membuat layout web dengan
mudah dan bagaimanapun bentuknya.

Presentation title 20XX 65

 Apa itu Sistem Grid?

• Sistem yang digunakan Bootstrap untuk mengatur tata letak (layout). Sistem ini terdiri
dari 12 kolom dan 6 breakpoint.

Presentation title 20XX 66

 Memahami Breakpoint

• Breakpoint adalah ukuran lebar yang menentukan tampilan responsif terhadap ukuran
viewport perangkat tertentu. 1
• Saat ini Bootstrap memiliki 6 ukuran Breakpoint, yakni none, sm, md, lg, xl, dan xxl.

Presentation title 20XX 67

 Ingat

• Bootstrap adalah framework yang menggunakan pendekatan mobile first, jadi kita harus
memikirkan tampilan di mobile terlebih dahulu sebelum membuat tampilan untuk desktop.

• Karena itu, nilai default breakpoint adalah none. Ukuran ini adalah ukuran yang paling kecil,
yakni sekitar 576px.

Presentation title 20XX 68

Presentation title 20XX 69
 Class Container

• Container adalah fondasi dasar dari blok layout. Container berfungsi untuk
membungkus blok di dalamnya, sehingga terlihat rapi terhadap ukuran layar.
• Container juga memiliki breakpoint.

Presentation title 20XX 70

 Class Container

• Ukuran kontainer akan 100% pada breakpoint tertentu. Misalnya, jika kita
menggunakan class container-md maka lebar kontainer akan 100% pada layar Extra
Small dan Small.

Presentation title 20XX 71

 Latihan

Presentation title 20XX 72

 • Jalankan

• Hapus class container, jalankan

• Class container-fluid adalah class kontainer yang ukurannya 100% di semua ukruan
layar.

Presentation title 20XX 73

 Class row dan Col

• Class row dan col merupakan class untuk membuat baris dan kolom. Kedua
class ini lah yang kita gunakan untuk membuat grid.
• Class row berfungsi untuk membuat baris. Class ini menggunakan flex,
namun breakpoint tidak berlaku untuk class ini.

Presentation title 20XX 74

 Class Gutter

• Gutter adalah jarak antar kolom. Class Gutter ditulis bersamaan dengan class row.
• Format penulisannya menggunakan huruf g.

• Gutter punya ukuran mulai dari 0 sampai 5.

• Class gx adalah Gutter untuk horizontal, sedangkan gy adalah Gutter untuk vertikal.
Jika hanya menggunakan g saja, maka artinya gutter untuk horizontal dan vertikal.

Presentation title 20XX 75

 Contoh penggunaan Gutter

Presentation title 20XX 76

 Contoh penggunaan Gutter

Presentation title 20XX 77

 Contoh penggunaan Gutter

• Jalankan
• Coba ubah g-0 menjadi g-5 untuk memberikan jarak sebesar 5.
• Jalankan

Presentation title 20XX 78

 Latihan: Layout 1 Kolom

Presentation title 20XX 79

 Latihan: Layout 2 Kolom

Presentation title 20XX 80

 Latihan: Layout 3 Kolom

Presentation title 20XX 81

 Untung
Subagyo

untungsuba
[email protected]
om

Terima Kasih
Presentation title 20XX 82