Kom
MODUL AJAR
PEMROGRAMAN WEB DAN PERANGKAT
BERGERAK
HTML (Hypertext Markup Language)
KURIKULUM MERDEKA
Semester Ganjil
Tahun Pelajaran 2022 / 2023
SMK
FASE F
(KELAS XI)
SMK NEGERIModul
1 SUDIMORO
Ajar – Pemrograman Web dan Perangkat Bergerak | 1
Jl. Raya Lorok – Trenggalek Km 12 Ds Sukorejo – Kec. Sudimoro,Kabupaten
Pacitan 63573
1. INFORMASI UMUM
Nama Sekolah : SMK Negeri 1 Sudimoro
Mata Pelajaran : Pemrograman Web dan Perangkat Bergerak
Penyusun : Miswanto, S.Kom
Penelaah Industri : -
Tahun Penyusunan : 2023
Fase / Kelas : F / XI
Kode : 37
Elemen : Pemrograman Web
Capaian Pembelajaran : Pada akhir fase F peserta didik mampu memahami konsep
dan menerapkan perintah HTML, CSS, pemrograman
Javascript, bahasa pemrograman server-side serta
implementasi framework pada pembuatan web statis dan
dinamis untuk beragam kebutuhan yang kontekstual. Selain
itu, peserta didik juga mampu mendokumentasikan serta
mempresentasikan web statis dan dinamis yang telah
dikembangkan.
Materi Pokok : Teknologi dan Format Teks Aplikasi WEB
Jumlah Peserta Didik : 36 Siswa
Alokasi Waktu : 8 JP (1 x pertemuan)
Kompetensi Awal : Sebelum mempelajari modul ini peserta didik harus
memahami pemrograman dasar pengembangan perangkat
lunak dan gim
Profil Pelajar Pancasila : -
Sarana dan Prasarana :
a. Sarana
• Alat • Gawai (Laptop / handphone)
• Bahan • Kertas HVS, buku tulis
• Perkiraan Biaya • Biaya kuota internet dana alat tulis
b. Prasarana
• Sumber Ajar • Buku paket, modul
• Media Ajar • Internet, LMS
• Lingkungan Belajar • Ruang laboratorium web desain
• Alternatif
Target Peserta Didik : • Peserta didik reguler/tipikal
• Peserta didik dengan kesulitan belajar
• Pesera didik dengan pencapaian tinggi
Program Keahlian : Pengembangan Perangkat Lunak dan Gim
Model Pembelajaran : Discovery learning
Moda Pembelajaran : Blended Learning
Metode Pembelajaran :
Diskusi, presentasi
D. Kegiatan Pembelajaran
a. Kegiatan Pendahuluan b. Kegiatan Inti
1. Peserta didik 1. Peserta menyimak pertanyaan yang disampaikan oleh
menjawab salam guru guru mengenai tema pembelajaran yaitu HTML pada
2. Peserta didik berdo’a perangkat lunak dan gim
sebelum memulai 2. Peserta didik menjawab pertanyaan guru dengan tepat
kegiatan pembelajaran dan antusias
dengan dipimpin salah 3. Peserta didik membentuk kelompok beranggotakan 4-5
satu peserta didik orang, kemudian tiap kelompok mengerjakan
untuk memimpin do’a 4. Peserta didik berdiskusi dalam kelompok untuk
3. Peserta didik menjawab pertanyaan-pertanyaan yang ada di LKPD
menjawab presensi dengan komunikasi dan kerjasama yang baik
guru dan kesiapan 5. Peserta didik mencari, menemukan dan mencatat
belajar informasi tentang materi yang ditugaskan dengan penuh
4. Peserta didik antusias dan berpikir kritis
menyimak capaian 6. Peserta didik mendiskusikan untuk menentukan
pembelajaran, tujuan informasi yang tepat dan sesuai dengan tugas yang
pembelajaran yang dierikan
akan dicapai yang 7. Peserta didik menganalisa dan membandingkan paparan
disampaikan oleh guru materi yang telah di ungkapkan dalam kelompoknya
5. Peserta didik dengan cermat dan tepat
menyimak motivasi 8. Setiap kelompok melaporkan hasil diskusi dengan
dari guru presentasi hasil tugasnya
E. Asesmen
Bentuk
Jenis
Profil Pelajar Pancasila Tertulis Performa
Diagnostik Penilaian diri Jawaban singkat
Formatif Presentasi dan simulasi
Sumatif
Glosarium
HTML adalah bahasa standar pemrograman yang digunakan untuk membuat halaman website,
yang diakses melalui internet.
Daftar Pustaka
Buku Bahan Ajar Dasar-dasar Pengembangan Perangkat Lunak dan Gim.
Kemendikbudristek, 2021
https://repository.unikom.ac.id/
Universitas Komputer, 2015
RINGKASAN MATERI
HTML
Pengertian HTML
HTML (Hyper Text Markup Language) adalah sebuah bahasa formatting yang
digunakan untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis
website (Web Programming), HTML menjadi pondasi dasar pada halaman website. sebuah file
HTML di simpan dengan ekstensi .html (dot html). dan dapat di eksekusi atau diakses
menggunakan web browser(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain).
seperti yang sudah di jelaskan, HTML adalah dasar dari sebuah website. untuk membuat sebuah
website tidak cukup hanya menggunakan HTML, kita memerlukan bantuan CSS, JavaScript dan
PHP untuk membuat sebuah website yang dinamis. jika halaman website dibuat hanya
menggunakan HTML saja maka halaman website tersebut di sebut halaman statis karena tidak
memiliki aksi atau fungsifungsi yang dapat mengelola website. tentu developer akan sangat di
sibukkan dengan harus mengubah lagi file HTML setiap ingin mengupdate artikel.
Kegunaan HTML
HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat di
lakukan dengan HTML adalah sebagai berikut :
1. Membungkus element-element tertentu sesuai kebutuhan
2. Membuat heading atau format judul
3. Membuat Tabel
4. Membuat List
5. Membuat Paragraf
6. Membuat Form
7. Membuat Tombol
8. Membuat huruf tebal
9. Membuat huruf miring
10. Menampilkan gambar
11. Menampilkan video
12. Dan banyak lainnya.
Sampai saat ini HTML sudah sampai pada versi 5. HTML5 sudah memiliki banyak
sekali fitur tambahan salah satunya, dengan HTML5 memungkinkan kita untuk membuat
streaming video tanpa bantuan adobe flash. untuk tutorial cara membuat streaming video dengan
HTML5 juga akan kita bahas pada buku tutorial belajar HTML dasar ini.
Jadi kesimpulan dari pengertian HTML ini adalah HTML merupakan pondasi dasar dari
pembuatan sebuah website. untuk mengeksekusi atau menjalankan file html harus menggunakan
web browser dan file html di simpan dengan ekstensi .html (dot html).
Gambar 2 Notepad ++
3. Atom
Text editor ini hampir sama dengan sublime namun text ini agak sedikit lebih berat jika
dibandingkan dengan sublime. Text Editor ini bisa digunakan oleh platform Mac, Windows,
dan Linux, yang ingin menggunakan text editor ini bisa di download di https://atom.io/
Gambar 4 Brackets
Gambar 5 Netbeans
b. Element HTML
Element pada HTML merupakan isi atau objek yang berada pada tag. maksudnya, isi yang
ada diantara tag pembuka dan tag penutup di sebut dengan elemen misalkan :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Pada contoh diatas <h2> adalah heading dua <h2> merupakan element h2 dan isinya ini
adalah heading dua. dalam element ini bisa berupa text ataupun tag lain misalnya <link> dan
sebagainya.
</body>
</html>
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.