0 Mengenal Format Text HTML

PanduanTop - 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.

Sumber: http://htmlcssguides.com

Komentar →