3. LEMBAR KEGIATAN PESERTA DIDIK 3A

LEMBAR KEGIATAN PESERTA DIDIK (LKPD)

Satuan Pendidikan : SMK NU 01 Kendal
Kelas/Semester : XI / Gasal
Nama Kelompok : ……………………………..
Nama Anggota : ……………………………..

Judul : Style Halaman Web Dengan Kode Css

Kompetensi Inti :
KI 3 :

Mahami, menerapkan, menganalisis, dan mengevaluasi tentang pengetahuan faktual, konseptual,
operasional dasar, dan metakognitif sesuai dengan bidang dan lingkup kerja Rekayasa Perangkat Lunak
pada tingkat teknis, spesifik, detil, dan kompleks, berkenaan dengan ilmu pengetahuan, teknologi, seni,
budaya, dan humaniora dalam konteks pengembangan potensi diri sebagai bagian dari keluarga,
sekolah, dunia kerja, warga masyarakat nasional, regional, dan internasional.

KI 4 :

Melaksanakan tugas spesifik dengan menggunakan alat, informasi, dan prosedur kerja yang lazim
dilakukan serta memecahkan masalah sesuai dengan bidang kerja Rekayasa Perangkat Lunak.
Menampilkan kinerja di bawah bimbingan dengan mutu dan kuantitas yang terukur sesuai dengan
standar kompetensi kerja. Menunjukkan keterampilan menalar, mengolah, dan menyaji secara efektif,
kreatif, produktif, kritis, mandiri, kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait
dengan pengembangan dari yang dipelajarinya di sekolah, serta mampu melaksanakan tugas spesifik di
bawah pengawasan langsung. Menunjukkan keterampilan mempersepsi, kesiapan, meniru,
membiasakan, gerak mahir, menjadikan gerak alami dalam ranah konkret terkait dengan
pengembangan dari yang dipelajarinya di sekolah, serta mampu melaksanakan tugasspesifik di bawah
pengawasan langsung.

A. Kompetensi Dasar
3.7 Menerapkan style pada halaman web
4.7 Membuat kode html untuk menampilkan style tertentu pada halaman web

B. Indikator Pencapaian Kompetensi
3.7.4 Mengimplementasikan hasil pembuatan style dalam program tampilan halaman
web.
4.7.3 Menguji program tampilan web dengan style dalam halaman web

C. Tujuan Pembelajaran

3.7.4 Melalui pengamatan terhadap beberapa model web secara online dan
melakukan diskusi dan tanya jawab, serta pemanfaatan media pembelajaran

4.7.3 peserta didik dapat Mengimplementasikan hasil pembuatan style dalam program
tampilan halaman web dengan kreatif, rasa ingin tahu dan tanggung jawab.
Melalui penggunaan perangkat Teknologi informasi dan penggunaan modul,
serta melalui ekplorasi di internet, dan pengerjaan project peserta didik dapat
Menguji program tampilan web dengan style dalam halaman web dengan
Percaya diri dan tanggung jawab.

A. ALAT DAN BAHAN
- Software text editor (sublime text, note++, notepad)
- Aplikasi web browser
- Personal Computer / laptop
- Koneksi internet

B. LANGKAH KEGIATAN : Apa itu float di dalam CSS? float secara etimologi berarti "mengapung".
Pendahuluan : Property float digunakan untuk menentukan apakah sebuah elemen
box harus mengapung (float) atau tidak. Sebuah elemen bisa
diposisikan seakan-akan berada mengapung diantara elemen
setelahnya. Mengapung disini, berarti elemen yang
mengalami float tersebut akan dipindahkan ke tepi paling kiri (float:left)
atau tepi paling kanan (float:right) dari element induknya.
Tujuan utama float adalah untuk mengatur tex t agar melipat di sekitar
elemen image (gambar). Akan tetapi, float juga bisa digunakan untuk
layout dan style lainnya.

Elemen yang tidak mengalami float berada pada posisi normal, yaitu
berada pada arah berlawanan dengan elemen yang mengelilinginya
(bertumpuk dari atas kebawah atau dari kiri ke kanan). Sedangkan,
Elemen yang mengalami float tidak mengikuti kaidah sebagaimana
semestinya. Property float tidak bisa digunakan untuk elemen-elemen
yang memiliki posisi absolute (position: absolute;)

Langkah Kerja Langkah Kerja :
1. Menyiapkan alat praktek.
a. PC/Labtop/Smartphone
b. Koneksi internet
c. Akun google drive sebagai media penyimpanan
d. Menggunakan google classroom untuk melakukan diskusi
kelompok
e. Mengunggah hasil kerja kedalam google classroom.
2. Selalu memperhatikan keselamatan kerja.
3. Jalankan program yang melalui link virtual lab
(https://www.w3schools.com/css/css_intro.asp)
4. Khusus yang menggunakan smartphone bisa unduh apk
w3schools pada google playstore.

5. Menuju menu css :
6. Seletah itu klik sub menu pengantar disini anda akan diarahkan

dalam mengetahui apa itu css dan penerapanya dalam
merancang style halaman web.

7. Pelajari petunjuk yang ada diantaranya :
a. Peserta didik mulai merancang halaman web dengan
menerapkan style menggunakan kode CSS.
b. Silahkan klik model template yg ada pada halaman
tersebut untuk menambah pengetahuan anda terkait
perancangan style halaman web pada menu berikut ini :

c. Lakukan diskusi kelompok terkait permasalahan yang ada
pada waktu membuat perancangan tersebut
perbadingan tersebut, dalam sebuah forum diskusi
kelompok di classroom.google.com

8. Setiap menu tersebut peserta didik bisa melakukan praktek
secara mandiri (Asinkron) dengan menggunakan alat
pembelajaran sesuai petunjuk diatas.

9. Jalankan program yang telah anda kerjakan dengan klik tombol
“RUN” dan lihat hasilnya pada sisi selelah kanan halaman

10. Hasilnya bisa anda simpan dengan cara klik tombol save arahkan
penyimpanan file kedalam akun google drive yang anda gunakan.

11. Share alamat folder Unggah hasil pekerjaan yg tersimpan di
google drive masing-masing peserta didik

Tugas 1 :
1. Bagaimana membuat rancangan web dengan menggunakan
sintaks CSS responsive sesuai dengan format gambar berikut ini :

SMK NU 01 Kendal

Home
Profile
Contact

Tugas 2 :
1. Kebutuhan / Konten dalam website sekolah ini ada beberapa
fasilitas atau fitur :

a) Header ( SMK NU 01 Kendal)
b) Menu Navigasi ( Home, Profile, Contact)
c) Isi Web
d) Footer (2020 Copyright)

2. Gunakan Perintah HTML dan CSS dari materi yang sudah
diberikan sebelumnya

3. Desain Baner dapat menggunakan Paint / Corel Draw / Photo
Shop

4. Dokumentasikan Saat Anda bekerja (Video) – Saat Diskusi dan
Implementasi Web

5. Buat Laporan Hasil Pembuatan Web nya dengan mengisi list skrip
pada kolom jawaban sbb :

Jawaban Tugas 1 :

Pengamatan Diskusikan dengan kelompok tentang bagaimana cara membuat dan
Kesimpulan
menjalankan sebuah halaman web yang menggunakan format css
Penilaian responsive dalam sebuah forum diskusi google.classroom.

Setelah menyelesaikan modul LKPD tersebut peserta didik diharapkan
dapat menyusun dengan rapi bagaimana cara membuat dan menjalankan
halaman web menggunakan mode style halaman web dengan kode css,
pada lembar kerja ini bisa nantinya dimanfaatkan sebagai bahan untuk
menyusun tugas project yang akan dilakukan secara berkelompok.

Perhitungan nilai praktik (NP) :

Prosentase Bobot Komponen Nilai Praktik
Penilaian (NP)

Hasil Waktu ∑ NK
4 5 6

Bobot (%) 80% 20%
Skor Komponen

NK

Keterangan:

 Bobot diisi dengan prosentase setiap komponen. Besarnya prosentase dari
setiap komponen ditetapkan secara proposional sesuai karakteristik
program keahlian.

 NK = Nilai Komponen, perkalian dari bobot dengan skor komponen
 NP = penjumlahan dari hasil perhitungan nilai komponen
 Jenis komponen penilaian (persiapan, proses, sikap kerja, hasil, dan waktu)

disesuaikan dengan karakter program keahlian.