MODUL AJAR
Penggunaan Alat Ukur
I. Informasi Umum
A. Identitas Modul
Nama Penyusun : Alvin Nurwahyudi Nama Sekolah : SMKN 2 Sidoarjo Tahun Penyusun : 2025
Jenjang Sekolah : SMK
Alokasi Waktu : 8 x 45 Menit (2 Pertemuan)
Elemen : Dasar CSS
Capaian Pembelajaran :
Peserta didik mampu memahami konsep dasar CSS, jenis-jenis CSS (Inline, Internal, External), serta mampu menerapkannya untuk mengatur tampilan elemen HTML dalam pembuatan halaman web sederhana.
1. Peserta didik mampu memahami konsep dasar CSS dan cara penerapannya dalam dokumen HTML.
2. Peserta didik dapat mengidentifikasi berbagai jenis CSS (Inline, Internal, dan External) serta mengetahui kelebihan dan kekurangannya.
3. Peserta didik mampu menggunakan CSS untuk mengatur tampilan elemen HTML seperti warna, ukuran font, dan layout.
4. Peserta didik dapat menerapkan CSS dalam pembuatan halaman web sederhana yang memiliki tampilan menarik dan responsif.
5. Peserta didik mampu menganalisis serta membandingkan berbagai pendekatan penggunaan CSS dalam proyek pengembangan web..
B. Kopetensi Awal
Peserta didik telah memiliki pemahaman dasar mengenai:
1. Struktur dasar HTML dan elemen-elemen utama dalam sebuah halaman web.
2. Cara membuat dan menyusun dokumen HTML sederhana.
3. Fungsi dasar dari CSS dalam mengatur tampilan halaman web.
4. Perbedaan antara HTML dan CSS dalam pengembangan web.
C. Profil Pelajar Pancasila
Setelah mengikuti pembelajaran ini, Profil Pelajar Pancasila yang diharapkan muncul pada peserta didik adalah:
1. Mandiri, ditunjukkan dengan memiliki prakarsa untuk mengembangkan diri dan tidak tergantung pada orang lain.
2. Kreatif, ditunjukkan dengan keluwesan berpikir dalam mencari alternatif solusi permasalahan.
3. Bernalar kritis, ditunjukkan dengan memproses, mengolah, menganalisis, dan merefleksi pemikirannya sendiri.
D. Sarana & Prasarana
Sarana & Prasarana yang dibutuhkan pada saat belajar dengan modul ini antara lain:
1. Laptop atau pc dengan akses internet (Guru dan Siswa) 2. Proyektor untuk presentasi materi (Guru)
3. Text editor (VS Code, Sublime Text, Notepad++)
4. Browser (Google Chrome, Mozilla Firefox) untuk uji coba tampilan web E. Target Peserta Didik
a. Peserta didik reguler/tipikal: 75%
b. Peserta didik dengan kesulitan belajar: 15%
c. Peserta didik dengan pencapaian tinggi: 10%
F. Model Pembelajaran yang Digunakan
Model pembelajaran yang digunakan adalah Project Base Learning
II. KOMPONEN INTI A.
Tujuan PembelajaranSetelah mengikuti pembelajaran ini, peserta didik diharapkan dapat:
1. Menjelaskan pengertian CSS serta fungsinya dalam pengembangan web.
2. Mengidentifikasi berbagai jenis CSS (Inline, Internal, dan External) serta mengetahui kelebihan dan kekurangannya.
3. Menggunakan CSS untuk mengatur tampilan elemen HTML seperti warna, ukuran font, margin, padding, border, dan layout.
4. Menerapkan CSS dalam pembuatan halaman web sederhana yang menarik dan responsif.
5. Menganalisis serta membandingkan berbagai pendekatan penggunaan CSS dalam proyek pengembangan web.
6. Membangun halaman web sederhana dengan desain yang lebih terstruktur menggunakan konsep CSS Grid dan Flexbox.
B. Pertanyaan Pemantik
1. Apa yang akan terjadi jika sebuah halaman web tidak menggunakan CSS?
2. Mengapa CSS penting dalam pengembangan web modern?
3. Apa perbedaan antara Inline, Internal, dan External CSS?
4. Bagaimana cara mengubah warna teks pada elemen HTML menggunakan CSS?
5. Bagaimana cara membuat tata letak halaman web yang responsif menggunakan CSS?
C. Persiapan Pembelajaran
1. Modul "Dasar CSS" sebagai bahan utama pembelajaran.
2. Contoh kode HTML dan CSS untuk praktik langsung.
3. Jobsheet: dokumen kosong untuk latihan menulis kode CSS (soft copy).
4. Internet sebagai sumber tambahan untuk eksplorasi materi CSS.
5. Text editor (VS Code, Sublime Text, Notepad++) untuk menulis dan menguji kode CSS.
6. Browser (Google Chrome, Mozilla Firefox, Edge) untuk melihat hasil penerapan CSS.
7. Laptop atau PC untuk mengerjakan tugas praktik CSS.
D. Kegiatan Pembelajaran
Pertemuan 1 Kegiatan Pembuka (15 menit)
Orientasi pada masalah
Guru membuka pelajaran dengan salam dan doa.
Guru melakukan presensi peserta didik.
Guru menyampaikan tujuan pembelajaran dan manfaat penggunaan CSS dalam pengembangan web modern.
Guru memberikan pertanyaan pemantik - “apa yang akan terjadi jika sebuah
halaman web tidak menggunakan CSS?”
- “bagaimana cara mengubah warna pada teks pada elemen HTML menggunakan CSS?”
- “Mengapa penggunaan CSS lebih baik dibandingkan hanya mengandalkan HTML?”
Kegiatan inti (60 menit)
Membuat rumusan masalah
Guru menampilkan contoh tampilan halaman web sebelum dan sesudah menggunakan CSS..
Peserta didik mengamati kode HTML tanpa CSS dan mendiskusikan kekurangannya.
Siswa dibimbing oleh guru dalam menyusun pertanyaan yang berorientasi pada pemecahan masalah, seperti :
- “Bagaimana cara membuat tampilan web lebih menarik dan terstruktur?”
- “Bagaimana cara menghubungkan CSS dengan HTML?”
Menentukan indikator
Guru menjelaskan konsep CSS dan penerapannya dalam dokumen HTML.
Guru menjelaskan tiga jenis CSS (Inline, Internal, dan External) serta contoh penggunaannya.
Peserta didik diberikan contoh kode dan mencoba mengubah properti CSS seperti warna dan ukuran font pada elemen HTML.
Analisis masalah
Peserta didik menerapkan Inline dan Internal CSS pada halaman web sederhana.
Guru memberikan bimbingan dan umpan balik terhadap kode yang dibuat oleh peserta didik.
Guru memberikan studi kasus:
- “Bagaimana cara membuat teks di tengah halaman menggunakan CSS?”
- “Bagaimana cara membuat warna latar belakang halaman berubah?”
Menyusun rencana proyek
Guru menjelaskan penerapan External CSS dan bagaimana menghubungkannya dengan HTML.
Peserta didik diberikan contoh file CSS eksternal dan mempraktikkannya.
Peserta didik mulai membangun halaman web sederhana yang lebih terstruktur menggunakan CSS.
Membuat jadwal proyek
Peserta didik menyusun rencana kerja untuk proyek akhir mereka.
Guru memastikan bahwa timeline proyek realistis dan dapat diselesaikan dalam batas waktu yang ditentukan.
Monitoring pelaksanaan
Guru melakukan pemantauan dan memberikan arahan jika peserta didik mengalami kesulitan.
Guru memastikan bahwa setiap peserta didik memahami cara menerapkan CSS dalam proyeknya.
Pengumpulan proyek
Guru membuat google form unutk mengumpulan tugas.
Salah satu anggota kelompok dapat mengumpulkan tugas hasil dari diskusi kelompok.
Kegiatan Penutup (15 menit)
Presentasi Hasil Proyek
Peserta didik mempresentasikan hasil latihan mereka dalam menerapkan CSS pada halaman web sederhana.
Guru memberikan masukan dan umpan balik terhadap pekerjaan peserta didik.
Guru dan peserta didik melakukan refleksi terhadap materi yang telah dipelajari.
Penilaian dan evaluasi
Guru bersama siswa melakukan menyimpulkan hasil diskusi untuk pembelajaran hari ini.
Refleksi Guru memberikan motivasi.
Guru menutup dengan memberikan salam.
Pertemuan 2 Kegiatan Pembuka (15 menit)
Orientasi pada masalah
Guru membuka pelajaran dengan salam dan doa.
Guru melakukan presensi pesertta didik.
Guru mengulas kembali materi pertemuan sebelumnya dengan sesi ttanya jawab.
Guru menyampaikan tujuan pembelajaran untuk pertemuan ini.
Guru memberikan pertanyaan pemantik
- “Bagaimana cara membuat CSS lebih rapi dan bisa digunakan ulang?”
- “Apa keuntungan menggunakan External CSS dibandingkan Inline dan Internal CSS?”
Kegiatan inti (60 menit)
Membuat rumusan masalah
Guru menunjukkan contoh halaman web dengan External CSS dan tanpa CSS.
Peserta didik mengamati perbedaan tampilan dan struktur kode pada kedua halaman tersebut.
Guru bertanya kepada peserta didik:
- “Bagaimana cara membuat tampilan web lebih responsif dan mudah dikelola”
- “Mengapa pemisahan CSS dalam file eksternal lebih efektif dibandingkan metode lainnya?”
Menentukan indikator
Guru menjelaskan konsep External CSS dan cara menghubungkannya dengan HTML menggunakan tag <link>.
Peserta didik mengidentifikasi manfaat dan kelemahan penggunaan External CSS dibandingkan dengan Inline dan Internal CSS
Guru memberikan contoh struktur file proyek web yang menggunakan External CSS agar peserta didik memahami penerapannya dalam skala lebih besar.
Analisis masalah
Peserta didik mulai menerapkan External CSS dalam proyek latihan mereka.
Guru mengamati dan memberikan umpan balik terhadap struktur kode CSS yang dibuat peserta didik.
Guru mengajukan pertanyaan reflektif seperti:
- “Bagaimana cara memastikan CSS yang dibuat tetap terstruktur dan mudah dipahami?”
- “Bagaimana cara mengatur warna, font, dan tata letak elemen menggunakan External CSS?”
Menyusun rencana proyek
Guru meminta peserta didik untuk menyusun konsep sederhana dari halaman web yang akan mereka buat.
Peserta didik mulai mengatur struktur HTML dan menghubungkannya dengan file CSS eksternal.
Guru memberikan contoh bagaimana menggunakan CSS Grid atau Flexbox untuk mengatur tata letak halaman secara efisien.
Membuat jadwal proyek
Peserta didik menyusun timeline pengerjaan proyek, mulai dari desain hingga implementasi kode.
Guru memastikan bahwa timeline proyek realistis dan dapat diselesaikan dalam batas waktu yang ditentukan.
Monitoring pelaksanaan
Guru melakukan pemantauan dan memberikan arahan jika siswa mengalami kesulitan
Guru memastikan setiap anggota memahami tugas yang harus diselesaikan secara kelompok
Pengumpulan proyek
Guru membuat google form unutk mengumpulan tugas.
Salah satu anggota kelompok dapat mengumpulkan tugas hasil dari diskusi
kelompok.
Kegiatan Penutup (15 menit)
Presentasi Hasil Proyek
Peserta didik mempresentasikan hasil latihan mereka dalam menerapkan External CSS pada halaman web sederhana.
Guru memberikan masukan dan umpan balik terhadap pekerjaan peserta didik.
Penilaian dan evaluasi
Guru memberikan kesempatan bagi peserta didik untuk bertanya atau menyampaikan kesulitan yang mereka alami selama pembelajaran.
Guru memberikan ringkasan mengenai konsep External CSS, keunggulannya, serta penerapannya dalam proyek web.
Refleksi Guru memberikan motivasi.
Guru menutup dengan memberikan salam.
E. Asesmen
1. Diagnostik Kognitif
2. Hasil Perencanaan/Desain Jaringan F. Pengayaan & Remidial
Untuk lebih menambah luas wawasanmu mengenai dasar CSS, dan supaya kamu lebih termotivasi kamu bisa kunjungi link berikut:
https://www.w3schools.com/css/default.asp G. Refleksi Siswa dan Guru
1. Apa ada kendala pada kegiatan pembelajaran?
2. Apakah semua peserta didik aktif selama mengikuti kegiatan pembelajaran?
3. Apa saja kesulitan yang dihadapi peserta didik selama mengikuti kegiatan pembelajaran?
4. Apakah kesulitan yang dialami peserta didik dapat teratasi?
5. Apa level pencapaian rata-rata peserta didik dalam kegiatan pembelajaran ini?
6. Apakah seluruh peserta didik dapat tuntas dalam pelaksanaan pembelajaran?
7. Apa strategi yang harus dipilih supaya peserta didik dapat menuntaskan kompetensi?
III. LAMPIRAN A. LKPD
LEMBAR KEGIATAN PESERTA DIDIK (LKPD) Dasar – Dasar Kejuruan Teknik Rekayasa Perangkat Lunak
Satuan Pendidikan : SMKN 2 Sidoarjo Kelas/Semester : X (sepuluh) / I (Ganjil)
Nama Kelompok :………
Nama Anggota : 1. ………..
2. ………..
3. ………..
4. ………..
Materi Pokok : Dasar CSS
Guru Pengampu : Alvin Nurwahyudi Kegiatan 1 :
a. Petunjuk Kerja :
- Buat kelompok yang terjadi dari 3-4 orang - Siapkan software untuk presentasi
b. Soal :
Buatlah sebuah pemaparan tentang penerapan External CSS dalam pembuatan halaman web modern, termasuk keunggulan dan kelemahannya dibandingkan dengan Inline dan Internal CSS. Hasil diskusi dipresentasikan di depan kelas.
c. Rubik Penilaian Presentasi Kelompok
Penilaian Tidak Ada Kurang
Lengkap Lengkap
Langkah
/dialog lengkap Tidak ada
kejelasan (5) Dianalisis point langkah- langkah tapi kurang tepat
(10)
Dianalisis dan point-ponit lengkap (20)
Analisis langkah dialog
Tidak dianalisis (5)
Dianalisis tapi tidak lengkap
(10)
Dianalisis dan lengkap (20) Presentasi Tidak aktif
dalam presentasi (5)
Aktif dalam presentasi dan
tidak bisa menjawab (10)
Aktif dalam presentasi dan
menjawab semua pertanyaan (20) Hasil akhir dari
kesimpulan yang didapat
Kurang lengkap langkah- langkahnya
(10)
Kurang lengkap langkah- langkahnya tapi
menyertakan hasil presentasi
(25)
Lengkap langkah- langkahnya dan
menyertakan kesimpulan hasil presentasi
(40) d. Penilaian Sikap
No Nama Disiplin Kerja
Sama Tanggung
Jawab Jumlah
Skor Nilai 1.
2.
3.
4.
*) Ketentuan
1. 20 => jika peserta didik sangat kurang konsisten memperhatikan perilaku yang tertera dalam indicator.
2. 40 => jika peserta didik kurang konsisten memperhatikan perilaku yang tertera dalam indicator.
3. 60 => jika peserta didik mulai konsisten memperhatikan perilaku yang tertera dalam indicator.
4. 80 => jika peserta didik konsisten memperhatikan perilaku yang tertera dalam indicator
5. 100 => jika peserta didik selalu konsisten memperhatikan perilaku yang
tertera dalam indikator
Format penilaian: NILAI = (Jumlah Skor / 300) X 10 Tes Formatif
1. Jelaskan apa yang anda ketahui tentang External CSS!
(skor 35)
2. Sebutkan perbedaan antara Inline, Internal, dan External CSS! (skor 30)
3. Jelaskan cara menghubungkan file CSS eksternal ke dalam dokumen HTML! (skor 30)
Kegiatan 2 :
a. Petunjuk Kerja :
- Buat kelompok yang terjadi dari 3-4 orang - Siapkan software untuk presentasi
b. Soal :
Rancang dan buat sebuah desain halaman web sederhana menggunakan External CSS. Pastikan menggunakan Flexbox atau Grid Layout untuk mengatur tata letak elemen. Setelah selesai, setiap kelompok harus mempresentasikan hasil desainnya.
c. Rubik Penilaian Presentasi Kelompok
Penilaian Tidak Ada Kurang
Lengkap Lengkap
Langkah
/dialog lengkap Tidak ada
kejelasan (5) Dianalisis point langkah- langkah tapi kurang tepat
(10)
Dianalisis dan point-ponit lengkap (20)
Analisis langkah dialog
Tidak dianalisis (5)
Dianalisis tapi tidak lengkap
(10)
Dianalisis dan lengkap (20) Presentasi Tidak aktif
dalam presentasi (5)
Aktif dalam presentasi dan
tidak bisa menjawab (10)
Aktif dalam presentasi dan
menjawab semua pertanyaan (20) Hasil akhir dari
kesimpulan yang didapat
Kurang lengkap langkah- langkahnya
(10)
Kurang lengkap langkah- langkahnya tapi
menyertakan hasil presentasi
(25)
Lengkap langkah- langkahnya dan
menyertakan kesimpulan hasil presentasi
(40) d. Penilaian Sikap
No Nama Disiplin Kerja Sama
Tanggung Jawab
Jumlah Skor
Nilai 5.
6.
7.
8.
*) Ketentuan
6. 20 => jika peserta didik sangat kurang konsisten memperhatikan perilaku yang tertera dalam indicator.
7. 40 => jika peserta didik kurang konsisten memperhatikan perilaku yang tertera dalam indicator.
8. 60 => jika peserta didik mulai konsisten memperhatikan perilaku yang tertera dalam indicator.
9. 80 => jika peserta didik konsisten memperhatikan perilaku yang tertera dalam indicator
10. 100 => jika peserta didik selalu konsisten memperhatikan perilaku yang
tertera dalam indikator
Format penilaian: NILAI = (Jumlah Skor / 300) X 10 Tes Formatif
a. Jelaskan langkah-langkah dalam menghubungkan file External CSS ke dalam dokumen HTML! (Skor 35)!
(skor 35)
b. Sebutkan dan jelaskan perbedaan utama antara Flexbox dan Grid Layout dalam CSS! (skor 30)
c. Bagaimana cara menggunakan Media Query dalam CSS untuk membuat desain web responsif? (skor 30)
B. Bahan Bacaan Guru dan Siswa MATERI
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan tata letak halaman web. CSS bekerja bersama HTML untuk memberikan gaya seperti warna, ukuran font, dan tata letak elemen dalam suatu halaman web.
CSS dapat diterapkan dengan tig acara, yaitu:
1. Internal CSS: Ditulis di dalam tag <style> dalam bagian <head> dokumen HTML.
2. Inline CSS: Ditulis langsung dalam atribut elemen HTML.
3. External CSS: Ditulis dalam file terpisah dengan ekstensi .css dan dipanggil menggunakan tag <link>.
Jenis-Jenis CSS
1. Inline CSS: Digunakan untuk memberikan gaya pada satu elemen secara langsung
2. Embedded CSS: Didefinisikan dalam satu dokumen HTML di dalam tag
3. External CSS: Didefinisikan dalam file .css yang terpisah.
Elemen-Elemen CSS
- Warna dan Font: CSS memungkinkan kita untuk mengatur warna teks, ukuran font, dan jenis font.
- Margin dan Padding: Digunakan untuk mengatur jarak antara elemen HTML.
- Border: Menentukan batas elemen seperti kotak atau garis tepi.
- Layout dan Posisi: Dengan menggunakan float, flexbox, dan grid, tata letak elemen dapat diatur lebih rapi dan responsif.
Penggunaan CSS dalam Web Design
CSS sangat penting dalam pembuatan design web karena:
- Memisahkan konten dari tampilan, sehingga mempermudah pengelolaan kode.
- Meningkatkan keterbacaan dan efisiensi dalam desain halaman web.
- Memungkinkan pembuatan halaman web yang responsif dan fleksibel.
Studi Kasus
1. Membuat halaman web sederhana dengan CSS - Buat file HTML dan CSS
- Gunakan selector CSS untuk memberikan gaya pada elemen HTML - Terapkan berbagai property seperti warna, ukuran teks, margin dan
padding
2. Menggunakan CSS untuk tata letak responsif
- Manfaatkan properti display: flex; untuk membuat layout lebih fleksibel
- Gunakan media queries untuk menyesuaikan tampilan di berbagai ukuran layar.
Kesimpulan
Dengan memahami CSS, guru dan siswa dapat mengembangkan halaman web yang lebih menarik, terstruktur, dan responsif. CSS menjadi dasar penting dalam pengembangan web modern karena kemampuannya dalam mengatur tampilan dengan lebih fleksibel dan efisien.
