Pemformatan adalah penambahan sentuhan pada teks untuk membuat teks mudah dibaca dan lebih menarik. Pemformatan teks pada halaman web dapat dilakukan dengan berbagai cara. bentuk huruf yang ditampilkan di halaman web. Dalam pemformatan teks dipelajari penggunaan dari beberapa tag yang digunakan dalam melakukan pemformatan tampilan halaman web supaya lebih sesuai dengan keinginan atau agar lebih rapi dan terstruktur.
Perhatikan beberapa daftar tag di bawah ini, serta kegunaan utamanya dalam sebuah halaman HTML. Beberapa diantaranya telah dihilangkan dari daftar tag HTML standar, namun masih memungkinkan untuk ditampilkan pada beberapa browser tertentu atau browser lama.Pada pemformatan teks menggunakan beberapa tag dasar yang mengatur teks. Pada tulisan ini dibahas sedikit mengenai pemformatan teks dan pemformatan paragraf.
1. Pemformatan Teks
Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal, miring, digarisbawahi,dan lain sebagainya seperti contoh di bawah ini.
| Tag | Deskripsi | Contoh |
|---|---|---|
| <b> | Mendefinisikan teks tebal | <b>contoh</b> hasil contoh |
| <em> | Mendefinisikan teks menekankan | <em>contoh</em> hasil contoh |
| <i> | Mendefinisikan teks miring | <i>contoh</i> hasil contoh |
| <small> | Mendefinisikan teks kecil | <small>contoh></small> hasil contoh |
| <strong> | Mendefinisikan teks penting | <strong>contoh</strong> hasil contoh |
| <sub> | Mendefinisikan teks di bawah garis | <sub>contoh</sub> hasil contoh |
| <sup> | Mendefinisikan teks di atas garis | <sup>contoh</sup> hasil contoh |
| <ins> | Mendefinisikan teks sisipan | <ins>contoh</ins> hasil contoh |
| <del> | Mendefinisikan teks dicoret | <del>contoh</del> hasil |
| <mark> | Mendefinisikan teks ditandai | <mark>contoh</mark> hasil contoh |
Tag HTML “keluaran computer”
| Tag | Deskripsi |
|---|---|
| <code> | Mendefinisikan teks code computer |
| <kbd> | Mendefinisekan teks keyboard |
| <samp> | Mendefinisikan teks contoh code |
| <var> | Mendefinisikan teks variable |
| <pre> | Mendefinisikan teks terformat |
| Tag | Deskripsi |
|---|---|
| <abbr> | Mendefinisikan sebuah singkatan |
| <address> | Mendefinisikan alamat atau kontak informasi |
| <bdo> | Mendefinisikan arah teks |
| <blockquote> | Mendefinisikan sebuah bagian yang dikutip dari sumber lain |
| <q> | Mendefinisikan sebuah kutipan pendek |
| <cite> | Mendefinisikan judul karya |
| <dfn> | Mendefinisikan sebuah istilah definisi |
Contoh Blockquote (pengaturan dalam template)
Patih Pranggulang menghunus pedangnya. Dengan cepat ia mengayunkan pedang itu ke tubuh Tunjungsekar. tapi, aneh sebeleum menyentuh tubuh Tunjungsekar, pedang itu jatuh ke tanah. Patih Pranggulang memungut pedang itu dan membacokkan lagi ke tubuh Tunjungsekar. Tiga kali Patih Pranggulang melakukan hal itu, Akan tetapi, semuanya gagal.
2. Pemformatan Paragraf
Paragraf atau alinea merupakan sekumpulan kalimat yang saling berkaitan antara kalimat yang satu dengan kalimat yang lain. Agar tampilan paragraf dalam halaman web terlihat rapi dapat menggunakan pemformatan sebagai berikut.
- Untuk mengelompokan teks dalam suatu paragraf gunakan tag paragraf <p>teks</p>
- Untuk mengatur perataan suatu paragraf gunakan tag paragraf dengan fungsi align left <p align="left">untuk rata kiri</p>, align right <p align="right">untuk rata kanan</p>, align center <p align="center">untuk rata tengah<p>, dan align justify <p align="justify">untuk rata kiri kanan</p>
- Text-indent digunakan untuk memberikan indentifikasi ke dalam terhadap teks. Nilai negatif tidak diperbolehkan. Pada contoh di bawah menggunakan text-indent sebesar 25px.
Contoh :
1. Rata Tengah
Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit. Sementara bawahan tuan Hasan berlomba menyambut kedatangan nyonya Marta.
2. Rata Kiri
Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit. Sementara bawahan tuan Hasan berlomba menyambut kedatangan nyonya Marta.
3. Rata kanan
Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit. Sementara bawahan tuan Hasan berlomba menyambut kedatangan nyonya Marta.
4. Rata Kiri dan Kanan
Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit. Sementara bawahan tuan Hasan berlomba menyambut kedatangan nyonya Marta.
5. Text Indent
5. Text Indent
Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit. Sementara bawahan tuan Hasan berlomba menyambut kedatangan nyonya Marta.
