Apa itu HTML?
HTML(Hyper Text Markup Language) adalah
sekumpulan simbol-simbol atau tag-tag yang
dituliskan dalam sebuah file yang
dimaksudkan untuk menampilkan halaman pada web
browser. Tag-tag tadi memberitahu browser
bagaimana menampilkan halaman web dengan
lengkap kepada pengguna.
Tag-tag HTML selalu diawali dengan
<x> dan diakhiri dengan </x> dimana x tag HTML seperti
b, i, u dan sebagainya.
Apa Saja Yang Dibutuhkan?
Untuk mempelajari ebook ini anda hanya
memerlukan:
�� Text Editor (Notepad, vi, emacs, dsb)
�� Web Browser (Internet Explorer, Opera, FireFox, dsb)
Hanya dengan bermodalkan dua software
bawaan Windows itu saja anda sudah dapat membuat
website. Namun Notepad memiliki kekurangan
yaitu tidak memiliki syntax highlighting
(pewarnaan kode) sehingga relatif cukup
menyulitkan.
Untuk itu saya merekomendasikan pada anda
untuk menggunakan “PHP DESIGNER 2006”.
Kelebihan software ini adalah ia memiliki
banyak macam syntax highlighting mulai dari HTML,
PHP, JAVA dan masih banyak lagi. Namun yang
terpenting dari software ini sifatnya FREE alias
GRATIS.
Anda dapat mendownload “PHP DESIGNER 2006”
di alamat:
http://www.mpsoftware.dk/
NB: Jika anda menggunakan notepad
sebagai editor. Pastikan ketika hendak menyimpan
file pilihan Save As Type-nya adalah
All Files. Hal ini untuk menghindari tersimpannya
script kita sebagai file text biasa.
Mengenal HTML Lebih Jauh
Pengertian HTML
Seperti yang telah dijelaskan sebelumnya
bahwa HTML(Hyper Text Markup Language) adalah
simbol-simbol atau tag-tag yang dituliskan
dalam sebuah file yang dimaksudkan untuk
menampilkan halaman pada web browser.
Tag-tag HTML selalu diawali dengan <x> dan diakhiri
dengan </x> dimana x tag HTML
seperti b, i, u dan sebagainya. Namun ada juga tag yang
tidak diakhiri dengan tanda </x>
seperti tag <br>, <input> dan lainnya.
Sebuah halaman website akan diapit oleh
tag <html>……</html>. File-file HTML selalu
berakhiran dengan ekstensi *.htm atau
*.html. Jadi jika anda mengetik sebuah naskah dan
menyimpannya dengan ekstensi *.html maka
anda membuat file yang berformat HTML.
Menggunakan Atribut dari Tag
A. Tag <p>…</p>
Tag <p> digunakan untuk membuat
paragraf dalam sebuah halaman web. Kita semua tahu
kalau paragraph ada yang bertipe rata kiri, tengah, kanan dan justify.
B. Tag <font>…</font>
Fungsi tag <font> adalah untuk
memanipulasi baik jenis, ukuran, dan warna huruf. Pada bab 1
telah kita singgung penggunaan atribut
font.
C. Tag
<table>...</table>
Tag <table> adalah salah satu tag
yang memiliki atribut terbanyak. Lihat tabel daftar tag pada
bab 1 untuk melihat daftar atributnya.
Dalam tag <table> juga terdapat 2 tag yang penting
yang penting yaitu tag
<tr></tr> untuk membuat baris dan tag <td></td> untuk
membuat
kolom.Tag <table> adalah tag yang
penting dalam pendesainan sebuah tampilan situs. Jadi
anda harus cukup menguasai tag ini.
D. Tag
<form>...</form>
Tag <form> berguna untuk
mengirimkan(mem-post) variabel yang bersisi data ke file tujuan
yang memproses variabel tersebut. Tag-tag
yang biasa digunakan bersama tag form adalah tag
<input> dan <textarea>.
E. Tag <input>
Tag <input> memiliki atribut type
yang fungsinya sangat vital dalam output tampilan. Isi dari
atribut type dapat menentukan jenis
tampilan apakah itu textbox, password box, checkbox,
radio button dan sebagainya.
F. Tag
<select>...</select> dan <option>
Mengapa kita langsung membahas 2 tag?.
Pertanyaan yang bagus dan jawabannya sama
dengan dengan pembahasan diatas. Tag
select tidak bisa berdiri sendiri dan harus
menggandeng tag option untuk dapat
menampilkan output. Dan cara kerjanya hampir sama
dengan tag radio hanya saja tag select
lebih singkat.
G. Tag <a>...</a>
Anda tentu sering surfing di internet dan
mengklik suatu tulisan atau gambar yang menuju
halaman website lainnya. Tulisan atau
gambar itu adalah link. Ya, link adalah tulisan atau
gambar yang merujuk/membuka halaman suatu
website. Segala tulisan atau tag lainnya yang
diapit tanda <a> dan </a> akan
dianggap link oleh browser.
H. Tag
<body>...</body>
Seperti namanya body artinya tubuh. Maka
atribut yang diset pada tag body akan berpengaruh
pada seluruh tubuh/body dokumen. Pada tag
body terdapat beberapa atribut namun ada dua
yang terpenting yaitu background dan
bgcolor. Atribut background digunakan untuk
membuat sebuah gambar menjadi latar dari
halaman. Sedangkan bgcolor digunakan untuk
menset warna dari latar halaman website.
Kali ini yang akan dibahas hanyalah tag bgcolor
karena tag background nilainya sama
dengan tag image yang akan dibahas kemudian.
I. Tag <img>
Suatu website yang bagus pasti memiliki
gambar di dalamnya. Dan suatu waktu
anda tentu ingin menambahkan gambar
didalam website anda. Untuk menampilkan gambar
pada halaman dapat digunakan tag
<img>. Format file yang dapat didukung oleh tag img
bermacam-macam mulai BMP, JPG, GIF, TGA
dan lain-lain.Tag img memiliki beberapa atribut
yaitu
‐ src : letak file gambar yang akan ditampilkan
‐ border: tebal bingkai gambar
‐ height: menentukan tinggi image/gambar
‐ width: menentukan lebar image/gambar
Nilai dari atribut src jika letak
file gambar berada pada direktori yang sama dengan direktori file
html anda. Maka cukup tuliskan nama
filenya saja, contohnya src=”nama_file.jpg”. Dan jika
letak filenya berada pada sub
folder/direktori maka nilainya adalah
src=”sub_folder/nama_file.jpg”. Lalu bagaimana jika letaknya
pada folder/direktori diatas
file html saya?. Caranya hampir sama hanya
saja ditambahkan tanda ../(titik dua dan slash).
Yang artinya pindah satu folder keatas,
jika letaknya di dua folder diatas file html saya. Sama
tinggal menambah ../../ (artinya pindah
dua folder ke atas). Contohnya
src=”../nama_folder/nama_file.jpg”.
J. Tag <ol>...</ol>,
<ul>...</ul> dan <li>...</li>
Kali ini kita akan membahas 3 tag
sekaligus. Karena masing-masing tag tidak dapat dipisahkan.
Tag <ol> dan <ul> keduanya
membutuhkan tag <li> agar dapat menampilkan output. Tag-tag
ini berguna untuk menyusun suatu daftar
yang ingin anda tonjolkan pada pengunjung website.
HTML Tingkat Lanjut
Mengapa disebut tingkat lanjut ? Hal ini dikarenakan pada bahasan ini
akan dilanjutkan
bagaimana menggunakan grafik dalam halaman web. Tabel merupakan salah
satu yang akan
digunakan dalam pembuatan web. Dan dalam pembuatan tabel nanti Anda akan
mempelajari
bagian yang penting dalam pembuatan web yang dinamis yaitu tabel dan
form.
Ordered List <ol>
Digunakan untuk membuat daftar dimana tiap bagian memiliki nomor secara
berurut. Tag ini
menggunakan tag <OL> dan diakhiri dengan </OL>. Sedangkan
untuk tiap bagiannya
digunakan tag <LI>, dan tidak menggunakan penutup.
Ketika menggunkan OL ini maka penomoran dimulai 1,2,3,… , namun hal ini
dapat diubah
dengan menggunkan atribut TYPE pada tag <OL>
TYPE=1; daftar berurut dengan 1, 2, 3,
TYPE=I; daftar berurut dengan I, II, III,
TYPE=a; daftar berurut dengan a, b, c,
<HTML>
<HEAD>
<TITTLE>Ordered
List</TITTLE>
</HEAD>
<BODY>
Urutan
mobil berdasar peminat :
<OL>
<LI>Mercedest
Benz
<LI>BMW
<LI>Honda
<LI>Hyundai
</OL>
</BODY>
</HTML>
Unordered List <ul>
Dalam unordered list, tidak dijumpai urutan dalam suatu daftar. Setiap
bagian dari unordered list
ditandai dengan bullet yang merupakan default dari unordered list. Untuk
membuat tag ini
digunakan tag <UL> dan diakhiri dengan </UL> dan tiap
bagiannya digunakan <LI>. Juga bisa
digunakan tanda cakram/disk, lingkaran, dll.
<HTML>
<HEAD>
<TITTLE>Ordered
List</TITTLE>
</HEAD>
<BODY>
Urutan
mobil berdasar peminat :
<UL
TYPE=”square”>
<LI>Mercedest
Benz
<LI>BMW
<LI>Honda
<LI>Hyundai
</UL>
</BODY>
</HTML>
Grafik dalam Halaman Web <img>
Dalam HTML digunakan tag <IMG> untuk menampilkan gambar dalam
halaman web. Format
gambar yang paling sering digunakan dalam halaman web yaitu GIF dan
JPEG, dengan format
penulisan : <IMG SRC=”file_gambar” ALT=”nama_alternatif”>. Atribut
SRC digunakan untuk
menentukan sumber gambar. Sedangkan ALT digunakan sebagai teks pengganti
gambar.
Ada beberapa atribut dalam tag <IMG> yaitu :
• BORDER:
memberikan suatu batas atau border pada gambar defaultnya=0
• HEIGHT,WEIGHT:
menentukan tinggi dan lebar gambar dalam pixel
• HSPACE,VSPACE:
menentukan jarak spasi horizontal dan spasi vertical antara gambar
dengan obyek sekitarnya.
• ALIGN: mengatur
perataan gambar terhadap obyek disekelilingnya.
Table <table>
Table dapat Anda gunakan karena dapat menampilkan informasi dalam bentuk
yang ringkas dan
mudah dibaca. Tag awal yang digunakan adalah <TABLE> dan tag
penutupnya </TABLE>.
Tag <TABLE> mewakili beberapa bagian penting :
• <CAPTION>
…</CAPTION> digunakan untuk membentuk judul table. Judul table
akan terletak di luar table di bagian atas atau di bagian bawah.
• <TH>…</TH>
digunakan untuk meletakkan judul table di bagian paling atas atau
bagian paling kiri dari table.
• <TD>
…</TD> digunakan sebagai tempat menulis data atau informasi dalam table.
<html>
<head>
<title>Tabel</title>
</head>
<body>
<table>
<caption>seputar
liga italia</caption>
<tr>
<th>nama
klub</th>
<th>berita</th>
</tr>
<tr>
<td>Ac
milan</td>
<td>Ac
milan mengalahkan Intermilan di semifinal liga champion</td>
</tr>
<tr>
<td>Juventus</td>
<td>Juventus
juara liga italia musim 2002/2003</td>
</tr>
<td>
<tr>Roma</tr>
<tr>Roma
akan berhadapan dengan Milan di final copa italia</tr>
</td>
</table>
</body>
</html>
Table ALIGN dan WIDTH
Dalam perataan horizontal menggunakan atribut ALIGN, dimana bisa
bernilai left untuk
perataan kiri, right untuk perataan kanan. Untuk perataan vertical Anda
dapat menggunakan
VALIGN, bernilai TOP untuk perataan atas, bernilai MIDDLE untuk perataan
tengah dan
BOTTOM untuk perataan bawah. Sedangkan untuk WIDTH digunakan untuk
mengatur lebar
table biasanya dinyatakan dalam (%) atau dinyatakan dengan pixel yang
berarti ukuran
sesungguhnya.
<html>
<head>
<title>Tabel
dengan width dan align</title>
</head>
<body>
<table
width="88%" height="210">
<tr>
<td
width="30%" height="110" valign="top">lihatlah
valign="top"<br>
jangan
kamu malu pada sesuatu yang tidak kamu ketahui
</td>
<td
width="34%" height="110"
valign="middle">bandingkan
dengan
valign="middle"<br>
</td>
<td
width="36%" height="110"
valign="bottom">bagaimana dengan
valign="bottom"<br>
</td>
</tr>
</table>
</body>
</html>
Table CELLSPACING dan CELLPADDING
Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang
terdapat diantara dua
buah cell. CELLPADDING digunakan untuk mengatur jumlah spasi yang
terdapat antar batas/
border dengan isi atau teks di dalam cell tersebut.
<html>
<head>
<title>cellspacing
dan cellpadding</title>
</head>
<body>
<table
width="85%" border="3" cellspacing="5" cellpadding="5">
<tr>
<td
width="43%">baris 1, kolom 1</td>
<td
width="57%">baris1, kolom 2</td>
</tr>
<tr>
<td>baris
2, kolom 1</td>
<td>baris
2, kolom 2</td>
</tr>
</table>
</body>
</html>
Table COLSPAN dan ROWSPAN
Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1
kolom.
ROWSPAN digunakan untuk menghubungkan beberapa baris menjadi satu.
<html>
<head>
<title>colspan
dan rowspan</title>
</head>
<body>
<table
width="85%" border="3" cellspacing="5"
cellpadding="5">
<tr>
<td width="43%"
rowspan="2">baris 1, kolom 1 <p>baris 2, kolom 1</td>
<td
width="57%">baris 1, kolom 1</td>
</tr>
<tr>
<td
width="57%">baris 2, kolom 2</td>
</tr>
<tr>
<td
width="100%" colspan="2">baris 3, kolom 1 <p>
baris 3, kolom 2</td>
</tr>
</table>
</body>
</html>
Table COLOR
Selain warna pada background, border juga bisa ditentukan warnanya.
Untuk background
digunakan atribut BGCOLOR dan untuk memberi warna pada border digunakan
atribut
BORDER COLOR.
<html>
<body>
<table
width="100%" border="3" cellpadding="5"
cellspacing="5"
bordercolor="#FF0000">
<tr>
<td
width="50%" bgcolor="#808080"> </td>
<td
width="50%"> </td>
</tr>
<tr>
<td
width="50%"> </td>
<td
width="50%" bgcolor="#008080"> </td>
</tr>
</table>
<table
width="100%" border="3" cellpadding="5"
cellspacing="5"
bordercolorlight="008080"
bordercolordark="800080">
<tr>
<td
width="100%"> </td>
</tr>
</table>
</body>
</html>
Form <form>…</form>
Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta
masukan dari user untuk
dikirim ke server. Tag <FORM> membuat kerangka dan tag
<INPUT> menyediakan elemen
antarmuka dengan user. Untuk standar penulisan form adalah sebagai
berikut :
<FORM
METHOD =”POST/GET” ACTION =”URL”>
…
…
…
</FORM>
Atribut METHOD memiliki 2 nilai POST dan GET. Metode GET mengirimkan
data pada server
dengan cara meletakkan data pada bagian akhir URL yang ditunjuk. Metode
POST mengirimkan
datanya secara terpisah. Jika masukan banyak maka disarankan Anda
menggunakan POST.
ACTION akan berisi URL dari program yang dipanggil form tersebut.
Input teks <input type=”text”>
Textbox adalah salah satu jenis control untuk memasukkan data. HTML
menyediakan tag
<INPUT> dengan atribut TYPE=”text” untuk membuat kotak input.
Untuk atribut VALUE
digunakan untuk memberi nilai input, dan SIZE digunakan utuk menentukan
batas terpanjang
dari sebuah masukan.
Contoh :
<html>
<head>
<TITLE>form
input dengan textbox</TITLE>
<body>
<p>Rancangan
awal BUKU TAMU</p>
<table
border="0" cellpadding="0" cellspacing="2">
<tr>
<td
width="11%">Nama</td>
<td
width="3%">:</td>
<td
width="86"><input type="text" name="nama"
size="20"></td>
</tr>
<tr>
<td
width="11%" height="22">Alamat</td>
<td
width="3%">:</td>
<td
width="86"><input type="text"
value="jember" name="alamat"
size="20"></td>
</tr>
<tr>
<td
width="11%">Sekolah</td>
<td
width="3%">:</td>
<td
width="86"><input type="text"
name="sekolah" size="20"></td>
</tr>
</table>
</body>
</head>
</html>
Input Checkbox <input type=”checkbox”>
Anda juga bisa memberikan atribut TYPE dengan menggunakan Checkbox yang
berfungsi
untuk memberikan user pilihan.
Contoh :
15
<html>
<head>
<title>Check
Box</title>
</head>
<body>
<p>Berikan
poling !</p>
<p>Daftar
mobil</p>
<p>
<input
type="checkbox" name="c1" checked>mercedes<br>
<input
type="checkbox" name="c2" checked>bmw<br>
<input
type="checkbox" name="c3" checked>honda<br>
<input
type="checkbox" name="c4" checked>toyota
</p>
</body>
</html>
Input Radio Button <input type=”radio”>
Jika atribut TYPE=”checkbox” diganti dengan TYPE=”radio”, maka user
harus memilih salah
satu pilihan yang tersedia. User tidak bisa memilih lebih dari satu
pilihan. Atribut CHECKED
digunakan memberi tanda bahwa pilihan tersebut sedang diaktifkan.
Contoh :
<html>
<head>
<title>Radio
Button</title>
</head>
<body>
<p>berikan
piihan Anda</p>
<p>Rentang
Usia</p>
<p>
<input
type="radio" value="v1" checked name="R1">15
tahun<br>
<input
type="radio" value="v2" checked
name="R1">15-19 tahun<br>
<input
type="radio" value="v3" checked name="R1">19-25
tahun <br>
<input
type="radio" value="v4" checked
name="R1">25-30 tahun<br>
</p>
</body>
</html>
02.06
Unknown
