HTML DAN SKRIP SKRIP HTML
HTML DAN SKRIP-SKRIP HTML – Oleh Handika Budi Prastyo
Posted on Oktober 11, 2016 by Handika Budi Prastyo
HTML DAN SKRIP-SKRIP HTML
HTML
1.1 Pendahuluan
HTML adalah singkatan dari HyperText Markup Language. HTML merupakan sebuah file atau dokumen berformat ASCII (American Standard Code for Information Interchange) sehingga dokumen HTML dapat dibuat dan dibaca dengan teks editor biasa. Teks editor yang bisa digunakan bisa bermacam-macam, asalkan dalam menyimpanya disimpan dengan format teks biasa dan dengan ekstensi .htm, .html, .HTM, atau .HTML. Beberapa teks editor yang biasa digunakan diantaranya adalah notepad (teks editor yang terembed di Windows), edit (teks editor mirip notepad di Mac OS), atau apa saja yang bisa digunakan untuk menyimpan dokumen dengan format teks biasa. Semua teks editor tersebut umumnya dapat digunakan untuk membuat dokumen HTML dengan cara mengetikkan langsung tag-tag HTML. Untuk itu, agar dapat membentuk dokumen HTML yang benar, kita harus mengerti tag-tag atau skript-skript yang terdapat di HTML.
Untuk dapat membuat dokumen HTML, selain kita harus mengerti tag atau skript, kita juga dapat menggunakan bantuan software-software pengolah dokumen HTML sehingga kita bisa membuatnya tanpa kita harus mengerti tag-tag HTML. Software-software yang dapat digunakan diantaranya adalah Dreamweaver, yaitu software keluaran Macromedia yang kini telah dibeli oleh Adobe. Sehingga yang dulunya disebut dengan Macromedia Dreamweaver sekarang menjadi Adobe Dreamweaver. Dreamweaver adalah tool atau software untuk mengolah dokumen HTML yang paling populer saat ini. Dengan Dreamweaver, kita bisa membuat dokumen HTML dengan mudah, tanpa kita harus tahu tag-tag yang ada. Dengan Dreamweaver, kita bisa membuat dokument langsung isi dari dokument HTML yang kita maksud, sedangkan sisanya, yaitu tag-tagnya sudah otomatis diketikkan oleh Dreamweaver.
Selain dengan Dreamweaver, kita juga bisa membuat dokumen HTML dengan software lain yang juga lumayan terkenal, yaitu Microsoft Frontpage yang kini telah berganti nama menjadi Microsoft Expression Web. Microsoft frontpage merupakan software untuk mengolah dokumen HTML yang cukup banyak digunakan orang. Walaupun Frontpage juga cukup terkenal, namun dari beberapa artikel, Dreamweaverlah yang paling terkenal dan banyak digunakan para developer web internet. Dengan Frontpage, kita bisa membuat dan mengedit dokumen HTML semudah kita mengedit dokument di Microsoft Word. Kita bisa mengolahnya tanpa kita harus tahu tag-tag yang ada.
Membuat dokumen HTML dengan bantuan software memang cukup mudah dan kita tidak perlu tahu ada apa dibalik dokumen tersebut. Namun demikian, hal ini tidak akan menjadi masalah bila hal ini untuk keperluan hal-hal yang sederhana. Masalah akan muncul bila kita tidak mengerti tag HTML kemudian kita akan melangkah pada hal-hal yang komplek yang berkaitan dengan HTML.
Pengetahuan akan HTML dan beserta skript-skript/ tag yang ada di dalamnya adalah hal mutlak yang harus dikuasai oleh seorang developer web. Seorang developer/ pengembang web harus mengetahui dan menguasai HTML harena tanpa pengetahuan tersebut, ia akan kesulitan bila bahkan tidak bisa bila harus membangun website. Dalam membangun website yang sederhana sekalipun, kita harus mengerti tentang skrip HTML diantanya links. Dalam membangun website yang cukup komplek, HTML adalah skript dasar yang harus dikuasai sebelum menguasai bahasa atau skript lainya. Sebut saja PHP, dalam PHP, format penulisan dalam PHP adalah pengembangan dari HTML. Dalam PHP tersebut masih terdapat beberapa tag HTML walaupun di dalamnya ditambahi keyword lainya.
2.1 Pengertian HTML
HTML (HyperText Markup Language) adalah kumpulan tag dan aturan (pengembangan dari SGML) yang digunakan untuk mengembangkan dokumen hyperteks. Hyperteks sendiri adalah suatu teks yang mempunyai hubungan atau keterkaitan antara satu teks dengan teks lainya yang biasa disebut links. Dengan links, kita bisa menuju dari dokument satu ke dokument lainya dengan menunjuk link tersebut.
2.2 Versi HTML
HTML mengalami beberapa perkembangan, yang dalam perkembanganya yaitu terdapat beberapa tag yang yang diganti dan ditambah. HTML standar adalah HTML versi 2.0 sedangkan versi terbaru ketika makalah ini ditulis (Mei 2009) adalah sudah sampai pada versi 4. Browser web sendiri akan menerjemahkan tag-tag HTML yang diterimanya sebagai HTML standard bila dalam dokumen HTML tersebut tidak terdapat informasi versi. Bila dalam HTML tersebut terdapat informasi versi, maka browser akan menerjemahkan tag-tag yang ada sesuai dengan versi yang diinformasikan.
Walaupun HTML bisa dikatakan dokumen yang cukup standar dan dapat dibuka dengan berbagai browser, baik yang lama ataupun yang baru, HTML versi terbaru yaitu versi 4 hanya akan tampil sempurna pada browser Internet Explorer versi 4 ke atas. Untuk saat ini (Mei 2009), versi Internet Explorer terbaru adalah versi 8 yang dikeluarkan sekitar bulan Maret 2009.
2.3 Menampilkan HTML di Berbagai Browser
HTML dapat ditampilkan di berbagai macam browser yang berbeda. Baik itu browser yang ada di komputer dengan system operasi Windows diantara Internet Explorer, Mozilla Firefox, Netscape Nafigator, Opera, Avant Browser, NeoPlanet atau Safari di komputer Mac Intosh dan bahkan browser sederhana yang terdapat di PDA dan hanphone. Dengan beragamnya browser tersebut, akan memberi kemungkinan tampilan yang berbeda antara satu browser dengan browser lainya. Dengan demikian, belum tentu semua tag HTML akan didukung oleh browser yang ada. Ambil saja satu contoh sederhana dari browser yang sama-sama dari komputer dengan system opersai Windows. Tag <blink>…</blink> akan memberikan efek berkedit dalam browser Mozilla Firefox dan Opera, sedangkan dalam browser Internet Explorer tidak memberikan efek apapun. Dalam Mozilla Firefox dan Opera sendiri yang sama-sama memberikan efek berkedip juga mempunyai perbedaan dalam kedipanya. Kedipan Opera lebih lambat dibanding kedipan Mozilla Firefox.
2.4 Perbedaan Menampilkan HTML di Teks Editor dan di Browser
Dokumen HTML bisa dibuka dengan teks editor (misal notepad) maupun dengan browser (misal Internet Explorer) namun terdapat perbedaan keduanya dalam hal cara membuka. Dalam teks editor, HTML akan dibuka tanpa menerjemahkan tag-tagnya sehingga semua isi beserta tag-tagnya ditampilkan semua. Sedangkan dengan browser, dokumen HTML akan dibuka dengan menterjemahkan tag-tagnya sehingga yang ditampilkan adalah isinya saja sedangkan tag-tagnya digunakan untuk memerintahkan kepada browser bagaimanakan seharusnya isi dokumen tersebut ditampilkan.
2.5 Badan Pengurus Standard HTML
Pada tahun 1994, dibentuk sebuah bada nirlaba yang berfungsi untuk mengurus world wide web (www) yang juga mengurus standard HTML. Badan tersebut adalah World Wide Web Consortium atau W3C (www.w3c.org). Keanggotaan W3C diantaranya adalah lembaga penelitian, institut, perusahaan dan individu-individu di seluruh dunia. Tujuan dibentuknya W3C adalah untuk membentuk standard baku masalah www agar tidak didominasi oleh pihak tertentu. Dengan adanya badan nirlaba ini, semua developer software dan semua pengguna di seluruh dunia harus menyesuaikan softwarenya ataupun skript-skript yang mereka buat sesuai dengan standard yang dibuat dan disetujui bersama di W3C.
2.6 Pengembangan HTML
Saat ini (Mei 2009) HTML sudah pada versi 4, yang mana HTML 4 ini sudah cukup sempurna dan menjadi web paling banyak digunakan di internet. HTML 4 oleh W3C dikembangkan dengan versi lain yang masih mirip dengan HTML namun namanya sudah tidak HTML lagi. W3C memberi nama dengan XHTML yang mana XHTML ini adalah pengembangan dari HTML 4 yang mirip tapi mempunyai beberapa perbedaan.
Beberapa perbedaan XHTML 1.1 dibandingkan dengan HTML 4 adalah sebagai berikut:
• Bagian dan nama atribut harus huruf kecil (<a href=”index.html”>).
• Tag akhir selalu dibutuhkan untuk suatu bagian yang tidak kosong (<p>Halo apa kabar?</p>)
• Suatu bagian kosong harus terdiri dari tag-awal/tag-akhir (<br />).
• Nilai atribut harus selalu dikutip (href=”index.html”).
• Nama atribut tidak dapat digunakan tanpa nilai (ismap=”ismap”).
• Tempat di mana XHTML berada harus dideklarasikan di bagian HTML.
• Bagian head dan body tidak boleh dihilangkan.
• Bagian title harus berada di bagian pertama dari bagian head.
• Dokumen harus mempunyai identitas nama yang tujuanya untuk membedakan halaman satu dengan halaman yang lainya. Nama dokumen yang dipakai tidak dapat digunakan lagi untuk keperluan dalam dokumen XHTML tersebut dengan alasan apapun.
2.7 Ekstensi Dokumen HTML
Dokumen HTML mempunyai beberapa ekstensi yang berbeda, namun walaupun ekstensinya beda tetapi isi dari dokumen tersebut adalah sama. Ekstensi yang bisa dimiliki oleh dokumen HTML adalah *.html, *.htm, *.hta, *.htc. Untuk ekstensi *.html dan *.htm adalah ekstensi dokumen HTML normal yang biasa digunakan sedangkan untuk ekstensi *.hta dan *.htc adalah ekstensi dokumen HTML yang memerintahkan pada browser cara khusus dalam membuka dokumen tersebut. Cara khusus tersebut diantara, apakah dokumen tersebut harus dibuka secara fullscreen dan sebagainya tergantung browser yang digunakan.
Ekstensi *.html dan *.htm adalah sama, lantas mengapa kalau sama harus ada dua macam ekstensi? Pada mulanya, ekstensi *.html adalah ekstensi dokumen HTML untuk system operasi UNIX dan Windows 95, sedangkan ekstensi *.htm adalah ekstensi dokumen HTML untuk system operasi DOS dan Windows 3.x. Seiring dengan perkembangan system operasi yang kian maju, kini ekstensi *.html dan *.htm sudah tidak dipermasalahkan lagi.
2.8 Sekuritas Dokumen HTML
Perkembangan dunia komputer yang kian maju, membuat berbagai aspek yang menyertainya juga ikut kian maju. Salah satunya adalah virus komputer. Berbagai dokumen bisa dengan mudah diinfeksi oleh virus komputer. Dokumen file seperti file doc, exe, mp3, dan lain-lain adalah dokumen yang sudah bisa terinfeksi virus. Apakah dokumen HTML juga bisa terinfeksi virus? Sampai dengan makalah ini ditulis, dokumen HTML yang masih murni belum bisa terinfeksi oleh virus sehingga bisa menularkanya ke dokumen lain. Dokumen HTML yang masih murni adalah dokumen HTML yang belum disisipi dengan skript-skript di luar tag HTML.
2.9 Jenis File Dokumen HTML
File dokumen HTML adalah file yang menggunakan format ASCII. Ciri khas dokumen yang menggunakan format ASCII adalah dokumen tersebut bisa dibuka dengan teks editor biasa seperti notepad.
Bab III
Skript HTML
3.1 Tag / Sript HTML
Salah satu ciri dokumen HTML adalah adanya tag-tag. Tag-tag tersebut fungsinya adalah memberi instruksi kepada browser bagaimanakah seharusnya isi dari dokumen tersebut ditampilkan. Baik itu dalam menampilkan teks, gambar, animasi dan sebagainya.
3.2 Aturan-aturan Dasar Tag / Skript HTML
Penulisan tag HTML harus mengikuti aturan yang ada. Jika penulisan tag keliru atau tidak mengikuti aturan, maka browser akan mengabaikan tag tersebut. Berikut adalah beberapa aturan dasar dalam menuliskan tag HTML:
• Setiap tag HTML harus diapit oleh tanda lebih kecil dan tanda lebih besar atau tanda kurung siku miring. < … >.
• Penulisan tag tidak case sensitive yang artinya penulisan dengan huruf kecil dan huruf besar adalah sama.
• Tag HTML ada yang tunggal dan ada yang berpasangan. Untuk tag yang berpasangan, tag pembuka dan tag penutup harus selalu ada, bila hanya terdapat salah satu saja, maka browser tidak akan memprosesnya.
• Spasi dan baris baru yang terdapat di dalam tag akan diabaikan oleh browser.
• Semua dokumen HTML harus disimpan sebagai teks murni, yaitu dokumen yang menggunakan format ASCII. Jenis ekstensi yang digunakan bisa htm dan html.
3.3 Struktur Dokumen HTML
Dalam dokumen HTML, terdapat tiga buah tag utama. Tag tersebut diantaranya adalah HTML, HEAD dan BODY. Ketiga tag inilah yang membentuk dokumen HTML. Berikut adalah penjelasan singkatnya:
• Tag HTML berfungsi untuk memberikan pengenal pada dokumen tersebut. Tag HTML ini adalah tag yang harus ada dalam setiap dokumen HTML.
• Tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML tersebut, misalnya informasi judul.
• Tag BODY berfungsi untuk menyimpan berbagai informasi atau data-data yang akan ditampilkan di browser.
3.4 Membuat Dokumen HTML
Kita bisa membuat dokumen HTML hanya dengan skrip sederhana atau dengan skrip yang komplek. Berikut ini adalah penjelasananya masing-masing.
3.4.1 Paling Sederhana
Membuat dokumen HTML paling sederhana adalah dengan hanya menggunakan tag HTML seperti berikut.
<HTML> … </HTML>
Berikut adalah contohnya.
<HTML>
Halo… perkenalkan, saya adalah dokumen HTML…
</HTML>
Tag HTML adalah tag yang berpasangan. Kita harus mengawali dengan tag pembuka di awal dokumen yaitu <HTML> dan mengakhiri dengan </HTML> di akhir dokumen.
3.4.4 Lebih Lengkap
Selain hanya dengan cara paling sederhana, kita juga bisa membuat dokumen HTML dengan cara yang lebih lengkap berikut.
<HTML>
<HEAD> .. </HEAD>
<BODY>
..
</BODY>
</HTML>
3.5 Blok HEAD
Blok HEAD adalah daerah pada dokumen HTML yang digunakan untuk menyimpan informasi tentang dokumen HTML tersebut. Tag yang dapat disertakan dalam blok HEAD adalah TITLE, BASE, ISINDEX, META, NEXTID, STYLE, dan LINK.
3.5.1 TITLE
<TITLE> ..</TITLE> adalah tag yang digunakan untuk membuat judul dokumen HTML. Tag ini hanya boleh berada di dalam blok HEAD yang merupakan bagian untuk menaruh informasi dari dokumen HTML tersebut. Teks di dalam blok TITLE merupakan nama default jika kita ingin menyimpan dokumen HTML yang telah kita buka dengan browser. Berikut adalah cara penulisan TITLE.
<HEAD>
<TITLE> Judul Dokumen HTML </TITLE>
</HEAD>
Berikut ini adalah poin-poin yang harus diketahui untuk membuat judul dokumen HTML:
• Tag TITLE hanya boleh berada di dalam blok/bagian HEAD.
• TITLE bukan merupakan bagian isi dari dokumen, TITLE hanya sebagai bagian informasi dari dokumen, sehingga tidak boleh ada tag lain di blok TITLE. Di dalam Blok TITLE hanya boleh terdapat teks biasa.
• TITLE tidak ditampilkan di jendela browser, namun TITLE akan ditampilkan di title bar jendela browser seperti gambar berikut.
• Judul dibatasi sampai 64 karakter. Apabila judul yang dibuat melebihi 64 karakter, judul tersebut oleh browser akan dipotong pada 64 karakter pertama.
• Judul dapat dijadikan bookmark dalam browser.
3.5.2 META
<META> ..</META> adalah tag HTML yang digunakan untuk menspesifikasikan informasi dari suatu dokumen yang tidak terkait dengan <BODY>. META Banyak digunakan untuk mendeskripsikan dokumen yang isinya adalah keyword untuk menemukan dokumen tersebut. Kebanyakan mesin pencari / search engine menggunakan informasi yang terdapat dalam META untuk mengindeks dokumen tersebut dalam database mereka. Entah mesin pencari terkenal seperti Google menggunakan META atau tidak penulis kurang tahu, itu adalah rahasia dari pihak Google. Yang jelas META dalam kebanyakan kegunaanya adalah digunakan untuk mengindeks dan memberi informasi pada mesin pencari. Format dan letak penulisan META adalah sebagai berikut.
<HEAD>
<TITLE> … </TITLE>
<META NAME =”…” CONTENT =” … “>
</HEAD>
Berikut adalah contoh penggunaan META.
<head>
<title>Tohari sang programmer…</title>
<meta name=”description” content=”Ahmad Tohari adalah programmer VB cap ikan teri, cap uget-uget..”/>
<meta name=”keywords” content=”programmer, visual basic, ahmad tohari”/>
</head>
3.6 Blok BODY
Blok BODY adalah blok atau daerah di mana isi dari dokumen HTML di tempatkan. Pada daerah BODY inilah yang pada nantinya ditampilkan pada halaman browser. Pada bagian BODY ini pula sebagian besar dokumen HTML berada. Pada bagian sebelumnya, yaitu pada bagian HEAD kita hanya bisa menempatkan dokumen teks, tidak demikian pada bagian BODY. Pada bagian BODY ini kita bisa menempatkan suara, animasi, video, gambar, form, frame dan lain-lain.
Bab IV
Memformat Dokumen HTML
Dokumen HTML yang telah kita buat dan kita letakkan di blok BODY, dapat kita format sesuai keinginan dengan meletakkan tag-tag yang sesuai. Berikut dijelaskan masing-masing tag yang dapat digunakan untuk memformat tampilan dokumen HTML di browser. Perlu diingat bahwa browser yang digunakan untuk menampilkan adalah browser setandar komputer seperti Internet Explorer, Mozila Firefox, Opera dan lain-lain, bukan browser sederhana yang terdapat di PDA atau handphone.
4.1 Heading
Heading digunakan untuk membuat judul dalam dokumen HTML. Kita bisa memilih ukuran huruf dan posisinya. Ukuran huruf yang ditawarkan adalah ukuran 1 sampai dengan 6. Ukuran 1 adalah ukuran yang paling besar, ukuran 6 adalah ukuran yang paling kecil. Format penulisanya adalah sebagai berikut.
<h1> … </h1>
<h2> … </h2>
<h3> … </h3> <h4> … </h4>
<h5> … </h5>
<h6> … </h6>
Heading mempunyai atribut align yang bisa kita gunakan untuk menentukan rata kiri, rata tengah atau rata kanan. Berikut adalah format penulisanya.
<h1 align =”..”> .. </h1>
<h2 align =”..”> .. </h2>
<h3 align =”..”> .. </h3>
<h4 align =”..”> .. </h4>
<h5 align =”..”> .. </h5>
<h6 align =”..”> .. </h6>
Keterangan:
Align bisa diisi dengan:
○ right
○ center
○ left
☼ Apabila align tidak disertakan, maka secara default heading akan rata kiri (left).
Berikut adalah contoh penggunaan fungsi heading.
<html>
<body>
<h1 align=”center”> Halu, aku judul paling besar!!.. </h1>
</body>
</head>
4.2 Paragraf
Untuk membuat paragraf baru, tag yang digunakan adalah <P>. Tag <P> bisa digunakan secara tunggal ataupun berpasangan. Yang mana, kita bisa menuliskan tag tersebut satu saja yaitu <P> atau berpasangan yaitu <P> …</P>. Tentu saja, bila kita ingin segera mengakhiri paragraf untuk membentuk baris baru, kita harus mengakhirinya dengan tag penutup. Berikut adalah format penulisan format paragraf.
<P> … </P>
Atau bisa juga cukup dengan <P> …
Format penulisan paragraf yang lebih lengkap adalah sebagai berikut:
<P ALIGN=”..”> … </P>
Keterangan:
Align digunakan untuk menentukan posisi paragraf yang dibuat. Posisi yang bisa dipilih adalah sebagai berikut:
○ right
○ center
○ left
4.3 Baris Baru / Line Break
Garis baru dalam HTML bisa kita buat dengan menuliskan tag <BR>. Tag <BR> adalah tag tunggal sehingga kita tidak perlu menutupnya di akhir sesi. Fungsi dari tag <P> dan tag <BR> mempunyai sedikit kemiripan. Keduanya akan membentuk baris baru, namun pada <P> sebelum baris baru tersebut selalu disertakan dengan baris kosong, sedangkan <BR> tidak menyertakan baris kosong.
4.4 Garis Horisontal / Horisontal Rule
Garis horisontal bisa dibentuk dengan tag <HR>. Tag <HR> adalah tag tunggal, sehingga kita tidak perlu menutup tag tersebut diakhir sesi. Tag <HR> akan membentuk garis horisontal sepanjang browser. Namun dengan berbagai atribut tambahan, kita bisa mengatur garis horisontal tersebut sesuai kebutuhan.
Penulisan tag <HR> yang sederhana adalah sebagai berikut:
<HR>
Keterangan: Tag ini akan membentuk garis horisontal sepanjang browser.
Penulisan tag <HR> yang lebih lengkap adalah sebagai berikut:
<HR ALIGN=”..” SIZE=”..” WIDTH=”..” COLOR=”..”>
Berikut adalah contoh penggunaan tag <HR>.
<html>
<body>
<hr size=”6″ width=”50″ align=”left” color=”green”>
</body>
</html>
4.5 Spasi
Membuat spasi yang lebih dari satu spasi di dokumen HTML tidak semudah kita menspasi tag atau dokumen yang kita ketik. Kalaupun kita sudah memberi spasi panjang dari dokumen yang kita ketik, tetap saja browser mengabaikan dan hanya memberi satu spasi. Untuk memberi spasi yang lebih dari satu berturut-turut atau spasi panjang dari dokumen HTML kita, kita bisa menggunakan teknik yang berlaku sekarang. Pada mulanya, untuk memberi sapsi ganda kita bisa menggunakan tag <spacer type=”..” size=”..”>, namun itu hanya berlaku untuk browser Netscape dan itupun sekarang sudah tidak berlaku. Untuk membuat spasi ganda, kita bisa menggunakan tag atau keyword sebagai berikut:
Penggunaan tag tersebut adalah sebagai berikut. Bila kita membuat satu spasi, kita cukup menspasi langsung dengan menekan tombol spasi di keyboard. Bila kita membutuhkan dua spasi, maka kita bisa menspasi dengan satu spasi dengan menekan keyboard dan spasi yang satunya lagi dengan satu tag diatas. Bila kita ingin dokumen HTML kita mempunyai 3 spasi berturut-turut, maka kita bisa membuat spasi yang pertama dengan menekan tombol spasi di keyboard dan spasi kedua dan ketiga dengan mengetikkan tag dua kali. Begitu juga seterusnya jika kita ingin membuat spasi yang panjang, kita bisa menggunakan cara di atas.
4.6 Format Font
Dalam membuat dokumen teks, kita selalu memerlukan pemformatan teks yang kita buat tersebut agar menjadi indah, mudah di baca dan sesuai kebutuhan. Untuk memformat teks atau font yang kita ketik, kita bisa menggunakan tag <FONT> dan memformatnya dengan berbagai atribut yang didukung oleh tag tersebut. Tag <FONT> adalah tag berpasangan sehingga kita harus menutupnya dengan tag penutup tersebut </FONT>. Bila tidak kita tutup, browser akan mengabaikan tag kita tersebut. Berikut adalah format penulisanya.
<FONT> … </FONT>
Tag <FONT> bisa kita tambahi dengan beberapa atribut yang didukungnya, diantaranya atribut size yang digunakan untuk menentukan ukuran font, atribut face yang digunakan untuk menentukan jenis font, dan atribut color untuk menentukan warna dari font yang kita ketik. Berbagai atribut tersebut bisa kita gunakan beberapa atau semuanya. Format penulisanya adalah sebagai berikut.
<FONT SIZE=”..” FACE=”..” COLOR=”..”> … </FONT>
Keterangan: □ SIZE, digunakan untuk menentukan ukuran sebuah teks dengan ukuran 1 sampai dengan 7. Ukuran 1 untuk menampilkan teks paling kecil, ukuran 7 untuk menampilkan teks paling besar.
□ FACE digunakan untuk menentukan jenis font / huruf dari dokumen HTML Anda di browser.
□ COLOR digunakan untuk menentukan warna dari font / huruf dokumen HTML. Ada dua cara memberi nilai pada atribut COLOR ini, yaitu dengan menunjuk langsung nama warna yang di maksud dalam bahasa Inggris, atau bisa juga dengan kumpulan warna RGB. Jika menggunakan RGB, nilai yang diberikan harus selalu diawali dengan tanda pagar (#).
Berikut adalah contoh penggunaan tag <FONT>.
<html>
<body>
<font size=”6″ face=”arial” color=”blue”>Halu super tohari!!, aku memanggil kamu…</font>
<br>
<font size=”5″ face=”times new roman” color=”#99CC77″>Hai cewek, nama km sapa?? Kenalan yuuk..</font>
</body>
</html>
4.7 Memodifikasi Font
Teks yang kita ketik bisa kita modifikasi perwajahanya dengan tag-tag yang dimiliki oleh HTML. Berbagai modifikasi yang dilakukan untuk memanipulasi tampilan font cukup dengan tag-tag yang digolongkan dengan tag fisik sebagai berikut.
Tag Keterangan
<B> … </B> Membuat huruf tebal
<U> … </U> Membuat teks dengan garis bawah
<I> … </I> Membuat teks miring / italic
<S> … </S> Membuat teks yang ada coretan ditengahnya
<STRIKE> … </STRIKE> Membuat teks yang tercoret
<TT> … </TT> Membuat teks seperti diketik di mesin ketik tradisional
<SUB> … </SUB> Membuat teks subskript
<SUP> … </SUP> Membuat teks superskript
<SMALL> … </SMALL> Membuat teks cetak kecil
<BIG> … </BIG> Membuat teks cetak besar
<BLINK> … </BLINK> Membuat teks berkedip-kedip – Berlaku untuk browser Mozilla Firefox dan Opera – Tidak berlaku pada browser Internet Explorer, untuk browser lain penulis belum mencobanya.
4.8 Background
Pada tulisan sebelumnya telah dijelaskan bahwa dokumen HTML yang di tampilkan di jendela browser adalah dokumen yang terdapat di blok BODY. Pada tag <BODY>, kita bisa menambahkan atribut untuk menentukan background / latar belakang dari dokumen kita. Ada dua pilihan untuk menentukan background, yaitu dengan gambar atau hanya dengan warna. Bila kita menentukan background dengan gambar, kita harus terlebih dahulu menyiapkan file gambar yang akan kita jadikan latar belakang. File gambar yang dapat dijadikan latar belakang diantaranya adalah JPG, BMP dan GIF. Bila kita hanya ingin latar belakang dokumen HTML kita berupa warna, kita bisa memberi nilai warna yang kita maksud dengan menunjuk nama warnanya dalam bahasa Inggris atau dengan kode RGB. Berikut adalah format penulisanya.
Format penulisan background dengan gambar.
<BODY BACKGROUND=” … “> … </BODY>
Berikut adalah contoh dokumen HTML yang menggunakan background / latar belakang gambar dengan nama file Mawar_merah.jpg.
<html>
<body background=”Mawar_merah.jpg”>
Halu temen2, aku punya latar belakang bunga cantik…
</body>
</html>
Berikut ini adalah format penulisan background dengan warna.
<BODY BGCOLOR=” … “> … </BODY>
Untuk menentukan warna, kita bisa memberi nilai dengan nama warna langsung, misalnya green, yellow, blue, red dan lain-lain. Selain itu, kita juga bisa memberi nilai dengan kumpulan warna RGB. Untuk memberi warna dengan RGB, kita diharuskan mengawali niali RGB tersebut dengan tanda pagar (#).
Berikut adalah teknis dari warna RGB.
R G B
xx xx xx
xx adalah nilai dari hexadesimal. Yang mana kita bisa mengisi dari 00 sampai 99 dan dari AA sampai FF
Contoh:
Nama warna Kode RGB
Hitam #000000
Aqua #00FFFF
Biru #0000FF
Lime #00FF00
Maroon #800000
Fichsia #FF00FF
Abu-abu #808080
Nama warna Kode RGB
Putih #FFFFFF
Hijau #008000
Navy #000080
Olive #808000
Purple #800080
Merah #FF0000
Kuning #FFFF00
Berikut adalah contoh dokumen HTML yang menggunakan latar belakang warna yang ditentukan dengan menyebut langsung warnanya.
<html>
<body bgcolor=”green”>
Hai,aku hijau, cool nich..
</body>
</html>
Berikut ini adalah contoh dokumen HTML yang menggunakan latar belakang warna yang ditentukan dengan menggunakan warna RGB.
<html>
<body bgcolor=”#AABBCC”>
Aku warna biru agak kelabu nich..
</body>
</html>
4.9 Preformated
Dalam tulisan sebelumnya telah dijelaskan bahwa browser akan mengabaikan spasi yang panjang dan hanya di baca satu spasi, mengabaikan baris baru atau enter dan juga mengabaikan tab. Walaupun browser mengabaikan itu semua, kita masih bisa menampilkan dokumen HTML kita sesuai format dan bentuk ketika kita membuatnya di editor. Kita bisa menggunakan tag <PRE> untuk keperluan ini. Tag <PRE> adalah tag yang berpasangan sehingga kita harus menutupnya dengan </PRE> di akhir dokumen yang kita format sesuai dengan editornya tersebut. Berikut adalah format penulisanya.
<PRE> … </PRE>
Berikut adalah contoh dokumen HTML yang menggunakan tag <PRE>.
<html>
<body>
<pre>
I0000000I |B|B|B|B|B|B|B|
I0 0I I8I
I0 0I I8I http://www.tohari.cjb.net
I0IIIII0I I8I
I0 0I I8I Ahmad Thohari 2009
II0I I0II II8II
</pre>
</body>
</html>
Tampilan di browser:
Pada contoh tersebut apa yang diketikkan di editor, dalam blok body yang terdapat di blok <pre> … </pre>, akan ditampilkan di browser sama persis dengan yang di lihat di editor. Salah satu kelemahan dari tag <pre> adalah huruf yang digunakan adalah huruf standar, kita tidak bisa memilih huruf yang kita inginkan.
4.10 Karakter Khusus
Dalam dunia matematika (yang mana ini adalah jurusan kuliah penulis, yaitu Pendidikan Matematika Universitas Negeri Malang), banyak sekali dijumpai karakter khusus yang tidak terdapat di keyboard. Bila kita ingin mengetikkan simbol khusus misalnya dalam rumus, kita harus menggunakan kode yang sudah ditetapkan oleh W3C. Berikut adalah tabel beberapa simbol khusus yang paling sering digunakan yang saya ambil dari buku SAMS Teach Yourself HTML and CSS in 24 Hours, SEVENTH EDITION karangan Dick Oliver, Michael Morrison.
Character Numeric Code Code Name Description
” " " Quotation mark
& & & Ampersand
< < < Less than
> > > Greater than
¢ ¢ ¢ Cent sign
£ £ £ Pound sterling
| ¦ ¦or &brkbar; Broken vertical bar
§ § § Section sign
© © © Copyright
® ® ® Registered trademark
° ° ° Degree sign
± ± ± Plus or minus
2 ² ² Superscript two
3 ³ ³ Superscript three
. · · Middle dot
1 ¹ ¹ Superscript one
¼ ¼ ¼ Fraction one-fourth
½ ½ ½ Fraction one-half
¾ ¾ ¾ Fraction three-fourths
Æ Æ Æ Capital AE ligature
æ æ æ Small ae ligature
É É É Accented capital E
é é é Accented small e
x × × Multiplication sign
÷ ÷ ÷ Division sign
Perhatikan contoh penggunaanya berikut ini.
Kita ingin mengetikkan berikut ini di dokumen HTML:
Copyright © Tohari 2009 & Copyleft and Registered ® Super Tohari 2009
Maka dalam mengetikkanya di HTML adalah sebagai berikut.
<html>
<body>
Copyright © Tohari 2009 & Copyleft and Registered ® Super Tohari 2009
</body>
</html>
Tampilan di browser:
4.11 Membuat Daftar / List
Dalam dokumen HTML kita bisa membuat daftar atau list dengan lima macam cara. Lima macam cara itu adalah: Unordered list, ordered list, definition list, directory list, dan menu list. Berikut dijelaskan masing-masing dari daftar-daftar tersebut.
4.11.1Unordered List
Unordered list adalah bulet yang mana bulet adalah suatu karakter tertentu, berupa sebuah tanda. Tanda tersebut bisa berupa apa saja, bisa berbentuk lingkaran, kotak, wajik, kaper, daun waru dan sebagainya. Daftar dengan bulet bisa dibuat dengan tag <UL> (unordered list) untuk pembukanya dan </UL> untuk penutupnya. Setiap item di dalam list harus didahului dengan tag <LI> (list item). <LI> adalah tag tunggal sehingga tidak memerlukan penutup, tetapi seandainya diberi penutup juga tidak masalah. Berikut adalah format penulisanya.
<UL TYPE=” …”>
<LI> … </LI>
<LI> … </LI>
…
</UL>
Type yang bisa digunakan diantaranya:
disk, circle, square
Berikut adalah contoh penggunaan unordered list.
<html>
<body>
Daftar materi kuliah Desain Web
<ul type=”circle”>
<li>Pengenalan HTML</li>
<li>Memakai Xara Webstyle</li>
<li>Menggunakan Swishmax</li>
<li>Memakai Frontpage</li>
<li>lain-lain</li>
</ul>
</body>
</html>
4.11.2 Ordered List
Daftar dengan model ordered list adalah daftar dengan tiap itemnya disertai dengan nomor urut. Berikut adalah format penulisanya.
<OL TYPE= …>
<LI> … </LI>
<LI> … </LI>
…
</OL>
Type yang bisa digunakan diantaranya:
1,2,3 → Nomor urut (default)
A,B,C → Huruf kapital
a,b,c → Huruf kecil
i,ii,iii → Romawi kecil
I,II,III → Romawi besar
Berikut adalah contoh penggunaan ordered list
<html>
<body>
Daftar software untuk membuat software:
<ol type=a>
<li>Visual C++</li>
<li>Visual Basic</li>
<li>Visual C#</li>
<li>Borland Delphi</li>
<li>Gambas</li>
<li>Kylik</li>
<li>J2ME Builder</li>
<li>Borland C++</li>
<li>Lain-lain</li>
</ol>
</body>
</html>
4.12 Menampilkan Gambar
Halaman web yang kita buat dapat kita sisipi gambar untuk berbagai keperluan. Diantaranya untuk memeperindah tampilan, atau memang gambar tersebut perlu ditampilkan. Untuk menampilkan gambar di halaman web dalam dokumen HTML berikut pertimbanganya.
► Format gambar yang bisa digunakan diantaranya JPG, GIF, BMP, PNG.
► Ukuran file sebaiknya tidak terlalu besar. Saran yaitu ukurannya tidak lebih dari 100Kb.
► Bila ukuran gambar cukup besar, sebaiknya gambar dipotong dengan ukuran yang kecil-kecil untuk mempercepat waktu loading.
Berikut adalah format penulisan untuk menampilkan gambar di halaman web.
<IMG BORDER=”..” SRC=”..” WIDTH=”..” HEIGHT=”..” ALT=”..”>
Keterangan: SRC → Digunakan untuk menunjuk path dan nama file gambar.
ALT → Digunakan untuk memberi tulisan ketika gambar tidak berhasil dimuat.
WIDTH → Digunakan untuk menentukan lebar gambar, dalam satuan piksel.
HIGHT → Digunakan untuk menentukan tinggi gambar dalam satuan piksel.
Berikut adalah contoh penggunaan tag IMG untuk menampilkan gambar.
<html>
<body>
<img border=”0″ src=”tohari.jpg” width=”720″ height=”480″ alt=”hai, ini dia foto tohari, gambar belum berhasil dimuat”>
</body>
</html>
Tampilan di browser:
4.13 Hiperlink
Salah satu kelebihan dokumen HTML dibanding dokumen lainya adalah adanya hiperlink. Dengan hiperlink kita bisa menuju dari dokumen 1 ke dokumen lainya cukup dengan menunjuk link tersebut. Tag yang digunakan untuk membuat hiperlink adalah <A HREF=..> dan diakhiri dengan </A>. Berikut adalah format penulisanya.
<A HREF=”…” TARGET=”…”> … </A>
Keterangan: <A>…</A> → Menunjuk pada sesuatu yang bisa diklik untuk menuju link yang dimaksud
HREF → Hypertext REFerence, yaitu untuk menuju alamat / URL yang dimaksud.
TARGET → Digunakan untuk menentukan apakah link dibuka di jendela di mana link di klik ataukan dibuka di jendela baru.
_BLANK = Link dibuka dijendela baru
_PARENT = Link dibuka di jendela tempat link diklik
_SELF = Menampilkan link target pada frame yang sama
_TOP = Link dibuka di jendela tempat link di klik
Berikut adalah contoh penggunaan hiperlink dalam dokumen HTML.
<html>
<body>
<a href=”http://www.tohari.cjb.net” target=”_blank”> official website </a>
</body>
</html>
4.14 Membuat Tabel
Membuat table di HTML cukup mudah, Anda hanya memerlukan tiga buah tag yang berpasangan, artinya tiap-tiap tag memerlukan tag pembuka dan tag penutup. Tag- tag tersebut yaitu <TABLE>, <TR>, dan <TD>. Berikut adalah format penulisanya.
<TABLE>
<TR>
<TD> … </TD>
<TD> … </TD>
…
</TR>
</TABLE>
Keterangan:
<TR> adalah Table Row yaitu untuk membuat baris.
<TD> adalah Table Data yaitu untuk membuat kolom.
Selain penulisan seperti di atas, tag <TABLE> juga bisa ditambahi dengan beberapa atribut seperti berikut ini.
<TABLE BORDER=”..” WIDTH=”..” HEIGHT=”..” BACKGROUND=”..”>
<TR>
<TD WIDTH=”..” HEIGHT=”..” BACKGROUND=”..”> … </TD>
<TD WIDTH=”..” HEIGHT=”..” BACKGROUND=”..”> … </TD>
…
</TR>
</TABLE>
Selain tambahan beberapa atribut di atas, masih ada beberapa atribut lain yang didukung oleh tag <TABLE>. Cara penggunaan beberapa atribut lainya adalah sama dengan beberapa atribut di atas. Beberapa atribut tersebut adalah:
Atribut Keterangan
ROWSPAN Menggabungkan beberapa baris menjadi satu
COLSPAN Menggabungkan beberapa kolom menjadi satu.
CELLSPASING Mengatur spasi antara kolom dan tabel
CELLPADDING Mengatur teks dengan batas dalam
ALIGN Mengatur perataan dalam tabel secara horisontal
VALIGN Mengatur perataan dalam tabel secara vertikal
BGCOLOR Mengatur latar belakang tabel
NOWRAP Membuat isi dalam tabel memanjang dalam satu baris
Berikut adalah contoh penggunaan tabel.
<html>
<body>
Jadwal kegiatan Ahmad Thohari hari Minggu
<table>
<tr><td>Jam</td><td>Kegiatan</td></tr>
<tr><td>07.00</td><td> Bangun pagi terus sarapan </td></tr>
<tr><td>08.00</td><td> Mandi di kamar mandi </td></tr>
<tr><td>09.00</td><td> Membantu orang tua </td></tr>
<tr><td>10.00</td><td> Nonton TV </td></tr>
<tr><td>20.00</td><td> Belajar malam </td></tr>
</table>
</body>
</html>
4.15 Membuat Frame
Frame adalah salah satu kemampuan HTML untuk membagi jendela browser menjadi beberapa bagian. Walaupun konsep frame dapat membagi jendela browser menjadi bagian-bagian kecil yang banyak, dalam praktek kebanyakan frame hanya digunakan untuk membagi layar menjadi 2 atau 3 bagian. Sebab bila kita membagi dengan frame yang terlalu banyak, hal itu bisa membuat kita binggung dan juga pengunjung pun pada akhirnya juga ikut bingung.
Membuat frame di HTML berarti kita harus mempunyai lebih dari satu dokumen yang ditampilkan dalam satu layar. Satu dokumen untuk membagi layar, sedangkan dokumen lainya untuk isi dari jendela yang kita bagi tersebut.
Berikut adalah format penulisan frame yang paling dasar.
<HTML>
<FRAMESET ROWS=”..” COLS=”..”>
<FRAMENAME=”..” SRC=”..”>
<FRAMENAME=”..” SRC=”..”>
…
</FRAMESET>
</HTML>
Keterangan:
ROWS dan COLS bisa kita beri nilai dengan prosentase (%).
☼ Catatan: Tag <BODY> harus kita hilangkan bila kita membuat frame.
Berikut ini adalah contoh penggunaan frame dengan membagi jendela browser menjadi 2 bagian secara horisontal.
<html>
<frameset rows=”*,80%”>
<frame name=”atas” src=”atas.htm”>
<frame name=”bawah” src=”bawah.htm”>
</frameset>
</html>
4.15.1 Membagi Frame Menjadi Beberapa Baris
Frame dapat kita bagi menjadi beberapa baris seperti berikut ini.
<HTML>
<FRAMESET ROWS=”..”>
<FRAME NAME=”..”>
<FRAME NAME=”..”>
…
</FRAMESET>
</HTML>
4.15.2 Membagi Frame Menjadi Kolom
Frame dapat kita bagi menjadi beberapa kolom seperti berikut ini.
<HTML>
<FRAMESET COLS=”..”>
<FRAME NAME=”..”>
<FRAME NAME=”..”>
…
</FRAMESET>
</HTML>
4.15.3 Membagi Frame Menjadi Baris dan Kolom
Frame dapat kita bagi menjadi beberapa baris dan kolom seperti berikut ini.
<HTML>
<FRAMESET ROWS=”..” COLS=”..”>
<FRAME NAME=”..”>
<FRAME NAME=”..”>
…
</FRAMESET>
</HTML>
Berikut ini adalah contoh penggunaan frame dengan membagi jendela menjadi 4 bagian, yaitu secara vertikal dan secara horisontal.
<html>
<frameset rows=”10%,*” cols=”20%,*”>
<frame name=”atas_kiri” src=”atas_kiri.htm”>
<frame name=”atas_kanan” src=”atas_kanan.htm”>
<frame name=”bawah_kiri” src=”bawah_kiri.htm”>
<frame name=”bawah_kanan” src=”bawah_kanan.htm”>
</frameset>
</html>
4.15.4 Mengatur Border dan Scrolling pada Frame
Halaman HTML yang lebar atau tinggi yang lebar atau tingginya melebihi jendela bowser akan ditampilkan dengan layar penggulung (scrollbar). Hal ini adalah pengaturan setandar bila kita tidak menambahkan atribut SCROLLING. Untuk mengatur hal tersebut, yang mana kita bisa mengatur apakah scrollbar (penggulung layar) ditampilkan atau tidak kita bisa memformat penulisan frame seperti berikut ini.
<HTML>
<FRAMESET ROWS=”..” COLS=”..” BORDER=”..”>
<FRAME NAME=”..” SRC=”..” SCROLLING=”..”>
<FRAME NAME=”..” SRC=”..” SCROLLING=”..”>
…
</FRAMESET>
</HTML>
Keterangan:
SCROLLING bisa diisi dengan: YES, NO, AUTO.
Bab V
Form
5.0 Form / Formulir
Form pada HTML fungsinya adalah untuk membuat komunikasi dua arah antara Anda sebagai webmaster dan para pengunjung website Anda. Tidak hanya itu form juga bisa dikreasikan untuk berbagai keperluan, misalnya untuk mendukung e-Comerce. Berikut adalah format penulisanya.
<FORM NAME=”..” METHOD=”..” ACTION=”..”>
</FORM>
METHOD bisa diisi dengan:
POST = Mengirimkan data terpisah pada suatu standar input
GET = Browser mengirimkan informasi yang dikumpulkan oleh form sebagai sebuah string yang ditambahkan URL dari halaman yang diminta
5.1 Kontrol-kontrol Form
Seperti layaknya bahasa pemrograman tingkat tinggi, seperti Visual Basic, Visual C++, Delphi dan lain-lain yang mereka sudah terdapat kontrol-kontrol input, HTML juga mempunyai fasilitas tersebut. Berikut adalah fasilitas kontrol-kontrol yang dimiliki HTML.
5.2 Text Box / Form Input Tipe Teks
Text box fungsinya untuk mengumpulkan informasi string yang tidak terlalu panjang, seperti nama, alamat, dan lain-lain. Berikut adalah format penulisanya.
<INPUT TYPE=”TEXT” NAME=”..” SIZE=”..” MAXLENGTH=”..”>
Keterangan: NAME diisi dengan nama text box kita.
SIZE diisi dengan panjang text box yang kita inginkan.
MAXLENGTH diisi dengan panjang maksimal karakter yang dibolehkan dimaksukkan dalam text box.
Berikut adalah contoh penggunakan input type teks.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Nama: <input type=”text” name=”teks” size=”20″ maxlength=”15″>
</pre>
</body>
</html>
5.3 Submit, Button and Reset
Submit dan reset adalah tombol dalam HTML yang digunakan untuk memproses input yang telah dimasukkan ke dalam form. Tombol reset untuk membatalkan semua input yang telah diberikan, sedangkan tombol submit untuk memproses input yang telah dimasukkan. Berikut adalah format penulisanya.
<FORM TYPE=”SUBMIT”>
<FORM TYPE=”BUTTON”>
<FORM TYPE=”RESET”>
Pada penulisan di atas tombol akan ditampilkan standar, yaitu tombol bertuliskan submit dan reset. Kita masih bisa menuliskan atribut tambahan seperti berikut ini.
<FORM TYPE=”SUBMIT” NAME=”..” VALUE=”..”>
<FORM TYPE=”BUTTON” NAME=”..” VALUE=”..”>
<FORM TYPE=”RESET” NAME=”..” VALUE=”..”>
5.4 Radio Buttons
Radio button adalah tombol yang memungkinkan kita hanya bisa memilih salah satu dari sejumlah pilihan yang ada. Untuk membuat radio button, berikut adalah format penulisanya.
<INPUT TYPE=”RADIO” NAME=”..” VALUE=”..” CHECKED>
Atribut CHECKED hanya dibolehkan terdapat satu buah pada sekelompok pilihan yang ada. Pada pilihan yang diberi atribut CHECKED menndakan pilihan tersebut merupakan pilihan default. Misalnya semua tidak ada atribibut CHECKED tidak masalah.
Berikut adalah contoh penggunaan radio.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Pilihlah apa software editing video kesukaan kamu!
<input type=”radio” name=”Software” value=”Adobe_Premiere”>Adobe Premiere
<input type=”radio” name=”Software” value=”Adobe_After Effect” checked>Adobe After Effect
<input type=”radio” name=”Software” value=”Ulead_Media_Studio_Pro”>Ulead Media Studio Pro
<input type=”radio” name=”Software” value=”Sony_Vegas”>Sony Vegas
<input type=”radio” name=”Software” value=”Cannopus”>Cannopus
<input type=”radio” name=”Software” value=”Corel_VideoStudio”>Corel VideoStudio
<input type=”radio” name=”Software” value=”Pinnacle”>Pinnacle
<input type=”radio” name=”Software” value=”Combasen”>Combasen
<input type=”radio” name=”Software” value=”Matrox_Studio”>Matrox Studio
</pre>
</body>
</html>
5.5 Check Boxes
Checkbox adalah tombol pilihan yang memungkinkan kita memilih lebih dari satu dari sekelompok pilihan yang ada. Untuk membuat checkbox, berikut adalah format penulisanya.
INPUT TYPE=”CHECKBOX” NAME=”..” VALUE=”..” CHECKED>
Atribut CHECKED bole ada atau tidak. Bila ada menandakan pilihan yang dimaksud secara default terpilih. Bila tidak ada atribut CHECKED berarti pilihan tersebut secara default tidak terpilih.
Berikut adalah contoh penggunaan check box
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Apa yang membuat seorang cewek bisa kelihatan cantik?
<input type=”checkbox” name=”tampang” value=”Wajahnya_cantik” checked>Wajahnya cantik
<input type=”checkbox” name=”tampang” value=”Wajahnya_manis”>Wajahnya manis
<input type=”checkbox” name=”tampang” value=”Baik_hati”>Baik hati
<input type=”checkbox” name=”tampang” value=”Montok”>Montok
<input type=”checkbox” name=”tampang” value=”Semok”>Semok
<input type=”checkbox” name=”tampang” value=”Lainya”>Lainya
</pre>
</body>
</html>
5.6 Password Boxes / Form Input Tipe Pasword
Password boxes adalah kontrol input mirip text box namun huruf yang dimasukkan dirahasiakan oleh browser dengan menampilkanya sebagai bullet, asterik atau lainya. Fungsi dari password box adalah untuk mengumpulkan informasi password dari user yang memasukkan. Berikut adalah format penulisan untuk membuat password boxes.
<INPUT TYPE=”PASSWORD” NAME=”..” SIZE=”..” MAXLENGTH=”..”>
Berikut adalah contoh penggunakan input type password.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Password <input type=”password” name=”kata_kunci” size=”20″ maxlength=”15″>
</pre>
</body>
</html>
5.7 Text Block / Form Area Teks
Text Block Area adalah form input berupa teks atau string yang daerah luasnya bisa kita tentukan. Dengan kontrol ini pengunjung bisa secara leluasa memasukkan input teks karena yang pada umumnya areanya adalah luas. Berikut adalah format penulisan untuk membuat text block area.
<TEXTAREA NAME=”..” COLS=”..” ROWS=”..”>
</TEXTAREA>
Berikut adalah contoh penggunakan input type tekt area.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Komentar:<textarea name=”komentar” cols=”30” rows=”5”>
</textarea>
</pre>
</body>
</html>
5.8 Menu / Tombol Select
Menu adalah kontrol HTML yang memperbolehkan pemakai untuk memilih dari sejumlah pilihan yang telah ditentukan. Berikut adalah format penulisan untuk membuat menu.
<SELECT NAME=”..”>
<OPTION VALUE=”..” SELECTED> .. </OPTION>
<OPTION VALUE=”..”> .. </OPTION>
<OPTION VALUE=”..”> .. </OPTION>
…
</SELECT>
Berikut adalah contoh penggunakaan menu.
<html>
<body>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Bajakan atau legalkah software kamu?
<select name=”legalitas”>
<option value=”Legal” selected>Legal</option>
<option value=”Bajakan”>Bajakan</option>
</select>
</body>
</html>
5.9 Form Input Type Image
Form input type image adalah kontrol dalam HTML yang digunakan untuk memilih gambar. Berikut adalah format penulisanya.
<INPUT TYPE=”IMAGE” NAME=”..” VALUE=”..” SRC=”..” ALT=”..” WIDTH=”..” HEIGHT=”..”>
5.10 Form Input Type File
Form input type file adalah kontrol HTNL yang digunakan untuk memilih file. Berikut adalah format penulisanya.
<INPUT TYPE=”FILE” NAME=”..” SIZE=”..” MAXLENGTH=”..”>
Posted on Oktober 11, 2016 by Handika Budi Prastyo
HTML DAN SKRIP-SKRIP HTML
HTML
1.1 Pendahuluan
HTML adalah singkatan dari HyperText Markup Language. HTML merupakan sebuah file atau dokumen berformat ASCII (American Standard Code for Information Interchange) sehingga dokumen HTML dapat dibuat dan dibaca dengan teks editor biasa. Teks editor yang bisa digunakan bisa bermacam-macam, asalkan dalam menyimpanya disimpan dengan format teks biasa dan dengan ekstensi .htm, .html, .HTM, atau .HTML. Beberapa teks editor yang biasa digunakan diantaranya adalah notepad (teks editor yang terembed di Windows), edit (teks editor mirip notepad di Mac OS), atau apa saja yang bisa digunakan untuk menyimpan dokumen dengan format teks biasa. Semua teks editor tersebut umumnya dapat digunakan untuk membuat dokumen HTML dengan cara mengetikkan langsung tag-tag HTML. Untuk itu, agar dapat membentuk dokumen HTML yang benar, kita harus mengerti tag-tag atau skript-skript yang terdapat di HTML.
Untuk dapat membuat dokumen HTML, selain kita harus mengerti tag atau skript, kita juga dapat menggunakan bantuan software-software pengolah dokumen HTML sehingga kita bisa membuatnya tanpa kita harus mengerti tag-tag HTML. Software-software yang dapat digunakan diantaranya adalah Dreamweaver, yaitu software keluaran Macromedia yang kini telah dibeli oleh Adobe. Sehingga yang dulunya disebut dengan Macromedia Dreamweaver sekarang menjadi Adobe Dreamweaver. Dreamweaver adalah tool atau software untuk mengolah dokumen HTML yang paling populer saat ini. Dengan Dreamweaver, kita bisa membuat dokumen HTML dengan mudah, tanpa kita harus tahu tag-tag yang ada. Dengan Dreamweaver, kita bisa membuat dokument langsung isi dari dokument HTML yang kita maksud, sedangkan sisanya, yaitu tag-tagnya sudah otomatis diketikkan oleh Dreamweaver.
Selain dengan Dreamweaver, kita juga bisa membuat dokumen HTML dengan software lain yang juga lumayan terkenal, yaitu Microsoft Frontpage yang kini telah berganti nama menjadi Microsoft Expression Web. Microsoft frontpage merupakan software untuk mengolah dokumen HTML yang cukup banyak digunakan orang. Walaupun Frontpage juga cukup terkenal, namun dari beberapa artikel, Dreamweaverlah yang paling terkenal dan banyak digunakan para developer web internet. Dengan Frontpage, kita bisa membuat dan mengedit dokumen HTML semudah kita mengedit dokument di Microsoft Word. Kita bisa mengolahnya tanpa kita harus tahu tag-tag yang ada.
Membuat dokumen HTML dengan bantuan software memang cukup mudah dan kita tidak perlu tahu ada apa dibalik dokumen tersebut. Namun demikian, hal ini tidak akan menjadi masalah bila hal ini untuk keperluan hal-hal yang sederhana. Masalah akan muncul bila kita tidak mengerti tag HTML kemudian kita akan melangkah pada hal-hal yang komplek yang berkaitan dengan HTML.
Pengetahuan akan HTML dan beserta skript-skript/ tag yang ada di dalamnya adalah hal mutlak yang harus dikuasai oleh seorang developer web. Seorang developer/ pengembang web harus mengetahui dan menguasai HTML harena tanpa pengetahuan tersebut, ia akan kesulitan bila bahkan tidak bisa bila harus membangun website. Dalam membangun website yang sederhana sekalipun, kita harus mengerti tentang skrip HTML diantanya links. Dalam membangun website yang cukup komplek, HTML adalah skript dasar yang harus dikuasai sebelum menguasai bahasa atau skript lainya. Sebut saja PHP, dalam PHP, format penulisan dalam PHP adalah pengembangan dari HTML. Dalam PHP tersebut masih terdapat beberapa tag HTML walaupun di dalamnya ditambahi keyword lainya.
2.1 Pengertian HTML
HTML (HyperText Markup Language) adalah kumpulan tag dan aturan (pengembangan dari SGML) yang digunakan untuk mengembangkan dokumen hyperteks. Hyperteks sendiri adalah suatu teks yang mempunyai hubungan atau keterkaitan antara satu teks dengan teks lainya yang biasa disebut links. Dengan links, kita bisa menuju dari dokument satu ke dokument lainya dengan menunjuk link tersebut.
2.2 Versi HTML
HTML mengalami beberapa perkembangan, yang dalam perkembanganya yaitu terdapat beberapa tag yang yang diganti dan ditambah. HTML standar adalah HTML versi 2.0 sedangkan versi terbaru ketika makalah ini ditulis (Mei 2009) adalah sudah sampai pada versi 4. Browser web sendiri akan menerjemahkan tag-tag HTML yang diterimanya sebagai HTML standard bila dalam dokumen HTML tersebut tidak terdapat informasi versi. Bila dalam HTML tersebut terdapat informasi versi, maka browser akan menerjemahkan tag-tag yang ada sesuai dengan versi yang diinformasikan.
Walaupun HTML bisa dikatakan dokumen yang cukup standar dan dapat dibuka dengan berbagai browser, baik yang lama ataupun yang baru, HTML versi terbaru yaitu versi 4 hanya akan tampil sempurna pada browser Internet Explorer versi 4 ke atas. Untuk saat ini (Mei 2009), versi Internet Explorer terbaru adalah versi 8 yang dikeluarkan sekitar bulan Maret 2009.
2.3 Menampilkan HTML di Berbagai Browser
HTML dapat ditampilkan di berbagai macam browser yang berbeda. Baik itu browser yang ada di komputer dengan system operasi Windows diantara Internet Explorer, Mozilla Firefox, Netscape Nafigator, Opera, Avant Browser, NeoPlanet atau Safari di komputer Mac Intosh dan bahkan browser sederhana yang terdapat di PDA dan hanphone. Dengan beragamnya browser tersebut, akan memberi kemungkinan tampilan yang berbeda antara satu browser dengan browser lainya. Dengan demikian, belum tentu semua tag HTML akan didukung oleh browser yang ada. Ambil saja satu contoh sederhana dari browser yang sama-sama dari komputer dengan system opersai Windows. Tag <blink>…</blink> akan memberikan efek berkedit dalam browser Mozilla Firefox dan Opera, sedangkan dalam browser Internet Explorer tidak memberikan efek apapun. Dalam Mozilla Firefox dan Opera sendiri yang sama-sama memberikan efek berkedip juga mempunyai perbedaan dalam kedipanya. Kedipan Opera lebih lambat dibanding kedipan Mozilla Firefox.
2.4 Perbedaan Menampilkan HTML di Teks Editor dan di Browser
Dokumen HTML bisa dibuka dengan teks editor (misal notepad) maupun dengan browser (misal Internet Explorer) namun terdapat perbedaan keduanya dalam hal cara membuka. Dalam teks editor, HTML akan dibuka tanpa menerjemahkan tag-tagnya sehingga semua isi beserta tag-tagnya ditampilkan semua. Sedangkan dengan browser, dokumen HTML akan dibuka dengan menterjemahkan tag-tagnya sehingga yang ditampilkan adalah isinya saja sedangkan tag-tagnya digunakan untuk memerintahkan kepada browser bagaimanakan seharusnya isi dokumen tersebut ditampilkan.
2.5 Badan Pengurus Standard HTML
Pada tahun 1994, dibentuk sebuah bada nirlaba yang berfungsi untuk mengurus world wide web (www) yang juga mengurus standard HTML. Badan tersebut adalah World Wide Web Consortium atau W3C (www.w3c.org). Keanggotaan W3C diantaranya adalah lembaga penelitian, institut, perusahaan dan individu-individu di seluruh dunia. Tujuan dibentuknya W3C adalah untuk membentuk standard baku masalah www agar tidak didominasi oleh pihak tertentu. Dengan adanya badan nirlaba ini, semua developer software dan semua pengguna di seluruh dunia harus menyesuaikan softwarenya ataupun skript-skript yang mereka buat sesuai dengan standard yang dibuat dan disetujui bersama di W3C.
2.6 Pengembangan HTML
Saat ini (Mei 2009) HTML sudah pada versi 4, yang mana HTML 4 ini sudah cukup sempurna dan menjadi web paling banyak digunakan di internet. HTML 4 oleh W3C dikembangkan dengan versi lain yang masih mirip dengan HTML namun namanya sudah tidak HTML lagi. W3C memberi nama dengan XHTML yang mana XHTML ini adalah pengembangan dari HTML 4 yang mirip tapi mempunyai beberapa perbedaan.
Beberapa perbedaan XHTML 1.1 dibandingkan dengan HTML 4 adalah sebagai berikut:
• Bagian dan nama atribut harus huruf kecil (<a href=”index.html”>).
• Tag akhir selalu dibutuhkan untuk suatu bagian yang tidak kosong (<p>Halo apa kabar?</p>)
• Suatu bagian kosong harus terdiri dari tag-awal/tag-akhir (<br />).
• Nilai atribut harus selalu dikutip (href=”index.html”).
• Nama atribut tidak dapat digunakan tanpa nilai (ismap=”ismap”).
• Tempat di mana XHTML berada harus dideklarasikan di bagian HTML.
• Bagian head dan body tidak boleh dihilangkan.
• Bagian title harus berada di bagian pertama dari bagian head.
• Dokumen harus mempunyai identitas nama yang tujuanya untuk membedakan halaman satu dengan halaman yang lainya. Nama dokumen yang dipakai tidak dapat digunakan lagi untuk keperluan dalam dokumen XHTML tersebut dengan alasan apapun.
2.7 Ekstensi Dokumen HTML
Dokumen HTML mempunyai beberapa ekstensi yang berbeda, namun walaupun ekstensinya beda tetapi isi dari dokumen tersebut adalah sama. Ekstensi yang bisa dimiliki oleh dokumen HTML adalah *.html, *.htm, *.hta, *.htc. Untuk ekstensi *.html dan *.htm adalah ekstensi dokumen HTML normal yang biasa digunakan sedangkan untuk ekstensi *.hta dan *.htc adalah ekstensi dokumen HTML yang memerintahkan pada browser cara khusus dalam membuka dokumen tersebut. Cara khusus tersebut diantara, apakah dokumen tersebut harus dibuka secara fullscreen dan sebagainya tergantung browser yang digunakan.
Ekstensi *.html dan *.htm adalah sama, lantas mengapa kalau sama harus ada dua macam ekstensi? Pada mulanya, ekstensi *.html adalah ekstensi dokumen HTML untuk system operasi UNIX dan Windows 95, sedangkan ekstensi *.htm adalah ekstensi dokumen HTML untuk system operasi DOS dan Windows 3.x. Seiring dengan perkembangan system operasi yang kian maju, kini ekstensi *.html dan *.htm sudah tidak dipermasalahkan lagi.
2.8 Sekuritas Dokumen HTML
Perkembangan dunia komputer yang kian maju, membuat berbagai aspek yang menyertainya juga ikut kian maju. Salah satunya adalah virus komputer. Berbagai dokumen bisa dengan mudah diinfeksi oleh virus komputer. Dokumen file seperti file doc, exe, mp3, dan lain-lain adalah dokumen yang sudah bisa terinfeksi virus. Apakah dokumen HTML juga bisa terinfeksi virus? Sampai dengan makalah ini ditulis, dokumen HTML yang masih murni belum bisa terinfeksi oleh virus sehingga bisa menularkanya ke dokumen lain. Dokumen HTML yang masih murni adalah dokumen HTML yang belum disisipi dengan skript-skript di luar tag HTML.
2.9 Jenis File Dokumen HTML
File dokumen HTML adalah file yang menggunakan format ASCII. Ciri khas dokumen yang menggunakan format ASCII adalah dokumen tersebut bisa dibuka dengan teks editor biasa seperti notepad.
Bab III
Skript HTML
3.1 Tag / Sript HTML
Salah satu ciri dokumen HTML adalah adanya tag-tag. Tag-tag tersebut fungsinya adalah memberi instruksi kepada browser bagaimanakah seharusnya isi dari dokumen tersebut ditampilkan. Baik itu dalam menampilkan teks, gambar, animasi dan sebagainya.
3.2 Aturan-aturan Dasar Tag / Skript HTML
Penulisan tag HTML harus mengikuti aturan yang ada. Jika penulisan tag keliru atau tidak mengikuti aturan, maka browser akan mengabaikan tag tersebut. Berikut adalah beberapa aturan dasar dalam menuliskan tag HTML:
• Setiap tag HTML harus diapit oleh tanda lebih kecil dan tanda lebih besar atau tanda kurung siku miring. < … >.
• Penulisan tag tidak case sensitive yang artinya penulisan dengan huruf kecil dan huruf besar adalah sama.
• Tag HTML ada yang tunggal dan ada yang berpasangan. Untuk tag yang berpasangan, tag pembuka dan tag penutup harus selalu ada, bila hanya terdapat salah satu saja, maka browser tidak akan memprosesnya.
• Spasi dan baris baru yang terdapat di dalam tag akan diabaikan oleh browser.
• Semua dokumen HTML harus disimpan sebagai teks murni, yaitu dokumen yang menggunakan format ASCII. Jenis ekstensi yang digunakan bisa htm dan html.
3.3 Struktur Dokumen HTML
Dalam dokumen HTML, terdapat tiga buah tag utama. Tag tersebut diantaranya adalah HTML, HEAD dan BODY. Ketiga tag inilah yang membentuk dokumen HTML. Berikut adalah penjelasan singkatnya:
• Tag HTML berfungsi untuk memberikan pengenal pada dokumen tersebut. Tag HTML ini adalah tag yang harus ada dalam setiap dokumen HTML.
• Tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML tersebut, misalnya informasi judul.
• Tag BODY berfungsi untuk menyimpan berbagai informasi atau data-data yang akan ditampilkan di browser.
3.4 Membuat Dokumen HTML
Kita bisa membuat dokumen HTML hanya dengan skrip sederhana atau dengan skrip yang komplek. Berikut ini adalah penjelasananya masing-masing.
3.4.1 Paling Sederhana
Membuat dokumen HTML paling sederhana adalah dengan hanya menggunakan tag HTML seperti berikut.
<HTML> … </HTML>
Berikut adalah contohnya.
<HTML>
Halo… perkenalkan, saya adalah dokumen HTML…
</HTML>
Tag HTML adalah tag yang berpasangan. Kita harus mengawali dengan tag pembuka di awal dokumen yaitu <HTML> dan mengakhiri dengan </HTML> di akhir dokumen.
3.4.4 Lebih Lengkap
Selain hanya dengan cara paling sederhana, kita juga bisa membuat dokumen HTML dengan cara yang lebih lengkap berikut.
<HTML>
<HEAD> .. </HEAD>
<BODY>
..
</BODY>
</HTML>
3.5 Blok HEAD
Blok HEAD adalah daerah pada dokumen HTML yang digunakan untuk menyimpan informasi tentang dokumen HTML tersebut. Tag yang dapat disertakan dalam blok HEAD adalah TITLE, BASE, ISINDEX, META, NEXTID, STYLE, dan LINK.
3.5.1 TITLE
<TITLE> ..</TITLE> adalah tag yang digunakan untuk membuat judul dokumen HTML. Tag ini hanya boleh berada di dalam blok HEAD yang merupakan bagian untuk menaruh informasi dari dokumen HTML tersebut. Teks di dalam blok TITLE merupakan nama default jika kita ingin menyimpan dokumen HTML yang telah kita buka dengan browser. Berikut adalah cara penulisan TITLE.
<HEAD>
<TITLE> Judul Dokumen HTML </TITLE>
</HEAD>
Berikut ini adalah poin-poin yang harus diketahui untuk membuat judul dokumen HTML:
• Tag TITLE hanya boleh berada di dalam blok/bagian HEAD.
• TITLE bukan merupakan bagian isi dari dokumen, TITLE hanya sebagai bagian informasi dari dokumen, sehingga tidak boleh ada tag lain di blok TITLE. Di dalam Blok TITLE hanya boleh terdapat teks biasa.
• TITLE tidak ditampilkan di jendela browser, namun TITLE akan ditampilkan di title bar jendela browser seperti gambar berikut.
• Judul dibatasi sampai 64 karakter. Apabila judul yang dibuat melebihi 64 karakter, judul tersebut oleh browser akan dipotong pada 64 karakter pertama.
• Judul dapat dijadikan bookmark dalam browser.
3.5.2 META
<META> ..</META> adalah tag HTML yang digunakan untuk menspesifikasikan informasi dari suatu dokumen yang tidak terkait dengan <BODY>. META Banyak digunakan untuk mendeskripsikan dokumen yang isinya adalah keyword untuk menemukan dokumen tersebut. Kebanyakan mesin pencari / search engine menggunakan informasi yang terdapat dalam META untuk mengindeks dokumen tersebut dalam database mereka. Entah mesin pencari terkenal seperti Google menggunakan META atau tidak penulis kurang tahu, itu adalah rahasia dari pihak Google. Yang jelas META dalam kebanyakan kegunaanya adalah digunakan untuk mengindeks dan memberi informasi pada mesin pencari. Format dan letak penulisan META adalah sebagai berikut.
<HEAD>
<TITLE> … </TITLE>
<META NAME =”…” CONTENT =” … “>
</HEAD>
Berikut adalah contoh penggunaan META.
<head>
<title>Tohari sang programmer…</title>
<meta name=”description” content=”Ahmad Tohari adalah programmer VB cap ikan teri, cap uget-uget..”/>
<meta name=”keywords” content=”programmer, visual basic, ahmad tohari”/>
</head>
3.6 Blok BODY
Blok BODY adalah blok atau daerah di mana isi dari dokumen HTML di tempatkan. Pada daerah BODY inilah yang pada nantinya ditampilkan pada halaman browser. Pada bagian BODY ini pula sebagian besar dokumen HTML berada. Pada bagian sebelumnya, yaitu pada bagian HEAD kita hanya bisa menempatkan dokumen teks, tidak demikian pada bagian BODY. Pada bagian BODY ini kita bisa menempatkan suara, animasi, video, gambar, form, frame dan lain-lain.
Bab IV
Memformat Dokumen HTML
Dokumen HTML yang telah kita buat dan kita letakkan di blok BODY, dapat kita format sesuai keinginan dengan meletakkan tag-tag yang sesuai. Berikut dijelaskan masing-masing tag yang dapat digunakan untuk memformat tampilan dokumen HTML di browser. Perlu diingat bahwa browser yang digunakan untuk menampilkan adalah browser setandar komputer seperti Internet Explorer, Mozila Firefox, Opera dan lain-lain, bukan browser sederhana yang terdapat di PDA atau handphone.
4.1 Heading
Heading digunakan untuk membuat judul dalam dokumen HTML. Kita bisa memilih ukuran huruf dan posisinya. Ukuran huruf yang ditawarkan adalah ukuran 1 sampai dengan 6. Ukuran 1 adalah ukuran yang paling besar, ukuran 6 adalah ukuran yang paling kecil. Format penulisanya adalah sebagai berikut.
<h1> … </h1>
<h2> … </h2>
<h3> … </h3> <h4> … </h4>
<h5> … </h5>
<h6> … </h6>
Heading mempunyai atribut align yang bisa kita gunakan untuk menentukan rata kiri, rata tengah atau rata kanan. Berikut adalah format penulisanya.
<h1 align =”..”> .. </h1>
<h2 align =”..”> .. </h2>
<h3 align =”..”> .. </h3>
<h4 align =”..”> .. </h4>
<h5 align =”..”> .. </h5>
<h6 align =”..”> .. </h6>
Keterangan:
Align bisa diisi dengan:
○ right
○ center
○ left
☼ Apabila align tidak disertakan, maka secara default heading akan rata kiri (left).
Berikut adalah contoh penggunaan fungsi heading.
<html>
<body>
<h1 align=”center”> Halu, aku judul paling besar!!.. </h1>
</body>
</head>
4.2 Paragraf
Untuk membuat paragraf baru, tag yang digunakan adalah <P>. Tag <P> bisa digunakan secara tunggal ataupun berpasangan. Yang mana, kita bisa menuliskan tag tersebut satu saja yaitu <P> atau berpasangan yaitu <P> …</P>. Tentu saja, bila kita ingin segera mengakhiri paragraf untuk membentuk baris baru, kita harus mengakhirinya dengan tag penutup. Berikut adalah format penulisan format paragraf.
<P> … </P>
Atau bisa juga cukup dengan <P> …
Format penulisan paragraf yang lebih lengkap adalah sebagai berikut:
<P ALIGN=”..”> … </P>
Keterangan:
Align digunakan untuk menentukan posisi paragraf yang dibuat. Posisi yang bisa dipilih adalah sebagai berikut:
○ right
○ center
○ left
4.3 Baris Baru / Line Break
Garis baru dalam HTML bisa kita buat dengan menuliskan tag <BR>. Tag <BR> adalah tag tunggal sehingga kita tidak perlu menutupnya di akhir sesi. Fungsi dari tag <P> dan tag <BR> mempunyai sedikit kemiripan. Keduanya akan membentuk baris baru, namun pada <P> sebelum baris baru tersebut selalu disertakan dengan baris kosong, sedangkan <BR> tidak menyertakan baris kosong.
4.4 Garis Horisontal / Horisontal Rule
Garis horisontal bisa dibentuk dengan tag <HR>. Tag <HR> adalah tag tunggal, sehingga kita tidak perlu menutup tag tersebut diakhir sesi. Tag <HR> akan membentuk garis horisontal sepanjang browser. Namun dengan berbagai atribut tambahan, kita bisa mengatur garis horisontal tersebut sesuai kebutuhan.
Penulisan tag <HR> yang sederhana adalah sebagai berikut:
<HR>
Keterangan: Tag ini akan membentuk garis horisontal sepanjang browser.
Penulisan tag <HR> yang lebih lengkap adalah sebagai berikut:
<HR ALIGN=”..” SIZE=”..” WIDTH=”..” COLOR=”..”>
Berikut adalah contoh penggunaan tag <HR>.
<html>
<body>
<hr size=”6″ width=”50″ align=”left” color=”green”>
</body>
</html>
4.5 Spasi
Membuat spasi yang lebih dari satu spasi di dokumen HTML tidak semudah kita menspasi tag atau dokumen yang kita ketik. Kalaupun kita sudah memberi spasi panjang dari dokumen yang kita ketik, tetap saja browser mengabaikan dan hanya memberi satu spasi. Untuk memberi spasi yang lebih dari satu berturut-turut atau spasi panjang dari dokumen HTML kita, kita bisa menggunakan teknik yang berlaku sekarang. Pada mulanya, untuk memberi sapsi ganda kita bisa menggunakan tag <spacer type=”..” size=”..”>, namun itu hanya berlaku untuk browser Netscape dan itupun sekarang sudah tidak berlaku. Untuk membuat spasi ganda, kita bisa menggunakan tag atau keyword sebagai berikut:
Penggunaan tag tersebut adalah sebagai berikut. Bila kita membuat satu spasi, kita cukup menspasi langsung dengan menekan tombol spasi di keyboard. Bila kita membutuhkan dua spasi, maka kita bisa menspasi dengan satu spasi dengan menekan keyboard dan spasi yang satunya lagi dengan satu tag diatas. Bila kita ingin dokumen HTML kita mempunyai 3 spasi berturut-turut, maka kita bisa membuat spasi yang pertama dengan menekan tombol spasi di keyboard dan spasi kedua dan ketiga dengan mengetikkan tag dua kali. Begitu juga seterusnya jika kita ingin membuat spasi yang panjang, kita bisa menggunakan cara di atas.
4.6 Format Font
Dalam membuat dokumen teks, kita selalu memerlukan pemformatan teks yang kita buat tersebut agar menjadi indah, mudah di baca dan sesuai kebutuhan. Untuk memformat teks atau font yang kita ketik, kita bisa menggunakan tag <FONT> dan memformatnya dengan berbagai atribut yang didukung oleh tag tersebut. Tag <FONT> adalah tag berpasangan sehingga kita harus menutupnya dengan tag penutup tersebut </FONT>. Bila tidak kita tutup, browser akan mengabaikan tag kita tersebut. Berikut adalah format penulisanya.
<FONT> … </FONT>
Tag <FONT> bisa kita tambahi dengan beberapa atribut yang didukungnya, diantaranya atribut size yang digunakan untuk menentukan ukuran font, atribut face yang digunakan untuk menentukan jenis font, dan atribut color untuk menentukan warna dari font yang kita ketik. Berbagai atribut tersebut bisa kita gunakan beberapa atau semuanya. Format penulisanya adalah sebagai berikut.
<FONT SIZE=”..” FACE=”..” COLOR=”..”> … </FONT>
Keterangan: □ SIZE, digunakan untuk menentukan ukuran sebuah teks dengan ukuran 1 sampai dengan 7. Ukuran 1 untuk menampilkan teks paling kecil, ukuran 7 untuk menampilkan teks paling besar.
□ FACE digunakan untuk menentukan jenis font / huruf dari dokumen HTML Anda di browser.
□ COLOR digunakan untuk menentukan warna dari font / huruf dokumen HTML. Ada dua cara memberi nilai pada atribut COLOR ini, yaitu dengan menunjuk langsung nama warna yang di maksud dalam bahasa Inggris, atau bisa juga dengan kumpulan warna RGB. Jika menggunakan RGB, nilai yang diberikan harus selalu diawali dengan tanda pagar (#).
Berikut adalah contoh penggunaan tag <FONT>.
<html>
<body>
<font size=”6″ face=”arial” color=”blue”>Halu super tohari!!, aku memanggil kamu…</font>
<br>
<font size=”5″ face=”times new roman” color=”#99CC77″>Hai cewek, nama km sapa?? Kenalan yuuk..</font>
</body>
</html>
4.7 Memodifikasi Font
Teks yang kita ketik bisa kita modifikasi perwajahanya dengan tag-tag yang dimiliki oleh HTML. Berbagai modifikasi yang dilakukan untuk memanipulasi tampilan font cukup dengan tag-tag yang digolongkan dengan tag fisik sebagai berikut.
Tag Keterangan
<B> … </B> Membuat huruf tebal
<U> … </U> Membuat teks dengan garis bawah
<I> … </I> Membuat teks miring / italic
<S> … </S> Membuat teks yang ada coretan ditengahnya
<STRIKE> … </STRIKE> Membuat teks yang tercoret
<TT> … </TT> Membuat teks seperti diketik di mesin ketik tradisional
<SUB> … </SUB> Membuat teks subskript
<SUP> … </SUP> Membuat teks superskript
<SMALL> … </SMALL> Membuat teks cetak kecil
<BIG> … </BIG> Membuat teks cetak besar
<BLINK> … </BLINK> Membuat teks berkedip-kedip – Berlaku untuk browser Mozilla Firefox dan Opera – Tidak berlaku pada browser Internet Explorer, untuk browser lain penulis belum mencobanya.
4.8 Background
Pada tulisan sebelumnya telah dijelaskan bahwa dokumen HTML yang di tampilkan di jendela browser adalah dokumen yang terdapat di blok BODY. Pada tag <BODY>, kita bisa menambahkan atribut untuk menentukan background / latar belakang dari dokumen kita. Ada dua pilihan untuk menentukan background, yaitu dengan gambar atau hanya dengan warna. Bila kita menentukan background dengan gambar, kita harus terlebih dahulu menyiapkan file gambar yang akan kita jadikan latar belakang. File gambar yang dapat dijadikan latar belakang diantaranya adalah JPG, BMP dan GIF. Bila kita hanya ingin latar belakang dokumen HTML kita berupa warna, kita bisa memberi nilai warna yang kita maksud dengan menunjuk nama warnanya dalam bahasa Inggris atau dengan kode RGB. Berikut adalah format penulisanya.
Format penulisan background dengan gambar.
<BODY BACKGROUND=” … “> … </BODY>
Berikut adalah contoh dokumen HTML yang menggunakan background / latar belakang gambar dengan nama file Mawar_merah.jpg.
<html>
<body background=”Mawar_merah.jpg”>
Halu temen2, aku punya latar belakang bunga cantik…
</body>
</html>
Berikut ini adalah format penulisan background dengan warna.
<BODY BGCOLOR=” … “> … </BODY>
Untuk menentukan warna, kita bisa memberi nilai dengan nama warna langsung, misalnya green, yellow, blue, red dan lain-lain. Selain itu, kita juga bisa memberi nilai dengan kumpulan warna RGB. Untuk memberi warna dengan RGB, kita diharuskan mengawali niali RGB tersebut dengan tanda pagar (#).
Berikut adalah teknis dari warna RGB.
R G B
xx xx xx
xx adalah nilai dari hexadesimal. Yang mana kita bisa mengisi dari 00 sampai 99 dan dari AA sampai FF
Contoh:
Nama warna Kode RGB
Hitam #000000
Aqua #00FFFF
Biru #0000FF
Lime #00FF00
Maroon #800000
Fichsia #FF00FF
Abu-abu #808080
Nama warna Kode RGB
Putih #FFFFFF
Hijau #008000
Navy #000080
Olive #808000
Purple #800080
Merah #FF0000
Kuning #FFFF00
Berikut adalah contoh dokumen HTML yang menggunakan latar belakang warna yang ditentukan dengan menyebut langsung warnanya.
<html>
<body bgcolor=”green”>
Hai,aku hijau, cool nich..
</body>
</html>
Berikut ini adalah contoh dokumen HTML yang menggunakan latar belakang warna yang ditentukan dengan menggunakan warna RGB.
<html>
<body bgcolor=”#AABBCC”>
Aku warna biru agak kelabu nich..
</body>
</html>
4.9 Preformated
Dalam tulisan sebelumnya telah dijelaskan bahwa browser akan mengabaikan spasi yang panjang dan hanya di baca satu spasi, mengabaikan baris baru atau enter dan juga mengabaikan tab. Walaupun browser mengabaikan itu semua, kita masih bisa menampilkan dokumen HTML kita sesuai format dan bentuk ketika kita membuatnya di editor. Kita bisa menggunakan tag <PRE> untuk keperluan ini. Tag <PRE> adalah tag yang berpasangan sehingga kita harus menutupnya dengan </PRE> di akhir dokumen yang kita format sesuai dengan editornya tersebut. Berikut adalah format penulisanya.
<PRE> … </PRE>
Berikut adalah contoh dokumen HTML yang menggunakan tag <PRE>.
<html>
<body>
<pre>
I0000000I |B|B|B|B|B|B|B|
I0 0I I8I
I0 0I I8I http://www.tohari.cjb.net
I0IIIII0I I8I
I0 0I I8I Ahmad Thohari 2009
II0I I0II II8II
</pre>
</body>
</html>
Tampilan di browser:
Pada contoh tersebut apa yang diketikkan di editor, dalam blok body yang terdapat di blok <pre> … </pre>, akan ditampilkan di browser sama persis dengan yang di lihat di editor. Salah satu kelemahan dari tag <pre> adalah huruf yang digunakan adalah huruf standar, kita tidak bisa memilih huruf yang kita inginkan.
4.10 Karakter Khusus
Dalam dunia matematika (yang mana ini adalah jurusan kuliah penulis, yaitu Pendidikan Matematika Universitas Negeri Malang), banyak sekali dijumpai karakter khusus yang tidak terdapat di keyboard. Bila kita ingin mengetikkan simbol khusus misalnya dalam rumus, kita harus menggunakan kode yang sudah ditetapkan oleh W3C. Berikut adalah tabel beberapa simbol khusus yang paling sering digunakan yang saya ambil dari buku SAMS Teach Yourself HTML and CSS in 24 Hours, SEVENTH EDITION karangan Dick Oliver, Michael Morrison.
Character Numeric Code Code Name Description
” " " Quotation mark
& & & Ampersand
< < < Less than
> > > Greater than
¢ ¢ ¢ Cent sign
£ £ £ Pound sterling
| ¦ ¦or &brkbar; Broken vertical bar
§ § § Section sign
© © © Copyright
® ® ® Registered trademark
° ° ° Degree sign
± ± ± Plus or minus
2 ² ² Superscript two
3 ³ ³ Superscript three
. · · Middle dot
1 ¹ ¹ Superscript one
¼ ¼ ¼ Fraction one-fourth
½ ½ ½ Fraction one-half
¾ ¾ ¾ Fraction three-fourths
Æ Æ Æ Capital AE ligature
æ æ æ Small ae ligature
É É É Accented capital E
é é é Accented small e
x × × Multiplication sign
÷ ÷ ÷ Division sign
Perhatikan contoh penggunaanya berikut ini.
Kita ingin mengetikkan berikut ini di dokumen HTML:
Copyright © Tohari 2009 & Copyleft and Registered ® Super Tohari 2009
Maka dalam mengetikkanya di HTML adalah sebagai berikut.
<html>
<body>
Copyright © Tohari 2009 & Copyleft and Registered ® Super Tohari 2009
</body>
</html>
Tampilan di browser:
4.11 Membuat Daftar / List
Dalam dokumen HTML kita bisa membuat daftar atau list dengan lima macam cara. Lima macam cara itu adalah: Unordered list, ordered list, definition list, directory list, dan menu list. Berikut dijelaskan masing-masing dari daftar-daftar tersebut.
4.11.1Unordered List
Unordered list adalah bulet yang mana bulet adalah suatu karakter tertentu, berupa sebuah tanda. Tanda tersebut bisa berupa apa saja, bisa berbentuk lingkaran, kotak, wajik, kaper, daun waru dan sebagainya. Daftar dengan bulet bisa dibuat dengan tag <UL> (unordered list) untuk pembukanya dan </UL> untuk penutupnya. Setiap item di dalam list harus didahului dengan tag <LI> (list item). <LI> adalah tag tunggal sehingga tidak memerlukan penutup, tetapi seandainya diberi penutup juga tidak masalah. Berikut adalah format penulisanya.
<UL TYPE=” …”>
<LI> … </LI>
<LI> … </LI>
…
</UL>
Type yang bisa digunakan diantaranya:
disk, circle, square
Berikut adalah contoh penggunaan unordered list.
<html>
<body>
Daftar materi kuliah Desain Web
<ul type=”circle”>
<li>Pengenalan HTML</li>
<li>Memakai Xara Webstyle</li>
<li>Menggunakan Swishmax</li>
<li>Memakai Frontpage</li>
<li>lain-lain</li>
</ul>
</body>
</html>
4.11.2 Ordered List
Daftar dengan model ordered list adalah daftar dengan tiap itemnya disertai dengan nomor urut. Berikut adalah format penulisanya.
<OL TYPE= …>
<LI> … </LI>
<LI> … </LI>
…
</OL>
Type yang bisa digunakan diantaranya:
1,2,3 → Nomor urut (default)
A,B,C → Huruf kapital
a,b,c → Huruf kecil
i,ii,iii → Romawi kecil
I,II,III → Romawi besar
Berikut adalah contoh penggunaan ordered list
<html>
<body>
Daftar software untuk membuat software:
<ol type=a>
<li>Visual C++</li>
<li>Visual Basic</li>
<li>Visual C#</li>
<li>Borland Delphi</li>
<li>Gambas</li>
<li>Kylik</li>
<li>J2ME Builder</li>
<li>Borland C++</li>
<li>Lain-lain</li>
</ol>
</body>
</html>
4.12 Menampilkan Gambar
Halaman web yang kita buat dapat kita sisipi gambar untuk berbagai keperluan. Diantaranya untuk memeperindah tampilan, atau memang gambar tersebut perlu ditampilkan. Untuk menampilkan gambar di halaman web dalam dokumen HTML berikut pertimbanganya.
► Format gambar yang bisa digunakan diantaranya JPG, GIF, BMP, PNG.
► Ukuran file sebaiknya tidak terlalu besar. Saran yaitu ukurannya tidak lebih dari 100Kb.
► Bila ukuran gambar cukup besar, sebaiknya gambar dipotong dengan ukuran yang kecil-kecil untuk mempercepat waktu loading.
Berikut adalah format penulisan untuk menampilkan gambar di halaman web.
<IMG BORDER=”..” SRC=”..” WIDTH=”..” HEIGHT=”..” ALT=”..”>
Keterangan: SRC → Digunakan untuk menunjuk path dan nama file gambar.
ALT → Digunakan untuk memberi tulisan ketika gambar tidak berhasil dimuat.
WIDTH → Digunakan untuk menentukan lebar gambar, dalam satuan piksel.
HIGHT → Digunakan untuk menentukan tinggi gambar dalam satuan piksel.
Berikut adalah contoh penggunaan tag IMG untuk menampilkan gambar.
<html>
<body>
<img border=”0″ src=”tohari.jpg” width=”720″ height=”480″ alt=”hai, ini dia foto tohari, gambar belum berhasil dimuat”>
</body>
</html>
Tampilan di browser:
4.13 Hiperlink
Salah satu kelebihan dokumen HTML dibanding dokumen lainya adalah adanya hiperlink. Dengan hiperlink kita bisa menuju dari dokumen 1 ke dokumen lainya cukup dengan menunjuk link tersebut. Tag yang digunakan untuk membuat hiperlink adalah <A HREF=..> dan diakhiri dengan </A>. Berikut adalah format penulisanya.
<A HREF=”…” TARGET=”…”> … </A>
Keterangan: <A>…</A> → Menunjuk pada sesuatu yang bisa diklik untuk menuju link yang dimaksud
HREF → Hypertext REFerence, yaitu untuk menuju alamat / URL yang dimaksud.
TARGET → Digunakan untuk menentukan apakah link dibuka di jendela di mana link di klik ataukan dibuka di jendela baru.
_BLANK = Link dibuka dijendela baru
_PARENT = Link dibuka di jendela tempat link diklik
_SELF = Menampilkan link target pada frame yang sama
_TOP = Link dibuka di jendela tempat link di klik
Berikut adalah contoh penggunaan hiperlink dalam dokumen HTML.
<html>
<body>
<a href=”http://www.tohari.cjb.net” target=”_blank”> official website </a>
</body>
</html>
4.14 Membuat Tabel
Membuat table di HTML cukup mudah, Anda hanya memerlukan tiga buah tag yang berpasangan, artinya tiap-tiap tag memerlukan tag pembuka dan tag penutup. Tag- tag tersebut yaitu <TABLE>, <TR>, dan <TD>. Berikut adalah format penulisanya.
<TABLE>
<TR>
<TD> … </TD>
<TD> … </TD>
…
</TR>
</TABLE>
Keterangan:
<TR> adalah Table Row yaitu untuk membuat baris.
<TD> adalah Table Data yaitu untuk membuat kolom.
Selain penulisan seperti di atas, tag <TABLE> juga bisa ditambahi dengan beberapa atribut seperti berikut ini.
<TABLE BORDER=”..” WIDTH=”..” HEIGHT=”..” BACKGROUND=”..”>
<TR>
<TD WIDTH=”..” HEIGHT=”..” BACKGROUND=”..”> … </TD>
<TD WIDTH=”..” HEIGHT=”..” BACKGROUND=”..”> … </TD>
…
</TR>
</TABLE>
Selain tambahan beberapa atribut di atas, masih ada beberapa atribut lain yang didukung oleh tag <TABLE>. Cara penggunaan beberapa atribut lainya adalah sama dengan beberapa atribut di atas. Beberapa atribut tersebut adalah:
Atribut Keterangan
ROWSPAN Menggabungkan beberapa baris menjadi satu
COLSPAN Menggabungkan beberapa kolom menjadi satu.
CELLSPASING Mengatur spasi antara kolom dan tabel
CELLPADDING Mengatur teks dengan batas dalam
ALIGN Mengatur perataan dalam tabel secara horisontal
VALIGN Mengatur perataan dalam tabel secara vertikal
BGCOLOR Mengatur latar belakang tabel
NOWRAP Membuat isi dalam tabel memanjang dalam satu baris
Berikut adalah contoh penggunaan tabel.
<html>
<body>
Jadwal kegiatan Ahmad Thohari hari Minggu
<table>
<tr><td>Jam</td><td>Kegiatan</td></tr>
<tr><td>07.00</td><td> Bangun pagi terus sarapan </td></tr>
<tr><td>08.00</td><td> Mandi di kamar mandi </td></tr>
<tr><td>09.00</td><td> Membantu orang tua </td></tr>
<tr><td>10.00</td><td> Nonton TV </td></tr>
<tr><td>20.00</td><td> Belajar malam </td></tr>
</table>
</body>
</html>
4.15 Membuat Frame
Frame adalah salah satu kemampuan HTML untuk membagi jendela browser menjadi beberapa bagian. Walaupun konsep frame dapat membagi jendela browser menjadi bagian-bagian kecil yang banyak, dalam praktek kebanyakan frame hanya digunakan untuk membagi layar menjadi 2 atau 3 bagian. Sebab bila kita membagi dengan frame yang terlalu banyak, hal itu bisa membuat kita binggung dan juga pengunjung pun pada akhirnya juga ikut bingung.
Membuat frame di HTML berarti kita harus mempunyai lebih dari satu dokumen yang ditampilkan dalam satu layar. Satu dokumen untuk membagi layar, sedangkan dokumen lainya untuk isi dari jendela yang kita bagi tersebut.
Berikut adalah format penulisan frame yang paling dasar.
<HTML>
<FRAMESET ROWS=”..” COLS=”..”>
<FRAMENAME=”..” SRC=”..”>
<FRAMENAME=”..” SRC=”..”>
…
</FRAMESET>
</HTML>
Keterangan:
ROWS dan COLS bisa kita beri nilai dengan prosentase (%).
☼ Catatan: Tag <BODY> harus kita hilangkan bila kita membuat frame.
Berikut ini adalah contoh penggunaan frame dengan membagi jendela browser menjadi 2 bagian secara horisontal.
<html>
<frameset rows=”*,80%”>
<frame name=”atas” src=”atas.htm”>
<frame name=”bawah” src=”bawah.htm”>
</frameset>
</html>
4.15.1 Membagi Frame Menjadi Beberapa Baris
Frame dapat kita bagi menjadi beberapa baris seperti berikut ini.
<HTML>
<FRAMESET ROWS=”..”>
<FRAME NAME=”..”>
<FRAME NAME=”..”>
…
</FRAMESET>
</HTML>
4.15.2 Membagi Frame Menjadi Kolom
Frame dapat kita bagi menjadi beberapa kolom seperti berikut ini.
<HTML>
<FRAMESET COLS=”..”>
<FRAME NAME=”..”>
<FRAME NAME=”..”>
…
</FRAMESET>
</HTML>
4.15.3 Membagi Frame Menjadi Baris dan Kolom
Frame dapat kita bagi menjadi beberapa baris dan kolom seperti berikut ini.
<HTML>
<FRAMESET ROWS=”..” COLS=”..”>
<FRAME NAME=”..”>
<FRAME NAME=”..”>
…
</FRAMESET>
</HTML>
Berikut ini adalah contoh penggunaan frame dengan membagi jendela menjadi 4 bagian, yaitu secara vertikal dan secara horisontal.
<html>
<frameset rows=”10%,*” cols=”20%,*”>
<frame name=”atas_kiri” src=”atas_kiri.htm”>
<frame name=”atas_kanan” src=”atas_kanan.htm”>
<frame name=”bawah_kiri” src=”bawah_kiri.htm”>
<frame name=”bawah_kanan” src=”bawah_kanan.htm”>
</frameset>
</html>
4.15.4 Mengatur Border dan Scrolling pada Frame
Halaman HTML yang lebar atau tinggi yang lebar atau tingginya melebihi jendela bowser akan ditampilkan dengan layar penggulung (scrollbar). Hal ini adalah pengaturan setandar bila kita tidak menambahkan atribut SCROLLING. Untuk mengatur hal tersebut, yang mana kita bisa mengatur apakah scrollbar (penggulung layar) ditampilkan atau tidak kita bisa memformat penulisan frame seperti berikut ini.
<HTML>
<FRAMESET ROWS=”..” COLS=”..” BORDER=”..”>
<FRAME NAME=”..” SRC=”..” SCROLLING=”..”>
<FRAME NAME=”..” SRC=”..” SCROLLING=”..”>
…
</FRAMESET>
</HTML>
Keterangan:
SCROLLING bisa diisi dengan: YES, NO, AUTO.
Bab V
Form
5.0 Form / Formulir
Form pada HTML fungsinya adalah untuk membuat komunikasi dua arah antara Anda sebagai webmaster dan para pengunjung website Anda. Tidak hanya itu form juga bisa dikreasikan untuk berbagai keperluan, misalnya untuk mendukung e-Comerce. Berikut adalah format penulisanya.
<FORM NAME=”..” METHOD=”..” ACTION=”..”>
</FORM>
METHOD bisa diisi dengan:
POST = Mengirimkan data terpisah pada suatu standar input
GET = Browser mengirimkan informasi yang dikumpulkan oleh form sebagai sebuah string yang ditambahkan URL dari halaman yang diminta
5.1 Kontrol-kontrol Form
Seperti layaknya bahasa pemrograman tingkat tinggi, seperti Visual Basic, Visual C++, Delphi dan lain-lain yang mereka sudah terdapat kontrol-kontrol input, HTML juga mempunyai fasilitas tersebut. Berikut adalah fasilitas kontrol-kontrol yang dimiliki HTML.
5.2 Text Box / Form Input Tipe Teks
Text box fungsinya untuk mengumpulkan informasi string yang tidak terlalu panjang, seperti nama, alamat, dan lain-lain. Berikut adalah format penulisanya.
<INPUT TYPE=”TEXT” NAME=”..” SIZE=”..” MAXLENGTH=”..”>
Keterangan: NAME diisi dengan nama text box kita.
SIZE diisi dengan panjang text box yang kita inginkan.
MAXLENGTH diisi dengan panjang maksimal karakter yang dibolehkan dimaksukkan dalam text box.
Berikut adalah contoh penggunakan input type teks.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Nama: <input type=”text” name=”teks” size=”20″ maxlength=”15″>
</pre>
</body>
</html>
5.3 Submit, Button and Reset
Submit dan reset adalah tombol dalam HTML yang digunakan untuk memproses input yang telah dimasukkan ke dalam form. Tombol reset untuk membatalkan semua input yang telah diberikan, sedangkan tombol submit untuk memproses input yang telah dimasukkan. Berikut adalah format penulisanya.
<FORM TYPE=”SUBMIT”>
<FORM TYPE=”BUTTON”>
<FORM TYPE=”RESET”>
Pada penulisan di atas tombol akan ditampilkan standar, yaitu tombol bertuliskan submit dan reset. Kita masih bisa menuliskan atribut tambahan seperti berikut ini.
<FORM TYPE=”SUBMIT” NAME=”..” VALUE=”..”>
<FORM TYPE=”BUTTON” NAME=”..” VALUE=”..”>
<FORM TYPE=”RESET” NAME=”..” VALUE=”..”>
5.4 Radio Buttons
Radio button adalah tombol yang memungkinkan kita hanya bisa memilih salah satu dari sejumlah pilihan yang ada. Untuk membuat radio button, berikut adalah format penulisanya.
<INPUT TYPE=”RADIO” NAME=”..” VALUE=”..” CHECKED>
Atribut CHECKED hanya dibolehkan terdapat satu buah pada sekelompok pilihan yang ada. Pada pilihan yang diberi atribut CHECKED menndakan pilihan tersebut merupakan pilihan default. Misalnya semua tidak ada atribibut CHECKED tidak masalah.
Berikut adalah contoh penggunaan radio.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Pilihlah apa software editing video kesukaan kamu!
<input type=”radio” name=”Software” value=”Adobe_Premiere”>Adobe Premiere
<input type=”radio” name=”Software” value=”Adobe_After Effect” checked>Adobe After Effect
<input type=”radio” name=”Software” value=”Ulead_Media_Studio_Pro”>Ulead Media Studio Pro
<input type=”radio” name=”Software” value=”Sony_Vegas”>Sony Vegas
<input type=”radio” name=”Software” value=”Cannopus”>Cannopus
<input type=”radio” name=”Software” value=”Corel_VideoStudio”>Corel VideoStudio
<input type=”radio” name=”Software” value=”Pinnacle”>Pinnacle
<input type=”radio” name=”Software” value=”Combasen”>Combasen
<input type=”radio” name=”Software” value=”Matrox_Studio”>Matrox Studio
</pre>
</body>
</html>
5.5 Check Boxes
Checkbox adalah tombol pilihan yang memungkinkan kita memilih lebih dari satu dari sekelompok pilihan yang ada. Untuk membuat checkbox, berikut adalah format penulisanya.
INPUT TYPE=”CHECKBOX” NAME=”..” VALUE=”..” CHECKED>
Atribut CHECKED bole ada atau tidak. Bila ada menandakan pilihan yang dimaksud secara default terpilih. Bila tidak ada atribut CHECKED berarti pilihan tersebut secara default tidak terpilih.
Berikut adalah contoh penggunaan check box
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Apa yang membuat seorang cewek bisa kelihatan cantik?
<input type=”checkbox” name=”tampang” value=”Wajahnya_cantik” checked>Wajahnya cantik
<input type=”checkbox” name=”tampang” value=”Wajahnya_manis”>Wajahnya manis
<input type=”checkbox” name=”tampang” value=”Baik_hati”>Baik hati
<input type=”checkbox” name=”tampang” value=”Montok”>Montok
<input type=”checkbox” name=”tampang” value=”Semok”>Semok
<input type=”checkbox” name=”tampang” value=”Lainya”>Lainya
</pre>
</body>
</html>
5.6 Password Boxes / Form Input Tipe Pasword
Password boxes adalah kontrol input mirip text box namun huruf yang dimasukkan dirahasiakan oleh browser dengan menampilkanya sebagai bullet, asterik atau lainya. Fungsi dari password box adalah untuk mengumpulkan informasi password dari user yang memasukkan. Berikut adalah format penulisan untuk membuat password boxes.
<INPUT TYPE=”PASSWORD” NAME=”..” SIZE=”..” MAXLENGTH=”..”>
Berikut adalah contoh penggunakan input type password.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Password <input type=”password” name=”kata_kunci” size=”20″ maxlength=”15″>
</pre>
</body>
</html>
5.7 Text Block / Form Area Teks
Text Block Area adalah form input berupa teks atau string yang daerah luasnya bisa kita tentukan. Dengan kontrol ini pengunjung bisa secara leluasa memasukkan input teks karena yang pada umumnya areanya adalah luas. Berikut adalah format penulisan untuk membuat text block area.
<TEXTAREA NAME=”..” COLS=”..” ROWS=”..”>
</TEXTAREA>
Berikut adalah contoh penggunakan input type tekt area.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Komentar:<textarea name=”komentar” cols=”30” rows=”5”>
</textarea>
</pre>
</body>
</html>
5.8 Menu / Tombol Select
Menu adalah kontrol HTML yang memperbolehkan pemakai untuk memilih dari sejumlah pilihan yang telah ditentukan. Berikut adalah format penulisan untuk membuat menu.
<SELECT NAME=”..”>
<OPTION VALUE=”..” SELECTED> .. </OPTION>
<OPTION VALUE=”..”> .. </OPTION>
<OPTION VALUE=”..”> .. </OPTION>
…
</SELECT>
Berikut adalah contoh penggunakaan menu.
<html>
<body>
<form name=”formku” method=”post” action=”http://www.tohari.cjb.net/”>
Bajakan atau legalkah software kamu?
<select name=”legalitas”>
<option value=”Legal” selected>Legal</option>
<option value=”Bajakan”>Bajakan</option>
</select>
</body>
</html>
5.9 Form Input Type Image
Form input type image adalah kontrol dalam HTML yang digunakan untuk memilih gambar. Berikut adalah format penulisanya.
<INPUT TYPE=”IMAGE” NAME=”..” VALUE=”..” SRC=”..” ALT=”..” WIDTH=”..” HEIGHT=”..”>
5.10 Form Input Type File
Form input type file adalah kontrol HTNL yang digunakan untuk memilih file. Berikut adalah format penulisanya.
<INPUT TYPE=”FILE” NAME=”..” SIZE=”..” MAXLENGTH=”..”>
Komentar
Posting Komentar