Modul Ajar Pemrograman Web (CSS)
Modul Ajar Pemrograman Web (CSS)
MODUL AJAR
PEMROGRAMAN WEB DAN PERANGKAT
BERGERAK
CSS (Cascading Style Sheet)
KURIKULUM MERDEKA
Semester Ganjil
Tahun Pelajaran 2023 / 2024
SMK
FASE F
(KELAS XI)
E. Asesmen
Bentuk
Jenis
Profil Pelajar Pancasila Tertulis Performa
Diagnostik Penilaian diri Jawaban singkat
Formatif Presentasi dan simulasi
Sumatif
1. LAMPIRAN
Glosarium
CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk memperindah tampilan HTML
atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna
teks atau background dan lainnya.
Daftar Pustaka
Buku Bahan Ajar Dasar-dasar Pengembangan Perangkat Lunak dan Gim.
Kemendikbudristek, 2021
https://instiki.ac.id/wp-content/uploads/2022/02/MODUL-
PEMROGRAMAN-WEB-I-TI-Fix.docx
RINGKASAN MATERI
CSS
Pengertian CSS
CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk memperindah tampilan HTML
atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna teks atau
background dan lainnya. Berikut adalah sintak dasar dari CSS :
Selector adalah elemen/tag HTML yang ingin diberi style. Kita dapat menuliskan langsung nama tag
yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada contoh kode CSS diatas kita akan memberi
style pada seluruh tag h1 yang terdapat dalam file HTML.
Jika tag HTML yang ingin diberi style memiliki ID, dapat menuliskan nama ID tersebut dengan diawali
tanda kress (#). Contoh :
#header
Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda
titik (.) diikuti dengan nama class. Contoh :
.artikel
Jika hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka seluruh tag h1 yang
terdapat dalam file HTML akan memiliki style yang sama. Bagaimana jika kita hanya ingin memberi style
pada tag h1 yang hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :
.artikel h1
Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag h1 yang hanya terdapat
di dalam class artikel (atau - h1 yang merupakan child dari class artikel).
Kita dapat memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya ketika anda memiliki
dua atau lebih tag dengan warna background yang sama, dari pada menuliskan kode seperti ini :
h1{ background-color: #666666; }
{ background-color: #666666; }
a { background-color:
kita dapat menggabungkan selector dengan menambahkan tanda koma pada nama tag yang ingin diberi
style.
Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background,
jarak antar elemen, garis pinggir dan lainnya.
Untuk memberikan nilai value pada property digunakan tanda titik dua ( : ). Setiap property diakhiri
Ada 3 cara penulisan kode CSS yaitu inline, internal, dan external.
Inline
Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style
dengan menggunakan atribut style, seperti contoh berikut :
Penulisan kode CSS dengan metode internal yaitu ditulis didalam tag style yang ditempatkan pada tag
head, seperti contoh berikut :
<html>
<head>
<title>Judul HTML</title>
<style>
h1 {
color : red;
}
</style>
</head>
...
External
Metode external yaitu dengan membuat file CSS dan dipanggil didalam tag head. File CSS memiliki
ekstensi misalnya namafile.css, seperti contoh berikut :
<html>
<head>
<title>Judul HTML</title>
<link rel=”stylesheet” href=”namafile.css”/>
</head>
...
2. Margin
Property margin digunakan untuk memberikan jarak antar elemen/tag HTML. Misalnya jarak antar
<div> dan tag-tag HTML lainnya. Sebagai contoh, buatlah file HTML dengan kode berikut:
<div class=’box‛>
Box ke satu
</div>
<div class=’box’>
Box ke dua
</div>
Lalu tambahkan tag style dalam tag head, dan ketikkan kode CSS berikut :
.box{
background-color:green;
Jarak antar box ke satu dan box ke dua sedikit berjauhan, karena kita menambahkan margin bawah
(margin-bottom) sebesar 50px.Untuk melihat perbedaan ketika kita memberikan margin atau tidak, anda
dapat menghapus property margin-bottom dan perhatikan perbedaannya.Anda juga dapat memberikan jarak
dari kanan (right), kiri (left) dan atas (top). Misalnya :
margin-top:20px;
margin-right:30px;
margin-bottom:50px;
margin-left:40px;
3. Padding
Property padding digunakan untuk memberikan jarak antara konten elemen. Property padding
digunakan untuk memberikan ruang di dalam border di sekeliling atas, kanan, bawah dan kiri isi/elemen.
Seperti halnya margin, property padding dapat ditulis langsung dengan cara disingkat (Shorthand) untuk
keempat sisi tersebut, atau bisa satu per satu (Individual Sides) yang dibagi menjadi padding‐top, padding‐
right, padding‐bottom, dan padding‐left. Penulisan nilai pada padding sama seperti dengan margin. Contoh
penulisan padding :
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
4. Border
Property border digunakan untuk memberikan garis pinggir pada elemen, setidaknya ada tiga property
yang harus anda set, yaitu color, style dan width.
border-color : black;
border-style : solid;
border-width : 5px;
5. Background
- background-repeat
Secara default, properti background-repeat mengulang gambar secara horizontal dan vertikal. Gambar
dapat diulang dengan menggunakan repeat-x atau repeat-y.
body {
background-image: url(“paper.gif”);
background-repeat: repeat-y;
}
- background-attachment
Properti ini menentukan bagaimana gambar terlihat, apakah fixed (tidak bergerak ketika discroll) atau
scroll (bergerak ketika discroll). Value yang dapat digunakan yaitu scroll (mengikuti elemen), fixed (tidak
mengikuti elemen), local, initial, dan inherit. Contoh penggunaannya yaitu:
body {
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
}
- background-position
Digunakan menentukan posisi background, value yang dapat digunakan antara lain : left top, left
center, left bottom,right top, right center, right bottom, center top, center center, center bottom
Contoh penggunaannya yaitu seperti dibawah ini :
Ketika tidak memberikan nilai pada property position, maka secara default, #box memiliki
position:static, jadi anda tidak dapat menggunakan property top, right, bottom dan left untuk menentukan
posisi #box tersebut :
#box{
background : green;
width : 300px;
height : 300px;
top : 100px;
left : 200px;
}
- Absolut
Penambahan position:absolute akan membuat elemen tersebut terlepas dari aturan penempatan elemen
dan dibatasi oleh parent yang memiliki positioning relative. Buatlah markup HTML seperti berikut :
<div id=’box’>
<div id=’box2’></div>
</div>
#box{
width:300px;
height:300px;
background:green;
}
#box2{
width:50px;
height:50px;
background:yellow;
1. Lembar amati lingkungan rumahmu saat ini, lalu pilih emoji berikut yang mewakili
perasaanmu. (silang pada gambar)
3. Apa saja yang dapat kamu lakukan untuk menciptakan kenyamanan lingkungan
belajar dirumah
4. Apa yang kamu rasakan saat menggunakan aplikasi perangkat lunak dan gim?
5. Apa harapanmu saat kamu mempelajari tentang pemrograman web dan perangkat
bergerak?
Nama Siswa :
Nama Kelompok :
Kelas :
Langkah-langkah Kegiatan :
1. Simak dengan baik presentasi / penjelasan yang ditayangkan oleh guru;
2. Baca dan carilah literatur yang mendukung presentasi yang anda amati;
3. Diskusikan dengan kelompok tentang materi pemrograman web dan perangkat bergerak;
4. Buat hasil diskusi di lembar presentasi;
5. Presentasikan di depan kelas;
Nama Siswa :
Nama Kelompok :
Kelas :
Skor
No Komponen / Subkomponen
7 8 9 10
Persiapan :
1 Referensi tentang pemrograman web dan
perangkat bergerak
Proses Kerja :
2
Sistematika Kerja
Hasil :
3 a. Pelaporan / makalah
b. Presentasi Simulasi
Waktu :
4
Ketepatan waktu penyampaian laporan
𝑠𝑘𝑜𝑟 𝑝𝑒𝑟𝑜𝑙𝑒ℎ𝑎𝑛
Nilai Total = ∑( x bobot )
𝑠𝑘𝑜𝑟 𝑚𝑎𝑘𝑠𝑖𝑚𝑎𝑙
Keterangan :
Siswa yang belum kompeten maka harus mengikuti pembelajaran remedial,
Siswa yang cukup kompeten diperbolehkan untuk memperbaiki pekerjaannya sehingga
mencapai level kompeten.
A. Pembelajaran Remedial
1. Pemberian pembelajaran ulang dengan metode dan media yang berbeda,
menyesuaikan dengan gaya belajar peserta didik.
2. Pemberian bimbingan secara perorangan.
3. Pemberian tugas-tugas atau latihan secara khusus, dimulai dengan tugas-tugas atau
latihan sesuai dengan kemampuannya
4. Pemanfaatan tutor sebaya, yaitu peserta didik dibantu oleh teman sekelas yang telah
mencapai ketuntasan belajar.
B. Pembelajaran Pengayaan
1. Belajar kelompok, yaitu sekelompok peserta didik diberi tugas pengayaan untuk
dikerjakan Bersama pada dan/atau di luar jam-jam pelajaran sekolah.
2. Belajar mandiri, yaitu peserta didik diberi tugas pengayaan untuk dikerjakan
sendiri/individual.
3. Pemberian pembelajaran hanya untuk kompetensi/materi yang belum diketahui
peserta didik. Dengan demikian tersedia waktu bagi peserta didik untuk memperoleh
kompetensi/materi baru atau bekerja dalam proyek secara mandiri sesuai dengan
kemampuan masing-masing.