Advertisement
loading...

 

 

Advertisement

MATERI PELATIHAN BERBASIS KOMPETENSI

SEKTOR TEKNOLOGI INFORMASI DAN KOMUNIKASI

 

 

 

 

 

 

MEMBUAT DOKUMEN DENGAN HTML SESUAI SPESIFIKASI

TIK.PR.02.024.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 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 STANDAR KOMPETENSI. 7

2.1 Peta Paket Pelatihan. 7

2.2 Pengertian Unit Standar Kompetensi 8

2.3 Unit Kompetensi Yang Dipelajari 8

2.3.1 Kode dan Judul Unit 8

2.3.2 Deskripsi Unit 8

2.3.3 Elemen Kompetensi 9

2.3.4 Batasan Variabel 11

2.3.5 Panduan Penilaian. 11

2.3.6 Kompetensi Kunci 12

 

BAB III STRATEGI DAN METODE PELATIHAN. 13

3.1 Strategi Pelatihan. 13

3.2 Metode Pelatihan. 14

 

BAB IV MATERI UNIT KOMPETENSI. 15

4.1 Tujuan Instruksional Umum.. 15

4.2 Tujuan Instruksional Khusus 15

4.3 Sekilas Tentang HTML. 16

4.4 Sekilas Tentang Pembuatan Dokumen dengan HTML. 17

4.5 Bentuk Umum HTML. 18

4.6 Pemformatan Teks 20

4.8 List HTML. 26

4.9 Image HTML. 29

4.10 Tabel HTML. 31

4.11 Link HTML. 36

 

BAB V SUMBER-SUMBER YANG DIPERLUKAN UNTUK PENCAPAIAN KOMPETENSI  39

5.1 Sumber Daya Manusia. 39

5.2 Sumber-sumber Kepustakaan (Buku Informasi) 40

5.3 Daftar Peralatan dan Bahan yang digunakan. 41

 

DAFTAR PUSTAKA. 42

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 disampaiakan 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

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 praktik 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 mwncapai 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.OP02.001.01         Mengoperasikan komputer personal yang berdiri sendiri (PC stand alone)
  2. TIK.OP02.009.01         Mengoperasikan PC yang terhubung pada jaringan komputer lokal
  3. TIK.OP02.003.01A       Mengoperasikan sistem operasi Microsoft

(Microsoft Office)         Windows

  1. TIK.OP02.003.01B                 Mengoperasikan sistem operasi Linux

(Open Office)

  1. TIK.OP02.006.01         Mengoperasikan penelusur web (web browser)
  2. TIK.PR02.026.01         Menjelaskan koneksi Internet
  3. TIK.OP03.003.01         Membuat halaman web menggunakan bahasa web (HTML) tingkat dasar
  4. TIK.PR02.027.01         Menerapkan dasar-dasar pembuatan web statik tingkat dasar
  5. TIK.PR04.002.01         Membuat halaman web dinamis dasar
  6. TIK.PR08.009.01         Membuat program aplikasi web berbasis PHP
  7. TIK.PR08.012.01         Membuat program aplikasi web berbasis JAVA
  8. TIK.JK04.008.01          Menginstalasi dan mengkonfigurasi web server
  9. TIK.PR04.008.01         Memelihara unjuk kerja situs web
  10. TIK.PR04.001.01         Menerapkan keamanan web site dinamis
  11. TIK.PR02.025.01         Menerapkan keamanan web statik
  12. TIK.PR04.006.01         Menerapkan dasar-dasar validasi untuk kerja situs web
  13. TIK.PR04.005.01         Menerapkan konten web memenuhi protokol standar
  14. TIK.PR04.005.01         Menerapkan web hosting
  15. TIK.PR02.028.01         Menerapkan dasar-dasar pembuatan web statik tingkat lanjut
  16. TIK.PR08.010.01         Membuat program aplikasi web berbasis ASP
  17. TIK.PR08.011.01         Membuat program aplikasi web berbasis JSP
  18. TIK.PR04.003.01         Membuat halaman web dinamis lanjut
  19. TIK.MM02.059.01        Memperbarui isi halaman web

 

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 membuat dokumen dengan HTML sesuai spesifikasi, dalam hal ini pembuatan web melalui 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.PR.02.024.01

Judul Unit   : Membuat dokumen dengan HTML sesuai spesifikasi

 

2.3.2 Deskripsi Unit

Unit ini akan menentukan kompetensi yang diperlukan untuk   membuat dokumen dengan HTML sesuai spesifikasi. Pembuatan dokumen dengan HTML yang dibahas dalam unit ini adalah merancang, membuat dan menyimpan sebuah dokumen menggunakan HTML dan sebuah teks editor. Unit ini juga menjelaskan tentang kegunaan dokumen dan identifikasinya, serta penggunaan bahasa HTML yang tepat dan sesuai persyaratan perancangan.

 

2.3.3 Elemen Kompetensi

 

ELEMEN KOMPETENSI

KRITERIA UNJUK KERJA

01 Menetapkan pemakaian dan struktur dokumen 1.1     Kegunaan dari dokumen dan audiens di identifikasi

 

1.2     Bahasa HTML yang tepat yang ada digunakan pada dokumen dan audiens ditetapkan

 

1.3     Struktur dasar dokumen sesuai persyaratan pengguna di rancang

 

1.4     Site map dokumen di kembangkan dan di konfirmasikan dengan klien

 

02  Membuat struktur dokumen dengan bahasa HTML 2.1     Dokumen HTML, dilengkapi dengan head dan title

 

2.2     Body pada dokumen di buat, teks dan paragraph sesuai kebutuhan di tambahkan

 

2.3     Format dokumen menarik dan mudah di baca di buat

 

2.4     Simbol khusus pada browser/platform di tambahkan dan di tampilkan secara tepat

 

2.5     Dokumen di simpan sesuai dengan penanaman standar

 

03  Memformat dokumen dan      menambahkan obyek 3.1    Teks di format untuk memenuhi persyaratan penyajian pengguna

 

3.2    Background warna atau gambar yang sesuai menurut persyaratan pengguna (logo perusahaan, buku pedoman perusahaan) di pasang

 

3.3    Posisi setiap elemen pada halaman di buat lebih menarik

3.4    Inden teks dan list (ordered, unordered dan nested) di buat

 

3.5    Gambar disisipkan (GIF, JPEG atau embedded image) dan dokumen di format sesuai persyaratan

 

04  Membuat tabel 4.1    Tabel untuk dasar konten halaman sesuai site map dokumen dan posisi pada halaman di buat

 

4.2    Lebar table dan format sel menurut kebutuhan site map dokumen di set

 

4.3  Borders pada table dan beberapa nested table di buat

 

05  Membangkitkan link 5.1  Dokumen dengan link pada teks dan gambar di lengkapi

 

5.2  Link ke situs FTP atau HTTP di buat

 

5.3  Sebuah gambar di bagi menjadi bagian yang dapat di klik menggunakan tag HTML sebagai         link ke halaman lain

 

06  Menguji dan menyimpan      dokumen 6.1  Link-link, warna dan format halaman di uji menggunakan platform/browser yang berbeda

 

6.2  Waktu akses dokumen di ukur untuk memperoleh waktu akses yang optimal

 

6.3  Dokumen di simpan dalam folder/direktori           yang tepat untuk akses pengguna

 

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.

2. Membuat dokumen dengan HTML bersifat internal pada bidang teknologi informasi dan komunikasi

 

2.3.5 Panduan Penilaian

Panduan penilaian terdiri dari:

  1. 1.   Pengetahuan dan keterampilan penunjang

Untuk mendemontrasikan kompetensi, memerlukan bukti keterampilan dan pengetahuan di bidang berikut ini:

1.1   Pengetahuan dasar yang dibutuhkan:

1.1.1  Prinsip-prinsip umum kesehatan dan keselamatan kerja

1.1.2 Mendemonstrasikan beberapa pengetahuan teoritis yang relevan dari HTML dan standar-standarnya

1.1.3 Mendemonstrasikan beberapa pengetahuan teoritis yang relevan dari open platform

1.1.4  Mendemonstrasikan beberapa pengetahuan teoritis yang relevan dari hak cipta dan etika

 

2.  Konteks penilaian

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

 

 

3. Aspek penting penilaian

Aspek yang harus diperhatikan:

3.1     Kemampuan untuk menerapkan tag-tag HTML pada sebuah dokumen

3.2     Kemampuan membuat link antar dokumen

3.3     Memformat dokumen sehingga halaman web lebih menarik

 

 

4.  Kaitan dengan unit-unit lainnya

4.1   Unit ini di dukung oleh pengetahuan dan keterampilan dalam unit-unit:

4.1.1  Mengoperasikan PC dan sistim operasi

4.1.2 Mengoperasikan web browser

4.1.3 Mengoperasikan arsitektur web

4.1.4  Menggunakan internet

4.1.5  Menerapkan standar keselamatan kerja kompetensi yang berkaitan dengan dasar-dasar teknologi informasi

4.2   Unit ini mendukung kinerja dalam unit-unit kompetensi yang berkaitan dengan 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.

 

 

2.3.6 Kompetensi Kunci

 NO KOMPETENSI KUNCI DALAM UNIT INI TINGKAT
1 Mengumpulkan, mengorganisir dan menganalisa informasi 1
2 Mengkomunikasikan ide-ide dan informasi 1
3 Merencanakan dan mengorganisir aktivitas-aktivitas 1
4 Bekerja dengan orang lain dan kelompok -
5 Menggunakan ide-ide dan tehnik matematika 1
6 Memecahkan masalah -
7 Menggunakan teknologi 1

Tabel 2 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 mampu menjelaskan penggunaan HTML dalam dokumen.
  • Siswa mampu membuat dokumen dengan HTML sesuai spesifikasi.
  • Siswa dapat menyelesaikan persoalan-persoalan yang muncul pada saat. pembuatan dokumen dengan HTML.

 

 

4.2 Tujuan Instruksional Khusus

  • Siswa dapat mengetahui apa sebenarnya yang dimaksud dengan HTML dan penggunaannya.
  • Siswa dapat mengidentifikasi penggunaan bahasa HTML dan syarat penggunaannya
  • Siswa dapat merancang dan membuat dokumen dengan HTML sesuai persyaratan pengguna.
  • Siswa dapat melakukan konfigurasi ulang pada HTML dokumen yang tidak berjalan dengan baik.

 

 

4.3 Sekilas Tentang HTML

 

Sebelum membahas tentang bagaimana membuat dokumen dengan HTML, terlebih dahulu diketahui apa sebenarnya yang dimaksud dengan HTML.

 

HTML adalah singkatan dari Hyper Text Markup Language. HTML merupakan bahasa (kode-kode) yang digunakan untuk membuat halaman web. HTML bukanlah bahasa pengaturan seperti C, C++ atau Pascal, ia lebih kepada bahasa yang menetapkan corak paparan dokumen. Jika anda menggunakan Internet Explorer atau Netscape Navigator anda dapat melihat kode-kode halamannya dengan right-click dan memilih menu View Source.

 

Bahasa HTML ini ditulis dengan menggunakan teks editor seperti Windows Notepad, Ms-Edit, dan file di simpan menggunakan extensi .htm ataupun .html. Browser HTML seperti Internet Explorer atau Netscape Navigator akan menterjemahkan kode-kode html dan membuat paparan seperti apa yang telah dikodekan. Anda juga dapat membuat halaman web dengan menggunakan HTML Editor seperti Netscape Composer, Ms-Word 97 ataupun Microsoft FrontPage. Walapun demikian, terdapat kelebihan serta kekurangan jika anda menggunakan HTML Editor yang disebutkan.

 

 

Mengapa saya perlu belajar HTML?

Walaupun pada zaman yang canggih ini terdapat banyak Editor HTML WSYWIG seperti Microsoft FrontPage, Netscape Composer dan Microsoft Word 97, adakalanya terdapat beberapa keadaan yang tidak dapat dibiarkan. Masalah-masalah yang kerap berlaku seperti gambar yang tidak muncul, link yang mengarah ke arah lain dan beberapa masalah-masalah lain yang akan terjadi pada HTML Editor anda sendiri. Kadangkala masalah ini terjadi setelah anda meng-upload halaman-halaman anda ke Internet.

 

Jadi, untuk menyelesaikan masalah-masalah ini, anda memerlukan sedikit banyak pengetahuan mengenai bahasa HTML. Apa yang dilakukan sebenarnya oleh Microsoft FrontPage atau Netscape Composer ialah menuliskan kode-kode HTML untuk anda. Caranya sama jika anda menulis kode sendiri dengan menggunakan Notepad.

 

Disamping itu ada juga HTML Editor yang tidak optimum, ia menulis kode-kode yang tidak perlu secara berlebihan dan memungkinkan file HTML anda menjadi terlalu besar, mengambil waktu yang lama untuk di download.

Anda juga boleh bergerak selangkah lebih dari orang lain. Ini karena, apabila perusahaan-perusahaan seperti Microsoft atau Netscape mengeluarkan browser HTML

4.4 Sekilas Tentang Pembuatan Dokumen dengan HTML

Perlukah saya tersambung ke internet untuk membuat homepage?

Anda tidak perlu tersambung ke Internet ketika membuat homepage. Anda hanya perlu menyediakan file-file html dan disimpan dalam direktori komputer anda dengan menggunakan Microsoft FrontPage, Netscape Composer ataupun Windows Notepad dan file disimpan dengan ekstensi .htm atau .html. Apabila selesai, sambungkan ke Internet anda, upload file-file tersebut ke Internet (web hosting).

 

Apa yang perlu saya ketahui?

Selain Internet Explorer dan Netscape Navigator, terdapat banyak lagi browser HTML yang dapat digunakan untuk menjelajah Internet. Oleh kerana browser HTML ini dicipta oleh perusahaan-perusahaan yang berlainan, penterjemahan bahasa HTML oleh setiap web browser berbeda antara satu sama lain. Sebagai contoh, paparan sesuatu halaman web melalui Netscape Navigator tidak sama dengan paparan melalui Internet Explorer. Walaupun demikian dalam tutorial ini anda akan diajarkan menggunakan fungsi-fungsi global yang dapat digunakan oleh semua browser HTML. Tetapi, untuk membuat halaman yang bagus terdapat keadaan di mana anda perlu mengetahui apakah fungsi tersebut di dukung dalam sesuatu web browser atau tidak.

 

Apa yang perlu saya miliki?

Untuk mengikuti tutorial ini, anda hanya memerlukan teks editor seperti Windows Notepad dan browser HTML seperti Internet Explorer. Perlu diingatkan disini bahwa Microsoft Word dan WordPad bukanlah teks editor yang asli, beberapa penambahan yang tidak kelihatan telah dilakukan kepada file jenis doc dan wri.

 

Sebaiknya anda mempunyai 3 browser HTML. Internet Explorer 3, Internet Explorer 4 dan Netscape Navigator 4. Ini bertujuan supaya anda dapat mencoba halaman yang anda buat pada 3 browser yang berlainan.

 

 

4.5 Bentuk Umum HTML

Dibawah ini ada contoh/bentuk umum dari sebuah dokumen HTML yang akan terlihat pada waktu kita membukanya dengan menggunakan Text Editor atau NotePad:

<HTML>
<TITLE>Contoh Homepage</TITLE>
<BODY>Hallo apa kabar?<BR>
Mudah-mudahan kabarnya Baik.
</BODY>
</HTML>

Dari contoh diatas jika anda membuka file ini dengan menggunakan MicroSoft Internet Browser atau Netscape, anda hanya akan melihat tulisan:

Hallo apa kabar?
Mudah-mudahan kabarnya Baik.

Kode-kode html terdiri dari tag-tag. Setiap huruf yang terkandung di dalam ‘<’ dan ‘>’ dinamakan tag. Dalam contoh di atas anda telah diperkenalkan dengan tag.

  • <HTML> dan </HTML>
  • <HEAD> dan </HEAD>
  • <BODY> dan </BODY>

Permulaan tag diletakkan dengan <nama tag> dan penutup tag diletakkankan dengan </nama tag>. Perhatikan tanda ‘/’ yang berada di depan nama penutup tag. Tag-tag ini diperlukan karena menunjukkan bahwa dokumen itu adalah dokumen html dan akan dibaca oleh browser HTML anda. Tanda ‘/‘ atau “</>” menandakan akhir perintah tag, entah itu untuk </HEAD>, </TITLE> dsb. Perlu diingat bahwa nama dalam tag tidaklah case sensitive.

 

Jika ada Pembuka, harus ada Penutupnya juga!

 

Keterangan:

  • <HTML>Pembuka/Awal setiap membuat suatu dokumen HTML.
  • </HTML>Penutup/Akhir dari suatu dokumen HTML.
  • <TITLE>Tag Pembuka untuk Judul Halaman/dokumen HTML.
  • </TITLE>Tag Penutup untuk Judul Halaman/dokumen HTML.
  • <BODY>Tag Awal dari Apa yang akan diketikan/diisi pada Dokumen HTML.
  • </BODY>Tag Penutup dari isi dokumen HTML.
  • <BR> Tag untuk memisahkan satu baris menjadi dua baris

 

Yang harus diingat adalah:

Apa yang kita ketikan di NotePad dengan yang akan ditampilkan sebagai suatu dokumen di Internet akan kelihatan beda.

 

Mengapa perlu pembuka dan penutup tag?

Untuk menjawab pertanyaan tersebut, lihatlah contoh kedua.

<html>
<head></head>
<body>
<b>Ini adalah</b> halaman <i>pertama</i> saya.
</body>
</html>

Akan keluar hasil seperti berikut:

 

Ini adalah halaman pertama saya

 

Terdapat 2 perubahan yaitu kata-kata “Ini adalah” telah ditebalkan (bold) dan perkataan “pertama” telah dimiringkan (italic). Ini terjadi karena kata-kata “Ini adalah” tersebut berada di antara tag <b> dan </b> (<b> untuk bold) dan perkataan “pertama” berada di antara tag <i> dan </i> (<i> untuk italic).

 

Saya mau kata-kata tersebut ditebalkan dan dimiringkan!

Untuk menjawab persoalan tersebut, lihatlah contoh ketiga.

<html>
<head></head>
<body>
<b><i>Ini adalah halaman pertama saya</i></b>
</body>
</html>

Akan keluar hasil seperti berikut:

 

Ini adalah halaman pertama saya

 

 

Apa gunanya tag head?

Untuk menjawab persoalan tersebut, lihatlah contoh keempat.

<html>
<head>
                   <title> Mari Belajar HTML </title>
</head>
<body>
                   <b>Ini adalah</b> halaman <i>pertama</i> saya.
</body>
</html>

Apabila anda melihat dokumen ini dengan menggunakan browser HTML anda. Anda mungkin tidak melihat adanya perubahan. Tetapi jika anda teliti, perkataan “Mari Belajar HTML” akan kelihatan pada title bar browser html anda. Ini gunanya tag <head>, di antara tag <head> ini anda letakkan tag-tag yang mempunyai fungsi khas. Terdapat banyak lagi fungsi-fungsi khas yang akan anda pelajari kemudian.

 
Anak panah menunjukkan title bar

 

4.6 Pemformatan Teks

Terdapat banyak cara untuk memformat teks. Pemformatan teks ini seperti bold, italic, subscript, superscript yang biasa anda lakukan dengan menggunakan Microsoft Word atau Word Perfect bisa juga dilakukan dalam dokumen html tetapi dengan cara berbeda. Pada bagian ini terdapat contoh contoh cara pemformatan teks yang akan diterangkan. Jika anda biasa menggunakan Microsoft Word maka tidak akan ada masalah untuk menggunakan formatan teks seperti di bawah.

 

Untuk memformat teks seperti bold, italic, subscript atau superscript pada halaman html, tag-tag berikut digunakan:

 

<b>….</b> Teks yang berada diantara tag disebelah akan diboldkan
<blink>….</blink> Menjadikan kata-kata yang berada diantara tag itu berkelip-kelip. Perhatian!, jika anda mengelipkan keseluruhan teks, maka teks itu akan susah dibaca!. Disamping itu, tag blink ini didukung oleh Netscape Navigator saja.
<i>….</i> Teks ini akan dimiringkan.
<sub>….</sub> Teks di dalam tag ini akan disubscriptkan.
<sup>….</sup> Teks di dalam tag ini akan disuperscriptkan.
<u>….</u> Teks ini akan digarisbawahkan.
<cite>....</cite>
<code>....</code>
<em>....</em>
<kbd>....</kbd>
<samp>....</samp>
<strong>....</strong>
<var>....</var>
<big>....<big>
<small>....</small>
<tt>....</tt>
Kesemua tag-tag ini mempunyai fungsi pemformatan yang tersendiri. Anda dapat mencoba tag-tag tersebut untuk membedakan fungís masing-masing tag.

 

Font Teks

Jika anda mengerti cara menggunakan Microsoft Word, anda pasti bisa menggunakan berbagai macam font pada dokumen Word anda. HTML juga bisa menggunakan font yang bermacam-macam. Caranya adalah dengan penggunaan tag <font>…</font>. Tag font ini tidak akan berfungsi tanpa penggunaan fungsi face.

 

———————————————————————–

<font face=”Arial, Times New Roman, Lucida Sans”>

kata-kata ini telah ditentukan font nya</font>

———————————————————————–

 

Jika anda perhatikan, terdapat 3 nilai untuk fungsi face. Ini bermaksud, jika komputer pengunjung itu tidak mempunyai font Arial, maka browser pengunjung akan mencari font Times New Roman, jika tidak ada maka Lucida Sans akan menjadi penggantinya. Kalau ketiga-tiga jenis font itu tidak ada, maka browser akan menggantinya dengan apa yang dianggap pantas. Tidak ada batas untuk font yang boleh diletakkan. Jika anda tidak meletakkan fungsi face maka font yang digunakan akan ditetapkan oleh configurasi komputer pengunjung.

 

Warna Teks

Untuk menjadikan teks berwarna, fungsi color digunakan pada tag <font>. Terdapat 256 warna yang dapat digunakan untuk mewarnai kata-kata. Lihat contoh di bawah.

 

———————————————————————–

<font color=”#FF0000″>baris ini berwarna merah</font>

———————————————————————–


Warna dalam html dapat diklasifikasikan menjadi 3 warna dasar yaitu merah, hijau dan biru. warna-warna tersebut jika dicampurkan akan menghasilkan warna-warna yang lain. Sistem nomor heksadecimal digunakan untuk mewakili warna-warna tersebut.

 

Sebagai contoh, untuk menjadikan teks halaman anda sebagai warna putih, maka nilai #FFFFFF digunakan pada fungsi text. 2 huruf pertama dari 6 huruf di atas mewakili warna merah, 2 huruf di tengah mewakili warna hijau dan 2 huruf terakhir mewakili  warna biru.

 

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

 

Bagian-bagian yang dapat diwarnai adalah:

  • Latar belakang Homepage
  • Teks
  • Link
  • Link yang telah digunakan
  • Latar belakang table
  • Border table
  • Font

 

Disamping itu Netscape Navigator serta Internet Explorer telah menggunakan satu cara khas untuk penggunaan warna-warna. Anda tidak perlu menggunakan nomor-nomor untuk menentukan warna yang dikehendaki, sebaliknya nomor-nomor ini telah digantikan dengan kata-kata untuk memudahkan anda.

 

Tag-tag yang berkaitan

Tag <body>
Fungsi
  • bgcolor – untuk mewarnai background halaman anda
  • text - untuk mewarnai semua teks. Perlu diingat bahwa teks yang berada di area tag <font> dan pengaktifan fungsi color tidak dipengaruhi oleh fungsi ini.
  • link – untuk menjadikan warna link lain dari yang telah ditetapkan oleh browser.
  • vlink – untuk menjadikan warna link yang telah digunakan berbeda dari yang telah ditetapkan oleh browser.
Contoh <body text=”#000000″ bgcolor=”#FFFFFF” link=”#0000FF” vlink=”#800080″>

 

Tag <font>
Fungsi
  • color – untuk mewarnai semua huruf yang berada dalam area tag <font>
Contoh <font color=”#000000″>

 

Tag <table>
Fungsi
  • bgcolor – warna latar belakang table
  • bordercolor – warna untuk border.
Contoh <table bgcolor=”#800080″ bordercolor=”#FFFFFF”>

 

 

 

 

 

Ukuran Teks

Untuk menjadikan ukuran teks lebih besar atau lebih kecil dari biasa. Anda dapat menggunakan fungsi size pada tag font.

 

Contoh:

———————————————————————–

<font size=4>Baris ini berukuran 4</font>

———————————————————————–

 

Terdapat 1 hingga 7 nilai ukuran yang dapat digunakan untuk fungsi size ini dan nilai 1 merupakan ukuran yang paling kecil. Ukuran header / topik juga dapat dirubah dengan menggunakan tag <h1…h6>, tetapi penggunaan header berlawanan dengan font size, yaitu h1 sampai h6 dimana h1 adalah ukuran yang paling besar hingga h6 yang paling kecil. Selain itu, pada tag header tulisan dengan sendirinya sudah menjadi tebal, atau sudah di boldkan

 

Bagaimana cara memulai baris baru?

Untuk memulai baris baru, anda dapat menggunakan tag <br>. Jika anda meletakkan tag ini, memiliki fungsi seperti menekan tombol Enter pada Microsoft Word. Contoh:

 

———————————————————————–

Baris pertama<br>Teks ini akan dimulai pada baris berikutnya.

 

 

Bagaimana cara membuat rata tengah?

Untuk merata tengahkan, anda perlu menggunakan tag <center>…</center>. Tag center ini berfungsi untuk menengahkan apa saja yang berada di dalamnya, seperti gambar, table, teks dan lain-lain. Contoh:

 

———————————————————————–

<center>Teks ini berada di tengah</center>

———————————————————————–


 

Paragraf

Untuk memformatkan paragraf anda dapat menggunakan tag <p>…</p>. Letakkan <p> pada permulaan paragraf dan </p> diakhir paragraf. Browser HTML secara otomatis akan membuat jarak antar paragraf pertama dan kedua, dan paragraf baru akan dimula dengan baris baru. Contoh:

 

—————————

<p>

Ini adalah paragraf pertama untuk

teks ini.

</p>

 

<p>

Ini adalah paragraf kedua untuk

teks ini.

</p>

————————–

 

Untuk menjajarkan paragraf anda rata kiri atau ke kanan, anda dapat menggunakan fungsi align. Untuk menjajarkan paragraf anda rata kiri anda letakkan nilai left atau bila ingin merata kanankan, letakkan nilai right.

 

—————————

<p align=left>

Ini adalah paragraf pertama untuk

teks ini, dan dibuat rata kiri.

</p>

 

<p align=right>

Ini adalah paragraf kedua untuk

teks ini dan dibuat rata kanan.

</p>

————————–

 

Bagaimana cara memasukkan special character?

Special character adalah huruf-huruf yang tidak terdapat pada keyboard komputer anda. Untuk menuliskan special karakter anda perlu menggunakan cara lain. Huruf-huruf seperti © harus ditype dengan menggunakan &copy; dan browser pengunjung akan menerjemahkan &copy; kepada ©. Di bawah merupakan contoh beberapa spesial character yang dapat digunakan dalam pembuatan HTML:

 

Hasil Keterangan Karakter Istimewa Nomor Karakter Istimewa
©

®

 

&

«

»

˝

<

>

*

:

Copyright

Registered trademark

Trademark

Non-breaking space

ampersand

angle quotation mark (left)

angle quotation mark (right)

tanda kutip

lebih kecil

lebih besar

tanda kali

tanda bagi

&copy;

&reg;

 

&nbsp;

&amp;

&laquo;

&raquo;

&quot;

&lt;

&gt;

&times;

&divide;

©

®

¡

&

«

»

"

<

=

×

÷

4.8 List HTML

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

  • List dengan nomor
  • List tanpa nomor
  • List definisi

 

List dengan nomor adalah model daftar yang setiap itemnya diberi nomor. Pada contoh list diatas merupakan contoh penggunaan list tanpa nomor.

 

Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang dapat digunakan untuk membuat list yang memberi uraian terhadap suatu item dalam daftar, disebut list definisi

 

Ordered List

Ordered list / List bernomor secara umum dimulai dengan menggunakan 1,2,3…, dst sampai dengan sejumlah item dalam list tersebut. Tetapi, kita juga dapat merubah susunan nomor dalam OL dengan model angka yang lain dengan mengisi atribut type pada tag <ol>.

 

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

Type Arti
              I Ditampilkan dengan menggunakan angka Romawi huruf besar
              i Ditampilkan dengan menggunakan angka Romawi huruf Cecil
              A Diubah dengan menggunakan abjad huruf kecil
              a Diubah dengan menggunakan abjad huruf besar

 

Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin menggunakan list dari nomor 7 maka berikut adalah contoh penggunaannya <ol start=7>…</ol>

Contoh ini menunjukkan berbagai jenis ordered list yang berbeda:

<!—Coba_orderedlist.html–>

<html>

<body>

<h4>Numbered list:</h4>

<ol>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Letters list:</h4>

<ol type = “A”>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Roman numbers list:</h4>

<ol type= ”I”>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

</body>

</html>

 

Unordered List

Unordered list sering disebut sebagai bulleted list, mempunyai bullet default berupa noktah. Tetapi, jenis bullet tersebut dapat diubah dengan menggunakan atribut type seperti pada ordered list. Berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list.

  • Disc, bentuk noktah tetapi tidak diarsir di tengahnya
  • Square, bentuk kotak.

 

Berikut contoh berbagai jenis unordered list.

<!–Coba_unorderedlist.html–>

<html>

<body>

<h4>Disc bullets list:</h4>

<ul type=”disc”>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>Square bullets list:</h4>

<ul type=”square”>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

</body>

</html>

 

Nested List

Bullet dapat digunakan secara bersarang, maksudnya bahwa di dalam list ada list lagi. Contoh ini akan mendemonstrasikan bagaimana membuat nested list.

<!–Coba_nestedlist.html–>

<html>

<body>

<h4>A Nested List:</h4>

<ul>

<li>Coffe</li>

<li>Tea</li>

<ul>

<li>Black Tea</li>

<li>Green Tea</li>

</ul>

<li>Milk</li>

</ul>

</body>

</html>

 

Definition List

Adalah list yang digunakan untuk memberikan uraian pada sebuah list. Contoh berikut akan menunjukkan sebuah definition list:

<!–Coba_definitionlist.htmlà

<html>

<body>

<h4>A Definition List:</h4>

<dl>

<dt>Coffe</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

</body>

</html>

 4.9 Image HTML

Gambar di dalam suatu web page merupakan sebuah daya tarik bagi pengunjung suat web site. Umumnya web site dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu web site. Umumnya browser web dapat menampilkan iniline image (yaitu, gambar yang disajikan bersamaan dengan teks), yang mempunyai format X Bitmap (XBM), GIF, atau JPEG. Format-format gambar lain juga ada yang digabukangkan ke dalam browser web [misalnya: format PNG (Portable Network Graphic)]. Setiap gambar akan membutuhkan waktu tambahan untuk di download dan memperlambat penampilan suatu dokumen dalam browser. Karenanya hati-hatilah memilih gambar dan menyertakannya ke dalam suatu dokumen.

 

Untuk menyertakan sebuah inline image dalam dokumen web anda digunakan tag <img src=”namaimage.jpg/gif/jpeg/xbm”> dengan namaimage adalah URL dari file image tersebut.

 

 

Image Adjustment

Dengan melihat contoh di bawah, kita akan dapat menyesuaikan image dengan ukuran yang berbeda-beda.

<!–Coba_imageadjust.html–>

<html>

<body>

<p>

<img src=”…/images/test_image.gif” width=”20” height=”20”>

</p>

<p>

<img src=”…/images/test_image.gif” width=”45” height=”45”>

</p>

<p>

<img src=”…/images/test_image.gif” width=”70” height=”70”>

</p>

<p>

Kamu dapat membuat sebuah gambar menjadi lebih besar atau lebih kecil dengan merubah nilai “height” dan “width” dalam sebuah tag <img>

</p>

</body>

</html>

 

 

 

Image Sebagai Suatu Link

Dengan melihat contoh di bawah, kita akan mengetahui bagaimana cara membuat image sebagai suatu link.

<!–Coba_imagelink.html–>

<html>

<body>

 

<p>

Kamu juga dapat menggunakan sebuah image sebagai suatu link.

<a href=”lastpage.htm”>

<img border=”0” src=”buttonnext.gif” width=”65” height=”38”>

</a>

</p>

</body>

</html>

 

Pembuatan image sebagai suatu link merupakan alternatif dari link-link yang biasanya dibuat dalam bentuk list atau teks biasa, tujuannya agar dengan gambar suatu menu dapat terlihat lebih interaktif dan langsung dapat memberi gambaran tentang apa yang didapat jika memilih menu tersebut.

 

Background Image

Suatu image juga dapat digunakan sebagai  latar belakang  selain warna latar belakang. Contoh berikut akan memaparkan cara pemasangan image sebagai background:

<!–Coba_backgroundimage.html–>

<html>

<body background=”…/images/spiderman3.jpg”>

<p>

Kamu dapat mengisi tampilan latar belakang dengan image.

</p>

</body>

</html>

 

4.10 Tabel HTML

Tabel digunakan dalam penyajian data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan.

 

Sebuah tabel umumnya mempunyai judul, tempat anda menjelaskan kolom/baris yang dilibatkan. Baris untuk informasi, dan sel untuk setiap itemnya. Pada tabel berikut, kolom pertama berisi informasi header, setiap baris menjelaskan sebuah tag tabel HTML, dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi tag.

 

Elemen-elemen Tabel

Elemen

Penjelasan

<table>…</table>

 

 

 

<caption>…</caption>

 

 

 

 

 

<tr>…</tr>

 

 

 

<th>…</th>

 

 

<td>…</td>

Mendefiniskan sebuah tabel dalam HTML. Jika atribut broder dituliskan, maka browser akan menampilkan tabel dengan border.

 

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. Catatan: Judul dapat diberi tag apa saja.

 

Menspesifikasikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan atribut untuk seluruh baris: align (left,center,right) dan/atau valign (top,middle,bottom).

 

Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah.

 

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 karakterisiktik dari sel dan isinya.

 

Atribut Tabel

Catatan: Atribut yang didefinisikan dalam <th>…</th> atau <td>…</td> akan menggantikan alignment default yang didefiniskan dalam <tr>…</tr>

 

Elemen

Penjelasan

align={left | center | right}

 

valign={top | middle | bottom}

 

colspan=n

 

rowspan=n

 

nowrap

Alignment horisontal untuk sel

 

Definisi alignment vertikal dalam sel

 

 

Jumlah n kolom sel diperlebar

 

Jumlah n baris sel diperbesar

 

Matikan wrapping dalam sel

 

Contoh ini mendemonstrasikan bagaimana membuat tabel dalam sebuah dokumen HTML.

<!—Coba_tabel.html–>

<html>

<body>

<p>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>100</td>

</tr>

</table>

<h4>Satu baris dan tiga kolom:</h4>

<table border=”1”>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

</table>

<h4>Dua baris dan dua kolom:</h4>

<tr>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>300</td>

<td>400</td>

</tr>

</table>

</body>

</html>

 

Catatan:

Jumlah baris tabel ditentukan dengan banyaknya <tr>…</tr> yang dituliskan dalam elemen tabel, dari <table>…</table>

 

Jumlah kolom dalam tabel ditentukan dengan banyaknya <td>…</td> di dalam setiap definisi baris, dari <tr>…</tr> Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.

 

Border Tabel

Border sebuah tabel dapat ditentukan dalam atribut border=”n” dalam tag <table> semakin besar nilai n, maka semakin tebal border sebuah tabel yang akan dihasilkan. Apabila nilai n diisi dengan “0” maka sebuah tabel akan menjadi tabel tanpa border.

 

 

Header

Contoh berikut akan menjelaskan cara penggunaan header tabel.

<!–Coba_tabelheader.html–>

<html>

<body>

<h4>Table headers:</h4>

<table border=”1”>

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

<h4>Vertical headers:</h4>

<table border=”1”>

<tr>

<th>Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>

 

 

Colspan dan Rowspan

Contoh berikut akan mendemonstrasikan bagaimana mendefinisikan sel tabel yang dilebarkan lebih dari satu baris atau satu kolom.

<!–Coba_tabelspan.html–>

<html>

<body>

<h4>Cell that spans two columns:</h4>

<table border=”1”>

<tr>

<th>Name</th>

<th colspan=”2”>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

<h4>Cell that spans two rows:</h4>

<table border=”1”>

<tr>

<th>Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan=”2”>Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>

 

 

Tag di dalam suatu Tabel

Contoh berikut akan mendemonstrasikan bagimana menampilkan elemen lain di dalam tabel.

<!–Coba_tabeltag.html–>

<html>

<body>

<table border=”1”>

<tr>

<td>

<p>Sebuah paragraf</p>

<p>Paragraf lain</p>

</td>

<td>Sel ini mengandung sebuah tabel:

<table border=”1”>

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>Sel ini mengandung list

<ul>

<li>Apples</li>

<li>Bananas</li>

<li>Pineapple</li>

</ul>

</td>

<td> </td>

</tr>

</table>

</body>

</html>

 

Cellpadding dan Cellspacing

Cellpadding adalah atribut di dalam tag <table> yang berfungsi untuk menambahkan jarak spasi dari antara sel dan bordernya misal: <table border=”1” cellpadding=”10”> berarti menandakan bahwa jarak antar sel dan bordernya adalah 10 spasi.

 

Cellspacing juga merupakan atribut di dalam tag <table> yang berfungsi untuk menambah jarak antar sel, misal : <table border=”1” cellspacing=”10”> maka jarak antar sel yang terjadi adalah 10 spasi.

 

 

 

Background Tabel

Seperti elemen yang lain, tabel juga dapat diberi latar belakang, baik itu warna ataupun gambar. Dalam tabel, latar belakang dapat diubah dalam setiap selnya maupun keseluruhan tabelnya misal: <table bgcolor=”red” / background=”…/images/background.jpg”> ataupun di dalam sel: <td bgcolor=”yellow” / background=”…/images/background.jpg”>.

 

Tag-tag Tabel:

Tag Awal

NN

IE

W3

Kegunaan

<table>

 

<th>

 

<tr>

 

<td>

 

<caption>

 

<colgroup>

 

<col>

 

<thead>

 

<tbody>

 

 

<tfoot>

3.0

 

3.0

 

3.0

 

3.0

 

3.0

 

 

 

4.0

 

 

3.0

 

3.0

 

3.0

 

3.0

 

3.0

 

3.0

 

3.0

 

4.0

 

4.0

 

 

4.0

3.2

 

3.2

 

3.2

 

3.0

 

3.2

 

4.0

 

4.0

 

4.0

 

 

 

 

4.0

Definisi tabel

 

Definisi header tabel.

 

Defiinisi baris tabel.

 

Definisi sel tabel.

 

Definisi caption tabel.

 

Definisi kelompok kolom tabel.

 

Definisi nilai atribut satu atau lebih kolom dalam tabel

 

Definisi suatu header tabel yang tidak akan scroll.

 

Definisi suatu body tabel yang scroll dalam suatu header dan footer tabel yang pasti.

 

Definisi suatu footer tabel yang tidak akan scroll (fixed)

 

4.11 Link HTML

Kelebihan utama dari suatu dokumen HTML adalah kemampuannya memberikan link dari satu teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot (‘highlight’) teks atau gambar yang diidentifikasi sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (hyperlink)

 

Tag yang dipakai untuk membuat hyperlink adalah <a> dan tag penutupnya adalah </a>. Contoh: <a href=http://www.yahoo/com> Link ke yahoo </a>. Atribut <href> digunakan untuk mendefinisikan lokasi link.

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

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

 

Karena link menuju ke web yang sama, maka tidak perlu dituliskan alamat URL web tersebut, hanya perlu menuliskan URL file-nya. Berikut adalah beberapa variasi penulisan link berdasarkan letak penempatan file-nya.

  • Bila file berlokasi pada folder yang sama dengan file dari link tersebut maka cukup dituliskan nama file-nya, misalnya:                                <a 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:<a 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:<a href=”../rainbow.gif”>Lihat gambar</a>

 

  • Bila file yang dituju letaknya dua tingkat di atas maka dituliskan dua kali titik dua seperti ini:

<a href = “../../rainbow2.gif”> Contoh gambar ke 2</a> 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 dialog box 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 :                             <a href = ”mailto:ar1f@gmail.com”> Kirim email! </a>

 

  • Link yang membuka window baru. Link ini akan mengantar kita ke halaman lain dengan membukanya pada window baru, sehingga pengunjung tidak harus meninggalkan halaman sebelumnya. Link ini dapat dibuat dengan penggunaan atribut <target=”_blank”>. Contoh penulisan seperti :
  • <a href = ”http://www.microsoft.com” target = _blank”> Microsoft </a>

 

  • Link pada lokasi halaman yang sama. Link ini akan membawa kita tetap kepada halaman yang sama, misal dari halaman yang paling bawah ke atas, dan sebaliknya. Link ini dibuat dengan memakai atribut penamaan link <a name = ”top”>.
  • Jadi setelah penamaan tersebut, jika dibuat link <a href = ”#top” >Kembali ke atas</a> maka halaman tersebut akan kembali ke bagian yang telah diberi nama “top”.

 

  • Link yang tidak digarisbawahi. Link ini dapat dibuat dengan penambahan atribut <style = ”text-decoration:none”>

 

 

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 kepustakaan 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)

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 alternatif lain yang lebih baik 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 Daftar Peralatan dan Bahan yang digunakan

  1. Judul/Nama Pelatihan        :    Membuat Dokumen dengan HTML Sesuai Spesifikasi

 

  1. Kode Program Pelatihan    :    TIK.PR.02.024.01

 

NO UNIT

KOMPETENSI

KODE UNIT DAFTAR PERALATAN DAFTAR BAHAN KETERANGAN
1. Membuat Dokumen dengan HTML Sesuai Spesifikasi TIK.PR.02.024.01 - Unit PC (Personal Computer) dengan CD drive dan Floppy Disk.

 

- PC dengan sistem operasi Windows XP

 

- Keyboard dan mouse

 

- RAM dengan ukuran yang sesuai dengan kebutuhan.

 

- Windows Notepad

 

- Browser HTML seperti Internet Explorer, Netscape Navigator.

 

- Perangkat lunak HTML seperti macromedia dreamweaver, microsoft frontpage

 

- CD / Installer browser HTML

 

- Buku informasi tentang HTML.

 

-

 

 

 

 

 

 

 

 

 

DAFTAR PUSTAKA

 

 

Testimoni

Filed under : blog, tags:
SLIDESERAGAMBATIK