amiroh, samiroh.web.id/powerpoint/mendesain website statis - 6.pdfrencana pelaksanaan pembelajaran...

RENCANA PELAKSANAAN PEMBELAJARAN

SMK NEGERI 3 JOMBANG

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


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 Silabus dan RPP o LKS “Membuat Hyperlink” o LKS dan Kunci Jawaban LKS “Membuat Hyperlink” o Bahan ajar powerpoint “Membuat Hyperlink” o Jobsheet o Internet

X. PENILAIAN HASIL BELAJAR

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



2012/2013

SK : Menerapkan dasar-dasar pembuatan web statis

KD: Membuat halaman web sederhana

LKS - TIK

MATERI : o Pengenalan HTML –

hyperlink o Jenis hyperlink o Penulisan tag hyperlink o Jenis atribut anchor o 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 <A> Bentuk

penulisannya sangat simpel dan mudah, yaitu :

<a href=”dokumen tujuan”>Teks Link</a>

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 _top : ditampilkan pada frame atas o _parent : ditampilkan pada window yang sama o _self : Ditampilkan pada jendela/frame yang sama

5. Cara membuat hyperlink

Format penulisan :

<a href="Link">Kata yang di-click</a>

<a name="#Acuan">Kata yang dituju</a>

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 : <html> <head> <title>Link dalam satu dokumen </title> </head> <Body bgcolor=white> <h2>Daftar Fakultas : </h2> <a href="#par1">Teknik</a> <a href="#par2">Hukum</a> <a href="#par3">Fisip</a> <a href="#par4">Psikologi</a> <a name="par1">Fakultas Teknik</a> Data - data yang diterima di fakultas teknik :

2012/2013

1. Amin 2. Rosa 3. Beny <a name="par2">Fakultas Hukum</a> Data - data yang diterima di fakultas Hukum : 1. Tyo 2. Rendra 3. Sitorus <a name="par3">Fakultas Fisip</a> Data - data yang diterima di fakultas Fisip : 1. Indra 2. Johan 3. Wilmar <a name="par4">Fakultas Psikologi</a> Data - data yang diterima di fakultas Psikologi: 1. Bagong 2. Petruk 3. Ateng </body> </html>



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 LP dan Butir

Soal Kunci LP dan Butir

Soal Produk : o Menjelaskan konsep hyperlink o Menjelaskan penulisan tag dan atribut

html untuk membuat hyperlink o Menautkan dokumen utama dengan

dokumen target

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

Kunci LP 1 Produk

Butir 1,2,3,4,5

Proses : o Membuat rancangan desain web untuk

menampilkan menu pilihan

LP 2 : Proses

Dipercayakan kepada

judgement Penilai /

Guru

Psikomotor:

o Praktik membuat halaman web sederhana untuk menampilkan menu pilihan.

LP-3

Psikomotor

Dipercayakan kepada

judgement Penilai /

Guru

Karakter:

Jujur, peduli, tanggung jawab, toleransi,

selalu melakukan yang terbaik, kreatif,

terbuka dan mendengarkan pendapat

teman, tidak mencela teman dengan kasar,

membantu teman yang membutuhkan.

LP-4 Karakter

Seluruh RTK itu

minimal memperoleh

penilaian Menunjukkan

kemajuan dan

dipercayakan kepada

judgement Penilai /

Guru

Keterampilan Sosial:

Bertanya, menyumbang ide atau

berpendapat, menjadi pendengar yang baik,

komunikasi.

LP-5

Keterampilan

Sosial

Seluruh RTK itu

minimal memperoleh

penilaian Menunjukkan

kemajuan dan

dipercayakan kepada

judgement Penilai /

Guru

2012/2013

LP-1: PRODUK Jawablah pertanyaan berikut!

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 <a …> </a>

Jawab :

6. Sebutkan 2 cara browser menampilkan dokumen tujuan link!

Jawab :

Format Asesmen Kinerja Produk

No. URAIAN Skor

1 Menyebutkan pengertian hyperlink 15

2 Sebutkan jenis-jenis link yang anda ketahui! 15

3 Bagaimanakah cara penulisan tag hyperlink ? 25

4 Sebutkan atribut yang menyusun tag <a …> </a> 25

5 Sebutkan 2 cara browser menampilkan dokumen tujuan link! 20

Skor total 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 :

<a href=”Link”>Kata yang di-click</a> <a name=”#Acuan”>Kata yang dituju</a> Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark)

4. Sebutkan atribut yang menyusun tag <a …> </a> (Skor 25)

Jawab :

a. Href = diikuti dengan dokumen tujuan

b. Name = diikuti dengan nama paragraf

c. Target = diikuti alamat target link (_blank, _parent, _self, atau _top)

d. 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

2012/2013

menambahkan atribut TARGET=”_blank” dalam tag . Contoh: <a href=”webpage.htm” target=”_blank”>.



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 Nilai

0 1 2 3

1. Penulisan syntax html

2. Penggunaan tag dan atribut untuk membuat judul halaman web

3. Penggunaan tag dan atribut untuk menampilkan gambar

4. Penggunaan tag dan atribut untuk membuat hyperlink

5. Penggunaan tag dan atribut untuk memformat teks

6. Menyebutkan langkah-langkah menyimpan dokumen html

7. Menyebutkan langkah-langkah menjalankan dokumen html

Skor

Keterangan :



2012/2013

0 : Pekerjaan tidak berhasil dilakukan

1 : Perkerjaan berhasil dilakukan, tetapi tidak sempurna (50%)

2 : Perkerjaan berhasil dilakukan, cukup sempurna (75%)

3 : Perkerjaan berhasil dilakukan dengan sempurna (100%)

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 <h3></h3>,

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 <img src=..> tepat di

bawah judul halaman web.

3. Membuat rancangan 4 buah hyperlink dengan menggunakan tag <a href=…></a> 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


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 :

<HTML>

<HEAD>

<TITLE>Membuat Link</TITLE>

</HEAD>

<BODY bgcolor=white text=”black” link=red alink=green vlink=blue>

<center><marquee bgcolor=red behavior=”alternate” width=200>

<h3>Menu Pilihan</h3></marquee> 

<img src=”Image003.jpg” width=150 height=150 alt=”imut kan?”> 

 



<a href=”aboutme.html” target=”kanan”>.: My Profile :.</a> 

<a href=”activity.html” target=”atas”> .: My Activity :.</a> 

<a href=”hobby.html” target=”kanan”> .: Hobby :.</a> 

<a href=”gallery.html” target=”kanan”> .: Collection :.</a> 

</BODY>

</HTML>

3. Simpanlah dokumen di atas dengan nama “menu-pilihan.html” 4. Jalankan dokumen di atas pada browser kalian.

Format Asesmen Kinerja Psikomotor


1 2 3 4 1 Membuka dokumen baru

2 Penggunaan tag dan atribut html

3 Penulisan syntax html

4 Menautkan hyperlink dengan target link

5 Mengatur format teks

6 Menyimpan dokumen html



2012/2013

7 Menjalankan dokumen html

8 Kesesuaian hasil karya

Skor Total

Keterangan :




4 : Perkerjaan berhasil dilakukan dengan sempurna (100%)



2012/2013

LP-4: Pengamatan Perilaku Berkarakter


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)

Memerlukan

Perbaikan

Menunjukkan

Kemajuan Memuaskan

Sangat

Baik

(D) (C) (B) (A)

1. Jujur

2. Peduli

3. Mandiri

4. Rasa ingin tahu

5. Tanggung jawab



2012/2013

LP-5: Pengamatan Keterampilan Sosial


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)

Memerlukan Perbaikan

Menunjukkan Kemajuan

Memuaskan Sangat Baik

(D) (C) (B) (A)

1. Bertanya

2. Menyumbang ide

3. Menjadi pendengar yang baik

4. Berkomunikasi



2012/2013

Nama Siswa :

INSTRUMEN JOBSHEET

Dilaksanakan pada : ____________ , 2012 Guru MAPEL : Amiroh, S.Kom

Standard Kompetensi : Mendesain web statis Kompetensi Dasar : Membuat halaman web sederhana Indikator : 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


0 1 2 3 1 Membuka dokumen baru

2 Penggunaan tag dan atribut html

3 Penulisan syntax html

4 Menautkan hyperlink dengan target link

5 Mengatur format teks

Menyimpan dokumen html

6 Menjalankan dokumen html



2012/2013

7 Kesesuaian hasil karya

Skor Total

Keterangan :




3 : Perkerjaan berhasil dilakukan dengan sempurna

(100%)12050452510602

709 : TIK-UNIVERSITAS NEGERI SURABAYA 2012

amiroh, samiroh.web.id/powerpoint/mendesain website statis - 6.pdfrencana pelaksanaan pembelajaran...

Documents