RPP Pemograman Web

SMK NEGERI 1 TRENGGALEK
1

RENCANA PELAKSANAAN PEMBELAJARAN

Nama Sekolah : SMK NEGERI 1 TRENGGALEK
Mata Pelajaran : Pemrograman Web
Kelas/Semester : X/1
Alokasi Waktu : 8 x 45 menit
Aspek/materi pokok : Teknologi Aplikasi Web

A. Kompetensi Inti
1. Menghayati dan mengamalkan ajaran agama yang dianutnya
2. Menghayatidan mengamalkan perilaku jujur, disiplin, tanggungjawab, peduli (gotong
royong, kerjasama, toleran, damai) santun, responsif dan pro-aktifdan menunjukan sikap
sebagai bagian dari solusi atas berbagai permasalahan dalam berinteraksi secara efektif
dengan lingkungan sosial dan alam serta dalam menempatkan diri sebagai cerminan
bangsa dalam pergaulan dunia.
3. Memahami, menerapkan, dan menganalisis pengetahuan faktual, konseptual, dan
prosedural berdasarkan rasa ingin tahunya tentang ilmu pengetahuan, teknologi, seni,
budaya, dan humaniora dalam wawasan kemanusiaan, kebangsaan, kenegaraan, dan
peradaban terkait penyebab fenomena dan kejadian dalam bidang kerja yang spesifik
untuk memecahkan masalah.
4. Mengolah, menalar, dan menyaji dalam ranah konkret dan ranah abstrak terkait dengan
pengembangan dari yang dipelajarinya di sekolah secara mandiri, dan mampu
melaksanakan tugas spesifik di bawah pengawasan langsung.

B. Kompetensi Dasar
1.1 Memahami nilai-nilai keimanan dengan menyadari hubungan keteraturan dan
kompleksitas alam dan jagad raya terhadap kebesaran Tuhan yang menciptakannya
1.2 Mendiskripsikan kebesaran Tuhan yang menciptakan berbagai sumber energi di alam
1.3 Mengamalkan nilai-nilai keimanan sesuai dengan ajaran agamanya dalam kehidupan
sehari-hari.
2.1 Menunjukkan perilaku ilmiah (memiliki rasa ingin tahu; objektif; jujur; teliti; cermat; tekun;
hati-hati; bertanggung jawab; terbuka; kritis; kreatif; inovatif dan peduli lingkungan) dalam
aktivitas sehari-hari sebagai wujud implementasi sikap dalam melakukan percobaan dan
berdiskusi
2.2 Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari sebagai wujud
implementasi melaksanakan percobaan dan melaporkan hasil percobaan
3.1 Memahami konsep teknologi aplikasi web
4.1 Menyajikan pelbagai teknologi pengembangan aplikasi web

C. Indikator Pencapain Kompetensi
Memahami profesi dalam pengembangan aplikasi web
Memahami sejarah dan cara kerja web
Memahami alur pengembangan aplikasi web


2

Memahami perangkat pengembangan aplikasi web

D. Tujuan Pembelajaran
Selama dan setelah proses pembelajaran, siswa memahami profesi dalam
pengembangan aplikasi web
Selama dan setelah proses pembelajaran, siswa memahami sejarah dan cara kerja web
Selama dan setelah proses pembelajaran, siswa memahami alur pengembangan
aplikasi web
Selama dan setelah proses pembelajaran, siswa memahami perangkat pengembangan
aplikasi web

E. Materi Pembelajaran
Profesi dalam pengembangan aplikasi web
Sejarah dan cara kerja web
Alur pengembangan aplikasi web
Perangkat pengembangan aplikasi web

Pada tahun 1969, DoD memberi tugas kepada ARPA untuk membangun sebuah mata rantai
komunikasi antara DoD dengan militer yang tidak dapat disabot oleh musuh mereka. Jaringan
komunikasi yang diciptakan ini disebut ARPAnet. Pada awalnya, ARPAnet hanya
menghubungkan empat buah situs saja, yaitu :

y of Utah

Pada tahun 1970, penelitian yang dilakukan di Stanford University menghasilkan sebuah
protokol yang disebut TCP/IP. Protokol TCP/IP inilah yang berkembang terus hingga sekarang
dan menjadi protokol standar dalam Internet.

Istilah-istilah dalam internet
WWW

World Wide Web merupakan suatu bentuk layanan Internet yang

TCP/IP

TCP/IP singkatan dari Transfer Control Protocol/Internet Protocol
merupakan jenis protocol yang memungkinkan komputer
berkomunikasi dengan komputer lain melalui suatu jaringan yang di
sebut dengan internet.

URL

URL (Uniform Resource Locator) digunakan sebagai penunjuk lokasi
pada internet. URL dapat dimisalkan dengan alamat yang menunjuk
pada suatu lokasi.

Homepage

Tampilan awal (halaman utama) suatu website yang memuat informasi
singkat tentang apa isi dari website tersebut

Situs

Suatu alamat di dalam sebuah web

Browser

Software yang digunakan untuk surfing atau browsing Internet, seperti
Internet Explorer, Opera, Netscape dll

ISP

Internet Service Provider, penyedia jasa layanan Internet, seperti
Indosatnet, Wasantara, Meganet dll


3

E-mail

Electronic Mail, suatu layanan/fasilitas yang disediakan untuk saling
berkirim surat lewat internet

Search Engine

Mesin pencari, suatu layanan/fasilitas untuk melakukan pencarian di
Internet

Nama domain
Nama domain (domain name) adalah nama unik yang diberikan untuk mengidentifikasi nama
server komputer seperti web server atau email server di jaringan komputer ataupun internet.
Nama domain berfungsi untuk mempermudah pengguna di internet pada saat melakukan akses
ke server, selain juga dipakai untuk mengingat nama server yang dikunjungi tanpa harus
mengenal deretan angka yang rumit yang dikenal sebagai alamat IP (192.168.1.1). Nama
domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web seperti contohnya
"wikipedia.org". Nama domain kadang-kadang disebut pula dengan istilah URL, atau alamat
website. Daftar nama-nama domain di bawah ini;

Com Commerce, komersial
net Jaringan (Network)
co Company, perusahaan
org Organization, organisasi
gov;go Government, pemerintah
ac Academic, akademik
edu Education, pendidikan
mil

Military, militer

Teknologi web
Web berdasarkan teknologinya terbagi menjadi dua, yaitu Web Statis dan Web Dinamis.
Sebelum menuju ke perbedaan web statis dan web dinamis, mari kita bahas persamaannya
terlebih dahulu. Persamaan web statis dan web dinamis yaitu sama-sama keduanya
merupakan suatu website yang menampilkan halaman yang ditampilkan di internet yang
memuat informasi tertentu (khusus).

Perbedaan Web Statis dan Web Dinamis
1. Interaksi antara pengunjung dan pemilik web
Dalam web statis tidak dimungkinkan terjadinya interaksi antara pengunjung dengan
pemilik web. Sementara dalam web dinamis terdapat interaksi antara pengunjung
dengan pemilik web seperti memberikan komentar, transaksi online, forum, dll.
2. Bahasa Script yang digunakan
Web statis hanya menggunakan HTML saja, atau paling tidak bisa ditambah dengan
CSS. Sedangkan web dinamis menggunakan bahasa pemrograman web yang lebih
kompleks seperti PHP, ASP dan JavaScript.
3. Penggunaan Database
Web statis tidak menggunakan database karena tidak ada data yang perlu disimpan dan
diproses. Sedangkan web dinamis menggunakan database seperti MySQL, Oracle, dll
untuk menyimpan dan memroses data.
4. Konten
Konten dalam web statis hanya diberikan oleh pemilik web dan jarang di-update,
sementara konten dalam web dinamis bisa berasal dari pengunjung dan lebih sering di-
update. Konten dalam web dinamis bisa diambil dari database sehingga isinya pun bisa
berbeda-beda walaupun kita membuka web yang sama.


4

Pengertian HTML
HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalam
pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen HTML
hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa
yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatu
dokumen. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < )
dan tanda lebih besar ( > ). HTTP atau Hypertext Transfer Protokol merupakan protokol yang
digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke
browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang
memungkinkan Anda menjelajah internet dan melihat halaman web

Pengertian Tag pada HTML
Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser
bagaimana suatu text ditampilkan. Apakah text itu ditulis sebagai sebuah paragraf, list, atau
sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag. Hampir semua tag dalam
HTML ditulis secara berpasangan, tag pembuka dan tag penutup, dimana objek yang dikenai
perintah tag berada di antara tag pembuka dan tag penutup. Objek disini dapat berupa text,
gambar, maupun video. Penulisan tag berada di antara dua kurung siku. Format penulisan tag:
<tag_pembuka>objek yang dikenai perintah tag </tag_penutup>

Struktur penulisan pada html:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>

Contohnya jika kita ingin membuat suatu text dalam sebuah paragraf di tulis tebal atau miring,
dalam HTML dapat ditulis sebagai berikut: Ini adalah sebuah paragraf.
<i>Hanya kumpulan beberapa kalimat</i>. Paragraf ini terdiri dari <b>3 kalimat</b>.
Hasil dari sebagian kode HTML diatas, diterjemahkan oleh browser menjadi: Ini adalah sebuah
paragraf.
Hanya kumpulan beberapa kalimat.Paragraf ini terdiri dari 3 kalimat.

Tag <i> pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan text
secara garis miring (i, singkatan dari italic), dan tag <b> untuk menebalkan tulisan (b, singkatan
dari bold).

F. Metode Pembelajaran
Pendekatan : Scientific dan PBL
Strategi : Penggalian informasi (Project based learning)
Presentasi
Model pembelajaran : Kooperatif
Metode : Penugasan,tanya jawab,diskusi,demonstrasi,proyek.


5

G. Kegiatan Pembelajaran

No Aktivitas Alokasi
waktu
Kegiatan Pendahuluan
o Berdoa sebelum pembelajaran
o Mengaitkan materi pembelajaran sekarang dengan
pengalaman peserta didik
o Mengajukan pertanyaan yang ada keterkaitan dengan tema
yang akan dibelajarkan
o Siswa menerima informasi kompetensi, meteri, tujuan,
manfaat, dan langkah pembelajaran yang akan dilaksanakan
o Mengajar peserta didik melakukan kegiatan yang berkaitan
dengan materi

30 Menit
Kegiatan Inti
Eksplorasi
Observing /mengamati
o Siswa mengamati tayangan atau paparan disertai gambar
tentang prosedur cara kerja web dan penawaran layanan
hosting
Questioning/menanya
o Siswa dengan dibimbing guru diminta untuk bertanya
terkait tentang
cara kerja web
hosting aplikasi web
Mengeksplorasi
o Siswa dibagi beberapa kelompok dan berdiskusi tentang
Membandingkan berbagai penawaran hosting
Aplikasi-aplikasi untuk pengembangan aplikasi web
o Selama kegiatan diskusi berlangsung guru melakukan
pengamatan sikap dan mencatat semua hal yang terjadi
di kelas

Elaborasi
Mengolah data /Mengasosiasikan
o Dengan diskusi siswa menyimpulkan hal-hal terpenting
tentang cara kerja web, hosting dan aplikasi
Mengumpulkan informasi /Experimenting
o Siswa melaksanakan Keamanan dan Keselamatan Kerja
(K3) dalam pengoperasian peralatan
o Siswa memperlihatkan sikap cermat dan teliti dalam
menyelesaikan masalah cara kerja web
menyelesaikan masalah hosting aplikasi web
menyelesaikan masalah Aplikasi-aplikasi untuk
300 Menit


6

o Siswa mencoba membuat laporan hasil observasi tentang
prosedur cara kerja web, perbandingan pelbagai layanan
hosting dan penggunaan aplikasi pengembangan web
o Dengan sikap tanggung jawab, peduli, responsif, dan
santun siswa berkelompok membaca dan berdiskusi

Konfirmasi
Mengkomunikasikan
o Menyampaikan hasil tentang pencarian dan penyelesaian
prosedur cara kerja web, perbandingan pelbagai layanan
hosting dan penggunaan aplikasi pengembangan web
o Siswa mendengarkan umpan balik dan penguatan dari
guru
o Siswa mengumpulkan hasil kerja kelompok.
Kegiatan Penutup
o Melakukan refleksi dan mencatat hal-hal penting dalam
bentuk rangkuman dengan melibatkan peserta didik
o Menindaklanjuti pembelajaran hari ini dengan melihat hasil
akhir pekerjaan siswa sesuai dengan materi belajar yang baru
saja di pelajari
o Siswa menyimak informasi mengenai rencana tindak lanjut
pembelajaran

30 Menit

H. Penilaian
a. Penilaian Proses
No Aspek yang dinilai
Teknik
Penilaian
Waktu
Penilaian
Instrumen
Penilaian
Keterangan
1. Religius Pengamatan Proses

Lembar
Pengamatan
Hasil
penilaian
nomor 1 dan
2 untuk
masukan
pembinaan
dan informasi
bagi Guru
Agama dan
Guru PKn
2. Tanggung jawab
3. Peduli
4. Responsif
5. Santun

b.Penilaian Hasil
Indikator Pencapaian
Kompetensi
Teknik
Penilaian
Bentuk
Penilaian
Instrumen
Memahami profesi
dalam
pengembangan
aplikasi web

Tes
tertulis
Isian Jelaskan mengenai pengembangan
aplikasi web


7

Memahami sejarah
dan cara kerja web

Tes
tertulis
Isian Jelaskan tentang cara kerja web

Memahami alur
pengembangan
aplikasi web

Tes
tertulis
Isian Jelaskan alur pengembangan aplikasi
web

Memahami
perangkat
pengembangan
aplikasi web

Tes
tertulis
Isian Jelaskan perangkat pengembangan
aplikasi web

Soal;
LEMBAR KERJA SISWA 1
( Tugas Perorangan )

I. Pilihan Ganda

1. Apa sebutan halaman Web yang ditempatkan di depan situs web?
a.Web Page b. Body c. Home Page d. Link e. Banner
2. Perangkat lunak berikut dapat digunakan untuk membuat Web page, kecuali.....
a.HTML b. Ms Word c. Notepad d. Ms FrontPage e.Adope Photoshop
3. Apa format dokumen sebuah halaman Web...
a.HTML b.PDF c.DOC d.Text e.GIF
4. Pilihan Page pada View Bar di MS Frontpage digunakan untuk menampilkan.....
a. Struktur Web site
b. Lembar kerja
c. Hyperlink
d. Menampilkan laporan-laporan tentang kinerja halaman
e. Semua file di folder tempat kerja
5. Pilihan Folders pada View Bar di MS Frontpage digunakan untuk menampilkan....
b. Lembar kerja
c. Hyperlink
6. Pilihan Reports pada View Bar di MS Frontpage digunakan untuk menampilkan.....
b. Lembar kerja
c. Hyperlink
7. Pilihan Navigators pada View Bar di MS Frontpage digunakan untuk menampilkan.....
b. Lembar kerja
c. Hyperlink
8. Pilihan Hyperlinks pada View Bar di MS Frontpage digunakan untuk menampilkan.....
b. Lembar kerja


8

c. Hyperlink
9. Pilihan Format gambar yang biasa terdapat dalam situs web adalah ....
a.JPEG b.RM c.MP3 d.MPEG e.Ogg
10. Apa nama tombol di MS FrontPage yang digunakan untuk melihat tampilan halaman
Web dari kode HTML yang sudah jadi?
a. Tombol Normal
b. Tombol HTML
c. Tombol Preview
d. Tombol Folder List
e. Tombol Navigation

II. Essay
1. World Wide Web ( WWW ) atau WEB mempunyai pengertian .
2. Universal Resource Locators ( URL ) adalah
3. TAG adalah ..
4. TAG digunakan untuk .
5. Untuk membuat dokumen HTML diperlukan program editors teks apa dan
bagaimana cara menyimpannya supaya dokumen HTML yang kita buat dapat dibuka
oleh web browser ! ( beri contoh sebuah nama file HTML dan ekstensinya )

Pedoman Penskoran
1.Soal diatas
No Uraian Skor
1. Jawaban Soal Pilihan Ganda :
1. A 2. A 3. A 4. B 5. E 6. D 7. A 8. C 9. A 10. C
20

Skor Maximal untuk soal pilihan ganda : 2 x 10 = 20

2. Kunci Jawaban Soal Uraian
Kunci Jawaban Soal No. 01

Sebuah system yang dapat menampilkan informasi berbentuk teks,
gambar, suara dan film yang menjadi bentuk hypertext dan dapat
diakses oleh perangkat lunak yang disebut browser.

10

URL merupakan suatu pathname untuk mengidentifikasi sebuah
dokumen di web.

10

TAG adalah kode yang digunakan untuk memformat teks yang terdiri
dari TAG pembuka dan TAG penutup, dan TAG pembuka saja tanpa
penutup.

10

10


9

Menandai berbagai elemen dalam suatu dokumen HTML


Editor : notepad
Simpan file dalam bentuk HTM / HTML
Contoh : webku.htm atau webku. Html

10
Skor maksimal untuk soal uraian : 5 x 10 = 70

Nilai = X 100

2.Test unjuk kerja

1.Rubrik Penilaian Diskusi

No.
Nama
Siswa
Aspek pengamatan
Jum
Skor
Nilai Ket
Kerjasama
Mengkom
unikasikan
pendapat
Toleransi Keaktifan Kreatifitas

Keterangan Skor :
Masing-masing kolom diisi dengan kriteria
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
A = 90-100 : Baik sekali
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang
Skor perolehan
Skor Maksimal (20)
Skor perolehan
Skor Maksimal (70)


10

2.Rubrik Penilaian Presentasi

No.
Nama
Siswa
Aspek Penilaian
Jum
Skor
Nilai Ket.
Kerjasama
Sistematika
Penyampaian
Wawasan Keberanian Antusias
Gesture &
Penampilan

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang

3.Format Penilaian Laporan

Struktur Makalah Indikator Nilai
Isi Laporan
1. Orisinalitas deskripsi
2. Mendeskripsikan mengenai prosedur cara
kerja web, perbandingan pelbagai layanan
hosting dan penggunaan aplikasi
pengembangan web
3. Struktur/logika penulisan disusun dengan
jelas sesuai metode yang dipakai
4. Bahasa yang digunakan sesuai EYD
5. Gambar yang sesuai
6. Penemuan terbaru

Bentuk Tulisan
7. Sesuai kaidah yang ditetapkan (Kertas,
Spasi, Font)
8. Kerapihan ketikan sesuai dengan SOP

Jumlah

Skor perolehan
Skor Maksimal (24)


11

Kriteria Penilaian untuk masing-masing Indikator :
Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

4.Format Jobsheet dan Rubrik penilaian

Kompetensi Dasar : .
Alat : .
Bahan : .
Langkah Kerja : .
Gambar kerja : .
Analisa : .

Isi Laporan
2. Alat bahan yang sesuai dengan
unjuk kerja
3. Langkah kerja sesuai SOP
4. Analisa sesuai
kerusakan/kesalahan yang
terjadi

Bentuk Tulisan
6. Kerapihan tulisan
7. Ketepatan waktu penyelesaian
tugas

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

Skor perolehan
Skor Maksimal (32)
Skor perolehan
Skor Maksimal (28)


12

5.Rubrik penilaian Unjuk kerja/Praktek

Prosentase Bobot Komponen Penilaian

Nilai Praktik
(NP)
Persiapan Proses
Sikap
Kerja
Hasil Waktu NK
1 2 3 4 5 6
Bobot (%)
10 40 10 30 10

Skor
Komponen

NK

I. Sumber Belajar
o Buku Teks Pelajaran
o Buku Panduan Guru
o Pemrograman Web Dengan HTML Revisi Keempat, Betha sidik, Ir., Husni I. Pohan,
Ir., M.Eng., Penerbit Informatika Bandung, Juni 2012
o Learning Web Design 4th Edition, Jennifer Niederst Robbins, Penerbit O'Reilly
Media, Inc.: Kanada, 2012
o Buku-buku dan referensi lain yang relevan
o Media cetak/elektronik
o Lingkungan sekitar

Trenggalek , 14 Juli 2014
Guru Mata Pelajaran

Bambang Haryono, ST
NIP. 19780618 201101 1 006


13

Lampiran 1 Lembar Pengamatan

LEMBAR PENGAMATAN SIKAP
Mata Pelajaran :..................................................................................................
Kelas/Semester :....................................................................................................
Tahun Ajaran :....................................................................................................
Waktu Pengamatan : ............................................................................................

Indikator perkembangan sikapreligius,tanggung jawab,peduli,responsif, dansantun
1. BT (belum tampak) jika sama sekali tidak menunjukkan usaha sungguh-sungguh dalam
menyelesaikan tugas
2. MT (mulai tampak) jika menunjukkan sudah ada usaha sungguh-sungguh dalam
menyelesaikan tugas tetapi masih sedikit dan belum ajeg/konsisten
3. MB (mulai berkembang) jika menunjukkan ada usaha sungguh-sungguh dalam
menyelesaikan tugas yang cukup sering dan mulai ajeg/konsisten
4. MK (membudaya) jika menunjukkan adanya usaha sungguh-sungguh dalam
menyelesaikan tugas secara terus-menerus dan ajeg/konsisten

Bubuhkan tanda V pada kolom-kolom sesuai hasil pengamatan.
No
.
Nama
Siswa
Religius Tanggug jawab Peduli Responsif Santun
BT MT MB MK BT MT MB MK BT MT MB MK BT MT MB MK BT MT MB MK
1.
2.
3.

4.

5.

...

Keterangan
1 = kurang
2 = sedang
3 = baik
4 = sangat baik


14

Rubrik penilaian laporan hasil observasi
Nama Kelompok :.........................
Tanggal :
No. Kunci/Kriteria jawaban/Aspek yang dinilai Tingkat Skor
1. Isi
2. Organisasi
3. Kosakata dan Diksi
4. Bahasa (Tata Bahasa dan Struktur)
5. Penulisan (Ejaan dan Tanda Baca)
6. Kerapian
Total


15


Aspek/mater pokok : Format Teks Halaman Web

A. KompetensiInti
2. Menghayati dan mengamalkan perilaku jujur, disiplin, tanggungjawab, peduli (gotong
B. Kompetensi Dasar
sehari-hari.
berdiskusi
3.2 Memahami format teks pada halaman web
4.2 Menyajikan teks dalam format tertentu pada halaman web

Memahami anatomi dokumen web
Memahami pemformatan teks dan paragraph
Memahami pembuatan list minimal
Memahami pembuatan list kombinasi


16

Selama dan setelah proses pembelajaran, siswa memahami anatomi dokumen web
Selama dan setelah proses pembelajaran, siswa memahami pemformatan teks dan
paragraph
Selama dan setelah proses pembelajaran, siswa memahami pembuatan list minimal
Selama dan setelah proses pembelajaran, siswa memahami pembuatan list kombinasi

Anatomi dokumen web
Pemformatan teks dan paragraph
Pembuatan list minimal
Pembuatan list kombinasi

Daftar tag pada html adalah sbb:
<html> Dokumen
<head> Header
<title> Judul dokumen
<body> Isi dokumen
<h1><h6> Judul paragraf
<p> Paragraf
<b>,<i>,<u>,<sup>,<sub> Atribut
<br> Ganti baris
<font> Font
<li>,<ol>,<ul> Enumerasi
<hr> Garis mendatar
<img> Gambar
<a> Link (kaitan/rujukan)
<table> Tabel
 Komentar
<frame>,<frameset>,<iframe> Frame (bingkai)
<form> Formulir isian
<input>,<textarea>,<select> Komponen isian pada formulir
<map> Link berdasar area pada gambar
<span>,<div> Pengelompokan elemen dokumen

Pengaturan paragraph

Tag <p>, Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi
akhiran </P> tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengatur
perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align
mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY

ATRIBUT FUNGSI
align Merupakan posisi vertikal garis pemisah. Nilainya adalah LEFT, RIGHT,
atau CENTER
width Digunakan untuk menentukan ketebalan garis.
size Digunakan untuk menentukan panjang garis dalam satuan pixel.
noshade Menonaktifkan efek tiga dimensi.
color Menentukan warna garis batas.


17

Contoh (Save dengan nama horisontal.html) :

<html> <head> <title>Membuat Garis Horisontal</title> </head>
<body bgcolor=#fffccc>
<font size=1 Face=Tahoma color=blue>Ahlan Wa Sahlan</font> <hr size=1 width=150
align=left>
<h1><center>www.smk-mediainformatika.sch.id</h1>
<hr size=5 align=center noshade>
</body>
</html>

Tag <hn>. <Hn>..</Hn>
Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau
antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan
ukuran terkecil.

Contoh (Save dengan nama hn.html) :
<html>
<head> <title>Membuat Heading Dokumen HTML</title> </head>
<body bgcolor=#000000 text=#FFFFFF>
<h1>Headng Tingkat 1 </h1>
</body>
</html>

Tag <pre>, membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks
editor. Dengan tag <pre>, maka tag <p> dan tag <br> jadi tidak diperlukan lagi.
Contoh (Save dengan nama free.html):
<html>
<head> <title> Web Sederhana </title> </head>
<body>
<pre>
Tampilan ini sma dengan tampilan di teks editor. klasemen
Team Main Menang Seri Kalah
==============================================
Team A 3 2 1 0
Team B 3 2 0 1
Team C 3 1 1 1
==============================================
kode program : for i = 1 to 10
For j = 1 to 5
A(i,j)=i*j
next
next
</pre>
</body>
</html>


18

LIST
Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item
yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/symbol. Ada dua
macam daftar, yaitu UNORDERED lists (ul) dan ORDERED lists (ol).
tag untuk membuat daftar item tidak berurut

Disc : Bulatan hitam ()
Square : Kotak ()
Circle : Bulatan kosong ()

Contoh (Save dengan nama unordered.html):
<html>
<head>
<title>Order List (numbering)</title>
<head>
<body>
<ol type=" I ">
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ol>
<br>
<ol type="1">
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ol>
<br>
<ol type="A">
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ol>
<br>
<ol type="a">
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ol>
<br>
<ol type="i">
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ol>
</body>
</html>


19

1 : Angka latin
A : Huruf A
a : Huruf a
I : Angka romawi

Contoh (Save dengan nama ordered.html):

<html>
<head>
<title>Unorder (bullet)</title>
<head>
<body>
<ul type="disc">
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ul>
<br>
<ul type="square">
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ul>
<br>
<ul type="circle">
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ul>
</body>
</html>

Presentasi


20


waktu
dengan materi

45 Menit
Kegiatan Inti
Eksplorasi
berbagai jenis format teks dan hasilnya terhadap halaman
web
Questioning/menanya
tentang tanyangan atau paparan
Berbagai tampilan format teks pada halaman web
penerapan format teks yang sesuai dari suatu halaman
web
Mengeksplorasi
Berbagai tampilan format teks pada halaman web
penerapan format teks yang sesuai dari suatu halaman
web
di kelas

Elaborasi
tentang hubungan antara format teks dengan halaman
web yang dihasilkan
tentang kemiripan hasil penerapan format teks dengan
halaman web aslinya
tentang penerapan format teks pada halaman web
450 Menit


21

menyelesaikan masalah penerapan prosedur hubungan
antara format tabel dengan tampilannya pada halaman
web
menyelesaikan masalah dalam penerapan prosedur
format tabel untuk mendapatkan desain layout halaman
web yang sesuai
penerapan format tabel pada halaman web

Konfirmasi
Mengkomunikasikan
o Menyampaikan hasil tentang, pemecahan masalah
menggunakan percobaan berbagai format tabel pada
halaman web kelompok lain merespon atau menanggapi
dengan responsif dan santun
guru

Kegiatan Penutup
saja di pelajari
pembelajaran

45 Menit

H. Penilaian
a. Penilaian Proses
Teknik
Penilaian
Waktu
Penilaian
Instrumen
Penilaian
Keterangan

Lembar
Pengamatan
Hasil
penilaian
nomor 1 dan
2 untuk
masukan
pembinaan
dan informasi
bagi Guru
Agama dan
Guru PKn
2. Tanggung jawab
3. Peduli
4. Responsif
5. Santun


22

b. Penilaian Hasil
Kompetensi
Teknik
Penilaian
Bentuk
Penilaian
Instrumen
Memahami anatomi
dokumen web

Tes
tertulis
Isian Buatlah anatomi dokumen web

Memahami
pemformatan teks dan
paragraph

Tes
tertulis
Isian Jelaskan pemformatan teks dan
paragraph dalam halaman web
Memahami pembuatan
list minimal

Tes
tertulis
Isian Buatlah list minimal halaman web

Memahami pembuatan
list kombinasi

Tes
tertulis
Isian Buatlah list kombinasi halaman web

Soal Tulis
1. Jelaskan fungsi tag <p>
2. Ada 3 macam pengaturan paragraf, sebutkan dan tuliskan tag nya
3. Uraian tentang fungsi heading
4. Jelaskan fungsi tag <pre>

Jawaban

1. Tag <p>, Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa
diberi akhiran </P> tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk
mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN
2. Rata tengah , tag nya adalah : <p align=center>
Rata kanan, tag nya adalah : <p align=right>
Rata kiri, tag nya adalah : < p align =left>
3. Tag <hn>. <Hn>..</Hn>
Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6
atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6>
merupakan ukuran terkecil.
4. Tag <pre>, membuat tampilan dokumen HTML pada browser sama dengan tampilan
pada teks editor. Dengan tag <pre>, maka tag <p> dan tag <br> jadi tidak diperlukan
lagi.


23

Tes Praktek

Jawab
<html>
<head>
<title>tugas 3 </title>
</head>
<body>
<p align=center>mengatur paragraf <br>
<p align=left> pengaturan paragraf adalah <br>
salah satu hal yang perlu dilakukan agar paragraf tersusun rapi <br>
<p align=center> ada beberapa pilihan pengaturan, yaitu:<br>
<p align=right> rata kanan </p>
</body>
</html>

Pedoman Penskoran
1.Soal nomor 1 sampai 4
Aspek Skor
Siswa menjawab dengan benar dan lengkap 4
Siswa menjawab benar sedikit tidak lengkap 3
Siswa menjawabb enar tetapi tidak lengkap 2
Siswa menjawab salah 1
SKOR MAKSIMAL


24

2.Test unjuk kerja


No.
Nama
Siswa
Aspek pengamatan
Jum
Skor
Nilai Ket
Kerjasama
Mengkomu
nikasikan
pendapat

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


No.
Nama
Siswa
Aspek Penilaian
Jum
Skor
Nilai Ket.
Kerjasama
Sistematika
Penyampaian
Gesture &
Penampilan

Skor perolehan
Skor Maksimal (20)


25

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


Isi Laporan
2. Mendeskripsikan mengenai
pemecahan masalah
menggunakan berbagai format teks
3. Struktur/logika penulisan disusun
dengan jelas sesuai metode yang
dipakai
4. Bahasa yang digunakan sesuai
EYD
6. Penemuan terbaru

Bentuk Tulisan
7. Sesuai kaidah yang
ditetapkan(Kertas,Spasi, Font)
8. Kerapihan ketikan sesuai dengan
SOP

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

Skor perolehan
Skor Maksimal (24)
Skor perolehan
Skor Maksimal (32)


26


Alat : .
Bahan : .
Langkah Kerja : .
Gambar kerja : .
Analisa : .

Isi Laporan
2. Alat bahan yang sesuai
dengan unjuk kerja
4. Analisa sesuai
terjadi

Bentuk Tulisan
7. Ketepatan waktu
penyelesaian tugas

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

Skor perolehan
Skor Maksimal (28)


27



Nilai Praktik
(NP)
Persiapan Proses
Sikap
Kerja
Hasil Waktu NK
1 2 3 4 5 6
Bobot (%)
10 40 10 30 10

Skor
Komponen

NK

I. Sumber Belajar
o Buku Panduan Guru

Guru Mata Pelajaran

Bambang Haryono, ST
NIP. 19780618 201101 1 006


28


Mata Pelajaran :..................................................................................................
Kelas/Semester :....................................................................................................
Tahun Ajaran :....................................................................................................

menyelesaikan tugas

No
.
Nama
Siswa
1.
2.
3.

4.

5.

...

Keterangan
1 = kurang
2 = sedang
3 = baik
4 = sangat baik


29

Nama Kelompok :.........................
Tanggal :
1. Isi
2. Organisasi
6. Kerapian
Total


30


Aspek/mater pokok : Format Tabel Halaman Web

A. KompetensiInti
B. Kompetensi Dasar
sehari-hari.
berdiskusi
3.3 Memahami format tabel pada halaman web
4.3 Menyajikan tabel pada halaman web

Memahami anatomi tabel minimal
Memahami tabel dengan spanning
Memahami tabel di dalam table
Memahami desain halaman web dengan konsep tabel


31

Selama dan setelah proses pembelajaran, siswa memahami anatomi tabel minimal
Selama dan setelah proses pembelajaran, siswa memahami tabel dengan spanning
Selama dan setelah proses pembelajaran, siswa memahami tabel di dalam table
Selama dan setelah proses pembelajaran, siswa memahami desain halaman web
dengan konsep tabel

Anatomi tabel minimal
Tabel dengan spanning
Tabel di dalam table
Desain halaman web dengan konsep tabel

Menggunakan Table
Table merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom
dan baris.
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu:
<table>, <tr>, dan <td>.
Yang perlu diingat adalah bahwa tag <tr> dan <td> harus terletak di antara tag <table> dan
</table>.

1. <table>

Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut:
- perataan: rata kiri (left), tengah (center) atau kanan (right).
mengatur bentuk perataan secara vertikal
mengatur warna latar belakang (background) dari tabel.
menentukan gambar yang digunakan sebagai background tabel
Untuk mengatur warna suatu sel dalam tabel
menentukan ukuran border tabel (dalam pixel).
menggabungkan beberapa baris
menggabungkan beberapa kolom
- jarak antara isi cell dengan batas cell (dalam pixel).
mengatur spasi/jarak antar cell (dalam pixel).
menentukan lebar tabel dalam pixel atau percent.
Menentukan tinggi tabel

2. <tr>

Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
- warna latar belakang dari baris.
- perataan vertikal: top, middle atau bottom.

3. <td>

Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah:
untuk menentukan perataan kolom
untuk menentukan image yang digunakan sebagai latar belakang dari
kolom.
untuk menentukan warna latar belakang


32

- lihat gambar contoh
untuk mengatur ukuran tinggi cell dalam pixels.
untuk membuat supaya isi dari kolom tetap berada pada satu baris.
- lihat gambar contoh
untuk mengatur perataan vertikal: top, middle atau bottom.
untuk menentukan lebar kolom dalam pixel atau percen.

Contoh (save dengan nama tabel1.html ):
<html>
<head> <title>Pembuatan Table</title>
</head>
<body>
<font face=arial size=2 color=tahoma">

<table>
<tr>
<td>Ini contoh tabel sederhana tanpa border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>Ini contoh tabel sederhana dengan border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Wahyu</td>
<td>Bekasi</td>
</tr>
<tr>
<td>2.</td>
<td>Lesmono</td>
<td>Kranji</td>
</tr>
</table>
</body>
</html>

Menambahkan Judul Tabel

Judul dalam tabel dibedakan menjadi tiga macam, yaitu
judul tabel,
judul kolom table dan


33

judul baris tabel.
Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada dibawah
atau diatas tabel. Secara default caption diletakkan dibagian atas suatu tabel, tetapi juga dapat
diletakkan dibawah suatu tabel dengan menambahkan atribut ALIGN=BOTTOM pada elemen
caption tersebut.
Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE HEADER
<TH>.
Judul kolom terletak pada sel disebelah kiri atau kolom pertama suatu tabel, sedangkan judul
baris terletak pada baris pertama suatu tabel. Judul baris atau judul kolom akan tercetak tebal.
Contoh:
<html>
<head> <title>Pembuatan Table</title>
</head>
<body>

<font face=arial size=2 color=maroon>
<table border=1>
<caption align=top><b><u>Daftar Alamat</u></b></caption>

<p>
<table border=1>
<tr>
<td>Ini contoh tabel sederhana dengan border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Wahyu</td>
<td>Bekasi</td>
</tr>
<tr>
<td>2.</td>
<td>Lesmono</td>
<td>Kranji</td>
</tr>
</table>
</body>
</html>

Mengatur Lebar dan Tinggi Suatu Tabel

Lebar tabel diatur dengan menggunakan atribut WIDTH dan untuk mengatur tinggi table
dengan atribut HEIGHT.
Jika atribut WIDTH dan HEIGHT digunakan dalam elemen TABLE nilainya menunjukkan
lebar dan tinggi tabel terhadap BROWSER sedangkan


34

jika digunakan pada elemen TH dan TD, nilainya merupakan lebar dan tinggi dari suatu
tabel.
Nilai atribut mengunakan ukuran % (max 100%) dan ukuran pixel.

Contoh:
<html>
<head> <title>Mengatur Lebar dan Tinggi Tabel</title>
</head>
<body>
<font face=arial size=2 color=tahoma>
<table border=1 width=100%>
<tr>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td height=50>Wahyu</td>
<td height=50>Bekasi</td>
</tr>
</table>
</body>
</html>

Perataan dalam Tabel
Perataan dalam tabel dikenal dua macam, yaitu perataan secara horizontal dengan
atribut ALIGN dan perataan vertikal dengan atribut VALIGN, serta untuk membuat suatu tabel
posisinya menjadi ditengah-tengah layar browser.
Contoh:
<html>
</head>
<body>
<tr>
<th width=40>No.</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td height=50 align="center">Wahyu</td>


35

</tr>
</table>
</body>
</html>

Membuat Warna Pada Tabel
Didalam pewarnaan tabel kita dapat mengatur warna latar belakang dan teks serta warna
bordernya.
Untuk menentukan warna latar belakang pada suatu tabel, gunakan atribut BGCOLOR

sedangkan untuk warna border dapat menggunakan beberapa atribut sbb:

Contoh:

<html>
</head>
<body>
<tr>
<th width=40 bgcolor="blue"> No.</td>
<th width=200 bgcolor="yellow">Alamat</td>
</tr>
<tr>
<td height=50 align="center"> Wahyu</td>
</tr>
</table>
</body>
</html>


36

Presentasi


waktu
dengan materi

60 Menit
Kegiatan Inti
Eksplorasi
Berbagai jenis format tabel dan hasilnya terhadap
halaman web
Desain layout dalam format tabel untuk suatu halaman
web
Questioning/menanya
tentang tanyangan atau paparan berbagai
halaman web
web
Mengeksplorasi
berbagai
600 Menit


37

halaman web
web
di kelas

Elaborasi
tentang berbagai jenis format tabel dan hasilnya terhadap
halaman web
tentang desain layout dalam format tabel untuk suatu
halaman web
tentang penerapan menyimpulkan penerapan format tabel
pada halaman web
menyelesaikan masalah berbagai jenis format tabel dan
hasilnya terhadap halaman web
dalam menyelesaikan masalah desain layout dalam
format tabel untuk suatu halaman web
penerapan format tabel pada halaman web

Konfirmasi
Mengkomunikasikan
o Menyampaikan hasil tentang penerapan format tabel pada
halaman web, kelompok lain merespon atau menanggapi
dengan responsif dan santun
guru

Kegiatan Penutup
saja di pelajari
pembelajaran

60 Menit


38

H. Penilaian
a. Penilaian Proses
Teknik
Penilaian
Waktu
Penilaian
Instrumen
Penilaian
Keterangan

Lembar
Pengamatan
Hasil
penilaian
nomor 1 dan
2 untuk
masukan
pembinaan
dan informasi
bagi Guru
Agama dan
Guru PKn
2. Tanggung jawab
3. Peduli
4. Responsif
5. Santun

b. Penilaian Hasil
Kompetensi
Teknik
Penilaian
Bentuk
Penilaian
Instrumen
Memahami anatomi
tabel minimal
Tes
tertulis
Isian Buatlah anatomi tabel minimal

Memahami tabel
dengan spanning

Tes
tertulis
Isian Jelaskan membuat langkah tabel
dengan spanning

Memahami tabel di
dalam table

Tes
tertulis
Isian Jelaskan membuat tabel di dalam
table

Memahami desain
halaman web dengan
konsep tabel

Tes
tertulis
Isian Rancanglah desain halaman web
dengan konsep tabel

Soal Tulis
1. Jelaskan fungsi tag<tr> dan tag <td> pada tabel.
2. Jelaskan perbedaan perintah Caption dan TH pada tabel.
3. Uraikan cara membuat background warna pada tabel

Jawaban
1. <tr>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
- warna latar belakang dari baris.
- perataan vertikal: top, middle atau bottom.
<td>
Tag ini digunakan untuk membuat kolom baru pada tabel
2. Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada
dibawah atau diatas tabel. Secara default caption diletakkan dibagian atas suatu tabel,
tetapi juga dapat diletakkan


39

Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE
HEADER <TH>.
3. Didalam pewarnaan tabel kita dapat mengatur warna latar belakang dan teks serta
warna bordernya.
Untuk menentukan warna latar belakang pada suatu tabel, gunakan atribut BGCOLOR
Contoh: <th width=40 bgcolor="blue"> No.</td>

Tes Praktek
Tulislah html dibawah ini

Jawab
<html>
</head>
<body>
<tr>
<th width=40 bgcolor="blue"> No.</td>
<th width=200 bgcolor="yellow">Alamat</td>
</tr>
<tr>
<td height=50 align="center"> Wahyu</td>
</tr>
</table>
</body>
</html>


40

Pedoman Penskoran
Aspek Skor
SKOR MAKSIMAL

2.Test unjuk kerja


No.
Nama
Siswa
Aspek pengamatan
Jum
Skor
Nilai Ket
Kerjasama
Mengkom
unikasikan
pendapat

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang

Skor perolehan
Skor Maksimal (20)


41


No.
Nama
Siswa
Aspek Penilaian
Jum
Skor
Nilai Ket.
Kerjasama
Sistematika
Penyampaian
Gesture &
Penampilan

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


Isi Laporan
2. Mendeskripsikan mengenai penerapan
format tabel pada halaman web
6. Penemuan terbaru

Bentuk Tulisan
Spasi, Font)

Jumlah

Skor perolehan
Skor Maksimal (24)


42

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100


Alat : .
Bahan : .
Langkah Kerja : .
Gambar kerja : .
Analisa : .

Isi Laporan
dengan unjuk kerja
4. Analisa sesuai
terjadi

Bentuk Tulisan
7. Ketepatan waktu
penyelesaian tugas

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

Skor perolehan
Skor Maksimal (32)
Skor perolehan
Skor Maksimal (28)


43



Nilai Praktik
(NP)
Persiapan Proses
Sikap
Kerja
Hasil Waktu NK
1 2 3 4 5 6
Bobot (%)
10 40 10 30 10

Skor
Komponen

NK

I. Sumber Belajar
o Buku Panduan Guru

Guru Mata Pelajaran

Bambang Haryono, ST
NIP. 19780618 201101 1 006


44


Mata Pelajaran :..................................................................................................
Kelas/Semester :....................................................................................................
Tahun Ajaran :....................................................................................................

menyelesaikan tugas

No
.
Nama
Siswa
1.
2.
3.

4.

5.

...

Keterangan
1 = kurang
2 = sedang
3 = baik
4 = sangat baik


45

Nama Kelompok :.........................
Tanggal :
1. Isi
2. Organisasi
6. Kerapian
Total


46


Aspek/mater pokok : Multimedia pada Halaman Web

A. KompetensiInti

B. Kompetensi Dasar
sehari-hari.
berdiskusi
3.4 Memahami tampilan format multimedia pada halaman web
4.4 Menyajikan tampilan format multimedia pada halaman web

Memahami format tampilan gambar
Memahami format tampilan file audio


47

Memahami format tampilan file video dan animasi
Memahami format tampilan gambar dengan map

Selama dan setelah proses pembelajaran, siswa memahami format tampilan gambar
Selama dan setelah proses pembelajaran, siswa memahami format tampilan file audio
Selama dan setelah proses pembelajaran, siswa memahami format tampilan file video
dan animasi
Selama dan setelah proses pembelajaran, siswa memahami format tampilan gambar
dengan map

Format tampilan gambar
Format tampilan file audio
Format tampilan file video dan animasi
Format tampilan gambar dengan map

Element gambar ( Element img)
Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup
dan mempunyai
attribute yaitu:
align, alt (teks alternatif jika gambar tidak tampil),
border, height, width, hspace (jarak kosong posisi horizontal,
vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama filenya).

Sintaks:
<img align="left"|"right"|"top"|"middle"|"bottom"
alt="text"
border="pixel"
width="pixel"|"%"
height="pixel"|"%"
hspace="pixel"
vspace="pixel"
src="uri">
Latihan 1:
Tampilkan gambar image027.jpg dengan ukuran width dan height 160pixel dan border 8pixel :
Nama file: latihan5_1.html

<html>
<head>
<title>Latihan5-1</title>
</head>
<body>
<font color=blue font face=arial><h1>kenangan
waktu dijtm park</h1></font> <br>
<img width="160" height="160" src="image027.jpg">
</body>
</html>


48

Tugas tambahan:
Letakkan gambar tersebut ke kanan, setelah itu ke kiri.
Latihan 2:
Dari Latihan 1 ubah gambar menjadi yang terdapat dalam direktori /images dengan nama
image050.jpg
Nama file: latihan5_2.html
<html>
<head>
</head>
<body>
<img width="160" height="160" src="./images/image050.jpg">
</body>
</html>

Presentasi


waktu
dengan materi

60 Menit
Kegiatan Inti
Eksplorasi
berbagai tampilan format multimedia pada halaman web
Questioning/menanya
tentang tanyangan atau paparan berbagai berbagai
tampilan format multimedia pada halaman web
Mengeksplorasi
berbagai
600 Menit


49

Format tampilan gambar
Format tampilan file audio
Format tampilan file video dan animasi
Format tampilan gambar dengan map
di kelas

Elaborasi
tentang berbagai berbagai tampilan format multimedia
pada halaman web
menyelesaikan masalah berbagai jenis format tampilan
gambar
file audio
file video dan animasi
gambar dengan map
berbagai tampilan format multimedia pada halaman web

Konfirmasi
Mengkomunikasikan
o Menyampaikan hasil tentang penerapan berbagai
tampilan format multimedia pada halaman web ,
kelompok lain merespon atau menanggapi dengan
responsif dan santun
guru

Kegiatan Penutup
saja di pelajari
pembelajaran

60 Menit


50

H. Penilaian
a. Penilaian Proses
Teknik
Penilaian
Waktu
Penilaian
Instrumen
Penilaian
Keterangan

Lembar
Pengamatan
Hasil
penilaian
nomor 1 dan
2 untuk
masukan
pembinaan
dan informasi
bagi Guru
Agama dan
Guru PKn
2. Tanggung jawab
3. Peduli
4. Responsif
5. Santun

b. Penilaian Hasil
Kompetensi
Teknik
Penilaian
Bentuk
Penilaian
Instrumen
Memahami format
tampilan gambar

Tes
tertulis
Isian Jelaskan langkah-langkah format
tampilan gambar

Memahami format
tampilan file audio

Tes
tertulis
tampilan file audio

Memahami format
tampilan file video
dan animasi

Tes
tertulis
tampilan file video dan animasi

Memahami format
tampilan gambar
dengan map

Tes
tertulis
tampilan gambar dengan map

Soal Tulis
1. Apa yang kamu ketahui tentang tag < img src=image1>
2. Sebutkan 3 atribut elemen image
3. Tuliskan sintag penulisan image pada html

Jawaban
1. Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag
penutup dan mempunyai
2. attribute yaitu:
align, alt (teks alternatif jika gambar tidak tampil),
border, height, width, hspace (jarak kosong posisi horizontal,
vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama
filenya).
3. Sintaks:
<img align="left"|"right"|"top"|"middle"|"bottom"


51

alt="text"
border="pixel"
width="pixel"|"%"
height="pixel"|"%"
hspace="pixel"
vspace="pixel"
src="uri">
Tes Praktek

Jawaban

<html>
<head>
<title>
latihan gambar
</title>
</head>

<body>

<p align="right">
<font color="blue"><font size="28">Buat program berikut dlm waktu 1 jp </font></p>
<hr>

<center>
<font color="red"><h1>ULANGAN PRAKTEK MULTIMEDIA 2</h1>
<font color="green"><h2>ULANGAN PRAKTEK MULTIMEDIA 2</h2>
<font color="yellow"><h3>ULANGAN PRAKTEK MULTIMEDIA 2</h3>
<font color="red"><h4>ULANGAN PRAKTEK MULTIMEDIA 2</h4>
<br>

<p align="left">
<img src="DSC_1626.jpg" width="300" height="200">
<img src="DSCN1692.JPG" width="300" height="200"> </p>
<p align="left">nama file gambar 1.jpg ********************************nama file gambar 2.jpg

</body>
</html>


52

Pedoman Penskoran
Aspek Skor
SKOR MAKSIMAL

2.Test unjuk kerja


No.
Nama
Siswa
Aspek pengamatan
Jum
Skor
Nilai Ket
Kerjasama
Mengkom
unikasikan
pendapat

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang

Skor perolehan
Skor Maksimal (20)


53


No.
Nama
Siswa
Aspek Penilaian
Jum
Skor
Nilai Ket.
Kerjasama
Sistematika
Penyampaian
Gesture &
Penampilan

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


Isi Laporan
berbagai tampilan format multimedia
pada halaman web
3. Struktur/logika penulisan disusun
dengan jelas sesuai metode yang
dipakai
6. Penemuan terbaru

Bentuk Tulisan
Spasi, Font)

Jumlah

Skor perolehan
Skor Maksimal (24)


54

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100


Alat : .
Bahan : .
Langkah Kerja : .
Gambar kerja : .
Analisa : .

Isi Laporan
unjuk kerja
4. Analisa sesuai
terjadi

Bentuk Tulisan
tugas

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

Skor perolehan
Skor Maksimal (32)
Skor perolehan
Skor Maksimal (28)


55



Nilai Praktik
(NP)
Persiapan Proses
Sikap
Kerja
Hasil Waktu NK
1 2 3 4 5 6
Bobot (%)
10 40 10 30 10

Skor
Komponen

NK

I. Sumber Belajar
o Buku Panduan Guru

Guru Mata Pelajaran

Bambang Haryono, ST
NIP. 19780618 201101 1 006


56



Mata Pelajaran :..................................................................................................
Kelas/Semester :....................................................................................................
Tahun Ajaran :....................................................................................................

menyelesaikan tugas

No
.
Nama
Siswa
1.
2.
3.

4.

5.

...

Keterangan
1 = kurang
2 = sedang
3 = baik
4 = sangat baik


57

Nama Kelompok :.........................
Tanggal :
1. Isi
2. Organisasi
6. Kerapian
Total


58


Aspek/mater pokok : Hyperlink Halaman Web

A. Kompetensi Inti
B. Kompetensi Dasar
sehari-hari.
berdiskusi
3.5 Memahami format kaitan pada halaman web
4.5 Menyajikan format kaitan pada halaman web

Memahami anatomi link
Memahami format link antar isi pada satu halaman web
Memahami format link antar halaman web untuk membentuk sitemap
Memahami format target link, email dan telepon


59

Selama dan setelah proses pembelajaran, siswa memahami anatomi link
Selama dan setelah proses pembelajaran, siswa memahami format link antar isi pada
satu halaman web
Selama dan setelah proses pembelajaran, siswa memahami format link antar halaman
web untuk membentuk sitemap
Selama dan setelah proses pembelajaran, siswa memahami format target link, email
dan telepon

Anatomi link
Format link antar isi pada satu halaman web
Format link antar halaman web untuk membentuk sitemap
Format target link, email dan telepon

Menggunakan Link
Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika Link
diklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan Anchor, yaitu tag
<a>.
Tag <a> mempunyai dua atribut, yaitu href dan name.
Atribut href digunakan jika sebuah anchor akan digunakan sebagai link,
sedangkan atribut name digunakan jika anchor akan digunakan sebagai tujuan.

Link ke dokumen lain
Untuk membuat link/penghubung dengan target ke dokumen/halaman yang berbeda, anda
harus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu, baik pada
direktori yang sama atau berbeda dengan dokumen yang aktif sekarang. Untuk mencoba kita
akan membuat 3 file yang saling berhubungan. Sebelumnya supaya file-file yang dibuat terlihat
rapi kita buat folder tabel terlebih.
dahulu jadi nanti file link yang kita buat tersimpan di dalam folder tabel.

Contoh link-utama.html
<html>
<head> <title> Halaman Utama </title>
</head>
<body>
<h2> Ini adalah halaman utama.</h2>
<ul>
<li><a href=link-utama.html>Klik, ke halaman utama.</a></li>
<li><a href=link-satu.html>Klik, ke halaman satu.</a></li>
<ul>
</body>
</html>

Contoh link.hal1.html
<html>
<head> <title> Halaman Satu </title>
</head>
<body>
<h2> Ini adalah halaman utama.</h2>
<ul>


60

<li><a href=link-utama.html>Klik, ke halaman utama.</a></li>
<li><a href=link-satu.html>Klik, ke halaman satu.</a></li>
<ul>
</body>
</html>

Link ke bagian tertentu dalam dokumen yang sama
Untuk membuat link ke bagian tertentu dalam dokumen yang sama, harus diberikan nama
anchor. Perbedaan dengan link yang berbeda dokumen adalah tujuan/target link, jika dalam
dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang
dituju adalah nama file/dokumen yang bersangkutan. Untuk memberi nama anchor, atribut yang
dipakai adalah NAME pada tag anchor <A> dan untuk membuat link cukup memberikan tanda #
setelah nama file dalam URL. Misal: <a href=#php> Bab 1 </a> atau dapat ditulis lengkap: <a
href=belajar_php.html#php> Bab 1 </a> dan untuk nama anchornya: <a name=php>Ada apa
dengan PHP?</a>

Link ke alamat URL atau Website

Contoh: buatlah link sehingga hasil nya sbb:
Untuk membuat link ke alamat URL adalah dengan menambahkan: http://nama_URL.
Contoh:
<a href=http://www.dikti.org>www.dikti.org</a>
<a href=http://www.smkn1-kbks.com>www.smkn1-kbks.com</a>

Jawab:
<html>
<head>
</head>
<body>
Link:
<ol>
<li><a href="http://www.yahoo.com">yahoo</a></li>
<li><a href="http://www.google.com">google</a></li>
<li><a href="http://www.tienythea.wordpress.com">materi</a></li>
</ol>
</body>
</html>

Link ke Alamat Email
Link email adalah membuat link pada teks, jika teks tersebut diklik maka akan menampilkan
program pengiriman email yang terdapat pada komputer yang dipakai untuk mengakses data
atau teks tersebut secara otomatis. Untuk membuat link ke alamat email hanya menambahkan
atribut mailto:alamat_email ke dalam tag <a href> Misalnya: <a href="mailto:smkn1-
kbks.yahoo.com">Kirim email</a>


61

Link File yang akan didownload
Link file dalam hal ini adalah apabila dikik pada teks tersebut maka proses selanjutnya adalah
mendownload file yang tercantum pada dokumen tersebut. Format penulisannya adalah <a
href=nama_file> Misal: <a href=antivirus.zip>Download anti virus</a> <a
href=latihan.doc>Download latihan Html</a> <a href=mysql.exe>Download MYSQL</a>

Presentasi


waktu
dengan materi
60 Menit
Kegiatan Inti
Eksplorasi
berbagai tampilan jenis link dan hasilnya terhadap
halaman web
Questioning/menanya
tentang tanyangan atau paparan berbagai tampilan jenis
link dan hasilnya terhadap halaman web
Mengeksplorasi
berbagai
Anatomi link
Format link antar isi pada satu halaman web
Format link antar halaman web untuk membentuk
sitemap
Format target link, email dan telepon
600 Menit


62

di kelas

Elaborasi
tentang berbagai jenis link dan hasilnya terhadap
halaman web
menyelesaikan masalah berbagai anatomi link
menyelesaikan masalah berbagai format link antar isi
pada satu halaman web
menyelesaikan masalah berbagai jenis format link antar
halaman web untuk membentuk sitemap
menyelesaikan masalah berbagai jenis format target link,
email dan telepon
berbagai jenis link dan hasilnya terhadap halaman web

Konfirmasi
Mengkomunikasikan
o Menyampaikan hasil tentang penerapan berbagai jenis
link dan hasilnya terhadap halaman web, kelompok lain
merespon atau menanggapi dengan responsif dan santun
guru

Kegiatan Penutup
saja di pelajari
pembelajaran

60 Menit


63

H. Penilaian
a. Penilaian Proses
Teknik
Penilaian
Waktu
Penilaian
Instrumen
Penilaian
Keterangan

Lembar
Pengamatan
Hasil
penilaian
nomor 1 dan
2 untuk
masukan
pembinaan
dan informasi
bagi Guru
Agama dan
Guru PKn
2. Tanggung jawab
3. Peduli
4. Responsif
5. Santun

b. Penilaian Hasil
Kompetensi
Teknik
Penilaian
Bentuk
Penilaian
Instrumen
Memahami anatomi
link
Tes
tertulis
Isian Jelaskan tentang anatomi link
Memahami format
link antar isi pada
satu halaman web
Tes
tertulis
Isian Jelaskan langkah-langkah format link
antar isi pada satu halaman web
Memahami format
link antar halaman
web untuk
membentuk sitemap
Tes
tertulis
Isian Jelaskan langkah-langkah format link
antar halaman web untuk membentuk
sitemap
Memahami format
target link, email dan
telepon

Tes
tertulis
target link, email dan telepon


64

Tes Praktek

Jawaban
<html>
<head>
</head>
<body>
Link internal dan anchor adalah link yang menunjuk ketempat yang ada
dalam dokument ini.<br>
<a href="#akhir">kebagian akhir</a>
<a name="pertama"></a>

<p>Ini adalah teks bagian pertama dalam dokumen ini.<br>
Ini adalah teks bagian pertama dalam dokumen ini.<br>
Ini adalah teks bagian pertama dalam dokumen ini. </p>

<p>Ini adalah teks bagian kedua dalam dokumen ini.<br>
Ini adalah teks bagian kedua dalam dokumen ini.<br>


65

Ini adalah teks bagian kedua dalam dokumen ini.</p>

<p>Ini adalah teks bagian ketiga dalam dokumen ini.<br>
Ini adalah teks bagian ketiga dalam dokumen ini.<br>
Ini adalah teks bagian ketiga dalam dokumen ini.</p>
<p>Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.<br>
Ini adalah teks bagian keempat dalam dokumen ini.</p>
<p>Ini adalah teks bagian kelima dalam dokumen ini.<br>
Ini adalah teks bagian kelima dalam dokumen ini.<br>
Ini adalah teks bagian kelima dalam dokumen ini.</p>

<a name="akhir"></a>
<p>Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.</p>

<a href="#pertama">kebagian pertama</a>
</body>
</html>

Pedoman Penskoran
Aspek Skor
SKOR MAKSIMAL


66

2.Test unjuk kerja


No.
Nama
Siswa
Aspek pengamatan
Jum
Skor
Nilai Ket
Kerjasama
Mengkom
unikasikan
pendapat

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


No.
Nama
Siswa
Aspek Penilaian
Jum
Skor
Nilai Ket.
Kerjasama
Sistematika
Penyampaian
Gesture &
Penampilan

Skor perolehan
Skor Maksimal (20)


67

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


Isi Laporan
penerapan berbagai jenis
link dan hasilnya terhadap
halaman we
3. Struktur/logika penulisan
disusun dengan jelas
sesuai metode yang dipakai
4. Bahasa yang digunakan
sesuai EYD
6. Penemuan terbaru

Bentuk Tulisan
ditetapkan (Kertas, Spasi,
Font)
8. Kerapihan ketikan sesuai
dengan SOP

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

Skor perolehan
Skor Maksimal (24)
Skor perolehan
Skor Maksimal (32)


68


Alat : .
Bahan : .
Langkah Kerja : .
Gambar kerja : .
Analisa : .

Isi Laporan
unjuk kerja
4. Analisa sesuai
terjadi

Bentuk Tulisan
tugas

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100



Nilai Praktik
(NP)
Persiapan Proses
Sikap
Kerja
Hasil Waktu NK
1 2 3 4 5 6
Bobot (%)
10 40 10 30 10

Skor
Komponen

NK

Skor perolehan
Skor Maksimal (28)


69

I. Sumber Belajar
o Buku Panduan Guru

Guru Mata Pelajaran

Bambang Haryono, ST
NIP. 19780618 201101 1 006


70



Mata Pelajaran :..................................................................................................
Kelas/Semester :....................................................................................................
Tahun Ajaran :....................................................................................................

menyelesaikan tugas

No
.
Nama
Siswa
1.
2.
3.

4.

5.

...

Keterangan
1 = kurang
2 = sedang
3 = baik
4 = sangat baik


71

Nama Kelompok :.........................
Tanggal :
1. Isi
2. Organisasi
6. Kerapian
Total


72


Aspek/mater pokok : Formulir Halaman Web

A. KompetensiInti
B. Kompetensi Dasar
sehari-hari.
berdiskusi
3.6 Memahami format formulir pada halaman web
4.6 Menyajikan formulir pada halaman web

Memahami anatomi dan cara kerja form
Memahami format formulir


73

Memahami komponen entri teks (input teks password, dan input multiline) pada formulir
halaman web
Memahami komponen entri pilihan (input file, radio, checkbox, select dan datalist) pada
formulir halaman web

Selama dan setelah proses pembelajaran, siswa memahami anatomi dan cara kerja
form
Selama dan setelah proses pembelajaran, siswa memahami format formulir
Selama dan setelah proses pembelajaran, siswa memahami komponen entri teks (input
teks password, dan input multiline) pada formulir halaman web
Selama dan setelah proses pembelajaran, siswa memahami komponen entri pilihan
(input file, radio, checkbox, select dan datalist) pada formulir halaman web

Anatomi dan cara kerja form
Format formulir
Komponen entri teks (input teks password, dan input multiline) pada formulir halaman
web
Komponen entri pilihan (input file, radio, checkbox, select dan datalist) pada formulir
halaman web

Presentasi


waktu
dengan materi

60 Menit


74

Kegiatan Inti
Eksplorasi
berbagai jenis format formulir dan tampilannya terhadap
halaman web
Questioning/menanya
tentang berbagai tampilan format formulir dan komponen-
komponennya pada halaman web
Mengeksplorasi
berbagai
Jenis format formulir
Komponen-komponen pada formulir
di kelas

Elaborasi
tentang berbagai tampilan format formulir dan
komponen-komponennya pada halaman web
menyelesaikan masalah berbagai Jenis format formulir
menyelesaikan masalah berbagai Komponen-komponen
pada formulir
berbagai jenis tampilan format formulir dan komponen-
komponennya pada halaman web

Konfirmasi
Mengkomunikasikan
tampilan format formulir dan komponen-komponennya
pada halaman web kelompok lain merespon atau
menanggapi dengan responsif dan santun
guru

600 Menit
Kegiatan Penutup
60 Menit


75

saja di pelajari
pembelajaran

H. Penilaian
a. Penilaian Proses
Teknik
Penilaian
Waktu
Penilaian
Instrumen
Penilaian
Keterangan

Lembar
Pengamatan
Hasil
penilaian
nomor 1 dan
2 untuk
masukan
pembinaan
dan informasi
bagi Guru
Agama dan
Guru PKn
2. Tanggung jawab
3. Peduli
4. Responsif
5. Santun

b. Penilaian Hasil
Kompetensi
Teknik
Penilaian
Bentuk
Penilaian
Instrumen
Memahami anatomi
dan cara kerja form

Tes
tertulis
Isian Jelaskan anatomi dan cara kerja form

Memahami format
formulir

Tes
tertulis
Isian Jelaskan langkah-langkah memformat
formulir

Memahami
komponen entri teks
(input teks
password, dan input
multiline) pada
formulir halaman
web

Tes
tertulis
Isian Sebutkan komponen entri teks (input
teks password, dan input multiline)
pada formulir halaman web
Memahami
komponen entri
pilihan (input file,
radio, checkbox,
select dan datalist)
pada formulir
halaman web

Tes
tertulis
Isian Sebutkan komponen entri pilihan
(input file, radio, checkbox, select dan
datalist) pada formulir halaman web


76

Pedoman Penskoran
Aspek Skor
SKOR MAKSIMAL

2.Test unjuk kerja


No.
Nama
Siswa
Aspek pengamatan
Jum
Skor
Nilai Ket
Kerjasama
Mengkomu
nikasikan
pendapat

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang

Skor perolehan
Skor Maksimal (20)


77


No.
Nama
Siswa
Aspek Penilaian
Jum
Skor
Nilai Ket.
Kerjasama
Sistematika
Penyampaian
Gesture &
Penampilan

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang

Skor perolehan
Skor Maksimal (24)


78


Isi Laporan
penerapan format formulir
dan komponen-
komponennya pada
halaman web
sesuai EYD
6. Penemuan terbaru

Bentuk Tulisan
Font)
dengan SOP

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

Skor perolehan
Skor Maksimal (32)


79


Alat : .
Bahan : .
Langkah Kerja : .
Gambar kerja : .
Analisa : .

Isi Laporan
unjuk kerja
4. Analisa sesuai
terjadi

Bentuk Tulisan
tugas

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100



Nilai Praktik
(NP)
Persiapan Proses
Sikap
Kerja
Hasil Waktu NK
1 2 3 4 5 6
Bobot (%)
10 40 10 30 10

Skor
Komponen

NK

Skor perolehan
Skor Maksimal (28)


80

I. Sumber Belajar
o Buku Panduan Guru

Guru Mata Pelajaran

Bambang Haryono, ST
NIP. 19780618 201101 1 006


81



Mata Pelajaran :..................................................................................................
Kelas/Semester :....................................................................................................
Tahun Ajaran :....................................................................................................

menyelesaikan tugas

No
.
Nama
Siswa
1.
2.
3.

4.

5.

...

Keterangan
1 = kurang
2 = sedang
3 = baik
4 = sangat baik


82

Nama Kelompok :.........................
Tanggal :
1. Isi
2. Organisasi
6. Kerapian
Total


83


Aspek/mater pokok : Style Halaman Web

A. KompetensiInti
B. Kompetensi Dasar
sehari-hari.
berdiskusi
3.7 Memahami style pada halaman web
4.7 Menyajikan style tertentu pada halaman web

Memahami cara kerja dan anatomi cascading style sheet
Memahami style pada teks
Memahami style pada multimedia


84

Memahami style pada tabel
Memahami style pada formulir

Selama dan setelah proses pembelajaran, siswa memahami cara kerja dan anatomi
cascading style sheet
Selama dan setelah proses pembelajaran, siswa memahami style pada teks
Selama dan setelah proses pembelajaran, siswa memahami style pada multimedia
Selama dan setelah proses pembelajaran, siswa memahami style pada tabel
Selama dan setelah proses pembelajaran, siswa memahami style pada formulir

Cara kerja dan anatomi Cascading Style Sheet
Style pada teks
Style pada multimedia
Style pada tabel
Style pada formulir

Presentasi


waktu
dengan materi
75 Menit
Kegiatan Inti
Eksplorasi
berbagai jenis jenis style dan tampilannya pada halaman
web
Questioning/menanya
750 Menit


85

tentang berbagai tampilan style pada halaman web

Mengeksplorasi
berbagai
Jenis style
Penerapan style yang sesuai dari suatu halaman web
di kelas

Elaborasi
tentang
Hubungan antara style dengan halaman web yang
dihasilkan
Kemiripan hasil penerapan style dengan halaman web
aslinya
menyelesaikan masalah penerapan style dengan halaman
web aslinya
penerapan style pada halaman web

Konfirmasi
Mengkomunikasikan
tampilan penerapan style pada halaman web, kelompok
lain merespon atau menanggapi dengan responsif dan
santun
guru

Kegiatan Penutup
saja di pelajari
pembelajaran

750 Menit


86

H. Penilaian
a. Penilaian Proses
Teknik
Penilaian
Waktu
Penilaian
Instrumen
Penilaian
Keterangan

Lembar
Pengamatan
Hasil
penilaian
nomor 1 dan
2 untuk
masukan
pembinaan
dan informasi
bagi Guru
Agama dan
Guru PKn
2. Tanggung jawab
3. Peduli
4. Responsif
5. Santun

b. Penilaian Hasil
Kompetensi
Teknik
Penilaian
Bentuk
Penilaian
Instrumen
Memahami cara
kerja dan anatomi
cascading style
sheet
Tes
tertulis
Isian Jelaskan cara kerja dan anatomi
cascading style sheet
Memahami style
pada teks

Tes
tertulis
Isian Jelaskan mengenai style pada teks

Memahami style
pada multimedia

Tes
tertulis
Isian Jelaskan mengenai style pada
multimedia

Memahami style
pada tabel

Tes
tertulis
Isian Jelaskan mengenai style pada tabel

Memahami style
pada formulir

Jelaskan mengenai style pada
formulir

Soal;
Kunci jawaban
Pedoman Penskoran
Aspek Skor
Siswa menjawab benar tetapi tidak lengkap 2
SKOR MAKSIMAL


87

2.Test unjuk kerja


No.
Nama
Siswa
Aspek pengamatan
Jum
Skor
Nilai Ket
Kerjasama
Mengkomu
nikasikan
pendapat

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


No.
Nama
Siswa
Aspek Penilaian
Jum
Skor
Nilai Ket.
Kerjasama
Sistematika
Penyampaian
Gesture &
Penampilan

Skor perolehan
Skor Maksimal (20)


88

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


Isi Laporan
penerapan style pada
halaman web
sesuai EYD
6. Penemuan terbaru

Bentuk Tulisan
Font)
dengan SOP

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

Skor perolehan
Skor Maksimal (24)
Skor perolehan
Skor Maksimal (32)


89


Alat : .
Bahan : .
Langkah Kerja : .
Gambar kerja : .
Analisa : .

Isi Laporan
unjuk kerja
4. Analisa sesuai
terjadi

Bentuk Tulisan
tugas

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100



Nilai Praktik
(NP)
Persiapan Proses
Sikap
Kerja
Hasil Waktu NK
1 2 3 4 5 6
Bobot (%)
10 40 10 30 10

Skor
Komponen

NK

Skor perolehan
Skor Maksimal (28)


90

I. Sumber Belajar
o Buku Panduan Guru

Guru Mata Pelajaran

Bambang Haryono, ST
NIP. 19780618 201101 1 006


91



Mata Pelajaran :..................................................................................................
Kelas/Semester :....................................................................................................
Tahun Ajaran :....................................................................................................

menyelesaikan tugas

No
.
Nama
Siswa
1.
2.
3.

4.

5.

...

Keterangan
1 = kurang
2 = sedang
3 = baik
4 = sangat baik


92

Nama Kelompok :.........................
Tanggal :
1. Isi
2. Organisasi
6. Kerapian
Total


93


Aspek/mater pokok : Teknik Pemrograman Halaman Web

A. KompetensiInti

B. Kompetensi Dasar
sehari-hari.
berdiskusi
3.8 Memahami teknik pemrograman pada halaman web
4.8 Menyajikan teknik-teknik dalam pemrograman web

Memahami anatomi dan cara kerja kode javascript
Memahami dasar pemrograman client (variabel, tipe data, operator)


94

Memahami array dimensi 1 dan multidimensi
Memahami struktur kontrol percabangan pada program client
Memahami struktur kontrol perulangan pada program client
Memahami fungsi bawaan dan buatan user pada program client

Selama dan setelah proses pembelajaran, siswa memahami anatomi dan cara kerja
kode javascript
Selama dan setelah proses pembelajaran, siswa memahami dasar pemrograman client
(variabel, tipe data, operator)
Selama dan setelah proses pembelajaran, siswa memahami array dimensi 1 dan
multidimensi
Selama dan setelah proses pembelajaran, siswa memahami struktur kontrol
percabangan pada program client
Selama dan setelah proses pembelajaran, siswa memahami struktur kontrol perulangan
pada program client
Selama dan setelah proses pembelajaran, siswa memahami fungsi bawaan dan buatan
user pada program client

Anatomi dan cara kerja kode javascript
Dasar pemrograman client (variabel, tipe data, operator)
Array dimensi 1 dan multidimensi
Struktur kontrol percabangan pada program client
Struktur kontrol perulangan pada program client
Fungsi bawaan dan buatan user pada program client

Presentasi


waktu
dengan materi
75 Menit


95

Kegiatan Inti
Eksplorasi
berbagai
Teknologi pemrograman client pada halaman web
Teknik dasar pemrograman client pada halaman web
Questioning/menanya
tentang berbagai teknik dasar pemrograman client pada
halaman web
Mengeksplorasi
berbagai eksperimen pelbagai teknik dasar pemrograman
client pada halaman web
di kelas

Elaborasi
o Dengan diskusi siswa menganalisa hal-hal terpenting
tentang hubungan antara program client dengan halaman
web
tentang penerapan pemrograman pada halaman web
menyelesaikan masalah tentang penerapan pemrograman
pada halaman web
penerapan pemrograman pada halaman web

Konfirmasi
Mengkomunikasikan
tampilan penerapan pemrograman pada halaman web,
kelompok lain merespon atau menanggapi dengan
responsif dan santun
guru
750 Menit
Kegiatan Penutup
75 Menit


96

saja di pelajari
pembelajaran

H. Penilaian
a. Penilaian Proses
Teknik
Penilaian
Waktu
Penilaian
Instrumen
Penilaian
Keterangan

Lembar
Pengamatan
Hasil
penilaian
nomor 1 dan
2 untuk
masukan
pembinaan
dan informasi
bagi Guru
Agama dan
Guru PKn
2. Tanggung jawab
3. Peduli
4. Responsif
5. Santun

b. Penilaian Hasil
Kompetensi
Teknik
Penilaian
Bentuk
Penilaian
Instrumen
Memahami anatomi
dan cara kerja kode
javascript

Tes
tertulis
Isian Jelaskan mengenai anatomi dan cara
kerja kode javascript

Memahami dasar
pemrograman client
(variabel, tipe data,
operator)

Tes
tertulis
Isian Jelaskan mengenai dasar
pemrograman client (variabel, tipe
data, operator)

Memahami array
dimensi 1 dan
multidimensi

Tes
tertulis
Isian Jelaskan mengenai array dimensi 1
dan multidimensi

Memahami struktur
kontrol percabangan
pada program client

Tes
tertulis
Isian Jelaskan mengenai struktur kontrol
percabangan pada program client

Memahami struktur
kontrol perulangan
pada program client

Tes
tertulis
Isian Jelaskan mengenai struktur kontrol
perulangan pada program client

Memahami fungsi
bawaan dan buatan
user pada program
client

Tes
tertulis
Isian Jelaskan mengenai fungsi bawaan
dan buatan user pada program client


97

Pedoman Penskoran
Aspek Skor
SKOR MAKSIMAL

2.Test unjuk kerja


No.
Nama
Siswa
Aspek pengamatan
Jum
Skor
Nilai Ket
Kerjasama
Mengkomu
nikasikan
pendapat

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang

Skor perolehan
Skor Maksimal (20)


98


No.
Nama
Siswa
Aspek Penilaian
Jum
Skor
Nilai Ket.
Kerjasama
Sistematika
Penyampaian
Gesture &
Penampilan

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


Isi Laporan
pemrograman pada halaman web
6. Penemuan terbaru

Bentuk Tulisan
Spasi, Font)

Jumlah

Skor perolehan
Skor Maksimal (24)


99

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100


Alat : .
Bahan : .
Langkah Kerja : .
Gambar kerja : .
Analisa : .

Isi Laporan
dengan unjuk kerja
4. Analisa sesuai
terjadi

Bentuk Tulisan
7. Ketepatan waktu
penyelesaian tugas

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

Skor perolehan
Skor Maksimal (32)
Skor perolehan
Skor Maksimal (28)


100



Nilai Praktik
(NP)
Persiapan Proses
Sikap
Kerja
Hasil Waktu NK
1 2 3 4 5 6
Bobot (%)
10 40 10 30 10

Skor
Komponen

NK

I. Sumber Belajar
o Buku Panduan Guru

Guru Mata Pelajaran

Bambang Haryono, ST
NIP. 19780618 201101 1 006


101



Mata Pelajaran :..................................................................................................
Kelas/Semester :....................................................................................................
Tahun Ajaran :....................................................................................................

menyelesaikan tugas

No
.
Nama
Siswa
1.
2.
3.

4.

5.

...

Keterangan
1 = kurang
2 = sedang
3 = baik
4 = sangat baik


102

Nama Kelompok :.........................
Tanggal :
1. Isi
2. Organisasi
6. Kerapian
Total


103


Aspek/mater pokok : Pengolahan Input User

A. KompetensiInti
B. Kompetensi Dasar
sehari-hari.
berdiskusi
3.9 Memahami pengelolaan halaman web menggunakan kode program
4.9 Menyajikan hasil pengelolaan halaman web menggunakan kode program

Memahami akses komponen form (proses dan validasi input)
Memahami navigasi halaman melalui kode program client
Memahami perubahan format style melalui kode progarm client


104

Selama dan setelah proses pembelajaran, siswa memahami akses komponen form
(proses dan validasi input)
Selama dan setelah proses pembelajaran, siswa memahami navigasi halaman melalui
kode program client
Selama dan setelah proses pembelajaran, siswa memahami perubahan format style
melalui kode progarm client

Akses komponen form (proses dan validasi input)
Navigasi halaman melalui kode program client
Perubahan format style melalui kode progarm client

Presentasi


waktu
dengan materi

45 Menit
Kegiatan Inti
Eksplorasi
berbagai pengolahan input user pada formulir melalui
program
Questioning/menanya
tentang pengolahan input user pada formulir melalui
program
Mengeksplorasi
berbagai eksperimen pengolahan input user pada formulir
450 Menit


105

halaman web
di kelas

Elaborasi
o Dengan diskusi siswa menganalisa hal-hal terpenting
tentang pengolahan input user pada formulir disesuaikan
dengan output yang diharapkan
tentang penerapan pengolahan input user dalam
membuat aplikasi web
menyelesaikan masalah tentang penerapan pengolahan
input user dalam membuat aplikasi web
penerapan pengolahan input user dalam membuat
aplikasi web

Konfirmasi
Mengkomunikasikan
o Menyampaikan hasil tentang penerapan pengolahan input
user dalam membuat aplikasi web, kelompok lain
merespon atau menanggapi dengan responsif dan santun
guru

Kegiatan Penutup
saja di pelajari
pembelajaran

45 Menit


106

H. Penilaian
a. Penilaian Proses
Teknik
Penilaian
Waktu
Penilaian
Instrumen
Penilaian
Keterangan

Lembar
Pengamatan
Hasil
penilaian
nomor 1 dan
2 untuk
masukan
pembinaan
dan informasi
bagi Guru
Agama dan
Guru PKn
2. Tanggung jawab
3. Peduli
4. Responsif
5. Santun

b. Penilaian Hasil
Kompetensi
Teknik
Penilaian
Bentuk
Penilaian
Instrumen
Memahami akses
komponen form
(proses dan validasi
input)

Tes
tertulis
Isian Jelaskan mengenai akses komponen
form (proses dan validasi input)

Memahami navigasi
halaman melalui kode
program client

Tes
tertulis
Isian Jelaskan mengenai navigasi halaman
melalui kode program client

Memahami
perubahan format
style melalui kode
progarm client

Tes
tertulis
Isian Jelaskan car merubah format style
melalui kode progarm client

Pedoman Penskoran
Aspek Skor
SKOR MAKSIMAL


107

2.Test unjuk kerja


No.
Nama
Siswa
Aspek pengamatan
Jum
Skor
Nilai Ket
Kerjasama
Mengkomu
nikasikan
pendapat

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


No.
Nama
Siswa
Aspek Penilaian
Jum
Skor
Nilai Ket.
Kerjasama
Sistematika
Penyampaian
Gesture &
Penampilan

Skor perolehan
Skor Maksimal (20)


108

Keterangan Skor :
4 = Baik sekali
3 = Baik
2 = Cukup
1 = Kurang

Nilai = X 100

Kriteria Nilai
B = 80-89 : Baik
C = 75-79 : Cukup
D = < 75 : Kurang


Isi Laporan
2. Mendeskripsikan
mengenai penerapan
pengolahan input user
dalam membuat aplikasi
web
sesuai metode yang
dipakai
sesuai EYD
6. Penemuan terbaru

Bentuk Tulisan
ditetapkan (Kertas,
Spasi, Font)
dengan SOP

Jumlah

Skor perolehan
Skor Maksimal (24)


109

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100


Alat : .
Bahan : .
Langkah Kerja : .
Gambar kerja : .
Analisa : .

Isi Laporan
dengan unjuk kerja
4. Analisa sesuai
terjadi

Bentuk Tulisan
7. Ketepatan waktu
penyelesaian tugas

Jumlah

Sangat sesuai 4
Sesuai 3
Cukup 2
Kurang 1

Nilai = X 100

Skor perolehan
Skor Maksimal (32)
Skor perolehan
Skor Maksimal (28)


110



Nilai Praktik
(NP)
Persiapan Proses
Sikap
Kerja
Hasil Waktu NK
1 2 3 4 5 6
Bobot (%)
10 40 10 30 10

Skor
Komponen

NK

I. Sumber Belajar
o Buku Panduan Guru

Guru Mata Pelajaran

Bambang Haryono, ST
NIP. 19780618 201101 1 006


111



Mata Pelajaran :..................................................................................................
Kelas/Semester :....................................................................................................
Tahun Ajaran :....................................................................................................

menyelesaikan tugas

No
.
Nama
Siswa
1.
2.
3.

4.

5.

...

Keterangan
1 = kurang
2 = sedang
3 = baik
4 = sangat baik


112

Nama Kelompok :.........................
Tanggal :
1. Isi
2. Organisasi
6. Kerapian
Total

Bahasa

Selamat datang di Scribd!

RPP Pemograman Web

Diunggah oleh

Informasi Dokumen

Deskripsi:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Deskripsi:

Hak Cipta:

Format Tersedia

RPP Pemograman Web

Diunggah oleh

Deskripsi:

Hak Cipta:

Format Tersedia

Judul terkait

SMK NEGERI 1 TRENGGALEK

Dokumen Serupa dengan RPP Pemograman Web

Lainnya Dari edogawa27

Judul terkait

Beri Nilai

Bagikan