RENCANA PELAKSANAAN PEMBELAJARAN MUATAN LOKAL. MENDESAIN WEB STATIS Membuat halaman web sederhana

SMK NEGERI 3 JOMBANG

RENCANA PELAKSANAAN PEMBELAJARAN

2012/2013

MUATAN LOKAL MENDESAIN WEB STATIS Membuat halaman web sederhana Perangkat mengajar ini mengacu pada format penyusunan Silabus/RPP/LKS Universitas Negeri Surabaya (UNESA) Tahun 2012 (PLPG 2012).

PERTEMUAN KE -6

OLEH :

AMIROH, S.kom

DINAS PENDIDIKAN KABUPATEN JOMBANG TAHUN PELAJARAN 2012/2013

AMIROH, S.kom



2012/2013

RENCANA PELAKSANAAN PEMBELAJARAN Satuan Pendidikan

: SMK NEGERI 3 JOMBANG

Mata Pelajaran

: TEKNOLOGI INFORMASI DAN KOMUNIKASI

Kelas/Semester

: Kelas XI/ Semester I

Pertemuan ke

: 6

Alokasi Waktu

: 4 x 40 menit

I. Standar Kompetensi

: Menerapkan dasar-dasar pembuatan web statis

II. Kompetensi Dasar

: 2. Membuat halaman web sederhana

III. Indikator A. Kognitif 1. Produk  Menjelaskan konsep hyperlink  Menjelaskan cara penulisan tag dan atribut html untuk membuat hyperlink  Menjelaskan cara menautkan dokumen utama dengan dokumen target 2. Proses  Membuat rancangan desain web untuk menampilkan menu pilihan B. Psikomotor  Membuat halaman web sederhana untuk menampilkan menu pilihan C. Afektif  Mengembangkan perilaku berkarakter, meliputi: a) Mandiri dalam mengerjakan tugas b) Peduli terhadap pendapat teman c) Tanggung jawab terhadap jawaban yang diperoleh  Mengembangkan keterampilan sosial, meliputi: a) Bertanya b) Menjadi pendengar yang baik c) Berkomunikasi dengan baik tehadap sesama teman maupun guru IV. Tujuan pembelajaran A. Kognitif 1. Produk :



2012/2013

 Secara mandiri dan tanpa membuka bahan ajar, siswa mampu menjelaskan konsep hyperlink dengan mengerjakan soal no. 1, 2, dan 3 LP 1 Produk sesuai dengan kunci jawaban LP 1 Produk  Secara mandiri dan tanpa membuka bahan ajar, siswa mampu menyebutkan cara penulisan tag dan atribut hyperlink dengan mengerjakan soal no. 4, 5 LP 1 Produk sesuai dengan kunci jawaban LP 1 Produk 2. Proses  Diberikan soal LP 2 : Proses, soal no.1, siswa mampu membuat rancangan halaman web untuk menampilkan menu pilihan sesuai dengan kunci jawaban LP 2 : Proses. B. Psikomotor  Secara mandiri, siswa mampu membuat halaman web sederhana yang menampilkan menu pilihan sesuai dengan kunci jawaban LP 3 : Psikomotor C. Afektif  Karakter Terlibat dalam proses belajar mengajar berpusat pada siswa, Membuat kemajuan dalam menunjukkan perilaku berkarakter meliputi:

Rasa ingin tahu, Mandiri,

Kreatif, Tanggung jawab sesuai LP 4: Pengamatan Perilaku Berkarakter.  Keterampilan sosial:  Terlibat dalam proses belajar mengajar berpusat pada siswa, paling tidak siswa dinilai Membuat kemajuan dalam menunjukkan keterampilan sosial bertanya, menyumbang ide atau berpendapat, menjadi pendengar yang baik, berkomunikasi sesuai LP 5: Keterampilan Sosial. V. Materi Pembelajaran 1. Pengenalan HTML – hyperlink 2. Jenis hyperlink 3. Penulisan tag dan atribut hyperlink 4. Jenis atribut hyperlink 5. Membuat contoh halaman web dengan menu pilihan VI. MODEL DAN STRATEGI PEMBELAJARAN: Pendekatan Metode Pembelajaran dengan menggunakan :



2012/2013

 Model Pembelajaran : Pembelajaran langsung  Strategi Pembelajaran : Presentasi dan penugasan VII. ALAT DAN BAHAN o

Silabus dan RPP

o

LP 1 : Produk, LP 3 : Psikomotor , LP 4 : Afektif

o

LKS “Membuat Hyperlink”

o

LKS dan Kunci Jawaban LKS “Membuat Hyperlink”

o

Bahan ajar powerpoint “Membuat Hyperlink”

o

Jobsheet

o

Internet

o

Komputer/Laptop

VIII. Langkah Pembelajaran : A. Kegiatan Pendahuluan (10 menit) Kegiatan Guru Fase 1 MPL  Guru membuka pelajaran dengan mengucapkan salam, berdoa  Guru mencatat kehadiran siswa  Guru menyampaikan tujuan pembelajaran, informasi latar belakang pelajaran, pentingnya pelajaran dan memotivasi siswa

B. Inti (140 menit) Kegiatan Guru Fase 2 MPL  Guru mereview materi materi yang diberikan sebelumnya tentang memformat teks menggunakan html  Guru menjelaskan pengertian hyperlink  Guru menjelaskan jenis-jenis hyperlink  Guru menjelaskan cara penulisan tag dan atribut hyperlink  Guru memberi contoh cara penulisan hyperlink Fase 3 MPL  Guru membimbing siswa untuk membuat halaman web sederhana yang menampilkan menu pilihan, sesuai pada LP-3 : Psikomotor (jobsheet) Fase 4 MPL  Guru mengecek hasil kerja siswa



2012/2013

Fase 5 MPL  Guru memberi kesempatan kepada siswa untuk mengajukan pertanyaan tentang materi yang belum dipahami

C. Penutup (10 menit) Kegiatan Guru  Guru mengevaluasi secara umum dengan memberikan pertanyaan seputar indikator  Guru menutup pertemuan dengan ucapan salam.

IX. SUMBER PEMBELAJARAN o o o o o o

Silabus dan RPP LKS “Membuat Hyperlink” LKS dan Kunci Jawaban LKS “Membuat Hyperlink” Bahan ajar powerpoint “Membuat Hyperlink” Jobsheet Internet

X. PENILAIAN HASIL BELAJAR 1. 2. 3. 4. 5. 6.

Tabel spesifikasi lembar penilaian LP 1 Produk LP 2 Proses LP 3 Psikomotor LP 4 Format pengamatan perilaku berkarakter LP 5 Format pengamatan keterampilan sosial



SK : Menerapkan dasar-dasar pembuatan web statis

2012/2013

MATERI : o

LKS - TIK

KD: Membuat halaman web sederhana

o o o o

Pengenalan HTML – hyperlink Jenis hyperlink Penulisan tag hyperlink Jenis atribut anchor Membuat contoh halaman web dengan menu pilihan

BAHAN AJAR MEMBUAT HYPERLINK 1. PENGERTIAN Link / Hyperlink (Anchor) Hyperlink adalah teks atau gambar untuk menuju suatu alamat atau halaman tertentu. Teks atau gambar yang dijadikan hyperlink mempunyai tampilan yang berbeda dengan teks yang lain (misalnya diberi garis bawah dan warna lain ). Pointer mouse akan berubah menjadi tanda jari jika diarahkan pada teks atau gambar yang merupakan hyperlink. 2. Jenis link Berdasarkan lokasi tujuannya, link dapat dibedakan atas:  Link yang menuju ke homepage (halaman pertama) dari sebuah situs.  Link yang menuju ke halaman yang lain dalam situs yang sama.  Link yang menuju ke halaman yang lain dalam situs yang lain.  Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang sama.  Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang berbeda.  Link yang mengarah ke sebuah file yang dapat ditampilkan dalam browser, misalnya file image (gambar) atau animasi seperti GIF, JPG, BMP dan sebagainya.  Link yang mengarah ke sebuah file tertentu yang tidak bisa ditampilkan atau dijalankan dalam browser misalnya: file program (EXE), file kompresi (ZIP), file audio (seperti MP3, RM), file video, dan lain-lain.  Bila link semacam ini diklik, akan muncul kotak dialog yang menanyakan apakah anda akan menyimpan (save) file itu dalam hardisk atau menjalankannya dengan program yang sesuai. Proses pengambilan dan penyimpanan file semacam inilah yang dinamakan download.  Link yang mengarah ke alamat email. Bila link ini diklik akan membuka jendela pengiriman email dari program email yang terinstall pada komputer user (misalnya



2012/2013

Microsoft Outlook). Pada kotak tujuan email (To:) sudah tercantum alamat email tujuan. 3. Cara penulisan •

Secara umum penulisan tag hyperlink ditandai dengan tag Bentuk penulisannya sangat simpel dan mudah, yaitu : Teks Link

URL ini ditulis diantara tanda kutip sesudah atribut href= Ketentuannya sebagai berikut:  Link yang menuju ke homepage (halaman pertama) dari situs lain, cukup dituliskan alamat URL dari website tersebut, misalnya: href="http://www.situs.com".  Link yang menuju ke halaman lain dalam situs lain, maka harus kita tuliskan alamat URL dan lokasi filenya. Misalnya: href="http://www.situs.com/sini/situ.htm".  Link yang menuju ke halaman lain dalam situs yang sama, maka cukup dituliskan lokasi filenya, tanpa menuliskan alamat URL situs itu. 4. Target Link Ada 4 macam target dokumen yang bisa digunakan untuk menampilkan dokumen tujuan, yaitu : o

_blank : Ditampilkan pada jendela yang sama, tapi pada tab yang berbeda (baru).

o o o

_top : ditampilkan pada frame atas _parent : ditampilkan pada window yang sama _self : Ditampilkan pada jendela/frame yang sama

5. Cara membuat hyperlink Format penulisan : Kata yang di-click Kata yang dituju Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark) 6. Atribut anchor : a. Href = diikuti dengan dokumen tujuan b. Name = diikuti dengan nama paragraf c. Target = diikuti alamat target link (_blank, _parent, _self, atau _top)



2012/2013

d. Title = diikuti dengan teks yang akan ditampilkan ketika mouse diarahkan ke link e. accessky Evaluasi diri : a. Buatlah halaman web sederhana yang menampilkan menu pilihan berikut :

Keterangan : 

Jika menu diklik akan memperdengarkan lagu dengan dengan judul yang bersangkutan

b. Buatlah halaman web dengan tampilan berikut :



2012/2013

KUNCI JAWABAN LKS – MEMBUAT HYPERLINK 1. Langkah kerja : a. Jalankan program notepad dan bukalah dokumen baru dengan mengeklik CTRL + N b. Ketikkan script html berikut ini

c. Simpanlah dokumen di atas dengan nama tangga-lagu.html dengan menekan CTRL + S dan ketikkan nama filenya diakhiri dengan .html. d. Jalankan dokumen tangga-lagu.html di atas pada browser kalian.

2. Berikut script dari tampilan halaman web di atas : Source code : Link dalam satu dokumen
Daftar Fakultas :

Teknik
Hukum
Fisip
Psikologi

Fakultas Teknik Data - data yang diterima di fakultas teknik :



1. Amin
2. Rosa
3. Beny

Fakultas Hukum Data - data yang diterima di fakultas Hukum :
1. Tyo
2. Rendra
3. Sitorus

Fakultas Fisip Data - data yang diterima di fakultas Fisip :
1. Indra
2. Johan
3. Wilmar

Fakultas Psikologi Data - data yang diterima di fakultas Psikologi:
1. Bagong
2. Petruk
3. Ateng

2012/2013



2012/2013

Daftar Pustaka TIM SERGUR UNESA. 2012. Materi Pendidikan dan Latihan Profesi Guru (PLPG) Teknologi Informasi dan Komunikasi (TIK) – SMK. Publikasi Kementrian Pendidikan dan Kebudayaan-UNESA Surabaya . BSNP (Badan Standar Nasional Pendidikan). 2007. Model Silabus dan Rencana Pelaksanaan Pembelajaran. Mata Pelajaran: Ilmu Pengetahuan Alam. SMP/MTS. Digandakan oleh Kegiatan Penyelenggaraan Sosialisasi/Diseminasi/Seminar/Workshop/Publikasi Direktorat Jenderal Manajemen Pendidikan Dasar dan Menengah.



2012/2013

TABEL SPESIFIKASI LEMBAR PENILAIAN Indikator Produk : o Menjelaskan konsep hyperlink o Menjelaskan penulisan tag dan atribut html untuk membuat hyperlink o Menautkan dokumen utama dengan dokumen target Proses : o Membuat rancangan desain web untuk menampilkan menu pilihan

LP dan Butir Soal

Kunci LP dan Butir Soal

LP 1 Produk Butir 1,2,3,4,5

Kunci LP 1 Produk

LP 2 : Proses

Psikomotor: LP-3 o Praktik membuat halaman web Psikomotor sederhana untuk menampilkan menu pilihan. Karakter: Jujur, peduli, tanggung jawab, toleransi, LP-4 Karakter selalu melakukan yang terbaik, kreatif, terbuka dan mendengarkan pendapat teman, tidak mencela teman dengan kasar, membantu teman yang membutuhkan.

Keterampilan Sosial: Bertanya, menyumbang ide atau LP-5 berpendapat, menjadi pendengar yang baik, Keterampilan komunikasi. Sosial

Butir 1,2,3,4,5

Dipercayakan kepada judgement Penilai / Guru Dipercayakan kepada judgement Penilai / Guru

Seluruh RTK itu minimal memperoleh penilaian Menunjukkan kemajuan dan dipercayakan kepada judgement Penilai / Guru

Seluruh RTK itu minimal memperoleh penilaian Menunjukkan kemajuan dan dipercayakan kepada judgement Penilai / Guru



Jawablah pertanyaan berikut!

2012/2013

LP-1: PRODUK

2. Apa yang akan anda ketahui tentang hyperlink ? Jawab :

3. Sebutkan jenis-jenis link yang anda ketahui! Jawab :

4. Bagaimanakah cara penulisan tag hyperlink ? Jawab :

5. Sebutkan atribut yang menyusun tag Jawab :

6. Sebutkan 2 cara browser menampilkan dokumen tujuan link! Jawab :

Format Asesmen Kinerja Produk

No.

URAIAN

Skor

1 2 3 4 5

Menyebutkan pengertian hyperlink Sebutkan jenis-jenis link yang anda ketahui! Bagaimanakah cara penulisan tag hyperlink ? Sebutkan atribut yang menyusun tag Sebutkan 2 cara browser menampilkan dokumen tujuan link!

15 15 25 25

Skor total

20 100



2012/2013

Kunci Jawaban LP 1 Produk 1. Apa yang akan anda ketahui tentang hyperlink ? Jelaskan ciri-cirinya! (Skor 15) Jawab : Hyperlink adalah teks atau gambar yang bisa diklik untuk menuju suatu alamat atau halaman tertentu. Ciri-ciri : o Teks atau gambar yang dijadikan hyperlink mempunyai tampilan yang berbeda dengan teks yang lain (misalnya diberi garis bawah dan warna lain ). o Pointer mouse akan berubah menjadi tanda jari jika diarahkan pada teks atau gambar yang merupakan hyperlink. 2. Sebutkan jenis-jenis link yang anda ketahui! (Skor 15) Jawab : Berdasarkan lokasi tujuannya, link dapat dibedakan atas:  Link yang menuju ke homepage (halaman pertama) dari sebuah situs.  Link yang menuju ke halaman yang lain dalam situs yang sama.  Link yang menuju ke halaman yang lain dalam situs yang lain.  Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang sama.  Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang berbeda.  Link yang mengarah ke sebuah file yang dapat ditampilkan dalam browser, misalnya file image (gambar) atau animasi seperti GIF, JPG, BMP dan sebagainya.  Link yang mengarah ke alamat email 3. Bagaimanakah cara penulisan tag hyperlink ? (Skor 25) Jawab : Kata yang di-click Kata yang dituju Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark) 4. Sebutkan atribut yang menyusun tag (Skor 25) Jawab :

a. b. c. d.

Href = diikuti dengan dokumen tujuan Name = diikuti dengan nama paragraf Target = diikuti alamat target link (_blank, _parent, _self, atau _top) Title = diikuti dengan teks yang akan ditampilkan ketika mouse diarahkan ke link e. Accessky 5. Sebutkan 2 cara browser menampilkan dokumen tujuan link! (Skor 25) Jawab : Cara browser memunculkan halaman tujuan ini ada dua macam. 6. Ditampilkan pada jendela yang sama. Artinya, halaman tempat link itu akan digantikan oleh halaman yang dituju oleh link tersebut. Ini merupakan cara pemunculan default. 7. Ditampilkan pada jendela yang lain. Artinya, akan muncul jendela baru yang menampilkan halaman yang dituju. Untuk membuat link semacam ini, kita harus



menambahkan atribut TARGET=”_blank” dalam tag . Contoh: .

2012/2013



2012/2013

LP 2 : PROSES Nama:

Kelas:

Tanggal:

PROSEDUR 1) Buatlah rancangan desain web untuk menampilkan menu pilihan berikut :

Format Asesmen Kinerja Proses

No.

Rincian Tugas Kinerja

1. 2.

Penulisan syntax html Penggunaan tag dan atribut untuk membuat judul halaman web Penggunaan tag dan atribut untuk menampilkan gambar Penggunaan tag dan atribut untuk membuat hyperlink Penggunaan tag dan atribut untuk memformat teks Menyebutkan langkah-langkah menyimpan dokumen html Menyebutkan langkah-langkah menjalankan dokumen html

3. 4. 5. 6. 7. Skor

Keterangan :

0

Nilai 1 2

3


0 1 2 3


: Pekerjaan tidak berhasil dilakukan : Perkerjaan berhasil dilakukan, tetapi tidak sempurna (50%) : Perkerjaan berhasil dilakukan, cukup sempurna (75%) : Perkerjaan berhasil dilakukan dengan sempurna (100%)

2012/2013



2012/2013

KUNCI JAWABAN LP 2 PROSES Rancangan halaman web untuk tampilan berikut adalah :

Langkah kerja : 1. Membuat rancangan judul halaman web “Menu Pilihan” menggunakan tag
, dengan perlakukan teks berjalan dari kanan ke kiri menggunakan tag <marquee> dan meletakkan di tengah layar monitor 2. Membuat rancangan tampilan gambar dengan menggunakan tag tepat di bawah judul halaman web. 3. Membuat rancangan 4 buah hyperlink dengan menggunakan tag tepat di bawah gambar sekaligus menentukan link target untuk keempat hyperlink tersebut. 4. Membuat rancangan tampilan teks yang sesuai dengan tampilan 5. Menyebutkan langkah-langkah menyimpan dokumen html 6. Menyebutkan langkah-langkah menjalankan dokumen html



2012/2013

LP-3: Psikomotor Nama:

Kelas:

Tanggal:

Aplikasikan rancangan desain halaman web dengan menu pilihan yang sudah dibuat ke dalam dokumen html dan simpanlah dengan nama “menu-pilihan.html” kemudian jalankan pada browser. Prosedur : 1. Jalankan program notepad, dan bukalah dokumen baru 2. Ketikkan script html berikut : <TITLE>Membuat Link <marquee bgcolor=red

behavior=”alternate” width=200>

Menu Pilihan

.: My Profile :.
.: My Activity :.
.: Hobby :.
.: Collection :.

3. Simpanlah dokumen di atas dengan nama “menu-pilihan.html” 4. Jalankan dokumen di atas pada browser kalian. Format Asesmen Kinerja Psikomotor No. 1 2 3 4 5 6

Rincian Tugas Kinerja Membuka dokumen baru Penggunaan tag dan atribut html Penulisan syntax html Menautkan hyperlink dengan target link Mengatur format teks Menyimpan dokumen html

1

2

Nilai 3

4



7 Menjalankan dokumen html 8 Kesesuaian hasil karya Skor Total Keterangan : 1 : Pekerjaan tidak berhasil dilakukan 2 : Perkerjaan berhasil dilakukan, tetapi tidak sempurna (50%) 3 : Perkerjaan berhasil dilakukan, cukup sempurna (75%) 4 : Perkerjaan berhasil dilakukan dengan sempurna (100%)

2012/2013



2012/2013

LP-4: Pengamatan Perilaku Berkarakter Nama:

Kelas:

Tanggal:

Petunjuk: Untuk setiap perilaku berkarakter berikut ini, beri penilaian atas perilaku berkarakter siswa menggunakan skala berikut ini: D= Memerlukan perbaikan

C= Menunjukkan kemajuan

B= Memuaskan

A= Sangat baik

Format Pengamatan Perilaku Berkarakter

No.

Rincian Tugas Kinerja (RTK)

1.

Jujur

2.

Peduli

3.

Mandiri

4.

Rasa ingin tahu

5.

Tanggung jawab

Memerlukan

Menunjukkan

Perbaikan

Kemajuan

(D)

(C)

Memuaskan (B)

Sangat Baik (A)



2012/2013

LP-5: Pengamatan Keterampilan Sosial Nama:

Kelas:

Tanggal:

Petunjuk: Untuk setiap perilaku berkarakter berikut ini, beri penilaian atas perilaku berkarakter siswa menggunakan skala berikut ini: D= Memerlukan perbaikan

C= Menunjukkan kemajuan

B= Memuaskan

A= Sangat baik

Format Pengamatan Keterampilan Sosial

No.

Rincian Tugas Kinerja (RTK)

1.

Bertanya

2.

Menyumbang ide

3.

Menjadi pendengar yang baik

4.

Berkomunikasi

Memerlukan Perbaikan (D)

Menunjukkan Kemajuan (C)

Memuaskan

Sangat Baik

(B)

(A)



Nama Siswa :

2012/2013 Dilaksanakan pada :

INSTRUMEN JOBSHEET

____________ ,

2012

Guru MAPEL : Amiroh, S.Kom

Standard Kompetensi Kompetensi Dasar Indikator

: Mendesain web statis : Membuat halaman web sederhana : Siswa mampu membuat rancangan desain web untuk menampilkan menu pilihan berikut

1) Buatlah rancangan desain web untuk menampilkan menu pilihan berikut :

2. Aplikasikan rancangan desain halaman web dengan menu pilihan yang sudah dibuat ke dalam dokumen html dan simpanlah dengan nama “menu-pilihan.html” kemudian jalankan pada browser Format Asesmen Kinerja Psikomotor No. 1 2 3 4 5 6

Rincian Tugas Kinerja Membuka dokumen baru Penggunaan tag dan atribut html Penulisan syntax html Menautkan hyperlink dengan target link Mengatur format teks Menyimpan dokumen html Menjalankan dokumen html

0

1

Nilai 2

3



2012/2013

7 Kesesuaian hasil karya Skor Total Keterangan : 0 1 2 3

: Pekerjaan tidak berhasil dilakukan : Perkerjaan berhasil dilakukan, tetapi tidak sempurna (50%) : Perkerjaan berhasil dilakukan, cukup sempurna (75%) : Perkerjaan berhasil dilakukan dengan sempurna (100%)12050452510602

709 : TIK-UNIVERSITAS NEGERI SURABAYA

2012

RENCANA PELAKSANAAN PEMBELAJARAN MUATAN LOKAL. MENDESAIN WEB STATIS Membuat halaman web sederhana

Recommend Documents

Daftar Fakultas :

Menu Pilihan