Media Belajar Bahasa Pemrograman | by APPKEY

HTML/CSS Tutorial HTML/CSS 16 : Menambahkan Variasi Text Khusus dengan...

Tutorial HTML/CSS 16 : Menambahkan Variasi Text Khusus dengan Text Formatting

-

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 19 : Memahami Background Image CSS

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 Swift 2 : Tahap Awal Persiapan dan Mengatur Lingkungan Kerja pada Swift

Setelah Anda mengenal bahasa pemrograman Swift 4, langkah selanjutnya adalah Anda perlu memulai pemrograman Swift 4 dengan cara install...

Tutorial Javascript 1 : Pengenalan Javascript untuk Pemula

Ada banyak sekali jenis bahasa pemrograman yang bisa Anda pelajari untuk menjadi seorang programmer profesional. Salah satunya adalah belajar...

Tutorial Javascript 6 : Cara Membuat Event pada Javascript

Event JavaScript adalah tindakan atau proses khusus yang terjadi dalam program atau situs web yang akan Anda kembangkan. Anda...

Tutorial Javascript 2 : Tahap Awal Cara Mudah Menulis Kode di Javascript

Kembali lagi di seri belajar Javascript bersama Codekey! Setelah di postingan sebelumnya Anda belajar Javascript terkait konsep-konsep dasarnya, kini...

Tutorial Dart 1 : Pengenalan Bahasa Pemrogaman Dart untuk Pemula

Halo pembaca setia Codekey! Belajar pemrograman saat ini menjadi keharusan bagi semua orang yang ingin berkarir sebagai programmer, hal...

Tutorial HTML/CSS 3 : Pengenalan Elemen Dasar di HTML

HTML adalah bahasa Markup yang terdiri dari elemen dan tag. Artikel ini akan memberi penjelasan kepada Anda tentang elemen-elemen...

Tutorial Dart 3 : Belajar Menggunakan Syntax atau Perintah dasar Dart

Setelah mengatur lingkungan kerja serta instalasi Dart ke dalam sistem operasi yang kalian miliki, dalam pembuatan suatu program baik...

Tutorial HTML/CSS 1 : Pengenalan HTML untuk Pemula

Jika Anda seorang pemula dalam dunia coding dan ingin mengetahui atau belajar HTML dasar, maka artikel ini akan cocok...

Tutorial Javascript 9 : Cepat dan Mudah Cara Mengurutkan Data Array di Javascript

Pada artikel sebelumnya Anda mungkin telah membaca dan mempelajari tentang Array di JavaScript. Pada artikel kali ini, kami akan...

Tutorial Python 7 : Tutorial Dasar Cara Mengoperasikan String pada Python

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

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