HTML? Ya…. Dengan HTML kita akan membentuk program Policy Editor. Jadi program Policy Editor yang kita buat disusun berdasarkan 3 skrip, yaitu : HTML, Vbscript dan Windows Scripting Host. Wah … kalau begitu kita mesti belajar script lagi dong…. Iya ! Memang kenapa ? Takut ya ? Jangan … saya akan membimbing Anda secara pelan. Semoga dapat dipahami. Juga, jika paham, tentu akan meningkatkan level kemaniakan Sampeyan akan registry … :)
1. HTML: ini apa lagi?
HTML Merupakan kependekan dari HyperText Markup Language. Deskripsi singkat dari HTML adalah suatu kumpulan tag yang digunakan untuk menentukan bagaimana web page seharusnya ditampilkan (dan berperilaku). Jika kita jabarkan kata demi kata secara “nekat” maka lebih kurang sebagai berikut :
HyperText link adalah suatu kata atau frasa dalam suatu Web page yang “merujuk” ke Web page lain. Jika mengklik link ini, maka browser akan membawa kita ke web page lain. Web page sering pula dikenal dengan sebutan hypertext document. Lalu mengapa HTML mempunyai kata "HyperText" di dalamnya, ini karena kita dapat memakainya untuk membuat hypertext document tersebut. Saya juga tidak tahu mengapa kok tidak disebut dengan WPML saja – (Web Page Markup Language.) Tanya para pakar sana….:)
Markup disini dapat diartikan sebagai instruksi bersifat style yang detail yang diketikkan ke suatu dokumen teks yang akan dipublikasikan di World Wide Web (WWW). Inti HTML secara ringkas. Ia akan mempunyai beberapa kode sederhana yang dipakai untuk membentuk teks menjadi bold atau italic, membuat list bullet, memasukkan gambar (image) dan mendefinisikan hypertext links. Yang harus kita kerjakan hanyalah mengetikkan kode skrip ini ditempat yang tepat dan WWW akan menampilkan web page kita sesuai keinginan. Pada kenyataannya software Web browser yang mengendalikan pekerjaan berat ini.
Language. Language disini secara harfiah adalah berati bahasa. Dan benak kita mengacu bahwa language disini berarti suatu bahasa pemrograman. Nah ! ini menurut saya kurang pas. Ia lebih tepat disebut dengan skrip ketimbang sebagai bahasa pemrograman. Karena masih cukup sederhana perintah-perintah yang dipunyainya. Tapi jika Anda (dan para pakar tentunya…:)) ngotot bahwa HTML adalah suatu bahasa pemrograman ya… sudah… anggap saja begitu. Tidak apa-apa kok… sungguh ! …:)
2. Bagaimana memakai Markup Tags?
HTML tidak lebih dari suatu file teks biasa (plain text). Oleh karena itu, kita tidak membutuhkan suatu editor khusus atau suatu compiler untuk membuat file HTML. Jadi kita dapat memakai program teks editor biasa. Seperti halnya teks editor standar milik Windows, yaitu : notepad. Atau mungkin program pengolah teks standar Windows yang bernama : Wordpad, jika file html yang kita bentuk dalam ukuran besar.
Pemakaian markup tags adalah yang membedakan HTML dari teks biasa. Markup tags digunakan secara ekstensif di HTML, karena ia menyediakan kendali untuk text formatting, membuat link ke dokumen lain, memasukkan gambar dan suara. Singkat kata, markup tags adalah kunci untuk membuat halaman HTML dapat berfungsi.
HTML markup tags tediri dari : simbol lebih kecil (<) diikuti dengan nama tag dan ditutup dengan tanda lebih besar (>).
Misalnya kita tulis < B >, jika kita ingin memulai bold alias menampilkan format teks cetak tebal..
Tanda markup tag, secara umum akan berpasangan dengan apa yang disebut dengan ending tag. Ending tag mirip dengan markup tag. Hanya saja ia diawali dengan tanda forward slash (/). Sehingga kita tuliskan < /B > jika kita ingin mengakhiri kode pencetakan bold.
Misalnya kita ingin menulis pesan oke-oke saja dengan cetak tebal, maka kita tuliskan :
< B > Oke-oke saja < /B >
Jika kita lihat dengan Web browser (maksudnya file HTML yang menyimpan skrip tersebut dijalankan), maka tulisan tersebut akan tampil dengan cetak tebal.
Hampir semua markup tag di HTML membutuhkan starting tag dan ending tag. Kecuali paragraph marker, < P >, ia tidak membutuhkan ending < /P > tag. Jikalau pada pembuatan skrip tag ini ada. Ia hanya sekadar pelengkap agar listing skrip lebih mudah untuk dibaca saja.
3. TAG : melihat sekilas
Pada bagian ini, kita akan melihat secara lebih detail beberapa tag yang ada pada file html.
* < HTML > …. < /HTML >
Tag ini dipakai untuk membuat (mengawali dan mengakhiri) suatu dokumen HTML dengan teks, heading, list dan lain sebgainya.
* < TITLE > ….. < /TITLE >
Tag ini digunakan untuk menunjukkan title dari dokumen. Title tag akan digunakan secara ekstensif oleh Web search engines. Search engines akan memakai teks yang ada dalam tag Title, untuk menentukan isi sesungguhnya dari page yang kita buat. Maka buatlah isi Title yang singkat, padat dan informatif, ya?
* < HEAD >< /HEAD >
Dikenal dengan sebutan Head Section. Alias bagian Head. Bagian ini amat penting bagi Web browser dan server.
* < BODY >< /BODY >
Dikenal dengan sebutan Body Section. Bagian Body ini akan berisi teks, grafik (image), link hypertext, dan informasi lainnya yang akan terlihat pada web page. Seluruh tag pemformatan HTML, yang menerangkan isi dan tampilan dari dokumen dipasangkan pada bagian BODY ini.
* < H1 >…< /H1 >
Dikenal dengan sebutan Headings. Headings dipakai HTML untuk mengindikasikan beberapa bagian yang berbeda. Terdapat 6 ukuran Heading. Dari yang besar sampai yang kecil. Pemakaian heading yang umum dilakukan di baris pertama homepage. Pokoknya ia menjadi headline dari dokumen kita .
Untuk memasangkan heading di dokumen, kita dapat memasangkannya di sembarang tempat pada bagian BODY. Heading dimulai dengan huruf H dan diikuti dengan nomor. < H1 > < H2 > < H3 > < H4 > < H5 > < H6 >. < H1 > merupakan ukuran yang paling besar, sedangkan < H6 > adalah yang terkecil. Penulisannya diakhiri dengan simbol < /H1 >atau ukuran lainnya (< /H2 > < /H3 > < /H4 > < /H5 > < /H6 >).
Misalnya : < H1 > Coba-coba < /H1 >
* < P >….< /P >
Dikenal dengan sebutan Paragraph Tag. Tag yang mungkin paling ngepop adalah paragraph marker ini. Karena ia digunakan untuk membentuk teks menjadi beberapa paragraf terpisah. Formating yang kita lakukan di program Notepad, seperti carriage returns, spasi, atau mungkin tab stop, akan diabaikan oleh Web browsers. Satu-satunya jalan untuk mengindikasi paragraf adalah dengan memakai paragraph marker. Yang perlu dicatat tag ini sebetulnya tidak berpasangan ! Sebetulnya tidak ada < /P >. Ia dipasangkan sekadar untuk memudahkan pembacaan data, karena akan diabaikan. Mengapa begitu? Jawabnya saya tidak tahu. Tanya sama pembuat skrip HTML ya…? ?
Hal lain yang perlu diingat adalah ia diletakkan di awal paragraf tidak di akhir paragraf. Kita Masukkan di bagian BODY.
Maka browser akan menyisipkan satu baris kosong sebelum mulai membentuk paragraf baru. Teks yang ada dibelakangnya akan dianggap sebagai satu paragraf sampai ditemukan tanda < P > lagi.
Contoh : ini adalah paragraf pertama yang kita buat.
* < I >….< /I >
Menampilkan teks yang ada dalam kurung menjadi italics alias menjadi cetak miring. Untuk membuat italic pakailah < I > dan diakhiri dengan < /I >
* < SMALL >…< /SMALL >
Menampilkan teks yang ada dalam kurung menjadi lebih kecil. Untuk membuatnya pakailah < SMALL > dan diakhiri dengan < /SMALL >
* < STRIKE >…< /STRIKE >
Menampilkan teks yang ada dalam kurung menjadi dicoret. Untuk membuat strike-through pakailah < Strike > dan diakhir dengan < /Strike >
* < STRONG >…< /STRONG >
Menampilkan teks yang ada dalam kurung menjadi lebih jelas. Biasanya ditampilkan dalam cetak tebal.
* < SUB >…< /SUB >
Menampilkan teks yang ada dalam kurung menjadi subscript.
* < SUP >…< /SUP >
Menampilkan teks yang ada dalam kurung menjadi superscript.
* < TT >…< /TT >
Menampilkan teks yang ada dalam kurung menjadi typewriter style. Biasanya ditampilkan dalam monospaced font.
* < SMALL >…< /SMALL >
Menampilkan teks yang ada dalam tag menjadi bergaris bawah. Untuk membuat underlined pakailah < U > dan diakhiri dengan < /U >
* < B >…< /B >
Menampilkan teks yang ada dalam tag menjadi cetak tebal. Untuk membuat Bold pakailah < B > dan diakhiri dengan < /B >
* < BASE >
Digunakan untuk menyebut URL dari dokumen aktif. Atribut yang dipakai HREF=" "
* < A > < /A >
Tag ini jika digunakan dengan atribut HREF, maka akan membentuk suatu hyperlink dalam dokumen HTML. Jika digunakan dengan atribut NAME, maka akan membentuk anchor ke HTML document.
* < BASEFONT >
Jika digunakan atribut SIZE, tag ini akan mengalahkan ukuran default huruf yang ada pada dokumen aktif. Ukurannya adalah dari 1 sampai 8. Defaultnya adalah 3. SIZE=…
* < FONT > < /FONT >
Digunakan untuk menentukan jenis, warna, ukuran huruf yang ada didalamnya. Atribut lainnya yang sering dipakai adalah COLOR=… FACE="…" SIZE=...
* < BR >…< /BR >
Membuat baris baru (line break)
* < CENTER >…< /CENTER >
Menampilkan teks yang ada dalam tag menjadi di tengah dokumen.
* < HR >…< /HR >
Menampilkan garis horizontal.
* < INPUT >
Memasukan suatu file input dari suatu FORM. Jenis dari input ditentukan dengan atribut TYPE. Seperti TEXT, CHECKBOX, RADIO, SUBMIT, RESET, dan HIDDEN.
* < IMG >
Memasukkan inline image dalam dokumen HTML.
* < CAPTION >…< /CAPTION >
Memasangkan caption dari table.
* < TABLE >…< /TABLE >
Memasukkan tabel di dokumen HTML.
* < TD >…< /TD >
Memasukkan tabel data sel.
* < TH >…< /TH >
Memasukkan sel table header. Teks biasanya akan ditampilkan secara cetak tebal dan dengan posisi rata tengah pada suatu sel..
* < TR >…< /TR >
Menentukan baris dalam tabel.
Untuk keterangan lebih detail tentang masalah perintah-perintah HTML, saya persilahkan untuk mencari dan membaca sendiri di buku-buku yang membahas HTML. Uraian HTML di bagian ini memang tidak mencukupi. Sekadar tahu atau mengenal saja. Kita ini sedang belajar Registry bukan membuat webpage…oke?…?
4. Bagaimana menulis file html sederhana?
Setelah mengenal secara “super singkat“ beberapa markup tags, langkah selanjutnya kita akan belajar bagaimana memasangkannya secara bersama untuk membentuk suatu file html sederhana.
Dokumen HTML secara mendasar dibagai menjadi dua bagian : head dan body. Bagian head berisi informasi penting tentang dokumen tersebut. Misalnya Title. Sedangkan teks, image, dan markup tags akan diletakkan di bagian body.
Sebagai langkah nyata kita akan membuat suatu file html sederhana. Pertama kali aktifkan program notepad atau wordpad. Pada contoh ini kita akan memakai notepad. Klik Start, pilih Run…
Gambar 2.1. : mengaktifkan menu Start
Jendela Run.. akan tampil. Ketikkan notepad Lalu klik Ok atau cukup tekan Enter.
Gambar 2.2. : memanggil pilihan Run…dan mengaktifkan notepad
Jendela program notepad akan segera aktif. Dan kita siap mengisi dengan “skrip-skrip” HTML.
Gambar 2.3. : notepad siap tempur
Oke ! Setiap awal dokumen HTML akan selalu dimulai dengan tag . Ini akan memberitahu Web browser bahwa file tersebut adalah file teks HTML. Sehingga kita ketikkan :
< HTML >
< /HTML >
Nah ! Lalu setiap skrip atau perintah yang kita ketikkan harus berada di dalam (diantara) dua tag tersebut.
Gambar 2.4. : mengetik data awal file html
Langkah berikutnya adalah menyimpan file tersebut. Klik File lalu memilih Save As…
Gambar 2.5. : menyimpan file
Selanjutnya ketikkan nama file. Pada contoh, terlihat kita akan menyimpannya di folder My Documents dengan nama coba.html.
Gambar 2.6. : memberi nama file
Gambar 2.7. : file baru yang terbentuk dilihat dengan Windows Explorer
Suatu file baru akan dibentuk dan disimpan dengan nama coba.html. Apakah memang benar begitu? Untuk memastikannya, kita panggil Windows Explorer, dan pergi ke lokasi dimana file tersebut berada. Setelah ditemukan klik ganda nama file tersebut.
Program Internet Explorer akan tampil dengan isi blank ! alias kosong tidak menampilkan apa-apa. Ini benar. Karena kan kita memang belum menuliskan apa-apa, bukan?..?
Gambar 2.8. : tampilan file HTML
Sekarang kita buat bagian head. Bagian head ini kita tulis dengan kaidah yang sama, yaitu di antara dua penanda HTML.
Sehingga kita tuliskan :
< HTML >
< HEAD >
< /HEAD >
< /HTML >
Kita akan menuliskan perintah Title pada dokumen kita. Title merupakan salah satu elemen dari head. Oleh karena itu, kita akan menuliskannya di antara tag dan . Sehingga kita ketikkan :
< HTML >
< HEAD >
< TITLE >
< /TITLE >
< /HEAD >
< /HTML >
Gambar 2.9. : memasang keterangan pada caption Internet Explrorer
Misalnya kita ketikkan keterangan untuk titel dengan data : Percobaan File HTML. Maka kita ketikkan data tersebut diantara dua tag TITLE. Sehingga kita tuliskan :
< HTML >
< HEAD >
< TITLE >
Percobaan File HTML
< /TITLE >
< /HEAD >
< /HTML >
Jika kita panggil file tersebut, maka Internet Explorer akan aktif. Ia tidak akan menampilkan apapun. Kecuali pada bagian caption-nya (judulnya) berubah menjadi Percobaan File HTML - Micosoft Internet Explorer .
Gambar 2.10.: hasil manipulasi
Bagian selanjutnya sesudah head dari file html adalah body. Body inilah sebenarnya yang berfungsi sebagai pembentuk dokumen kita. Sehingga kita tuliskan :
< HTML >
< HEAD >
< TITLE >
Percobaan File HTML
< /TITLE>
< /HEAD >
< BODY >
< /BODY >
< /HTML >
Seperti telah disinggung di muka, pada tag body inilah kita akan membuat kode-kode pemrograman sesuai keinginan. Misalnya kita tulis pesan atau teks “Ini adalah percobaan file html. Sukses !”, maka kita ketikkan :
< HTML >
< HEAD >
< TITLE >
Percobaan File HTML
< /TITLE >
< /HEAD >
< BODY >
Ini adalah percobaan file html. Sukses !
< /BODY >
< /HTML >
Gambar 2.11. : membuat tulisan
Langkah selanjutnya, simpanlah hasil karya kita ini. Jika file tersebut kita panggil dengan Internet Explorer, maka akanditampilkan pesan yang telah kita tulis diantara < BODY > dan . < /BODY >
Bagaimana ? Ternyata membuat file HTML, sederhana dan gampang bukan ?
Gambar 2.12. : hasil
Sekarang untuk menambah pemahaman, kita akan membuat kalimat tersebut menjadi cetak miring. Yang kita lakukan adalah menambah isi file html yang sedang kita buat, sebagai berikut :
< HTML >
< HEAD >
< TITLE >
Percobaan File HTML
< /TITLE >
< BODY >
< I >Ini adalah percobaan file html. Sukses !< /I >
< /BODY >
< /HEAD >
< /HTML >
Gambar 2.13. : membuat tulisan miring
Setelah menyimpan file, maka aktifkanlah file tersebut. Akan terlihat pada tampilan Internet Explorer, suatu teks yang telah kita tulis..
Gambar 2.14. : teks menjadi italics
Kita dapat mengkombinasikan beberapa tag. Sebagai contoh, berikut ini kita akan membuat manipulasi baru. Manipulasi ini selain membuat tampilan menjadi miring, juga membuat huruf ditampilkan dengan lebih besar. Karena ia kita pasangi tag heading 1. Yang kita ketikkan adalah sebagai berikut :
< HTML >
< HEAD >
< TITLE >
Percobaan File HTML
< /TITLE >
< BODY >
< H1 > < I >Ini adalah percobaan file html. Sukses !< /I >< /H1 >
< /BODY >
< /HEAD >
< /HTML >
Gambar 2.15. : mengetikkan data manipulasi format gabungan Yaitu heading dan miring
Setelah mengetikkan data, simpanlah file tersebut. Hasilnya jika file tersebut kita aktifkan, maka akan terlihat seperti berikut ini.
Gambar 2.16. : teks menjadi besar.
Sampai sejauh ini cukuplah perkenalan singkat kita dengan file HTML. (namanya juga mengintip…tentu hanya sebagian kecil saja yang kelihatan, iya kan?..?) Jika Sampeyan memang tertarik untuk lebih jauh tenggelam dalam HTML, saya persilahkan untuk membaca buku panduan lain yang membahas khusus masalah file html. Oke?
Download bab ini dalam versi Ebook PDF
Download Program CSPE HTML
Tidak ada komentar:
Posting Komentar