Pinned

Cara Membuat Teks Tebal Miring dan Garis Bawah Pada HTML

HTML menyediakan kemampuan untuk melakukan format teks seperti yang biasa dilakukan pada MS Word atau aplikasi edit teks lainnya. Pada artikel ini, akan dibahas beberapa jenis pilihan untuk melakukan format teks.

7 Jenis Utama Text Formatting pada HTML
Ilustrasi Text Format HTML

Sebelum memahami lebih dalam materi tentang Cara Membuat Teks Tebal Miring dan Garis Bawah Pada HTML, terlebih dahulu pelajari materi tentang: Elemen Paragraf pada HTML dan Fungsinya [klik], Atribut Populer HTML dan Fungsinya [klik], dan Bagian Dasar HTML Fungsi dan Contohnya [klik].

Format jika dilihat dari Kamus Besar Bahasa Indonesia bermakna 'bentuk dan ukuran', jika dihubungkan dengan teks, maka yang dimaksud dengan format adalah ukuran dan jenis huruf yang digunakan pada suatu teks atau huruf. Melakukan pemformatan berarti melakukan pengaturan atau setting terhadap bentuk dan ukuran dari sebuah karakter, dalam hal ini adalah karakter yang dapat ditampilkan pada halaman website. Ada banyak manfaat dari penggunaat format teks, utamanya dalam penulis artikel atapun juga membuat informasi pada halaman website. Contoh, memberi tanda coret pada tulisan yang mengalami koreksi, atau memberikan penebalan huruf atau kata yang memiliki makna khusus, dan lain sebagainya.

satu, Membuat teks Bold atau Strong: dapat dilakukan pemformatan teks menjadi bold menggunakan tag <b>Tag bold menggunakan pembukaan tag dan penutupan tag. Teks yang akan dibuat menjadi bold harus menggunakan tag <b> dan tag </b>.

Dapat juga digunakan tag <strong> untuk membuat teks menjadi strong, untuk penekanan pada kata yang penting pada kalimat. Tag yang digunakan adalah <strong> dan diakhiri dengan tag </strong>.

Contoh:

<!DOCTYPE html>

<html>

<!-- html format teks-->

 

<head>

<title>

Bold

</title>

</head>

 

<body>

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Bold-->

<p>

<b>Selamat datang</b>

</p>

 

<!--Teks dalam format Strong-->

<p>

<strong>Selamat datang</strong>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang

Selamat datang


dua, Membuat teks menjadi Italic atau Emphasize: Tag <i> digunakan untuk membuat teks menjadi Italic (miring). Tag dibuka dengan kode <i> dan diakhiri dengan </i>.

Tag <em> digunakan untuk membuat teks menjadi emphasize, yang dimulai dengan tag <em> dan diakhiri dengan </em>.

contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks -->

 

<head>

<title>

Italic

</title>

</head>

 

<body>

 

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Italics-->

<p>

<i>Selamat datang</i>

</p>

 

<!--Teks dalam format Emphasize-->

<p>

<em>Selamat datang</em>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang

Selamat datang


tiga, Highlight teks: Pada HTML dimungkinkan untuk melakukan highlight teks menggunakan tag <mark>Tag tersebut dimulai dengan kode <mark> dan diakhiri dengan </mark>

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks-->

 

<head>

<title>

Highlight

</title>

</head>

 

<body>

 

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Highlight-->

<p>

<mark>Selamat datang</mark>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang


empat, Membuat sebuah teks menjadi subscript atau superscript: elemen <sup> digunakan untuk membuat teks superscript dan element <sub> digunakan untuk membuat teks subscript. Kedua elemen tersebut memiliki tag pembukaan dan penutupan. 

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks-->

 

<head>

<title>

Superscript dan Subscript

</title>

</head>

 

<body>

 

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Superscript-->

<p>

Hello <sup>Selamat datang</sup>

</p>

 

<!--Teks dalam format Subcript-->

<p>

Hello <sub>Selamat datang</sub>

</p>

 

</body>

</html>

Output:

Selamat datang

Hello Selamat datang

Hello Selamat datang


Baca Juga:

lima, Membuat ukuran teks menjadi kecil: element <small> digunakan untuk membuat teks menjadi berukuran kecil. Teks yang akan ditampilkan hurufnya dalam ukuran kecil harus dituliskan dalam tag <small> dan <\small>

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks-->

 

<head>

<title>

Small

</title>

</head>

 

<body>

 

<!--Teks dalam format Normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format small-->

<p>

<small>Selamat datang</small>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang


enam, Memberi garis delete pada teks: Elemen <del> digunakan untuk membuat garis delete sepanjang teks. Elemen ini juga memiliki bagian pembukaan dan penutupan tag

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks-->

 

<head>

<title>

Delete

</title>

</head>

 

<body>

 

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Delete-->

<p>

<del>Selamat datang</del>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang


tujuh, Menambah garis bawah teks: Elemen <ins> digunakan untuk menambah garis bawah (underline). Tag ini memiliki bagian pembukaan dan bagian penutupan. 

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks-->

 

<head>

<title>

Inserting

</title>

</head>

 

<body>

 

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Insert-->

<p>

<ins>Selamat datang</ins>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang


Referensi Tambahan:
Artikel ini didedikasikan kepada: Muhammad Irfan Pratama, Nadya Putri Al-Fath, Nena Mahaesti, Nyawiji Rizki Lestari, dan Putri Safina Liestyana.

11 komentar:

  1. Apa yang dimaksud dengan teks format pada HTML?

    BalasHapus
    Balasan
    1. HTML format merupakan proses pemformatan teks yang digunakan untuk menampilkan nuansa tertentu pada teks. HTML memberi kemampuan untuk melakukan format teks dengan menggunakan CSS.

      Hapus
    2. Ada banyak tag yang dipat digunakan dalam pemformatan teks HTML. Tag-tag tersebut digunakan untuk membuat teks menjadi lebih tebal, mirifng, atapun bergaris. Ada hampir sekitar 14 pilihan yang tersedia pada HTML yang dapat digunakan untuk melakukan pemformatan teks.

      Hapus
  2. Ada berapa tipe teks format dalam HTML?

    BalasHapus
    Balasan
    1. 1. Pemformatan karakter atau font.
      2. Pemformatan paragraf.
      3. Pemformatan dokumen atau halaman.
      4. Pemformatan section.

      Hapus
  3. Apa yang dimaksud dengan memformat teks atau text formatting pada html?

    BalasHapus
    Balasan
    1. HTML formatting adalah proses pemformatan teks untuk tampilan dan nuansa yang lebih baik. HTML memberi kemampuan untuk memformat teks tanpa menggunakan bantuan kode CSS. Ada banyak tag pemformatan dalam html, beberapa diantaranya dapat digunakan untuk membuat teks tebal, membuat teks miring, atau membuat garis bawah teks yang digunakan untuk memberikan tampilan visual yang lebih menarik pada teks.

      Hapus
  4. Adakah cara yang lebih efisien dalam melakukan format teks pada laman html selain dengan menulis secara langsung pada kode html?

    BalasHapus
    Balasan
    1. Alternatif lain untuk melakukan format teks adalah dengan menggunakan atribut style. Atribut style CSS dapat digunakna untuk menentukan gaya pada baris sebuah elemen. Dengan style CSS proses format teks dapat dilakukan secara terpisah dari laman html yang akan dilakukan format.

      Hapus
  5. Apa perbedaan antara pemformatan teks dan edit teks pada pembuatan html?

    BalasHapus
    Balasan
    1. Melakukan format teks artinya adalah melakukan perubahan pada tipe teks. Contoh membuat gais tebal, membuat garis miring, membuat garis bawah teks, mengubah ukuran font, mengubawah warna teks, dan lain sebagainya. Sedangkan proses pengedit teks lebih berkaitan dengan konten atau isi yang ditulis menggunakan teks. Contoh, melakukan perubahan kata atau kalimat yang dapat mengubah keseluruhan makna dari tulisan yang dibuat dalam artikel.

      Hapus

Hubungi admin melalui Wa : +62-896-2514-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things come from small things -