sovyan.comsovyan.com
html Komputer Pemrograman Web
Beranda / Pemrograman / Web / Pemformatan Teks HTML | Tutorial HTML 9

Pemformatan Teks HTML | Tutorial HTML 9

Oleh sopyan • November 10, 2023 • 3 Dilihat • 5 Menit membaca •
Assalamualaikum sobat di artikel kali ini kami akan membagikan tutorial
tentang pemformatan teks di HTML, berikut adalah tutorialnya.

Elemen Pemformatan Teks HTML

Di HTML terdapat beberapa elemen yang dapat kita gunakan untuk membuat teks
dengan arti khusus.

Contoh Program 1 : Pemformatan Teks HTML

<!DOCTYPE html>
<html>
<body>

  <p><b>Ini teks bold</b></p>

  <p><i>Ini teks italic</i></p>
  <p>Ini <sub>subscript</sub> dan <sup>superscript</sup></p>
</body>
</html>

Hasil Program 1

Penjelasan Program 1

  • Di baris 4 kita membuat paragraf yang bercetak tebal.
  • Di baris 5 kita membuat teks yang bercetak miring.
  • Di baris 6 kita membuat paragraf yang memiliki teks subskrip
    dan superskrip.

Berikut adalah beberapa tag yang dapat digunakan untuk pemformatan teks :
  • <sup>
    digunakan untuk teks superskrip.
  • <sub>
    digunakan untuk teks subskrip.
  • <ins>
    digunakan untuk teks yang disisipkan.
  • <del>
    digunakan untuk teks yang dihapus.
  • <small>
    digunakan untuk teks yang lebih kecil.
  • <mark>
    digunakan untuk teks yang ditandai.
  • <em>
    digunakan untuk teks yang ditekankan.
  • <i>
    digunakan untuk teks miring.
  • <strong>
    digunakan untuk teks penting.
  • <b>
    digunakan untuk teks tebal.

Elemen
<strong>
dan
<b>
HTML

Di HTML untuk membuat teks tebal yang bukan hal penting, kita bisa
menggunakan tag
<b>.

Contoh Program 2 : Elemen
<b>

Baca juga: Panduan Lengkap HTML Form Attributes yang Wajib Lo Tahu! (Tutorial HTML Part 54)

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah teks biasa</p>

  <p><b>Ini teks bold</b></p>
</body>
</html>

Hasil Program 2

Penjelasan Program 2

  • Di baris 4 kita membuat paragraf biasa.
  • Di baris 5 kita membuat paragraf yang bercetak tebal.

Untuk mendefinisikan teks yang penting dan tebal kita bisa menggunakan
elemen
<strong>.

Contoh Program 3 : Elemen
<strong>

<!DOCTYPE html>
<html>
<body>
  <p>Ini teks biasa</p>

  <p><strong>Ini teks yang penting</strong></p>
</body>
</html>
Baca juga: Panduan Lengkap HTML Forms: Bikin Formulir Keren di Website! (Tutorial HTML Part 53)

Hasil Program 3

Penjelasan Program 3

  • Di baris 4 kita membuat paragraf.
  • Di baris 5 kita membuat paragraf yang memiliki teks yang penting.

Elemen
<i>
dan
<em>
HTML

Untuk membuat huruf miring yang mengekspresikan suara dan suasana hati, kita
bisa menggunakan tag
<i>.
Catatan : tag
<i>
biasanya digunakan untuk istilah teknis, pemikiran, frasa dari bahasa lain,
dan lain-lain.

Contoh Program 4 : elemen <i>

<!DOCTYPE html>
<html>
<body>
 <p>Ini adalah teks biasa</p>

 <p><i>Ini teks italic</i></p>
</body>
</html>

Hasil Program 4

Penjelasan Program 4

  • Di baris 4 kita membuat paragraf biasa.
  • Di baris 5 kita membuat paragraf bercetak miring
Jika kita ingin membuat teks yang ditekankan (emphasized text), kita bisa
menggunakan tag
<em>, teks ini ditampilkan dengan huruf miring.
Catatan : dalam membaca emphasized text, pembaca teks ini biasanya
membacanya dengan penekanan menggunakan tekanan verbal.

Contoh Program 5 : elemen
<em>

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah teks biasa</p>

  <p><em>Ini adalah emphasized text</em></p>
</body>
</html>
Baca juga: Perbedaan HTML vs XHTML: Panduan Lengkap (Tutorial HTML Part 52)

Hasil Program 5

Penjelasan Program 5

  • Di baris 4 kita membuat paragraf biasa.
  • Di baris 5 kita membuat paragraf yang memiliki teks yang
    ditekankan (emphasized).

Elemen
<small>
HTML

Untuk membuat teks dengan ukuran kecil, kita bisa menggunakan tag
<small>.

Contoh Program 6 : Elemen
<small>

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah teks biasa</p>
  <p><small>Ini teks lebih
kecil</small></p>
</body>
</html>

Hasil Program 6

Penjelasan Program 6

  • Di baris 4 kita membuat paragraf biasa.
  • Di baris 5 kita membuat paragraf yang memiliki ukuran yang lebih
    kecil.

Elemen
<mark>
HTML

Untuk membuat teks yang disorot atau ditandai, kita bisa menggunakan tag
<mark>.

Contoh Program 7 : Elemen <mark>

<!DOCTYPE html>
<html>
<body>
  <p>Ini teks biasa</p>
  <p>Ini teks yang <mark>ditandai</mark></p>
</body>
</html>

Hasil Program 7

Penjelasan Program 7

  • Di baris 4 kita membuat paragraf biasa.
  • Di baris 5 kita membuat paragraf yang memiliki teks yang
    ditandai.

Elemen
<del>
HTML

Kita bisa membuat teks yang dicoret menggunakan tag
<del>.

Contoh Program 8 : Elemen
<del>

<!DOCTYPE html>
<html>
<body>
  <p>Teks ini adalah teks yang <del>dicoret</del></p>
</body>
</html>

Hasil Program 8

Penjelasan Program 8

  • Di baris 4 kita membuat paragraf yang memiliki teks yang dicoret.

Elemen
<ins>
HTML

Untuk membuat teks yang digaris bawahi kita bisa menggunakan tag
<ins>.

Contoh Program 9 : Elemen
<ins>

<!DOCTYPE html>
<html>
<body>
  <p>Ini teks yang <ins>digaris bawahi</ins></p>
</body>
</html>

Hasil Program 9

Penjelasan Program 9

  • Di baris 4 kita membuat paragraf yang memiliki teks yang digaris
    bawahi.

Elemen
<sub>
HTML

Untuk membuat teks subskrip (teks yang berada setengah dibawah huruf normal),
kita bisa menggunakan tag
<sub>.

Contoh Program 10 : Elemen
<sub>

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah teks <sub>subskrip</sub></p>
</body>
</html>

Hasil Program 10

Penjelasan Program 10

  • Di baris 4 kita membuat paragraf yang memiliki teks subskrip.

Elemen
<sup>
HTML

Untuk membuat teks superskrip (teks yang berada setengah diatas teks normal),
kita bisa menggunakan tag
<sup>.

Contoh Program 11 : Elemen
<sup>

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah teks <sup>superskrip</sup></p>
</body>
</html>

Hasil Program 11

Penjelasan Program 11

  • Di baris 4 kita membuat paragraf yang memiliki teks superskrip.

Elemen Pemformatan Teks HTML

Berikut adalah daftar elemen pemformatan teks yang telah kita pelajari.

Tag
Deskripsi

<b>
Mendefinisikan teks tebal

<i>
Mendefinisikan teks italic

<em>
Mendefinisikan Teks yang ditekankan

<small>
Mendefinisikan teks berukuran kecil

<strong>
Mendefinisikan teks penting

<sub>
Mendefinisikan teks subskrip

<sup>
Mendefinisikan teks superskrip

<ins>
Mendefinisikan teks yang digaris bawahi

<del>
Mendefinisikan teks yang dicoret

<mark>
Mendefinisikan teks yang ditandai
Itulah tutorial mengenai pemformatan teks HTML dari kami semoga tutorial kali
ini dapat membantu kalian lebih memahami mengenai HTMl, sampai jumpa di
artikel selanjutnya…

sopyan

Seorang blogger yang senang berbagi berbagai informasi dan tutorial.

Artikel Terkait

Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Populer

01

Tips Meningkatkan Kecepatan Website E-commerce untuk Hasil Penjualan yang Lebih Optimal

Oktober 8, 2024 • 58 Dilihat
02

Tutorial HTML part 1: Apa Itu HTML dan Kenapa Penting?

Januari 7, 2025 • 42 Dilihat
03

Strategi Ampuh untuk Launching Produk Baru: Gabungan Online dan Offline

Desember 28, 2024 • 41 Dilihat
04

HTML: Awal Perjalanan Lo di Dunia Coding yang Kece Abis! (Tutorial HTML part 1)

Januari 22, 2025 • 40 Dilihat
05

Cara Monetisasi Blog dengan Google AdSense: Panduan Lengkap untuk Pemula

Januari 10, 2025 • 38 Dilihat