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

Membuat Halaman Web Menggunakan Bahasa Web (Html) Tingkat Dasar TIK.OP03.003.01

Jan
19
2015
by : Bupeko. Posted in : blog

 

 

MATERI PELATIHAN BERBASIS KOMPETENSI

SEKTOR TEKNOLOGI INFORMASI

DAN KOMUNIKASI

SUB SEKTOR OPERATOR KOMPUTER

 

 

MEMBUAT HALAMAN WEB MENGGUNAKAN BAHASA WEB (HTML) TINGKAT DASAR

TIK.OP03.003.01

 

 

 

 

 

 

 

BUKU INFORMASI

 

 

 

 

 

 

 

 

DEPARTEMEN TENAGA KERJA DAN TRANSMIGRASI R.I.

DIREKTORAT JENDERAL PEMBINAAN PELATIHAN DAN PRODUKTIVITAS

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

 

DAFTAR ISI

 

Daftar Isi……………………………………………………………………………………………. Hal

 

BAB I    PENGANTAR ……………………………………………………………………………. 2

 

1.1.       Konsep Dasar Pelatihan Berbasis Kompetensi …………………………… 2

1.2.       Penjelasan Modul………………………………………………………………. 2

1.3.       Pengakuan Kompetensi Terkini (RCC)……………………………………… 3

1.4.       Pengertian-pengertian Istilah……………………………………………….. 4

 

BAB II   STANDAR KOMPETENSI………………………………………………………………. 5

 

2.1.       Peta Paket Pelatihan …………………………………………………………. 5

2.2.       Pengertian Unit Standar …………………………………………………….. 5

2.3.       Unit Kompetensi yang Dipelajari …………………………………………… 6

2.3.1.      Judul Unit ………………………………………………………….. 6

2.3.2.      Kode Unit ………………………………………………………….. 6

2.3.3.      Deskripsi Unit …………………………………………………….. 6

2.3.4.      Elemen Kompetensi ……………………………………………… 6

2.3.5.      Kriteria Unjuk Kerja ……………………………………………… 6

2.3.6.      Batasan Variabel ………………………………………………….. 7

2.3.7.      Panduan Penilaian ……………………………………………….. 7

2.3.8.      Kompetensi Kunci ………………………………………………… 8

 

BAB III  STRATEGI DAN METODE PELATIHAN …………………………………………….. 9

 

3.1.           Strategi Pelatihan …………………………………………………………… 9

3.2.           Metode Pelatihan ……………………………………………………………. 9

 

BAB IV  MATERI UNIT KOMPETENSI …………………………………………………………. 11

BAB V   SUMBER-SUMBER YANG DIPERLUKAN UNTUK PENCAPAIAN KOMPETENSI . 34

5.1.           Sumber Daya Manusia ……………………………………………………… 34

5.2.           Sumber-sumber Perpustakaan ……………………………………………. 34

5.3.           Daftar Peralatan/Mesin dan Bahan ………………………………………. 35

 

 

 

 

 

 

 

BAB I

PENGANTAR

 

1.1.      Konsep Dasar Pelatihan Berbasis Kompetensi

  • 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     Desain Modul

Modul ini didisain 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.1. Isi Modul

 

  1. a.   Buku Informasi

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

 

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

 

c.  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.2.   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.

 

Standardisasi

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 adalah untuk mencapai satu unit kompetensi, yang termasuk dalam satu paket pelatihan, yang terdiri atas unit-unit kompetensi berikut:

2.1.1.  TIK.OP02.009.01  Mengoperasikan PC yang terhubung pada jaringan komputer lokal

2.1.2.  TIK.OP02.019.01  Mengoperasikan piranti lunak pengolah gambar vektor

2.1.3.  TIK.OP03.003.01  Membuat halaman web menggunakan bahasa web (HTML) tingkat dasar

2.1.4.  TIK.OP02.002.01  Mengoperasikan printer

2.1.5.  TIK.OP02.006.01  Mengoperasikan penelusur web (web browser)

2.1.6.  TIK.OP02.010.01  Melakukan instalasi untuk koneksi internet

2.1.7.  TIK.OP02.004.01 Mengoperasikan piranti lunak pengolah kata tingkat dasar

2.1.8.  TIK.OP02.005.01  Mengoperasikan piranti lunak lembar sebar – tingkat dasar

 

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.

 

Apa yang akan Anda pelajari dari Unit Kompetensi ini?

Anda akan diajarkan untuk membuat halaman HTML beserta komponen-komponennya secara sederhana

 

Berapa lama Unit Kompetensi ini dapat diselesaikan?

Pada sistem pelatihan berdasarkan kompetensi, fokusnya ada pada pencapaian kompetensi, bukan pada lamanya waktu. Namun diharapkan pelatihan ini dapat dilaksanakan dalam jangka waktu satu hari. Pelatihan ini dijutukan bagi user terutama yang tugasnya berkaitan dengan editing dan membuat page html, seperti staf web development, staf web design, staf web content, dan staff admin.

 

 

Berapa banyak/kesempatan yang Anda miliki untuk mencapai kompetensi?

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 :

  • mengidentifikasikan apa yang harus dikerjakan peserta pelatihan.
  • memeriksa kemajuan peserta pelatihan.
    • menyakinkan bahwa semua elemen (sub-kompetensi) dan criteria unjuk   kerja telah dimasukkan dalam pelatihan dan penilaian.

 

KODE UNIT          : TIK.OP03.003.01

 

JUDUL UNIT         : Membuat Web Menggunakan Bahasa Web (HTML) Tingkat Dasar

 

DESKRIPSI UNIT : Unit kompetensi ini berhubungan dengan penguasaan dasar-dasar pembuatan situs web dengan Hypertext Markup Language  (HTML) dengan dibatasi pada pengenalan tag-tag dasar.

 

 

ELEMEN KOMPETENSI

KRITERIA UNJUK KERJA

01 Mengidentifikasi struktur dokumen HTML 1.1 1.2 1.3 Tagyang umum digunakan dapat diidentifikasi. Kerangka dokumen (headdan body)dapat dideskripsikan. Dokumen HTMLsederhana dibuat.
02 Modifikasi teks 2.1 2.2 2.3 2.4 Jenis, styledan ukuran huruf dapat diubah-ubah. Headingdapat dibuat. Paragraphdan rataan dapat diatur. Listdapat dibuat.
03 Membuat links 3.1 3.2 3.3 3.4 Linkantar halaman webdapat dibuat. Linkpada satu halaman web dibuat. Link untuk folderterpisah dapat dibuat. URL Link dapat dibuat.
04 Membuat/memasukan objek 4.1 4.2 4.3 Garis mendatar dapat dibuat. Gambar dari filelain dimasukkan. Linkdiaplikasikan pada gambar.
05 Membuat tabel 5.1 5.2 5.3 5.4 Tabel sederhana dapat dibuat. Garis tabel dapat diatur. Letak tabel pada halaman dapat ditentukan. Lebar tabel dapat ditentukan.

 

 

BATASAN VARIABEL

 

1. Unit ini berlaku untuk sektor Teknologi Informasi dan Komunikasi bidang operator.

2. Unit ini terbatas pada :

2.1 Kondisi kerja normal dengan perangkat PC standar.

2.2 Sistem operasi berbasis Graphic User Interface (GUI).

2.3 Pembuatan halaman web statis.

 

PANDUAN PENILAIAN

 

1. Pengetahuan dan Ketrampilan Penunjang

Untuk mendemonstrasikan kompetensi, diperlukan bukti keterampilan dan pengetahuan di bidang:

1.1 Pengetahuan tentang aspek-aspek dalam pembuatan halaman web.

1.2 Teknik dasar perancangan halaman web.

1.3 Pengetahuan dan keterampilan dalam melakukan pembuatan halaman web sesuai dengan batasan variabel.

 

2. Konteks Penilaian :

Dalam penilaian unit ini harus mencakup uji keterampilan baik secara langsung ataupun melalui simulasi. Unit ini harus didukung oleh serangkaian metode untuk menilai pengetahuan penunjang.

 

3. Aspek Penting Penilaian :

3.1 Kemampuan untuk menerapkan perancangan halaman web yang baik.

3.2 Kemampuan untuk menghasilkan suatu halaman web sesuai dengan kebutuhan.

 

4. Kaitan Dengan Unit-Unit Lain :

4.1 Unit ini didukung oleh pengetahuan dan keterampilan dalam unit-unit kompetensi yang berkaitan dengan :

4.1.1 TIK.OP02.001.01 Mengoperasikan komputer personal yang berdiri sendiri (PC stand alone).

4.1.2  TIK.OP02.003.01 Mengoperasikan sistem operasi.

4.1.3  TIK.OP02.006.01 Mengoperasikan penelusur Web (Web Browser).

4.1.4   TIK.OP03.001.01 Menjelaskan konsep dan teknik dasar

pemrograman.

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

4.2.1 TIK.OP03.002.01 Mengoperasikan dasar-dasar basis data (database).

 

 

KOMPETENSI KUNCI

 

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

 


BAB III

STRATEGI DAN METODE PELATIHAN

 

3.1.      Strategi Pelatihan        

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

Persiapan/perencanaan

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

 

Permulaan dari proses pembelajaran

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

 

Pengamatan terhadap tugas praktik

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

 

Implementasi

  1. Menerapkan pelatihan kerja yang aman.
  2. Mengamati indicator 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 datang 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.      World Wide Web

World web atau web saja, adalah ruang tempat informasi disimpan  dimana orang dapat membaca atau menulis sesuatu di dalamnya melalui alat-alat yang terhubung dengan internet. Web terdiri dari 4 (empat) hal yaitu :

  • § Hypertext: kemampuan untuk berpindah dari sebuah dokumen ke dokumen lainnya melalui koneksi yang ada di dokumen tersebut (hyperlinks)
  • § Resource identifier: kemampuan untuk menemukan resource lain (komputer, dokumen atau lainnya) dalam jaringan melaui nama yang unik.
  • § Client-server: arsitektur jaringan yang memisahkan client (umumnya tampilan grafis antarmuka) dari server.
  • § Markup language: karakter atau kode yang disisipkan di dokumen yang menyatakan cara teks ditampilkan.

 

Ketika kita hendak mengakses halaman web atau resource lain di web, hal yang pertama dilakukan adalah memasukkan URL ke web browser atau memilih sebuah hyperlink dari halaman yang akan diakses. URL kemudian diterjemahkan menjadi  alamat IP. Langkah selanjutnya adalah mengirim HTTP request ke web server yang ditunjukkan oleh alamat IP. HTTP (hyper text transfer protocol) adalah metode untuk pengiriman informasi di web. Web server akan mengembalikan halaman web atau resource yang diminta web browser. Tugas web browser selanjutnya adalah menampilkan halaman yang direpresentasikan dengan HTML, CSS atau file yang lain.  Halaman awal yang ditampilkan ke user dinamakan Homepage, halaman ini merupakan titik awal aktifitas kita di web tersebut. Protocol yang memungkinkan untuk server meneruskan request dari web browser ke aplikasi eksternal adalah common gateway interface. contoh : http://www.comp.leeds.ac.uk/cgi-bin/Perl/environment-example?two+words. String setelah simbol (?) akan diteruskan ke variabel encironment QUERY_STRING.

 

4.2.      Pengenalan HTML

HTML ( Hypertext Markup Language) adalah bahasa yang digunakan untuk menampilkan informasi di web browser. Dibuat oleh Tim berners-Lee, yang selanjutnya dikembangkan lebih lanjut hingga mempunyai standarisasi internasional   ( ISO / IEC 15445 : 20000 ). Pada saat ini spesifikasi dari HTML diatur oleh world wide web consortium ( W3C ).  W3C mendefinisikan HTML sebagai aplikasi dari Standard Generalized Markup Language (SGML). SGML adalah bahasa untuk mendefinisikan bahasa lain dengan menentukan struktur file dalam bentuk document type definition (DTD), yang merupakan sintaks dari berbagai elemen dan berbagai bahasa yang salah satunya merupakan HTML.

 

4.3.      Tag

Sebuah file HTML hanyalah file text yang mengandung informasi yang akan diumumkan di Internet. Selain itu, di dalamnya terkandung instruksi yang disebut tag dimana instruksi ini akan ”memberitahu” web browser struktur atau tampilan dari file. Sebuah tag terdiri dari tag pembuka, contohnya : <b>, dan juga bisa mempunyai tag penutup, contohnya: </b>. Tetapi ada juga tag yang tidak mempunyai tag penutup, contohnya: <br>, yang berfungsi sebagai baris baru. Informasi yang akan ditampilkan berada diantara tag-tag tersebut

Beberapa tag memiliki atribut yang membutuhkan nilai setelah tanda sama dengan dan nilai ini ada di dalam tanda petik, sebagai contoh :

<img src=”logo.gif” alt=”LSP telematika” height=”100” width=”100”>

tag diatas memiliki 4 (empat) atribut yaitu src, alt, height dan width, dimana masing-masing atribut memiliki nilai. Berikut ini adalah struktur lengkap dari tag HTML :

 

Gambar 4.3.1 Struktur tag HTML

 

Untuk lebih jelasnya, berikut ini adalah contoh dari file HTML yang lengkap:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<head>

<title>Judul file</title>

</head>

<body>

             isi file

</body>

</html>

 

Contoh file diatas menggunakan tag-tag yang umumnya ada pada file HTML, berikut ini adalah keterangan dari tag-tag tersebut:

 

  • <!DOCTYPE> menunjukkan versi dari HTML yang digunakan. Berikut ini adalah deklarasi DOCTYPE HTML untuk berbagai versi:

 

 

 

 

tabel 4.3.1 : Doctype HTML dalam Berbagai Versi

Versi HTML Deklarasi <!DOCTYPE>
2.0 <!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML //EN”>
3.2 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>
4.0 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
4.0 Frameset <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”>
4.0 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
4.01 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
4.01 Frameset <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”>
4.01 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 //EN”>
XHTML 1.0 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>
XHTML 1.0 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”>
XHTML 1.0 Frameset <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”>

 

  • <html> dan <html> menjadi batas dari awal dan akhir file HTML. Tag ini hanya mengandung tag <head>, tag <body> dan tag <frameset>.
  • <head> dan </head> mengandung informasi dari file (meta-information). Search engine menggunakan   meta-information untk melakukan index dari file HTML. Informasi yang ada di tag ini diantaranya script, style sheet, comment dan judul file. Pada versi HTML 4.01 transitional DTD, tag yang diperbolehkan dalam tag ini selain <head> adalah <base>, <isindex>, <link>, <meta>, <object>, <script> dan <style>.
  • <title> dan </title> merupakan tag untuk judul file yang akan muncul pada title bar di web browser. Contoh : kode <title> Contoh dokumen HTML <title> maka tampilan title bar di web browser adalah sebagai berikut :

         

          Gambar 4.3.2 Title Bar di Web Browser

Menambahkan tag lain di dalam tag ini tidak akan membawa perubahan.

  • <body> dan </body> menjadi batas dari isi file HTML. Dalam sebuah file HTML hanya ada satu tag ini. Dalam tag ini terdapat bervariasi tab-tag lain, seperti <h1> untuk heading, <b> untuk menebalkan tulisan, <img> untuk memasukkan gambar dan banyak lainnya. Selain tag, dalam <body> bisa disisipkan karakter khusus seperti simbol copyright atau tanda lebih besar. Karakter khusus ini ditampilkan dalam file HTML dalam bentuk &code, dimana code bisa terdiri dari kata atau numerik, sebagai contoh : simbol < (lebih kecil) mempunyai kode &lt; atau <

 

Dalam penulisan tag HTML, terdapat beberapa aturan. Tetapi aturan ini tidak ketat dan hanya bersifat anjuran saja. Tetapi hal ini tidak berlaku pada XHTML. Pada file XHTML jika ada penulisan kode yang melanggar aturan maka file tersebut tidak  akan ditampilkan. Berikut ini adalah beberapa aturan dari HTML :

  1. HTML tidak case sensitive.

Contoh : <B> Bold <B> atau <b> Bold <b> atau <B> Bold <b> atau <b> Bold <B> mempunyai arti sama dalam file HTML.

  1. Sebuah spasi tidak diacuhkan HTML.

Penulisan spasi lebih dari sekali akan dianggap sebagai penulisan dengan satu spasi. Browser juga akan mengacuhkan tab dan enter. Perhatikan contoh dibawah ini :

<b> T e s S p a s i </b>

<b> T    e        s        S        p        a        s        i</b>

<b> T

es

Sp                            si<b>

Akan menghasilkan :

TesSpasi

      TesSpasi

      TesSpasi

Tetapi dalam beberapa situasi spasi tidak diabaikan, contohnya pemakaian spasi dalam tag <pre>.

  1. Beberapa tag hanya berpengaruh jika berada di dalam tag tertentu

Aturan ini disebut juga content model. Tag <input> dan <option> adalah contoh tag yang dipengaruhi aturan ini. <input> akan berguna jika berada dalam tag <form>. <option> hanya ditemukan dalam <select>.

  1. Dalam penggunaan tag dalam tag, pemasangan tag harus sesuai

<b><i>memiliki pasangan tag yang salah</b></i> tetapi <b><i> memiliki pasangan tag yang benar</i></b>. Dalam XHTML aturan ini merupakan keharusan.

  1. 5.           Nilai atribut diawali dan diakhiri dengan tanda kutip

Penggunaan kutip dapat berupa ” atau ’.  Kedua tanda ini akan menghasilkan tampilan yang sama. Dalam XHTML aturan ini merupakan keharusan.

Seperti yang telah disebutkan sebelumnya, beberapa aturan diatas menjadi keharusan dalam XHTML. Selain aturan-aturan diatas masih ada aturan lain yang berlaku di XHTML, diantaranya :

  1. Dalam file XHTML harus terdapat tag yang menunjukkan versi HTML yang digunakan, <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0Transitional//EN”>”http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd”>.
  2. <html>, <head> dan <body> (atau <frameset) harus ada dalam file XHTML.
  3. <title> merupakan tag paling awal dari <head>
  4. Setiap tag pembuka harus diakhiri dengan tag penutup
  5. Setiap tag mempunyai tag penutup, contoh : tag <hr> tidak memiliki tag penutup untuk itu pasangan dari <hr> adalah <hr />.
  6. Penulisan tag dengan huruf kecil.

 

4.4.     Editor HTML

Editor  untuk membuat file HTML banyak tersedia, diantaranya Notepad, Microsoft Frontpage dan Macromedia Dreamweaver. Pada buku ini akan dijelaskan penulisan kode HTML di editor notepad, Microsoft frontpage dan Dreamweaver.

 

4.4.1.      Notepad

Notepad merupakan editor yang paling sederhana Pada editor ini, kode HTML harus dituliskan satu demi satu kemudian hasilnya disimpan dengan ekstension .html atau .htm.

 

 

Gambar 4.4.1.1 Kode HTML di Editor Notepad

 

4.4.2.      Microsoft Frontpage

Microsoft frontpage merupakan editor keluaran Microsoft untuk membuat website. Editor ini akan mempermudah orang-orang yang akan membuat kode-kode HTML karena editor ini telah menyediakan icon serta menu yang akan menampilkan kode tag HTML, sehingga kode tidak perlu ditulis satu-demi satu tapi tetap dapat diubah sesuai keinginan penulis kode.

 

 

Gambar 4.4.2.1 Gambar Kode HTML di Editor Microsoft Frontpage

 

Untuk melihat tampilan di web browser dari kode yang telah dibuat editor microsoft frontpage menyediakan ”Preview”. Beberapa contoh web browser  untuk mengakses web adalah internet explorer keluaran microsoft, firefox, netscape dan opera.

4.5.     Format Teks

Dalam penulisan teks ada struktur tertentu, misalnya untuk penulisan judul digunakan huruf yang tebal, tulisan dalam bentuk paragraf dan lain sebagainya. HTML mendukung penformatan teks dengan menyediakan tag-tag untuk itu. Beberapa diantaranya akan dijelaskan pada bab ini.

 

4.5.1 Heading

Heading digunakan untuk membuat headline dalam file. Ada 6 (enam) level heading yang didukung HTML yaitu <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. Teks yang ada diantara tag tersebut akan ditampilkan dalam font yang lebih tebal dan lebih besar jika dibandingkan dengan teks biasa. Berikut ini adalah contoh kode dengan tag heading :

 

<html>

<head>

          <title>Heading</title>

</head>

<body>

            <h1>Heading 1<h1><br>

            <h2>Heading 2<h2><br>

            <h3>Heading 3<h3><br>

            <h4>Heading 4<h4><br>

            <h5>Heading 5<h5><br>

            <h6>Heading 6<h6>

</body>

</html>

 

Sedangkan tampilan kode diatas oleh browser, adalah sebagai berikut :

 

Gambar 4.5.1.1  Tampilan Heading

 

4.5.2  Paragraph

Untuk mengatur teks menjadi paragraf digunakan tag <p> dan </p>.  Biasanya browser manambahkan sebaris atau 2 (dua) baris kosong sebelum paragraf.  Teks dalam tag ini mempunyai format rata kiri. Atribut align memungkinkan anda untuk menformat teks menjadi rata kiri, kanan atau tengah. Dalam versi HTML 4.01, anda bisa menformat teks dengan format justify. Berikut ini contoh kode dengan tag paragraf beserta atribut align :

 

<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.01 Transitional//EN”>

<html>

<head>

<title>Paragraf Example</title>

</head>

<body>

 

<p> Contoh paragraph pertama dari tag p. </p>

<p align=”center”> ini paragraf kedua dengan pengaturan tengah. Bukan suatu ide yang baik karena sulit untuk dibaca untuk tulisan yang bukan judul. </p>

<p align=”right”>Paragraf dengan pengaturan kanan. </p>

<p aligned=”justify”>Dengan browser yang kompatibel dengan HTML 4.0 paragraf bias ditampilkan dengan sesuai. Seperti terlihat pengaturannya kadang tidak pas, tetapi lebih mudah dibaca dan tidak semua browser bias melakukannya. </p>

</body>

<html>

 

Hasil keluaran dari kode diatas adalah :

Gambar 4.5.2.1  Tampilan Paragraf

 

4.5.3   Kutipan

Dalam penulisan teks, terkadang kita ingin memasukkan kutipan dan membedakan kutipan tersebut dengan teks yang lain. Hal ini dapat kita lakukan dengan tag <blockquote> dan </blockquote>. Tag ini akan membuat teks yang dikutip agak menjorok ke kanan. Tetapi jika kita hanya ingin memasukkan kutipan pendek, misalnya kalimat percakapan, kita dapat menggunakan tag <q> dan </q>. Tag ini akan menambahkan symbol (“) di awal dan di akhir kalimat. Browser lama tidak mendukung <q> tapi tag ini merupakan bagian dari spesifikasi versi HTML 4.1/4.01. Berikut ini adalah contoh penggunaan <blockquote> dan <q> :

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<head>

<title>Quotation Example</title>

</head>

<body>

<h1 align=”center”>MadeLeine Quotes</h1>

 

<p>See the comments the press has about the new store accross 4 avenue.</p>

<q>The store sells variety of product, and all products seem to less expensive than other stores</q>

<br>–Matthew Somolovich, Ordinary Citizen

 

<blockquote cite=”http://www.MadeLine.com”>

MadeLine’s products are the best product with low price. You will not find other stores like MadeLine. Bla bla bla….

</blockquote>

–Clarissa M. Foley, Clothes Magazine

 

<p>With kudos like this, you need to make sure to buy your clothes on MadeLine, today!</p>

</body>

</html>

 

Tampilan dari kode diatas adalah sebagai berikut :

 

 

Gambar 4.5.3.1 Contoh Penggunaan <blockquote> dan <q>

 

 

 

4.5.4   Link

Link adalah pointer dari file tempat link berada ke tujuan tertentu. Dalam HTML, cara untuk mendefinisikan link dengan menggunakan tag <a> dan </a> anchor. Sedangkan untuk menghubungkan ke tujuan tertentu, <a> membutuhkan atribut href. Atribut href merupakan alamat tujuan, seperti http://www.yahoo.com. Teks yang berada dalam tag ini berfungsi sebagai alat untuk mengaktifkan hyperlink. Sebuah link bisa terdiri dari teks, gambar atau kombinasi keduanya. Bentuk link yang umum adalah <a href=”url”>visit our site</a>. URL Teks “visit our site” adalah link. URL (Uniform Recources Locator) adalah alamat sebuah website. Berikut ini adalah contoh kode penggunaan <a> :

 

<html>

<head>

<title>Simple Link Example</title>

</head>

<body>

<h1 align=”center”>Lots of Links</h1>

<hr>

1.&nbsp;&nbsp;

Visit &nbsp;&nbsp;<a href=”www.yahoo.com”>Yahoo! </a><br>

2.&nbsp;&nbsp;

<a href=”www.amazon.com”><img src=”C:/buy.gif” width=”16″      height=”16″ border=0 ></a><br>

3.&nbsp;&nbsp;

Search&nbsp;&nbsp<a href=”www.google.com”>Google <img src=”C:/      b01.gif” width=”16″ height=”16″ border=0></a>

</body>

</html>

 

Tampilan HTML dari kode diatas seperti gambar dibawah ini :

 

Gambar 4.5.4.1 Tampilan HTML dari <a href=”url”> dan </a>

 

Umumnya link ditandai dengan teks yang digarisbawahi dan memiliki warna berbeda, seperti biru atau ungu, tergantung apakah link tersebut pernah dipilih sebelumnya. Nilai atribut href tidak hanya alamat situs lain, tetapi bisa juga alamat file bahkan alamat email. Berikut contoh beberapa link beserta penjelasan singkat :

  • <a href=”http://www.google.com”>Visit Google</a>

URL dapat berupa alamat ke home page situs web site.

  • <a href=”http://www.MadeLine.com/about/”>About MadeLine</a>

URL dapat berupa alamat ke alamat file dalam direktori tertentu

  • <a href=”http://www.MadeLine.com/products/domes.htm”>Clothes</a>

URL dapat berupa alamat file.

  • <a ref=”http://www.MadeLine.com/products/clothes.html#top>Bag</a>

URL dapat berupa alamat ke posisi tertentu dalam file.

  • <a href=”../../index.html”>Home</a>

URL dapat berupa alamat relatif.

  • <a href=”mailto:info@MadeLine.com”>More Information</a>

URL tidak harus berupa alamat HTTP. Terkadang penggunaan mailto tidak berfungsi dikarenakan browser tidak dikonfigurasi untuk mengirim email atau tidak mendukung bentuk URL ini.

 

Seperti yang telah dijelaskan sebelumnya, warna teks link adalah biru jika belum dikunjungi dan ungu, jika pernah dikunjungi sebelumnya. Jika link berupa gambar, warna border gambar juga biru atau ungu, kecuali jika atribut border bernilai 0 (nol). Warna link dapat diubah dengan menggunakan atribut link, alink dan vlink dalam tag body. Atribut link mengganti warna link yang belum dikunjungi, sedangkan atribut vlink mengganti warna link yang telah dikunnjungi. Atribut alink mengganti warna dari link yang aktif, yaitu warna link ketika dipilih.

 

Dengan menggunakan HTML style sheet, anda dapat mengubah dekorasi link sehingga link tidak harus digarisbawahi, mengubah style link ketika dilewati pointer mouse dan lain sebagainya. Berikut ini adalah contoh kode format link yang berbeda dari biasanya :

 

<html>

<head>

<title>Link Style Changes</title>

<style type=”text/css”>

<!–A          {text-decoration: none;}a:hover    {color:red; text-decoration: underline;}–>

</style>

</head>

<body link=”red” alink=”blue” vlink=”blue”>

<a href=”http://www.yahoo.com”>Test link to Yahoo!</a>

</body>

</html>

Selain atribut href, dalam <a> masih terdapat berbagai atribut. Daftar atribut dalam <a>  terdapat pada tabel 1.5.4.1.

 

Tabel 4.5.4.1 : Daftar Atribut Dalam <a>

Nama Atribut

Nilai Atribut

Penjelasan

href URL Menentukan alamat link
name Text Menamai anchor sehingga dapat menjadi target dari anchor yang lain
id Text Identifikasi anchor agar dapat menjadi target dari anchor yang lain, diakses oleh style sheet, dan untuk scripting
target A frame name Menentukan frame yang menjadi tujuan link
title Text Menentukan teks tooltip untuk link
accesskey A character Menentukan bagian keyboard untuk mengakses link
rel Text Menentukan hubungan dari objek yang dihubungkan
rev Text Menentukan hubungan objek yang menghubungkan

 

Seperti yang telah disebutkan sebelumnya, URL yang menjadi tujuan link tidak harus alamat website, tetapi bisa juga lokasi dalam sebuah file HTML. <a> juga digunakan untuk mendefinisikan lokasi (marker) tersebut. Jika marker ditempatkan dalam file html maka dapat menjadi tujuan dari link. Agar marker dapat dijadikan tujuan maka marker tersebut didefinisikan terlebih dahulu, contoh : < a name=”marker”>. Kemudian marker tersebut dapat diakses dengan <a name=”#marker”>. Sebagai contoh : <a name=”#marker”>This is a marker</a> mengarahkan teks ”this is a marker” ke tujuan yang ditetapkan sebelumnya. <a> dapat berperan sebagai tujuan dan link dalam waktu yang bersamaan, contoh : <a name=”yahoolink” href=”http://www.yahoo.com/”>Yahoo!</a>. Berikut ini adalah contoh kode penggunaan marker

 

<html>

<head>

<title>Name Attribut Name</title>

</head>

<body>

<a name=”top”></a>

Ke bawah <a href=”#bottom”>bottom</a> dokumen<br>

<a href=”../examples/testfile.htm#marker1″>tanda</a>ke dokumen lain.

<p>mensimulasikan dokumen dengan banyak break.</p>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<strong id=”middle”>the middle</strong>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br>

<hr>

<a name=”bottom” href=”#top”>ke atas</a>

<a href=”#middle”>ke tengah</a>

 

</body>

</html>

 

4.5.5 List

Modern HTML memiliki 3 (tiga) bentuk list : ordered list (<ol>), unordered list (<ul>) dan definition list (<dl>). Dua bentuk point lainnya jarang digunakan, yaitu <menu> dan <dir>. List bisa memiliki hirarki dan dapat mengandung struktur lain seperti paragraf.

 

4.5.5.1   Ordered List

Ordered list, <ol> dan </ol>, merupakan list yang berurutan. Urutan ini direpresentasikan oleh angka, dengan menggunakan angka arab, huruf atau angka romawi. Ordered list sangat baik untuk membuat semacam kerangka atau instruksi langkah-per-langkah, karena list diberi nomor secara otomatis oleh browser. List item yang berurutan dan list yang lain didefinisikan dengan menggunakan <li> yang tidak memerlukan tag penutup. Untuk XHTML, tag penutup </li> dianjurkan. Letak list item dibuat agak menjorok ke dalam oleh browser. Penomoran list dimulai dari 1 (satu). Bentuk umum dari list seperti dibawah ini :

<ol>

                   <li>Item 1</li>

                   <li>Item 1</li>

                   ……

                   <li>Item 1</li>

          </ol>

Ada beberapa atribut untuk <ol>, diantaranya atribut type. Atribut type digunakan untuk menentukan jenis huruf penomoran. Nilai “a” berarti penomoran dengan huruf kecil, “A” berarti penomoran dengan huruf besar, “I” berarti penomoran dengan angka       romawi dan ”I” berarti penomoran dengan angka romawi besar. Nilai default atribut type adalah ”1”, yaitu penomoran biasa.

 

<li> juga mempunyai atribut type yang bernilai sama dengan nilai atribut pada <ol>. Jika atribut type pada <li> diberi nilai maka nilai tersebut akan digunakan dikeseluruhan list, kecuali <li> yang lain memberi nilai baru pada atribut type. Nilai atribut start pada <ol> harus berupa angka walaupun nilai atribut type bukan angka. Atribut value pada <li> dapat digunakan untuk menggantikan penomoran yang sedang digunakan. Nilai atribut value juga berupa angka. Berikut ini adalah contoh kode untuk membuat ordered list :

<html>

<head>

<title>Ordered List Example</title>

</head>

<body>

 

<p>Ordered lists can be very simple.</p>

 

<ol>

          <li>Item 1

          <li>Item 2

          <li>Item 3

</ol>

 

<p>Ordered lists can have a variety of types</p>

 

<ol>

          <li type=”a”>Lowercase letters

          <li type=”A”>Uppercase letters

          <li type=”i”>Lowercase Roman numerals

          <li type=”I”>Uppercase Roman numerals

          <li type=”1″>Arabic numerals

</ol>

 

<p>Ordered lists can start at different values and with different types.</p>

 

<ol start=”10″ type=”a”>

<li>This should be j

<li value=”3″>This should be c

          <ol>

                   <li>List can nest

                             <ol>

                                      <li>Nesting depth is unlimited

                             </ol>

          </ol>

</ol>

</body>

</html>

 

Tampilan HTML untuk kode diatas adalah gambar dibawah ini :

 

Gambar 4.5.5.1.1 Tampilan HTML Untuk Ordered List

 

4.5.5.2  Unordered List

Unordered list digunakan untuk mendaftarkan item dengan penomoran yang tidak spesifik. Jenis list ini dapat digunakan untuk mendaftarkan fitur dan keuntungan sebuah produk. Browser biasanya menambahkan bullet atau sejenisnya (lingkaran hitam, kotak, lingkaran putih) untuk tiap item dan posisinya dibuat agak menjorok kedalam

 

Unordered list dapat memiliki hirarki. Untuk setiap level hirarki, posisi list semakin menjorok ke dalam, dan jenis bullet juga berubah. Umumnya, lingkaran hitam digunakan pada lever teratas dari list. Lingkaran yang kosong digunakan pada level kedua, sedangkan level ketiga menggunakan kotak. Atribut type dapat digunakan untuk menentukan jenis bullet dari list. Atribut type juga dapat muncul dalam <ul> dan akan menentukan jenis bullet untuk keseluruhan list atau dapat muncul di setiap <li>. Nilai atribut type pada <li> dapat mengubah nilai list keseluruhan kecuali jika diubah kembali oleh type yang lain. Nilai atribut type dapat berupa ”disc”, ”circle” atau ”square”. Berikut ini adalah contoh kode penggunaan unordered list :

 

<html>

<head>

<title>Unordered List Example</title>

</head>

<body>

 

<ul>

          <li>Unordered lists

                   <ul>

                             <li>can be nested.

                                      <ul>

                                                <li>Bullet changes on nesting.

                                      </ul>

                   </ul>

</ul>

 

<p>Bullets can be controlled with TYPE attribut.

Type can be set for the list as a whole or item by item.</p>

 

<ul type=”square”>

          <li>First item bullet shape set by UL

          <li type=”disc”>Disc item

          <li type=”circle”>Circle item

          <li type=”square”>Square item

</ul>

 

</body>

</html>

 

 

Tampilan HTML untuk kode diatas adalah gambar di bawah ini :

 

 

Gambar 4.5.5.2.1 Tampilan HTML Unordered List

 

4.5.5.3    Definition List

 

Definition list adalah list yang berpasangan. List ini digunakan untuk menyusun posisi kata dan definisi dari kata tersebut. Tag definition list adalah <dl> dan </dl>. Setiap kata yang akan didefinisikan diawali dengan <dt>, singkatan dari ”definition term”. Sedangkan definisi dari kata tersebut diawali dengan <dd>. Tag <dt> dan <dd> tidak harus menggunakan tag penutup. Berikut ini adalah contoh kode penggunaan definition list:

 

<html>

<head>

<title>Definition List Example</title>

</head>

<body>

<h1 align=”center”>Definitions</h1>

<dl>

          <dt>Gadget</dt>

          <dd>A useless device used in many HTML examples.</dd>

          <dt>Gizmo<dt>

          <dd>Another useless device used in a few HTML examples.</dd>

<dl>

</body>

</html>

Tampilan untuk kode di atas adalah sebagai berikut :

 

 

Gambar 4.5.5.3.1 Tampilan HTML Penggunaan Definition List

4.6  Gambar

File gambar dapat digunakan untuk memperindah dan memudahkan navigasi file  Tipe file gambar yang ada sekarang ini diantaranya adalah GIF (graphics interchange format – .gif), JPEG/JPG (joint photographic experts – .jpeg), XBM (X bitmaps – .xbm), XPM (X pixelmaps – .xpm), PNG (portable network graphics – .png). File gif baik untuk digunakan dalam ilustrasi seperti logo, sementara file jpeg baik untuk gambar yang kompleks seperti foto. File bertipe JPG berukuran lebih kecil dibandingkan tipe yang lain karena kompresi yang digunakan mengabaikan piksel-piksel yang dianggap membawa perubahan minor pada gambar, kompresi ini dinamakan lossy. Faktor yang harus diperhatikan oleh web designer mengenai gambar adalah ukuran file serta kualitasnya.

 

Untuk menyisipkan gambar dalam file HTML, gunakan tag <img> dan tentukan nilai atribut src, yaitu URLdari file gambar berupa absolut URL atau relatif URL. Untuk memasukkan gambar yang berada pada tempat yang sama dengan file HTML, gunakan

<img src=”logo.gif”>

Sedangkan penggunaan alamat absolute URL, dengan cara

<img src=”http://www.MadeLine.com/images/logo.gif”>

Berikut ini adalah contoh kode penggunaan tag < img> :

<html>

<head>

<title>Image Example</title>

</head>

<body>

<h2 align=”center”>Image Example</h2>

<img src=”images/chobits.jpg” width=”207″ height=”325″ border=0>

</body>

</html>

 

Tampilan untuk kode di atas adalah sebagai berikut :
Gambar 4.6.1 Tampilan HTML untuk <img>

 

Dalam <img> terdapat beberapa atribut, diantaranya alt. Alt digunakan untuk menyediakan teks pengganti apabila gambar tidak dapat ditampilkan. Nilai atribut alt dapat ditampilkan di tempat gambar atau sebagai tool tip. Sekarang ini, dengan adanya atribut title, alt digunakan untuk menampilkan teks apabila gambar tidak dapat ditampilkan dan nilai dari atribut title sebagai tool tip.

 

 

Gambar 4.6.2 Tampilan HTML dengan Alt

 

Gambar dapat diatur posisinya dalam file HTML dengan menggunakan atribut align. Atribut align dapat bernilai top, bottom atau middle. Apabila gambar disertakan dalam teks maka teks selanjutnya akan terletak di top, bottom atau middle dari gambar tergantung nilai dari atribut align. Berikut ini adalah contoh kode penggunaan <img> dan atribut align beserta hasil tampilannya:

<html>

<head>

<title>Basic Image Alignment</title>

</head>

<body>

 

<p><img src=”image/aligntest1.gif” align=”top” border=”1”>

This text should be aligned to the top of the image.</p>

 

<p><img src=”images/aligntest1.gif” align=”middle” border=”1”>

This text should be aligned to the middle of the image.</p>

 

<p><img src=”images/aligntest1.gif” align=”bottom” border=”1”>

This text should be aligned to the bottom of the image.</p>

 

</body>

</html>

 

Gambar 4.6.3 Tampilan HTML dengan Align

 

Dengan nilai align seperti diatas, teks tidak berada di sekeliling gambar sehingga layout file terlihat aneh. Netscape memperkenalkan nilai left dan right untuk atribut align. Dengan demikian maka jika gambar berada di sebelah kiri maka teks akan berada di sebelah kanan gambar, demikian juga sebaliknya. Berikut ini adalah contoh kode penggunaan left dan right untuk atribut align beserta tampilannya :

<html>

<head>

<title>Improved Text Flow</title>

</head>

<body>

<img src=” image/aligntest1.gif ” align=”left”>

The top images has its align attribute set to “left” so the text flows around it to the “right”. The top image has its align attribute set to “left” so the text flows around it to the “right”.

 

<br clear=”left”><br><br>

 

<p><img src=” image/aligntest1.gif ” align=”right”>

The top images has its align attribute set to “right” so the text flows around it to the “left”. The top image has its align attribute set to “right” so the text flows around it to the “left”.

 

</body>

</html>

 

 

 

Gambar 4.6.4 Tampilan HTML dengan Align Right dan Left

 

Pada versi HTML 3.2 Netscape memperkenalkan atribut hspace dan vspace. Atribut ini dapat digunakan untuk menyediakan rung kosong di sekitar gambar. Atribut hspace digunakan untuk memasukkan ruang kosong di sebelah kiri dan kanan gambar. Sedangkan atribut vspace digunakan untuk memasukkan ruang kosong di atas dan di bawah gambar. Nilai kedua atribut ini harus positif dalam piksel. Berikut ini adalah contoh kode untuk <img> dan atribut hspace, vspace beserta hasil tampilannya :

<html>

<head>

<title>HSPACE and VSPACE Example</title>

</head>

<body>

 

<p>The image below has its<tt><b>&lt;HSPACE&gt;</b></tt>and

<tt><b>&lt;VSPACE&gt;</b></tt> attributes set to 50 pixels, so the

text will flow around it at a distance of 50 pixels. The rest of this

text is dummy text. if it said anything interesting you would

certainly be the first to know.

 

<img src=”images/aligntest2.gif”  align=”left” hspace=”50″ vspace=”50″>

This is dummy text. If it said anything interesting you would certainly be the first to know. There’s really no point in reading the rest of it. This is dummy text. If it said anything interesting you would certainly be the first to know. There’s really …..

</p>

</body>

</html>

 

 

 

 

Gambar 4.6.5 Tampilan HTML dengan Atribut  HSPACE dan VSPACE

 

4.7 Tabel

Tabel didefinisikan dengan tag <table>. Sebuah tabel terbagi atas baris (tag <tr) dan setiap baris terbagi menjadi kolom (tag <td). Dalam kolom dapat berisi teks, gambar, list, paragraf, form, tabel dan lainnya. Berikut ini adalah contoh kode tabel beserta hasil tampilannya di web :

<table border=”1″>

<tr>

<td>baris 1, kolom 1</td>

<td>baris 1, kolom 2</td>

</tr>

<tr>

<td>baris 2, kolom 1</td>

<td>baris 2, kolom 2</td>

</tr>

</table>

 

Hasil keluarannya :

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

 

4.7.1  Atribut Border

Jika kita tidak menentukan atribut border maka tabel akan ditampilkan tanpa border. Terkadang hal ini berguna tetapi umumnya, kita menginginkan agar border terlihat. Untuk menampilkan tabel dengan border, kita harus memberi nilai pada atribut border :

<table border=”1″>

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

 

4.7.2  Heading Pada Tabel

Heading pada tabel didefinisikan dengan tag <th>. Berikut ini adalah contoh kode heading pada tabel :

 

<table border=”1″>

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

 

Hasil keluarannya adalah sebagai berikut :

Heading

Another Heading

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

 

BAB V

SUMBER-SUMBER YANG DIPERLUKAN

UNTUK PENCAPAIAN KOMPETENSI

 

5.1.      Sumber Daya Manusia

 

Pelatih

Pelatih Anda dipilih karena dia telah berpengalaman. Peran Pelatih 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 Perpustakaan       

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 dari perusahan
  2. Lembar kerja
  3. 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.

 

Sumber-sumber bacaan yang dapat digunakan :

Judul

Pengarang

Penerbit

 

 

:

:

:

 

 

 

15 Jam HTML 4.01 Weekend Crash

Greg Perry

Elex media Komputindo

 

 

 

 

5.3.      Daftar Peralatan/Mesin dan Bahan         

  • Komputer (CPU, monitor, keyboard, mouse)
  • Text edit, seperti notepad atau textpad
  • Browser
  • File gambar

 

Testimoni

artikel lainnya Membuat Halaman Web Menggunakan Bahasa Web (Html) Tingkat Dasar TIK.OP03.003.01

Monday 2 February 2015 | blog

  SILABUS       Nama Sekolah               : SMA  WARGA Surakarta Mata Pelajaran              : TIK Kelas/Semester            …

Sunday 15 February 2015 | blog

MATERI PELATIHAN BERBASIS KOMPETENSI SEKTOR TEKNOLOGI INFORMASI DAN KOMUNIKASI             MEMPERBAIKI…

Tuesday 19 August 2014 | blog

Penilaian KOMPETENSI KETERAMPILAN: portofolio PRAKTIK PROJEK PORTOFOLIO Penilaian Kompetensi KETERAMPILAN: Penilaian terhadap kompetensi keterampilan peserta didik…

Sunday 12 July 2015 | blog

Tujuan Pemelajaran 1.    Mengoperasikan PC yang tersambung ke jaringan area lokal. 2.    Memutuskan koneksi jaringan pada …