Belajar HTML

HTML merupakan format tampilan untuk sebuah website. HTML sangat mudah dipelajari karena kita tidak memerlukan programming skill untuk menguasai HTML. Setelah membaca materi ini diharapkan anda dapat menguasai bagaimana:

ƒ Menggunakan HTML

ƒ Manipulasi Font dan Link

ƒ Membuat Tabel

ƒ Membuat Form HTML

Menggunakan HTML

Sebuah halaman website yang valid akan selalu diapit tanda <html>...</html>. File-file HTML selalu berakhiran dengan ekstensi *.htm atau *.html. Tag-tag HTML selalu diawali dengan tanda <x> dan diakhiri dengan </x> dimana x adalah nama tag seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan </x> seperti <br> dan <input>. Dibawah ini adalah tabel tag-tag HTML yang sering digunakan.

Tabel 1.0 Tag-tag umum pada HTML

Tag	Keterangan
<html></html>	Tag untuk mengapit halaman HTML
<head></head>	Tag yang berisi informasi umum dari halaman
<title></title>	Judul halaman. Terdapat pada <head>
<body></body>	Settingan attribut untuk seluruh isi halaman
<b></b>	Untuk menebalkan teks
<i></i>	Untuk memiringkan teks
<u></u>	Untuk menggaris bawahi teks
<p></p>	Untuk membuat paragraf
<font></font>	Untuk memanipulasi huruf
<br>	Untuk pindah ke baris baru
<hr>	Untuk membuat garis horizontal
<a></a>	Untuk membuat links

Agar anda lebih paham sebaiknya kita langsung menerapkan teori-teori diatas.

PENERAPAN TEORI MENGGUNAKAN HTML

Pertama Jalankan program PHP DESIGNER 2006. Klik menu File-New-HTML/XHTML untuk membuat file HTML baru. Lalu ketik kode berikut ini.

<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
Halo Dunia...!, Ini website pertamaku
</body>
</html>

Simpan di folder hari-1 yang pernah kita buat. Dengan mengklik File-Save lalu simpan dengan nama pertama.html. Untuk mengetesnya buka Internet Explorer atau browser favorit anda. Pada address arahkan ke http://localhost/webmaster/Bab1/hari-1/pertama.html tampilan yang anda lihat akan seperti gambar 1.0.

Gambar 1.0: output file pertama.html

Manipulasi Font dan Link

Untuk memanipulasi font di HTML kita gunakan tag <font></font>. Tag font tidak hanya sesederhana itu. Tag ini memiliki atribut didalamnya. Dimana atribut inilah yang memiliki peranan penting dalam menentukan tampilan teks. Lihat Tabel 1.1 untuk daftar atribut tag font.

Tabel 1.1 Daftar attribut dari tag font

Atribut	Keterangan
name	Untuk menentukan jenis huruf yang digunakan
size	Untuk menentukan ukuran huruf
color	Untuk menentukan warna huruf

Contoh jika kita ingin membuat teks yang menggunakan huruf Arial ukurannya 12pt dan warnanya merah. Kita dapat menuliskannya seperti berikut.

<font name="Arial" size="3" color="red">Teks Disini</font>

Untuk size 3 sama dengan 12pt, 4 sama dengan 14pt, 5 sama dengan 18pt, 6 sama dengan 24pt dan 7 sama dengan 36pt. Lalu bagaimana jika saya ingin membuat teks yang hurufnya tebal, miring dan bergaris bawah?. Gampang..., kita cukup apit teks tersebut menggunakan tag <b></b>, <i></i> dan <u></u>. Lihat contoh berikut.

<b><i><u>Tebal, Miring dan Garis Bawah</b></i></u>

Teks diatas akan mempunyai efek tebal, miring dan bergaris bawah. Mudah bukan?. Selain font ada juga <h1></h1>, <h2></h2>, dan seterusnya yang digunakan untuk mencetak heading. <h1> akan mencetak heading dengan ukuran font yang terbesar, <h2> akan semakin mengecil dan seterusnya.

Link

Anda tentu sering mengklik suatu tulisan atau gambar pada website yang menuju ke halaman lainnya. Yang anda klik itu adalah link. Link merupakan teks atau gambar yang membuka halaman website lainnya. Untuk membuat link kita dapat menggunakan tag <a></a>. Seperti halnya tag font tag a juga memiliki attribut. Tabel 1.2 akan menunjukkan pada anda daftar attribut pada tag a.

Tabel 1.2 Daftar attribut dari tag a

Attribut	Keterangan
href	Halaman website yang akan dituju
target	Dibuka pada window baru atau tidak
style	Penambahan CSS
class	Nama class yang dipanggil
name	Nama dari link

Contoh jika kita ingin membuka RQPEDIA pada window yang sama.

<a href="http://www.google.com">Google</a>

Link diatas akan membuka alamat www.google.com dengan teks RQPEDIA sebagai teks yang akan diklik.

PENERAPAN TEORI MANIPULASI FONT DAN LINK

Jalankan PHP DESIGNER 2006 klik menu File-New-HTML/XHTML. Lalu ketik kode berikut

<html>
<head>
<title>Manipulasi Font dan Link</title>
</head> <body>
<p><font size="5"><b>Pengumuman</b></font></p>
<p>Silahkan klik link berikut untuk menuju halaman pertama.html</p> <a href="pertama.html">Halaman pertama.html</a><br>
<a href="pertama.html" target="_blank">Halaman pertama.html</a> (new window)
</body>
</html>

Simpan dengan nama font_link.html. Jalankan pada browser IE arahkan address ke http://localhost/webmaster/Bab1/hari-1/font_link.html hasilnya akan seperti gambar 1.1

Gambar 1.2: output file font_link.html

Karena file pertama.html berada satu direktori dengan file font_link.html. Maka isi dari href cukup kita tulis “pertama.html”. Untuk link yang ke dua jika kita klik maka akan muncul window baru. Itu dikarenakan pada attribut target kita isi dengan “_blank”.

Membuat Tabel

Tabel memiliki peranan yang cukup penting dalam pendesainan suatu tampilan. Dengan menggunakan tabel kita dapat dengan mudah menentukan letak suatu objek. Untuk membuat tabel digunakan <table></table>. Atribut dari tag table boleh dibilang cukup banyak. Daftar atribut tag table dapat anda lihat pada tabel 1.3.

Tabel 1.3 Daftar atribut dari tag table

Atribut	Keterangan
width	untuk mengatur lebar tabel (% atau pixel)
height	untuk mengatur tinggi tabel
border	untuk menentukan tebal bingkai
cellpadding	menentukan jarak padding antar cell
cellspacing	menentukan jarak spacing antar cell
name	untuk menentukan nama tabel
bgcolor	untuk mengatur warna background
background	untuk menampilkan gambar sebagai background
align	letak teks secara horizontal (rata kiri, tengah atau kanan)
valign	letak teks secara vertical (rata atas, tengah atau bawah)
style	untuk CSS
bordercolor	untuk mengatur warna bingkai

Jika kita hanya menggunakan tag <table></table> saja maka tabel tidak akan pernah terbentuk karena belum memiliki baris dan kolom. Untuk membuat baris kita gunakan tag <tr></tr> dan untuk membuat kolom digunakan tag <td></td>. Terdapat juga tag <th></th> tag ini digunakan untuk membuat header tabel. Ketiga tag tersebut memiliki atribut yang hampir sama. Lihat tabel 1.4 untuk melihat daftar atributnya.

Tabel 1.4 Daftar atribut tag tr, td, dan th

Atribut	Keterangan
height	untuk mengatur tinggi
bgcolor	untuk mengatur warna background
background	untuk menjadikan gambar sebagai background
align	untuk mengatur letak teks
valign	untuk mengatur letak teks secara vertical
colspan	untuk menghilangkan sejumlah kolom
rowspan	untuk menghilangkan sejumlah baris

Contoh dibawah ini mengilustrasikan kita akan membuat tabel dengan dua baris dan satu kolom.

<table border="1">
<tr>
<td>Baris 1 kolom 1</td></tr>
<tr>
<td>Baris 2 kolom 1</td></tr>
</table>

PENERAPAN TEORI MEMBUAT TABEL

Seperti biasa jalankan PHP DESIGNER 2006. Klik File-New-HTML/XHTML untuk membuat file HTML baru. Kemudian ketik kode dibawah ini

<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<h2>Daftar Harga</h2>
<table border="1" style="border-collapse: collapse" width="100%">
<tr bgcolor="#cccccc">
<th>Nama Barang</th><th>Harga Satuan</th><th>Jumlah Barang</th> <th>Total</th>
</tr>
<tr align="center">
<td>CD R</td><td>Rp. 2.000,-</td><td>5</td><td>Rp. 10.000,-</td>
</tr>
<tr align="center">
<td>CD RW</td><td>Rp. 5.000,-</td><td>4</td><td>Rp. 20.000,-</td> </tr>
<tr align="center">
<td colspan="3">TOTAL >>> </td><td><b>Rp. 30.000,-</b></td>
</tr>
</table>
</body>
</html>

Simpan dengan nama tabel.html. Jika anda jalankan pada Internet Explorer maka hasilnya akan terlihat seperti gambar 1.2.

Gambar 1.2: output file tabel.html

Coba perhatikan pada tag td yang ada pada baris ke tiga. Disini kita menuliskan attribut colspan=”3” yang artinya kita menghilangkan 3 kolom dan menggantinya hanya dengan satu kolom.

CSS (Cascading Style Sheet)

Dari namanya saja sudah keren ini pasti menarik. Tentu ini menarik tapi pada ebook ini kita hanya bahas secara garis besarnya saja. CSS merupakan suatu teknologi yang digunakan untuk mempermudah pembuatan suatu tampilan website. Kode dari CSS diapit oleh tag <style></style>. Tag style diletakkan diantara tag <head></head>. Selain dituliskan dalam tag style CSS juga dapat ditulis pada tag yang mendukung attribut style seperti table.

Setiap tag html seperti <b>, <i>, <u> dan sebagainya dapat dimanipulasi dengan CSS. Didalam CSS tag-tag HTML tersebut disebut selector dan atribut didalamnya disebut declaration. Declaration ditandai dengan kurug kurawal {...}. Contoh berikut akan membuat seluruh teks pada body berjenis huruf verdana dengan ukuran 11 pixel.

body{font-family: verdana; font-size: 11px}

PENERAPAN TEORI CSS

Jalankan PHP DESIGNER 2006 klik menu File-New-HTML/XHTML. Lalu ketik script berikut ini.

<html>
<head>
<title>CSS - Cascading Style Sheet</title>
<style>
body{font-family: verdana; font-size: 11px} b{color: red} i{color: green}
</style>
</head> <body>
<p>Sekarang semua tulisan verdana 11 px</p>
<b>Saya otomatis merah</b><br>
<i>Saya otomatis hijau</i>
</body>
</html>

Simpan dengan nama css.html. Jalankan pada browser IE maka hasilnya akan seperti gambar 1.3.

Gambar 1.3: output file css.html

Dapat anda lihat kalau seluruh teks pada body dengan sendirinya bertipe verdana dan berukuran 11 pixel karena adanya CSS. Demikian juga untuk tag b yang otomatis warnanya menjadi merah setelah deklarasikan di CSS.

Form HTML

Seperti namanya form yang berarti isian atau formulir. Form HTML menyediakan input bagi user untuk mengisikan suatu data guna diproses oleh PHP. Membuat form HTML boleh dibilang sangatlah mudah. Karena tidak membutuhkan keahlian programming.

Bentuk Dasar Form HTML

Setiap form pada HTML akan diapit oleh tag <form> dan </form>. Tag <form> memiliki beberapa attribut diantaranya:

ƒ Action – attribut ini berfungsi untuk memberitahu file mana yang akan digunakan untuk memproses form yang dikirim. Contoh “fileku.php” atau “folderku/fileku.php” atau URL lengkap http://www.domainku.com/fileku.php.

ƒ Method – attribut ini berfungsi untuk menentukan tipe pengiriman data. Bisa berupa POST atau GET.

ƒ Name – attribut ini berguna untuk alamat yang merupakan bagian dari javascript. Nama form tidak dikirim ke server saat form disubmit atau dikirim.

Contoh lengkap penulisan form sebagai berikut:

<form name=”formku” action=”proses.php” method=”POST”>
... </form>

Macam Input Type

Sebagian besar penulisan form akan selalu digunakan input type. Tag input dan attributnya yaitu type akan menentukan output yang ditampilkan oleh browser. Bisa berupa tombol, check box, password box dan sebagainya. Untuk lebih memperjelas lihatlah contoh di berikut

<form action="tidak_ada.php" method="POST">
<input type="text" name="coba" size="30" maxlength="45">
<input type="submit" value="GO!!">
</form>

Output dari kode diatas akan terlihat seperti gambar 1.3.

Gambar 1.3: Contoh sederhana form HTML

Setiap type juga memiliki attribut sendiri-sendiri. Tapi setiap type pasti memiliki attribut name. Berikut ini beberapa tipe type yang dapat anda gunakan:

ƒ Text – tipe ini seperti yang terlihat di gambar yaitu berupa textbox. Text memiliki tiga attribut diantaranya:

ƒ Size – yang merupakan ukuran panjang dari textbox.

ƒ Maxlength – merupakan karakter maksimal yang dapat ditampung oleh textbox.

ƒ Value – merupukan isi dari textbox yang telah ditetapkan. User dapat menggantinya dengan langsung mengetikkan pada textbox.

ƒ Password – hampir sama dengan text hanya saja karakter yang diketikkan akan berupa asterik (*).

ƒ Hidden – input ini tidak dimunculkan di layar browser. Dapat digunakan untuk menyimpan nilai atau variabel yang digunakan untuk halaman berikutnya.

ƒ Submit – tipe ini akan menampilkan tombol submit(pengiriman). Nama tombol diambil dari nilai attribut value. Jika tidak ada maka namanya Submit Query.

ƒ Reset – tipe ini digunakan untuk membersihkan segala isian pada form. Attributnya hampit sama dengan submit.

ƒ File – tipe ini digunakan untuk proses peng-upload-an file. Tampilannya hampir sama dengan tipe text tapi disebelahnya ada tombol “browse”. Ketika user menekan browse akan muncul kotak dialog untuk memilih file yang diupload.

ƒ Checkbox – tipe ini akan memunculkan tampilan checkbox. Biasanya checkbox digunakan untuk memilih lebih dari satu pilihan. Jika pada tag ini terdapat kata “checked” maka checkbox tersebut akan ditandai.

ƒ Radio – tipe ini akan menampilkan tampilan radio button. Tipe ini digunakan jika kita harus memilih hanya satu pilihan. Jika ada kata “checked” maka radio tersebut akan ditandai(default).

ƒ Image – fungsinya sama dengan submit hanya saja anda dapat menentukan gambar sebagai pengganti tombol.

Kode berikut ini mencontohkan penggunaan macam-macam type tersebut kecuali File dan Image.

<form action="tidak_ada.php" method="POST">

<h2>Formulir Pendaftaran</h2>
Nama: <input type="text" name="nama" value="Ketik Nama Disini" size="30" maxlength="50"><br>
Password: <input type="password" name="nama" size="30" maxlength="50"><br> <input type="checkbox" name="mailing" value="ya"> Jika dicek anda bersedia menjadi anggota mailing list kami.
<input type="hidden" name="sembunyi" value="anda tidak dapat melihatku"> <p>
Status Anda?<br>
<input type="radio" name="status" value="menikah">Sudah Menikah<br> <input type="radio" name="status" value="belum">Belum Menikah<br>
<input type="radio" name="status" value="duda_janda">Duda/Janda<br> </p>
<input type="submit" value="DAFTAR"> <input type="reset" value="RESET"> </form>

Output dari kode diatas akan seperti gambar 1.4.

Gambar 1.4: Penggunaan macam-macam type

Select, Multiple Select

Tag select akan menampilkan pilihan dalam kotak drop-down. Untuk membuatnya anda harus menuliskan tag <select> dengan attributnya yaitu name. Didalam tag select kita memerlukan tag <option> untuk membuat pilihan. Pilihan option juga memiliki attribut yaitu value.

Contoh penggunaan tag <select>:

<form action="tidak ada.php" method="POST">
<select name="status">
<option value="menikah">Sudah Menikah
<option value="belum">Belum Menikah
<option value="duda_janda">Duda/Janda
</select>
</form>

Gambar 1.5: contoh output select

Jika kita tambahkan kata multiple pada tag select. Maka user diperbolehkan memilih lebih dari satu pilihan atau sering disebut listbox. Lihat contoh berikut akan menampilkan listbox 3 elemen awal dengan mengisi attribut size. Untuk memilih lebih dari satu gunakan tombol SHIFT atau Ctrl.

<form action=”tidak ada.php” method=”POST”>
Makanan yang anda suka?<br>
<select name="makanan" multiple size="3"> <option value="Nasi_goreng">Nasi goreng <option value="Mie_ayam">Mie Ayam <option value="Burger">Burger
<option value="Kentang">Kentang
</select>
</form>

Gambar 1.6: contoh output multiple select

Textarea

Tag <textarea> akan menciptakan sebuah textbox yang besar yang mempunyai baris dan kolom. Berbeda dengan elemen form lainnya, textarea memiliki tag penutup yaitu </textarea>. Untuk memperjelas lihatlah contoh berikut.

<form action="tidak_ada.php" method="POST">
Buatlah deskripsi singkat tentang diri anda<br>
<textarea name="deskripsi" rows="8" cols="50">Tulis Deskripsi Disini</textarea>
</form>

Gambar 1.7: contoh output textarea