Form

Sebuah form merupakan bagian dari dokumen web yang dapat diisikan oleh pengguna, untuk memeberikan informasi tertentu dari pengguna kepada website. Sebuah form sangat penting dalam sebuah aplikasi web, terutama aplikasi web dinamis, karena form merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna.

Mengetahui bagaimana membuat form pada HTML dengan benar penting untuk memastikan tidak terdapat kesalah pahaman pengguna dalam menggunakan form yang disediakan. Bagian ini akan menjelaskan bagiamana membuat form dengan HTML, elemen-elemen form yang disediakan, serta bagaimana elemen-elemen tersebut digunakan. Pemrosesan form secara dinamis tidak akan dibahas, dan properti CSS untuk memperindah tampilan form akan dibahas pada bagian berikutnya.

Inisialisasi Form

Form pada HTML dibuat dengan menggunakan elemen form. Elemen form harus membungkus seluruh elemen-elemen masukan form lain untuk memastikan masukan informasi pengguna dapat dibaca oleh aplikasi web. Pembungkusan elemen-elemen masukan dilakukan sama seperti kita membungkus elemen-elemen lain pada div:

<form action="#" method="post">

    ....

</form>

Seperti yang dapat dilihat pada kode di atas, terdapat dua atribut yang wajib dimiliki oleh elemen form. Atribut pertama ialah action, yang berfungsi untuk memberitahukan browser alamat pengiriman dari data-data yang diisikan pengguna di dalam form. Idealnya parameter ini diisikan dengan sebuah URL pada server yang melakukan pemrosesan data.

Atribut kedua yang wajib diisikan ialah atribut method. Atribut ini memberitahukan browser bagaimana data akan dikirimkan kepada server yang alamatnya diisikan pada action. Terdapat dua nilai yang dapat diisikan pada bagian ini, yaitu get dan post. Keuda nilai ini sendiri merupakan protokol HTTP yang digunakan untuk pengiriman data.

Elemen Masukan Form

Terdapat banyak elemen-elemen masukan pada form, yang dapat digunakan oleh pengguna untuk mengisikan data dengan yang berbeda-beda jenisnya. Bagian ini akan membahas tiap-tiap elemen masukan form, beserta dengan cara pembuatannya.

Elemen Masukan Teks: TextField dan TextArea

Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan menggunakan dua buah elemen: textarea dan input. textarea digunakan untuk masukan teks yang terdiri dafi beberapa baris, sementara input digunakan untuk masukan teks yang hanya satu baris.

Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya langsung memasukkan tag-nya saja:

<textarea>

</textarea>

selain memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag untuk mendapatkan nilai masukan standar:

<tr>
    <td valign="top">Komentar</td>
    <td valign="top">:</td>
    <td valign="top"><textarea cols="20" rows="5">Isikan komentar anda disini</textarea></td>
</tr>

Pengaturan panjang dan lebar dari textarea dapat dilakukan melalui CSS, dengan menggunakan properti height dan width.

Walaupun dapat mengisikan teks dengan banyak sekaligus, textarea tentunya tidak dapat digunakan untuk seluruh kasus pengisian data. Seringkali kita menginginkan pengguna hanya mengisikan data singkat, tanpa isi teks yang banyak. Untuk jenis masukan seperti itu, kita dapat menggunakan elemen input:

<td>Nama </td>
    <td>:</td>
    <td><input type="text" name="Nama" size="25" ></td>

Perhatikan juga bahwa kita menggunakan atribut type pada elemen ini untuk menentukan data-data yang akan diisikan. Terdapat banyak jenis tipe data yang dapat kita isikan, dan browser akan menyesuaikan jenis masukan teks yang ada, sesuai dengan atribut type yang kita tentukan. Nilai-nilai yang dapat diisikan pada atribut type yaitu:

1. color
2. datetime-local
3. number
4. tel
5. week
6. date
7. email
8. range
9. time
10. datetime
11. month
12. search
13. url
14. password
15. text
16. file

Elemen Pemilihan: Radio Button, Checkbox, dan Dropdown

Selain mengisikan data berupa teks, seringkali kita juga menemukan data berupa pilihan, misalnya jenis kelamin atau hobi. Pengisian data seperti ini biasanya memberikan beberapa pilihan kepada pengguna, dan pengguna dapat memilih satu atau beberapa pilihan yang diberikan.

1. Radio Button

Jika kita ingin memberikan pilihan kepada pengguna, dan memastikan pengguna hanya memilih satu pilihan saja, kita dapat menggunakan radio button. Radio button dibuat dalam HTML dengan menggunakan elemen input, dengan atribut type bernilai :code`radio`:

<tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td><input type="radio" name="Kelamin" value="Laki-laki" />
    Laki-Laki
    <input type="radio" name="Kelamin" value="Perempuan" />
    Perempuan</td>
</tr>

dalam pembuatan elemen radio button, kita juga wajib menambahkan dua atribut lainnya, yaitu name dan value. Atribut name digunakan untuk memberitahukan browser bahwa radio button dengan atribut name yang sama adalah merupakan kumpulan radio button yang sama, sehingga pengguna tidak boleh memilih dua buah pilihan pada radio button tersebut.

Atribut value digunakan untuk menyimpan nilai yang ingin kita kirimkan ke server.

2. CheckBox

Jika ingin memberikan pengguna kemampuan untuk memilih banyak pilihan sekaligus, kita dapat menggunakan elemen checkbox. Elemen ini sama seperti radio button, dibuat dengan elemen input yang nilai atribut type-nya berisikan checkbox.

<tr>
    <td>Hobi</td>
    <td>:</td>
    <td><input type="checkbox" name="Olahraga" value="olahraga" />
    olahraga
    <input type="checkbox" name="Membaca" value="Membaca" />
    Membaca
    <input type="checkbox" name="komputer" value="Komputer" />
    Komputer
    <input type="checkbox" name="Musik" value="Musik" />
    Musik
    <input type="checkbox" name="Lain-lain" value="Lain-Lain" />
    Lain-Lain</td>
</tr>

Seperti yang dapat dilihat, atribut name dan value juga wajib dimiliki oleh checkbox, dengan alasan yang sama untuk radio button.

3. Dropdown List

Meskipun dapat memberikan pilihan nilai kepada pengguna, radio button maupun checkbox sangat tidak ideal untuk digunakan pada pilihan yang memiliki nilai yang sangat banyak. Misalnya, pilihan negara yang ditinggali oleh pengguna dari ratusan negara yang ada di dunia akan jika ditampilkan pada radio button akan menyebabkan daftar yang dipaparkan sangat banyak dan sulit dibaca oleh pengguna. Dalam kasus seperti ini lebih baik kita menggunakan dropdown list.

Pembuatan elemen dropdown dilakukan dengan menggabungkan dua elemen, yaitu select dan option. Elemen select membungkus seluruh elemen option yang ada, untuk membentuk sebuah dropdown. Elemen option sendiri merupakan nilai dari dropdown yang diinginkan. Perhatikan kode di bawah:

<select name="country">

    <option value="indonesia">Indonesia</option>

    <option value="malaysia">Malaysia</option>

    <option value="filipina">Filipina</option>

    <option value="vietnam">Vietnam</option>

</select>

yang akan menghasilkan:

dan jika ingin memungkinkan pengguna memilih beberapa pilihan kita dapat menambahkan atribut multiple pada elemen select:

<select name="country" multiple>

    <option value="indonesia">Indonesia</option>

    <option value="malaysia">Malaysia</option>

    <option value="filipina">Filipina</option>

    <option value="vietnam">Vietnam</option>

</select>

Tombol pada Form

Setelah pengguna mengisikan data-data yang diminta oleh dokumen web, tentu saja pengguna harus mengirimkan data tersebut ke server. Pengiriman data dapat dilakukan pengguna melalui tombol khusus yang disediakan oleh HTML.

Tombol Pengiriman

Pembuatan tombol pengiriman juga dilakukan dengan menggunakan elemen input, yang atribut type-nya diisikan dengan nilai submit, seperti berikut:

<input type="submit" name="submit" value="Masukkan Form">

Perhatikann bahwa berbeda dengan elemen-elemen input sebelumya, nilai dari atribut value diproses menjadi teks dari tombol yang ditampilkan ke pengguna. Hal ini menyebabkan kita tidak lagi perlu menambahkan teks setelah elemen form, seperti pada radio button ataupun checkbox.

Tombol Penghapus Input

Ketika sedang mengisikan form, seringkali pengguna menyadari bahwa data-data yang diisikannya mayoritas adalah data yang salah. Pada saat ini biasanya pengguna akan menghapus seluruh isi dari form, satu per satu. Untungnya HTML telah memberikan fitur untuk menghapus seluruh isi form sekaligus, melalui tombol penghapus input.

Pembuatan tombol dilakukan sama persis seperti pada tombol pengiriman, dengan perbedaan nilai pada atribut type, yang diisikan dengan reset pada tombol penghapusan ini.

<input type="reset" name="reset" value="Kosongkan Form">

Contoh skrip untuk form :

<html>

<head>

      <title>Belajar Form</title>

   </head>

   <body>

      <form>

         <label for="nama_depan">Nama Depan</label>

         <input type="text" name="nama_depan" id="Nama_Depan"><br>

         <label for="nama_belakang">Nama Belakang</label>

         <input type="text" name="nama_belakang" id="nama_belakang"><br>
         Jenis Kelamin

            <input type="radio" name="Jenis_Kelamin" value="Pria" id="pria">

            <label for="pria">Pria</label>

            <input type="radio" name="Jenis_Kelamin" value="Wanita" id="wanita">

            <label for="wanita">Wanita</label><br>

            <label for="pendidikan">Pendidikan Terakhir</label>

            <select name="pendidikan" id="pendidikan">

               <option value="">Silahkan Pilih</option>

               <option value="SD">SD</option>

               <option value="SLTP">SMP</option>

               <option value="SLTA">SMA/SMK/STM</option>

               <option value="D3">D3</option>

               <option value="S1">S1</option>

               <option value="S2">S2</option>

               <option value="S3">S3</option>

            </select><br>

          Komik Favorit

            <input type="checkbox" name="komik" value="Naruto" id="Naruto">

            <label for="Naruto">Naruto</label>

            <input type="checkbox" name="komik" value="One_P" id="One_P">

            <label for="One_P">One Piece</label>

            <input type="checkbox" name="komik" value="Bleach" id="Bleach">

            <label for="bleach">Bleach</label>

            <input type="checkbox" name="komik" value="Deat_N" id="Death_N">

            <label for="Death_N">Death Note</label>

            <input type="checkbox" name="komik" value="Fairy_Tail" id="Fairy_Tail">

            <label for="Fairy_Tail">Fairy Tail</label>

            <input type="checkbox" name="komik" value="Conan" id="Conan">

            <label for="Conan">Conan</label>

            <input type="checkbox" name="komik" value="Hunter" id="Hunter">

            <label for="Hunter">Hunter X Hunter</label><br>

        <textarea rows="4" cols="50" id="deskripsi">Deskripsikan diri anda

        </textarea><br><br>

        <label for="deskripsi"></label>

          <input type="submit" value="Submit">

          <input type="reset" value="Reset">

      </form>

   </body>

</html>

Membuat Tabel
Tabel adalah sarana untuk menempatkan informasi agar mudah dibaca dan dipahami. Untuk memahami
pembuatan tabel pada HTML, Anda dapat melihat skrip dibawah ini.
<HEAD>
<TITLE>contoh12.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD>Sel 1,1</TD>
<TD>Sel 1,2</TD>
</TR>
<TR>
<TD>Sel 2,1</TD>
<TD>Sel 2,1</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tag <TABLE> memiliki banyak atribut diantaranya adalah BORDER. BORDER digunakan untuk
mengatur ketebalan garis pembatas antar sel-sel dalam tabel. Atribut lainnya yang penting adalah :
• width
Atribut width menyatakan lebar tabel. Apabila dinyatakan dalam persen (%), maka lebar ditentukan
dalam persentase terhadaplebar layar browser.
• Cellspacing
Atribut cellspacing menyatakan jarak antara sel satu dan lainnya.
• Cellpading
Atribut cellpading menyatakan jarak antara isi sel dengan batas dari sel tersebut.
Untuk membuat baris pada tabel, HTML menyediakan pasangan tag <TR> untuk awal baris dan </TR>
untuk mengakhirinya. Tag <TR> memiliki atribut ALIGN untuk mengatur alignment horizontal dan
VALIGN untuk mengatur alignment vertical. Setelah Anda membuat kolom pada baris yang
bersangkutan dengan menggunakan garis pasangan tag <TD> dan </TD>.
Dalam membuat suatu tabel, Anda juga dapat mengatur lebar untuk tabel dan juga masing-masing
kolomnya dengan menggunakan atribut WIDTH.
</HTML>
<HEAD>
<TITLE>contoh13.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH="80%">
<TR>
<TD WIDTH="70%">Sel 1,1</TD>
<TD WIDTH="30%">Sel 1,2</TD>
</TR>

<TR>
<TD>Sel 2,1</TD>
<TD>Sel 2,1</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Cellspacing dan Cellpading
Atribut cellspacing digunakan untuk mengatur jarak atau
spasi antar sel dengan sel lainnya dan antar sel dengan
batas tabel. Sedangkan atribut cellpading digunakan
untuk mengatur spasi antara batas sel dengan teks di
dalam sel.
Contoh penggunaan atribut cellspacing dan cellpading
diperlihatkan pada gambar dan skrip berikut ini.
<HTML>
<HEAD>
<TITLE>contoh14.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH="80%" CELLSPACING=10
CELLPADDING=20>
<TR>
<TD WIDTH="85%">Penggunaan Internet menjadi
utama dalam kegiatan perusahaan</TD>
<TD WIDTH="15%">-</TD>
</TR>
<TR>
<TD>Perusahaan banyak memanfaatkan e-mail
sebagai komunikasi mereka.</TD>
<TD>-</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Rowspan dan Colspan
Atribut rowspan digunakan untuk menggabungkan
beberapa buah baris menjadi satu. Sedangkan atribut
colspan digunakan untuk menggabungkan beberapa
kolom menjadi satu. Atribut-atribut ini di pakai
berdasarkan tag <TD>. Perhatikan contoh tersebut:
<HTML>
<HEAD>
<TITLE>contoh15.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>

<TD COLSPAN=2>Sel 1,1</TD>
<TD>Sel 1,2</TD>
<TD>Sel 1,3</TD>
</TR>
<TR>
<TD ROWSPAN=3>Sel 2,1</TD>
<TD>Sel 2,1</TD>
<TD>Sel 2,2</TD>
<TD>Sel 2,3</TD>
</TR>
<TR>
<TD>Sel 3,1</TD>
<TD>Sel 3,2</TD>
<TD>Sel 3,3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Memasukkan Gambar
Gambar adalah elemen yang sangat penting dalam menampilkan informasi. HTML menyediakan tag
<IMG> untuk menampilkan gambar pada halaman web Anda.
<IMG SRC=”gambar1.gif” ALT=”gambar1”>

Perintah HTML diatas akan menampilkan gambar gambar1.gif dan menampilkan teks “gambar 1”
apabila browser mematikan fasilitas penampil grafik. Ekstensi grafik yang biasa di tampilkan oleh
HTML adalah GIF, JPG, dan BMP.
Anda juga dapat menggabungkan grafik dengan tag <A> untuk membuat link dari gambar Anda.
<IMG SRC=”gambar1.gif” ALT=”gambar1” HREF=”www.yahoo.com”>
Atribut ALT dipakai untuk menampilkan teks pengganti gambar untuk browser yang tidak mendukung
penggunaan gambar atau apabila client sengaja mematikan fasilitas tersebut.
Anda juga dapat menggunakan atribut align untuk mengatur posisi gambar terhadap teks yang
bersebelahan. Perhatikan contoh berikut :
<HTML>
<HEAD>
<TITLE>contoh10.htm</TITLE>
</HEAD>
<BODY>
<H1>Pelatihan Situs Web Bisnis</H1>
<BR>Pergi ke web site <IMG SRC="sample.gif" ALIGN="MIDDLE"> <A
HREF="www.pelatihan.com">Pelatihan Situs Web Bisnis</A>
</BODY>
</HTML>
Pada contoh HTML di atas, align untuk gambar adalah tengah. Anda dapat mencobanya untuk align dan
align bottom untuk membandingkannya.
Bila dirasa gambar Anda terlalu kecil atau terlalu besar, Anda dapat menentukan sendiri lebar dan panjang gambar mengatur property WIDTH dan HEIGHT pada tag <IMG>.
<HTML>
<HEAD>
<TITLE>contoh12.htm</TITLE>
</HEAD>
<BODY>
<H1>Pelatihan Situs Web Bisnis</H1>
<BR>Pergi ke web site <IMG SRC="sample.gif" ALIGN="MIDDLE" WIDTG=50
HEIGHT=50> <A HREF="www.Pelatihan.com">Pelatihan Situs Web Bisnis</A>
</BODY>
</HTML>

Pengantar HTML dan Link

Memulai HTML
HTML adalah bahasa yang sangat tepat dipakai untuk menampilkan informasi pada halaman Web
karena HTML menampilkan informasi dalam bentuk hypertext dan juga mendukung sekumpulan
perintah yang dapat digunakan untuk mengatur tampilnya informasi tersebut.
Sesuai dengan namanya, bahasa ini menggunakan tanda (markup)untuk menandai perintah-perintahnya.
Saat ini banyak sekali aplikasi yang dapat digunakan untuk membuat Web Page secara mudah, seperti
Microsoft FrontPage, Adobe Golive dan lainnya. Namun demikian untuk seorang Web Developer harus
memiliki kemampuan dasar menguasi perintah HTML
Untuk dapat menggunakan HTML, Anda membutuhkan beberapa hal, diantaranya adalah:
1]Anda memerlukan teks editor untuk mengetikkan HTML Anda. Klik Start | Program kemudian
Accessories lalu pilih Notepad
2]Anda membutuhkan sebuah web browser untuk mempublikasikan HTML Anda. Anda dapat
menggunakan Microsoft Internet Explorer.
3]Anda membutuhkan tempat penyimpanan. Gunakan hard disk, floppy disk, atau web server. Anda
tidak harus bekerja online dengan internet, Anda dapat menulis HTML kemudian menggunakan
web browser secara offline di komputer.

Struktur Dokumen HTML
Di bawah ini adalah struktur dari dokumen HTML :
<HTML>
<HEAD>
<TITLE>contoh1.htm</TITLE>
</HEAD>
<BODY>
Kepala atau kop dokumen
<p>
Isi dokumen
</BODY>
</HTML>
Setelah selesai klik menu "File" menu dan pilih "Save As" . Akan muncul kotak Save yang akan
menyimpan dokumen Anda. Lalu ketikkan contoh1.htm . Pada kotak yang paling bawah Anda dapat
melihat "Save file as Type" or "Save as Type". Defaultnya adalah .txt, jadi Anda harus mengubahnya
ke All Files(*.*). Lalu Anda dapat mengklik Save.
Buka Microsoft Internet Explorer dengan mengklik Start, Program lalu pilih Internet Explorer. Internet
Explorer akan terbuka lalu Anda dapat memilih menu File, Open lalu cari lokasi file di disket Anda.
Struktur di atas diapit oleh tag <HTML> dan </HTML> yang menandai awal dan akhir dari sebuah
dokumen yang digunakan untuk menyisipkan informasi mengenai dokumen, misalkan versi, revisi dan
sebagainya. Sedangkan bagian yang diapit oleh tag <TITLE> dan </TITLE> menunjukkan judul dari
halaman web Anda.
Bagian kedua yang diapit <BODY> dan </BODY> berisi dokumen atau informasi yang hendak
disajikan.

Headings
Heading digunakan untuk menampilkan nama bab atau bagian tertentu yang dianggap sebagai topik
utama. Pada HTML terdapat enam level heading mulai dari tag <H1> sampai dengan <H6>. Anda juga
dapat menggunakan tag untuk mengatur ukuran font, misalkan yang terbesar dengan <H1> atau
membuatnya paling kecil dengan <H6> namun tag ini bukan digunakan untuk keperluan tersebut.

Mengatur Posisi Heading
Posisi heading pada dokumen HTML dapat Anda tentukan sendiri. Artinya teks yang berfungsi sebagai
heading dapat Anda tempatkan di kiri, kanan, atau di tengah dalam dokumen.Untuk mengatur posisi
heading, Anda dapat menggunakan atribut ALIGN pada tag heading. Nilai dari atribut ALIGN dapat
diisi dengan salah satu nilai, left untuk perataan sebelah kiri, right untuk perataan sebelah kanan, atau
center untuk menuliskannya tepat di tengah.
Berikut ini adalah contoh penulisan atribut align pada tag heading:
<HTML>
<HEAD>
<TITLE>contoh2.htm</TITLE>
</HEAD>
<BODY>
<H1 Align="Left"> Heading rata kiri </H1><BR>
<H2 Align="Right"> Heading rata kanan </H2><BR>
<H4 Align="Center"> Heading rata tengah </H4>
</BODY>
</HTML>

Membuat Baris Baru
Line break <BR> adalah tag yang berfungsi untuk membuat baris baru pada dokumen HTML tag
<BR> ini membuat baris baru tanpa memberi baris kosong.

Membuat Garis Horizontal
Horizontal Rule <HR> adalah tag tunggal yang berfungsi untuk membuat garis horizontal. Tag <HR>
akan memberikan garis horizontal sepanjang baris kosong.

Membuat Daftar/List
Untuk membuat daftar atau list, HTML menyediakan empat macam list, yaitu :
- unordered list
- ordered list
- definisi
- menu

Unordered List
Unordered listbiasanya ditandai dengan pemakaian bullet untuk menandai sebuah item dari list. Bullet
adalah karakter tertentu yang berupa karakter symbol, misalkan bullet dengan bentuk tanda panah,
rumah, segitiga, dan sebagainya.
Untuk membuat list dengan menggunakan sebuah bullet di gunakan tag <UL> (unordered list) sebagai
tanda tag awal dan </UL> sebagai tanda tag penutup. Untuk item-item di dalam list harus diawali
dengan tag <LI> dan tidak memerlukan tanda akhir tag.
Untuk lebih jelasnya Anda dapat mengetikkan contoh sebagai berikut:
<HTML>
<HEAD>
<TITLE> contoh3.htm</TITLE>
</HEAD>
<BODY>
<UL>
<LI>MS-Word
<LI>MS-Excel
<LI>MS-Access
<LI>MS-PowerPoint
</UL>
</BODY>
Bentuk default tanda item dalam tag <UL> adalah bullet. Untuk mengubah Anda dapat menggunakan
atribut TYPE dengan diikuti nilai kontanta. Konstanta ini mewakili karakter symbol yang akan
digunakan.
Sedangkan item-item dari daftar tadi ditandai dengan memberikan tag <LI> perhatikan contoh berikut:
<HTML>
<HEAD>
<TITLE>contoh4.htm</TITLE>
</HEAD>
<BODY>
<UL>
<LI> MS-Word(TYPE=square)
<LI> MS-Excel(TYPE=disk)
<LI> MS-Access(TYPE=circle)
<LI> MS-PowerPoint
</UL>
</BODY>
</HTML>

Ordered List
Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered list dimulai dengan
tag <OL> dan diakhiri dengan tag </OL>. Perhatikan contoh berikut:
<HTML>
<HEAD>
<TITLE>contoh5.htm</TITLE>
</HEAD>
<BODY>
<OL TYPE=I START=3>
<LI TYPE=1>MS-Word
<LI TYPE=A>MS-Excel
<LI>MS-Access
<LI TYPE=i>MS-PowerPoint
<LI>MS-PhotoDraw
</OL>
</BODY>
</HTML>
Ordered list mempunyai beberapa tipe penomoran yang dapat digunakan, yaitu:
• 1 ⇒1,2,3….
• A ⇒A,B,C,….
• A ⇒a,b,c,….
• I ⇒I,II,III,….
• i ⇒i,ii,iii,….
Apabila Anda menuliskan atribut TYPE pada tag <OL> maka tipe tersebut akan dipakai sebagai default
dari seluruh item. Namun Anda juga dapat memberikan tipe untuk masing-masing item, yaitu dengan
memberikan atribut TYPE pada tag <LI>. Atribut START dipakai padatag <OL> dan digunakan
untuk menentukan nomor dari item pertama.

Definition List
Definition list adalah daftar yang mempunyai keterangan pada itemnya. Untuk memakai defenition list
Anda dapat menggunakan pasangan tag <DL> dan </DL>. Tag ini bekerja dibantu oleh tag lainnya,
yaitu tag <DT> yang menandakan item yang dijelaskan dan tag <DD> menyatakan defenisi dari item.
Perhatikan contoh berikut
<HTML>
<HEAD>
<TITLE>contoh6.htm</TITLE>
</HEAD>
<BODY>
<DL>
<DT>MS-PowerPoint<DD>Merupakan program pengolah kata dari Microsoft.
<DT>MS-Excel<DD>Merupakan program Spreadsheet.
<DT>MS-Access<DD>Merupakan program Database.
</DL>
</BODY>
</HTML>

Membuat Paragraf
Anda dapat mulai meletakkan informasi Anda pada halaman web. Untuk keperluan ini HTML
menyediakan tags <P>. Perintah ini mempunyai beberapa atribut.
Tag <P> umumnya untuk menandai suatu paragraf baru. Anda juga dapat menggunakan tag <BR> untuk
memulai baris baru, namun pemakaian tag <P> terutama digunakan untuk membuat group paragraf
dengan formatting style tertentu. Berikut ini adalah contoh paragraph pada HTML.
<HTML>
<HEAD>
<TITLE>contoh8.htm</TITLE>
</HEAD>
<BODY>
<P ALIGN="center">
Keberhasilan Microsoft dalam memasarkan produknya dapat diacungkan jempol,
dibuktikan dengan banyak perusahaan yang menggunakan produknya.
<P ALIGN="right">
Salah satunya adalah Microsoft Word yang menjadi standar pengolah kata di
banyak perusahaan.
<P ALIGN="left">
Microsoft Word dilengkapi dengan banyak feature untuk memudahkan penggunanya.
</P>
</BODY>
</HTML>
Sama halnya dengan tag heading, tag paragraf <P> memiliki atribut untuk mengatur alignment atau
pengatur posisi, yaitu left untuk meratakan paragrap di kiri, right untuk perataan sebelah kanan, dan
center untuk meletakkan pada posisi tengah horizontal.

Menghubungkan ke Halaman Web Lain
Untuk menghubungkan halaman web Anda dengan halaman lainnya, HTML menyediakan pasangan tag
<A>dan </A> pemakaian tag ini yang diikuti dengan atribut HREF akan memungkinkan halaman web
Anda terhubung ke halaman web lainnya seperti pada contoh berikut:
Ini adalah link ke <A HREF=http://www.yahoo.com> Your Searching Web </A>
Anda juga dapat melakukan link ke bagian lain dari halaman web caranya menandai suatu daerah
dengan memberikan atribut NAME pada tag <A>, misalkan:
<A NAME=”Tanda1”>Bagian ini akan ditandai.</A>
Kemudian untuk membuat link ke bagian tersebut, berikan kode seperti berikut:
<A HREF=”#Tanda1”>Menuju ke bagian yang ditandai.</A>