Media Belajar Bahasa Pemrograman | by APPKEY

HTML/CSSTutorial HTML/CSS 16 : Text Formatting HTML, Cara Menambahkan...

Tutorial HTML/CSS 16 : Text Formatting HTML, Cara Menambahkan Variasi Text Khusus

-

Last Updated on October 27, 2021 by

Jika Anda bekerja dengan HTML/CSS, mungkin Anda ingin menambahkan variasi teks khusus ke dalam projek Anda. Artikel ini ditujukan untuk Anda. Artikel Codekey kali ini akan membahas tentang Text Formatting HTML yang digunakan untuk menambahkan variasi teks.

Formatting HTML adalah sebuah proses dari formatting teks untuk tampilan yang lebih baik. Jika Anda ingin tahu lebih banyak tentang text formatting HTML, simak artikel ini sampai habis.

Artikel Terkait  Tutorial HTML/CSS 39 : Belajar Menggunakan HTML5 Video Player

Text Formatting HTML

text formatting html

HTML menyediakan Anda kemampuan untuk memformat teks tanpa menggunakan CSS. Ada banyak formatting tag yang ada di HTML. Tools text formatting pada HTML mirip dengan teks editor yang seringkali Anda gunakan seperti Microsoft Word.

Tag ini digunakan untuk menebalkan huruf (text bold), mencetak miring huruf (italicized), dan menggarisbawahi teks (underlined). Untuk tampilan yang lebih baik, Anda juga dapat menggunakan CSS Styling. Ada hampir 14 opsi yang tersedia untuk memunculkan teks di HTML dan XHTML.

Dalam HTML, formatting tag dibagi menjadi dua kategori sebagai berikut:

  1. Physical tag: Tag ini digunakan untuk menyediakan visual appreance pada teks.
  2. Logical tag: Tag ini digunakan untuk menambahkan beberapa nilai logika dan semantik ke teks.

Untuk menambahkan dasar-dasar text formatting HTML, semua yang Anda butuhkan adalah menyelimuti konten yang ingin Anda modifikasi dalam tag yang sesuai. Berikut adalah cara untuk mencetak miring text HTML sebagai berikut:

<h2>Kuda nil memiliki <em>kerabat terdekat</em> yakni mamalia paus </h2>

Text Formatting Tag pada HTML

Beberapa tag yang ada di HTML untuk melakukan HTML Formatting akan kami jelaskan pada ulasan berikut ini.

  1. Tag <em>

Tag <em> digunakan untuk emphasizing atau menekankan. Sebagian besar browser membuat teks HTML miring di dalam tag ini namun, elemen ini tidak hanya menyampaikan makna visual tetapi juga makna semantik:

<em>Teks ini Menggunakan tag emphasis</em>
  1. Tag <i>

Untuk mencetak miring teks di HTML tanpa makna semantik, maka gunakan tag <i> seperti berikut ini:

<i>Teks ini menggunakan tag italic untuk tulisan miring.<i>
  1. Tag <strong>

Kemudian, tag <strong> untuk mendefinisikan teks penting. Browser akan menampilkannya sebagai teks yang ditebalkan namun tag itu juga membawa sebuah makna semantic:

<p>Ini merupakan contoh <strong>cetak tebal</strong> dalam text.</p>
  1. Tag <u>

Untuk menebalkan huruf tanpa makna semantic maka gunakan tag <b> seperti di bawah ini:

Contoh Tulisan <u>bergaris bawah</u>
  1. Tag <small>

Tag <small> ini dapat digunakan untuk membuat teks lebih kecil tanpa mengubah tinggi dari garis. Tag ini pun sangat berguna untuk menambahkan catatan atau hal lainnya tidak sebagai informasi penting yang esensial.

<p>Paragraf dengan <small>tulisan kecil</small> didalamnya.</p>
  1. Tag <mark>

Tag ini berguna untuk menonjolkan teks HTML dalam warna kuning terang untuk menyerupai penggunaan highlighter pen.

<p>Mark Tag <mark>sangat berguna</mark> untuk memberikan tanda dalam text.</p>
  1. Tag <del>

Tag <del> berguna untuk mencoret teks HTML Anda untuk menandainya sebagai bagian yang sudah dihapus.

<p>tag ini digunakan untuk <del>mencoret teks yang tidak penting</del></p>
  1. Tag <s>

Tag <s>  dibuat mirip dengan tag <del> sebelumnya, namun memiliki perbedaan makna semantik. Tag ini berguna untuk mendefinisikan sebuah teks yang tidak lagi relevan.

  1. Tag <ins>

Tag <ins> berguna untuk menambahkan HTML teks.

<ins>Teks ini telah ditambahkan</ins>
  1. Tag <sub>

Tag ini dibuat untuk buat teks subskrip yang berukuran setengah dari teks biasa dan juga memiliki garis bawah:

<p>teks ini mengandung <sub>subscript text.</sub></p>
  1. Tag <sup>

Tag ini berguna untuk mendefinisikan sebuah teks subskrip pada HTML. Tag tersebut membuat teks lebih kecil, hanya sebagai subkrip namun juga meningkatkan garis teks yang ditulis dalam:

<p>teks ini menggunakan<sup>superscript</sup></p>
  1. Tag <q>

Tag ini merepresentasikan inline quotes. Kebanyakan browser secara otomatis menambahkan tanda kuotasi di sekitar teks.

<p>Semua Orang Tahu
  <q cite="codekey.com">HTML adalah kepanjangan dari Hypertext Markup Language.</q>
</p>
  1. Tag <blockquote>

Quote juga dapat ditampilkan dalam sebuah block element. Untuk melakukannya, Anda perlu menggunakan tag <blockquote> seperti di bawah ini:

<p>Contoh dari Blockqoute</p>

<blockquote cite="http://www.codekey.com">
HTML adalah singkatan dari HyperText Markup Language
</blockquote>

Demikianlah penjelasan tentang beragam teks yang ada di HTML. Beberapa tips yang dapat Anda lakukan ketika menerapkan HTML Text Formatting:

  1. Semua tag pemformatan teks HTML digunakan untuk memodifikasi kontennya. Oleh karena itu, tag tersebut tidak dapat mendefinisikan elemen kosong. Hal ini berarti Anda tidak dapat menghilangkan tag penutup.
  2. Perlu Anda ingat bahwa sebagian besar pembaca layar mengenali tag semantik dan mengucapkan kontennya dengan nada yang berbeda.
  3. Berhati-hatilah saat Anda menggarisbawahi teks dalam HTML, karena pembaca mungkin dengan mudah mengacaukannya dengan hyperlink.

Jika Anda ingin belajar tentang HTML/CSS, kunjungi seri artikel tutorial HTML/CSS di situs Codekey. Codekey menyediakan berbagai artikel tutorial, materi, pembahasan, tips, dan trik untuk Anda belajar HTML/CSS. Tidak hanya HTML/CSS, Codekey juga menyediakan bahasa pemrograman lainnya. Jangan lupa untuk dapatkan update terbaru dari Codekey.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya