Menu
Pasang iklan SEO disini Murah, 300.000/6 Bulan dan dapatkan Trafik setiap harinya

Menerapkan Dasar-Dasar Pembuatan Web Statik Tingkat Dasar TIK.PR02.027.01

May
07
2015
by : Bupeko. Posted in : blog

 

MATERI PELATIHAN BERBASIS KOMPETENSI

SEKTOR TELEMATIKA

SUB SEKTOR PROGRAMMER KOMPUTER

 

 

 

MENERAPKAN DASAR-DASAR

PEMBUATAN WEB

STATIK TINGKAT DASAR

TIK.PR02.027.01

 

                                                                                  

 

 

BUKU INFORMASI

 

 

 

 

 

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       PENGANTAR                                                                                     5

1.1   Konsep Dasar Pelatihan Berbasis Kompetensi                                 5

1.2   Penjelasan Modul                                                                        5

1.2.1  Isi Modul                                                                          6

1.2.2  Pelaksanaan Modul                                                            7

1.3   Pengakuan Kompetensi Terkini (RCC)                                           7

1.4   Pengertian Istilah-istilah                                                             8

 

BAB II     STANDAR KOMPETENSI                                                                     10

2.1   Peta Paket Pelatihan                                                                   10

2.2   Pengertian Unit Standar                                                              10

2.3   Unit Kompetensi Yang Dipelajari                                                  11

2.3.1  Kode dan Judul Unit                                                         11

2.3.2  Deskripsi Unit                                                                  11

2.3.3  Elemen Kompetensi                                                          12

2.3.4  Batasan Variabel                                                               15

2.3.5  Panduan Penilaian                                                            15

2.3.6  Kompetensi Kunci                                                             17

 

BAB III    STRATEGI DAN METODE PELATIHAN                                                18

3.1   Strategi Pelatihan                                                                    18

3.2   Metode Pelatihan                                                                     19

 

BAB IV     MATERI UNIT KOMPETENSI                                                             20

4.1   Tujuan Instruksional Umum                                                       20

4.2   Tujuan Instruksional Khusus                                                      20

 

4.3   Menjelaskan konsep dasar dan teknologi dari webpage                21

4.3.1 Konsep-konsep dan teknologi web                                     21

4.3.2 Perbedaan antara klien dan server                                     23

4.3.3 Bagaimana bandwidth mempengaruhi transmisi                   24

4.3.4 Ciri-ciri dan fungsi dari software teks editor yang tersedia    untuk merancang web page   24

4.3.5 Keuntungan dan kerugian running dari server yang                  di miliki dibandingkan server provider                                                    24

 

4.4   Mempersiapkan pekerjaan pembuatan web                                  25

4.4.1 Software teks editor dan browser sesuai dengan          kebutuhan di indentifikasi          25

4.4.2 Software beroperasi sesuai dengan standar operasi        software   26

4.4.3 Sketsa disain untuk web yang akan di buat                         26

4.4.4 Data yang akan di tampilkan di web tersedia                      27

4.4.5 Area kerja untuk membuat dokumen web baru                    27

 

4.5   Melakukan pembuatan dokumen web baru                                    28

4.5.1 Proses pembuatan web sesuai dengan standar operasi      aplikasi di lakukan      29

4.5.2 Web yang di buat tampil di layar sesuai dengan disain         29

4.5.3 Data yang tersedia tampil di layar web                               30

 

4.6   Membuat link antar dokumen                                                      33

4.6.1 Link antar dokumen                                                         35

4.6.2 Perbedaan client side image mapping dan server                   side image mapping          36

4.6.3 File index HTML pada sebuah web server diidentifikasi         36

4.6.4 In line image dengan perbedaan bagian yang di link            36

 

4.7   Mengorganisasikan dokumen dengan menggunakan template        37

4.7.1 Fitur-fitur template                                                          37

 

4.8   Menampilkan web dan browser                                                  38

4.8.1 Format URL                                                                    38

4.8.2 Peran browser dalam membaca file-file web                        39

4.8.3 Perbedaan browser mempengaruhi tampilan dari            halaman web     39

BAB V      SUMBER-SUMBER YANG DIPERLUKAN UNTUK

PENCAPAIAN KOMPETENSI                                                              41

5.1   Sumber Daya Manusia                                                               41

5.2   Literatur                                                                                  42

5.3   Lain-lain                                                                                  42

5.4   Daftar Peralatan dan Bahan yang Digunakan                               43

 

DAFTAR PUSTAKA                                                                                         44

 

 

 

BAB I

PENGANTAR

 

 

5.1        Konsep Dasar Pelatihan Berbasis Kompetensi

Pelatihan berbasis kompetensi adalah pelatihan yang memperhatikan pengetahuan, keterampilan dan sikap yang diperlukan di tempat kerja agar dapat melakukan pekerjaan secara kompeten. Lalu, apa arti kompeten di tempat kerja?

Jika Anda kompeten dalam pekerjaan tertentu, berarti Anda memiliki seluruh keterampilan, pengetahuan dan sikap yang perlu untuk ditampilkan secara efektif di tempat dimana Anda bekerja, sesuai dengan standar yang telah disetujui dan ditetapkan.

 

5.1        Penjelasan Modul

Modul ini dikonsep agar dapat digunakan pada proses Pelatihan Konvensional/Klasikal dan Pelatihan Individual/Mandiri. Yang dimaksud dengan Pelatihan Konvensional/Klasikal, yaitu pelatihan yang dilakukan dengan melibatkan bantuan seorang pembimbing atau guru seperti proses belajar mengajar sebagaimana biasanya dimana materi hampir sepenuhnya dijelaskan dan disampaikan pelatih/pembimbing yang bersangkutan.

Sedangkan yang dimaksud dengan Pelatihan Mandiri/Individual adalah pelatihan yang dilakukan secara mandiri oleh peserta sendiri berdasarkan materi dan sumber-sumber informasi dan pengetahuan yang bersangkutan. Pelatihan mandiri cenderung lebih menekankan pada kemauan belajar peserta itu sendiri. Singkatnya pelatihan ini dilaksanakan pseserta dengan menambahkan unsur-unsur atau sumber-sumber yang diperlukan baik dengan usahanya sendiri maupun melalui bantuan dari pelatih.

 

 

 

1..1      Isi Modul

Modul ini terdiri dari 3 bagian, antara lain sebagai berikut:

  1. Buku Informasi

Buku informasi merupakan sumber materi pelatihan bagi pelatih maupun pserta pelatihan.

 

  1. Buku Kerja

Buku kerja digunakan oleh peserta pelatihan untuk mencatat setiap pertanyaan dan kegiatan praktik baik dalam Pelatihan Konvensional maupun Pelatihan Individual/Mandiri.

Buku ini diberikan kepada peserta pelatihan dan berisi:

-      Kegiatan-kegiatan yang akan membantu peserta pelatihan untuk mempelajari dan memahami materi/informasi yang disajikan.

-      Kegiatan pemeriksaan yang digunakan untuk memantau pencapaian ketrampilan peserta pelatihan.

-      Kegiatan penilaian untuk menilai kemampuan peserta pelatihan dalam melaksanakan praktik kerja.

 

  1. Buku Penilaian

Buku penilaian ini digunakan oleh pelatih untuk menilai jawaban dan tanggapan peserta pelatihan pada Buku Kerja dan berisi :

-      Kegiatan-kegiatan yang dilakukan oleh peserta pelatihan sebagai pernyataan keterampilan.

-      Metode-metode yang disarankan dalam proses penilaian keterampilan peserta pelatihan.

-      Sumber-sumber yang digunakan oleh peserta pelatihan untuk mencapai keterampilan.

-      Semua jawaban pada setiap pertanyaan yang diisikan pada Buku Kerja.

-      Petunjuk bagi pelatih untuk menilai setiap kegiatan praktik.

-      Catatan pencapaian keterampilan peserta pelatihan.

1..2      Pelaksanaan Modul

Pada Pelatihan Klasikal/Konvensional, pelatih akan:

-      Menyediakan Buku Informasi yang dapat digunakan peserta pelatihan sebagai sumber pelatihan.

-      Menyediakan salinan Buku Kerja kepada setiap peserta pelatihan.

-      Menggunakan Buku Informasi sebagai sumber utama dalam penyelenggaraan pelatihan.

-      Memastikan setiap peserta pelatihan memberikan jawaban/ tanggapan dan menuliskan hasil tugas praktiknya pada Buku Kerja.

 

Pada Pelatihan Individual/Mandiri, peserta pelatihan akan:

-      Menggunakan Buku Informasi sebagai sumber utama pelatihan.

-      Menyelesaikan setiap kegiatan yang terdapat pada buku Kerja.

-      Memberikan jawaban pada Buku Kerja.

-      Mengisikan hasil tugas praktik pada Buku Kerja.

-      Memiliki tanggapan-tanggapan dan hasil penilaian oleh pelatih.

 

1.3        Pengakuan Kompetensi Terkini

Pengakuan Kompetensi Terkini dikenal juga dengan RCC (Recognition of Current Competency). Jika Anda telah memiliki pengetahuan dan keterampilan yang diperlukan untuk elemen unit kompetensi tertentu, Anda dapat mengajukan pengakuan kompetensi terkini (RCC). Berarti Anda tidak akan dipersyaratkan untuk belajar kembali.

 

Anda mungkin sudah memiliki pengetahuan dan keterampilan, karena Anda telah:

  1. Bekerja dalam suatu pekerjaan yang memerlukan suatu pengetahuan dan keterampilan yang sama, atau
  2. Berpartisipasi dalam pelatihan yang mempelajari kompetensi yang sama, atau
  3. Mempunyai pengalaman lainnya yang mengajarkan pengetahuan dan keterampilan yang sama.

 

5.1        Pengertian Istilah-istilah

Berikut adalah pengertian dari beberapa istilah yang digunakan dalam Pelatihan Berbasis Kompetensi, antara lain:

  1. Profesi

Profesi adalah suatu bidang pekerjaan yang menuntut sikap, pengetahuan serta ketrampilan/keahlian kerja tertentu yang diperoleh dari proses pendidikan, pelatihan serta pengalaman kerja atau penguasaan sekumpulan kompetensi tertentu yang dituntut oleh suatu pekerjaan/jabatan.

  1. Standardisasi

Standardisasi adalah proses merumuskan, menetapkan serta menerapkan suatu standar tertentu.

  1. Penilaian / Uji Kompetensi

Penilaian atau Uji Kompetensi adalah proses pengumpulan bukti melalui perencanaan, pelaksanaan dan peninjauan ulang (review) penilaian serta keputusan mengenai apakah kompetensi sudah tercapai dengan membandingkan bukti-bukti yang dikumpulkan terhadap standar yang dipersyaratkan.

  1. Pelatihan

Pelatihan adalah proses pembelajaran yang dilaksanakan untuk mencapai suatu kompetensi tertentu dimana materi, metode dan fasilitas pelatihan serta lingkungan belajar yang ada terfokus kepada pencapaian unjuk kerja pada kompetensi yang dipelajari.

  1. Kompetensi

Kompetensi adalah kemampuan seseorang untuk menunjukkan aspek sikap, pengetahuan dan keterampilan serta penerapan dari ketiga aspek tersebut ditempat kerja untuk mwncapai unjuk kerja yang ditetapkan.

  1. Standar Kompetensi

Standar kompetensi adalah standar yang ditampilkan dalam istilah-istilah hasil dsn memiliki format standar yang terdiri dari judul unit, deskripsi unit,

elemen kompetensi, kriteria unjuk kerja, ruang lingkup serta pedoman bukti.

  1. Sertifikat Kompetensi

Adalah pengakuan tertulis atas penguasaan suatu kompetensi tertentu kepada seseorang yang dinyatakan kompeten yang diberikan oleh Lembaga Sertifikasi Profesi.

  1. Sertifikasi Kompetensi

Adalah proses penerbitan sertifikat kompetensi melalui proses penilaian/uji kompetensi.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BAB II

                                           STANDAR KOMPETENSI

 

 

 

2.1        Peta Paket Pelatihan

Modul yang sedang Anda pelajari ini bertujuan untuk mencapai satu unit kompetensi. Adapun kompetensi ini termasuk dalam satu paket pelatihan, yang terdiri atas unit-unit kompetensi berikut:

  1. TIK.PR02.024.01     Membuat dokumen dengan HTML sesuai spesifikasi
  2. TIK.PR02.027.01     Menerapkan dasar – dasar pembuatan web statik tingkat dasar

 

2.2        Pengertian Unit Standar

Apakah Standar Kompetensi? Setiap Standar Kompetensi menentukan:

  1. Pengetahuan dan keterampilan yang diperlukan untuk mencapai kompetensi.
  2. Standar yang diperlukan untuk mendemonstrasikan kompetensi.
  3. Kondisi dimana kompetensi dicapai.

Di dalam unit kompetensi ini, Anda akan mempelajari pemrograman data deskripsi lanjut untuk melengkapi pengetahuan yang telah Anda kuasai pada pelatihan mengenai pemrograman data deskripsi dasar sebelumnya.

Sistem pelatihan berbasis kompetensi terfokus pada pencapaian kompetensi, bukan pada lamanya waktu. Namun diharapkan pelatihan ini dapat dilaksanakan dan dicapai dalam jangka waktu tidak lebih dari seminggu, tiga sampai lima hari. Pelatihan ini diperuntukkan bagi semua pengguna terutama yang tugasnya berkaitan dengan pengelolaan, pemeliharaan dan perancangan Website.

Jika Anda belum mencapai kompetensi pada usaha/kesempatan pertama, Pelatih Anda akan mengatur rencana pelatihan dengan Anda. Rencana ini akan memberikan Anda kesempatan kembali untuk meningkatkan level kompetensi Anda sesuai dengan level yang diperlukan. Jumlah maksimum usaha/kesempatan yang disarankan adalah 3 (tiga) kali.

 

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

2.3.1   Kode dan Judul Unit

Kode Unit     : TIK.PR02.027.01

Judul Unit     : Menerapkan dasar – dasar pembuatan web statik tingkat dasar

 

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

 

 

 

 

 

 

 

 

ELEMEN KOMPETENSI

KRITERIA UNJUK KERJA

01  Menjelaskan konsep dasar dan teknologi dari webpage 1.1      Konsep-konsep dan teknologi web dijelaskan (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 pekerjaan pembuatan web 2.1      Software teks editor dan browser sesuai dengan 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 pembuatan      dokumen web baru 3.1  Proses pembuatan web sesuai dengan       standar 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 antar      dokumen 4.1     Link antar dokumen di buat seperti link 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 dengan menggunakan template Fitur-fitur template, seperti membuat dokumen 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

 

 

 

 

 

BATASAN VARIABEL

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

 

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

 

4.  Kaitan dengan unit-unit lainnya

4.1           Unit ini di dukung oleh pengetahuan dan keterampilan dalam unit-unit kompetensi yang berkaitan dengan dasar-dasar teknologi informasi

4.1.1           Mengoperasikan web browser

4.1.2     Menjelaskan arsitektur web

4.1.3     Menggunakan internet

4.1.4     Menjelaskan protokol internet

4.1.5     Menerapkan standar keselamatan kerja

4.1.6     TIK.PR02.024.01 Membuat dokumen dengan HTML sesuai spesifikasi

 

4.2               Unit ini mendukung kinerja dalam unit-unit kompetensi yang berkaitan      dengan web:

4.2.1    Perancangan web

4.2.2    Pemograman web

 

4.3               Pengembangan pelatihan untuk memenuhi persyaratan dalam unit ini perlu          dilakukan dengan hati-hati. Untuk pelatihan pra kejuruan umum, institusi harus menyediakan pelatihan yang mempertimbangkan serangkaian       konteks industri seutuhnya tanpa bias terhadap sekor tertentu. Batasan   variable akan membantu dalam hal ini. Untuk sektor tertentu/khusus,        pelatihan harus disesuaikan untuk memenuhi kebutuhan sektor tersebut.

 

 

 

 

 

 

 

 

 

Kompetensi Kunci

 

 NO KOMPETENSI KUNCI DALAM UNIT INI TINGKAT

1

Mengumpulkan, mengorganisir dan menganalisa informasi

3

2

Mengkomunikasikan ide-ide dan informasi

3

3

Merencanakan dan mengorganisir aktivitas-aktivitas

3

4

Bekerja dengan orang lain dan kelompok

2

5

Menggunakan ide-ide dan tehnik matematika

2

6

Memecahkan masalah

2

7

Menggunakan teknologi

3

 

BAB III

STRATEGI DAN METODE PELATIHAN

 

3.1.      Strategi Pelatihan        

Belajar dalam suatu Sistem Berbasis Kompetensi berbeda dengan yang sedang “diajarkan” di kelas oleh Pelatih. Pada sistem ini Anda akan bertanggung jawab terhadap belajar Anda sendiri, artinya bahwa Anda perlu merencanakan belajar Anda dengan Pelatih dan kemudian melaksanakannya dengan tekun sesuai dengan rencana yang telah dibuat.

 

Persiapan/perencanaan

  1. Membaca bahan/materi yang telah diidentifikasi dalam setiap tahap belajar dengan tujuan mendapatkan tinjauan umum mengenai isi proses belajar Anda.
  2. Membuat catatan terhadap apa yang telah dibaca.
  3. Memikirkan bagaimana pengetahuan baru yang diperoleh berhubungan dengan pengetahuan dan pengalaman yang telah Anda miliki.
  4. Merencanakan aplikasi praktik pengetahuan dan keterampilan Anda.

 

Permulaan dari proses pembelajaran

  1. Mencoba mengerjakan seluruh pertanyaan dan tugas praktik yang terdapat pada tahap belajar.
  2. Merevisi dan meninjau materi belajar agar dapat menggabungkan pengetahuan Anda.

 

Pengamatan terhadap tugas praktik

  1. Mengamati keterampilan praktik yang didemonstrasikan oleh Pelatih atau orang yang telah berpengalaman lainnya.
  2. Mengajukan pertanyaan kepada Pelatih tentang konsep sulit yang Anda temukan.

Implementasi

  1. Menerapkan pelatihan kerja yang aman.
  2. Mengamati indikator kemajuan personal melalui kegiatan praktik.
  3. Mempraktikkan keterampilan baru yang telah Anda peroleh.

 

Penilaian

Melaksanakan tugas penilaian untuk penyelesaian belajar Anda.

 

3.2.          Metode Pelatihan      

Terdapat tiga prinsip metode belajar yang dapat digunakan. Dalam beberapa kasus, kombinasi metode belajar mungkin dapat digunakan.

Belajar secara mandiri

Belajar secara mandiri membolehkan Anda untuk belajar secara individual, sesuai dengan kecepatan belajarnya masing-masing. Meskipun proses belajar dilaksanakan secara bebas, Anda disarankan untuk menemui Pelatih setiap saat untuk mengkonfirmasikan kemajuan dan mengatasi kesulitan belajar.

Belajar Berkelompok

Belajar berkelompok memungkinkan peserta untuk dating bersama secara teratur dan berpartisipasi dalam sesi belajar berkelompok. Walaupun proses belajar memiliki prinsip sesuai dengan kecepatan belajar masing-masing, sesi kelompok memberikan interaksi antar peserta, Pelatih dan pakar/ahli dari tempat kerja.

Belajar terstruktur

Belajar terstruktur meliputi sesi pertemuan kelas secara formal yang dilaksanakan oleh Pelatih atau ahli lainnya. Sesi belajar ini umumnya mencakup topik tertentu.

 

 

BAB IV

MATERI UNIT KOMPETENSI

 

4.1        Tujuan Instruksional Umum

  • Siswa mampu menceritakan dan menjelaskan konsep pembuatan web dasar (web statis)
  • Siswa dapat mengoperasikan atau membangun web sederhana dengan bahasa pemrograman dasar HTML

 

4.2        Tujuan Instruksional Khusus

  • Siswa mengerti dan mampu menjelaskan apa yang dimaksud dengan HTML (Hypertext Markup Languange), HTTP, Internet, browser
  • Siswa dapat menggolongkan perintah apa saja yang temasuk pemrograman dasar/ HTML
  • Siswa mengerti dan mampu Situs Web dengan bahasa HTML
  • Siswa dapat menggolongkan perintah apa saja yang termasuk HTML
  • Siswa dapat menjelaskan penggunaan Web
  • Siswa mengerti perbedaan client server dan web server
  • Siswa mengerti apa yang dimaksud dengan perencanaan web
  • Siswa mengerti penerapan Macromedia Dreamweaver dalam desain web lanjutan
  • Siswa mengerti penggunaan template untuk penyamaan layout web
  • Siswa dapat mengelola dan membuat pemrograman web dasar dengan baik dan benar

 

 

 

 

 

 

 

4.3        Menjelaskan konsep dasar dan teknologi dari webpage

          HTML atau lengkapnya disebut Hypertext Markup Languange adalah bahasa yang mengatur/ membangun fungsi-fungsi perintah untuk ditampilkan dalam halaman web. Yang bisa dimunculkan dalam tampilan web antar lain berupa teks, gambar, dan multimedia. Kombinasi dari ketiganya akan menghasilkan tampilan web yang menarik.

 

4.3.1   Konsep-konsep dan teknologi web

          HTML

          HTML adalah bahasa standard dalam pembuatan website. Sebuah website umumnya terdiri dari beberapa halaman. Halaman-halaman website itu adalah file-file HTML yang di dalamnya berisi perintah-perintah yang anda tulis.

      

                   HTTP

          HTTP singkatan dari “HyperText Transfer Protocol“. Adalah protokol jaringan dengan fitur-fitur Web-specific yang berjalan pada bagian teratas dari dua lapisan protokol lain, TCP dan IP.

 

TCP & IP

TCP adalah sebuah protokol yang bertanggung jawab untuk memastikan file yang dikirim dari akhir network telah lengkap dikirimkan, berhasil pada tujuannya. IP merupakan sebuah protokol yang mengarahkan (me-routing) file dari satu host ke host lain pada jalannya untuk tujuan. HTTP menggunakan dua protokol ini untuk memastikan bahwa permintaan dan respond telah lengkap dikirimkan diantara masing-masing akhir komunikasi.

HTTP menggunakan urutan Request/Response: Sebuah HTTP client membuka koneksi dan mengirim sebuah pesan permintaan pada HTTP server; server kemudian mengirimkan pesan respon, biasanya berisikan resource yang diminta. Setelah mengirimkan respon, server menutup koneksi (membuat HTTP menjadi protokol tanpa status, contoh, tidak memelihara beberapa informasi koneksi diantara transaksi).

 

URL

Singkatan dari Uniform Resource Locator adalah standar peg-alamatan (address-ing) sebuah file di Internet yang dirancang khusus untuk digunakan dengan browser WWW seperti Netscape, Internet Explorer, Opera, dan lain-lain

WWW

Merupakan sebuah sistem dimana informasi (teks, gambar, suara, dan lain-lain) dipresentasikan dalam bentuk hypertext dan dapat diakses oleh sebuah peraga WWW (yang sering disebut sebagai browser).

Informasi di WWW pada umumnya ditulis dalam bentuk HTML (Hypertext Markup Language). Selain itu, informasi lain dapat berupa gambar (dalam format GIF, JPG, PNG), suara (dalam format AU, WAV), dan objek multimedia lainnya (seperti MIDI, Shockwave, Quicktime Movie, 3D World).

Javascript

Javascript adalah bahasa pemrograman yang bila diaplikasikan ke halaman web akan membuat halaman tersebut menjadi lebih interaktif karena kemampuannya mengakses objek (object oriented). Umumnya untuk halaman web sederhana, aplikasi javascript digunakan untuk validasi form, membuat tampilan gambar yang lebih interaktif, menampilkan pesan pada status bar, dan fungsi-fungsi lainnya.

 

Internet

Internet adalah hubungan antar jaringan dimana dalam jaringan tersebut,  komputer yang terkoneksi di dalamnya mampu melakukan komunikasi. Untuk menghubungkan koneksi internet dibutuhkan sebuah mesin yang dsebut gateway. Gateway akan menyambungkan hubungan antar jaringan dan melaksanakan terjemahan yang diperlukan, baik perangkat keras maupun perangkat lunaknya.

 

4.3.2   Perbedaan antara klien dan server 

            Sistem operasi jaringan Client Server memungkinkan jaringan untuk memusatkan fungsi dan aplikasi kepada satu atau dua dedicated file server. File server memungkinkan untuk mengakses sumber daya, dan menyediakan keamanan.

Aplikasi web adalah jenis aplikasi yang menggunakan arsitektur client-server. Pada jenis arsitektur ini, program client terhubung pada sebuah server untuk informasi yang dibutuhkan untuk melengkapi tugas-tugas yang telah diset oleh user. Ada 2 jenis client, yaitu:

  • Thin client

Thin client adalah clients yang hanya berisikan sedikit dari apa yang diperlukan untuk pengalaman user, kebanyakan hanya interface. Semua logika bisnis, semua data, terkecuali yang disediakan oleh user, berada di dalam server.

  • Thick client

Thick clients adalah clients yang sama, kecuali pada interface, juga berisi logika pengolahan yang diperlukan untuk tugas-tugas user yang spesifik.

Client digunakan untuk aplikasi web thin client. Proram client, pada hal ini adalah browser, hanya sebuah interface yang oleh user digunakan untuk melaksanakan tugas-tugas. Sedangkan data  yang diperlukan untuk dijalankan dan logika yang menjalankan program berada di server.

Logika dasarnya adalah, server menerima permintaan dari web browser dan kemudian meresponnya. Beberapa permintaan yang datang dari client disertai nama dan alamat item yang dicari computer client. Server akan menerima permintaan tersebut, memprosesnya dan kemudian merespon data yang dicari oeh client. Bila server gagal merespond, akan ditampilkan kode error yang mengindikasikan bahwa item yang dicari tidak terdapat pada server (atau mungkin akan diberikan kode error lain sesuai dengan jenis error yang terjadi).

Web Client

Ketika user me-request suatu permintaan (seperti  mengisi form, mencari gambar, dll), user akan melakukannya dalam browser, dan browser akan memformat permintaan tersebut menjadi suatu kode yang dapat dimengerti oleh server. Kemudian server akan memproses permintaan tersebut dan mengirimkan respond. Browser akan mengambil data yang dibutuhkan dari respond yang diberikan server dan kemudian menampilkannya untuk user.

 

4.3.3   Cara bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layer

            Bandwith adalah sarana transmisi dalam sebuah jaringan. Besarnya bandwith akan mempengaruhi seberapa cepat sebuah data atau gambar dapat ditransmisikan.

 

4.3.4   Software teks editor yang tersedia untuk merancang web page

Penulisan perintah HTML dapat dituliskan di software yang telah tersedia dalam komputer pada umumnya, yaitu word processor seperti Microsoft Word, Word Pad atau NotePad. Yang banyak digunakan orang sebagai media penulisan HTML adalah Notepad.

 

4.3.5   Keuntungan dan kerugian running dari server yang di miliki dibandingkan server provider

     Dibawah ini tabel mengenai perbedaan running web dari server yang dimiliki dengan server provider.

 

 

  Server Sendiri (LAN) Server Provider (Internet)
Cakupan Cakupannya lebih kecil Cakupan lebih luas
Akses data Akses tidak dibatasi oleh bandwih Akses data dibatasi oleh bandwith
     

 

4.4        Mempersiapkan pekerjaan pembuatan web

     Sebelum membuat web, beberapa point dibawah ini perlu diperhatikan dahulu.

 

4.4.1   Software teks editor dan browser sesuai dengan kebutuhan

Software teks editor yang paling sederhana dan paling banyak digunakan adalah teks editor yang telah tersedia dari program windows, yaitu Notepad.

Untuk membuka program Notepad, klik Start, kemudian Program, cari Accessories, dan klik Notepad. Lebih jelasnya anda bisa lihat di gambar berikut.

 

 

Buka program Notepad anda dan aktifkan menu ‘Wordwrap’. Penulisan kode HTML umumnya panjang dan melebar ke samping, untuk mengatasi hal tersebut dalam menu Notepad ada fitur ‘Wordwrap’ yang bila diaktifkan maka secara otomatis akan memformat baris-baris tersebut dalam ukuran window sehingga lebih mudah dibaca. Untuk mengaktifkan caranya anda klik menu Format lalu Wordwrap (lihat gambar di bawah ini).

 

 

 

4.4.2   Software beroperasi sesuai dengan standar operasi software

            Beberapa jenis software hanya bisa digunakan dengan standar tersendiri, biasanya menyangkut kemampuan dari komputer yang digunakan, seperti memori komputer, prosesor, ataupun media VGA nya. Hal yang sama juga berlaku pada software pembuat web, seperti Macromedia Dreamweaver, Microsoft Frontpage. Standar yang diperlukan tergantung pada versi dari software tersebut.

 

4.4.3   Sketsa disain untuk web yang akan di buat

            Suatu disain web yang baik memiliki kesatuan disain, atau kesamaan tema dalam halaman-halaman web nya. Hal ini sangat penting untuk diperhatikan supaya pengunjung web tidak mengalami kebingungan dalam menelurusuri halaman-halaman web anda.

Kesamaan disain yang harus anda perhatikan biasanya adalah dari segi kesamaan jenis huruf, background, warna link, menu, letak menu, dan hal-hal umum lainnya.

Beberapa hal yang harus diperhatikan dalam mendisain web, seperti:

  • Isi dari web tersebut
  • Link-link yang tersambung (link tersebut tidak error bila di klik)
  • Kemudahan navigasi web, jangan sampai membingungkan user
    • Besar file dari halaman web yang akan di download untuk ditampilkan di browser.

Ada baiknya anda menentukan prioritas atas web anda, tentunya tergantung pada target dari web tersebut. Misalnya anda membuat web tentang promosi barang, maka anda akan cenderung lebih mementingkan disain yang semenarik mungkin untuk mendapatkan perhatian pengunjung web.

 

4.4.4   Data yang akan di tampilkan di web tersedia

            Siapkan data-data yang hendak anda tampilkan, misalnya anda ingin membuat web tentang promosi barang, maka siapkan rancangan disain web anda, gambar-gambar yang hendak ditampilkan, warna serta gambar background dan isi tulisan dari web tersebut.

 

4.4.5   Area kerja untuk membuat dokumen web baru

Tentukan lingkup atau batasan dari web anda, dalam arti jangan sampai web yang anda bikin pada akhirnya tidak jelas maksud dan tujuannya. Misalnya anda ingin membuat web tentang katalog barang perusahaan, maka fungsikan web anda seperti halnya sebuah katalog yang memberikan informasi kepada pelanggan, tidak perlu ditambahkan berbagai macam fitur yang tidak ada hubungannya yang justru akan membingungkan user.

 

 

 

4.5        Melakukan pembuatan dokumen web baru

            Secara umum, langkah-langkah persiapan untuk membuat suatu web baru adalah:

  • Merumuskan tujuan pembuatan web

Berdasarkan isi/ tujuan, umumnya web dapat digolongkan menjadi beberapa jenis, yaitu :

  1. 1.    Web marketing

Faktor paling penting dalam web ini adalah disain, yang harus bisa menarik pengunjung untuk mampir ke web anda.

  1. 2.    Web customer service

Berfungsi sebagai media untuk melayani konsumen.

  1. 3.    Web e-commerce

Sebagai media transaksi online

  1. Web berita

Sebagai media informasi dan berita dimana keakuratan informasi yang disampaikan menjadi faktir paling penting.

  • Menentukan isi web

Isi web yang hendak anda tampilkan tentunya tergantung pada jenis web yang hendak anda buat.

  • Menentukan target web

Anda perlu membuat suatu gambaran target yang akan dituju, karena para pengakses web menggunakan browser yang berbeda, kecepatan koneksi internet yang berbeda, serta monitor dengan resolusi internet yang berbeda pula.

  • Menentukan struktur web

Struktur web akan menentukan kemudahan manajemen web, struktur yang baik akan memudahkan pengelolanya untuk mengontrol web tersebut.

 

 

 

4.5.1   Proses pembuatan web sesuai dengan standar operasi aplikasi di lakukan

Ada beberapa standar aplikasi yang perlu diperhatikan untuk menjalankan sebuah web, seperti :

  1. Nama domain

Yang berfungsi sebagai alamat dari web tersebut. Seperti www.google.com. Nama domain ini harus melalui proses registrasi terlebih dahulu agar terdaftar di internet.

  1. 2.    Web Hosting

Tempat untuk meletakkan file-file web agar bisa diakses di internet.

  1. Upload hasil disain web ke internet.

 

4.5.2   Web yang di buat tampil di layar sesuai dengan disain

Untuk memastikan web yang dibuat tampil sesuai dengan disain, cara paling mudah adalah dengan menjalankan web tersebut. Contoh paling sederhana adalah dengan menggunakan editor Notepad. Ketikkan perintah HTML sederhana seperti berikut ini, dan simpanlah file tersebut dengan ekstention .html.

<HTML>

<HEAD>

<TITLE>Perintah Body Sederhana</TITLE>

</HEAD>

<BODY BGCOLOR=”Blue” TEXT=”Black” ALINK=”RED” VLINK=”#FF0000”  LINK=”Green”>

<B>huruf tebal</B>

<I>huruf miring</I>

<U>garis bawah</U>

<B><I>huruf tebal dan cetak miring</B></I>

</BODY>

</HTML>

 

 

Untuk menampilkan web tersebut, bukalah file html anda dengan browser (contoh : Internet Explorer), hasilnya akan ditampilkan seperti berikut :

 

 

4.5.3   Data yang tersedia tampil di layar web

Data untuk web tersebut akan ditampilkan sebagaimana yang anda kehendaki saat menuliskan tag-tag html nya. Seperti contoh di atas, sebagaimana perintah html untuk membuat warna background menjadi biru dan tulisan menjadi kuning, maka data tersebut akan ditampilkan seperti contoh di atas.

Contoh data di bawah ini dan tampilannya di halaman web :

<HTML>

<HEAD>

<TITLE>Belajar HTML</TITLE>

</HEAD>

<BODY>

<UL> List Hari: <BR>

<L1> Monday <BR>

<L1> Tuesday <BR>

<L1> Wednesday <BR>

<L1> Thursday <BR>

<L1> Friday <BR>

<L1> Saturday <BR>

</UL>

Modul&nbsp;Training

<BR>

<A HREF=”coba.htm”>LINK</A>

</BODY>

</HTML>

 

Tampilan dari perintah HTML di atas adalah:

 

 

Di bawah ini beberapa tag dasar untuk menampilkan karakter fisik HTML :

Tag

Fungsi

<FONT> Untuk mengatur tampilan karakter (jenis huruf)
<SMALL> Untuk membuat ukuran tulisan menjadi lebih kecil
<BIG> Untuk membuat ukuran tulisan menjadi lebih besar
<STRIKE> Untuk menampilkan coretan pada huruf (garis horizontal di tengah-tengah tulisan)
<U> Untuk menggarisbawahi kata
<B> Untuk menebalkan kata/ tulisan
<I> Untuk mencetak miring kata/ tulisan
<TT> Untuk membuat tampilan huruf di web seperti huruf pada mesin ketik

 

Untuk mengatur data berupa gambar, gunakan tag berikut ini :

  • Align = untuk pemerataan / margin kanan atau kiri
  • Width = Untuk mengatur lebar gambar
  • Border = Untuk memberi bingkai pada gambar
  • Height = Untuk menentukan tinggi gambar
  • Alt = Untuk memberikan text alternatif bila gambar tidak berhasil ditampilkan pada web.
  • Title = Untuk memberikan keterangan tentang gambar. (Bila pointer mouse diarahkan ke gambar, maka akan muncul tulisan yang menjelaskan gambar tersebut).

 

Dalam mendefiniskan jenis warna pada perintah HTML digunakan bilangan heksadesimal. Misalnya kode #FF0000 mewakili warna merah. Penggunaan bilangan heksadesimal dilakukan karena keterbatasan kata-kata dalam mendefinisikan jenis warna, misalnya merah muda, coklat muda. Dengan kode heksadesimal, bisa diperoleh 256 jenis warna yang berbeda. Kode warna ditulis dengan format heksa #rrggbb. Berikut ini adalah 16 kode warna dasar.

 

Anda bisa mengkombinasikan angka-angka untuk mendapatkan campuran warna yang diinginkan. Komposisinya adalah sebagai berikut, 2 digit pertama mewakili warna merah, 2 digit berikutnya mewakili warna hijau, dan 2 digit terakhir mewakili warna hijau.

 

 

Tabel warna dasar bilangan heksadesimal.

Color Hexadecimal Color Hexadecimal
Black #000000 Blue #0000FF
Olive #808000 Lime #00FF00
White #FFFFFF Fuchsia #FF00FF
Green #008000 Maroon #800000
Red #FF0000 Gray #808080
Teal #008080 Purple #800080
Yellow #FFFF00 Silver #COCOCO
Navy #000080 Aqua #00FFFF

 

Dalam melakukan pengeditan dokumen HTML, ada fitur praktis yang bisa digunakan, yakni CSS. CSS atau kepanjangan dari Cascading Style Sheet adalah kumpulan atribut yang dapat digunakan untuk mengatur tampilan banyak dokumen bersamaan. Dengan menggunakan CSS kita bisa mengubah format keseluruhan dokumen atau file-file html tanpa mengeditnya satu per satu, karena CSS dapat menjadi suatu file yang terpisah dari dokumen-dokumen lain yang terhubung dengannya.

Ada 2 cara penggunaan CSS yaitu:

  1. Dengan menyisipkan kode CSS langsung dengan kode HTML

2.  Membuat file terpisah (dengan ekstensi .css).

 

4.6        Membuat Link

Pengertian Link adalah sebuah teks atau gambar yang bila di-klik akan membawa anda menuju ke bagian lain dalam web. Link biasanya ditandai dengan teks warna biru bergarisbawah. Tag pembuka untuk membuat link adalah <HREF> dan tag penutupnya adalah </A>. Kode dasarnya adalah: <A HREF=”Link tujuan”>nama link anda</A>

Contoh penggunaan, anda ingin membuat link dalam web anda yang bila diklik akan memunculkan halaman yahoo.com.

<A HREF=www.yahoo.com>Klik yahoo.com</A>

Ada beberapa jenis link yang bisa anda gunakan, berdasarkan lokasi tujuannya link dibedakan :

  • Link menuju bagian lain dari halaman web anda
  • Link menuju halaman lain dalam satu website

Karena link menuju ke web yang sama, maka tidak perlu dituliskan alamat URL web tersebut, cukup dituliskan lokasi file-nya. Ada beberapa variasi penulisan kode link tergantung pada letak file disimpan.

« Bila file berlokasi pada folder yang sama dengan file dari link tersebut maka cukup dituliskan nama file-nya, misalnya: href=”modul1.htm”

« Bila file yang dituju itu berada dalam folder yang lain di bawah folder yang ditempati oleh link tersebut, maka harus dituliskan nama folder-nya. Misalnya: href=”modul1/test001.htm”

« Bila file yang dituju itu berada dalam folder yang lain di atas folder yang ditempati oleh file dari link tersebut maka dituliskan seperti berikut: href=”../rainbow.gif”

« Bila file yang dituju letaknya dua tingkat di atas maka dituliskan dua kali titik dua seperti ini: href=”../../rainbow2.gif” dan seterusnya

  • Link menuju ke website lain atau resource yang berbeda
  • Link yang menuju ke bagian tertentu (bookmark)
  • Link yang menuju ke suatu file yang dapat ditampilkan dalam browser, misalnya file image atau animasi
  • Link yang menuju ke suatu 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 di-klik, 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 disebut download. Cara penulisan alamat link ini sama saja dengan cara penulisan link biasa.
  • Link yang mengarah ke alamat email. Bila link ini diklik akan membuka jendela pengiriman email dari program email yang terinstall pada komputer user (misalnya Microsoft Outlook). Pada kotak tujuan email (To:) sudah tercantum alamat email tujuan. Contoh penulisan seperti : href=”mailto:adifitrah@maktoob.com”

 

Penambahan link dimaksudkan agar pengguna dapat mencari informasi yang dibutuhkan secara cepat tanpa harus terlebih dahulu membaca keseluruhan isi. Penambahan link dapat diimplementasikan pada sekelompok kata, frase, atau gambar.

 

4.6.1   Link antar dokumen

Anda juga bisa membuat link dengan dokumen lain, caranya dengan mengarahkan perintah <A HREF> ke dokumen yang hendak anda sambungkan. Contoh <A HREF=”coba.htm”>LINK</A>. Artinya perintah ini akan menampilkan tulisan LINK di web anda yang bisa di klik akan membawa me-link ke dokumen “coba.htm”.

 

Untuk memunculkan halaman yang dituju oleh link ada 2 cara, yaitu:

  • Pemunculan pada halaman yang sama. Ini adalah cara default, artinya bila tidak dituliskan perintah apapun, maka cara pemunculan halaman tempat link akan menggantikan halaman yang saat itu sedang dibuka.
  • Pemunculan pada window (jendela) baru, artinya akan muncul window baru yang menampilkan halaman link yang di klik, sementara itu halaman yang sebelumnya masih dibuka. Untuk membuat pemunculan seperti itu, anda cukup menampilkan atribut TARGET=”_blank” dalam isi tag <A HREF>.

Contoh: <A HREF=”www.yahoo.com” target=”_blank”>link</A>

 

 

 

 

 

4.6.2   Perbedaan Client Side Image Mapping dan Server Side Image Mapping

Ada 2 jenis mapping, yaitu:

  1. Server Side Image Mapping

Mapping jenis ini diwakili oleh web server, cara mapping tergantung pada software yang di-install ke web server. Dalam server side image map, ketika user meng-klik, maka browser akan mentransfer koordinat dari sumber klik tersebut (user) ke program yang dijalankan di web server. Program ini kemudian memeriksa map data dan menentukan link-nya.

 

  1. Client Side Image Mapping

Mapping jenis ini diwakili oleh web browser (mapping ditambahkan pada halaman host page). Web browser akan memproses tanpa perlu berinteraksi dengan server. Cara ini akan mengurangi beban server sehingga bisa memberikan feedback yang lebih baik pada halaman web pengunjung (host page). Perbedaan paling mendasar antara client side dan server side adalah pada client side mapping semua link dan perintah (map files) disimpan langsung di dokumen HTML. Jadi browser memproses semua pekerjaan secara lokal. Kelemahannya adalah hanya beberapa jenis browser yang mendukung pilihan ini.

             

4.6.3   File index. HTML pada sebuah web server di identifikasi

Untuk menempatkan web yang anda buat (web hosting), gunakan nama file index.html. Yang perlu anda perhatikan adalah selalu gunakan nama index.html untuk file awal yang hendak anda munculkan ketik web dibuka.

 

4.6.4   In line image dengan perbedaan bagian yang di link

Dalam membuat web, anda juga bisa menambahkan image yang anda ambil dari internet, dimana bila image tersebut di klik akan me-refer penggunanya ke web asli dari image tersebut. Ini yang disebut sebagai In line image. Misalnya dalam web anda menambahkan icon google yang bila icon tersebut di klik akan membawa penggunanya masuk ke halaman www.google.com.

 

4.7        Mengorganisasikan Dokumen Dengan Menggunakan Template

            Template adalah dokumen yang bisa digunakan untuk membuat banyak dokumen lain dengan layout yang sama. Dengan menggunakan template, kita dapat membuat web yang memiliki kesamaan disain. Selain itu, kita juga dengan mudah dapat mengubah disain secara keseluruhan karena dengan mengubah template, maka secara otomatis semua dokumen web yang dibuat dengan template tersebut secara otomatis ikut berubah juga.

Template sangat berguna terutama bila sebuah web dikerjakan secara bersama-sama dalam sebuah tim. Dengan adanya template, maka setiap halaman web yang dikerjakan oleh disainer yang berbeda akan menghasilkan tampilan web yang sama.

 

4.7.1   Fitur-Fitur Template

Macromedia Dreamweaver menyimpan file template dengan ekstensi .dwt pada folder Templates pada folder root dari situs lokal anda. Jika folder ini belum ada, maka Dreamweaver akan membuatnya secara otomatis. File template tidak boleh diletakkan diluar folder Templates, karena bila diletakkan di luar folder Templates, maka akan mengakibatkan error saat anda bekerja dengan templates.

Saat membuat file template, anda harus mendefinisikan daerah yang hendak anda kunci (lock) dan daerah yang bisa di-edit. Daerah yang di-lock tidak dapat di-edit saat digunakan untuk membuat dokumen lain dengan template tersebut, sedangkan daerah yang dapat di-edit dapat digunakan.

Untuk membuat file template, anda bisa menggunakan dokumen web yang sudah ada untuk anda simpan sebagai template. Cara menyimpan dokumen sebagai template adalah sebagai berikut :

  • Pilih file yang hendak anda jadikan template
  • Simpan file tersebut dengan memilih menu File > Save as Template

4.8        Menampilkan Web dan Browser

Rancanglah agar web anda bisa ditampilkan oleh semua browser. Beberapa browser mempunyai kelebihan dan kekurangan yang berbeda. Suatu halaman web yang indah di browser Internet Explorer kadang-kadang hanya tampak sebagai gambar kosong (blank) di browser lain, seperti Netscape Navigator. Oleh karena itu, ada baiknya anda mengetes web anda dengan menampilkannya di beberapa browser yang berbeda.

 

4.8.1   Format URL

Seperti telah dijelaskan di bagian sebelumnya, pada dasarnya semua web yang ada diinternet memiliki alamat sendiri. URL digunakan sebagai alamat suatu web di dunia internet. Format URL dapat disederhanakan sebagai berikut :

Bagaimana://Siapa/Dimana/Apa

                     atau

              Protokol://hostname/direktori/nama file

 

              Bagaimana

Bagian ini menunjukkan bagaimana cara data dikirimkan. Dalam bahasan internet disebut sebagai protokol. Untuk aplikasi World Wide Web (WWW) digunakan protokol http. Oleh karena itu pada bagian awal URL dideklarasikan sebagai berikut :

http://

 

              Siapa

Bagian ini berisi nama komputer tempat resource berada atau disebut dengan hostname. Misalkan suatu halaman web diletakkan di www.google.com, maka penambahan URL pada bagian ini menjadi :

http://www.google.com

 

 

              Dimana

Bagian ini menunjukkan lokasi yang lebih spesifik tempat menyimpan resource internet tersebut. Secara fisik bagian ini berisi nama direktori tempat penyimpanan resource yang bersangkutan.

http://www.google.com/home

 

              Apa

Bagian ini menunjukkan nama file yang akan digunakan. Untuk aplikasi web, file ini berisi kode-kode HTML dan teks. Contoh URL yang digunakan  :

http://www.google.com/home/index.html

 

 

4.8.2   Peran Dari Browser  Dalam Membaca File-File Web

Dalam membuat web, anda bisa membuat web yang bisa ditampilkan disemua browser ataupun yang hanya bisa ditampilkan di beberapa browser tertentu. Beberapa fungsi atau elemen yang anda tambahkan pada saat membuat web mungkin tidak bisa ditampilkan dalam browser tertentu. Misalnya elemen layer, merupakan salah satu elemen yang hanya didukung oleh browser versi 4 ke atas, sehingga bisa pengguna membuka halaman web dengan browser versi sebelumnya, elemen ini tidak akan tampak (blank).

 

4.8.3   Perbedaan Browser Mempengaruhi Tampilan Dari Halaman Web Dapat Diidentifikasi

Dalam Dreamweaver, anda bisa mengecek apakah halaman web yang dibuat compatible  atau tidak dengan versi browser tertentu. Fasilitas cek target browser melakukan pengecekan pada kode html dari halaman web. Dreamweaver menyediakan fasilitas cek browser untuk browser Netscape Navigator versi 2.0, 3.0 dan 4.0. sedangkan pengecekan browser untuk keluaran Microsoft adalah Microsoft Internet Explorer versi 2.0 hingga 5.0.

 

Cara menjalankan cek target browser :

  1. Pilih salah satu cara berikut :
  • Bila ingin mengecek dokumen yang sedang anda kerjakan sekarang, simpanlah file anda untuk memastikan perubahan terakhir yang anda buat ikut di cek.
  • Bilaingin mengecek suatu direktori atau situs, pilih Window > Site Files untuk membuka window site FTP, kemudian pilih folder dari direktori lokal.
  1. Pilih menu File > Check Target Browsers
  2. Pilih primary browser yang hendak di test
  3. Dari daftar browser yang ada, pilih target browser, klik Do Check
  4. Laporan target browser akan dibuka pada primary browser
  5. Untuk menyimpan laporan ini, pilih menu File > Save pada browser

 

Biasakan diri anda untuk melakukan preview halaman web yang anda buat di untuk melihat tampilan sebenarnya dari dokumen web yang anda buat.

 

BAB V

SUMBER-SUMBER YANG DIPERLUKAN UNTUK

PENCAPAIAN KOMPETENSI

 

5.1        Sumber Daya Manusia

Dalam proses pencapaian kompetensi sumber yang dapat diandalkan adalah sumber daya manusia. Sumber daya manusia yang dimaksud disiini adalah orang-orang yang dapat mendukung proses pencapaian kompetensi yang dimaksud, antara lain:

  • Pembimbing

Pembimbing Anda merupakan orang yang dapat diandalkan karena beliau memiliki pengalaman. Peran Pembimbing adalah untuk :

  1. Membantu Anda untuk merencanakan proses belajar.
  2. Membimbing Anda melalui tugas-tugas pelatihan yang dijelaskan dalam tahap belajar.
  3. Membantu Anda untuk memahami konsep dan praktik baru dan untuk menjawab pertanyaan Anda mengenai proses belajar Anda.
  4. Membantu Anda untuk menentukan dan mengakses sumber tambahan lain yang Anda perlukan untuk belajar Anda.
  5. Mengorganisir kegiatan belajar kelompok jika diperlukan.
  6. Merencanakan seorang ahli dari tempat kerja untuk membantu jika diperlukan.
  • Penilai

Penilai Anda melaksanakan program pelatihan terstruktur untuk penilaian di tempat kerja. Penilai akan :

  1. Melaksanakan penilaian apabila Anda telah siap dan merencanakan proses belajar dan penilaian selanjutnya dengan Anda.
  2. Menjelaskan kepada Anda mengenai bagian yang perlu untuk diperbaiki dan merundingkan rencana pelatihan selanjutnya dengan Anda.
  3. Mencatat pencapaian / perolehan Anda.
  • Teman kerja/sesama peserta pelatihan

Teman kerja Anda/sesama peserta pelatihan juga merupakan sumber dukungan dan bantuan. Anda juga dapat mendiskusikan proses belajar dengan mereka. Pendekatan ini akan menjadi suatu yang berharga dalam membangun semangat tim dalam lingkungan belajar/kerja Anda dan dapat meningkatkan pengalaman belajar Anda.

 

5.2        Literatur

Disamping dengan belajar dengan orang-orang seperti yang disebutkan diatas, Anda tentu perlu juga terus menambah wawasan dan pengetahuan Anda dari sumber-sumber bacaan seperti buku-buku yang berkaitan dengan kompetensi yang Anda pilih, jurnal-jurnal, majalah, dan sebagainya.

Literatur dalam hal ini tentu bukan saja material berupa bacaan atau buku melainkan termasuk pula material-material lainnya yang menjadi pendukung proses pembelajaran ketika peserta pelatihan sedang menggunakan Pedoman Belajar ini. Misalnya rekaman dalam bentuk kaset, video, dan sebagainya.

Buku referensi, lembar kerja, tugas-tugas kerja juga dapat digunakan dalam proses pencapaian kompetensi. Peserta boleh mencari dan menggunakan sumber-sumber alternatif lain yang lebih baik atau sebagai pendukung tambahan atau jika ternyata sumber-sumber yang direkomendasikan dalam pedoman belajar ini tidak tersedia/tidak ada.

Untuk referensi mengenai materi-materi yang dapat digunakan, Anda dapat melihat dari Daftar Pustaka yang terlampir dihalaman terakhir modul ini.

 

5.3        Lain-lain

Untuk memahami lebih jauh mengenai cara-cara membangun halaman website, anda tentu membutuhkan latihan-latihan dan contoh-contoh penerapan langsung. Lebih baik lagi bila latihan dilakukan langsung di software yang mendukung pembangunan web, seperti Macromedia Dreamweaver, Mocrosoft Frontpage. Dalam software-software tersebut, terdapat banyak kemudahan untukmembuat web, baik dalam template-template perintah maupun fitur-fitur yang tersedia.  Seperti yang telah saya tekankan dari awal, disini kita hanya membahas konsep bahasa html dasar secara umum.

5.4         Daftar Peralatan dan Bahan yang digunakan

 

  1. Judul/Nama Pelatihan        :    Menerapkan dasar-dasar pembuatan web statik tingkat dasar
  2. Kode Program Pelatihan    :    TIK.PR02.027.01

 

NO

UNIT

KOMPETENSI

KODE UNIT

DAFTAR PERALATAN

DAFTAR BAHAN

KETERANGAN

1.

Menerapkan dasar-dasar pembuatan web statik

TIK.PR02.027.01

- Unit PC (Personal Computer) dengan CD drive dan Floppy Disk.

- PC dengan sistem operasi minimal Windows 98 (di atas Windows 98 lebih bagus)

- Keyboard dan mouse

- RAM dengan ukuran yang sesuai dengan kebutuhan.

- CD Installation untuk HTML Editor, misalnya Dreamweaver

 

 

- CD installer HTML editor Macromedia Dreamweaver

- Buku informasi atau referensi installation Macromedia Dreamweaver

- Buku referensi tentang pemrograman HTML

- Sumber-sumber dari internet tentang pemrograman HTML

 

-

 

 

 

 

 

DAFTAR PUSTAKA

 

 

 

 

 

Testimoni

artikel lainnya Menerapkan Dasar-Dasar Pembuatan Web Statik Tingkat Dasar TIK.PR02.027.01



bebas bayar, pembayaran mudah dan cepat, transaksi online, pembayaran tagihan dan tiket, transfer dana online

bebas bayar, pembayaran mudah dan cepat, transaksi online, pembayaran tagihan dan tiket, transfer dana online
Monday 16 February 2015 | blog

MATERI PELATIHAN BERBASIS KOMPETENSI SEKTOR TEKNOLOGI INFORMASI DAN KOMUNIKASI             MEMPERBAIKI…

Sunday 16 November 2014 | blog

  MODUL PELATIHAN BERBASIS KOMPETENSI SUB BIDANG METODOLOGI PELATIHAN KERJA     MELAKUKAN PEMBENTUKAN SIKAP INSTRUKTUR…

Wednesday 14 September 2011 | blog

KOMPETENSI DASAR Sekolah Menengah Atas (SMA)/ Madrasah Aliyah (MA) KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN 2013 KATA PENGANTAR…

Sunday 3 May 2015 | blog

MATERI PELATIHAN BERBASIS KOMPETENSI SEKTOR TEKNOLOGI INFORMASI DAN KOMUNIKASI             MEMBUAT…