rpp web praktik mikro

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


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


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


4/23


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


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


7/23


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.


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


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.


11/23


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


13/23

13

Ini paragraf rata tengah



aliqua.

Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris


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



aliqua.

Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris



14/23


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

------------------------------------------------


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



aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco

laboris



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


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.



aliqua.


19/23

19



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


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


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


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.


baik, benar namun kurang lancar.


baik, kurang benar serta kurang lancar.


baik, kurang benar serta tidak lancar.


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.


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


temannya dengan baik dan benar


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


telah diberikan dengan baik dan benar


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

rpp web praktik mikro

Documents