TUTORIAL DESAIN MULTIMEDIA Arif Handokowww.desainmultimedia.comA. Sejarah InternetInternet pertama kali bermula dari ARPANET (Advanced Research Project Agency Net)pada tahun 1969 yang dikembangkan oleh para peneliti dari Departemen PertahananAmerika (US Department of Defense's) dengan tujuan mengembangkan jaringankomunikasi data antar komputer yang bekerja secara transparan dan tahan terhadapberbagai gangguan (bencana alam, serangan nuklir dari Rusia dan lain-lain).Pada dekade pertama Internet digunakan terutama untuk fasilitas email, dukungan onlinediscussion groups, akses database secara remote dan dukungan transfer file antara agensi,perusahaan/universitas.Pada permulaan tahun 1980, protokol semua jaringan riset yang berhubungan diubahmenjadi protokol TCP/IP (untuk mengirim dan menerima data), dan ARPANET menjaditulang punggung (backbone) Internet yang terdiri dari jaringan-jaringan berbasis TCP/IPyang terhubung ke ARPANET. Konversi data ke TCP/IP tersebut dianggap lengkap padasekitar akhir tahun 1983 dan pada saat itulah dianggap Internet lahir.Pada tahun 1990, HTML yang merupakan suatu hypertext Internet protokol yang dapatmenyajikan informasi grafik di Internet mulai diperkenalkan. Tiap individu dapatmenciptakan halaman berbasis grafik (web site) dimana dalam hal ini individu tersebutharus memahami dulu HTML, yang mana kemudian dapat dihubungkan menjadi suatujaringan hypertext yang lebih besar yang biasa disebut World Wide Web.Saat ini kebanyakan orang menyebut "Internet" sebagai suatu struktur fisik jaringan,terdiri dari komputer client dan server dan line telepon yang menghubungkan segalasesuatunya. Istilah "Web" yang tidak banyak diketahui secara benar, diartikan sebagaikumpulan dari site-site dan informasi yang dapat diakses jika seseorang menggunakanInternet.Beberapa macam servis telah dikembangkan selama bertahun-tahun untuk dipakaisebagai fasilitas berbagi informasi antara bermacam-macam situs yang ada di Internet.Karena Internet lebih berorientasi research, kebanyakan servis-servis tersebut lebih susahdigunakan dan memiliki dokumentasi yang tidak begitu bagus. Namun sekarang Internetsudah terbuka secara umum baik untuk situs-situs komersial maupun situs pribadi,banyak servis-servis baru mulai dikembangkan agar lebih mudah digunakan daninterface-interface baru mulai diciptakan agar servis-servis yang lama lebih mudahdigunakan.1Konsep Dasar TCP/IPTCP/IP (Transmission Control Protocol/Internet Protocol) merupakan dasar darisegalanya, tanpa mempelajari TCP/PI kemungkinan kita tidak dapat melakah maju didunia pehackingan. Dengan kata lain, TCP/IP merupakan awal dari segalanya. Banyakorang yg menyepelekan pentingnya mempelajari TCP/IP, mereka mengaku dirinya"hacker" tetapi tidak mengerti sama sekali apa itu TCP/IP. Merasa hacker hanya apabilabisa mencrash ataupun menjebol server, tetapi sebetulnya bukan itulah maksud darisegala itu. Hacker itu adalah orang yg haus akan pengetahuan, bukan haus akanpenghancuran. Untuk menjadi hacker dibutuhkan kerja keras, semangat, motivasi ygtinggi serta pemahaman seluk-beluk internet itu sendiri, tanpa hal-hal tersebut mustahilanda dapat menjadi seorang hacker yang tangguh.Apa itu TCP/IP ?TCP/IP adalah salah satu jenis protokol yg memungkinkan kumpulan komputer untukberkomunikasi dan bertukar data didalam suatu network (jaringan).Merupakan himpunan aturan yg memungkinkan komputer untuk berhubungan antarasatu dengan yg lain, biasanya berupa bentuk / waktu / barisan / pemeriksaan error saattransmisi data.Apa yg membuat TCP/IP menjadi penting ?Karena TCP/IP merupakan protokol yg telah diterapkan pada hampir semua perangkatkeras dan sistem operasi. Tidak ada rangkaian protokol lain yg tersedia pada semuasistem berikut ini :a.b.c.d.e.f.Novel Netware.Mainframe IBM.Sistem digital VMS.Server Microsoft Windows NTWorkstation UNIX, LinuX, FreeBSDPersonal komputer DOS.Awalnya Keberadaan TCP/IPKonsep TCP/IP berawal dari kebutuhan DoD (Departement of Defense) AS akan suatukomunikasi di antara berbagai variasi komputer yg telah ada. Komputer-komputer DoDini seringkali harus berhubungan antara satu organisasi peneliti dg organisasi peneliti2lainnya, dan harus tetap berhubungan sehingga pertahanan negara tetap berjalan selamaterjadi bencana, seperti ledakan nuklir. Oleh karenanya pada tahun 1969 dimulailahpenelitian terhadap serangkaian protokol TCP/IP. Di antara tujuan-tujuan penelitian iniadalah sebagai berikut :1.2.3.4.Terciptanya protokol-protokol umum, DoD memerlukan suatu protokol yg dapatditentukan untuk semua jaringan.Meningkatkan efisiensi komunikasi data.Dapat dipadukan dengan teknologi WAN (Wide Area Network) yg telah ada.Mudah dikonfigurasikan.Tahun 1968 DoD ARPAnet (Advanced Reseach Project Agency) memulai penelitian ygkemudian menjadi cikal bakal packet switching. Packet switchinginilah ygmemungkinkan komunikasi antara lapisan network (dibahas nanti) dimana datadijalankan dan disalurkan melalui jaringan dalam bentuk unit-unit kecil yg disebutpacket. Tiap-tiap packet ini membawa informasi alamatnya masing-masing yg ditanganidengan khusus oleh jaringan tersebut dan tidak tergantung dengan paket-paket lain.Jaringan yg dikembangkan ini, yg menggunakan ARPAnet sebagai tulang punggungnya,menjadi terkenal sebagai internet.Protokol-protokol TCP/IP dikembangkan lebih lanjut pada awal 1980 dan menjadiprotokol-protokol standar untuk ARPAnet pada tahun 1983. Protokol-protokol inimengalami peningkatan popularitas di komunitas pemakai ketika TCP/IP digabungkanmenjadi versi 4.2 dari BSD (Berkeley Standard Distribution) UNIX. Versi ini digunakansecara luas pada institusi penelitian dan pendidikan dan digunakan sebagai dasar daribeberapa penerapan UNIX komersial, termasuk SunOS dari Sun dan Ultrix dari Digital.Karena BSD UNIX mendirikan hubungan antara TCP/IP dan sistem operasi UNIX,banyak implementasi UNIX sekarang menggabungkan TCP/IP.Unit informasi yg mana jaringan berkomunikasi. Tiap-tiap paket berisi identitas (header)station pengirim dan penerima, informasi error-control, permintaan suatu layanan dalamlapisan network, informasi bagaimana menangani permintaan dan sembarang datapenting yg harus ditransfer.Bagaimana TCP dan IP BekerjaSeperti yg telah dikemukakan diatas TCP/IP hanyalah merupakan suatu lapisanprotokol(penghubung) antara satu komputer dg yg lainnya dalam network, meskipun kedua komputer tersebut memiliki OS yg berbeda. Untuk mengerti lebih jauh marilah kitatinjau pengiriman sebuah email. Dalam pengiriman email ada beberapa prinsip dasar ygharus dilakukan. Pertama, mencakup hal-hal umum berupa siapa yg mengirim email,3siapa yg menerima email tersebut serta isi dari email tersebut. Kedua, bagaimana caraagar email tersebut sampai pada tujuannya.Dari konsep ini kita dapat mengetahui bahwapengirim email memerlukan "perantara" yg memungkinkan emailnya sampai ke tujuan(seperti layaknya pak pos). Dan ini adalah tugas dari TCP/IP. Antara TCP dan IP adapembagian tugas masing-masing.TCP merupakan connection-oriented, yg berarti bahwa kedua komputer yg ikut sertadalam pertukaran data harus melakukan hubungan terlebih dulu sebelum pertukaran data( dalam hal ini email) berlangsung. Selain itu TCP juga bertanggung jawab untukmenyakinkan bahwa email tersebut sampai ke tujuan, memeriksa kesalahan danmengirimkan error ke lapisan atas hanya bila TCP tidak berhasil melakukan hubungan(hal inilah yg membuat TCP sukar untuk dikelabuhi). Jika isi email tersebut terlalu besaruntuk satu datagram, TCP akan membaginya kedalam beberapa datagram.IP bertanggung jawab setelah hubungan berlangsung, tugasnya adalah untuk meroutedata packet . didalam network. IP hanya bertugas sebagai kurir dari TCP dalampenyampaian datagram dan "tidak bertanggung jawab" jika data tersebut tidak sampaidengan utuh (hal ini disebabkan IP tidak memiliki informasi mengenai isi data ygdikirimkan) maka IP akan mengirimkan pesan kesalahan ICMP. Jika hal ini terjadi makaIP hanya akan memberikan pesan kesalahan (error message) kembali ke sumber data.Karena IP "hanya" mengirimkan data "tanpa" mengetahui mana data yg akan disusunberikutnya menyebabkan IP mudah untuk dimodifikasi daerah "sumber dan tujuan"datagram. Hal inilah penyebab banyak paket hilang sebelum sampai kembali ke sumberawalnya. (jelas ! sumber dan tujuannya sudah dimodifikasi)Kalimat Datagram dan paket sering dipertukarkan penggunaanya. Secara teknis,datagram adalah kalimat yg digunakan jika kita hendak menggambarkan TCP/IP.Datagram adalah unit dari data, yg tercakup dalam protokol.ICPM adalah kependekan dari Internet Control Message Protocol yg bertugasmemberikan pesan dalam IP. Berikut adalah beberapa pesan potensial sering timbul(lengkapnya lihat RFC 792):a. Destination unreachable, terjadi jika host, jaringan, port atau protokol tertentu tidak dapat dijangkau.b. Time exceded, dimana datagram tidak bisa dikirim karena time to live habis.c. Parameter problem, terjadi kesalahan parameter dan letak oktert dimana kesalahan terdeteksi.d. Source quench, terjadi karena router/host tujuan membuang datagram karena batasan ruang buffer atau karena datagram tidak dapat diproses.4e. Redirect, pesan ini memberi saran kepada host asal datagram mengenai router yang lebih tepat untuk menerima datagram tsb.f. Echo request dan echo reply message, pesan ini saling mempertukarkan data antara host.Selain RFC 792 ada juga RFC 1256 yg isinya berupa ICMP router discovery messagedan merupakan perluasan dari ICMP, terutama membahas mengenai kemampuan bagihost untuk menempatkan rute ke gateway.Layanan Yang Diberikan Oleh TCP/IPBerikut ini adalah layanan "tradisional" yg dilakukan TCP/IP :a. Pengiriman file (file transfer). File Transfer Protokol (FTP) memungkinkan pengguna komputer yg satu untuk dapat mengirim ataupun menerima file ke komputer jaringan. Karena masalah keamanan data, maka FTP seringkali memerlukan nama pengguna (user name) dan password, meskipun banyak juga FTP yg dapat diakses melalui anonymous, alias tidak berpassword. (lihat RFC 959 untuk spesifikasi FTP)b. Remote login. Network terminal Protokol (telnet) memungkinkan pengguna komputer dapat melakukan log in ke dalam suatu komputer didalam suatu jaringan. Jadi hal ini berarti bahwa pengguna menggunakan komputernya sebagai perpanjangan tangan dari komputer jaringan tersebut.( lihat RFC 854 dan 855 untuk spesifikasi telnet lebih lanjut)c. Computer mail. Digunakan untuk menerapkan sistem elektronik mail. (lihat RFC 821 dan 822)d. Network File System (NFS). Pelayanan akses file-file jarak jauh yg memungkinkan klien-klien untuk mengakses file-file pada komputer jaringan jarak jauh walaupun file tersebut disimpan secara lokal. (lihat RFC 1001 dan 1002 untuk keterangan lebih lanjut)e. Remote Execution. Memungkinkan pengguna komputer untuk menjalankan suatu program didalam komputer yg berbeda. Biasanya berguna jika pengguna menggunakan komputer yg terbatas, sedangkan ia memerlukan sumber yg banyak dalam suatu system komputer. Ada beberapa jenis remote execution, ada yg berupa perintah-perintah dasar saja, yaitu yg dapat dijalankan dalam system komputer yg sama dan ada pula yg menggunakan "prosedure remote call system", yg memungkinkan program untuk memanggil subroutine yg akan dijalankan di system komputer yg berbeda. (sebagai contoh dalam Berkeley UNIX ada perintah "rsh" dan "rexec")5f. Name Servers. Nama database alamat yg digunakan pada internet (lihat RFC 822 dan 823 yg menjelaskan mengenai penggunaan protokol name server yg bertujuan untuk menentukan nama host di internet.)RFC (Request For Comments) adalah merupakan standar yg digunakan dalam internet,meskipun ada juga isinya yg merupakan bahan diskusi ataupun omong kosong belaka.Diterbitkan oleh IAB (Internet Activities Board) yg merupakan komite independen parapeneliti dan profesional yg mengerti teknis, kondisi dan evolusi sistem internet. Sebuahsurat yg mengikuti nomor RFC menunjukan status RFC :S : standard, standar resmi bagi internetDS : Draft standard, protokol tahap akhir sebelum disetujui sebagai standarPS : Proposed Standard, protokol pertimbangan untuk standar masa depanI: Informational, berisikan bahan-bahan diskusi yg sifatnya informasiE : Experimental, protokol dalam tahap percobaan tetapi bukan pada jalur standar.H : Historic, protokol-protokol yg telah digantikan atau tidak lagi dipertimbankan untukstandarisasi.Information Retrieval Services (FTP and Gopher)FTP (File Transfer Protocol) adalah internet servis yang pertama kali dikembangkan yangberguna untuk memindahkan file dari satu tempat ke tempat lain. Servis tersebutmengijinkan anda untuk menghubungkan satu komputer dengan komputer yang lain yangada di Internet (dengan menggunakan program FTP yang ada di komputer lokal), melihatfile yang ada di komputer remote dan mengambil file tersebut.FTP mengijinkan anda untuk mengambil file atau mengirim file (asalkan anda diijinkanuntuk dapat menulis ke host komputer) dengan format apa saja misalnya: text, gambar,sound dan format lainnya. Agar supaya dapat terhubung ke komputer yang lain denganmenggunakan program FTP, komputer remote di sisi yang lain harus mempunyaiprogram server FTP yang dijalankan. Ketika anda terhubung ke komputer remotemenggunakan FTP, anda harus mempunyai account untuk log in ke komputer remotebersangkutan.Beberapa komputer host mengijinkan anda mengambil file tanpa harus mempunyaiaccount untuk log in tetapi anda harus log in sebagai user anonymous (biasanya andadiminta untuk memasukkan alamat e-mail anda sebagai password untuk log in ke FTPsite menggunakan user anonymous.6Kebanyakan FTP site tidak mempunyai daftar untuk semua file yang ada. Kadangkalasatu-satunya jalan untuk melihat daftar isi file yang ada, adalah dengan meng click folderyang ada untuk melihat isi direktorinya. Bila anda mempunyai pertanyaan mengenai FTPserver, atau mengenai isi dari file-file yang ada disana, anda dapat mengirim e-mail ke"postmaster" dari mesin FTP. Sebagai contoh, jika anda terhubung ke mesinrs.internic.net, anda harus mengirim e-mail ke alamat postmaster@rs.internic.netGopher adalah servis lain yang ada di Internet. Situs di internet yang mendistribusikaninformasi melalui sistim Gopher, mensetup dan menjalankan server Gopher agar supayaclient Gopher dapat menampilkan dan mengambil file dari direktori yang ada. Gophermenyediakan interface dengan menu-base untuk melihat resource yang ada sehingga andatidak perlu susah-susah mengetikkan perintah untuk berpindah dari satu direktori kedirektori yang lain.Gopher sebenarnya mirip dengan FTP, hanya saja Gopher dapat menghubungkan anda keInternet servis lain dengan menampilkan direktori dan file yang akan diambil.Kemudahan ini yang membuat Gopher lebih mudah digunakan dibandingkan denganFTP.Multimedia Information Services (World Wide Web)The World Wide Web (WWW) adalah sebuah client-server based Internet servis yangpaling baru. Pada akhir tahub 1980, CERN (European Lab for Particle Physics) memulaieksperimen sebuah servis Internet yang memungkinkan setiap orang dapat mengaksesdan menampilkan dengan mudah dokumen-dokumen yang disimpan di suatu serverdimanapun di dunia ini yang terhubung dengan internet.Untuk melaksanakan hal tersebut, mereka mengembangkan suatu format standar bagisebuah dokumen agar dapat ditampilkan dengan mudah di semua macam peralatandisplay dan dapat dilanjutkan (link) ke dokumen lain yang ada dalam dokumen tersebut.Meskipun WWW dikembangkan oleh peneliti-peneliti CERN, setelah servis tersebutdikenal publik, servis tersebut segera menjadi populer. Beberapa aplikasi client yangberbeda-beda dikembangkan untuk dapat mendukung dokumen WWW.Bahkan ada juga yang berbasis grafik seperti Netscape juga mendukung untuk dapatmembaca dokumen WWW.Hampir semua client WWW juga dapat menggunakan interface yang sama untuk dapatmeng-akses internet servis yang lain seperti FTP dan Gopher. Dokumen WWW bukan7merupakan ASCII teks dokumen. Tetapi merupakan ASCII dokumen yang terdiri dariperintah-perintah menggunakan bahasa HTML (HyperText Markup Language).Perintah-perintah HTML memungkinkan anda untuk menampilkan teks dalam bentukparagraf, huruf besar, italic, tebal bahkan dapat juga menampilkan gambar dalamdokumen tersebut untuk dapat ditampilkan di client WWW secara grafikal. Salah satufitur utama dari HTML adalah kemampuannya untuk menyertakan hypertext links kedalam dokumen.Hypertext link memungkinkan anda menampilkan dokumen lain hanya dengan meng-kliksuatu area di layar dimana dokumen yang ditunjuk dapat ditampilkan di layar. Dokumenyang ditunjuk tersebut dapat berasal dari kompuer mana saja di seluruh dunia yangterhubung di internet.Kebanyakan cliennt WWW mengijinkan anda untuk mengakses internet servis yang lainseperti FTP dan Gopher. Sebagai tambahan, beberapa client WWW ada yang dapatmenampilkan file-file multimedia (seperti movie dan sound) menggunakan programmultimedia player yang telah anda install di komputer anda.8B. Tutorial HTMLTag-tag Dasar halaman HTMLKetiklah contoh berikut dengan menggunakan notepad. Setelah itu simpan file sebagaiHTMLku.html, kemudian buka dengan menggunakan Internet Browser yang anda miliki,misalnya Intenet Explorer maupun Netscape Navigator, maka suatu halaman websederhana akan muncul dihadapan anda.

Halaman HTMLku yang pertama

Hello World

Jadi pada dasarnya suatu halaman web dibentuk oleh tag-tag HTML. Pada contoh diatas,halaman web tersebut dibentuk dengan tag-tag dasar.Berikut akan dijelaskan fungsi masing-masing tag dasar tersebut. tag dan digunakan untuk menandai awal dan akhir dari suatu fileHTML. Tulisan yang berada diantara tag dan akan ditampilkan oleh browserpada bagian title yang mana merupakan title dari jendela browser. Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara HEAD tags. Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag ini memilikisejumlah attribut dapat ditentukan :

9Attribut BACKGROUND mengisi latarbelakang halaman dengan image back.gif sampaipenuh. Anda dapat juga mengatur warna tulisan (text), link yang pernah (vlink) ataubelum pernah dikunjungi (link), link yang aktif (alink), seperti yang terlihat pada baris-baris berikut:

http://www.biola.edu/cgi-bin/colorpro/Himpunan warna dari text, link, active link, dan visited link dengan rr adalah kadarmerah, gg adalah kadar hijau, dan bb adalah kadar biru. Angka ditentukan secarahexadesimal dengan range 00 - FF. Banyak utility menghasilkann angka ini secaraotomatis dari suatu dialog box warna, atau slider untuk merah, hijau dan biru. Sumberonline yang bagus adalah situs ColorServer Pro pada http://www.biola.edu/cgi-bin/colorpro/.

(Isi dokumen HTML)

Contoh:

Halaman HTMLku yang pertama

Hello World

Hasil:10CatatanMicrosoft Internet Explorer 3.0 mendukung nama warnadisamping atribut warna diatas. Sebagai contoh menyebabkan warna tulisan dokumenmenjadi teal.Format Tulisan pada halaman HTMLUntuk membuat halaman web yang rapi dan menarik, tentu saja anda perlu melakukanpemformatan tulisan-tulisan, baik tata cara pencetakannya, serta jenis tulisan yangdipergunakan.Ketiklah contoh berikut dengan menggunakan Notepad dan simpan dengan namaFormatKu.html, kemudian buka file tersebut dengan internet browser anda danperhatikan hasilnya :

Halaman HTMLku dengan format tulisan

Hello WorldCetak Tebal
Cetak miring
Cetak garis bawah

Pada contoh diatas hanya menggunakan sebagaian kecil dari tag-tag pemformatan tulisan,dan HTML mengandung tag pemformatan dan Tabel A.1 adalah daftar dari tag yangdipergunakan untuk memformat tulisan pada suatu halaman web.Table A.1. Tag-tag untuk memformat tulisan. KeteranganMembuat cetak tebal pada tulisan yangberada diantaranya.Menyebabkan tulisan beradadiantaranya berkedip-kedip.Digunakan untuk menandai kutipandari suatu buku atau artikel majalah.Browser khususnya menampilkankutipan dengan cetak miring.Menandai suatu daftar source codeTag 11program. Biasanya ditampilkan olehbrowser dalam suatu monospaced fontyang lebih kecil. Style untuk definisi dari suatu istilah.Browser menampilkan definisi dengancetak miring.Text yang berada diantara tags inidicetak lebih lebar. Browser umumnyamenampilkan cetak lebih lebar dengancetak miring.Menentukan ukuran font (#) yangdigunakan untuk menampilkan HTML dalam tags.Default is 3; ukurannya dari 1 sampai7. tagyangmenentukantingkatheading-dengannilaiantara1 dan 6, dengan sebagai ukuran palingbesar dan 6 paling kecil Text diantaranya ditampilkan dengancetak miring.Keyboard tag digunakan untukmewakili tombol keyboard seperti Delatau Enter. Umumnya ditampilkan olehbrowser dengan suatu monospaced fontyang lebih kecil.Preformatted text adalah menampilkan tulisan tanpa12format yang khusus. Tag ini bagusdigunakan bila ana ingin menanganispasi antar baris; dan juga memudahkananda untuk meletakan tab dalamdokumen anda.. (hanya pada Microsoft InternetExplorer 2.0/3.0 .) Tag inimenyebabkan tulisan yang beradadiantaranya bergerak dari kanan ke kiri.Menentukan bahwa tulisan dalammarquee harus dirapikan di TOP,MIDDLE atau BOTTOM dari marqueetersebut.Setting yang berlaku untuk atribut iniadalah SCROLL, SLIDE, dan ALTERNATE.Defaultnya, menggulung teks dari sisiyang satu ke yang lain pada layarsecara berulang.Gulung text melintasi layar, dan ketikamencapai margin akan berhenti.Memantulkan tulisan dari margin kananke margin kiri dan sebaliknya.Yang ini menentukan warna latarbelakang dari marquee.Menentukan arah ke LEFT atau RIGHTMenentukan tinggi marquee dalampixel (HEIGHT = n) atau presentasidari layar (HEIGHT = n%).Sama dengan atribut HEIGHT, tetapidiaplikasikan untuk lebar marquee.Menentukan margin kiri dan kananuntuk bagian luar marquee dalam pixel.Menentukan jumlah kali marquee harusberputar. Jika diabaikan, set ke -1 atauINFINITE, dan marquee bergulungsampai user meninggalkan halamantersebut.Menentukan jumlah pixel gerakanantara geseran dari tulisan marquee.Menentukan millisecond antarapergerakan dari tulisan marquee.ALIGNBEHAVIORSCROLLSLIDEALTERNATEBGCOLORDIRECTIONHEIGHTWIDTHHSPACELOOPSCROLLAMOUNTSCROLLDELAY13VSPACEMenentukan margin top dan bottomuntuk bagian luar dari marquee dalampixel.Menampilkan sejumlah karakter literal.Banyak browser menampilkan denganmonospaced font.Tulisan diantaranya di coret (Example).Cara lain menggambarkan attentionpada suatu bagian dari text; biasanya ditampilkan dengan cetaktebal oleh browser.Menampilkan bentuk typewriterstyle (monospaced) font. Tulisan diantaranya ditampilkandengan garis bawah.Contoh :HeadingHeadingHeadingHeadingHeadingHeading123456Hasil :Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6Contoh :t14eHasil:fontsizeContoh:Cetak Tebal
Cetak miring
Cetak garis bawahHasil:Cetak TebalCetak miringCetak garis bawahContoh:default fontArialArial BlackArial NarrowBook AntiquaBookman OldStyleHasil:default fontArialArial BlackArial NarrowBook AntiquaBookman Old StyleContoh:15default fontArialArialBlackHasil:default fontArialArial BlackBagaimana menggunakan Karakter khususSetelah anda perhatikan tata cara penulisan HTML, yang semuanya diapit oleh kurungsegitiga kiri dan kanan (simbol lebih besar dan lebih kecil). Bagaimana kalau andamembutuhkannya dalam tulisan anda ?Itu adalah pertanyaan yang bagus, dan masalah tersebut tidak hanya pada kedua simboltersebut. Ada sejumlah karakter yang tidak dapat diketik langsung pada bagian bodyHTML, termasuk symbol untuk bahasa asing. Lihat tabel berikut untuk tata carapengetikkan untuk menampilkan karakter khusus pada halaman html anda.Karakter yang sering digunakanEntitas Keterangan copyright symbolregistered trademarksymbolContoh

&" trademark symbol nonbreaking spaceless-than symbolgreater-than symbol& ampersand" quotation markContoh :2 < 3, adalah benar
3 > 4, adalah salahHasil:162 < 3, adalah benar3 > 4, adalah salahMengatur Pemerataan tulisanPemerataan tulisan sangat mempengaruhi tampilan dari halaman web anda, ada kalanyatulisan tertentu perlu ditampilkan pada tengah halaman, atau pun justified.Ketiklah contoh berikut dengan menggunakan Notepad dan simpan dengan namaRataKu.html, kemudian buka file tersebut dengan internet browser anda dan perhatikanhasilnya :

Tebal, Miring dan Garis Bawah

Hello WorldCetak TebalCetak miringCetak garis bawah

Tag-tag HTML yang mengatur pemerataan tulisan pada satu halaman. Tag ini akan menampilkan tulisan/gambar ditengah baris. Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan pemerataanteks ke kiri, tengah, atau kanan dari tampilan browser untuk paragraf bersangkutan. Suatuparagraf dapat terdiri dari teks, gambar, hyperlink, dan element HTML lainnya. Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang diberi tingkatheadingContoh :Tulisan ini berada ditengah barisTulisan ini rapat kiriYang ini juga ditengah barisYang ini rapat kanan17Hasil:Tulisan ini berada ditengah barisTulisan ini rapat kiriYang ini juga ditengah barisYang ini rapat kananContoh:Tulisan ini rapat kiriYang ini juga ditengah barisYang ini rapat kananHasil :Tulisan ini rapat kiriYang ini juga ditengah barisYang ini rapat kananBagaimana melakukan line breakUntuk menyisip suatu line break pada titik tertentu, ketikkan
. Hal ini akanmemberitahukan Web browser untuk mengakhiri baris bersangkutan dan memulai tulisanpada baris berikutnya. Suatu line break tidak akan memulai suatu paragraf baru.Contoh :Yang ini berada pada baris pertama
Yangini pada baris keduaHasil :Yang ini berada pada baris pertama Yang ini pada baris keduaBagaimana membuat garis pemisah18Untuk menyisip suatu garis pemisah pada dokumen dapat digunakan . memiliki atribut NOSHADE, SIZE dan WIDTH.Contoh :

Tulisan diatas garisTulisan dibawah garis

Hasil:Tulisan diatas garisTulisan dibawah garisContoh:

Hasil:Membuat Unordered ListAgar dokumen kita mudah dibaca dan jelas, ada bagian tertentu yang perlu ditampilkandalam List, untuk jelasnya ketiklah contoh berikut dan simpan ke file ListKu.html, danbuka dengan menggunakan internet Browser.

Daftar Belanja Hari Ini

1. Daftar Belanja :
2. Beras
3. Sayur
4. Daging

19List yang paling sederhana di HTML adalah unordered, atau bulleted list. Hal ini sesuaiuntuk daftar item yang tidak memiliki hirarki atau urutan yang penting.

digunakan untuk mengawali dan mengakhiri suatu Unordered List. digunakan untuk membuat suatu heading untuk list tersebut. digunakan untuk membuat masing-masing item list tersebut.Contoh :

Daftar Belanja :

Beras

Sayur

Daging

Hasil:Daftar Belanja :BerasSayurDagingMembuat Ordered ListUntuk membuat suatu ordered list, ganti saja tag

dan

dengan

1. dan

Contoh :

1. Daftar Belanja :
2. Beras
3. Sayur
4. Daging

Hasil:20Daftar Belanja :1. Beras2. Sayur3. DagingContoh :

1. Daftar Belanja :
2. Beras
3. Sayur
   1. Bayam
   2. Kangkung
4. Daging

Hasil:Daftar Belanja :1. Beras2. Sayur 1. Bayam 2. Kangkung3. DagingMenyisip gambar dalam halaman WebAda hal-hal tertentu yang sulit dijelaskan dengan kata-kata, sehingga denganmenggunakan gambar, maka ilustrasi anda menjadi jelas dan menarik.Simpanlah gambar berikut ini ke harddisk dengan nama Internet.gif anda dengan klikkanan dan pilih Save AsDan Ketiklah contoh berikut dan simpam dengan nama GambarKu.html difolder dimanainternet.gif berada.

Dengan gambar kita menjadi dekat

21

Tanpa gambar-gambar, maka halaman web anda menjadi terlalu sederhana dan kurangmenarik bagi pengunjung, dengan memasukkan gambar-gambar yang berkaitan, makahalaman web anda menjadi lebih hidup. Tetapi sesuatu hal yang perlu anda ingat bahwapemakaian gambar yang terlalu besar akan membuat loading halaman anda menjadilambat, terutama bagi pengunjung yang menggunakan bandwidth yang kecil.Untuk menyisip suatu gambar dalam halaman Web adalah dengan menggunakan tag. Tag tersebut memiliki element sebagai berikut:SRC=URL suatu URL yang menunjuk pada sumber file gambar.ALIGN merapikan elemen yang menentukan bagaimana gambar akandirapikan secara relatif terhadap tulisan yang berdekatan dengan gambar.Banyak nilai yang mungkin dan tidak akan dibahas disini.ALT=text Menentukan tulisan yang akan ditampilkan (biasanyaditempatkan diantara tanda petik) jika browser tidak dapat menampilkangambar untuk alasan tertentu.HEIGHT=h WIDTH=w Menentukan height dan width dari image yangmemungkinkan Web browser menentukan ukuran tempat yang tepatsebelum gambar benar-benar selesai diterima. Hal ini tentu saja akanmembantu Web browser dalam melakukan render terhadap seluruh isihalaman sebelum gambar selesai diterima.Contoh :

HasilContoh :

HasilContoh :22

HasilLink ke dokumen atau situs yang lainDokumen HTML adalah dokumen-dokumen hypertext. Hal ini berarti bahwa merekadapat mengandung link ke dokumen lain. Ketiklah contoh berikut ke file LinkKu.html

Link ke Transnet

Kunjungi TransnetAtau yang ini pakai gambar

Tag ( ) digunakan untuk membentuk suatu link ke dokumen atau sumber yangakan dimuat ketika user melakukan klik pada link tersebut. Tulisan dan HTML lainnyayang ada diantara link ditampilkan kepada user sebagai suatu hotlink, biasanya denganwarna yang berbeda warna tulisan browser normal atau diberi garis bawah. Bagianberikut menerangkan tag tersebut.HREFHREF = "URL" menentukan URL dari resource yang akan ditampilkan setelah usermelakukan klik padanya. Sebagai contoh, membentuk link ke Situs webTransnet.Contoh :Kunjungi TransnetHasil :Kunjungi Transnet23Contoh :

Hasil :Contoh :

Hasil :NAMEAtribut NAME menentukan lokasi dalam HTML tersebut yang dapat di link dari halamanlain. Hal ini memungkinkan dokumen lain mengacu ke lokasi tertentu dalam suatuhalaman. Nama acuan dari halaman tersebut. Untuk mengacu pada suatu nama acuan,URL halaman ditentukan, diikuti dengan suatu #. Sebagai contoh, mendefinisikan nama link Copyright dalam dokumen tersebut.Contoh :Klik disini akan membawa anda ke CopyrightTITLEAtribut ini, walaupun tidak diperlukan, memungkinkan perancang halaman memasukkantitle dari halaman tersebut.URNMenentukan suatu URN (Universal Resource Name) untuk dokumen target.Table dan pengaturannyaTabel mulai diimplementasikan pada Internet Explorer 2.0 dan 3.0, demikian juga padaNetscape 1.1 keatas. Tabel adalah cara yang baik untuk menampilkan informasi secaralogik yang biasanya ditampilkan dalam bentuk spreadsheet. Tabel juga digunakan untukmenampilkan record-record pada database. Ketiklah contoh berikut dan simpan ke fileTabelKu.html.24

Halaman HTMLku yang pertama

Ini adalah header tabel Sel 1,1 Sel 1,2 Sel 2,1 Sel 2,2

Berikut ini adalah atribut dari TABLE tag dan efeknya pada tabel.Contoh :

Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah tabel 1 baris, 1 kolomBORDER25Atribut BORDER menentukan tebal dari border sewaktu ditampilkan oleh browser. Cobalahdengan browser anda untuk mendapatkan setting yang optimal.Coba bandingkan hasil dibawah ini (pakai border) dengan hasil yang sebelumnya (tidakpakai border).Contoh :

Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah tabel 1 baris, 1 kolom dengan tebal border=1CELLSPACINGAtribut CELLSPACING mementukan jumlah spasi yang browser tempatkan diantara tiap-tiap sel individual atau spasi antar sel dan border (jika sel berada di sisi dari tabel). Sekalilagi, hanya dengan percobaan yang akan menghasilkan nilai yang sesuai.Contoh :

Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah tabel 1 baris, 1 kolom dengan tebal border=1CELLPADDINGAtribut CELLPADDING menentukan jumlah spasi yang browser tempatkan antara datadalam cell dan border sel.. Dalam tag tabel, ada tiga tag yang mendefinisikan header,26row, dan cels. Tag-tag tersebut adalah table header , table row , dan table data.Contoh :

Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah tabel 1 baris, 1 kolom dengan tebal border=1Berikut ini adalah atribut dari elemen :WIDTHAtribut WIDTH dapat diset dengan angka (ukuran dalam pixel), atau sebagai suatupersentase lebar tampilan browser. Browser dapat menarik tabel, tetapi tidak dapatmengkompres jika ukuran jendela browser lebih kecil dari tabel.Contoh :

Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah tabel 1 baris, 1 kolom dengan tebal border=1ALIGNDengan ALIGN, anda dapat menentukan pemerataan tabel di left, center, atau right darihalaman.Contoh :27

Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah tabel 1 baris, 1 kolom dengan tebalborder=1BGCOLORSebagaimana pada tag , anda dapat menentukan warna latar belakang dari tabeldengan menggunakan attribut BGCOLOR, anda dapat menggunakan definisi warna #rrggbbatau nama warna pada Internet Explorer, (sebagai contoh, ).Contoh :

Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah tabel 1 baris, 1 kolom dengan tebalborder=1BORDERCOLOR (Hanya pada Microsoft Internet Explorer 2.0/3.0)Hal ini menyerupai attribut BGCOLOR tetapi diaplikasikan pada eksternal dan internalborder.Contoh :

28 Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah tabel 1 baris, 1 kolom dengan tebalborder=1BORDERCOLORLIGHT (hanya pada Microsoft Internet Explorer 2.0/3.0)Setting ini adalah optional dan menentukan warna sisi terang dari garis kiri atas tabel.BORDERCOLORDARK (hanya pada Microsoft Internet Explorer 2.0/3.0)Setting ini adalah berlawanan dengan BorderColorLightContoh :

Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah tabel 1 baris, 1 kolom dengan tebalborder=1 Elemen table row menandai awal dari tiap baris pada tabel. Atribut yang sah dari tabelrow adalah ALIGN, VALIGN, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.Contoh :

29 Ini adalah contoh header tabel Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah contoh header tabelIni adalah tabel 1 baris, 1 kolom dengan tebalborder=1 Elemen table header berfungsi sama seperti elemen table data , tetapi elemen tableheader ditampilkan dalam suatu font cetak tebal. Artibut yang sah untuk elemen tableheader adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK, danBGCOLORLIGHT.Contoh :

Ini adalah contoh header tabel Ini adalah tabel 1 baris, 1 kolom

Hasil :Ini adalah contoh header tabelIni adalah tabel 1 baris, 1 kolom dengan tebalborder=130 Elemen table data menandai awal dan akhir dari tiap sel didalam tabel. Atribut yang sahuntuk elemen table data adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR,BGCOLORDARK, dan BGCOLORLIGHT. Elemen-elemen ini akan diterangkan pada bagianberikutnya.Contoh :

Ini adalah header tabel Sel 1,1 Sel 1,2 Sel 2,1 Sel 2,2

Hasil:Ini adalah header tabelSel 1,1Sel 2,1COLSPANSel 1,2Sel 2,2Atribut ini menentukan jumlah kolom yang akan ditarik oleh sel; sebagai contoh, jikaCOLSPAN di set ke 2, yang mana sel dengan span dua kolom normal dalam tabel. Bedakanhasil contoh berikut dengan contoh sebelumnya.Contoh :

31 Ini adalah header tabel Sel 1,1 Sel 1,2 Sel 2,1 Sel 2,2

Hasil:Ini adalah header tabelSel 1,1Sel 2,1ROWSPANSel 1,2Sel 2,2Atribut ini menentukan jumlah baris yang akan ditarik oleh sel; sebagai contoh, jikaROWSPAN di set ke 2, yang mana sel dengan span dua baris normal dalam tabel.Contoh:

Ini adalah header tabel Kol 1 Sel 1,2 Sel 2,232

Hasil:Ini adalah header tabelKol 1Sel 1,2Sel 2,2NOWRAPMenyisipkan atribut NOWRAP untuk menjaga tulisan dalam sel semuanya dalam satu baris. Tag CAPTION ditempatkan diantara tag tabel, tetapi tidak diantara row, heading, atau celltags. Tulisan dalam CAPTION tags mendefinisikan caption untuk tabel tersebut. Berikutini adalah atribut sah yang CAPTION tag.Contoh :

Tabel 1, Contoh Ini adalah header tabel Kol 1 Sel 1,2 Sel 2,2

Hasil :Tabel 1, Contoh33Ini adalah header tabelKol 1Sel 1,2Sel 2,2ALIGNSetting atribut ALIGN attribute untuk Netscape adalah TOP dan BOTTOM; sedanganMicrosoft Internet Explorer memasukkan TOP, BOTTOM, LEFT, RIGHT, dan CENTER.Contoh:

Contoh dengan Align Ini adalah header tabel Kol 1 Sel 1,2 Sel 2,2

Hasil :Contoh dengan AlignIni adalah header tabelKol 1Sel 1,2Sel 2,2VALIGNDengan VALIGN, anda dapat menentukan vertical alignment dari data diantara table cells.Atribut ini di set diantara tag yang akan dirapikan. Setting yang sah adalah TOP,MIDDLE, dan BOTTOM. Tanpa ditentukan hasil tag tersebut adalah center. Sebagai contoh ,34Top Aligned menentukan suatu sel akan dirapikan dibagianatas row.Contoh:

Contoh dengan Align Ini adalah header tabel Kol 1 Sel 1,2 Sel 2,2

Hasil :Contoh dengan ValignIni adalah header tabelKol 1Sel 1,2Sel 2,2Forms dan pengaturannyaForm adalah cara untuk mendapatkan umpan balik dari pengunjung ke situs web anda.Diawali dan diakhir dengan tag dan , field-field yang beradadiantaranya digunakan untuk menentukan ukuran dan jenis dari masing-masing inputfield. Walaupun anda dapat memiliki banyak form dalam satu halaman, tetapi anda tidakdapat melakukan form dalam form. Ketiklah contoh berikut dengan nama FormKu.html

LanggananKu35

Berlangganan New letter, masukkan alamat E-mail anda

Suatu hal yang perlu diketahui bahwa pemakaian form menjadi efektif jika melibatkanpemrograman sisi server yang akan menerima data yang dikirim melalui form dandisimpan atau diproses.Tag

Atribut dari elemen form akan dijelaskan pada bagian berikut.ACTIONURL yang menentukan resource yang akan dilakukan oleh action pada form data, danmemberi respon pada user.METHODIni dapat berupa default GET atau POST. Menggunakan GET, query ditambahkan ke URL;menggunakan POST, data dikirim melalui suatu transaksi post pada melalui HTTP. Untukdata yang membutuhkan keamanan anda diajurkan untuk menggunakan metode POST.Contoh :

Berlangganan New letter, masukkan alamat E-mail anda

Hasil :Berlangganan New letter, masukkan alamat E-mail andaKirimElemen-elemen dalam suatu formBagian berikut menerangkan berbagai elemen yang dapat ditempatkan dalam suatu form.INPUT36Elemen INPUT menentukan informasi dari user interface. Berikut ini adalah atribut untukINPUT tag.CHECKEDUntuk checkboxes dan radio button, atribut ini dapat di set ke TRUE (checked) atau FALSE(unchecked).MAXLENGTHMAXLENGTH menentukan jumlah maximum karakter yang mana dapat dimasukkan dalamsuatu textbox.NAMEMenentukan nama dari form control. Hal ini digunakan untuk menentukan eleme datapada form ke resource yang memproses elemen ini.SIZEMenentukan ukuran dari form control. Ini dapat berupa nilai tunggal yang menentukanlebar kontrol dalam karakter, atau dalam width/height pair.SRCIni menentukan image yang akan ditampilkan dengan kontrol.TYPEIni akan menentukan jenis control yang akan digunakan. Berikut ini daftar dari kontrolyang ada:CHECKBOXCheckbox adalah kontrol sederhana TRUE/FALSE, yang bcdefmana kalau di check g adalah TRUE, dan kosongcdefgmenyatakan FALSE.HIDDENKontrol ini tidak ditampilkan oleh viewer dari halaman.Kontrol ini dapat digunakan untuk mengirim statusinformasi kembali ke program form-processing.Klik padaakan menyebabkan form data dikirimseketika, dan nilainya lewatkan oleh image dalam x,ykordinat pixel.IMAGEPASSWORDFungsi ini seperti textbox, tetapi tulisan yang anda ketikditampilkan dengan asterikssebagai37penggantinya.RADIOFungsi ini menyerupai chECKBOX control, tetapi hanyasatu option button dari group yang dapat dipilih setiap ijklmjklmsaat. Pilih n Ya atau nTidakRESETKetika tomboldi klik, form data dikembalikan kekeadaan awal sesuai dengan nilai initial masing-masing.SUBMITResetKlik pada tombolFORM ACTION URL.TEXTSubmitakan mengirim form data keControl ini digunakan untuk menggumpulkan satu baris tunggal dari tulisan. Atribut SIZEdan MAXLENGTH dapat ditentukan untuk membatasipengetikkan.Ketik disiniTEXTAREAControl ini digunakan untuk mengetikkan banyak baris.Ketik komentar anda!Atribut SIZE dan MAXLENGTH memiliki fungsi yang samadengan TEXT control.SELECTTag SELECT menandai awal dan akhir dari data dalam suatu listbox atau suatu drop-downselection list. Berikut ini adalah atribut untuk elemen SELECT.MULTIPLEAtribut multiple memungkinkan user memilih lebih darisatu item dari listbox. User menekan tombol CTRL danclicks pada item-item berbeda untuk memilih lebih darisatu.Ini menentukan nama dari SELECT element.Ini menentukan tinggi dari list control.NAMESIZEOPTIONElemen OPTION membentuk masing-masing pilihan dalam textbox atau listbox. Berikutini atribut dari elemen OPTION :SELECTEDVALUEAtribut ini menentukan nilai default dari text padalistbox.Ini mengembalikan nilai dari element yang terpilih.38Contoh:

Kuesioner Mahasiswa Nama Password Jenis Kelamin Pria Wanita Hobby Membaca,Sport,Music,Memasak,Tamasya Komentar Jurusan Komputer Akuntansi Sekretaris 39

Hasil:Kuesioner MahasiswaNamaPasswordJenisKelaminHobbyKomentarJurusanKomputerijklmncdefgcdefg jklmPria n Wanita cdefcdefcdefMembaca, g Sport, g Music, g Memasak,TamasyaSubmitResetFrame pada Netscape 2.x / Internet Explorer 3.xDengan Netscape 2.0 keatas, browser mampu menampilkan frame yang menggandungkode HTML yang berbeda. Ketiklah contoh berikut ke FrameKu.html

Contoh pemakaian frame

Maaf hanya bisa tampil pada browser yang mendukungframe

Berikut ini akan dijelaskan fungsi masing-masing tag. 40Elemen FRAMESET adalah kontainer group element dari frame. Ada dua atribut yaitu ROWSdan COLS.ROWSTag ROWS menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapatditentukan dalam pixel, persen dengan menempatkan suatu % setelah nilai, atau nilairelatif dengan menempatkan (*) pada tempat dari nilai.COLSSyntax dari atribut COLS adalah sama dengan atribut ROWS.

Elemen FRAME menentukan properti dari setiap frame masing-masing dalam frameset.Karena tidak mengandung text, tidak ada pasangan end-tag. Atribut dari FRAME adalahsebagai berikut.SRCThe SRC attribute specifies the URL source for the frame.NAMEAtribut NAME digunakan untuk menentukan mana pada frame, sehingga dapat berlakusebagai target dari URLs lain.MARGINWIDTHIni memungkinkan perancang halaman untuk menentukan lebar dari border frame dalamjumlah pixel.MARGINHEIGHTIni bekerja seperti MARGINWIDTH tetapi ber-efek pada tinggi dari margin.SCROLLINGSetting yang sah untuk atribut SCROLLING attribute adalah YES, NO, dan AUTO. Jika di setke YES, suatu scrollbar ditampilkan pada frame; NO tidak ada scrollbar, dan AUTOmenampilkan scrollbar jika besar dokumen melebihi ukuran frame.NORESIZEAtribut ini mencegah user untuk melakukan drag untuk mengubah ukuran dari frame.Defaultnya adalah memungkin user untuk mengubah ukuran dari frame.41 Data diantara NOFRAMES tags akan diabaikan oleh browser yang mampu menampilkanframe, dan di tampilkan oleh browser yang tidak mampu menampilkan frame.Contoh : Contoh pemakaian frame Maaf hanya bisa tampil pada browser yang mendukung frame Hasil :Contoh:

Contoh pemakaian frame

Maaf hanya tampil pada browser yang mendukung frame

Hasil :4243C. Mengenal META TagPemakaian META Tag sangat penting, terutama bagi anda yang ingin mendaftarkan situsweb anda ke search engine yang menggunakan META Tag dalam melakukan index.Pengertian yang baik akan META Tag beserta fungsinya akan sangat membantu andadalam menentukan positioning, dan rangking hasil pencarian search engine terhadapsitus web anda.Pemakaian META Tag juga dapat melakukan redirect ke halaman tertentu, melakukanrefresh setelah jangka waktu tertentu tanpa melakukan pemrograman dengan bahasaScript.Pengetahuan akan META Tag adalah mutlak bagi setiap webmaster professional, karenaselain menghasilkan halaman yang lebih bernilai dan juga harus mampu membawapengunjung yang sebanyak-banyaknya ke halaman kita. Tentu saja cara yang palingmudah dan praktis adalah memanfaatkan Search Engine.Apa yang dimaksud dengan META TagMETA Tag adalah tag-tag HTML yang memberikan informasi keterangan isi dari suatuhalaman web yang akan ditampilkan oleh pengunjung. Search engine mengenalinya dandigunakan oleh pemilik situs web dan administrator untuk menentukan positioning danketerangan pada hasil pencarian search engine. Banyak search engine dewasa ini bekerjadengan membaca META Tag sebagai bagian dari formula index.META Tag AbstractTag Abstract mendefinisikan suatu abstraksi ringkas dari situs web andaMETA Tag Abstract sangat menyerupai tag META description, perbedaannya adalahsebagai suatu abstraksi atau suatu ringkasan pendek dari META tag description. Padaumumnya META Tag Abstract berupa satu baris kalimat yang memberikan gambaranseluruh halaman. Walaupun search engine jarang menggunakan tag ini, tetapi merupakanpelengkap yang berguna bagi search engine yang hanya membaca sejumlah baris pertamadari halaman web anda.Penulisan META Tag AbstractMETA Name:General Usage:"Abstract"

44Pemakaian oleh Search EngineWalaupun tidak banyak search engine yang secara khusus mencari META tag Abstract,tetapi hal tersebut menambahkan suatu generalisasi pada halaman anda di bagian headeryang sering dibaca oleh search engine pada saat menemukan suatu halaman web.META Tag AuthorTag Author mendeklarasikan siapa pembuat dokumen tersebutMETA Tag Author mendefinisikan nama dari pembuat dokumen yang sedang dibaca.Tag ini tidak didukung secara luas tetapi dikenali sebagai bagian dari META Tag standar.Format data yang didukung meliputi nama, alamat email dari webmaster, namaperusahaan atau alamat internet (URL). Format yang paling umum adalah menyisip namadari orang atau organisasi dan alamat kontak email. Sebagai contoh : Webmaster(webmaster@submitcorner.com)Penulisan META Tag AuthorMETA Name:General Usage:"Author"

Pemakaian oleh Search EngineWalaupun tidak banyak search engine yang secara khusus mencari META Tag Author,hal tersebut secara jelas mendefinsikan siapa pembuat dan/atau bertanggung jawabmengupdate halaman web tersebut.META Tag CopyrightTag Copyright mendefinisikan informasi tentang hak cipta dokumen tersebutMETA Tag copyright mendefinisikan pernyataan hak cipta yang ingin anda nyatakanpada dokumen halaman web anda. Anda dapat menyertakan nama merek dagang, nomorpatent, hak cipta atau informasi lain yang ingin anda publikasi sebagai hak ciptaintelektual. META Tag Copyright adalah suatu pernyataan hak cipta dalam bentuk bebas.Pemakaian META Tag Copyright45META Name:General Usage:"Copyright"

Pemakaian oleh Search EngineWalaupun tidak banyak search engine yang secara khusus mencari META TagCopyright, hal tersebut secara jelas menunjukkan peryataan dari pemilik atau pengaturanlisensi secara langsung pada bagian header halaman web anda. Pada umumnya, searchengine tidak membaca dan/atau menyimpan informasi ini.META Tag DescriptionTag Description adalah suatu keterangan umum apa yang terkandung dalamhalaman web andaSearch engine yang mendukung META tag sering menampilkan META tag descriptionbesamaan dengan title halaman anda pada hasil pencariannya. Search engine seringmengambil seluruh META tag dari field description anda, tetapi sesuatu yang senantiasaperlu diingat oleh para webmaster adalah keterbatasan tempat tampilan search engine,biasanya kurang dari 20 kata yang mana dapat anda gunakan untuk menarik perhatianpemakai, karena alasan ini biasanya ketika membuat META tag ini, webmaster harusmembuat kalimat pertama dari field description mereka untuk menarik perhatian daripemakai, dan sisanya untuk keterangan lebih lanjut.Pemakaian META Tag DescriptionMETA Name:General Usage:"Description"

Pemakaian oleh Search EnginesMETA Tag Description dan Keyword adalah dua META tag utama yang dicari olehsearch engine ketika mengindeks halaman web anda. Keterangan dan kata kunci adalahkata-kata yang ingin anda tampilkan pada hasil search engine, jadi pastikan bahwa andamemberikan tulisan yang sangat berarti pada kalimat yang ingin anda gunakan untukmenerangkan seluruh halaman situs web anda.META Tag Distribution46Tag Distribution mendefinisikan level dari distribusi dokumen yang adaMETA Tag distribution mendefinisikan level atau tingkat dari distribusi dari halamanweb anda dan bagaimana klasifikasinya dalam hubungan dengan metode distribusi padaworld wide web. Sampai sekarang hanya ada tiga bentuk distribusi yang didukung olehtag distribution : Global (menunjukkan bahwa halaman web anda ditujukan untukdistribusi massa pada setiap orang), Local (ditujukan untuk distribusi lokal dari dokumenanda), dan IU - Internal Use (tidak ditujukan untuk distribusi umum).Penulisan Meta Tag DistributionMETA Name:Supported Distributions:General Usage:"Distribution"Global | Local | IU

Note: Only use one of the abovePemakaian oleh search engineMETA Tag Distribution jarang digunakan karena bisanya pembuat halaman webmendistribusikan halaman mereka kepada setiap orang dengan suatu distribusi global.Hampir semua webmaster mengabaikan tag ini kecuali anda ingin membatasi jumlahpembaca, dalam banyak ini pemakaian META tag Robots adalah ide yang lebih baik.META Tag ExpiresTag Expires mendeklasikan kepada search engine kapan isi dari situs web andaakan kadaluarsaMETA Tag Expires mendefinisikan tanggal dan waktu kadaluarsa dari dokumen yangdiindex. Jika situs web anda hanya digunakan untuk suatu waktu terbatas atau setelahtanggal tertentu dokumen menjadi tidak sah lagi, anda harus mengikutsertakan tagExpires untuk memberitahukan kepada search engine kapan menghapus halaman andadari database mereka.Tag expires umumnya digunakan bersamaan dengan Tag Revisit yang berarti membuatsearch engine mengunjungi kembali setiap beberapa hari. Hal ini umumnya digunakanoleh situs web yang mengupdate isi mereka secara berkala dan ingin search enginememperoleh suatu copy yang terbaru dari ini mereka.Pemakaian META Tag ExpiresMETA Name: "Expires"47General Usage: Note: Requires RFC1123 date as shown abovePemakaian oleh search engineMETA Tag Expire pada prinsipnya digunakan sebagai arti memberitahukan kepadasearch engine suatu tanggal tertentu ketika mereka harus menghapus halaman anda daridatabase mereka. Jika halaman anda kadaluarsa pada suatu tanggal tertentu, adalahdisarankan untuk menentukan tag ini dengan satu atau dua hari sebelum waktu kadaluarsasehingga search engine memiliki waktu untuk menghapusnya, sehingga pengunjung tidakmendapatkan informasi yang sudah kadaluarsa.META Tag KeywordsTag Keyword adalah suatu urutan dari kata kunci yang mewakili isi dari situs andaSearch engine yang mendukung META tag sering menggunakan kata kunci yangditemukan dalam halaman anda untuk melakukan kategori situs web anda berdasarkanpada algoritma indexing pada search engine. Pastikan anda memiliki kata kunci yangsesuai untuk situs anda dan hindari perulangan yang mana akan menyebabkan searchengine menurunkan rangking anda sebagai usaha mengacaukan sistem mereka. Samadengan META Tag Description, search engine memberikan prioritas pada sejumlah katapertama pada keterangan anda, jadi fokuskan pada kata kunci utama anda dan yangselanjutnya merupakan sinonim atau kata lain yang berhubungan.Pemakaian META tag keywordMETA Name:General Usage:COPYRIGHTNOTICE:"Keywords"

Ketika membuat kata kunci untuk situs web anda, janganmencantumkan merek dagang atau hak cipta perusahaan lain. Banyakperusahaan telah memenangkan tuntutan hukum untuk usaha"mencegah" trafik ke pesaing pada search engine.Pemakaian oleh search engineMETA Tag Keyword dan Description adalah dua META tag prinsipil yang dicari olehsearch engine ketika mengindex situs web anda, keterangan dan kata kunci yang andatentukan adalah sama dengan kata-kata yang akan ditampilkan pada hasil, jadi pastikananda menempatkan kata-kata yang berarti yang menerangkan situs web anda.48META Tag LanguageTag Language mendefinisikan bahasa yang digunakan pada halaman web andaMETA Tag Language mendeklarasikan kepada pemakai akan bahasa yang digunakanpada dokumen yang diindex. Search engine yang mengindex halaman berdasarkanbahasa sering kali membaca tag ini untuk menentukan bahasa apa yang didukung. Tag inikhususnya sangat berguna bagi situs web bukan berbahasa english atau memiliki banyakbahasa.Pemakaian META Tag LanguageHTTP-EQUIV:SupportedLanguages:"Content-Language"All RFC1766 compliant languages. A small excerpt of availablelanguages is found below:BG (Bulgarian)CS (Czech)DA (Danish)DE (German)EL (Greek)EN (English)EN-GB (English-Great Britain)EN-US (English-United States)ES (Spanish)ES-ES (Spanish-Spain)FI (Finnish)HR (Croatian)IT (Italian)FR (French)FR-CA (French-Quebec)FR-FR (French-France)IT (Italian)JA (Japanese)KO (Korean)NL (Dutch)NO (Norwegian)PL (Polish)RU (Russian)SV (Swedish)ZH (Chinese)

General Usage:Pemakaian oleh search engine49META Tag Language tidak terlalu sering digunakan oleh search engine walaupunhalaman web anda bukan berbahasa english atau lebih dari satu bahasa, anda mungkiningin menggunakan META Tag ini untuk memberitahukan kepada search engine bahwasitus anda adalah multi-lingual dan memberitahukan bahasa yang didukung.META Tag RevisitTag Revisit mendefinisikan berapa hari search engine harus mengunjungi kembalihalaman andaMETA Tag Revisit mendefinisikan berapa sering suatu search engine atau spidermengunjungi situs web anda untuk melakukan indexing ulang. Sering kali tag inidigunakan oleh situs web yang mengubah isi halaman situs mereka dengan suatu basistertentu. Tag ini dapat juga digunakan untuk menaikan rangking halaman anda jikasearch engine menampilkan hasil berdasarkan pengiriman yang terakhir.Pemakaian META Tag RevisitMETA Name:General Usage:"Revisit-After"

Note: X indicates a numberSearch Engines UsageMETA Tag Revisit digunakan oleh search engine sebagai arti untuk memberitahukanberapa sering suatu halaman web harus dikunjungi untuk indexing ulang. Tag inididukung oleh banyak search engine dan harus digunakan jika anda mengubah isihalaman anda secara berkala.META Tag RefreshTag Refresh mendefininisikan jumlah detik sebelum refresh ulang halaman andaMETA Tag refresh digunakan sebagai suatu cara untuk mengarahkan atau merefreshpengunjung ke halaman web lain setelah sejumlah detik tertentu. META tag ini seringdigunakan sebagai suatu halaman "jembatan" yang mana diakses pertama kali olehpengunjung dan kemudian mengarahkannya ke halaman lain. Beberapa search enginemengabaikan META tag jenis ini karena dapat membuka kesempatan bagi pemakai untukmelakukan spamming terhadap search engine akan halaman yang sama. Sebagaitambahan, hal ini juga membuat banyak database search engine mengalami clustereddengan versi data yang sama.50Pemakaian META Tag RefreshMETA HTTP- "Refresh"EQUIV:General Note: X indicates delay in seconds URL indicates the URL to redirect toPemakaian oleh search engineMETA Tag Refresh bukanlah META tag yang harus digunakan pada halaman yang andakirim ke search engine. Banyak search eingine memiliki algoritma yang akan mendeteksitag Refresh dan mengabaikan halaman anda. Disarankan untuk tidak menggunakan taginiMETA Tag RobotsTag Robots mendeklarasikan kepada search engines apa isi yang akan diindex dandijaringRobots, juga dikenal sebagai suatu spider, adalah mekanisme yang secara otomatismenjaring situs anda, atau mencari halaman anda untuk melakukan kategori informasiyang anda kirim ke search engine. Persisnya, seorang pemilik situs web harus mengirimhalaman utama dan robot akan mengunjungi situs anda dan menggumpulkan semuahalaman sub dan link yang berkaitan dengan halaman utama. Bagaimanapun, tag inimemungkinkan anda mengendalikan halaman mana saja yang akan di jaring, dan manasaja yang akan diabaikan. Sebagai contoh, beberapa halaman web dan direktori (seperti:Script CGI) yang tidak anda ingin index dalam search engine. Gunakan tag robots, andadapat mendefinisikan halaman yang diikuti, mana yang diindex dan mana yangdiabaikan.Pemakaian META Tag RobotsMETA Name:Supported Types:General Usage:"Robots"noindex | index | nofollow | follow

Pemakaian oleh search engine51META Tag Robots digunakan oleh search engine sebagai suatu arti untuk menentukantingkat dari penjaringan yang harus dilakukan oleh suatu search engine. Kebanyakansearch engine mencari META tag ini dan hanya mengindex halaman yang ingin andaindex.52D. Pertanyaan yang berkaitan dengan HTMLApa yang dimaksud dengan halaman Web ?Halaman Web adalah suatu dokumen internet yang dapat diakses oleh pemakai denganmenggunakan software internet browser HTML (seperti Netscape navigator, InternetExplorer). Dengan mengetikan pada browser suatu alamat unik, atau istilahnya UniformResource Locator (URL, yang dibaca "you-are-ell" or "earl"), maka anda dapat membukahalaman dengan alamat tersebut. Teknologi yang lebih baru juga memungkinkanhalaman Web memiliki gambar tiga dimensi, video, gambar animasi, dan suara.Bagaimana cara terbaik belajar HTML?Dengan membaca tutorial, dan melakukan latihan serta percobaan; dan kamimenyarankan anda untuk melakukan ketiga hal tersebut.Suatu cara terbaik mempelajari HTML adalah melihat bagaimana orang lainmelakukannya ! Dengan menggunakan browser kesukaan, cari suatu halaman yang andasenangi. Dan tampilkan "Source" atau "Document Source" yang berada dibawah menu"View". Hal ini akan menampilkan pada anda HTML yang digunakan untuk membuathalaman tersebut. Perhatikan perintah-perintah yang digunakan untuk menghasilkanhalaman tersebut ! Bandingkan dengan hasil tampilannya, dan baca tutorial untuk tag-tagyang digunakan.TipsKalau anda memiliki Microsoft Word 97, anda dapat mempersiapkan dokumen *.docanda menjadi suatu halaman html dengan menu File, kemudian pilih Save as HTML,sederhana bukan ?Apa yang harus digunakan untuk menulis HTML?Cara yang paling mudah adalah menggunakan suatu program membuat halaman Webyang Visual seperti Frontpage, Dreamwaver, Netscape Composer, bahkan MS Word 97,yang beroperasi menyerupai suatu paket pengolah kata (dengan sedikit help) tidak hanyamenghasilkan HTML untuk anda, tetapi juga membantu anda mengatur segalanya mulaidari awal sampai selesai. Hal ini sangat berguna khususnya untuk orang yang tidakmemiliki waktu untuk mempelajari detail dari HTML, tetapi sebaiknya anda memilikipengetahuan dasar tentang HTML sebelum menggunakannya.Orang yang bekerja dengan HTML pada tingkatan produksi, mereka sering menggunakaneditor HTML, yang mana memiliki kemampuan khusus (seperti secara otomatismenyisipkan tag penutup) sehingga dapat bekerja dengan cepat.53File HTML pada dasarnya adalah teks file ASCII sederhana yang dapat dibuat denganteks editor seperti Edit di DOS, Notepad pada windows, dll; cuma pastikan bahwa ketikaanda menyimpan dokumen, anda harus menyimpannya dengan ekstension ".htm" atau".html".Elemen apa yang dibutuhkan untuk suatu dokumen HTML?Setiap dokumen HTML membutuhkan tag tertentu agar dapat berfungsi. Semua tag dasarbekerja secara berpasangan; anda harus memiliki akhir tag yang berpasangan agarbrowser dapat mengenali awal atau akhir dari stype atau perintah. Suatu perbedaan yangnyata dari awal dan akhir tag adalah / harus digunakan pada tag penutup. Semua tag harusdiapit dengan < dan >. Tag tidak membedakan huruf besar maupun kecil. Lima tag dasaruntuk suatu dokumen HTML adalah sebagai berikut:

Halaman homepage saya yang pertama

Lima tag dasar suatu halaman WebIni adalah contoh singkat.Anda harus terus membaca dan berlatih!

Penjelasan untuk contoh diatas:menyatakan bahwa dokumen tersebut adalah HTML. bagian yang pertama dari dokumen anda. Dapat mengandung TITLE. merupakan title untuk dokumen anda. Akan ditampilkan pada title bar browserpengunjung. merupakan bagian keuda yang paling penting untuk dokumen HTML anda.Mengandung seluruh teks untuk halaman anda; link dan perintah pemformatan untukhalaman anda. menentukan ukuran tulisan, dapat dari 1 s/d 6. menandai awal dari suatu paragraf baru.Bagaimana meletakkan gambar dalam halaman Web?Semua gambar harus dikonversi menjadi format digital tertentu, anda dapatmenggunakan scanner dan software (seperti Adobe Photoshop, Corel Photopaint,54Microsoft Photopaint) untuk melakukan manipulasi gambar dan menyimpannya denganformat ".gif" maupun ".jpg"Berikut ini adalah tag yang digunakan untuk menempatkan suatu gambar dalam halamanWeb:

IMG SRC adalah tag yang mana kode dari suatu tempat gambar; "Internet.gif" adalahnama dari file GIF yang mana bersesuaian. Nama file ini akan diubah sesuai dengangambar yang anda gunakan.Bagaimana membuat link ke halaman lain?Ini adalah hal paling penting yang perlu anda pelajari, dan mudah untuk dilakukan ! Andaperlu mengetahui dua hal, alamat dari halaman yang ingin anda link, dan tag HTMLuntuk link tersebut adalah , yang mana singkatan dari anchor. Untuk me-link fileanda ke file laing, gunakan . Berikut ini adalah contoh untuk membuat suatulink kehalaman lain yang telah anda buat:Ini adalah halaman pertama tutorialKetika ditampilkan, tulisan Ini adalah halaman pertama tutorial ditampilkan dengan garisbawah. Kalau anda melakukan klik padanya akan membawa anda ke halaman index.html.Link ke halaman lain pada web lain sedikit agak kompleks, karena anda harusmenyebutkan alamat URL, contoh :Homepage paling diminati oleh webmasterCatatan : URL yang benar harus dimulai dengan "http://" pada awal dan diakhir dengan"/" atau suatu nama file yang berekstension ".htm" atau ".html".Bagaimana menempatkan halaman di Web ?Sebelum anda siap untuk meletakkan (atau "upload") halaman Web anda, anda harusmelakukan tiga hal berikut. Pertama, anda telah memiliki dokumen HTML yang benar(tetapi beberapa situs web gratis menyediakan template yang bisa anda gunakan untukmembuat halaman dengan instan). Kedua, anda telah mempersiapkan semua gambar dansuara yang dibutuhkan untuk halaman anda. Ketiga, anda harus memiliki suatu accountpribadi pada suatu server Web.55Dewasa ini banyak terdapat layanan Web gratis seperti Geocities, Goplay, eWebCity,Freedom2surf, untuk layanan lokal misalnya Astaga. Untuk layanan komersial misalnyaIndoglobal.Anda juga harus mampu mentranfer halaman anda keserver. Anda dapat menggunakanWSFTP, ataupun fasilitas FTP pada sistem operasi anda. Banyak juga layanan web yangmenyediakan upload melalui browser.Bagaimana orang dapat menemukan halaman milik seseorang pada Web?Pernah mendengar Yahoo? atau AltaVista? atau WebCrawler? Jika anda pernahmendengar istilah "search engine" itulah mereka. Search engine pada dasarnya adalahperusahaan yang hadir pada Internet untuk membantu pemakai mencari apa yang merekainginkan berdasarkan kata kunci tertentu. Sebagai contoh jika anda memasukkan"Indonesia" suatu halaman yang berisi link yang berkaitan dengan Indonesia ditampilkandihadapan anda. Jika anda masuk ke halaman seperti Yahoo ! dan AltaVista, klik sajapada link add URL; search database otomatis lainnya seperti Lycos akan mencarihalaman baru anda dalam sejumlah minggu, dan menambahkan URL anda ke databasemereka.Di Internet juga tersedia berbagai service "Site Submitter", coba cari di searchengine.Bagaimana caranya menerima email lewat situs?Jika anda menjual sesuatu, tentu saja anda perlu mendapatkan umpan balik daripengunjung dan anda ingin membuat suatu link mail pada situs anda. Gunakan perintahMAILTO sebagaimana contoh berikut ini: webdesigner7@hotmail.comDalam hal ini, ketika anda klik pada webdesigner7@hotmail.com, halaman mail akanmuncul pada browser anda, dan mail yang anda ketik akan dikirim ke alamat ini!Bagimana menambahkan musik midi kedalam file HTML?DenganINTERSTUDI Internet Explorer hal ini sederhana saja yaitu dengan menggunakan tagberikut :

tag ini akan memainkan music.mid sekali, jika anda ingin musik dimainkan terusmenerus anda dapat mengganti loop="1" menjadi loop="infinite", contoh :

56Jika anda ingin menggabungkan file music.mid, anda dapat menggunakan tag embedberikut :.Bagaimana membuat suatu gambar sebagai latarbelakang halaman ?Untuk membuat suatu gambar sebagai latarbelakang halaman, cukup gunakan atribut"background" pada tag dokumen anda. Contoh :

Tag ini akan bekerja pada Netscape dan Internet Explorer. Dengan menggunakan kodediatas akan membuat image diisi penuh pada latar belakang. Sebagai tambahan, andadapat menggunakan atribut "BGPROPERTIES" untuk membuat latar belakang permanendan tidak akan bergeser bersama tulisan, contoh:

Bagaimana menambah suatu tulisan berputar pada halaman ?Hal ini dapat dengan mudah dilakukan pada Intenet Explore dengan tag :Tulisan yang ingin diputar.Bagaimana memberi warna pada tulisan tertentu ?Untuk memberi warna pada tulisan tertentu, anda dapat menggunakan tag :blueBagaimana membuat suatu link dengan gambar?Untuk membuat link dengan teks, anda dapat menggunakan tag :TransnetAnda dapat mengganti tulisan Transnet dengan suatu tag gambar sehingga lengkapnya adalah :

57dan akan menghasilkan :Bagaimana menghilangkan border pada link dengan gambar?Untuk menghilangkan border disekeliling link dengan gambar, anda dapat menambahkanatribut "border" pada tag , contoh :

dan akan menghasilkan :Bagaimana membuat suatu halaman yang telah lewat menjadi expire?Kadang-kadang kita ingin membuat suatu halaman menjadi expire ketika pengunjungmelakukan klik tombol back. Anda dapat menggunakan tag Meta pada bagian HEADdokumen html yang anda ingin membuatnya menjadi expire begitu dilewati, dan gunakanparameter Pragma untuk memberitahukan browser untuk tidak melakukan cache terhadapfile tersebut.

Pada contoh diatas kita sengaja melakukan setting tanggal expire-nya ke suatu tanggalyang telah lewat.Bagaimana membuat halaman melakukan refresh setiap 10 menit ?Anda dapat menggunakan tag META untuk melakukan hal ini :

anda dapat mengatur interval waktu refresh dengan menggati atributCONTENT="600"!Bagaimana secara otamatis menampilkan halaman berikutnya untuk intervalwaktu tertentu?Anda dapat menggunakan tag META berikut :58

anda dapat menentukan interval waktu dengan mengubah atribut CONTENT="0 menjadiCONTENT="10 dalam ukuran detik"Bagaimana menambah subjek pada tag mailto?Anda dapat menggunakan tag berikut :

Bagaimana membuka dokumen link pada jendela baru dengan tag A HREF?Anda dapat menggunakan parameter TARGET pada tag A HREF tersebut, seperti berikutini :new windowdimana "_new" adalah bukan nama jendela browser yang telah tersebutBagaimana membuka link baru tanpa frame ?Anda dapat menggunakan "_top" sebagai parameter pada tag A HREF :go to a no-frame versiondimana "_top" akan menyebabkan halaman sekarang diganti dengan URL baru.59E. Tips Membuat Halaman WebAda beberapa teknik dasar yang dapat membuat "Halaman WEB " Anda terlihat lebihprofesional, Berikut ini beberapa contoh yang sederhana :Letakkan Judul ditengah-tengahTidak semua judul, tetapi paling tidak suatu Judul harus dengan Font Size "H1", ataulebih umum "H2", dan kadang-kadang dengan Font Size "H3".Bila meletakkan semua judul di tengah, dapat membuat halaman Web terlihat kaku dankehilangan penekanan arti akan perbedaan antara "left justified" dengan judul-judul yangterletak di tengah.Biasakanlah untuk menggunakan Tabel HTML.Alasannya adalah bahwa Halaman Web yang profesional akan terlihat rapi dan lebihinformatif dengan menggunakan tabel-tabel.Hampir semua "Browser" sekarang menyediakan sistim tabel, jadi sebaiknya digunakan.Dengan tabel yang sangat kecilpun, dengan hanya satu atau dua baris dan satu atau duakolom, akan membuat halaman Web menjadi simetris. Bahkan untuk grafik/image (.jpgdan .gif) dapat diletakkan diantara tabel-tabel tersebut.Letakkan Tabel ditengah-tengahBiasanya dengan meletakkan tabel ditengah akan membuat semua halaman Web terlihatlebih simetris. Juga sebaiknya text atau gambar dalam setiap sel di dalam tabel diletakkandi tengah.Jangan membuat Tampilan yang menyilaukanHindari "Blinking Text" /kalimat yang berkedip-kedip dan jangan membuat judul yangbesar disetiap baris.Buatlah Gambar/image dengan background yang transparan.Buatlah .gif image transparan, dengan menggunakan salah satu pilihan dalam softwaregrafis yang digunakan.Pada saat menyimpan file image kedalam Disk, pilih "OPTIONS" kemudian pilih optionyang menyimpan background warna yang sedang digunakan sebagai warna yangtransparan. Hal ini akan membuat image background transparan, dan membuatimage/tampilan terlihat bagus mengambang di halaman Web. Pembuat Web Page yangprofesional biasanya akan menggunakan teknik tersebut.Jangan membuat halaman Web yang berisi kotak berwarna putih atau abu-abudisekeliling masing-masingc image/tampilan.60Gunakan sebuah Background ImageDengan meletakkan image dengan warna yang terang sebagai background .GIF dapatmembuat halaman Web lebih enak dipandang.Anda dapat menentukan hal tersebut dari "HoTMetal" dengan cara meletakkan cursorsetelah membuka "BODY Tag", kemudian pilih "ALT-M", "ALT-A", kemudian ketiknama image disebelah label "Background". Image akan berulang kesamping dan kebawah halaman Web dari "ujung ke ujung". Hati-hati, jangan gunakan image yang gelapyang akan membuat kalimat/text sulit dibaca. Pastikan image file Anda terletak padadirektori yang sama dengan halaman Web.Bagilah halaman Web yang besar menjadi halaman-halaman yang lebih kecil.Jika halaman Web lebih besar daripada dua atau tiga ukuran pada layar screen, pecah-pecahlah menjadi halaman sesuai layar screen dengan menyediakan "link" dari halamanutamanya ke halaman berikutnya.Permudah User/pengguna untuk "navigating/browsing".Bila pengguna/user dibawa ke halaman lain agar dibuat "Hot Link" untuk kembali / "LinkGo Back". Cara yang paling mudah ialah dengan menambahkan "Garis Horisontal" padabagian bawah masing-masing halaman, dengan "Short link" kembali ke halaman utama.Bila Ada banyak halaman, letakkan dua buah "link" di bagian bawah, satu untuklangsung ke halaman akhir, dan satu lagi untuk kembali ke halaman awal "Home" secarasatu persatu (seperti meng-klik icon "back").Bila Anda telah melaksanakan teknik-teknik tersebut diatas, dan mengisi halaman WebAnda dengan informasi dan isi yang berarti, maka Tampilan Halaman Web Anda akankelihatan Bersih, Profesional, enak dipandang, dan enak untuk dibaca seperti pada"World Wide Web".SELAMAT BERKREASI61INTERSTUDI62