HTML Element Teks

by

Tutorial sebelumnya saya membahas tentang elemen di HTML yang wajib kamu ketahui.

Lantas, apa bedanya dengan itu?

Dalam tutorial kali ini saya ingin membahas khusus mengenai elemen untuk mengedit teks.

Lebih tepatnya adalah, elemen untuk mempercantik suatu tulisan.

Elemen-elemen tersebut antara lain:

NoElemenTag
1.Tebal<b>, <strong>
2.Miring<i>, <em>
3.Garis Bawah<u>
4.Dicoret<strike>
5.Subscript<sub>
6.Supscript<sup>
7.Stabilo<mark>

Implementasi file html: 

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Teks HTML</title>
	<link rel="stylesheet" type="text/css" href="belajar_style.css">
</head>
<body>
	<b>Teks Tebal Beneran</b><br>
	<strong>Teks tebal kontekstual</strong><br>
	<i>Teks miring beneran</i><br>
	<em>Teks miring kontekstual</em><br>
	<u>Teks garis bawah</u><br>
	Ini contoh <sub>Subscript</sub><br>
	Ini contoh <sup>Supscript</sup><br>
	<mark>Ini contoh distabilo</mark>
</body>
</html>

Hasilnya adalah:

Supaya kamu makin jelas, berikut penjelasan detailnya:

Mempertebal Teks

Untuk menebalkan teks biasa digunakan 2 tipe yaitu:

  • Bold
  • Strong

Apa bedanya? Baca pelan-pelan ya…

Jika dilihat sekilas tidak ada bedanya antara bold dan strong. Yang membedakan adalah konteks tujuan penggunaannya.

Bold digunakan untuk mempertebal suatu teks, teksnya saja bukan maksud tujuannya.

Misal: tulisan itu ditebalkan saja karena kurang jelas.

Ya alasan untuk menebalkan hanya kurang jelas saja.

Beda dengan strong, kalau strong ditujukan untuk menekankan suatu konteks dalam kalimat.

Misal: kamu itu cantik, sayang kamu boros

Di kalimat tersebut, ada suatu penekanan yaitu “sayang kamu boros”.

Tag yang digunakan adalah <b>teks yang dibold</b> untuk bold, dan <strong>teks penekanan<strong> untuk strong.

Teks Miring

Sekarang untuk memiringkan teks miring seperti ini ada 2 kondisi juga, yaitu:

  • Italic
  • EM

Konteksnya sama seperti diatas, italic itu seperti bold yang penting miring, sedangkan em itu seperti strong konteksnya untuk memperjelas.

Misal, untuk menulis istilah asing menggunakan teks miring maka dipakai em.

Kode untuk italic adalah <i>...</i> dan <em>...</em>.

Garis Bawah

Untuk membuat garis bawah seperti ini, maka menggunakan elemen <u>..</u>

Teks Dicoret

Untuk mencoret teks SEPERTI INI

Menggunakan tag elemen <strike>...</strike>

Subscript

Subscript adalah cara menulis teks lebih kecil tapi posisinya dibawah, contoh subscript.

Untuk menulisnya denga ntag <sub>...</sub>

Supscript

Supscript adalah cara menulis kalimat berpangkat, lebih kecil tapi posisi diatas, contoh supscript

Stabilo

Bisa menggunakan tag mark nanti menimbulkan efek stabilo.

Tag yang digunakan adalah <mark>...</mark>. Biar editnya mudah, kita bisa gunakan CSS.

Leave a Comment