Menerapkan Dasar Dasar Pembuatan Web Statik

Tingkat Dasar TIK.PR02.027.01

Advertisement

MATERI PELATIHAN BERBASIS KOMPETENSI

Advertisement

SEKTOR TELEMATIKA

SUB SEKTOR PROGRAMMER KOMPUTER

MENERAPKAN DASAR DASAR

PEMBUATAN WEB

STATIK TINGKAT DASAR

TIK.PR02.027.01

BUKU KERJA
 DEPARTEMEN TENAGA KERJA DAN TRANSMIGRASI R.I.

DIREKTORAT JENDERAL PEMBINAAN PELATIHAN DAN PRODUKTIVITAS

Jl. Jend. Gatot Subroto Kav.51 Lt.7.B Jakarta Selatan

DAFTAR ISI

Daftar Isi Hal

BAB I STANDAR KOMPETENSI 2

1.1 Unit Kompetensi Yang Dipelajari 3

1.1.1 Kode dan Judul Unit 3

1.1.2 Deskripsi Unit 3

1.1.3 Elemen Kompetensi 4

1.1.4 Batasan Variabel 6

1.1.5 Panduan Penilaian 7

1.1.6 Kompetensi Kunci 8

BAB II TAHAPAN BELAJAR 9

BAB III TUGAS TEORI DAN UNJUK KERJA 15

3.1 Tugas Teori 15

3.2 Tugas Unjuk Kerja 20

3.3 Daftar Cek Unjuk Kerja 22

BAB I

STANDARD KOMPETENSI

1.1 Unit Kompetensi Yang Dipelajari

Dalam sistem pelatihan, Standar Kompetensi diharapkan menjadi panduan bagi peserta
pelatihan untuk dapat:

1. Mengidentifikasikan apa yang harus dikerjakan peserta pelatihan.

2. Memeriksa kemajuan peserta pelatihan.
3. Menyakinkan bahwa semua elemen (sub-kompetensi) dan criteria unjuk kerja telah
dimasukkan dalam pelatihan dan penilaian.

1.1.1 Kode dan Judul Unit

Kode Unit : TIK.PR02.027.01

Judul Unit : Menerapkan Dasar Dasar Pembuatan Web Statik Tingkat Dasar

1.1.2 Deskripsi Unit

Unit kompetensi ini berkaitan dengan pembuatan web statis sederhana sebagai media untuk
menampilkan informasi. Pada unit ini di batasi pada kemampuan membuat web baru,
membuat link pada dokumen dan gambar grafik, menggunakan template dan menampilkan
web pada jendela browser
1.1.3 Elemen Kompetensi

ELEMEN KOMPETENSI KRITERIA UNJUK KERJA

01 Menjelaskan konsep dasar dan 1.1 Konsep-konsep dan teknologi web dijelaskan
teknologi dari webpage (web server, URL, HTTP, HTML, web browser,
gateway)

1.2 Perbedaan antara klien dan server di jelaskan

1.3 Cara bagaimana bandwidth mempengaruhi

transmisi data dan gambar pada layar di jelaskan

1.4 Ciri-ciri dan fungsi dari software teks editor

yang tersedia untuk merancang web page di
bandingkan

1.5 Keuntungan dan kerugian running dari server

yang di miliki dibandingkan server provider di jelaskan

02 Mempersiapkan 2.1 Software teks editor dan browser sesuai dengan

pekerjaan pembuatan web kebutuhan di indentifikasi

2.2 Software beroperasi sesuai dengan standar

operasi software

2.3 Sketsa disain untuk web yang akan di buat

sudah disiapkan
 2.4 Data yang akan di tampilkan di web tersedia

2.5 Area kerja untuk membuat dokumen web baru

sudah di siapkan

03 Melakukan 3.1 Proses pembuatan web sesuai dengan standar

pembuatan dokumen web baru operasi aplikasi di lakukan

3.2 Web yang di buat tampil di layar sesuai dengan

disain

3.3 Data yang tersedia tampil di layar web

04 Membuat link 4.1 Link antar dokumen di buat seperti link

antar dokumen ke dokumen lain pada direktori yang
sama sebagai dokumen pertama, link ke dokumen
lain pada direktori yang berbeda dari
dokumen pertama, link ke dokumen web lain di
internet, link ke file-file, link kebagian lain dalam
dokumen yang sama/bookmark, link dari grafik ke
suatu dokumen, link ke sebuah alamat e- mail

4.2 Perbedaan client side image mapping dan server

ide image mapping dapat di jelaskan

4.3 File index. HTML pada sebuah web server

di identifikasi
 4.4 In line image dengan perbedaan bagian yang di
link (ke web page lain, gambar dan situs lain di
internet) di buat

05 Mengorganisasikan dokumen Fitur-fitur template, seperti membuat dokumen

dengan menggunakan template template dengan berbagai fitur untuk keperluan tertentu
di pahami dan di aplikasikan

06 Menampilkan web dan browser 6.1 Format URL (Uniform Resource Locator)
di jelaskan

6.2 Peran dari browser dalam membaca file-

file web di demonstrasikan (text only,
hypertex) dengan mengakses ke URL tertentu
melalui menu yang tersedia

6.3 Perbedaan browser mempengaruhi

tampilan dari halaman web dapat di identifikasi

1.1.4 Batasan Variabel

Batasan variabel unit kompetensi ini adalah sebagai berikut:

1. Unit ini berlaku untuk seluruh sektor teknologi informasi dan komunikasi

2. Menerapkan dasar-dasar pembuatan web statis dasar bersifat internal pada bidang
teknologi informasi dan komunikasi
1.1.5 Panduan Penilaian

1. Pengetahuan dan keterampilan penunjang untuk mendemontrasikan kompetensi,

diperlukan bukti keterampilan dan pengetahuan dibidang berikut ini:

1.1 Pengetahuan Dasar

1.2 Prinsip dan teknologi web

1.3 Prinsip kerja client server

1.4 Pengetahuan HTML

1.5 Memahami browser

1.6 Pengetahuan tentang internet

1.7 Keterampilan dasar

1.8 Penggunaan internet

2. Konteks penilaian

Kompetensi harus di ujikan di tempat kerja atau tempat lain secara teori dan praktek dengan
kondisi kerja sesuai dengan keadaan normal

3. Aspek penting penilaian

Aspek yang harus diperhatikan

3.1 Kemampuan memahami konsep dasar dan teknologi dari webpage

3.2 Mengorganisasikan dokumen menggunakan template

3.3 Menampilkan web pada browser

 1. 4. Kaitan dengan unit-unit lainnya

4.1 Unit ini didukung di dalam pemahaman tentang web statis/ html

4.2 Pengembangan pelatihan untuk memenuhi pengetahuan dasar akan teori web statis dan
penggunaannya.

1.1.6 Kompetensi Kunci

NO KOMPETENSI KUNCI DALAM UNIT INI TINGKAT

1 Mengumpulkan, mengorganisir dan menganalisa informasi 2
2 Mengkomunikasikan ide-ide dan informasi 2
3 Merencanakan dan mengorganisir aktivitas-aktivitas 2
4 Bekerja dengan orang lain dan kelompok 1
5 Menggunakan ide-ide dan teknik matematika 2
6 Memecahkan masalah 2
7 Menggunakan teknologi 2

BAB II

TAHAPAN BELAJAR

Langkah-langkah/tahapan belajar

1. Penyajian bahan, pengajaran dan peserta harus yakin dapat memenuhi seluruh rincian
yang tertuang dalam standar kompetensi.
2. Isi perencanaan merupakan kaitan antara kriteria unjuk kerja dengan pokok-pokok
keterampilan dan pengetahuan.
3. Peserta harus mengerti dan memahami pembangunan web statis
4. Peserta mengetahui, mengerti dan menguasai bahasa HTML
5. Peserta belajar mengembangkan dan mengaplikasikan pengetahuan dasar yang dimiliki
kedalam proses yang lebih kompleks.
6. Peserta mempelajari fungsi-fungsi lanjut untuk mempermudah proses perancangan web
dan untuk menyelesaikan proses yang lebih kompleks.
 Indikator
KUK Tahapan Belajar Sumber
Kerja
1. Konsep-konsep dan teknologi Mengerti Memahami apa yang HTML
1 web dijelaskan (URL, HTTP, tentang URL dimaksud dengan
HTML, web browser) web statis

Memahami Internet
teori dasar
HTML Membaca referensi
atau manual dari
web statis

1. Perbedaan antara klien dan Memahami Memahami apa yang HTML

2 server di jelaskan tentang klien dimaksud klien
Memahami
tentang
Server Internet
Memahami apa yang
dimaksud dengan
server

1. Cara Memahami Memahami

3 bagaimanabandwidthmempen pengaruh pengaruh bandwith
garuhi transmisi data dan bandwith dalam transmisi data Internet
gambar pada layar di jelaskan o HTML

1.4 Ciri-ciri dan fungsi dari Mengerti Membandingkan HTML

software teks editor yang fungsi editor penggunaan editor
tersedia untuk merancang web yang satu dengan
page di bandingkan editor lainnya
Internet

Editor
HTML
seperti
notepad,
frontpag
e,
dreamw
eaver

1.5 Keuntungan dan kerugian Mengerti Membaca referensi

running dari server yang di tentang mengenai jaringan
miliki dibandingkan server server dan komputer
provider di jelaskan provider HTML
Internet
Buku jaringan
internet

2.1 Software teks editor dan Memahami Mencoba

browser sesuai dengan tentang menggunakan
kebutuhan di indentifikasi browser beberapa jenis
yang bisa browser
digunakan HTML
Internet
Browser-browser
internet seperti
Netscape, Explorer,
Opera

2.2 Software beroperasi sesuai Memahami Menari informasi

dengan standar operasi bahwa setiap mengenai perbedaan
software software dan persyaratan dari
mempunyai tiap software
standar pembangunan web
 operasi yang HTML
berbeda Internet

2.3 Sketsa disain untuk web yang Memahami Mencoba mendisain

akan di buat sudah disiapkan konsep web
disain web Mempelajari contoh
sketsa disain web
dari web lain di
internet
HTML
Internet
Disain web
Buku tentang disain
web

2.4 Data yang akan di tampilkan Data yang Mengecek apakah

di web tersedia dimasukkan data yang
dalam web dikehendaki sudah
dapat brhasil ditampilkan
ditampilkan di internet
HTML
Internet

2.5 Area kerja untuk membuat Mampu Mengumpulkan

dokumen web baru sudah di menentukan informasi mengenai
siapkan lingkup web jenis web yang
hendak dibuat
HTML
Internet

3.1 Proses pembuatan web sesuai Mengetahui Mencari informasi

dengan standar operasi standar yang mengenai
aplikasi di lakukan dibutuhkan kompatibilitas dan
standar yang
diperlukan
HTML
Intenet

3.2 Web yang di buat tampil di Perintah Mencoba

layar sesuai dengan disain yang di menampilkan web
masukkan yang telah dibuat
dapat HTML
dikompilasik Internet
an (di
convert ke
bentuk html)
3.3 Data yang tersedia tampil di Tampilan Memeriksa apakah
layar web web sesuai tampilan sudah
dengan benar
 disain yang HTML
hendak Internet
ditampilkan
4.1 Link antar dokumen Berbagai Membaca buku
jenis link; referensi mengenai
link antar link
dokumen, Mencari informasi
link ke di internet
sumber lan, Mencoba melakukan
link ke perintah link
gambar Internet
HTML
Buku referensi
tentang link

4.2 Perbedaan client side image Menjelaskan Memahami

mapping dan server side image tentang perbedaan keduanya
mapping client side dan cara
image penggunaannya
mapping dan Internet
server side HTML
image
mapping
4.3 File index.html pada server Pentingnya Membuat file
dapat diidentifikasi index.html index.html atas web
sebagai yang hendak
permulaan dibangun
file suatu Mencari informasi
web di internet atau buku
referensi
Internet
HTML

4.4 In line image dengan Pengunaan Mencoba

perbedaan bagian yang di link link ke web menerapkan
(ke web page lain, gambar dan lain, gambar penggunaan in line
situs lain di internet) di buat dan web di image dengan link
internet Internet
HTML

5.1 Fitur-fitur template, seperti Penggunaan Memahami

membuat dokumen template template bagaimana cara
dengan berbagai fitur untuk untuk penggunaan
keperluan tertentu di pahami mempermud template dan
dan di aplikasikan ah kelebihannya
penyeragam Template
an disain dreamweaver
web Internet
 HTML

6.1 Format URL (Uniform Penjelasan Memahami

Resource Locator) di jelaskan tentang bagaimana URL
format URL bekerja
Mencari informasi
di internet atau buku
refrensi tentang
jaringan
Internet
URL
Buku tentang
jaringan

6.2 Peran dari browser dalam Setiap Memahami bahwa

membaca file-file web di browser tidak semua
demonstrasikan (text only, akan halaman web bisa
hypertex) dengan mengakses menghasilka ditampilkan di
ke URL tertentu melalui menu n tampilan browser yang
yang tersedia yang berbeda-beda
berbeda Mencoba
menampilkan web di
beberapa browser
yang bereda
Internet
Browser
Web

6.3 Perbedaan browser Pengecekan Menggunakan fitur

mempengaruhi tampilan dari kompatibilit dari Macromedia
halaman web dapat di as browser Dreamweaver untuk
identifikasi mengecek
kompatibilitas
browser terhadap
halaman web yang
dibangun
Mencari informasi
yang dibutuhkan di
internet
Internet
browser
 BAB III

TUGAS TEORI DAN UNJUK KERJA

3.1 Tugas Teori (Bobot 225)

Bacalah soal-soal berikut dengan seksama dan kerjakanlah dengan tepat!

1. Protokol jaringan dengan fitur-fitur Web-specific yang berjalan pada bagian teratas dari
dua lapisan protokol lain, TCP dan IP disebut (KUK 1.1)
2. HTML
3. TCP IP
4. HTTP
5. URL

1. Dibawah ini yang merupakan contoh web browser adalah (KUK 1.1)
2. Netscape Navigator
3. Microsoft Explorer
4. Opera
5. Semua benar
1. Bila sebuah clients kebanyakan hanya berisikan interface, maka client tersebut disebut
sebagai : (KUK 1.2) :
2. a. Thin client
3. b. Super client
4. c. Thick client
5. Web client

1. Bila sebuah teks atau gambar di-klik akan membawa anda menuju ke bagian lain
dalam web, maka teks tau gambar tersebut disebut : (KUK 4.1)
2. a. Website
3. URL
4. c. Link
5. Http

1. Fungsi menu wordwrap pada editor Notepad adalah (KUK 2.1)

2. Mengatur margin dokumen agar sesuai dengan ukuran jendela (window)
3. Untuk membuat file HTML
4. Mengatur jarak antar tiap barIs perintah HTML
5. Semua jawaban benar

1. Dibawah ini adalah beberapa hal yang harus diperhatikan dalam mendisain web, kecuali
(KUK 2.3)
2. Isi web
3. Pengecekan link
4. Navigasi web
5. Jenis tulisan (font)

1. Agar tampilan web mempunyai halaman yang sama (konsistensi disain), anda bisa
menggunakan (KUK 5.1)
 2. a. Layout
3. CSS
4. c. Template
5. Dreamweaver

1. Untuk memunculkan link pada jendela (window) baru, pada tag <A HREF> harus
dituliskan tambahan perintah (KUK 4.1)
2. _LINK
3. _BLANK
4. _ATRIBUT
5. b dan c keduanya benar

1. Perhatikan penggalan tag berikut!

<IMG SRC=PIC.GIF ALIGN = LEFT>

Tag di atas akan membuat tampilan seperti apa di web? (KUK 3.3)

1. Link ke gambar pc.gif

2. Gambar pic.gif dengan pemerataan kiri
3. Gambar pic.gif dengan pemerataan kanan
4. Tidak ada jawaban yang benar

10. Kelebihan penggunaan CSS adalah (KUK 3.3)

1. Bisa mengubah format keseluruhan dokumn html tanpa perlu mengeditnya satu per satu.
2. Bisa mempercantik tampilan web dengan merapikan tabel-tabel.
3. Bisa mengatur tampilan gambar beranimasi.
4. Bisa membuat frame di setiap halaman web secara terpisah.
11. Salah satu bahasa pemrograman kuat yang bisa di aplikasikan ke halaman web guna
membuat tampilan yang interaktif adalah (KUK 1.1)

1. Linux
2. Delphi
3. Javascript
4. Access

12. Bila kita ingin membuat link dari web kita ke www.google.com dari teks Klik Google maka
tag yang tepat adalah (KUK 4.1)

1. <A HREF =google.com>Klik Google

2. <A HREF=www.google.com Klik Google>
3. <A HREF=www.google.com>Klik Google</A>
4. <A HREF=www.google.com>Klik Google</A HREF>

13. Tag <FONT> berfungsi untuk (KUK 3.3)

1. Mengatur tampilan karakter

2. Mengatur ukuran tulisan
3. Mengarisbawahi kata
4. Mencetak tebal kata

14. Salah satu pilihan untuk membuka link adalah dengan membuka dokumen target di halaman
yang sama. Untuk melakukan cara ini maka harus ditambahkan perintah (KUK 4.1)

1. _parent
2. _blank

1. _self
2. Tidak perlu ditambahkan perintah
 1. 15. Mapping dimana web browser akan memproses perintah tanpa perlu
berinteraksi dengan serverdisebut jenis mapping (KUK 4.2)
2. a. Client side
3. b. Server side
4. c. Client server side
5. Multiple client side

1. 16. Alasan mengapa untuk pengkodean warna digunakan bilangan heksadesimal

adalah (KUK 3.3)
2. Computer secara universal mengenali bilangan heksadesimal
3. Keterbatasan definisi kata-kata dalam menggambarkan 256 jenis warna
4. Untuk penyesuaian dengan bahasa pemrograman yang lainnya
5. Jawaban a dan c benar

1. 17. Ada beberapa jenis link dalam halaman web, salah satunya adalah (KUK 4.1)
2. Link menuju ke website lain atau resource yang berbeda
3. Link menuju halaman lain dalam satu website
4. Link menuju bagian lain dari halaman web anda
5. Semua jawaban benar

1. 18. Ada 2 cara menggunakan CSS yaitu : (KUK 3.3)

2. Membuat file htm dengan judul css.html dan menyisipkannya di setiap halaman HTML
3. Menyisipkan kode html langsung ke tiap halaman HTML
4. Membuat file tersendiri berekstensi CSS
5. Tidak ada jawaban yang salah

1. 19. Berikut ini merupakan command untuk link ke alamat email satrio@yahoo.com bila
tulisan satrio di klik adalah (KUK 4.1)
2. <a href=mailto:satrio@yahoo.com> satrio</a>
3. <link=mailto:satrio@yahoo.com>satrio</link>
4. <meta=mailto:satrio@yahoo.com>satrio</meta>
5. Jawaban A dan C benar

1. 20. Berikut ini merupakan command untuk menambahkan table dalam halaman html
2. <table></table>
3. <link></link>
 4. <title></title>
5. <img src>
6. 21. Dibawah ini yang bukan termasuk sebagai html editor adalah
7. Notepad
8. Dreamweaver
9. Frontpage
10. Semua Salah

1. 22. Dalam membuat web, anda juga bisa menambahkan image yang anda ambil
dari internet, dimana bilaimage tersebut di klik akan me-refer penggunanya ke web asli
dari image tersebut. Metode ini disebut dengan (KUK 4.4)
2. a. In Line Image Mapping
3. b. Client Server Mapping
4. c. Client Side Mapping
5. Server Side Mapping

Perhatikan tag perintah di bawah ini untuk menjawab pertanyaan nomor 23

<HTML>

<HEAD>

<TITLE>Web baru </TITLE>

</HEAD>

<A HREF=document1.html target=_blank>silakan klik link ini</A>

<BODY ALINK=green BACKGROUND=black TEXT=blue> Testing </BODY>

</HTML>

1. 23. Perintah <ALINK> di atas untuk (KUK 3.3)

2. Membuat link ke file document1.html
3. Membuat warna link menjadi biru dan hijau
 4. Membuat warna link menjadi hijau
5. Membuat warna link menjadi hijau bila di klik

1. 24. Protokol yang bertanggung jawab memastikan file telah dikirim dari akhir network
telah lengkap dikirmkan, berhasil pada tujuannya disebut (KUK 1.1)
2. WWW
3. Http
4. URL
5. TCP IP
6. 25. Dibawah ini pernyataan yang benar tentang perbedaan web yang dijalankan
dari server sendiri denganserver provider adalah (KUK 1.5)
7. a. Server sendiri (LAN) mempunyai cakupan lebih kecil dibandingkan
dengan server provider
8. b. Server sendiri (LAN) dibatasi oleh bandwith
9. c. Server sendiri (LAN) mempunyai cakupan lebih besar dibandingkan
dengan server provider
10. d. Tidak ada pernyataan yang benar

Tugas Unjuk Kerja (Bobot 50)

1. Tuliskan mengenai : (KUK 1.2, 6.1)

1. Thick dan Thin Client (10).
2. Struktur URL dan penjelasannya (10)

1. Perhatikan gambar web berikut ini (KUK 1.4, 2.1, 2.2, 2.3, 3.1, 3.2, 3.3, 4.1, 4.3, 6.2).
(30)
1. Tuliskan perintah HTML untuk membuat web tersebut dengan HTML Editor
(disarankan dengan dreamweaver).
2. Tuliskan perintah HTML untuk mengubah web tersebut menjadi :

* Tambahkan link ke www.detik.com dengan tulisan link cari di detik

3.3 Daftar Cek Unjuk Kerja

Demonstrasikan validitas perencanaan berkaitan komponen standar kompetensi

 Kode unit : TIK.PR02.027.01
: MENERAPKAN DASAR DASAR PEMBUATAN WEB STATIK
Judul Unit TINGKAT DASAR
Nomor Elemen Ya Tidak KUK Ya Tidak
01 Menjelaskan konsep
1.1 Konsep-konsep dan teknologi web
dasar dan teknologi dari
dijelaskan
webpage
1.2 Perbedaan antara klien dan server di
jelaskan
1.3 Cara
bagaimana bandwidthmempengaruhi
transmisi data dan gambar pada layar di
jelaskan
1.4 Ciri-ciri dan fungsi dari software teks
editor yang tersedia untuk merancang
web page
1.5 Keuntungan dan kerugian running
dari server yang di miliki dibandingkan
server provider
02 Mempersiapkan
2.1 Software teks editor dan browser
pekerjaan pembuatan
sesuai dengan kebutuhan di indentifikasi
web
2.2 Software beroperasi sesuai dengan
standar operasi software
2.3 Sketsa disain untuk web yang akan di
buat sudah disiapkan
2.4 Data yang akan di tampilkan di web
tersedia
2.5 Area kerja untuk membuat dokumen
web baru sudah di siapkan
03 Melakukan 3.1 Proses pembuatan web sesuai
pembuatan dokumen dengan standar operasi aplikasi di
web baru lakukan
3.2 Web yang di buat tampil di layar
sesuai dengan disain
3.3 Data yang tersedia tampil di layar
web
04 Membuat link antar
4.1 Link antar dokumen
dokumen
4.2 Perbedaan client side image mapping
dan server ide image mapping dapat di
jelaskan
4.3 File index. HTML pada sebuah web
server di identifikasi
4.4 In line image dengan perbedaan
bagian yang di link
5.1 Fitur-fitur template, seperti membuat
05 Mengorganisasikan
dokumen template dengan berbagai fitur
dokumen dengan
untuk keperluan tertentu di pahami dan di
menggunakan template
aplikasikan
06 Menampilkan web
6.1 Format URL di jelaskan
dan browser
6.2 Peran dari browser dalam membaca
file-file web di demonstrasikan
 6.3 Perbedaan browser mempengaruhi
tampilan dari halaman web dapat di
identifikasi
Kondisi Unjuk Kerja
Penunjang Ketrampilan dan
Pengetahuan
Aspek aspek penting dalam
Pengujian

~-^- Selamat Mengerjakan -^-~