Untuk format teks tentang bagaimana membuat paragraf dan baris baru anda bisa membacanya di Belajar HTML tentang Format text HTML.
Disana juga telah dibuat beberapa contoh tag untuk memanipulasi tampilan teks, namun sebagian dari tag-tag tersebut merupakan
Deprecated Tags dimana saat ini sudah dihindari pemakaiannya karena dapat digantikan dengan atribut style atau CSS dengan lebih baik.
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>
Hasil:
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>
Hasil:
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>
Hasil:
Contoh teks dengan garis atas
Contoh teks berkedip
Untuk mengubah teks dari huruf besar ke 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>
Hasil:
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>
Hasil:
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>
Hasil:
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>
Hasil:
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>
Hasil:
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.
Artikel keren lainnya:
Belum ada tanggapan untuk "Cara Format Teks"
Post a Comment