rpp web praktik mikro
TRANSCRIPT
-
8/12/2019 RPP Web Praktik Mikro
1/23
RENCANA PELAKSANAAN PEMBELAJARAN
(RPP)
TUGAS
Disusun untuk Memenuhi Matakuliah Perencanaan Pembelajaran
yang dibimbing oleh Puger Honggowiyono
Oleh :
Ika Rizki Choirunnisaa
110533406975
PTI 2011 OFF A
UNIVERSITAS NEGERI MALANG
FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI PENDIDIKAN TEKNIK INFORMATIKA
OKTOBER 2013
-
8/12/2019 RPP Web Praktik Mikro
2/23
2
RENCANA PELAKSANAAN PEMBELAJARAN
(RPP)
Satuan Pendidikan : SMKN 1 Kraksaan
Jurusan : Teknologi Komputer dan Jaringan
Mata pelajaran : Sistem Operasi Jaringan
Kelas/semester : XI / 1
Tema/Topik : Perangkat lunak sistem
Alokasi waktu : 30 menit
A.KOMPETENSI INTI1. Menghayati dan mengamalkan ajaran agama yang dianut
2.
Mengembangkan perilaku jujur, disiplin, tanggung jawab, peduli, santun, ramahlingkungan, gotong royong, kerjasama, cintai damai, responsif dan pro-aktif
3. Memahami pembuatan dokumen HTML
4. Mempraktikkan pembuatan dokumen HTML
B.KOMPETENSI DASARSetelah pembelajaran siswa diharapkan mampu:
1. Melakukan kegiatan ilmiah sebagai pengamalan ajaran agama yang dianut
2. Berperilaku ilmiah (jujur, disiplin, tanggung jawab, peduli, santun, ramah
lingkungan, gotong royong, kerjasama, cinta damai, responsif dan proaktif dalam
melakukan percobaan.
3. Memahami struktur dasar dokumen HTML
4. Mengidentifikasi perbedaan web dinamis dan web statis
C.INDIKATOR1. Berperilaku ilmiah (jujur, disiplin, tanggung jawab, peduli, santun, ramah
lingkungan, gotong royong, kerjasama, cinta damai, responsif dan proaktif dalam
melakukan percobaan.
2. Memahami struktur dasar dokumen HTML
3. Mampu membuat dokumen HTML yang baik dan benar
4. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi
-
8/12/2019 RPP Web Praktik Mikro
3/23
3
D.TUJUAN1. Siswa dapat berperilaku jujur, disiplin, tanggung jawab, ramah lingkungan, dan
bekerjasama dalam melaksanakan praktek pembelajaran.
2. Siswa dapat menjelaskan struktur dasar dokumen HTML
3.
Siswa dapat menjelaskan perbedaan web dinamis dan web statis4. Siswa mampu membuat dokumen HTML yang baik dan benar
5. Siswa mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi
E.MATERI1. Dasar-dasar HTML
2. Struktur Dokumen HTML
F. METODE PEMBELAJARANPendekatan : Scientific
Strategi : Cooperative Learning
Tipe : STAD
Metode : Ceramah, diskusi, dan penugasan
G.KEGIATAN PEMBELAJARANNo. Tahapan Kegiatan
Kegiatan Alokasi
WaktuGuru Siswa
1. Pendahuluan
- Guru membuka
pelajaran dengan
mengucapkan salam
dengan santun dan
ramah
- Guru meminta ketua
kelas untuk
memimpin doadengan sopan
- Guru menciptakan
ketertiban suasana
belajar dengan
santun dan tegas
- Guru memeriksa
daftar hadir dengan
jelas
- Guru menjelaskan
tujuan materi
pembelajaran
dengan jelas
- Siswa menjawab
salam dengan sopan
- Ketua kelas
memimpin doa
dengan tegas dansopan
- Siswa berperilaku
sopan dan diam
sebelum pelajaran
dimulai
- Siswa menjawab
dengan jelas ketika
diabsen oleh Guru
- Siswa mendengarkan
penjelasan tujuan
pembelajaran dari
Guru dengan tenang
5
-
8/12/2019 RPP Web Praktik Mikro
4/23
-
8/12/2019 RPP Web Praktik Mikro
5/23
5
- White board, spidol dan penghapus
I. PERANGKAT EVALUASI1. Prosedur Penilaian
a. Penilaian ProsesMenggunakan format pengamatan dilakukan dalam kegiatan pembelajaran sejak
dari kegiatan awal sampai dengan kegiatan akhir.
b. Penilaian Hasil BelajarMenggunakan instrumen penilaian hasil belajar dengan tes tulis.
2. Instrumen Penilaiana. Subyektif Tes
Esai atau uraianSoal
1. Apakah yang dimaksud dengan HTML?
2. Jelaskan struktur dokumen HTML berikut ini, analisis kesalahannya!
3. Sebutkan 3 macam text formatting dan contoh penggunaanya!
Kunci Jawaban
No. Uraian JawabanSkor
Maksimal1. HTML (Hyper Text Markup Language) adalah
bahasa yang digunakan untuk menampilkan
halaman di web yang mengkombinasikan teks dan
informasi tambahan mengenai teks tersebut.
25
2. Setiap dokumen HTML harus diawali dengan tag
dan diakhiri dengan komplemennya, yakni
tag tag. Dokumen HTML tersebut hanya
terdapat satu macam tag yakni tag dan
45
-
8/12/2019 RPP Web Praktik Mikro
6/23
6
: digunakan untuk melingkupi semua teks
yang terdapat di halaman HTML. Dokumen HTML
yang baik harusnya terdapat 3 macam tag yakni tag
head, body dan title.
Ini judul
Ini head
Ini body
3. digunakan untuk mencetak tebal
Aku adalah anak Indonesia
Hasilnya : Aku adalah anak Indonesia
digunakan untuk mencetak miring
Aku adalah anak Indonesia
Hasilnya :Aku adalah anak Indonesia
digunakan untuk membuat teks subscript/
tulisan dibawah garis
Hasilnya : Aku adalah anak Indonesia
30
Mengetahui Kraksaan, 15 Oktober 2013
Kepala SMKN 1 Kraksaan Guru Mata Pelajaran
Drs. H. MOH. IDRIS, M.Pd Ika Rizki Choirunnisaa, S.Pd
NIP. 19550612 198203 1 020 NIP. 19930617 200604 1 026
-
8/12/2019 RPP Web Praktik Mikro
7/23
-
8/12/2019 RPP Web Praktik Mikro
8/23
8
Sangat disarankan menggunakan browser utama Mozilla Firefox. Adapun untuk
pembanding, sebaiknya juga memanfaatkan browser lain.
c. Editor Teks
Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi web
(tidak diperkenankan menggunakan IDE seperti Dreamweaver dan sebagainya).
d. HTML Validator
Untuk menghasilkan dokumen HTML yang valid, diwajibkan memasang validator,
misalnya berupa add-on pada browser Firefox.
Latihan
1. Membuat Dokumen HTML
Secara garis besar, struktur dokumen HTML terdiri dari dua bagian: header dan bodi.
Di mana header mendefinisikan informasi mengenai dokumen, sedangkan bodimendefinisikan tubuh atau isi dokumen.
Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:
Ini judul dokumen
Ini adalah teks di body
3. Simpan dokumen HTML dengan nama latihan1.1.html dan letakkan di lokasi
direktori web, misal C:\wamp\www. Perhatikan, www merupakan direktori web dan
sebaiknya buat subdirektori di dalamnya. Untuk mengetahui hasil pembuatandokumen HTML, klik ganda file yang telah Anda buat. Hasilnya akan terlihat seperti
Gambar 1.
-
8/12/2019 RPP Web Praktik Mikro
9/23
9
Gambar 1. Tampilan halaman web
Bagaimanapun, dokumen HTML memang bisa ditampilkan dengan mengklik ganda di
mana pun lokasinya. Namun perlu diperhatikan, langkah ini bukanlah cara untuk
menjalankan halaman web di server lokal.
Dokumen HTML Standar
Untuk menghasilkan dokumen yang well-formed, kita harus merujuk pada aturan
XML yang dituangkan ke dalam dokumen XHTML. Dalam implementasinya, di sini
kita menambahkan tag di bagian paling atas dan mengidentifikasikan
dokumen sebagai XHTML compliant.
Merujuk pada aturan-aturan yang ada, dokumen HTML sebelumnya dapat
dituliskan sebagai berikut:
Ini judul dokumen
Ini adalah teks di body
Begitu dilihat di browser, terlihat bahwa secara tampilanuntuk kasus initidak ada
pengaruh akibat penambahan deklarasi XHTML. Namun jika kita sudah menginstal
-
8/12/2019 RPP Web Praktik Mikro
10/23
10
HTML validator, akan terlihat ikon cek list (OK) pada pojok kanan bawah browser.
Ikon ini mengindikasikan bahwa halaman web sudah valid (well-formed)
Publikasi Halaman Web
Untuk menguji aplikasi web, kita mempublikasikannya ke web server, baik secara
lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang efisien,
khususnya ketika aplikasi masih dalam tahap pengembangan.
Langkah yang diperlukan untuk publikasi ini sangat sederhana.
1. Pastikan bahwa file dokumen sudah diletakkan di direktori web, misalnya untuk
WampServer lokasi defaultnya adalah www. Untuk paket web server lainnya,
termasuk Apache (versi tunggal) adalah htdocs.
2. Pastikan bahwa web server sudah dijalankan.
3.
Buka web browser, kemudian ketikkan alamat URL yang merujuk ke lokasi dokumen.Perhatikan contohnya seperti Gambar 2.
Gambar 2. Mengakses halaman web dari server lokal
3. Format Teks
HTML menyediakan beragam elemen yang dapat dimanfaatkan pemformatan teks.
Heading
Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading
didefinisikan menggunakan tag dan diakhiri dengan , di mana n
menyatakan tipe dengan nilai 1-6.
-
8/12/2019 RPP Web Praktik Mikro
11/23
-
8/12/2019 RPP Web Praktik Mikro
12/23
12
Paragraf
Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri dari kumpulan
paragraf. Dalam konteks HTML, paragraf direpresentasikan melalui tag
. Tag
sebenarnya merupakan tag pasangan, meski dalam implementasinya kerap kali
diabaikan.
Ini paragraf pertama
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.
Ini paragraf ketiga
Gambar 5. Menggunakan paragraf
Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan memanfaatkan
atribut align. Sebagai contoh, dokumen berikut akan menghasilkan paragraf rata
tengah, kiri kanan, dan kanan.
Demo Paragraf
-
8/12/2019 RPP Web Praktik Mikro
13/23
13
Ini paragraf rata tengah
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Ini paragraf rata kanan
Gambar 6. Mengatur posisi paragraf
Secara normal, baris baru akan ditambahkan di antara dua paragraf. Adapun jika kita
hanya ingin membuat baru, kita tidak harus menggunakan paragraf. Sebagai gantinya,
gunakan tag line break
.Membuat baris baru
Membuat baris baru
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
nisi ut aliquip ex ea commodo consequat.
-
8/12/2019 RPP Web Praktik Mikro
14/23
-
8/12/2019 RPP Web Praktik Mikro
15/23
15
Karakter Khusus
Di HTML, kita juga bisa menampilkan karakter-karakter khusus dengan
memanfaatkan nama entitas. Tabel berikut memperlihatkan beberapa jenis karakter
khusus yang dapat digunakan beserta nama entitasnya.
Pound
Euro
Copyright
Registered
Trademark
Gambar 9. Karakter-karakter khusus
4. Preformatted Text
Adakalanya kita menginginkan agar teks yang tertulis di editor teks dapat ditampilkan
apa adanya. Pada kasus seperti ini, kita bisa memanfaatkan keberadaan tag . Tag
ini akan menampilkan teks dengan font Courier dan tetap mempertahankan spasi serta
baris baru.
------------------------------------------------No | Nama | Alamat
------------------------------------------------
-
8/12/2019 RPP Web Praktik Mikro
16/23
16
1 | PT. Bintang | Jl. Terusan Surabaya
2 | PT. Sinar Jaya | Jl. Tidar
3 | PT. Mitra | Jl. Galunggung
4 | PT. Harapan | Jl. Jombang
5 | PT. Barokah | Jl. Bondowoso
------------------------------------------------
Gambar 10. Tampilan preformatted text
Untuk melihat perbedaannya, hilangkan tag kemudian perhatikan hasilnya.
5. Garis Horizontal
Di HTML, garis horizontal direpresentasikan melalui tag . Meskipun
kebanyakan browser me-render elemen ini dengan visualisasi yang sedikit berbeda,
namun pada hakekatnya mencerminkan sebuah bentuk garis horizontal.
Membuat garis horizontal
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.
-
8/12/2019 RPP Web Praktik Mikro
17/23
17
Gambar 11. Garis horizontal
6. Menggunakan List
HTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered), dan
definisi (definition). Untuk setiap bentuk list ini, terdapat list itemdinyatakanmelalui tag berpasanganyang merepresentasikan item-item list.
Ordered List
Satu
Dua
Unordered List
Satu
Dua
Definition List
Satu
Satu Satu
Dua
Dua Dua
Gambar 2. Menggunakan list
-
8/12/2019 RPP Web Praktik Mikro
18/23
18
7. Pewarnaan
Untuk memberikan warna background, HTML menyediakan atribut bgcolor di tag
. Atribut ini dapat diisi dengan nama warnamisalnya red atau kode
heksadesimalmisalnya #FFFFFF.
Khusus untuk elemen-elemen lain tertentu, tersedia atribut color yang memungkinkan
kita melakukan pewarnaan. Sama seperti bgcolor, nilai atribut ini juga dapat berupa
nama warna atau kode heksadesimal.
Heading 3
Font berwarna merah
Font berwarna merah (menggunakan nilai heksa)
Gambar 13. Menambahkan warna di halaman web
8. Bekerja dengan Gambar
Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML. Untuk
keperluan ini, HTML menyediakan tag yang didukung
dengan sejumlah atribut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
-
8/12/2019 RPP Web Praktik Mikro
19/23
19
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Gambar 14. Menyisipkan gambar
STUDI KASUS
1. Buat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan gambar.
Di mana terdapat minimal sebuah heading dan garis berwarna, gambar dengan garis
tepi (border), dan halaman utama dengan latar belakang gambar sembarang. Contoh
tampilannya diperlihatkan seperti Gambar 15.
Gambar 15. Kombinasi elemen-elemen HTML
-
8/12/2019 RPP Web Praktik Mikro
20/23
20
2. RUBRIK PENILAIAN Psikomotor
Nama/NIS : _______________________/_____________
No. AspekSkor
Keterangan
1 2 3 4 5
1.Disiplin
2.Jujur
3.Tanggung
jawab
4.Tepat
Kriteria Penilaian Aspek Psikomotor
1. Disiplin
Siswa diberi nilai 5, jika siswa selalu datang tepat waktu saat pelajaran, mengikuti
seluruh pembelajaran di kelas, dan mematuhi seluruh aturan yang telah ditentukan
oleh guru
Siswa diberi nilai 4, jika siswa sering datang tepat waktu saat pelajaran, mengikuti
seluruh pembelajaran di kelas, dan mematuhi aturan yang telah ditentukan oleh
guru
Siswa diberi nilai 3, jika siswa sering datang terlambat saat pelajaran, mengikuti
pembelajaran di kelas, dan mematuhi aturan yang telah ditentukan oleh guru
Siswa diberi nilai 2, jika siswa jarang datang tepat waktu saat pelajaran, mengikuti
sebagian pembelajaran di kelas, dan jarang mematuhi seluruh aturan yang telah
ditentukan oleh guru
Siswa diberi nilai 1, jika siswa tidak pernah datang tepat waktu saat pelajaran, tidak
mengikuti seluruh pembelajaran di kelas, dan tidak pernah mematuhi aturan yang
telah ditentukan oleh guru
2. Jujur
Siswa diberi nilai 5, jika siswa jujur dalam melakukan seluruh kegiatan
pembelajaran dan jujur saat mengerjakan tugas yang diberikan oleh guru
Siswa diberi nilai 4, jika siswa jujur dalam melakukan seluruh kegiatan
pembelajaran dan jujur saat mengerjakan tugas yang diberikan oleh guru
-
8/12/2019 RPP Web Praktik Mikro
21/23
21
Siswa diberi nilai 3, jika siswa cukup jujur dalam melakukan kegiatan pembelajaran
dan cukup jujur saat mengerjakan tugas yang diberikan oleh guru
Siswa diberi nilai 2, jika siswa kurang jujur dalam melakukan seluruh kegiatan
pembelajaran dan kurang jujur saat mengerjakan tugas yang diberikan oleh guru
Siswa diberi nilai 1, jika siswa tidak jujur dalam melakukan kegiatan pembelajaran
dan tidak jujur saat mengerjakan tugas yang diberikan oleh guru
3. Tanggung Jawab
Siswa diberi nilai 5, jika siswa memiliki tanggung jawab dengan sangat baik
terhadap kelas dan selalu mengerjakan semua tugas dengan tanggung jawab
Siswa diberi nilai 4, jika siswa memiliki tanggung jawab dengan baik terhadap
kelas dan selalu mengerjakan semua tugas dengan tanggung jawab
Siswa diberi nilai 3, jika siswa kurang memiliki tanggung jawab terhadap kelas dan
kurang bertanggung jawab saat mengerjakan tugas
Siswa diberi nilai 2, jika siswa tidak memiliki tanggung jawab terhadap kelas dan
kurang bertanggung jawab saat mengerjakan tugas
Siswa diberi nilai 1, jika siswa tidak memiliki tanggung jawab terhadap kelas sama
sekali dan tidak bertanggung jawab saat mengerjakan tugas
4. Tepat
Siswa diberi nilai 5, jika siswa mengerjakan tugas dan dikusi dengan tepat dan
sangat cepat(sebelum batas waktu pengumpulan).
Siswa diberi nilai 4, jika siswa mengerjakan tugas dan dikusi dengan tepat dan
cepat(saat batas waktu pengumpulan).
Siswa diberi nilai 3, jika siswa mengerjakan tugas dan dikusi dengan tepat namun
kurang cepat(setelah batas waktu pengumpulan).
Siswa diberi nilai 2, jika siswa mengerjakan tugas dan dikusi dengan kurang tepat
dan kurang cepat(setelah batas waktu pengumpulan)..
Siswa diberi nilai 1, jika siswa mengerjakan tugas dan dikusi dengan tidak tepat dan
kurang cepat(setelah batas waktu pengumpulan).
Penghitungan nilai:
Total nilai =
2 100
-
8/12/2019 RPP Web Praktik Mikro
22/23
22
Afektif
Dalam kegiatan berdiskusi siswa diharapkan aktif mengemukakan pendapat di
kelas. Untuk mengetahui siswa aktif mengemukakan pendapat dalam kelas dapat
menggunakan rubrik berikut:
No Nama siswa
Aktif mengemukakan pendapat
Skor
Total
Presentasi Bertanya Menjawab
pertanyaan
Menyimpulkan
hasil
diskusi/materi
1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5
1.A
2. B
DstDst
=
10
Kriteria Penilaian Aspek Afektif
1. Presentasi
Siswa diberi nilai 5, jika siswa dapat mempresentasikan hasil diskusi dengan
baik, benar serta lancar.
Siswa diberi nilai 4, jika siswa dapat mempresentasikan hasil diskusi dengan
baik, benar namun kurang lancar.
Siswa diberi nilai 3, jika siswa dapat mempresentasikan hasil diskusi dengan
baik, kurang benar serta kurang lancar.
Siswa diberi nilai 2, jika siswa dapat mempresentasikan hasil diskusi dengan
baik, kurang benar serta tidak lancar.
Siswa diberi nilai 1, jika siswa dapat mempresentasikan hasil diskusi dengan
kurang baik, kurang benar serta tidak lancar.
2. Bertanya
Siswa diberi nilai 5, jika siswa aktif mengajukan pertanyaan sebanyak minimal
4 kali.
Siswa diberi nilai 4, jika siswa mengajukan pertanyaan sebanyak minimal 3
kali.
-
8/12/2019 RPP Web Praktik Mikro
23/23
23
Siswa diberi nilai 3, jika siswa mengajukan pertanyaan sebanyak minimal 2
kali.
Siswa diberi nilai 2, jika siswa mengajukan pertanyaan sebanyak minimal
sekali.
Siswa diberi nilai 1, jika siswa tidak pernah mengajukan pertanyaan.
3. Menjawab pertanyaan
Siswa diberi nilai 5, jika siswa dapat menjawab pertanyaan yang diajukan
temannya dengan sangat baik dan benar
Siswa diberi nilai 4, jika siswa dapat menjawab pertanyaan yang diajukan
temannya dengan baik dan benar
Siswa diberi nilai 3, jika siswa dapat menjawab pertanyaan yang diajukan
temannya dengan cukup baik dan benar
Siswa diberi nilai 2, jika siswa kurang dapat menjawab pertanyaan yang
diajukan temannya dengan baik dan benar
Siswa diberi nilai 1, jika siswa tidak dapat menjawab pertanyaan yang diajukan
temannya dengan baik dan benar.
4. Menyimpulkan hasil diskusi/materi
Siswa diberi nilai 5, jika siswa dapat membuat kesimpulan dari materi yang
telah diberikan dengan sangat baik dan benar
Siswa diberi nilai 4, jika siswa dapat membuat kesimpulan dari materi yang
telah diberikan dengan baik dan benar
Siswa diberi nilai 3, jika siswa dapat membuat kesimpulan dari materi yang
telah diberikan dengan cukup baik dan benar
Siswa diberi nilai 2, jika siswa kurang dapat membuat kesimpulan dari materi
yang telah diberikan dengan baik dan benar
Siswa diberi nilai 1, jika siswa tidak dapat membuat kesimpulan dari materi
yang telah diberikan dengan baik dan benar
Penghitungan nilai:
Total nilai =
5 100