Pemrograman Kelas XII TJKT

Mapel Kejuruan

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.

Kegiatan 1 - 18 Juli 2025

Materi : https://www.simonmurd.com/2024/04/pemrograman-web-link-dengan-html-bab.html

Buatlah form biodata seperti di bawah ini :

Contoh Hasil Coding

Link pengumpulan Hasil >> https://forms.gle/jLQX9zVZsE4t4GmE7

Kegiatan 2 - 30 Juli 2025

Materi : https://www.simonmurd.com/2024/04/pemrograman-web-link-dengan-html-bab.html

Link pengumpulan Hasil >>https://forms.gle/y6ekMNzb35EQajUF8

Kegiatan 3 - 1 Agustus 2025

Materi : https://www.simonmurd.com/2024/05/pemrograman-web-format-formulir-dengan.html

1. Type yang berfungsi untuk menerima masukan berupa teks dari pengguna adalah...

a. Checkbox

b. Submit

c. File

d. Text

e. Button

2. Atribut NAME digunakan sebagai

a. Menamai kotak

b. Menandai teks

c. Menentukan panjang maksimum teks

d. Mengatur ukuran

e. Memasukan teks

3. Untuk menerima masukan berupa pilihan ialah

a. Submit

b. Reset

c. Radio

d. Password

e. Text

4. Perintah atau type masukkan untuk menampilkan berupa pilihan adalah:

a. Radio

b. Checkbox

c. Submit

d. Resume

e. Password

5. Perintah masukkan yang benar agar menampilkan tampilan seperti dibawah ini: "ini tombol input dengan type="submit": Kirimkan adalah:

a. <br> ini tombol input dengan type="submit":

b. <input type="submit" value="kirimkan">

<br> ini tombol input dengan type="reset" <input type="submit" value="kirimkan">

c. <br> ini tombol input dengan type="reset" <input type="reset" value="kirimkan">

d. <br> ini tombol input dengan type="submit" <input type="reset" value="kirimkan">

e. <br> ini tombol input dengan type="reset"

<input type="submit" value="Ulangi">

6. Untuk memasukkan perinttah masukkan berupa gambar yang dapat diklik dan fungsinya hamper sama dengan Submit adalah:

a. Hidden

b. File

c. Image

d. Reset

e. Submit

7. Tag <Input> yang atribut TYPE-nya dapat digunakan untuk menerima masukan berupa pilihan yaitu

a. Radio

b. Circle

c. Password

d. Square

e. Submit

8. Atribute ACTION digunakan untuk ...

a. Menentukan nama form

b. Menetukan metode pengiriman yang dipakai

c. Menentukan alamat halaman web yang akan memproses masukan dariForm.

d. Menerima masukan berupa pilihan

e. Menandai atau mengatur nilai dari sebuah radio

9. Untuk menerima masukan berupa pilihan. Pilihan yang dapat dipilih bisa lebih dari satu yaitu

a. Text

b. Password

c. Checkbox

d. Radio

e. Submit

10. Kegunaan form adalah...

a. memperoleh informasi pembelian secara online

b. untuk mencetak miring dalam pembuatan web

c. untuk melihat data-data yang tersedia

d. untuk dapat mengakses internet lebih cepat

e. untuk melakukan hubungan local antar computer

11. Apa fungsi dari type="password"??

a. jika kita mengetik sesuatu akan tertulis yang sebenarnya

b. jika kita mengetik sesuatu maka ketikan tersebut akan tidak terlihat

c. jika kita mengetik sesuatu maka yang muncul adalah angka

d. jika kita mengetik sesuatu maka yang muncul adalah

e. jika kita mengetik sesuatu tidak muncul apa-apa

12. Bagaimanakah perintah HTML agar muncul input type password

a. <td><input type="password" name="alamat"</td>

b. <td><input type="name" name="password"</td>

c. <td><input type="password" password=”alamat"</td>

d. <td><input type="word" name="password"</td>

e. <td><input type="password1" name="password2"</td>

13. Tag <textarea> memiliki atribut di bawah ini adalah:

a. Name

b. Action

c. Method

d. Value

e. Option

14. Bagaimanakah perintah HTML agar muncul input type password..

a. <td><input type="password" name="alamat"</td>

b. <td><input type="name" name="password"</td>

c. <td><input type="password" password="alamat"</td>

d. <td><input type="word" name="password"</td>

e. <td><input type="password1" name="password2"</td>

15. Tombol yang berfungsi untuk membatalkan pengisian dalam form adalah....

a. RESET

b. SUBMIT

c. PRESET

d. UNDO

e. BUTTON

16. Kontrol form yang berfungsi untuk membuat daftar pilihan adalah...

A. Text

B. Checkbox

C. Select

D. Radio

E. Textarea

17. Atribut dari select yang berfungsi untuk menampilkan drop down box seperti tombol spinner adalah...

A. Multiply

B. Multiple

C. Selected

D. Scrollbar

E. Checked

18. Perintah yang biasa digunakan untuk membuat kotak isian komentar adalah...

A. <TEXTAREA NAME-komentar COLS-20 ROWS=2></TEXTAREA>

B. <TEXT NAME=komentar COLS-20 ROWS=2></TEXT>

C. <AREA NAME=komentar COLS-20 ROWS=2></AREA>

D. <INPUT TYPE-TEXT-komentar COLS=20 ROWS=2></TEXT>

E. <INPUT TYPE=TEXTAREA NAME=komentar COLS-20 ROWS=2></TEXTAREA>

19. Perintah yang biasa digunakan untuk membuat tombol proses adalah...

A. <INPUT TYPE-submit NAME=Proses VALUE=Ok>

B. <INPUT TYPE=reset NAME=Hapus VALUE=BATAL>

C. <INPUT TYPE=submit NAME-OK VALUE=Proses>

D. <INPUT TYPE=reset NAME=Batal VALUE=Hapus>

E. <INPUT TYPE-button NAME-OK VALUE=Proses>

20. Perintah yang biasa digunakan untuk membuat tombol Batal adalah...

A. <INPUT TYPE=submit NAME-Proses VALUE=Ok>

B. <INPUT TYPE=reset NAME=Hapus VALUE=BATAL>

C. <INPUT TYPE=submit NAME=OK VALUE=Proses>

D. <INPUT TYPE=reset NAME=Batal VALUE=Hapus>

E. <INPUT TYPE-button NAME=OK VALUE=Proses>

21. Atribut VALUE pada elemen <input type="submit"> berfungsi untuk...

a. Memberikan nama unik pada tombol

b. Menentukan tujuan pengiriman data

c. Mengatur ukuran tombol

d. Menentukan teks yang akan ditampilkan pada tombol

e. Menampilkan nilai yang sudah diisi secara default

22. Kontrol form yang digunakan untuk memilih tanggal, bulan, dan tahun adalah...

a. type="text"

b. type="date"

c. type="datetime-local"

d. type="calendar"

e. type="time"

23. Perintah yang benar untuk membuat kotak centang yang sudah tercentang secara default adalah...

a. <input type="checkbox" name="hobi" checked>

b. <input type="checkbox" name="hobi" value="checked">

c. <input type="checkbox" name="hobi" selected>

d. <input type="checkbox" name="hobi" checked="true">

e. <input type="checkbox" name="hobi" on>

24. Untuk membuat field yang tidak dapat diubah oleh pengguna, tetapi tetap dikirimkan saat form di-submit, digunakan atribut...

a. readonly

b. disabled

c. hidden

d. passive

e. locked

25. Tag HTML yang berfungsi sebagai "wadah" untuk semua elemen formulir adalah...

a. <fieldset>

b. <form>

c. <input>

d. <section>

e. <formbox>

26. Atribut METHOD pada tag <form> yang mengirimkan data form sebagai bagian dari URL adalah...

a. POST

b. GET

c. ACTION

d. SUBMIT

e. PUT

27. Elemen form yang digunakan untuk membuat judul atau keterangan pada sekelompok input adalah...

a. <label>

b. <legend>

c. <head>

d. <title>

e. <h1>

28. Perintah untuk membuat sebuah tombol yang tidak memiliki fungsi bawaan (seperti submit atau reset) adalah...

a. <input type="button">

b. <input type="submit">

c. <input type="reset">

d. <input type="action">

e. <input type="link">

29. Atribut yang digunakan untuk menentukan jumlah baris yang terlihat pada <textarea> adalah...

a. rows

b. cols

c. size

d. lines

e. height

30. Atribut placeholder pada elemen <input> berfungsi untuk...

a. Menentukan nilai awal pada input

b. Memberikan petunjuk teks di dalam input yang akan hilang saat diketik

c. Menentukan panjang maksimum input

d. Mengatur ukuran input

e. Memberikan deskripsi singkat tentang input

31. Untuk membuat sebuah input yang tidak terlihat oleh pengguna, tetapi nilainya tetap dikirimkan bersama form, digunakan type="....

a. invisible

b. none

c. hidden

d. secure

e. stealth

32. Perintah untuk membuat pilihan dropdown box dengan opsi "Merah", "Hijau", "Biru" adalah...

a. <select name="warna"><option>Merah</option><option>Hijau</option><option>Biru</option></select>

b. <dropdown name="warna"><choice>Merah</choice><choice>Hijau</choice><choice>Biru</choice></dropdown>

c. <input type="dropdown" name="warna" value="Merah,Hijau,Biru">

d. <select name="warna" values="Merah,Hijau,Biru"></select>

e. <list name="warna"><item>Merah</item><item>Hijau</item><item>Biru</item></list>

33. Tag <label> biasanya digunakan bersama dengan elemen input. Atribut yang menghubungkan <label> dengan input tertentu adalah...

a. for

b. id

c. name

d. link

e. target

34. Atribut required pada elemen <input> berfungsi untuk...

a. Membuat input menjadi readonly

b. Mengharuskan pengguna untuk mengisi input tersebut sebelum form dapat di-submit

c. Memberikan nilai default pada input

d. Mengatur format input yang benar

e. Membatasi panjang teks yang bisa dimasukkan

35. Tipe file pada elemen <input> digunakan untuk...

a. Mengunggah file dari komputer pengguna

b. Menampilkan nama file yang ada di server

c. Membuat link ke sebuah file

d. Menyimpan data dalam format file

e. Menampilkan daftar file dalam sebuah folder

36. Perintah <input type="radio" name="kelamin" value="Pria"> Pria akan berfungsi dengan baik jika...

a. Ada input radio lain dengan name yang berbeda

b. Ada input radio lain dengan value yang sama

c. Ada input radio lain dengan name="kelamin"

d. Digunakan di luar tag <form>

e. Diberikan atribut checked

37. Perintah yang benar untuk membuat field email adalah...

a. <input type="mail" name="email">

b. <input type="email" name="email">

c. <input type="text" name="email" format="email">

d. <input type="eml" name="email">

e. <input type="text" name="email" validate="true">

38. maxlength adalah atribut yang digunakan untuk...

a. Menentukan nilai maksimum dari input numerik

b. Mengatur lebar maksimum dari sebuah input

c. Menentukan jumlah maksimum karakter yang dapat dimasukkan

d. Mengatur jumlah baris maksimum pada <textarea>

e. Memberi batasan ukuran file yang diunggah

39. Atribut autofocus pada elemen <input> berfungsi untuk...

a. Secara otomatis mengisi input dengan data sebelumnya

b. Mengaktifkan fitur auto-complete pada browser

c. Menempatkan kursor di dalam input secara otomatis saat halaman dimuat

d. Mengatur agar input selalu berada dalam keadaan fokus

e. Membantu mencari data secara otomatis

40. Atribut disabled pada elemen formulir akan membuat elemen tersebut...

a. Tidak terlihat oleh pengguna

b. Menjadi readonly

c. Terkunci dan tidak dapat dikirimkan datanya saat form di-submit

d. Tidak dapat diketik, tetapi datanya tetap terkirim

e. Terlihat, tetapi tidak dapat diinteraksi oleh pengguna dan datanya tidak akan dikirimkan

Link pengumpulan Hasil >>https://forms.gle/ZUGM7NtWcXGueGzu5

Kegiatan 4 - 6 Agustus 2025

Materi : https://www.simonmurd.com/2024/05/pemrograman-web-format-formulir-dengan.html

C. TUGAS MANDIRI (5 SOAL URAIAN)

Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!

1. Jelaskan dan buatlah analisis tentang cara menggunakan format form!

2. Apa saja komponen yang ada di dalam form?Jelaskan dan buatlah analisisnya untuk tiap-tiap komponennya!

3. Jelaskan perbedaan komponen input teks dan password!

4. Jelaskan bagaimana cara input file didalam formulir !

5. Buatlah analisis tentang anatomi form!

Link pengumpulan Hasil >>https://forms.gle/wmrW2dq6QurG28xY9

Kegiatan 5 - 8 Agustus 2025

Materi : https://www.simonmurd.com/2024/05/pemrograman-web-css-bab-7kelas-xi.html

E. UJI KOMPETENSI

PILIHAN GANDA
Berilah tanda silang (X) pada pilihan jawaban yang benar!
1. CSS merupakan singkatan dari:
a. cascading sheet style
b. conversion style sheet
c. conversion sheet style
d. cascading style sheet
e. conversion select sheet
2. Apa HTML yang benar untuk merujuk ke stylesheet eksternal?
a. <stylesheet> styleku.css </stylesheet>
b. <style src= "styleku.css">
c. <link rel="stylesheet" type="text/css" href="styleku.css">
d. <link rel="css">css</>
e. <style src="style.css"></style>
3. Dimana dalam dokumen HTML tempat yang tepat untuk merujuk ke stylesheet eksternal?
a. Dalam <body> bagian
b. Dalam <head>
c. Pada akhir dokumen
d. Dalam <html>
e. Tidak ada
4. Tag HTML yang digunakan untuk mendefinisikan stylesheet internal?
a. <style>
b. <script>
c. <CSS>
d. <embed>
C. <map>
5. Atribut HTML yang digunakan untuk mendefinisikan style inline?
a. style
b. font
c. class
d. styles
e. class
6. Yang merupakan sintaks CSS yang benar?
a. body {color: black;}
b. {body; color: black;}
c. { body:color = black;}
d. body:color = black;
e. body{color==black}
7. Bagaimana anda memasukkan komentar dalam file CSS?
a. 'Ini adalah komentar
b. // Ini adalah komentar
c. /* Ini adalah komentar */
d. // Ini adalah komentar //
e. /ini adalah komentar/
8. Properti yang digunakan untuk mengubah warna latar belakang?
a. color
b. background-color
c. bgcolor
d. colorbg
e. bg
9. Bagaimana cara menambahkan warna latar belakang untuk semua elemen <h1>?
a. h1.all {background-color: #FFFFFF;}
b. h1 {background-color: #FFFFFF;}
c. all.h1 {background-color: #FFFFFF;}
d. hlall {background:#FFFFFF;}
e. h1 {bg:#FFFFFF;}
10. Properti CSS yang digunakan untuk mengubah warna teks dari elemen?
a. fgcolor
b. color
c. text-color
d. color-text
e. bgcolor
11. Properti CSS yang mengontrol ukuran teks?
a. font-style
b. text-style
c. font-size
d. text-size
e. size
12. Sintaks CSS apa yang benar untuk membuat semua elemen <p> menjadi tebal?
a. p {text-size: bold;}
b. p {font-weight: bold;}
c. <p style="font-size: bold;">
d. <p style="text-size: bold;">
e. p {font-size:bold;}
13. Bagaimana cara menampilkan hyperlink tanpa garis bawah?
a. a {text-decoration: underline none;}
b. a {text-decoration: none;}
c. a {underline: none;}
d. a {decoration: no-underline;}
e. a {underline-text:none;}
14. Bagaimana membuat setiap kata dalam teks dimulai dengan huruf kapital?
a. text-transform: uppercase
b. Anda tidak dapat melakukannya dengan CSS
c. text-transform: capitalize
d. text-transform:uppercase
e. text-transform:lowercase
15. Properti yang digunakan untuk mengubah font dari elemen adalah ?
a. Kedua font-family dan font yang dapat digunakan
b. font
c. font-family
d. font-size
e. font-color
16. Bagaimana cara membuat teks tebal?
a. font-weight: bold;
b. style: bold;
c. font: bold;
d. font-style:bold
e. text-style:bold;
17. Bagaimana cara menampilkan batas baris seperti ini:
Batas atas = 10 piksel
Batas bawah = 5 piksel
Batas kiri = 20 piksel
Batas kanan = 1pixel?
a. border-width: 20px 5px 10px 1px;
b. border-width: 10px 20px 5px 1px;
c. border-width: 10px 1px 5px 20px;
d. border-width: 10px 5px 20px 1px;
e. border-width: 20px 5px 1px 10px;
18. properti yang digunakan untuk mengubah elemen margin kiri adalah..
a. margin-left
b. indent
c. padding-left
d. padding-right
e. margin-right
19. Bagaimana cara membuat daftar yang berisi daftar item dengan bentuk kotak?
a. list-style-type: square;
b. list:square;
c. list-type: square;
d. list-style:square
e. style:square
20. Bagaimana cara memilih elemen dengan id "demo"?
a. .demo
b. Demo
c. *Demo
d. #demo
e. -demo

Link pengumpulan Hasil >>https://forms.gle/vuhwpWVw5kuvt3hL9

Kegiatan 6 - 27 Agustus 2025

Materi : https://www.simonmurd.com/2024/05/pemrograman-web-css-bab-7kelas-xi.html

C. TUGAS MANDIRI (5 SOAL URAIAN)

Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!

1. Bagaimana cara menambahkan CSS pada dokumen HTML?

2. Bagaimana cara mengubah ukuran tag heading 1 menjadi 30px dengan CSS?

3. Bagaimana cara mengubah ukuran gambar dengan CSS?

4. Bagaimana cara memberi warna pada baris di tabel?

5. Bagaiamana cara mengubah ukuran input teks di form

Link pengumpulan Hasil >>https://forms.gle/7cfAu9kp9knqiPru6

Kegiatan 7 - 24 Sepetember 2025

Materi : https://www.simonmurd.com/2024/05/pemrograman-web-client-side-programming.html

E. UJI KOMPETENSI
PILIHAN GANDA
Berilah tanda silang (X) pada pilihan jawaban yang benar!
1. Netscape memberikan nama "Javascript" pada tanggal...
A. 4 Desember 1995
B. 5 Desember 1995
C. 6 Desember 1995
D. 7 Desember 1995
E. 8 Desember 1995
2. Penempatan JavaScript pada elemen dalam HTML adalah ...
A. <script>
B. <javascript>
C. <scripting>
D. <js>
E. <java>
3. Sintaks JavaScript yang benar untuk mengubah isi dari elemen HTML di bawah ini adalah...
<p id="demo"> Ini adalah demonstrasi. </p>
A. document.getElementById ("demo") innerHTML = "Hello World!".;
B. document.getElementByName ("p") innerHTML = "Hello World!".;
C. document.getElement ("p") innerHTML = "Hello World!".;
D. #demo.innerHTML = "Hello World!";
E. demo.innerHTML = "Hello World"
4. Tempat yang tepat untuk menyisipkan JavaScript adalah...
A. bagian <head>
B. bagian <body>
C. bagian <head> dan <body> yang benar
D. tidak di bagian <head> dan <body>
E. bagian <title>
5. Sintaks yang benar untuk merujuk ke skrip eksternal yang disebut "xxx.js" adalah
A. <script name = "xxx.js">
B. <script href="xxx.js">
C. <script src="xxxx.js">
D. <script rel="xxx.js">
E. <javascript src="xxx.js">
6. Dibawah ini merupakan Client Side Scripting kecuali...
A. XHTML
B. Javascript
C PHP
D. HTML
E. CSS
7. Berikut merupakan pernyataan yang benar tentang Javascript, kecuali...
A. Bahasa yang dijalankan oleh program eksternal (Java Virtual Machine) diintegrasikan ke dalam browser
B. Bahasa yang langsung dijalankan oleh browser
C. Didefinisikan dengan tag <script> pada halaman HTML
D. Kode program bersifat terbuka dan dapat dibaca oleh browser
E. Tidak memerlukan proses kompilasi menjadi file lainnya
8. Yang bukan merupakan sifat dari Javascript adalah...
A. tertutup
B. terbuka
C. dapat dibaca oleh browser
D. case sensitif
E. tidak perlu kompilasi
9. Cara menambahkan komentar di JavaScript adalah...
A. "Ini adalah komentar
B. // Ini adalah komentar
C. <!- Ini adalah komentar ->
D. "ini adalah komentar"
E. (ini adalah komentar")
10. Cara untuk menyisipkan komentar yang memiliki lebih dari satu baris adalah...
A. <!- Komentar ini memiliki lebih dari satu baris ->
B. /* Komentar ini memiliki lebih dari satu baris */
C. // Komentar ini memiliki lebih dari satu baris //
D. (Komentar ini memiliki lebih dari satu baris)
E. "Komentar ini memiliki lebih dari satu baris
11. Yang bukan merupakan fungsi dari komentar adalah...
A. diperlukan dalam program untuk membantu dalam pengembangan aplikasi selanjutnya
B. sebagai keterangan program
C. sebagai pengingat bagian-bagian khusus di dalam skrip tersebut
D. untuk membuat orang yang tidak tahu program yang dibuat jadi mengerti dengan membaca petunjuk-petunjuk yang dibuat
E. sebagai penampil program yang dibuat
12. Setiap browser saat ini memiliki implementasi sendiri-sendiri untuk ECMAScript, Browser yang cocok untuk JScript adalah...
A. Internet Explorer
B. Opera
C. Safari
D. Google Chrome
E. Mozilla Firefox
13. Yang termasuk program editor web berbayar adalah...
A. Notepad++
B. Sublime Text
C. Adobe Dreamweaver
D. Aptana
E. Expression Web 4
14. Javascript pertama kali diperkenalkan oleh netscape pada tahun...
A. 1945
B. 1995
C. 2005
D. 1983
E. 1975
15. Script pada Javascript dapat ditempatkan pada...
A. Body, header, title
B. Header, title, html
C. Title, body, external file
D. Body, header, external file
E. Body, header, html

Link pengumpulan Hasil >>https://forms.gle/cLrXBUpCsQ8wFTJd7

Kegiatan 8 - 3 Oktober 2025

Materi : https://www.simonmurd.com/2024/05/pemrograman-web-client-side-programming.html

bacalah petunjuk lalu kerjakan soal-soal di bawah ini dengan cermat dan teliti!
1. Sebutkan sedikitnya 5 properti dari pengaturan teks menggunakan CSS dan analisislah contoh penggunaannya!
2. Tuliskan format penulisan CSS untuk memberikan warna pada teks dan buatlah pada editor text!
3. Tuliskan format penulisan CSS untuk pengaturan spasi antar karakter pada paragraph dan buatlah pada editor text!
4. Sebutkan 3 macam tipe CSS dan berilah analisis pada tiap-tiap tipe nya!
5. Apa fungsi dasar CSS dan berikan contoh penerapannya pada halaman web!

Link pengumpulan Hasil >>https://forms.gle/92ftkP4LbzCJXtNx9