Format teks dan tulisan HTML

Format teks atau tulisan untuk membuat paragraf pada HTML adalan <p>, lantas bagaimana jika kita ingin menuliskan baris baru di dokumen HTML? coba tulis kode berikut di dokumen HTML anda

<p>Aku sedang belajar membuat paragraf pada HTML dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf mm...tapi de-<br>ngan baris baru.<br>Ini baris baru yang lain.</p>

Aku sedang membuat paragraf dan ini contohnya.

Ini contoh paragraf yang lainnya.

Ini juga paragraf mm...tapi de-
ngan baris baru.
Ini baris baru yang lain.

Jadi untuk membuat paragraf pada HTML adalah tag elemen <p>...</p>, dan untuk membuat baris baru adalah tag <br>, perlu diketahui bahwa sebagian tag HTML ada yang tidak memerlukan tag penutup, sebagai contoh adalah <br> ada juga <hr> untuk membuat garis horisontal, <img> untuk menyisipkan gambar kedalam dokumen HTML. Untuk melihat tag-tag apa saja yang tidak memerlukan tag penutup bisa di lihat di artikel tag-tag html tanpa tag penutup.

Berikut adalah format tulisan yang lazim digunakan di dalam dokumen HTML.

Membuat tulisan dengan effek mesin ketik

<tt>Teks mesin ketik</tt>

Teks mesin ketik

Membuat tulisan tebal dengan tag <b> dan tag <strong>

<b>Teks tebal (bold)</b>
<strong>Teks tebal dengan perintah Strong</strong>

Teks tebal (bold)
Teks tebal dengan perintah Strong

Membuat tulisan miring dengan tag <i> dan tag <em>

<i>Teks dengan italic (miring)</i>
<em>Teks miring dengan perintah Emphasized</em>

Teks dengan italic (miring)>
Teks miring dengan perintah Emphasized

Membuat tulisan bergaris bawah

<u>Teks bergaris bawah (underline)</u>

Teks bergaris bawah (underline)

Membuat teks tercoret

<strike>Teks tercoret (strike)</strike>

Teks tercoret (strike)

Membuat tulisan lebih besar dan lebih kecil dari normal

<big>Teks lebih besar dari normal</big>
<small>Teks lebih kecil dari normal</small>

Teks lebih besar dari normal
Teks lebih kecil dari normal

Membuat subscript atau superscript yaitu tulisan yang posisinya lebih rendah atau lebih tinggi dari text normal

Lambang Molekul Air adalah H<sub>2</sub>O
Hasil dari 10<sup>2</sup>=100

Lambang Molekul Air adalah H₂O
Hasil dari 10²=100

Untuk menampilkan tulisan sesuai dengan format aslinya digunakan tag <pre>...</pre>, misalnya jika kita ingin menuliskan syair sebuah lagu atau puisi:

<pre>
   Judul Puisi

   Bait satu
   Bait satu
      Bait dua
      Bait dua
   Bait tiga
   Bait tiga
      Bait empat
      Bait empat
</pre>

Judul Puisi

   Bait satu
   Bait satu
       Bait dua
       Bait dua
   Bait tiga
   Bait tiga
       Bait empat
       Bait empat

Dengan berkembangnya teknologi ada beberapa tag dan atribut HTML yang sudah usang atau tidak layak di pakai atau dalam bahasa Inggris-nya Deprecated Tags. Ada sebagian yang sudah ditiadakan atau sebagian memang ada alternatife penggantinya. Untuk melihat lis dari tag-tag yang sudah usang ini dapat di lihat di artikel tentang deprecated tag dan atribut

Sebagai contoh tag <b> alternatifnya bisa menggunakan tag <strong> atau atribut style dengan properti font-weight.

<p><strong>Tulisan ini tebal</strong></p>
<p style="font-weight:bold">Tulisan ini juga tebal</p>

Tulisan ini tebal

Tulisan ini juga tebal

Untuk tag <strike> (teks tercoret) dan tag <u> (underline) dapat diganti dengan properti text-decoration.

<p style="text-decoration:line-through;">Contoh teks tercoret</p>
<p style="text-decoration:underline;">Contoh teks dengan garis bawah</p>

Contoh teks tercoret

Contoh teks dengan garis bawah

Berikut adalah contoh text-decoration yang lainnya.

<p style="text-decoration:overline;">Contoh teks dengan garis atas</p>
<p style="text-decoration:blink;">Contoh teks berkedip</p>

Contoh teks dengan garis atas

Contoh teks berkedip

Untuk mengubah teks dari huruf besar menjadi huruf kecil dan sebaliknya digunakan properti text-transform.

<p style="text-transform:uppercase">tulisan ini aslinya adalah huruf kecil dengan text-transform:uppercase semuanya menjadi huruf besar.</p>

tulisan ini aslinya adalah huruf kecil dengan text-transform:uppercase semuanya menjadi huruf besar.

<p style="text-transform:lowercase">TULISAN INI ASLINYA ADALAH HURUF BESAR DENGAN TEXT-TRANSFORM:LOWERCASE SEMUANYA MENJADI HURUF KECIL.</p>

TULISAN INI ASLINYA ADALAH HURUF BESAR DENGAN TEXT-TRANSFORM:LOWERCASE SEMUANYA MENJADI HURUF KECIL.

<p style="text-transform:capitalize">text-transform:capitalize akan membuat setiap huruf di awal kata menjadi huruf besar.</p>

text-transform:capitalize akan membuat setiap huruf di awal kata menjadi huruf besar.

Kemudian untuk memposisikan teks digunaka properti text-align

<p style="text-align:left">Membuat teks ke kiri</p>
<p style="text-align:center">Membuat teks di tengah</p>
<p style="text-align:right">Membuat teks ke kanan</p>

Membuat teks ke kiri

Membuat teks di tengah

Membuat teks ke kanan

Gunakan style yang sama untuk membuat tulisan rata kiri, di tengah dan rata kanan dan untuk membuat rata kiri dan kanan ganti nilai atau value-nya dengan justify.

<p style="text-align:justify">Lorem ipsum dolor sit amet, habitasse feugiat malesuada nulla volutpat nibh, elementum cursus leo arcu tincidunt at rutrum, a imperdiet eu pellentesque nunc in. Augue suscipit, vel nulla ipsum nulla id, mauris cras nisl feugiat augue, natoque arcu bibendum nisl vitae luctus curabitur. Ut vestibulum, lectus neque commodo sapien.</p>