Dalam dokument HTML, Ada empat jenis rataan yang bisa digunakan dalam sebuah tulisan. Untuk membuat rataan dalam sebuah paragraf tidak ada tag khusus yang mewakili perintah ini. Melainkan dengan sebuahatribut yang memberi perintah dalam sebuah tag dokument. Jenis-jenis rataan tersebut antara lain:
- Rata kiri (left align)
- Rata kanan (right align)
- Rata tengah (center)
- Rata kiri dan kanan (justify)
<html>
<body>
<h2 align="left">Header dengan rata kiri</h2>
<h2 align="right">Header dengan rata kanan</h2>
<div align="center">paragraf ini dibuat denagn rata tengah<br />
Semua tulisan dalam tag div <br />
akan berada di tengah halaman <br />
seperti contoh ini
</div>
<div align="justify">paragraf ini dibuat dengan rata kiri dan kanan. sehingga semua sisi dari paragraf ini akan rata pada tepi dari halaman dokumen. dengan menggunakan nilai atribut justify dalam tag div semua tulisan menjadi contoh seperti. agar contohnya lebih jelas, tulisan ini sengaja saya buat agak lebih panjang. dan ini lah hasilnya.
</div>
</body>
</html>
<body>
<h2 align="left">Header dengan rata kiri</h2>
<h2 align="right">Header dengan rata kanan</h2>
<div align="center">paragraf ini dibuat denagn rata tengah<br />
Semua tulisan dalam tag div <br />
akan berada di tengah halaman <br />
seperti contoh ini
</div>
<div align="justify">paragraf ini dibuat dengan rata kiri dan kanan. sehingga semua sisi dari paragraf ini akan rata pada tepi dari halaman dokumen. dengan menggunakan nilai atribut justify dalam tag div semua tulisan menjadi contoh seperti. agar contohnya lebih jelas, tulisan ini sengaja saya buat agak lebih panjang. dan ini lah hasilnya.
</div>
</body>
</html>
Perhatikan pada atribut berwarna hijau dalam contoh atas, memiliki nilai yang saya beri warna merah untuk jenis rataanya. Atribut align memeberi perintah untuk perataan dalam sebuah tag dengan nilainya. Dari contoh skrip di atas akan menghasilkan seperti di bawah ini:
Header dengan rata kiri
Header dengan rata kanan
paragraf ini dibuat denagn rata tengah
Semua tulisan dalam tag div
akan berada di tengah halaman
seperti contoh ini
Semua tulisan dalam tag div
akan berada di tengah halaman
seperti contoh ini
paragraf ini dibuat dengan rata kiri dan kanan. sehingga semua sisi dari paragraf ini akan rata pada tepi dari halaman dokumen. dengan menggunakan nilai atribut justify dalam tag div semua tulisan menjadi contoh seperti. agar contohnya lebih jelas, tulisan ini sengaja saya buat agak lebih panjang. dan ini lah hasilnya.
Silahkan Anda kreasikan sendiri untuk hasil yang lebih menarik. Ada beberapa perintah sederhana lainnya yang mewakili rataan seperti tag <center>...</center>. Tulisan yang diapit oleh tag ini akan berada dalam rataan tengah. Hanya atribut ini saja yang memiliki tag sendiri. Untuk left, right dan justify tidak memiliki tag sederhana ini.
Perintah perataan lainnya adalah indentasi. Yaitu sebuah paragraf yang memiliki makna atau inti dari tulisannya. Bagi yang suka sastra mungkin mengerti hal ini. Ada tiga jenis indentasi antara lain.
1. First Line Indent
Yaitu baris pertama dalam paragraf agak menjorok kedalam. Bisa Anda terapkan dengan tag <DD> yang diletakkan di awal sebuah tulisan yang ingin dijorokkan kedalam. Perhatikan contoh
<html>
<body>
<div align="justify">
<dd>Paragraf ini dibuat dengan rataan kiri kanan yang ditambah dengan first line indent. sehingga membuat baris pertamanya akan menjorok kedalam. Agar lebih jelas kalimat ini saya buat agak panjang. jangan terlalu serius membaca kalimat ini. oiya, tag ini tidak memerlukan penutup di akhirnya.
</div>
<body>
<html>
<body>
<div align="justify">
<dd>Paragraf ini dibuat dengan rataan kiri kanan yang ditambah dengan first line indent. sehingga membuat baris pertamanya akan menjorok kedalam. Agar lebih jelas kalimat ini saya buat agak panjang. jangan terlalu serius membaca kalimat ini. oiya, tag ini tidak memerlukan penutup di akhirnya.
</div>
<body>
<html>
Mohon maaf, contoh hasilnya saya buat manual. Dikarenakan blog yang saya gunakan ini tidak mengenali indentasi. sehingga hasilnya tidak sesuai. Anda bisa lihat hasilnya pada komputer Anda. Kurang lebih akan seperti di bawah ini.
Paragraf ini dibuat dengan rataan kiri kanan yang ditambah dengan first line indent. sehingga membuat baris pertamanya akan menjorok kedalam. Agar lebih jelas kalimat ini saya buat agak panjang. jangan terlalu serius membaca kalimat ini. oiya, tag ini tidak memerlukan penutup di akhirnya.
2. Blockquote
Tag ini akan membuat tulisan yang diapitnya akan menjorok semua ke dalam. Perhatikan contoh
<html>
<body>
ini tulisan biasa tanpa embel-embel perintah
<blockquote>
<div align="justify">
Paragraf ini dibuat dengan rataan kiri kanan yang ditambah dengan first line indent. sehingga membuat baris pertamanya akan menjorok kedalam. Agar lebih jelas kalimat ini saya buat agak panjang. jangan terlalu serius membaca kalimat ini. oiya, tag ini tidak memerlukan penutup di akhirnya.
</div>
</blockquote>
</body>
</html>
<body>
ini tulisan biasa tanpa embel-embel perintah
<blockquote>
<div align="justify">
Paragraf ini dibuat dengan rataan kiri kanan yang ditambah dengan first line indent. sehingga membuat baris pertamanya akan menjorok kedalam. Agar lebih jelas kalimat ini saya buat agak panjang. jangan terlalu serius membaca kalimat ini. oiya, tag ini tidak memerlukan penutup di akhirnya.
</div>
</blockquote>
</body>
</html>
Hasilnya akan seperti di bawah ini.
ini tulisan biasa tanpa embel-embel perintah
Paragraf ini dibuat dengan rataan kiri kanan yang ditambah dengan first line indent. sehingga membuat baris pertamanya akan menjorok kedalam. Agar lebih jelas kalimat ini saya buat agak panjang. jangan terlalu serius membaca kalimat ini. oiya, tag ini tidak memerlukan penutup di akhirnya.
3. Definition List
Sebenarnya ini adalah pokok dari semua penggunaan indentasi. Definition list adalah paragraf yang memiliki judul dan definisi dalam sebuah tulisan. Untuk lebih jelasnya perhatikan contoh paragraf di bawah ini
Daftar Istilah Penting:
- HTML
- HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi
- BODY
- Bagian BODY, yang dinyatakan dengan tag <BODY>,...,<BODY> merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.
Pada contoh di atas, Anda bisa perhatikan sebuah penjelasan yang diberikan dan ditulis agak menjorok kedalam. Dan judul yang di jelaskan berada keluar dari paragraf pada bagian atas. Ada tiga tag yang digunakan untuk membuat definition. Antara lain:
- <DL> = Tag perintah definition list.
- <DT> = Judul yang akan dijelaskan.
- <DD> = Paragraf/definisi yang akan masuk ke dalam.
<html>
<body>
<div align="center">
<b>Daftar Istilah Penting:</b>
</div>
<dl>
<dt><b>HTML</b></dt>
<dd>
<b>HyperText Markup Language</b> (HTML) adalah sebuah <i>bahasa markah</i> yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi
</dd>
<dt><b>BODY</b></dt>
<dd>
Bagian BODY, yang dinyatakan dengan tag <BODY>,...,<BODY> merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.
</dd>
</dl>
Ini cuma contoh. Jadi pahamilah.
</body>
</html>
<body>
<div align="center">
<b>Daftar Istilah Penting:</b>
</div>
<dl>
<dt><b>HTML</b></dt>
<dd>
<b>HyperText Markup Language</b> (HTML) adalah sebuah <i>bahasa markah</i> yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi
</dd>
<dt><b>BODY</b></dt>
<dd>
Bagian BODY, yang dinyatakan dengan tag <BODY>,...,<BODY> merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.
</dd>
</dl>
Ini cuma contoh. Jadi pahamilah.
</body>
</html>
Silahkan Anda pahami semuanya. Saya rasa cukup untuk pelajaran rataan hari ini. Semoga bermanfaat. kita akan bahas rataan lainnya yang tidak kalah penting pada postingan saya selanjutnya. terima kasih telah berkunjung. Sampai jumpa di postingan saya selanjutnya.
Untuk tutorial lengkap mengenai HTML bisa Anda temukan pada menu HTML blog ini.