Dasar-dasar HTML


26/09/2016 23:45:39 1040

HTML merupakan singkatan dari Hypertext Markup Language ialah bahasa standar yang digunakan untuk menampilkan halaman web pada web browser. Bahasa HTML bersama dengan CSS (Cascade Style Sheet) dan Javascript merupakan bahasa yang berjalan pada sisi klien, yakni dieksekusi pada web browser dan kode-kodenya dapat dilihat langsung oleh pengguna (melalui fitur view source pada web browser).

Struktur Dokumen HTML

Suatu halaman HTML memiliki struktur dasar yang terdiri dari beberapa tag HTML seperti <html>, <head>, <title> dan <body>. Berikut ialah dokumen HTML sederhana:

<html>
    <head>
        <title>Struktur Dokumen HTML</title>
    </head>

    <body>
        Konten yang akan diberikan kepada pengguna diletakan disini
    </body>
</html>

Formatting Text

Kegunaan halaman web ialah untuk menampilkan informasi. Informasi yang ditampilkan dapat berupa text, gambar, ataupun file multimedia. Namun, pada umumnya ialah dalam bentuk text. Pada HTML terdapat banyak tag yang digunakan untuk memformat text, namun yang paling banyak digunakan ialah sebagai berikut:

Paragraph <p>

Suatu informasi yang berisi tulisan-tulisan dibagi dalam paragraf-paragraf yang mana tiap paragraf terdapat kalimat utama dan kalimat deskripsi. Untuk membuat paragraf di HTML dapat menggunakan tag <p>. Tag <p> memiliki tag penutup </p> dan text yang diformat dalam bentuk paragraf berada diantara tag <p> dan </p>. Berikut ialah contoh pembuatan paragraf pada HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero delectus nobis pariatur aut qui ut, ducimus temporibus repellat, non dignissimos dicta totam, consectetur eos asperiores unde ratione. Ut, quia quibusdam!</p>

Tag <p> memiliki atribut align yang memiliki nilai justiftydigunakan untuk menyusun paragraf menjadi rata kiri kanan, right yang digunakan untuk menyusun text pada paragraf menjadi rata kanan, left yang digunakan untuk menyusun text pada paragraf menjadi rata kiri dan center yang digunakan untuk menyusun text pada paragraf menjadi rata tengah. Berikut ialah contoh dari penggunaan atribut align pada tag <p>:

<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero delectus nobis pariatur aut qui ut, ducimus temporibus repellat, non dignissimos dicta totam, consectetur eos asperiores unde ratione. Ut, quia quibusdam!</p>

List (Daftar)

Ketika mengetik pada Microsoft Office Word pasti kita telah mengenal bullet dan Numbering yang mana dikenal juga dengan sebutan daftar atau list. Pada HTML kadang juga kita memerlukan itu untuk membuat sebuah daftar, misalkan daftar barang yang akan dibeli atau daftar pekerjaan yang akan dilakukan. Terdapat dua jenis daftar yakni yang disusun dengan penomoran menggunakan simbol atau disebut dengan istilah bullet dan daftar yang disusun dengan penomoran menggunakan angka atau abjad atau dikenal juga dengan sebutan numbering.

Pembuatan daftar dengan penomoran menggunakan simbol dapat menggunakan <ul> yang menandakan penggunaan bullet didalam penomoran dan <li> yang menandakan item didalam penomoran tersebut. Masing-masing tag-tag tersebut ditutup dengan menggunakan </ul> dan </li>. Berikut ialah contoh penggunaannya:

<ul>
    <li>Bayam</li>
    <li>Kangkung</li>
    <li>Sawi</li>
    <li>Daun Katup</li>
</ul>

Sedangkan daftar dengan penomoran menggunakan numbering dapat menggunakan <ol> yang menandakan penggunaan numbering didalam penomoran dan <li> yang menandakan item didalam penomoran tersebut. Masing-masing tag-tag tersebut ditutup dengan menggunakan </ul> dan </li>. Sehingga perbedaan antara bullet dan numbering ialah terletak pada tag pembukanya yakni menggunakan tag <ul> untuk bullet dan <ol> untuk penomoran yang numbering. Berikut ialah contoh penggunaannya:

<ol>
    <li>Bayam</li>
    <li>Kangkung</li>
    <li>Sawi</li>
    <li>Daun Katup</li>
</ol>

Untuk penomoran dengan menggunakan tag <ol> terdapat atribut type yang digunakan untuk merubah tipe dari penomoran seperti pada tabel berikut:

Tipe Deskripsi
Type="1" Penomoran dengan angka (default)
Type="A" Penomoran dengan huruf Romawi
Type="a" Penomoran dengan huruf kecil
Type="I" Penomoran dengan huruf Romawi Kapital
Type="i" Penomoran dengan huruf Romawi Kecil

Contoh penggunaan atribut diatas ialah sebagai berikut:

<ol type="A">
    <li>Bayam</li>
    <li>Kangkung</li>
    <li>Sawi</li>
    <li>Daun Katup</li>
</ol>

Tabel

Dalam suatu halaman ada kalanya kita menampilkan data dalam bentuk tabular yakni dalam bentuk tabel. Pada HTML terdapat tag yang digunakan untuk membuat tabel yakni dengan menggunakan tag-tag <table>, <tr>, <th>, dan <td>. Tag <table> digunakan untuk awal pendeklarasian pembuatan tabel, sedangkan untuk membuat baris dapat menggunakan <tr>, sedangkan untuk isinya menggunakan tag <td> atau <th>. Tag <th> disebut juga dengan tabel header sedangkan tag <td> untuk isi dari tabel tersebut. Berikut ialah contoh dari tabel:

<table>
    <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Telpon</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rofilde Hasudungan</td>
        <td>0822XXXXX</td>
    </tr>
    <tr>
        <td>2</td>
        <td>BJ Habibie</td>
        <td>0812XXXXX</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Susilo Bambang Yudoyono</td>
        <td>0811XXXXX</td>
    </tr>
</table>

Tag <table> memiliki beberapa atribut yakni:

Atribut Deskripsi
cellspacing Digunakan untuk membuat jarak antara cell (td atau th)
cellpadding Digunakan untuk membuat jarak antara konten dengan tepi cell(td atau th)
border Digunakan untuk memberikan border pada tabel

Berdasarkan atribut diatas berikut ialah implementasi penggunaan atribut:

<table border="1" cellspacing="0" cellpadding="5">
    <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Telpon</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rofilde Hasudungan</td>
        <td>0822XXXXX</td>
    </tr>
    <tr>
        <td>2</td>
        <td>BJ Habibie</td>
        <td>0812XXXXX</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Susilo Bambang Yudoyono</td>
        <td>0811XXXXX</td>
    </tr>
</table>

Selain tag <table>, tag <th> ataupun <td> pun memiliki beberapa atribut yang sangat berguna, seperti pada tabel dibawah ini:

Atribut Deskripsi
colspan Digunakan untuk menggabungkan (merge) kolom, nilainya dapat berupa 2, 3, ..., n, dimana nilai tersebut menandakan jumlah kolom yang akan digabung
rowspan Digunakan untuk menggabungkan (merge) baris, nilainya dapat berupa 2, 3, ..., n, dimana nilai tersebut menandakan jumlah baris yang akan digabung
align Digunakan untuk mengatur *align* dari text dalam cell, nilainya dapat berupa "left", "right", "center", dan "justify"

Form

Dalam aplikasi web adakalanya kita memerlukan inputan atau masukan dari pengguna. Untuk melakukan hal itu kita dapat memanfaatkan form HTML. Form HTML terdiri dari tag-tag seperti <form>, <input>, <textarea> dan <select> yang mana penggunaannya disesuaikan berdasarkan data yang akan dikoleksi. Berikut ialah komponen dari form:

Buka dan Tutup Form

Untuk membuat form menggunakan tag <form> dan diakhiri dengan tag penutup </form>. Berikut ialah atribut dari tag <form>:

Atribut Deskripsi
action Tujuan dari form ketika dikirim.
method Method yang digunakan untuk mengirim. Terdapat dua method yakni GET dan POST
enctype Digunakan ketika form terdapat inputan berupa upload file. Nilai dari atribut ini dapat berisi `multipart/form-data`

Contoh dari form ialah sebagai berikut:

<form action="proses.php" method="POST" enctype="multipart/form-data">
    <!-- Semua Inputan Ada Disini -->
</form>

Input Text

Input text digunakan untuk menerima masukan dalam bentuk text dengan panjang kira-kira satu kalimat. Input text memiliki tag <input> dengan atribut type="text" yang menandakan itu ialah input text. Contoh penggunaan input text misalkan untuk menampung nilai nama, alamat, hobi dan lainnya yang memiliki karakter yang tidak terlalu panjang. Berikut ialah contoh dasar dari input text:

Nama <input type="text" name="nama">

Output dari kode diatas ialah sebagai berikut:

Nama

Atribut lain dari input text ialah value yang digunakan untuk memberikan nilai default pada suatu input text. Pada contoh diatas, input text yang dihasilkan ialah berupa input text yang kosong. Berikut ialah contoh suatu input text yang memiliki nilai default:

Nama <input type="text" name="nama" value="Rofilde Hasudungan">

Atribut lain yang menarik dari tag ini ialah placeholder. Atribut ini digunakan untuk memberikan suatu instruksi atau informasi yang akan tampil pada input text dan akan hilang ketika kita mensorot pointer kita pada input text. Berikut ialah contoh kode dan outputannya

Nama <input type="text" name="nama" placeholder="Masukan Nama Anda">
Nama

Radio Button

Radio button digunakan untuk memberikan inputan berupa pilihan, misalkan digunakan untuk menanyakan jenis kelamin. Radio button memiliki tag <input> dengan atribut wajib type="radio" yang menandakan itu ialah radio button. Berikut ialah contoh dari radio button.

Jenis Kelamin: 
<input type="radio" name="kelamin" value="pria" checked> Pria
<input type="radio" name="kelamin" value="Wanita"> Wanita

Pada contoh diatas terlihat bahwa radio button biasanya digunakan lebih dari satu pilihan dengan masing-masing pilihan memiliki atribut

Atribut Deskripsi
name Nama dari inputan.
type Tipe dari inputan dan untuk radio button wajib diisi dengan nilai "radio"
value Nilai dari inputan ini.
checked Atribut ini tidak memiliki nilai, digunakan untuk menandakan pemilihan dari suatu radio button

Pemilihan biasanya melibatkan lebih dari satu opsi sehingga penggunaan radio button akan lebih dari satu yang memiliki name dengan nilai yang sama tetapi dengan value dengan nilai yang berbeda. Untuk memberikan pemilihan default pada salah satu radio button cukup dengan meletakan atribut checked pada radio button yang dipilih.

Checkbox

Jika pada radio button terdapat sekumpulan pemilihan yang harus dipilih salah satunya, pada checkbox pemilihan bisa dilakukan lebih dari satu atau bisa memilih semua pilihan. Misalkan kita akan meminta inputan berupa kendaraan {Motor dan Mobil} yang dimiliki oleh seseorang. Jika yang bersangkutan memiliki semua kendaraan, maka ia dapat memilih atau mencetang semua pilihan atau hanya salah satunya atau tidak memilih. checkbox memiliki tag <input> dengan atribut wajib type="checkbox" yang menandakan itu ialah checkbox. Berikut ialah contoh dari checkbox:

Kendaraan Bermotor: 
<input type="checkbox" name="motor" value="yes" checked> Motor
<input type="checkbox" name="mobil" value="yes"> Mobil

Pada contoh diatas terlihat bahwa checkbox biasanya digunakan lebih dari satu pilihan dengan masing-masing pilihan memiliki atribut

Atribut Deskripsi
name Nama dari inputan.
type Tipe dari inputan dan untuk checkbox wajib diisi dengan nilai "checkbox"
value Nilai dari inputan ini.
checked Atribut ini tidak memiliki nilai, digunakan untuk menandakan pemilihan dari suatu checkbox

Pemilihan biasanya melibatkan lebih dari satu opsi sehingga penggunaan checkbox akan lebih dari satu yang memiliki name dengan nilai yang sama tetapi dengan value dengan nilai yang berbeda. Untuk memberikan pemilihan default pada salah satu checkbox cukup dengan meletakan atribut checked pada checkbox yang dipilih.

Dropdown

Salah satu alternatif dari pemilihan ialah dengan menggunakan dropdown. Sesuai dengan dropdown semua pilihan pada tag ini disajikan dalam bentuk dropdown. Penggunaan tag ini dibandingkan dengan radio button ialah pada space atau ruang yang digunakan untuk menampilkan data. Jika pada radio button semua pilihan ditampilkan pada layar, pada dropdown akan ditampilkan ketika diklik. Tag dropdown terdiri dari <select> yang menandakan inputan dropdown dan <option> yang berisi item pilihan yang disajikan. Contoh penggunaan dropdown ialah sebagai berikut:

Pekerjaan Anda: 
<select name="pekerjaan">
    <option value="irt">Ibu Rumah Tangga</option>
    <option value="arsitektur">Arsitektur</option>
    <option value="swasta" selected>Swasta</option> <-- Opsi yang default
    <option value="petani">Petani</option>
    <option value="lainnya">Lainnya</option>
</select>

Tag <select> pada dropdown memiliki atribut yakni name yang berisi nama dari pemilihan tersebut. Sedangkan tag <option> memiliki dua buah atribut yakni value yang berisi nilai dari pilihan tersebut dan selected yang digunakan untuk nilai default pada pemilihan tersebut.

Textarea

Jika input text digunakan untuk menerima inputan yang memiliki panjang terbatas, maka untuk menerima inputan yang memiliki karakter yang lebih panjang dapat menggunakantextarea. Inputan ini umumnya digunakan untuk meninputkan informasi seperti berita, pengguman, atau informasi yang biasanya terdiri dari beberapa paragraf atau text yang panjang. Tag HTML textarea ialah <textarea> dengan penggunaan sebagai berikut:

<textarea name="berita"></textarea>
Atribut Deskripsi
name Nama dari inputan.
type Tipe dari inputan dan untuk radio button wajib diisi dengan nilai "radio"
value Nilai dari inputan ini.
checked Atribut ini tidak memiliki nilai, digunakan untuk menandakan pemilihan dari suatu radio button

Tag <textarea> memiliki beberapa atribut seperti pada tabel diatas. Sedangkan untuk memberikan nilai default dengan mendefinisikan nilai tersebut diantara tag pembuka dan tag penutu textarea tersebut. Contoh penggunaan atribut dan nilai default pada textarea sebagai berikut:

<textarea name="berita" cols="10" rows="8">Default Value</textarea>

File

Pada HTML inputan yang diberikan bisa juga berupa file yang kemudian diunggah (upload) keserver. Untuk mengkoleksi file yang diunggah oleh pengguna dapat menggunakan tag <input> dengan atribut wajib type="file" yang menandakan bahwa inputan berupa file. Untuk menggunakan ini maka terdapat syarat yakni pada tag pembuka form harus memiliki method="POST" dan atribut enctype="multipart/form-data" juga harus disertakan. Berikut ialah contoh dari penggunaannya:

<form action="tujuan" method="post" enctype="multipart/form-data">
<!-- inputan-inputan yang lainnya --!>

Upload Foto <input type="file" name="gambar">

<!-- inputan-inputan yang lainnya --!>

Password

Ada kalanya inputan yang dimasukan haruslah rahasia dan ketika kita ketik dikodekan dalam karakter, kondisi ini sering kita jumpai pada form login untuk mengetikan password dan Inputan ini disebut dengan password. Password memiliki tag HTML <input> dengan atribut wajib type="password". Berikut ialah contoh dari penggunaan tag password:

<input type="password" name="password">

<input type="password" name="password" placeholder="Masukan password anda">

Atribut lain dari inputan ini ialah placeholder.

Hidden

Jika pada inputan-inputan yang diatas dapat dilihat dan ditujukan untuk inputan pengguna, tag hidden ialah inputan yang sifatnya tersebumbunyi, biasanya digunakan untuk menampung nilai yang digenerate oleh sistem seperti token, id atau tanggal. Contoh penggunaan tag hidden ialah sebagai berikut:

<input type="hidden" name="id" value="1">

<input type="hidden" name="token" value="7656dsf5asd875f8asd">

Submit Button

Setelah data-data diisi maka data tersebut akan dikirim. Suatu form terdapat button atau tombol yang digunakan untuk memicu pengiriman data yang disebut dengan submit button. Tag HTML dari submit button ialah <input> dengan atribut wajib type="submit" dan untuk melabeli button dengan mendefinisikan atribut value misalkan value="Simpan". Berikut ialah contoh penggunaan submit button:

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

Reset Button

Data-data yang diisi pada suatu form bisa saja salah dan kita ingin menghapus isian dari inputan-inputan tersebut atau ingin mengembalikan kepada nilai default-nya. Namun, untuk menghapus isian tersebut satu-persatu memakan waktu, terlebih jika form inputan yang disediakan banyak. Untuk secara cepat membuat menghapus semua isian dapat menggunakan tombol reset. Tag HTML untuk tombol reset ialah <input> dengan atribut wajib type="reset". Sedangkan untuk melabeli button/tombol dapat menggunakan atribut value misalkan value="Reset" atau value="Kembali Default". Contoh penggunaan tombol reset ini ialah sebagai berikut:

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

Division <div>

Dalam pembuatan halaman web melibatkan penggunaan banyak tag-tag HTML. Untuk mempermudah pengorganisasian dan manajemen halaman HTML tersebut dapat menggunakan tag <div>. Contoh pembagian pada halaman web misalkan pembagian untuk bagian header, content, sidebar, footer dan sebagainya. contoh penggunaan tag <div> ialah sebagai berikut:

<div>
    Header
</div>

<div>
    Menu Navigasi
</div>

dst.

Summary

Suatu halaman HTML memiliki struktur wajib yang mana dimulai dengan tag <html> dan dalam pembuatan halaman web melibatkan banyak tag. Pada artikel ini telah disajikan tag-tag HTML beserta atribut yang melekat pada tag tersebut, mulai dari struktur dasar HTML, formating text, tabel, heading sampai form. Namun, tag-tag HTML sangatlah banyak terlebih dengan kemunculan HTML5 terdapat banyak tag-tag tambahan, pada artikel ini menyediakan tag yang paling sering digunakan dalam pembuatan aplikasi web. Untuk tag-tag HTML yang lebih lengkap dapat menuju ke w3school.org.