RENCANA PELAKSANAAN PEMBELAJARAN

Nama satuan pendidian : SMK N 1 Lembah Melintang

Bidang Keahlian : Rekayasa Perangkat Lunak

Mata pelajaran : Pemograman Web dan Perangkat Bergerak

Materi pokok : Style Halaman Web

Sub materi : Menggabungkan atau Memasukkan Scriprt CSS ke dalam HTML

Alokasi waktu : 20 JP

Tahun pelajaran : 2017-2018

A. Tujuan Pembelajaran
Melalui kegiatan pendekatan pembelajaran saintifik peserta didik dapat mahami style pada halaman
web sehingga menyajikan style tertentu pada halaman web sehingga peserta didik dapat menghayati
dan mengamalkan perilaku jujur, disipli, dan bertanggung jawab.

B. Kegiatan pembelajaran
Pertemuan 1

1) Kegiatan Pendahulan Ket.

1. Guru masuk dan membuka pelajaran dengan mengucap salam dan meminta 10 menit
salah satu siswa untuk memimpin doa sebelum pembelajaran dimulai.
2. Guru memeriksa kehadiran peserta didik dan mencatat pada buku agenda kelas
3. Guru memberikan materi pembelajaran, tujuan pembelajaran, dan bentuk
penilaian tugas.
4. Peserta didik memperhatikan materi pembelajaran, tujuan pembelajaran, dan
bentuk penilaian pada kegiatan belajar.

2) Kegiatan Inti
Tahap 1 : Simulation (Pemberian Rangsangan) 80
memnit
Peserta didik diberi motivasi atau rangsangan untuk memfokuskan/memusatkan
perhatian (berpikir kritis dan bekerja sama) dalam mengamati permasalahan
pembelajaran dengan rasa ingin tahu, jujur, dan semangat pantang menyerah.

Dengan cara :
 Guru menyediakan slide materi tentang Cascading Style Sheet (CSS)
 Guru menjelaskan cara kerja CSS
 Guru mendemonstrasikan style pada teks, multimedia, tabel, dan formulir.

Tahap 2 : Problem Statement (Pernyataan/ identifikasi masalah)

Guru memberikan kesempatan pada peserta didik untuk mengidentifikasi sebanyak
mungkin pertanyaan yang berkaitan dengan materi yang disajikan dan akan dijawab
melalui kegiatan belajar Berpikir kritis dan kreatif dengan sikap jujur, disiplin, serta
tanggung jawab dan kerja sama yang tingi didik diminta mendiskusikan dan mencatat
hasil fakta-fakta yang Peserta pengamatannya ditemukan, serta menjawab pertanyaan
berdasarkan hasil pengamatan yang ada pada buku paket; Mengajukan pertanyaan
tentang:

 Cascading Style Sheet (CSS)

 Cara kerja CSS
 Format style pada teks, multimedia, tabel, dan formulir

Tahap 3 : Data Collection (Pengumpulan Data)

Peserta didik mengumpulkan berbagai informasi dan saling (Berpikir kritis, kreatif,
bekerjasama berkomunikasi dalam kelompok , dengan ingin tahu, tanggung jawab dan
pantang menyerah (Karakter), literasi (membaca) yang dapat mendukung jawaban dari
pertanyaan-pertanyaan yang diajukan, baik dari buku paket maupun sumber lain seperti
internet; melalui kegiatan:

 Cascading Style Sheet (CSS)

 Cara kerja CSS
 Format style pada teks, multimedia, tabel, dan formulir

Tahap 4 : Data Processing (Mengolah Data)

Pendidik mendorong agar peserta didik secara aktif terlibat dalam diskusi kelompok
serta saling bantu untuk menyelesaikan masalah (Mengembangkan kemampuan berpikir
kritis, kreatif, berkomunikasi dan bekerjasama Selama peserta didik bekerja di dalam
kelompok

 Cascading Style Sheet (CSS)

 Cara kerja CSS
 Format style pada teks, multimedia, tabel, dan formulir

Tahap 5 : Verification (Pembuktian Data)

Peserta didik mendiskusikan hasil pengamatannya dan memverifikasi hasil

pengamatannya dengan data-data atau teori pada buku sumber melalui kegiatan.
Menambah keluasan dan kedalaman sampai kepada pengolahan informasi yang bersifat
mencari solusi dari berbagai sumber yang memiliki pendapat yang berbeda sampai
mengembangkan sikap jujur, teliti, disiplin, taat aturan, kerja keras, kemampuan
menerapkan prosedur dan kemampuan berpikir induktif serta deduktif dalam kepada
yang bertentangan untuk membuktikan :

 Cascading Style Sheet (CSS)

 Cara kerja CSS
 Format style pada teks, multimedia, tabel, dan formulir

Tahap 6 : Generalisasi (Menyimpulkan Data)

 Peserta didik berdiskusi untuk menyimpulkan dan Menyampaikan hasil diskusi berupa
kesimpulan berdasarkan hasil analisis secara lisan, tertulis, atau media lainnya untuk
mengembangkan sikap jujur, teliti, toleransi, kemampuan berpikir sistematis,
mengungkapkan pendapat dengan sopan
Mempresentasikan hasil diskusi kelompok secara klasikal tentang:

 Cascading Style Sheet (CSS)

 Cara kerja CSS
 Format style pada teks, multimedia, tabel, dan formulir

3) Kegiatan Penutup
1. Guru dan peserta didik menarik kesimpulan. 10 menit
2. Guru memberikan kesimpulan materi.
3. Guru menyampaikan kegiatan pembelajaran pertemuan berikutnya.
4. Guru menutup pembelajaran dengan mengucap terima kasih dan salam.

C. Asesmen/penilaian
1. Afektif
Instrumen penilaian Ranah Afektif Kelas Eksperimen

No Nama Aspek yang dinilai

Siswa Bertanggung Kerja sama dalam Total
Jawab Skor Kelompok kecil Skor Skor
1 2 3 4 1 2 3 4
1. Fadia
2. keisha
3. Dst..

Rubrik Penilaian Ranah Afektif

No Aspek yang dinilai Rubrik

1. Bersikap jujur 1.
2. Kemampuan mengemukakan pendapat 2.
3. Menanggapi 3.
Kolom pada tabel diisi dengan tanda centang ()

Keterangan :
Skor 4 apabila terdapat 4 tanda centang (√)
Skor 3 apabila terdapat 3 tanda centang (√)
Skor 2 apabila terdapat 2 tanda centang (√)
Skor 1 apabila terdapat 1 tanda centang (√)

Rumus penilaian :
 total skor diperoleh
Nilai = x 100
total skor maksimum

2. Kognitif
Teknik : Tes
Bentuk : Tertulis (objectif)
Instrumen penilaian

No Soal Jawaban Bobot

1. Apa yang dimaksud dengan CSS ? Cascading Style Sheet merupakan 25
aturan untuk mengatur beberapa
komponen dalam sebuah web
sehingga akan lebih terstruktur dan
seragam. CSS bukan merupakan
bahasa pemograman.
2. Bagaimana cara kerja CSS? Cara kerja css padat dimulai saat kita 25
mendeklarasikan style yang
diinginkan dengan menulis style
(selector, id, dan class), maka secara
otomatis style tersebut akan bekerja
sesuai pada dokument HTML.
Untuk pendefinisian style dapat
dilakukan menggunakan tag <style>.
Di dalam pasangan tag tersebut,
pendefinisian style dilakukan dengan
bentuk selector {...}

3. Langkah Kerja 1. Pertama buatlah di folder 25

drive D:, dengan nama folder
nama anda. Misal:
praktek_web_nama
2. Selanjutnya buat subfolder
praktikum 1 di dalam folder
yang sudah anda buat
sebelumnya.
3. Selanjutnya silahkan buka
aplikasi notepad++ / sublime
sebagai text editor.
4. Silahkan simpan element-
element struktur dokument
HTML tersebut ke dalam
format .html.
5. Tahap akhit kita menjalankan
masing - masing cotoh
element struktur html tersebut
dengan menggunakan web
browser.

Penilaian :
 total skor diperoleh
Nilai = x 100
total skor maksimum

3. Psikomotorik
Instrumen Penilaian

Rubrik Penilaian Ranah Psikomotik

Aspek yang dinilai Deskripsi

N
o
1. Meniru (perception) kemampuan melakukan kegiatan-kegiatan
sederhana dan sama persis dengan yang dilihat atau
diperhatikan sebelumnya.
2. Menyusun (Manipulation) kemampuan melakukan kegiatan sederhana yang
belum pernah dilihat tetapi berdasarkan pada
pedoman atau petunjuk saja.
3. Melakukan dengan prosedur kemampuan melakukan
(precision) kegiatan-kegiatan yang akurat
sehingga mampu menghasilkan
produk kerja yang tepat.
4. Melakukan dengan baik dan tepat kemampuan melakukan kegiatan yang komplek dan
(articulation) tepat sehingga hasil kerjanya merupakan sesuatu
yang utuh.

Kriteria Penilaian Ranah psikomotik

Nilai Sikap

Predikat Rentang Nilai

Sangat baik (A) 86-100
Baik (B) 71-85
Cukup (C) 56-70
Kurang (D) ≤55

Kepala Sekolah Padang, 23 November 2021

Ali Amran.M,Pd. M,Si Meriza Cahyani

NIP NPM 20100060
 Materi Ajar

1. Cascading Style Sheet (CSS)

Cascading Style Sheet atau lebih sering disebut dengan istilah Css adalah salah satu dokument
website yang bertujuan untuk mengatur style (gaya) tampilan website. Cascading Style Sheet
merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Anatomi CSS
Bagian -bagian yang utama dari sebuah Css itu sendiri ada tiga bagian yaitu: Selector, property,
value.

Cara Kerja CSS

Cara kerja css padat dimulai saat kita mendeklarasikan style yang diinginkan dengan menulis style
(selector, id, dan class), maka secara otomatis style tersebut akan bekerja sesuai pada dokument
HTML.
Untuk pendefinisian style dapat dilakukan menggunakan tag <style>. Di dalam pasangan tag
tersebut, pendefinisian style dilakukan dengan bentuk selector {...}

Class dan ID
Class = mendefinisikan class yang bisa berlaku untuk sembarang pada tag HTML. Bentuknya:
nama_class { ... }
ID =   Mendefinisikan style bagi element - element yang memiliki ID sesuai yang tercantum dalam
selector. Bentuknya: #id { ... }

Inline Style Sheet

Maksudnya Css ini didefinisikan secara langsung pada tag HTML yangbersangkutan. Cara
penulisannya cukup dengan menambah atribut style = "..." dalam tag HTML yang terlah dibuat
 tersebut.

Embedded Style Sheet

Css dapat didefinisikan terlebih dahulu dalam tag <style> .. </style> di atas tag <body>, lebih
tepatnya kita meletakan pada tag <head>.
Contohnya kita bisa temukan pada contoh class dan id

External Style Sheet

Maksudnya adalah css didefinisikan secara terpisah pada file - file yang berbeda. Dan selanjutnya file
atau halaman web tersebut yang ingin menetakan style pada file CSS tersebut memanggil css
tersebut.

langkah kerja CSS

6. Pertama buatlah di folder drive D:, dengan nama folder nama anda. Misal: praktek_web_nama

7. Selanjutnya buat subfolder praktikum 1 di dalam folder yang sudah anda buat sebelumnya.

8. Selanjutnya silahkan buka aplikasi notepad++ / sublime sebagai text editor.

9. Silahkan simpan element- element struktur dokument HTML tersebut ke dalam format .html.

10. Tahap akhit kita menjalankan masing - masing cotoh element struktur html tersebut dengan
menggunakan web browser.

Percobaan 
Buatlah halaman web sebagai berikut:
 <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 style="color: blue;margin-left: 30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Simpan file tersebut dengan nama inline.html

 Hasilnya:

2. Stlyle pada Teks

Dalam pengaturan style teks meliputi beberapa jenis rangkaian properti, diantaranya pewarnaan,
spasi, jenis font, style font, color font, dan sebagainya, yang dapat dikondisikan dalam kemasa CSS.
Beberapa properti CSS antara lain sebagai berikut :
Tabel Properti CSS
No Properti Keterangan
1 Color Mengatur warna pada teks/ script yang hendak dituju
2 Direction Menentukan arah tulisan atau teks pada script terkait
3 Letter-Spacing Menambah atau mengurangi properti dari spasi antarkarakter dalam
suatu teks
4 Line-Height Mengatur tinggi barisnya suatu teks
5 Text-align Bertugas memberi rata atau batas teks secara horizontal
6 Text-decoration Menentukan hiasan/ dekorasi pada teks
7 Text-indent Bertugas mengatur jarak inden dalam baris pertama dalam teks blok
8 Text-Shadow Bertugas menentukan efek dari bayangan pada suatua teks
9 Text-transform Bertugas mengatur dari teks kecil hingga besar
10 Unicode-align Bertugas mengeset unicode
11 Vertical-align Mengatur dari batas teks seacara horizontal
12 White-space Mengatur dari penulisan white-space pada suatu elemen
13 Word-spacing Menambahkan atau mengurangi spasi antarkata dalam teks

3. Style Multimedia

Pengaturan Style pada Tampilan Gambar

Style sangat berperan dalam menyajikan suatu sinformasi visual agar terlihat lebih baik serta lebih
optimal jika dilihat dari sisi nonpenulisan, sehingga lebih disukai oleh mesin pencari (search engine).
Dalam hal ini penggunaan Cascading Style Sheet (CSS) dapat diterapkan pada semua objek yang
ingin disisipkan dalam bentuk tag-tag tertentu, misalnya bentuk tulisan, tabel, gambar, maupun objek
lainnya. Guna memberi pengaturan dalam penggunaan gambar pada umumnya dapat diterapkan
secara inline, misalnya dengan format pemanggilan berikut.
<img src=’nm-filegbr’ width=’lebargbr’ height=tinggigbr’alt=’kata-kuncigbr’ title=’judulgbr’
border=’garistebal’ />

4. Style tabel
Mendesain tabel dengan CSS dapat dilakukan dengan mudah, namun demikian, terdapat hal-hal yang
penting untuk diperhatikan, salah satunya adalah penerapan default style yang dilakukan oleh
browser.

Contoh CSS 3 untuk tabel:

<html>
<head>
<style type="text/css">
/* Table */
body {
font-family: "lucida Sans Unicode", "Lucida Grande", "Segoe UI", vardana
}
.demo-table {
border-collapse: collapse;
font-size: 13px;
}
.demo-table th,
.demo-table td {
padding: 7px 17px;
}
.demo-table .title {
caption-side: bottom;
margin-top: 12px;
}
.demo-table thead th:last-child,
.demo-table tfoot th:last-child,
.demo-table tbody td:last-child {
border: 0;
}

/* Table Header */
.demo-table thead th {
border-right: 1px solid #c7ecc7;
text-transform: uppercase;
}

/* Table Body */
.demo-table tbody td {
color: #353535;
border-right: 1px solid #c7ecc7;
}
.demo-table tbody tr:nth-child(odd) td {
background-color: #f4fff7;
}
.demo-table tbody tr:nth-child(even) td {
background-color: #dbffe5;
}
.demo-table tbody td:nth-child(4),
.demo-table tbody td:first-child,
.demo-table tbody td:last-child {
text-align: right;
}
.demo-table tbody tr:hover td {
background-color: #ffffa2;
 border-color: #ffff0f;
transition: all .2s;
}

/* Table Footer */
.demo-table tfoot th {
border-right: 1px solid #c7ecc7;
}
.demo-table tfoot th:first-child {
text-align: right;
}
</style>
</head>
<body>
<table class="demo-table">
<caption class="title">Tabel 1. Data Penjualan Divisi Elektronik</caption>
<thead>
<tr>
<th>No</th>
<th>Pembeli</th>
<th>Barang</th>
<th>Tanggal</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anton</td>
<td>Televisi</td>
<td>07 September 2016</td>
<td>2.500.000</td>
</tr>
<tr>
<td>2</td>
<td>Bryan</td>
<td>Mesin Cuci</td>
<td>10 Juli 2016</td>
<td>1.500.000</td>
</tr>
<tr>
<td>3</td>
<td>Cherly</td>
<td>Dispenser</td>
<td>11 Agustus 2016</td>
<td>950.000</td>
</tr>
<tr>
<td>4</td>
 <td>Dean</td>
<td>Kulkas</td>
<td>15 September 2016</td>
<td>1.750.000</td>
</tr>
<tr>
<td>5</td>
<td>Esryl</td>
<td>Wall Fan</td>
<td>11 Oktober 2016</td>
<td>450.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">Total</th>
<th>7.150.000</th>
</tr>
</tfoot>
</table>
</body>
</html>
Hasil yang kita peroleh adalah:

Pada tabel diatas, kita banyak menggunakan pseudo-element seperti: :first-child, :nth-child, dan :last-
child.

Pseudo element tersebut kita gunakan salah satunya untuk membuat align kolom menjadi rata kanan,
karena secara default browser akan membuat teks rata-kiri.

Disamping itu kita menggunakan psuedo-class :hover untuk menghighlight row ketika terjadi event
hover (mouse berada di atas kolom.
 5. Style Pada Formulir

Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS di dalamnya. Style CSS
dapat digunakan di berbagai komponen input di dalam form. Dengan menggunakan style CSS akan
mengurangi beban halaman dan konsumsi bandwidth.

Cascading style sheet pada elemen form

Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya
memberikan style CSS. Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya
pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna
background \ dari form.

{ border:1px solid #666666;

width : 480; /*lebar form*/

margin-left:0; /*jarak dari batas kiri layout*/

background-color:#ffff66;}

Bila style form diatas di embedkan ke dalam file html akan listing kodenya

seperti berikut ini :

<HTML>

<HEAD>

<TITLE>Pengaturan Pada Form Text Area</TITLE>

<STYLE ="text/css">

form{ border:1px solid #666666;

width : 70%;

margin-left:0; /*jarak fieldset dari batas kiri

layout*/

background-color:#ffff66;}

</STYLE>

</HEAD>

<BODY>

<form name="form1" method="post" action="">

<table><TR>
<TD width="50" >Nama </TD>

<TD width="175" >

<textarea name="textarea"

cols=50></textarea></TD>

</TR>

<TR>

<TD width="50" >Pesan </TD>

<TD width="175" >

<textarea name="textarea"cols=50 rows=14>

</textarea></TD>

</TR></table>

</form>

</BODY>

</HTML>