Belajar HTML: Efek Style Pada Font

Memberikan Efek Style Pada Font

Setelah mempelajari tentang Heading (Judul), sekarang kita bahas di isi contentnya. Yaitu salah satunya memberikan efek style pada font. Tetapi yang dibahas disini hanyalah Tag yang sering digunakan dalam pemberian Efek Style Pada Font.

Font di HTML tentu bisa diedit dan diberikan efek seperti halnya di Microsoft Word. Sebagai contoh pemberian efek tebal, miring, garis bawah, atau merubah jenis fontnya.

Tetapi untuk pemberian efekt style ini lebih disarankan untuk menggunakan CSS. Karena sebagian tag di HTML sudah dinyatakan deprecated. Oke daripada berbelit-belit dengan penjelasan langsung saja penjelesan pertama membuat text miring dan tebal di HTML.

Membuat Efek Miring dan Tebal di HTML

Efek miring dan Tebal di HTML digunkan untuk mempercantik tampilan dari sebuah teks. Untuk membuat efek miring di HTML bisa menggunakan tag <em> emphasis atau tag <i> italic.

Sedangkan untuk membuat efek tebal di HTML menggunakan tag <strong> atau tag <b>.
Kenapa ada dua tag yang digunakan untuk membuat efek ini??

Untuk penggunaan tag <b> dan tag <i> digunakan pada HTML versi lama. Sehingga bisa dinyatakan sebagai tag deprecated. Tetapi dalam kasus ini masih ada web browser yang dapat mengartikan kedua tag ini.

Sedangkan untuk versi HTML yang baru menggunakan tag <strong> untuk membuat efek tebal dan tag <em> untuk membuat efek miring. Untuk penulisan tag <strong> dan tag <em> ditutup menggunakan tag penutup.

 Berikut adalah contoh kode HTML untuk membuat efek tebal dan miring :
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Cara membuat efek miring dan tebal</title>
<head>
<body>
 <h1>Cara membuat efek miring dan tebal</h1>
<p><strong>HTML</strong> adalah sebuah bahasa dasar yang digunakan untuk membuat <em>struktur</em> website</p>
<body>
<html>
Pemberian efek bold dan italic

Membuat Teks Bergaris (Underline) dan Teks Dicoret (Strikethrough)

Ada 2 (dua) cara untuk membuat teks bergaris dan teks dicoret. Yaitu menggunakan tag <u> dan tag <ins> untuk membuat teks bergaris,  tag <del> dan tag <s> untuk membuat teks dicoret.

Mana yang lebih baik digunakan??

Kedua-dua tag ini masih dapat digunakan di HTML versi terbaru. Jadi apabila sobat ingin menggunakan kedua-duanya akan tetap memberikan efek yang sama.

Jadi kenapa ada 2 buah tag yang memiliki fungsi yang sama??

Untuk tag <u> (underline) dan tag <s> (strikethrough) sudah ada sejak HTML pertama kali dibuat. Dan sempat dinyatakan sebagai tag deprecated di HTML versi 4.01. Sehingga digantikan dengan tag <ins> (underline) dan tag <del> (strikethrough). 

Akan tetapi di HTML terbaru yaitu HTML 5, penggunaan tag <u> (underline) dan tag <s> (strikethrough) kembali dapat digunakan. Sampai saat inipun masih terdapat perdebatan tentang penggunaan tag ini.

Berikut adalah contoh penggunaan ke-empat tag ini :
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Cara membuat efek miring dan tebal</title>
<head>
<body>
 <h1>Cara membuat teks bergaris dan teks dicoret</h1>
<p><s>CSS</s><u>HTML</u>adalah sebuah<ins>bahasa dasar</ins>
yang digunakan untuk membuat<del>tampilan</del>struktur website</p>
<body>
<html>
contoh gambar teks bergaris dan teks dicoret

Membuat Superscript dan Subscript

Superscript diartikan sebagai sebuah karakter kecil diatas text yang umumnya digunakan didalam penulisan rumus matematika seperti pangkat. Di dalam HTML untuk membuat superscript menggunakan tag <sup>.

Subscript memiliki arti sebuah karakter kecil yang diletakkan di bawah baris normal. Secara umum Subscript digunakan untuk menulis rumus kimia. Untuk membuatnya menggunakan tag <sub>.

Berikut adalah contoh dari penggunaan kedua tag ini :
<p>Pak Azis memiliki tanah seluas 748 m<sup>2</sup> di Desa Mulyoharjo Jepara.</p>
<p>Manusia memerlukan sebuah Oksiken (O<sub>2</sub>) untuk bernafas.</p>
Contoh gambar subscript dan superscript

Abbr Element

Abbr merupakan singkatan dari Abbreviation, yang berarti singkatan. Tag ini digunakan untuk menandai sebuah singkatan dalam sebuah kata atau kalimat.

Tag <abbr> memiliki satu atribut yang sering digunakan yaitu title. Atribut title berfungsi untuk menampilkan kepanjangan dari singkatan yang ada dalam tag <abbr>.

Agar kepanjangan dari singkatan yang dibuat dapat dilihat kursor mouse harus diletakkan di teks yang diberikan efek abbr. Contoh kodenya :
<p>
<abbr title="Hypertext Markup Languange">HTML</abbr> merupakan sebuah bahasa dasar untuk membuat sebuah struktur website
</p>
contoh gambar efek abbr
Itulah beberapa Tag di HTML yang digunakan untuk membuat beberapa efek di HTML. Selain tag-tag yang sudah dijelaskan masih ada banyak tag yang memiliki fungsi memberikan efek kepada teks.

Tetapi jarang sekali digunakan, selain itu pemberian efek pada sebuah teks disarankan menggunakan CSS. Karena fungsi CSS sendiri pengatur tampilan website. Sedangkan HTML hanyalah sebuah struktur dasarnya.

Cukup sekian materi tentang pemberian Efek Style pada Font, untuk selanjutnya materi tentang pembuatan bullet and numbering (List). Apabila bermanfaat jangan lupa share yaa.. :)
SHARE

Azis Saputra

Saya pribadi mengucapkan banyak terimakasih atas kunjungan dan partisipasi teman-teman, kritik dan saran selalu diterima, dan apabila apa yang teman-teman peroleh dari blog ini bermanfaat. Penulis mempersilahkan share sebanyak-banyaknya agar orang lain juga memperoleh manfaatnya juga.

    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar

Dilarang keras menyebar spam, di alamat blog ini.Terimakasih atas kerjasamanya.