Menu
Pasang iklan SEO disini Murah, 25000 setahun dan dapatkan Trafik setiap harinya

Menerapkan Dasar-Dasar Pembuatan Web Statik Lanjut TIK.PR02.028.01

May
08
2015
by : Bupeko. Posted in : blog

MATERI PELATIHAN BERBASIS KOMPETENSI

SEKTOR TELEMATIKA

SUB SEKTOR PROGRAMMER KOMPUTER

 

 

MENERAPKAN DASAR-DASAR

PEMBUATAN WEB  STATIK LANJUT

TIK.PR02.028.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 ………………………………………………………………………………… ………1

 

BAB I. 3

PENGANTAR. 3

1.1   Konsep Dasar Competency Based Training (CBT) 3

1.2   Penjelasan Modul 3

1.2.1   Desain Modul 3

1.2.2   Isi Modul 4

1.2.3   Pelaksanaan Modul 4

1.3   Pengakuan Kompetensi Terkini (RCC) 5

1.4   Pengertian-Pengertian / Istilah. 5

 

BAB II. 7

STANDAR KOMPETENSI. 7

2.1   Peta Paket Pelatihan. 7

2.2   Pengertian Unit Standar Kompetensi 7

2.3   Unit Kompetensi Yang Dipelajari 7

2.3.1 Kode dan Judul Unit 8

2.3.2 Deskripsi Unit 8

2.3.3 Elemen Kompetensi 8

2.3.4 Batasan Variabel 9

2.3.5 Panduan Penilaian. 9

2.3.6 Kompetensi Kunci 11

 

BAB III. 12

STRATEGI DAN METODE PELATIHAN. 12

3.1   Strategi Pelatihan. 12

3.2   Metode Pelatihan. 13

 

BAB IV. 14

MATERI UNIT KOMPETENSI. 14

4.1   Tujuan Instruksional Umum.. 14

4.2   Tujuan Instruksional Khusus 14

4.3   Mengidentifikasi prosedur pengoperasian editor teks 15

4.4   Mengaplikasikan fitur-fitur different level heading, paragraph, font, list,       table  19

4.5   Melakukan editing  sederhana. 32

4.6   Menggunakan fitur-fitur tambahan untuk memformat layout halaman. 35

4.7   Mengintegrasikan dokumen web dengan obyek lain seperti grafik, animasi, audio, video. dll 43

 

BAB V. 49

SUMBER-SUMBER YANG DIPERLUKAN UNTUK PENCAPAIAN                          KOMPETENSI  49

5.1   Sumber Daya Manusia. 49

5.2   Sumber-sumber Kepustakaan ( Buku Informasi ) 50

5.3   Daftar Peralatan dan Bahan yang digunakan. 50

 

DAFTAR PUSTAKA. 51

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BAB I

PENGANTAR

 

 

1.1  Konsep Dasar Competency Based Training (CBT)

  • Apakah pelatihan berdasarkan kompetensi?

Pelatihan berdasarkan kompetensi adalah pelatihan yang memperhatikan pengetahuan, keterampilan dan sikap yang diperlukan di tempat kerja agar dapat melakukan pekerjaan dengan kompeten. Standar Kompetensi dijelaskan oleh Kriteria Unjuk Kerja.

 

  • Apakah artinya menjadi kompeten ditempat kerja?

Jika anda kompeten dalam pekerjaan tertentu, anda memiliki seluruh keterampilan, pengetahuan dan sikap yang perlu untuk ditampilkan secara efektif ditempat kerja, sesuai dengan standar yang telah disetujui.

 

 

1.2     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 peserta dengan menambahkan unsur-unsur atau sumber-sumber yang diperlukan baik dengan usahanya sendiri maupun melalui bantuan dari pelatih.

 

 

1.2.1  Desain Modul

Modul ini didesain untuk dapat digunakan pada Pelatihan Klasikal dan Pelatihan Individual / mandiri:

  • Pelatihan klasikal adalah pelatihan yang disampaikan oleh seorang pelatih.
  • Pelatihan individual / mandiri adalah pelatihan yang dilaksanakan oleh peserta dengan menambahkan unsur-unsur / sumber-sumber yang diperlukan dengan bantuan dari pelatih.

 

1.2.2  Isi Modul

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

 

Buku Informasi

Buku informasi ini adalah sumber pelatihan untuk pelatih maupun peserta pelatihan.

 

Buku Kerja

Buku kerja ini harus digunakan oleh peserta pelatihan untuk mencatat setiap pertanyaan dan kegiatan praktek baik dalam Pelatihan Klasikal maupun Pelatihan Individual / mandiri.

 

Buku ini diberikan kepada peserta pelatihan dan berisi:

  • Kegiatan-kegiatan yang akan membantu peserta pelatihan untuk mempelajari dan memahami informasi.
  • Kegiatan pemeriksaan yang digunakan untuk memonitor pencapaian keterampilan peserta pelatihan.
  • Kegiatan penilaian untuk menilai kemampuan peserta pelatihan dalam melaksanakan praktik kerja.

 

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.3   Pelaksanaan Modul

Pada pelatihan klasikal, 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 (RCC)

  • Apakah Pengakuan Kompetensi Terkini (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.

 

 

1.4 Pengertian-Pengertian / Istilah

Profesi

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

 

Standarisasi

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

 

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.

 

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.

 

Kompetensi

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

 

Standar Kompetensi

Standar kompetensi adalah standar yang ditampilkan dalam istilah-istilah hasil serta memiliki format standar yang terdiri dari judul unit, deskripsi unit, elemen kompetensi, kriteria unjuk kerja, ruang lingkup serta pedoman bukti.

 

Sertifikat Kompetensi

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

 

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 Statis Dasar
  3. TIK.OP02.006.01    Mengoperasikan Penelusur Web (Web Browser)
  4. TIK.PR02.026.01     Menjelaskan Koneksi Internet
  5. TIK.PR04.005.01     Menerapkan Konten Web Memenuhi Protokol Standar
    1. TIK.OP01.005.01    Mengimplementasikan Sistem Keamanan dan Keselamatan pada Pengoperasian Komputer

 

 

2.2 Pengertian Unit Standar Kompetensi

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 bagaimana cara menerapkan dasar-dasar pembuatan web statik lanjut, dalam hal ini menggunakan HTML.

 

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 khusus bagi para technical support, walaupun tidak menutup kemungkinan bagi semua orang yang terlibat dalam penggunaan komputer.

 

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 kriteria unjuk   kerja telah dimasukkan dalam pelatihan dan penilaian.

 

 

2.3.1 Kode dan Judul Unit

Kode Unit       : TIK.PR02.028.01

Judul Unit       : Menerapkan Dasar-Dasar Pembuatan Web  Statik Lanjut

 

 

2.3.2 Deskripsi Unit

Unit kompetensi ini berkaitan dengan penerapan dasar-dasar pembuatan web statik pada tingkat lanjut. Dimana penerapan tersebut mencakup: pengidentifikasian prosedur pengoperasian teks beserta fitur-fitur yang ada, pengelolaan editing sederhana pada web, dan pengintegrasian dokumen web dengan obyek lain.

 

 

2.3.3 Elemen Kompetensi

ELEMEN KOMPETENSI

KRITERIA UNJUK KERJA

01 Mengidentifikasi prosedur pengoperasian editor teks 1.1   Prosedur pengoperasian software editor teks sesuai dengan standar operasi software diidentifikasi.

1.2   Pengoperasian software disesuaikan dengan standar operasi.

02 Mengaplikasikan fitur- fitur different level       heading, paragraph, font, list, table 2.1   Fitur-fitur different level heading diidentifikasi dan diaplikasikan.

2.2   Fitur-fitur paragraph diidentifikasi dan diaplikasikan.

2.3     Fitur-fitur font diidentifikasi dan diaplikasikan.

2.4     Fitur-fitur bullets, numbers dan style diidentifikasi dan diaplikasikan.

2.5     Fitur-fitur table diidentifikasi dan diaplikasikan.

03 Melakukan editing     sederhana 3.1   Fitur-fitur manipulasi teks diaplikasikan.

3.2   Fitur-fitur editing sederhana digunakan seperti format teks, bullets, background diaplikasikan.

04 Menggunakan fitur-fitur     tambahan untuk     memformat layout      halaman 4.1   Fitur-fitur background color digunakan seperti : solid color atau nilai kode heksadesimal, background dengan sebuah file grafik, warna untuk teks dan hyperlink, diidentifikasi dan diaplikasikan.

4.2   Fitur-fitur table seperti size dan warna border, warna background, penggunaan background gambar, cell dengan warna yang berbeda-beda, diidentifikasi dan diaplikasikan.

4.3   Fitur-fitur frame pada halaman untuk pengorganisasian informasi seperti footer, header, horizontal split, vertical split diidentifikasi dan diaplikasikan.

 

05 Mengintegrasikan     dokumen web dengan     obyek lain seperti       grafik, animasi, audio,      video. dll 5.1     Obyek lain seperti grafik, animasi, audio, video disisipkan ke dalam halaman web.

5.2     Sebagian atau keseluruhan web halaman dapat disisipkan obyek lain.

5.3     Teknik-teknik manipulasi audio didemonstrasikan.

5.4     Teknik-teknik kompresi audio dan video didemonstrasikan.

Tabel 1 Elemen Kompetensi

 

 

2.3.4 Batasan Variabel

Batasan variabel dalam bahasan ini adalah:        

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

  1. Menerapkan dasar-dasar pembuatan web statik lanjut bersifat internal pada bidang teknologi informasi dan komunikasi.

 

 

2.3.5 Panduan Penilaian

  1. 1.   Pengetahuan dan keterampilan penunjang

Untuk mendemonstrasikan kompetensi diperlukan bukti keterampilan dan pengetahuan di bidang berikut ini:

1.1.   Pengetahuan Dasar :

1.1.1    Prinsip dan teknologi web.

1.1.2    Prinsip kerja client server.

1.1.3    Pengetahuan tentang internet.

1.1.4    Pengetahuan HTML.

1.2.   Keterampilan Dasar

1.2.1    Penggunaan internet

1.2.2    Penggunaan editor teks

 

 

2.  Konteks penilaian

Kompetensi harus diujikan di tempat kerja atau di tempat lain secara praktek dengan kondisi kerja sesuai dengan keadaan normal.

 

 

3.  Aspek penting penilaian

Aspek yang harus diperhatikan :

3.1     Kemampuan mengaplikasikan fitur-fitur different level heading, pragraph, font, list, table pada halaman web.

3.2     Kemampuan menggunakan fitur-fitur tambahan untuk memformat layout    halaman.

3.3     Kemampuan mengintegrasikan dokumen web dengan obyek (grafik, animasi, audio, video dll).

 

 

4.  Kaitan dengan unit-unit lainnya

4.1.   Unit ini didukung 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.1.7    TIK.PR02.027.01 Menerapkan dasar-dasar pembuatan web statik dasar.

 

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

4.2.1    Perancangan web

4.2.2    Pemrograman 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 sektor tertentu. Batasan variabel akan membantu dalam hal ini. Untuk sektor tertentu/khusus pelatihan harus disesuaikan untuk memenuhi kebutuhan sektor tersebut.

 

 

2.3.6 Kompetensi Kunci

     Kompetensi kunci dalam bahasan ini dapat dilihat dalam tabel di bawah ini.

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 teknik matematika

2

6

Memecahkan masalah

2

7

Menggunakan teknologi

2

Tabel 1 Kompetensi Kunci

 

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 melakukan praktek 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 dapat menerapkan dasar-dasar pembuatan web statik pada tingkat lanjut.
  • Siswa dapat melakukan pembuatan web statik dengan berbagai fitur yang ada.

 

 

4.2 Tujuan Instruksional Khusus

  • Siswa dapat mengidentifikasi prosedur pengoperasian editor teks.
  • Siswa dapat mengaplikasikan fitur-fitur different level heading, paragraph, font, list, table pada dokumen web.
  • Siswa dapat melakukan editing sederhana pada dokumen web.
  • Siswa dapat menggunakan fitur-fitur tambahan untuk memformat layout halaman pada dokumen web.
  • Siswa mengintegrasikan dokumen web dengan obyek lain seperti grafik, animasi, audio, video, dan lain-lain.

 

 

4.3    Mengidentifikasi prosedur pengoperasian editor teks

 

4.3.1   Prosedur pengoperasian software editor teks sesuai dengan standar operasi software diidentifikasi

Untuk membuat suatu dokumen web, kita memerlukan text editor dan editor GUI (Graphical User Interface).

Text Editor

Untuk membuat suatu dokumen web pada text editor, kita harus mengetik kode HTML secara manual. Dan untuk membuat dokumen HTML, tidak terbatas pada penggunaan satu text editor namun banyak jenis text editor yang dapat kita gunakan, misalnya Notepad, WordPad, Textpad, dsb. Selain ada hal yang perlu diperhatikan, untuk menyimpan (save) dokumen HTML, kita perlu menyimpan file text dengan filename extension berupa “.htm” atau “.html”.

 

Berikut adalah tampilan text editor menggunakan Notepad:

 

 

 

Berikut adalah tampilan text editor menggunakan WordPad:

 

 

 

Berikut adalah tampilan text editor menggunakan Textpad:

 

 

 

Layout editor

Selain menggunakan text editor untuk membuat suatu dokumen web, kita dapat pula menggunakan layout editor dimana layout editor adalah GUI (Graphical User Interface) yang merupakan program yang menyediakan navigasi visual dengan menu-menu dan icon dan menampilkan fungsi otomatisasi ketika kita mengklik suatu tombol (button). GUI editor memungkinkan kita untuk membuat halaman HTML tanpa perlu untuk mengetikkan kode HTML pada text editor. Untuk menggunakan GUI editor, kita hanya perlu mengklik icon yang memiliki fungsi yang kita inginkan lalu kode HTML akan secara otomatis di-generate oleh program. Berikut adalah beberapa contoh GUI editor, seperti:

  • Macromedia Dream weaver
  • MS-FrontPage/FrontPage Express
  • Adobe Go Live
  • Netscape Composer
  • Allaire Home Site

 

Berikut merupakan contoh GUI editor yang menggunakan MS-FrontPage:

 

 

 

 

 

 

Berikut merupakan contoh GUI editor yang menggunakan Macromedia Dreamweaver:

 

 

 

 

 

 

 

4.3.2   Pengoperasian software disesuaikan dengan standar operasi

Dalam pembuatan suatu dokumen web, kita harus memperhatikan bahwa web tersebut dapat dioperasikan atau dijalankan dalam browser manapun, dimana bila suatu web semakin dapat dijalankan pada berbagai browser maka web tersebut semakin memiliki portabilitas yang tinggi. Hinggi saat ini seperti yang kita ketahui, browser-browser yang ada sudah semakin banyak, seperti: Microsoft Internet Explorer, Mozilla Firefox, Opera, dan lain-lain.

 

Selain itu, kita harus yakin bahwa suatu dokumen web harus mudah diakses oleh pengunjungnya. Aksesibilitas suatu website mempunyai dua karakteristik, yaitu: dari segi front-end memiliki interface yang user-friendly, hal ini meliputi grafik yang eye-catching dan struktur informasi yang baik sehingga pembaca dapat memperoleh keuntungan yang maksimum dari isi dalam website. Karakteristik lainnya, yaitu dari segi back-end, website harus mudah untuk di download oleh komputer pengunjung, kemampuan ini didasarkan pada web server dan jaringan yang digunakan.

 

 

4.4    Mengaplikasikan fitur-fitur different level heading, paragraph, font, list, table

4.4.1   Fitur-fitur different level heading diidentifikasi dan diaplikasikan

Teks dalam dokumen mempunyai judul topik, pada dokumen HTML judul ini disebut heading. Heading tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang akan dituliskan.

 

Ada 6 tingkat heading dalam HTML yang dinomori dari satu sampai dengan 6. Nomor satu merupakan heading yang terbesar. Setiap heading dalam dokumen harus diberi tag, tergantung pada kebutuhan/keberartian teks tersebut, jika dianggap sangat penting kita bisa menganggap sebagai heading 1 – digunakan tag <H1>.

 

Sintaks elemen heading:

<Hy>teks yang menjadi heading</H>teks yang menjadi heading</Hy>, dimana y adalah nomor heading.

 

Berikut adalah contoh untuk mendemonstrasikan berbagai level dalam heading:

<HTML>

<HEAD>

<TITLE>Contoh Heading</TITLE>

</HEAD>

<BODY>

<H1> Ini heading 1</H1>

<H2> Ini heading 2</H2>

<H3> Ini heading 3</H3>

<H4> Ini heading 4</H4>

<H5> Ini heading 5</H5>

<H6> Ini heading 6</H6>

</BODY>

</HTML>

 

 

 

4.4.2   Fitur-fitur paragraph diidentifikasi dan diaplikasikan

Informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam penulisan, misalnya satu pikiran utama disimpan dalam satu paragraf.

 

Setiap paragraf harus dimulai dengan memberi tag <P>. Di akhir paragraf tidak diharuskan menuliskan </P> sebagai akhir paragraf, karena tag <P> tidak didefinisikan harus memiliki tag akhir. Setiap pergantian paragraf harus dimulai dengan tag <P> kembali.

 

Berikut adalah contoh untuk mendemonstrasikan tag paragraf:

<HTML>

<HEAD>

<TITLE>Contoh Penggunaan Tag Paragraf</TITLE>

</HEAD>

<BODY>

<H3>Hanya yang bisa memahami…</H3>

<P ALIGN=”justify”>Menurut sahibul hikayat,pada suatu masa tersebutlah sebuah pulau yang dihuni semua perasaan. Mulai dari kebahagiaan,kesedihan,cinta dan semua perasaan lainnya. Semua perasaan ini merasa nyaman tinggal dipulau ini. Tapi suatu hari mendadak muncul suatu pengumuman,pulau tempat tinggal mereka akan tenggelam. Semua penghuni pulau disuruh menyiapkan dan memperbaiki perahunya lalu meninggalkan pulau itu.</P>

<P ALIGN=”justify”>Semua perasaan mengikuti saran pengumuman. Memperbaiki perahu dan menyiapkan segala yang diperlukan,lalu bergegas meninggalkan pulau itu. Satu-satunya perasaan yang memutuskan tinggal dipulau itu adalah Cinta. Dengan kegigihan,Cinta mencoba bertahan dipulau kediamannya.</P>

</BODY>

</HTML>

 

 

4.4.3   Fitur-fitur font diidentifikasi dan diaplikasikan.

Atribut-atribut dalam tag font, antara lain:

 

Atribut

Contoh

Deskripsi

size=”number” size=”2” Mendefinisikan ukuran font.
size=”+number” size=”+1” Menaikkan ukuran font.
size=”-number” size=”-1” Menurunkan ukuran font.
face=”face-name” face=”tahoma” Mendefinisikan nama font.
color=”color-value” color=”#EEFF00” Mendefinisikan warna font.
color=”color-name” color=”red” Mendefinisikan warna font.

 

Berikut contoh penerapan atribut-atribut dalam tag font:

Font size

<HTML>

<HEAD>

<TITLE>Font Size</TITLE>

</HEAD>

<BODY>

<FONT SIZE=1>Font Size 1</FONT><BR>

<FONT SIZE=2>Font Size 2</FONT><BR>

<FONT SIZE=3>Font Size 3</FONT><BR>

<FONT SIZE=4>Font Size 4</FONT><BR>

<FONT SIZE=5>Font Size 5</FONT><BR>

<FONT SIZE=6>Font Size 6</FONT>

</BODY>

</HTML>

 

 

Font face

<HTML>

<HEAD>

<TITLE>Font Face</TITLE>

</HEAD>

<BODY>

<P><FONT FACE=”Times”>Ini font face times</FONT></P>

<P><FONT FACE=”Verdana”>Ini font verdana</FONT></P>

<P><FONT FACE=”Comic Sans Ms”>Ini font face comic sans ms</FONT></P>

<P><FONT FACE=”Microsoft Sans Serif”>Ini font face microsoft sans serif</FONT></P>

</BODY>

</HTML>

 

Font color

<HTML>

<HEAD>

<TITLE>Font Face</TITLE>

</HEAD>

<BODY>

<H2><FONT COLOR=”Red”>Ini warna merah</FONT></H2><BR>

<H2><FONT COLOR=”#3333FF”>Ini warna biru</FONT></H2><BR>

<H2><FONT COLOR=”Green”>Ini warna hijau</FONT></H2><BR>

<H2><FONT COLOR=”#FF00FF”>Ini warna ungu</FONT></H2>

</BODY>

</HTML>

 

 

4.4.4   Fitur-fitur bullets, numbers dan style diidentifikasi dan diaplikasikan

4.4.4.1  Bullets & Numbers

List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu, misalnya jenis-jenis list dalam HTML:

Ordered List

Nomor item secara default adalah angka 1,2,3,…, dst sampai dengan sejumlah item dalam list tersebut. Untuk keperluan penyajian tertentu kita dapat mengubah nomor dalam ordered list dengan model angka yang lain, dengan mengisi atribut type pada tag <OL>. Selain atribut type,  ada juga atribut start yang digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin supaya list dimulai dari nomor 7, maka contoh penggunaannya sebagai berikut <OL start=7>…</OL>.

Berikut adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered list:

 

 

Type

Arti

I Ditampilkan dengan angka Romawi huruf besar.
i Ditampilkan dengan angka Romawi huruf kecil.
a Ditampilkan dengan abjad huruf kecil.
A Ditampilkan dengan abjad huruf besar.

 

Berikut adalah contoh untuk mendemonstrasikan ordered list:

<HTML>

<HEAD>

<TITLE>Ordered List</TITLE>

</HEAD>

<BODY>

<H4>Numbered list:</H4>

<OL>

<LI>Apple</LI>

<LI>Grape</LI>

<LI>Orange</LI>

</OL>

<H4>Letters list:</H4>

<OL TYPE=”A”>

<LI>Apple</LI>

<LI>Grape</LI>

<LI>Orange</LI>

</OL>

<H4>Lowercase letters list:</H4>

<OL TYPE=”a”>

<LI>Apple</LI>

<LI>Grape</LI>

<LI>Orange</LI>

</OL>

<H4>Roman numbers list:</H4>

<OL TYPE=”I”>

<LI>Apple</LI>

<LI>Grape</LI>

<LI>Orange</LI>

</OL>

<H4>Lowercase Roman numbers list:</H4>

<OL TYPE=”i”>

<LI>Apple</LI>

<LI>Grape</LI>

<LI>Orange</LI>

</OL>

</BODY>

</HTML>

 

Unordered List

Unordered list sering disebut sebagai bulleted list, mempunyai bullet default berupa noktah. Jenis bullet dapat diubah, berikut adalah daftar jenis bullet yang dapat digunakan untuk mengubah bullet default pada bulleted list:

  • Disk, bentuk noktah tetapi tidak diarsir ditengahnya.
  • Box, bentuk kotak.

 

Untuk mengubah jenis bullet dapat didefinisikan pada atribut type pada tag <UL>, berikut adalah contoh penggunaan untuk mengubah jenis bullet menjadi kotak <UL type=”box”>…</UL>.

 

Berikut adalah contoh untuk mendemonstrasikan unordered list:

<HTML>

<HEAD>

<TITLE>Unordered List</TITLE>

</HEAD>

<BODY>

<H4>Disc bullets list:</H4>

<UL TYPE=”disc”>

<LI>Apple</LI>

<LI>Grape</LI>

<LI>Orange</LI>

</UL>

<H4>Circle bullets list:</H4>

<UL TYPE=”circle”>

<LI>Apple</LI>

<LI>Grape</LI>

<LI>Orange</LI>

</UL>

<H4>Square bullets list:</H4>

<UL TYPE=”square”>

<LI>Apple</LI>

<LI>Grape</LI>

<LI>Orange</LI>

</UL>

</BODY>

</HTML>

 

Nested List

Bullet dapat digunakan secara bersarang, dimana maksudnya di dalam list ada list lagi. Berikut adalah contoh untuk mendemonstrasikan nested list:

<HTML>

<HEAD>

<TITLE>Nested List</TITLE>

</HEAD>

<BODY>

<H4>Nested List:</H4>

<UL>

<LI>Coffee</LI>

<LI>Tea</LI>

<UL>

<LI>Black Tea</LI>

<LI>Green Tea</LI>

</UL>

<LI>Milk</LI>

</UL>

</BODY>

</HTML>

 

Definition List

Berikut adalah contoh untuk mendemonstrasikan definiton list:

<HTML>

<HEAD>

<TITLE>Definiton List</TITLE>

</HEAD>

<BODY>

<H4>Definition List:</H4>

<DL>

<DT>Coffee</DT>

<DD>Black hot drink</DD>

<DT>Milk</DT>

<DD>White cold drink</DD>

</DL>

</BODY>

</HTML>

 

 

Tag-tag dalam list:

Tag

Kegunaan

<OL> Mendefinisikan ordered list.
<UL> Mendefinisikan unordered list.
<LI> Mendefinisikan list item.
<DL> Mendefinisikan definition list.
<DT> Mendefinisikan definition term.
<DD> Mendefinisikan definition description.

 

 

4.4.4.2  Style dalam HTML

Berikut adalah tag-tag style dalam HTML:

Tag

Kegunaan

<STYLE> Mendefiniskan suatu style dalam sebuah dokumen.
<LINK> Mendefinisikan relasi antara dua dokumen yang terhubung.
<DIV> Mendefiniskan suatu divisi/bagian dalam suatu dokumen.
<SPAN> Mendefinisikan suatu section dalam suatu dokumen.
<FONT> Mendefinisikan tulisan yang ingin dipakai dalam suatu dokumen.
<CENTER> Membuat posisi suatu tulisan, gambar berada ditengah.

 

Berikut adalah contoh penerapan style dalam dokumen HTML:

  • Style dalam HTML

<HTML>

<HEAD>

<TITLE>Style dalam HTML</TITLE>

<STYLE>

H1{color: red}

H3{color: blue}

</STYLE>

</HEAD>

<BODY>

<H1>Ini Header Level 1</H1>

<H3>Ini Header Level 3</H3>

</BODY>

</HTML>

 

  • Link yang tidak digaris bawahi

<HTML>

<HEAD>

<TITLE>Link yang tidak digarisbawahi</TITLE>

</HEAD>

<BODY>

<A HREF=”Halaman_dua.html” STYLE=”text-decoration:none”>

<H2>Ini adalah Link yang tidak digarisbawahi</H2>

</A>

</BODY>

</HTML>

 

  • Link ke style sheet

<HTML>

<HEAD>

<TITLE>Link Ke Style Sheet</TITLE>

<LINK REL=”stylesheet” TYPE=”text/css” HREF=”styles.css”>

</HEAD>

<BODY>

<H1>I am formated with a link style sheet</H1>

<P>Me too!</P>

</BODY>

</HTML>

 

 

4.4.5   Fitur-fitur table diidentifikasi dan diaplikasikan

Table digunakan untuk menyajikan data dalam bentuk kolom dan baris. Pada umumnya setiap kolom menunjukkan data yang sejenis dan setiap baris yang terdiri atas kolom-kolom yang menunjukkan kelompok data dalam kesatuan.

 

Elemen-elemen Table:

Elemen

Penjelasan

<TABLE>…</TABLE> Mendefinisikan sebuah tabel dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border.
<CAPTION>…</CAPTION> Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah ditengah pada bagian paling atas tabel. Atribut ALIGN=”bottom” dapat digunakan untuk menempatkan judul pada bagian bawah tabel.
<TR>…</TR> Menspesifikasikan sebuah baris tabel dalam tabel. Kita dapat mendefinisikan atribut untuk seluruh baris: ALIGN (Left, Center, Right) atau VALIGN (Top, Middle, Bottom).
<TD>…</TD> Mendefinisikan sebuah sel data tabel. Secara default teks dalam sel ini ditampilkan rata kiri, dan ditengah secara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isinya.
<TH>…</TH> Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah.

 

Atribut-atribut Table:

Atribut

Keterangan

ALIGN={left | center | right} Alignment horisontal untuk sel.
VALIGN={top | middle | bottom} Definisi alignment vertikal dalam sel.
COLSPAN=n Jumlah n kolom sel diperlebar.
ROWSPAN=n Jumlah n baris sel diperbesar.
NOWRAP Matikan wrapping dalam sel.

 

Berikut contoh penerapan elemen dan atribut dalam Table:

<HTML>

<HEAD>

<TITLE>Contoh Tabel</TITLE>

</HEAD>

<BODY>

<P ALIGN=”Justify”>Setiap tabel dimulai dengan sebuah tag table.

Setiap baris dimulai dengan sebuah tag TR.

Setiap data dimulai dengan sebuah tag TD.

</P>

<H4>Satu kolom:</H4>

<TABLE BORDER=”1″>

<TR>

<TD>One</TD>

</TR>

</TABLE>

<H4>Satu baris dan tiga kolom</H4>

<TABLE BORDER=”6″>

<TR>

<TD>One</TD>

<TD>Two</TD>

<TD>Three</TD>

</TR>

</TABLE>

<H4>Satu baris dan tiga kolom</H4>

<TABLE BORDER=”6″>

<TR>

<TD ROWSPAN=”2″>One</TD>

<TD>Two</TD>

<TD>Three</TD>

</TR>

<TR>

<TD COLSPAN=”2″>Four</TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

 

 

4.5    Melakukan editing  sederhana

4.5.1   Fitur-fitur manipulasi teks diaplikasikan.

Teks dalam dokumen web dapat diformat atau dimanipulasi seperti tag-tag lainnya. Berikut adalah tag-tag yang digunakan untuk memanipulasi teks:

Tag

Kegunaan

<B> Definisi teks yang ditebalkan.
<BIG> Definisi teks yang besar ukurannya.
<EM> Definisi teks yang miring.
<I> Definisi teks yang miring- italic.
<SMALL> Definisi teks yang kecil ukurannya.
<STRONG> Definisi teks yang ditebalkan.
<SUB> Definisi teks yang menjadi subscript.
<SUP> Definisi teks yang menjadi superscript.
<INS> Definisi teks yang disisipkan.
<DEL> Definisi teks yang dihapus.
<S> Definisi teks yang dihapus.
<STRIKE> Definisi teks yang dihapus.
<U> Definisi teks yang digarisbawahi.

 

Contoh penerapan manipulasi teks:

<HTML>

<HEAD>

<TITLE>Manipulasi Teks</TITLE>

</HEAD>

<BODY>

<H3>

<FONT COLOR=”Blue”>

<PRE>

<B>Definisi teks yang ditebalkan.</B>

<BIG>Definisi teks yang besar ukurannya.</BIG>

<EM>Definisi teks yang miring.</EM>

<I>Definisi teks yang miring – italic.</I>

<SMALL>Definisi teks yang kecil ukurannya.</SMALL>

<STRONG>Definisi teks yang ditebalkan.</STRONG>

<SUB>Definisi teks yang menjadi subscript.</SUB>

<SUP>Definisi teks yang menjadi superscript.</SUP>

<INS>Definisi teks yang disisipkan.</INS>

<DEL>Definisi teks yang dihapus.</DEL>

<S>Definisi teks yang dihapus.</S>

<STRIKE>Definisi teks yang dihapus.</STRIKE>

<U>Definisi teks yang digarisbawahi.</U>

</PRE>

</FONT>

</H3>

</BODY>

</HTML>

 

 

4.5.2   Fitur-fitur editing sederhana digunakan seperti format teks, bullets, background diaplikasikan

Untuk melakukan editing pada suatu browser web, maka yang perlu dilakukan adalah hanyalah menganti value dari atribut pada suatu tag. Kita sangat perlu untuk mengetahui value apa saja yang dimiliki oleh suatu atribut supaya kita dapat sering melakukan editing untuk memperindah web milik kita karena semakin suatu web memiliki tampilan yang menarik maka web tersebut semakin memiliki nilai lebih dibanding web-web lainnya. Berikut adalah contoh singkat untuk editing:

  • Halaman web sebelum di-edit:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY BGCOLOR=”#99FFFF”>

<FONT SIZE=”3″ COLOR=”#FF0000″>

<UL>

<LI>Perasaan datang dan pergi. Perasaan berubah-ubah,

tapi <B>Cinta</B> bertahan dan menetap sampai selamanya.</LI>

<LI><B>Cinta</B> adalah satu-satunya perasaan yang melahirkan

kesanggupan untuk bertahan,untuk gigih sampai detik terakhir.</LI>

<LI>Sesudah ditempa berbagai kesulitan,mengalami suka dan duka,

serta dengan berjalannya waktu,kita akhirnya bisa memahami

kebesaran <B>cinta</B>. </LI>

<LI><B>Cinta</B> tak menyakitkan. Jika menyakitkan pasti

bukan <B>cinta</B>.</LI>

</UL>

</FONT>

</BODY>

</HTML>

 

  • Halaman web setelah di-edit:

<HTML>

<HEAD>

<TITLE>Contoh editing</TITLE>

</HEAD>

<BODY BGCOLOR=”#FFCCFF”>

<FONT SIZE=”3″ COLOR=”#3366FF” FACE=”Comic Sans Ms”>

<UL TYPE=”circle”>

<LI>Perasaan datang dan pergi. Perasaan berubah-ubah,

tapi <B>Cinta</B> bertahan dan menetap sampai selamanya.</LI>

<LI><B>Cinta</B> adalah satu-satunya perasaan yang melahirkan

kesanggupan untuk bertahan,untuk gigih sampai detik terakhir.</LI>

<LI>Sesudah ditempa berbagai kesulitan,mengalami suka dan duka,

serta dengan berjalannya waktu,kita akhirnya bisa memahami

kebesaran <B>cinta</B>. </LI>

<LI><B>Cinta</B> tak menyakitkan. Jika menyakitkan pasti

bukan <B>cinta</B>.</LI>

</UL>

</FONT>

</BODY>

</HTML>

 

 

4.6    Menggunakan fitur-fitur tambahan untuk memformat layout halaman

4.6.1   Fitur-fitur background color digunakan seperti: solid color atau nilai kode heksadesimal, background dengan sebuah file grafik, warna untuk teks dan hyperlink, diidentifikasi dan diaplikasikan

Color merupakan atribut yang dapat kita tambahkan pada beberapa elemen seperti pada tag BODY (dengan atribut “BGCOLOR”), FONT (dengan atribut “COLOR”), LINK (dengan atribut “COLOR”), dan lainnya. Color terbagi ke dalam tiga kategori warna primer, yaitu: Red(R), Green(G), dan Blue(B). Masing-masing color didefinisikan dalam dua digit hexadecimal number (#RRGGBB). Selain itu, untuk menyisipkan gambar grafik sebagai background dalam suatu web kita dapat menyisipkan atribut “BACKGROUND” pada tag “BODY”.

Hexadecimal Color
#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White

 

Berikut contoh background dengan color:

<HTML>

<HEAD>

<TITLE>Background yang berwarna</TITLE>

<STYLE>

A:link { color: #00FFFF }

A:visited { color: #336600 }

A:active { color: #FF0000 }

A.external:link { color: #FF9900 }

</STYLE>

</HEAD>

<BODY BGCOLOR=”#66FFFF”>

<H4>

<FONT COLOR=”#FF0066″>

Ini merupakan contoh background yang diwarnai.<BR><BR>

Yang selain itu, teks juga di disain berwarna.<BR><BR>

<A HREF=”go.html”>Ini HYPERLINK yang berwarna juga.

</A>

</FONT>

</H4>

</BODY>

</HTML>

 

Berikut contoh background dengan grafik:

<HTML>

<HEAD>

<TITLE>Background dengan grafik</TITLE>

</HEAD>

<BODY BACKGROUND=”Forever_Friends_5.jpg”>

</BODY>

</HTML>

 

4.6.2   Fitur-fitur table seperti size dan warna border, warna background, penggunaan background gambar, cell dengan warna yang berbeda-beda, diidentifikasi dan diaplikasikan

Untuk memformat atau membuat suatu dokumen web yang isinya memuat tentang table, maka tidak ada salahnya jika kita menambah kesan menarik dengan mewarnai cell-cell dan border yang ada dengan warna yang berbeda. Selain itu juga dapat didukung dengan variasi background yang berwarna atau dapat pula background dengan grafik atau gambar. Berikut adalah merupakan atribut-atribut dari table dan macam-macam value yang dapat kita isi untuk atribut-atribut dari table tersebut:

Atribut

Value

Margin-top [length | <percentage> | auto]
Margin-right [length | <percentage> | auto]
Margin-bottom [length | <percentage> | auto]
Margin-left [length | <percentage> | auto]
Padding- top [length | <percentage>]
Padding- right [length | <percentage>]
Padding- bottom [length | <percentage>]
Padding- left [length | <percentage>]
Border-top-width [medium | thin | thick | <length>]
Border-right-width [medium | thin | thick | <length>]
Border-bottom-width [medium | thin | thick | <length>]
Border-left-width [medium | thin | thick | <length>]
Border-color [<color>]
Border-style [none | dotted | dashed | solid | double | groove | ridge | inset | outset]
Border-top [<border-top-width> || <border-style> || <color>]
Border-right [<border-right-width> || <border-style> || <color>]
Border [<border-width> || <border-style> || <color>]
Width [auto | <length> | <percentage>]
Height [auto | <length> | <percentage>]
Float [none | left | right]
Clear [none | left | right | both]

Berikut contoh penerapannya:

<HTML>

<HEAD>

<TITLE>Borders</TITLE>

<STYLE TYPE=”text/css”>

  BODY { background-color: #CCFFCC }

DIV { text-align: center;

margin-bottom: .1em;

padding: .5em }

            .thick { border-width: thick }

            .medium { border-width: medium }

.thin { border-width: thin }

.groove { border-width: groove }

.inset { border-width: inset }

.outset { border-width: outset }

.red { border-color: red }

.blue { border-color: blue }

</STYLE>

</HEAD>

<BODY>

<DIV CLASS=” thick groove”>This text has a border</DIV>

<DIV CLASS=”medium groove”>This text has a border</DIV>

<DIV CLASS=” thin groove”>This text has a border</DIV>

<P CLASS=”thin red inset”>A thin red line…</P>

<P CLASS=”medium blue outset”>And a thicker blue line</P>

</BODY>

</HTML>

Berikut adalah jenis-jenis border yang ada:

<HTML>

<HEAD>

<TITLE>Borders</TITLE>

<STYLE TYPE=”text/css”>

  BODY { background-color: #CCFFCC }

DIV { text-align: center;

     margin-bottom: .3em;

     width: 50%;

     position: relative;

     left: 25%;

     padding: .3em }

</STYLE>

</HEAD>

<BODY>

<DIV STYLE=”border-style: solid”>Solid border</DIV>

<DIV STYLE=”border-style: double”>Double border</DIV>

<DIV STYLE=”border-style: groove”>Groove border</DIV>

<DIV STYLE=”border-style: ridge”>Ridge border</DIV>

<DIV STYLE=”border-style: inset”>Inset border</DIV>

<DIV STYLE=”border-style: outset”>Outset border</DIV>

</BODY>

</HTML>

4.6.3   Fitur-fitur frame pada halaman untuk pengorganisasian informasi seperti footer, header, horizontal split, vertical split diidentifikasi dan diaplikasikan

Elemen dalam HTML digunakan untuk membangun web page yang memungkinkan penampilan beberapa web page ditampilkan dalam satu window browser. Window dalam browser dibagi menjadi beberapa windows yang disebut frame. Model ini sering digunakan untuk lebih memperjelas penyajian informasi, dengan menu sajian selalu ditampilkan. Namun penggunaan frame hanya terbatas pada browser Microsoft Internet Explorer versi 3.0 ke atas dan Netscape Navigator versi 2.0 ke atas. Sintaks:

<FRAMESET BORDER=# {[ROWS|COLS]={#,[#[...]]}>

<FRAME SRC=”url” NAME=”namaFrame”>

</FRAMESET>

 

Atribut NAME merupakan atribut wajib, jika frame yang bersangkutan akan dijadikan sebagai tempat untuk menampilkan URL suatu link.

 

Target Frame à Nama frame predefined: _self, _top, _parent, _blank, sering digunakan untuk menunjukkan target penampilan dari suatu link.

 

Nama Frame

Deskripsi

_self Digunakan apabila target frame adalah tempat link berada.
_top Digunakan apabila target frame adalah windows tempat frame berada. Dengan menggunakan _top sebagai target maka definisi frame yang ada pada windows browser akan hilang, diganti dengan definis frame yang baru jika ada.
_parent Target frame adalah setingkat di atas frame link berada. Akibat dari target frame _parent akan sama jika tempat frame link berada hanya satu level di bawah definisi frame windows.
_blank Target blank digunakan untuk membuka windows baru.

 

Berikut contoh penerapan FRAME:

soal02.html

<HTML>

<HEAD>

<TITLE>BELAJAR SOAL02</TITLE>

<HEAD>

<frameset rows=”35%,65%” scrolling=”NO”>

<frame src=”atas.html” name=”atas” scrolling=”NO” noresize>

<frameset cols=”15%,85%” scrolling=”NO”>

<frame src=”button.html” name=”kiri” noresize >

<frame src=”tengah.html” name=”tengah” noresize >

</frameset>

</frameset>

<BODY></BODY>

</HTML>

 

atas.html

<HTML>

<HEAD>

<TITLE>SOAL02 Header</TITLE>

<HEAD>

<BODY>

<center><img src=”02Header.gif”></center>

</BODY>

</HTML>

button.html

<HTML>

<HEAD>

<TITLE>Button SOAL02</TITLE>

<HEAD>

<BODY>

<TABLE BORDER=”0″>

<TR><TD>

<a href=”tengah.html” target=”tengah”><font color=”#336699″>

<b>Home</b></font></a></TD></TR>

<TR><TD>

<a href=”#”><font color=”#336699″>

<b>Book</a></b></font></TD></TR>

<TR><TD>

<a href=”#”><font color=”#336699″>

<b>About Us</a></b></font></TD></TR>

<TR><TD>

<a href=”reg.html” target=”tengah”><font color=”#336699″>

<b>Register</a></b></font></TD></TR>

</TABLE>

</BODY>

</HTML>

tengah.html

<HTML>

<HEAD>

<TITLE>BELAJAR SOAL02</TITLE>

<HEAD>

<BODY>

<FONT COLOR=”#336699″>

<H3><B>Welcome To Madagaskar Book Store (dot) Com</B></H3>

<PRE>

Welcome to our 1th anniversary party!

As the guest of honor at this 1-day celebration,

every day you are invited to enjoy our Hall of Fame,

Wish List Spree, and brand-new Special Deliveries.

The festivities wrap up on May 24, when we’ll bring you

A Show of Thanks, a live concert event featuring Ricky Alamsyah,

Rostan, and other all-time customer favorites.</pre>

Our new Store is:

<UL>

<LI>Automotive</LI>

<LI>Sport</LI>

<LI>Health & Personal Care</LI>

<LI>Flora and Founa</LI>

</UL>

<HR WIDTH=”100%” SIZE=”10″ COLOR=”#336699″>

<CENTER>Copyrigth © By Bluejack 2005</CENTER>

</FONT>

</BODY>

</HTML>

 

 

 

4.7    Mengintegrasikan dokumen web dengan obyek lain seperti grafik, animasi, audio, video. dll

4.7.1   Obyek lain seperti grafik, animasi, audio, video disisipkan ke dalam halaman web.

Multimedia merupakan salah satu komponen andalan yang menyebabkan web menjadi cepat populer. Selain informasi menjadi mudah disajikan, penyajian informasi dalam web juga menjadi sangat menarik dan dapat menjadi interaktif, tidak sekedar teks, karena dilengkapi dengan kombinasi warna dan kelengkapan media lain untuk mendukung presentasi seperti gambar atau grafik, animasi, audio, dan video. Sehingga dengan adanya hal ini, mendorong multimedia untuk diintegrasikan ke dalam dokumen web. Mengintegrasikan images, audio, graphics, dan lain-lain dengan HTML memerlukan kemampuan teknis dalam manipulasi audio dan images, mampu memahami dan mengetahui dengan format file, dan mengintegrasikan multimedia ke dalam dokumen web.

 

Area dari spesifikasi teknis untuk penggunaan multimedia dengan browser web dan aplikasi pembantu adalah Multipurpose Internet Mail Extensions (MIME). MIME adalah spesifikasi untuk bagaimana system computer dapat mengubah informasi multimedia menggunakan standarisasi mail internet. MIME meliputi spesifikasi untuk karakter non-ASCII, images, audio, video, binary files, PostScript, dan multimedia lainnya dan format file binary. MIME juga memperkenankan user untuk mendefinisikan suatu tipe format dan pertukaran informasi.

 

Spesifikasi MIME menggunakan system dari tipe message dan subtypes untuk mengidentifikais format dari message. Tipe-tipe MIME antara lain image, audio, text, video, application, multipart, dan message. Subtype MIME mengidentifikasi lebih spesifik content dari message. Tipe/Subtype MIME “text/html”, sebagai contoh: mengidentifikasi text file yang seharusnya diwujudkan sebagai dokumen HTML. Tipe/subtype MIME “video/mpeg” mengidentifikasi MPEG movie file.

 

Web server menggunak file extension untuk menentukan tipe dan subtype MIME dari suatu file multimedia ketika dikirim dalam memberikan respon untuk request browser web. File-file menggunakan extension “.html” (“.htm” untuk pengguna PC) merupakan text/html, selain itu file-file menggunakan extension “.mpeg” (“.mpg” untuk pengguna PC) merupakan video/mpeg. Web server mengirim message permulaan dengan mengidentifikasi dari MIME content type untuk browser. Sebagi contoh, mengirim dokumen HTML, dimana message diawal dengan “Content-type: text/html”.

 

 

4.7.2   Sebagian atau keseluruhan web halaman dapat disisipkan obyek lain

Berikut adalah contoh penempatan image dalam dokumen web:

<HTML>

<HEAD>

<TITLE>Image Placement and Size Example</TITLE>

</HEAD>

<BODY BGColor=”white”>

<P>

<HR>Text before <IMG Align=”left” Src=”stats.gif”>Align=”left”

<BR Clear=”all”>

<HR>Text before <IMG Align=”right” Src=”stats.gif”>Align=”right”

<BR Clear=”all”>

<HR>Text before <IMG Align=”top” Src=”stats.gif”>Align=”top”

<BR Clear=”all”>

<HR>Text before <IMG Align=”middle” Src=”stats.gif”>Align=”middle”

<BR Clear=”all”>

<HR>Text before <IMG Align=”bottom” Src=”stats.gif”>Align=”bottom”

<BR Clear=”all”>

<HR>Text before

<IMG Width=”200″ Height=”100″ Align=”middle” Src=”stats.gif”>

Align=”middle” Width=”200″ Height=”100″

<BR Clear=”all”>

<HR></P>

</BODY>

</HTML>

 

Format image dapat dibuat dan ditampilkan dalam berbagai format. Berikut dua style untuk tampilan images, antara lain:

  1. Image yang menggunakan inline image:

<IMG ALIGN=”bottom” SRC=”stats.gif”>

  1. Image yang menggunakan tujuan dari hypertext link:

<A HREF=”stats.gif”>Statistik</A>

 

Berikut beberapa format image yang mungkin untuk image viewers:

BMP Microsoft Windows BitMaP file
CUR Microsoft Windows CURsor file
EPS Encapsulated PostScript
GIF CompuServe Graphics Image Format file
HDF Hierarchical Data Format file
ICO Microsoft Windows ICOn file
ICON Sun Icon and Cursor file
MPNT Apple Macintosh MacPaint file
PBM Portable BitMap file
PGM Portable Grayscale Map file
PIC PIXAR PICture file
PICT Apple Macintosh QuickDraw/PICT file
PICT SoftImage PICT file
PIX Alias PIXel image file
PNM Portable aNy Map file
PPM Portable Pixel Map file
PS PostScript
RAS Sun RASterfile
RGB Silicon Graphics RGB image file
RGBa 4-component Silicon Graphics image file
RGBA 4-component Silicon Graphics image file with generated alpha
RLA Wavefront raster image file
RLE Utah Runlength-encoded image file
RPBM Raw Portable BitMap file
RPGM Raw Portable Grayscale Map file
RPNM Raw Portable aNy Map file
RPPM Raw Portable Pixel Map file
SYNU Synu image file
TGA Truevision Targa image file
TIFF Tagged Image File
VIFF Khoros Visualization Image File Format
X Stardent AVS X image file
XBM X11 Bit Map file
XWD X Window Dump image file

 

Seperti graphics atau images, berikut format file untuk audio dan video yang diizinkan penggunaannya:

AIF(6), AIFF Apple/SGI
AIF(6), AIFC Apple/SGI
AU or SND NeXT/Sun, µ-law format
IA

Illustrated audio

(http://debra.dgbt.doc.ca/ia/ia.html)

MOD or NST MIDI Amiga
IFF, IFF/8SVX Amiga
MPEG or MPG,

RealAudio sound

(http://www.realaudio.com/) RA or RAM

SF IRCAM
TSP True Speech (http://www.dspg.com/)
VOC Creative Voice
WAV, WAVE RIFF WAVE

 

Microsoft memperluas HTML untuk menspesifikasi dokumen web pengguna sehingga memperkenankan untuk mendengarkan sound secara otomatis bersamaan ketika membuka dokumen web. Browser Internet Explorer memperkenankan elemen BGSOUND, yang memainkan soundtrack ketika dokumen ditampilkan. Selain itu, format sound yang diakui dalam Internet Explorer adalah WAV, AU, dan MIDI. Berikut atribut BGSOUND:

SRC=”url of sound file”

LOOP=”numbers of times to replay file”

 

Movie dalam web dapat memberikan kekuatan informasi visual yang lebih untuk user. Microsoft Internet Explorer memperkenankan beberapa atribut untuk penggunaan IMG untuk inline movie. Berikut atribut-atributnya:

DYNSRC=”url of the AVI movie”

LOOP=”number of times to play the movie”

Start=”mouseover|fileopen”

 

 

4.7.3   Teknik-teknik manipulasi audio didemonstrasikan

Berikut beberapa atribut yang digunakan dalam tag EMBED yang digunakan untuk memanipulasi audio yang ditampilkan dalam suatu dokumen web:

Attribute

Values

SRC=”filename A file name with an extension associated with a MIME type assigned to be played by LiveAudio (.AU, .AIFF, .AIF, .WAV, .MIDI, or .MID). Required.
WIDTH=integer The control console width in pixels. Required.
HEIGHT=integer The control console height in pixels. Required.
AUTOSTART=TRUE|FALSE If True, the sound clip plays automatically. The default is False.
AUTOLOAD=TRUE|FALSE If False, the sound clip does not automatically load. The default is True.
STARTTIME=”mm:ss The start time in minutes and seconds from the start of the clip. The default is 00:00.
ENDTIME=”mm:ss The end time in minutes and seconds from the start of the clip. The default is the end of the clip.
VOLUME=percentage Playback volume expressed as a percentage of the maximum. The default is the last previously set volume.
ALIGN=”value The point at which to align the control panel with respect to adjoining text. The possible values are CENTER, BASELINE, TOP, LEFT, and RIGHT. BASELINE is the default.
CONTROLS=”value The controls to include on the control panel. The values can be CONSOLE, SMALLCONSOLE, PLAYBUTTON, PAUSEBUTTON, STOPBUTTON, or VOLUMELEVER. The remainder of this table describes the sets of controls associated with each of these values. The default is CONSOLE.
CONSOLE A full set of controls: Play, Pause, Stop, and Volume.
SMALLCONSOLE A reduced set of controls consisting of Play, Stop, and Volume. AUTOSTART defaults to True.
PLAYBUTTON The Play button only.
PAUSEBUTTON The Pause button only.
STOPBUTTON The Stop button. Also, the sound file unloads.
VOLUMELEVER The Volume control only.
CONSOLE=”name A combination of controls that enables you to include multiple sound clips on a page. For example, you could specify CONSOLE=”MySetup” as an attribute on two <EMBED> lines on a single HTML page; then each line would use the controls defined by the other as well as its own.

 

Untuk memanipulasi audio yang ditampilkan pada dokumen web, kita hanya perlu menganti value (nilai) pada atribut pada tag EMBED. Sebagai contohnya:

<EMBED SRC=”audio.aif” WIDTH=”144” HEIGHT=”60” AUTOSTART=”false” VOLUME=”100” CONTROLS=”console”>

 

4.7.4   Teknik-teknik kompresi audio dan video didemonstrasikan.

Untuk membuat proses saat suatu web di-load oleh browser maka diharapkan penggunaan multimedia yang tidak memakan size yang terlalu besar untuk itu perlu dilakukan kompresi atau converting menuju file type yang memiliki size yang lebih kecil sehingga akan membuat user lebih nyaman saat melihat suatu dokumen web. Selain itu, converting dibutuhkan karena browser hanya dapat menerima multimedia dengan file type tertentu. Berikut beberapa contohnya:

  • SmartVid oleh Intel dimana bagus untuk system operasi Windows 95 yang memperkenankan konversi antara AVI dan MOV.
  • Sparkle: Pemiliki Mac dapat dengan mudah untuk melakukan konversi movie antara MPEG dan QuickTime MOVies dengan Sparkle.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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  Sumber-sumber Kepustakaan ( Buku Informasi )

Pengertian sumber-sumber adalah material yang menjadi pendukung proses pembelajaran ketika peserta pelatihan sedang menggunakan Pedoman Belajar ini.

Sumber-sumber tersebut dapat meliputi:

  1. Buku referensi (text book)/ buku manual servis
  2. Lembar kerja
  3. Diagram-diagram, gambar
  4. Contoh tugas kerja
  5. Rekaman dalam bentuk kaset, video, film dan lain-lain.

 

Ada beberapa sumber yang disebutkan dalam pedoman belajar ini untuk membantu peserta pelatihan mencapai unjuk kerja yang tercakup pada suatu unit kompetensi.

 

Prinsip-prinsip dalam CBT mendorong kefleksibilitasan dari penggunaan sumber-sumber yang terbaik dalam suatu unit kompetensi tertentu, dengan mengijinkan peserta untuk menggunakan sumber-sumber alternative lain yang lebih baik atau jika ternyata sumber-sumber yang direkomendasikan dalam pedoman belajar ini tidak tersedia/tidak ada.

 

 

5.3  Daftar Peralatan dan Bahan yang digunakan

 

  1. Judul/Nama Pelatihan      :    Menerapkan dasar-dasar pembuatan web statik lanjut

 

  1. Kode Program Pelatihan  :    TIK.PR02.028.01

 

NO

UNIT

KOMPETENSI

KODE UNIT

DAFTAR PERALATAN

DAFTAR BAHAN

KETERANGAN

1.

Menerapkan dasar-dasar pembuatan web statik lanjut

TIK.PR02.028.01

- Unit PC (Personal Computer) dengan CD drive.

- PC dengan sistem operasi Windows XP

- Keyboard, mouse, dan monitor.

- RAM dengan ukuran yang sesuai dengan kebutuhan.

- Sistem operasi Windows XP yang didukung adanya Microsoft Internet Explorer.

- Software Notepad/Textpad untuk menulis kode HTML.

 

-

 

 

 

 

 

 

DAFTAR PUSTAKA

 

 

  • Buku:

Sidik, Betha Ir. 2005. Pemrograman Web dengan HTML. Informatika Bandung.

 

Testimoni

artikel lainnya Menerapkan Dasar-Dasar Pembuatan Web Statik Lanjut TIK.PR02.028.01

Tuesday 24 February 2015 | blog

    MATERI PELATIHAN BERBASIS KOMPETENSI SEKTOR TEKNOLOGI INFORMASI DAN KOMUNIKASI       MENGINSTALL NON…

Saturday 3 January 2015 | blog

  The class is divided into two groups: secretaries and clients. Clients are given a client…

Tuesday 4 August 2015 | blog

MATERI PELATIHAN BERBASIS KOMPETENSI SEKTOR TELEMATIKA SUB SEKTOR COMPUTER TECHNICAL SUPPORT     MENGOPERASIKAN CD-RW TIK.CS02.024.01…

Tuesday 17 February 2015 | blog

MATERI PELATIHAN BERBASIS KOMPETENSI SEKTOR TELEMATIKA SUB SEKTOR JARINGAN KOMPUTER DAN SISTEM ADMINISTRASI     MELAKUKAN…