HTML
HTML(Hypertext Markup Language) merupakan salah satu format yang digunakan untuk pembuatan aplikasi di halaman web. Meskipun saat ini sudah banyak aplikasi-aplikasi yang menawarkan kemudahan dalam pembuatan halaman web seperti a DreamWeafer ataupun Frontpage, sebaiknya anda mengenal dan menguasai tag-tag HTML terlebih dahulu karena mau tidak mau anda akan bekerja dalam mode editor bilamana akan menyisipkan script program dalam script HTML.
DASAR DASAR HTML
HTTP(Hypertext Transfer Protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini akan mentransfer dokumen-dokumen web yang berformat HTML. Elemen-elemen yang terdapat didalam HTML sering disebut sebagai tag.
Elemen HTML biasanya berupa tag-tag yang saling berpasangan, setiap tag di tandai dengan simbol “ < ” dan “ > ”, dan pasangannya ditandai dengan “ / ” . Misalnya pasangan dari tag <example> adalah </example>. Selain tag atau elemen, terdapat juga istilah atribut, yang berfungsi untuk mengatur tag atau elemen tersebut. Jadi misalnya elemen <example> bila ditulis dengan atribut-atributnya adalah sebagai berikut <example atribut1=”nilaiAtribut1” atribut2=”nilaiAtribut2” …. >. Dalam menuliskan tag-tag HTML anda tidak perlu khawatir dengan perbedaan huruf besar maupun huruf kecil karena tag-tag HTML bersifat in-caseinsensitive.
Sebagai catatan, dalam penulisan pembahasan mengenai HTML ini mungkin tidak akan selengkap yang anda harapkan. Namun setidaknya beberapa contoh yang tertulis di buku ini akan dapat anda pahami. Penjelasan lengkap mengenai HTML dapat anda baca pada buku khusus yang membahas tentang HTML.
STRUKTUR DASAR HTML
Sebelum mempelajari HTML, akan terlebih dahulu diulas mengenai aturan penulisan dalam buku ini. Script dituliskan
melalui text editor seperti Notepad, kemudian disimpan dengan ekstensi .htm atau .html. kemudian untuk melihat hasilnya langsung melalui web browser, seperti Internet Exploler atau web browser yang lain dengan mengetikkan lokasi penyimpanan file HTML anda atau anda simpan pada root web server sehingga dapat anda panggil dengan nama komputernya dan nama filenya.
Sebelum menuliskan script-script HTML dan PHP, terlebih dahulu anda install webServer, php dan mySql. Atau anda langsung menggunakan AppServ.
Setiap dokumen HTML memiliki struktur dasar sebagai berikut :
Contoh01.html <html> <head> <title>
-berisi yang akan luncul di bagian judul web browser- </title>
<head> <body>
-berisi tentang text, gambar, atau apapun yang akan ditampilkan di halaman web-</body>
</html>
Hasil dari script diatas adalah sebagai berikut :
body title File dipanggil melalui address Gb. 1.1: Struktur dasar
Seperti yang telah anda lihat, tag HTML akan diawali dengan tag <html> dan diakhiri </html>. Didalam tag html terdapat bagian header yang tandai dengan tag <head> … </head> yang mana script yang tertulis pada bagian ini tidak akan tampil pada web broeser seperti <title> … </title> dan yang lain. Dan bagian body yang ditandai dengan tag <body> … </body>, bagian body nantinya adalah bagian yang akan sering anda gunakan. Dalam bagina body ini anda akan melakukan desain halaman web yang akan menampung bergai macam format teks dan gambar.
KODE WARNA
Pengaturan pengunaan warna di halaman HTML, dapat anda gunakan mode kombinasi dari warna dasar (RED, GREEN, BLUE) yang mana tiap-tiap kode warna ditampilkan dua digit nilai hexadesimal. Setiap dua bagian kode mewakili banyaknya intensitas warna. Supaya lebih jelasnya lihat tabel dibawah ini:
Table 1.1: Kode Warna
Warna Kode White #FFFFFF Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Yellow #FFFF00 Magenta #FF00FF Cyan #00FFFF
PENGATURAN PROPERTI BODY
Pengaturan halaman web dapat anda lakukan pada tag <body> dengan menambahkan bebrapa atribut didalamnya. Sebagai contoh adalah mengatur warna latar balakang, warna teks, warna link, dll.
Atribut elemen body :
Background = lokasi dan nama file (latar belakang image) Bgcolor = warna (warna latar belakang)
Link = warna (warna link)
Vlink = warna (warna visited link) Alink = warna (warna active link)
Cobalah script berikut : Contoh02.html
<html> <head> <title>
-berisi yang akan luncul di bagian judul web browser- </title> <head>
<body bgcolor=”green” text=”blue”>
-berisi tentang text, gambar, atau apapun yang akan ditampilkan di halaman web-</body>
</html>
Gb. 1.3: Penggunaan elemen pada body.
HEADING, PARAGRAPH, HORISONTAL
RULER DAN BREAK
Tag heading <hx> digunakan untuk memformat judul-sub judul dari suatu halaman web. Di HTML terdapat enam buah macam heading dimulai dari <h1> hingga <h6> yang mana tiap-tiap heading akam mempunyai ukuran sendiri-sendiri.
Tag paragraph <p> digunakan layaknya pengaturan sebuah paragraf dalam halaman web. Dalam elemen paragraf tersebut dapat anda masukkan atribut align = [left / right / center] yang berfungsi untuk mengatur perataan paragraf. Jika nilai atributnya adalah left maka paragraf tersebut akan
tengah dan jika bernilai right maka akan rata ke sebalah kanan.
Tag break <br> berfungsi untuk memberikan baris baru di halaman web. Tag ini tidak memerlukan penutup seperti tag yang lain.
Tag horisontal ruler <hr> digunakan untuk memberikan garis horisontal. Tag ini juga tidak memerlukan penutup. Anda dapat menambahkan beberapa atribut pada tag ini.
Atribut tag horisontal ruler : Align = [left / right / center] Size = pixel (tebal garis) Width = n% (panjang garis)
Salin script berikut untuk mencoba heading, paragraf, break dan horisontal ruler. Jangan lupa untuk menyimpannya dengan ekstensi .html atau .htm. setelah itu cobalah anda ubah nilai atribut-atributnya dan perhatikan perubahannya. Contoh03.html <html> <head> <title> contoh-03 </title> <head>
<body bgcolor=”green” text=”blue”> <h1> PENGERTIAN HTML </h1>
<hr width=”100%” size=”10” color=”yellow”> <p align=”center”>
HTML(Hypertext Markup Language) merupakan salah satu format yang digunakan untuk pembuatan aplikasi di halaman web.
</p>
<p align=”right”>
Meskipun saat ini sudah banyak aplikasi-aplikasi
yang menawarkan kemudahan dalam pembuatan halaman web seperti a DreamWeafer ataupun Frontpage,
sebaiknya anda mengenal dan menguasai tag-tag HTML terlebih dahulu karena mau tidak mau anda akan bekerja dalam mode editor bilamana akan menyisipkan script program dalam script HTML.
</p>
perangkat yang kita butuhkan untuk belajar web adalah :<br> Notepad<br>
Php<br> AppServ
<hr width=”50%” align=”center” size=”2”> </body>
Hasil tampilannya adalah seperti berikut :
Gb. 1.4: Penggunaan Heading, Paragraf, Break, Horisontal Ruler
PENGATURAN KARAKTER
Karakter yan terdapat di halama HTML juga dapat anda atur sesuai dengan desain yang telah anda buat, baik dari ukuran, jenis maupun warna dengan menggunakan tag <font> … </font>.
Atribut elemen font : Size = angka (ukuran huruf) Color = warna (warna huruf) Face = jenis huruf (jenis huruf)
Elemen karakter : <b> … </b> = huruf tebal <i> …</i> = huruf miring
<u> … </u> = huruf garis bawah <sub> … </sub> = huruf subscript <sup> … </sup> = huruf superscript
Tulislah script berikut ini untuk mengetahui penggunaan tag font dan tag ragam karakter. Dan lihat hasilnya melalui web browser.
Contoh04.html <html> <head> <title> contoh-04 </title> <head>
<body bgcolor=”green” text=”blue”> <h1> PENGERTIAN HTML </h1>
<hr width=”100%” size=”10” color=”yellow”> <p align=”center”>
<font color=”magenta” size=”5” face=”Courier New”> <b>HTML<sup>(Hypertext Markup Language)</sup></b> merupakan salah satu
format yang digunakan untuk pembuatan aplikasi di halaman web.
</font> </p>
<font color=”red”> <p align=”right”>
Meskipun saat ini sudah banyak aplikasi-aplikasi
yang menawarkan kemudahan dalam pembuatan halaman web seperti a <u><sup>DreamWeafer ataupun
Frontpage</sup></u>,
sebaiknya anda mengenal dan menguasai tag-tag HTML terlebih dahulu karena mau tidak mau anda akan bekerja dalam mode editor bilamana akan menyisipkan script program dalam script HTML.
</p> </font>
perangkat yang kita butuhkan untuk belajar web adalah :<br> <i>Notepad<br>
Php<br> AppServ</i>
<hr width=”50%” align=”center” size=”2”> </body>
Gb. 1.5: Pemformatan karakter
LISTING
Elemen listing <li> digunakan untuk menampilkan informasi dalam bentuk list atau daftar. Di dalam HTML dikenal dua macam bentuk list yaitu list dengan format bullet (unordered list <ul>) dan list dengan format nomor (ordered list <ol>).
Adapun atribut yang terdapat didalam elemen list adalah :
Type = [1 / A / a / I / i] (untuk list dengan format nomor) Type = [disc / square / circle] (untuk list dengan format
bullet)
Salin script HTML dibawah ini untuk mencoba tag listing dengan format unordered list maupun ordered list.
Contoh05.html <html> <head> <title> contoh-05 </title> <head>
<body bgcolor=”yellow” text=”blue”>
<h1 align=”center” color=”magenta”> Ardhi”ant” Soft</h1> <hr width=”100%” align=”center” size=”4” color=”red”> Buku yang sedang kami rancang :
<ol type=”1”> <li>Microsoft Office : <ul type=”square”> <li>MS Word. <li>MS Exel. <li>MS Access.
<li>MS Power Point. </ul> <li>Programming : <ul type=”circle”> <li>Visual Basic. <li>Visual Foxpro. <li>Visual C++. <li>Delphi. <li>Java. </ul> <li>Data Base : <ul type=”disc”> <li>SQL Server. <li>MySQL. <li>Oracle. </ul>
<li>Internet dan Web Development : <ul type=”square”> <li>HTML. <li>PHP. <li>WAP. <li>Macromedia Dreamweaver. </ul> </ol> </body> </html>
Gb. 1.6: Penggunaan elemen listing.
MENAMPILKAN GAMBAR
Di halam web, anda juga dapat menampilkan gambar dengan format JPG atau GIF dengan menggunakan tag <img>. Penulisan tag ini di ikuti dengan beberapa atribut yaitu :
Src = lokasi dan nama file gambar. Alt = teks alternatif.
Width = pixel (lebar gambar) Height = pixel (tinggi gambar)
Align = [top / middle / bottom / left / right] (perataan gambar)
Border = pixel (garis tepi gambar)
Untuk lebih jelasnya dalam penggunaan tag img, salinlah script dibawah ini dan amati hasilnya, serta alkukan perubahan-perubahan pada atribut-atribut di dalam tag img tersebut.
Contoh06.html <html> <head> <title> contoh-06 </title> <head> <body bgcolor=”yellow”>
<img src=”gambarContoh02.gif” align=”middle” border=”1”> </body>
</html>
Gb. 1.7: Menampilkan gambar ke halaman web.
MEMBUAT LINK
Elemen link difungsikan untuk menghubungkan antara halaman web yang satu dengan halaman web yang lain atau ke URL yang lain. Format tag link adalah sebagai berikut :
<a href=”halamanTujuan”>text</a>
HalamanTujuan berisi lokasi dan nama file yang akan dituju, sedangkan text berisi sebuah teks yang akan ditampilkan pada halaman web sebagai text link atau penghubung.
Untuk mencoba membuat link, yang anda perlikan adalah membuat dua buah file HTML. Sebagai contoh, tulislah script dibawah ini dan kemudian simpan dengan nama contoh07a.html.
Contoh07a.html <html> <head> <title> contoh-07a </title> <head> <body bgcolor=”yellow”>
<h2 align=”center”> INI ADALAH HALAMAN AWAL </h2> <a href=”contoh07b.html”> Menuju Halaman Berikutnya </a> </body>
</html>
Dan juga tulis script dibawah ini, kemudian simpan dengan nama contoh07b.html.
Contoh07b.html <html> <head> <title> contoh-07b </title> <head> <body bgcolor=”green”>
<h2 align=”center”> INI ADALAH HALAMAN TUJUAN </h2>
<a href=”contoh07a.html”> Kembali Ke Halaman Sebelumnya </a> </body>
</html>
MEMBUAT TABEL
Tabel digunakan untuk menampilkan data dalam bentuk kolom dan baris yang mana data tersebut dimasukkan kedalam kotak yang disebut sel. Untuk membuat tabel di halaman HTML, gunakan elemen <table> … </table>. Elemen tabel berisi properti <tr> … </tr> yang difungsikan untuk membuat baris (table row) dan properti <td> … </td> yang dogunakan untuk mengisikan data (table data). Struktur dasar tabel dapat anda lihat di script berikut ini : Contoh08.html <html> <head> <title> contoh-08 </title> <head> <body> <table> <tr>
<td>baris ke-1, kolom ke-1</td> <td>baris ke-1, kolom ke-2</td> </tr>
<tr>
<td>baris ke-2, kolom ke-1</td> <td>baris ke-2, kolom ke-2</td> </tr>
<tr>
<td>baris ke-3, kolom ke-1</td> <td>baris ke-3, kolom ke-2</td> </tr>
<tr>
<td>baris ke-4, kolom ke-1</td> <td>baris ke-4, kolom ke-2</td> </tr>
</table> </body> </html>
Gb. 1.9: Struktur dasar tabel.
Hasil dari script diatas sepertinya memang tidak tampak selayaknya sebuah tabel, hal ini dikarenakan atribut-atribut yang terdapat didalam tag table belum diatur sehingga secara otomatis akan di set dengan nilai defaultnya.
Adapun atribut elemen tabel dalah sebagai berikut : Caption = teks (judul tabel)
Width = panjang (lebar tabel dalam pixel atau persen) Height = panjang (tinggi tabel dlam pixel atau persen) Border = pixel (tebal garis tepi)
Cellspacing = pixel (spasi antar cell) Cellpadding = pixel (spasi di dalam cell) Align = [left / center / right] (perataan tabel) Bgcolor = warna (warna latar belakang tabel)
Selain itu anda dapat mengatur tabel, lebih spesifik anda juga dapat mengatur kolom dan baris melalui atribut yang terdapat pada elemen tabel row dan table data.
Atribut table row :
Align = [left / center / right] (perataan baris cell secara horisontal)
Valign = [top / middle / bottom] (perataan baris cell secara vertikal)
Bgcolor = warna (warna latar belakang baris) Atribut table data :
Valign = [top / bottom / middle] (perataan vertikal) Width = pixel (lebar cell dalam pixel atau persen) Height = pixel (tinggi cell dalam pixel atau persen) Bgcolor = warna (warna latar belakang cell)
Untuk mencoba, salinlah script berikut dan lihat hasilnya melalui web browser.
Contoh09.html <html> <head> <title> contoh-09 </title> <head> <body>
<table width=”75%” align=”center” border=”1” cellspacing=”3”> <caption> Tabel percobaan </caption>
<tr bgcolor=”grey”>
<td colspan=”2” align=”center”>hasil colspan</td> </tr>
<tr align=”right”>
<td bgcolor=”pink”>hasil align right</td> <td bgcolor=”cyan”>hasil align right</td> </tr>
<tr>
<td rowspan=”2” align=”middle” bgcolor=”green”>hasil rowspan</td>
<td>baris ke-3, kolom ke-2</td> </tr>
<tr>
<td>baris ke-4, kolom ke-2</td> </tr>
</table> </body>
</html>
Gb. 1.10: Penggunaan atribut dalam table, table row dan table data
MEMBUAT FORM
Elemen FORM dalam HTML merupakan bagian terpenting dalam pemrograman, khususnya dalam pembuatan aplikasi yang berbasiskan web. Form dalam HTML sama layaknya form di bahasa pemrograman yang lain seperti Delphi, VB, Foxpro, dll. Elemen ini juga menyediakan properti textbox, combo box, button, check bok dan option button.
Untuk membuat sebuah form, anda cukup dengan menggunakan tag <form> … </form>. Selain atribut dan properti yang dimiliki form, anda juga dapat menuliskan teks dan menambahkan image didalamnya.
Atribut elemen form :
Action = lokasi dan nama file (file yang menangani form) Method = [get / post] (methode HTTP untuk men-submit
form)
Berikut adalah properti beserta atribut properti yang dimiliki oleh elemen form :
1. Text Box <input type=”text”>
Digunakan untuk memasukkan input yang berupa teks. Size = ukuran dari text box dalam karakter.
Maxsize = maksimal banyaknnya karakter yang dapat diterima.
Name = nama dari variabel text box yang dikirim ke suatu aplikasi.
Value = nilai yang ditampilkan dalam text box sebagai nilai default.
2. Password <input type=”password”> Digunakan untuk memasukkan password Size = ukuran dari text box dalam karakter.
Maxsize = maksimal banyaknnya karakter yang dapat diterima.
Name = nama dari variabel text box yang dikirim ke suatu aplikasi.
3. Hidden <input type=”hidden”>
Digunakan untuk mengirim data ke suatu aplikasi yang tidak untuk dilihat oleh browser.
4. Check Box <input type=”checkbox”>
digunakan untuk melakukan pilihan yang lebih dari satu. Name = nama dari suatu variabel yang dikirim ke suatu
aplikasi.
Value = nilai dari suatu variabel.
Checked (check box yang sudah ditandai) 5. Radio Button <input type=”radio”>
Digunakan untuk melakukan pilihan yang hanya satu pilihan saja.
Name = nama dari suatu variabel yang dikirim ke suatu aplikasi.
Value = nilai dari suatu variabel.
Checked (check box yang sudah ditandai) 6. Push Button <input type=”button”>
Elemen ini biasanya digunakan dengan java script atau VBscript untuk menghasilkan sebuah aksi.
Name = nama dari variabel yang dikirim ke suatu aplikasi.
Value = label teks di atas tombol. 7. Submit <input type=”submit”>
Digunakan unutk mengirimkan data ke suatu aplikasi yang nilai FORMnya sudah diatur dalam atribut ACTION.
Name = nama variabel yang dikirim ke suatu aplikasi. Value = label teks di atas tombol.
8. Image Submit Button <input type=”image” src=”url”>
Digunakan untuk menggantikan tombol standar submit. Name = nama dari variabel yang dikirim ke suatu
aplikasi.
9. Reset <input type=”reset”>
Digunakan untuk mereset semua masukan di dalam form. Value = text label di atas tombol.
10. Text Area <textarea> … </textarea>
Elemen yang digunakan menuliskan teks secara leluasa seperti Notepad atau sebuah listbox.
Name = nama dari variabel yang dikirimkan ke suatu aplikasi.
Cols = tinggi dalam karakter.
11. Select <select> … </select>
Digunakan seperti layaknya combo box, yang mana didalamnya terdapat properti <option> untuk memilih. Size = jumlah pilihan yang dapat terlihat.
Name = nama dari variabel yang dikirim ke suatu aplikasi.
Salin script dibawah ini untuk mencoba tag form beserta properti yang dimilikinya.
Contoh010.html <html> <head> <title> contoh-010 </title> <head> <body> <form>
Nomor KTP : <input type=”text” name=”nomorKtp”><br> Nama : <input type=”text” name=”nama”><br>
Alamat : <textarea cols=”25” rows=”5”></textarea><br>
Jenis Kelamin : <input type=”radio” name=”sex” value=”L”>Laki-laki <input type=”radio” name=”sex” value=”P”>perempuan <br> Agama : <select name=”agama”>
<option value=”islam”>islam <option value=”kristen”>kristen <option value=”katholik”>katholik <option value=”hindu”>hindu <option value=”budha”>budha </select><br>
Ijasah yang dimiliki : <input type=”checkbox” name=”ijasah” value=”sd”>SD
<input type=”checkbox” name=”ijasah” value=”sltp”>SLTP <input type=”checkbox” name=”ijasah” value=”slta”>SLTA
<input type=”checkbox” name=”ijasah” value=”diploma”>Diploma <input type=”checkbox” name=”ijasah” value=”sarjana”>Sarjana <input type=”checkbox” name=”ijasah”
value=”Magister”>Magister<br> <input type=”reset” value=”ulangi”> </form>
</body> </html>
Gb. 1.11: Penggunaan elemen Form
Dari tampilan yang dihasilkan, mungkin anda menilai kurang rapi. Supaya tampilan terlihat lebih rapi, anda dapat menggunakan bantuan tag table untuk melakukan pembuatan form. Perhatikan script di bawah ini supaya lebih jelas.
Contoh011.html <html> <head> <title> contoh-011 </title> <head> <body> <form>
<table align=”left” border=”1” cellspacing=”2” cellpadding=”3”> <tr>
<td>Nomor KTP</td> <td>:</td>
<td><input type=”text” name=”nomorKtp”></td> </tr>
<tr>
<td>Nama</td> <td>:</td>
<td><input type=”text” name=”nama”></td> </tr>
<tr>
<td>Alamat</td> <td>:</td>
<td><textarea cols=”25” rows=”5”></textarea></td> </tr>
<tr>
<td>:</td>
<td><input type=”radio” name=”sex” value=”L”>Laki-laki <input type=”radio” name=”sex” value=”P”>perempuan</td> </tr> <tr> <td>Agama</td> <td>:</td> <td><select name=”agama”> <option value=”islam”>islam <option value=”kristen”>kristen <option value=”katholik”>katholik <option value=”hindu”>hindu <option value=”budha”>budha </select></td> </tr> <tr>
<td>Ijasah Yang Dimiliki</td> <td>:</td>
<td><input type=”checkbox” name=”ijasah” value=”sd”>SD <input type=”checkbox” name=”ijasah” value=”sltp”>SLTP <input type=”checkbox” name=”ijasah” value=”slta”>SLTA
<input type=”checkbox” name=”ijasah” value=”diploma”>Diploma <input type=”checkbox” name=”ijasah” value=”sarjana”>Sarjana <input type=”checkbox” name=”ijasah”
value=”Magister”>Magister</td> </tr>
<tr>
<td colspan=”3”><input type=”reset” value=”ulangi”></td> </tr>
</form> </body> </html>
Hasil tampilan diatas masih terdapat garis border table-nya, untuk menghilangkan garis tersebut, anda cukup mengganti nilai atribut border dengan nilai ‘nol’.
LATIHAN
Cobalah anda membuat halaman HTML dengan desain seperti di bawah ini :
Desain halaman pertama :
