Cara Membuat Teks Miring (Italic) pada HTML

Cara buat teks miring pada html

Tutorial belajar HTML kali ini kita akan membahas bagaimana cara membuat teks menjadi miring (kalau di Ms.Word dengan menggunakan Toolbar Italic) pada HTML.

Pemrograman HTML memiliki elemen untuk memberikan gaya pada teks, seperti BoldItalic dan Underline.

  • BOLD, memberikan efek cetak tebal pada teks, biasa digunakan sebagai penegasan pada kata atau kalimat.
  • ITALIC, memberikan efek cetak miring pada teks, biasa digunakan pada kata berbahasa asing.
  • UNDERLINE, memberikan efek garis bawah pada suatu kata atau kalimat.

Cara penggunaan efek teks miring pada HTML menggunakan tag <em> atau <i>.

Dasar Penggunaan

Berikut cara penggunaan teks miring (Italic) pada HTML. Silakan buat sebuah file HTML seperti dibawah ini.

Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML Teks Miring (Italic)</title>
</head>
<body>
	<em>Teks menjadi miring dengan tag em</em>
	<br />
	<i>Teks menjadi miring dengan tag i</i>
</body>
</html>

Simpan dan lihat pada browser. Maka hasilnya akan seperti ini:

Teks menjadi miring dengan tag em
Teks menjadi miring dengan tag i

Penggunaan tag <em> maupun <i> merupakan hal yang sama, tag <em> digunakan pada versi HTML 5 yang dinilai paling modern. Apabila kamu menggunakan versi HTML 5, maka gunakanlah tag <em> yang dianjurkan.

Teks Miring Pada Elemen

Penggunaan efek teks miring juga dapat digunakan didalam elemen-elemen HTML lainnya, seperti judul dan paragraf yang dasarnya merupakan konten berbentuk teks. Berikut contohnya:

Kode HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML Teks Miring (Italic)</title>
</head>
<body>
	<h3>Selamat Datang, <em>John Doe</em>!</h3>
</body>
</html>

Simpan dan hasilnya akan seperti berikut:

Selamat Datang, John Doe!

Cukup mudah bukan? Tetapi aku ingin memberikan efek italic pada teks yang bercetak tebal (Bold). Apakah bisa? Tentu bisa.

Kode HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML Teks Miring (Italic)</title>
</head>
<body>
	<strong>Tutorial Belajar HTML <em>Untuk Pemula</em>!</strong>
</body>
</html>

Simpan dan hasilnya akan terlihat seperti dibawah ini:

Tutorial Belajar HTML Untuk Pemula!

Demikian tutorial belajar HTML cara membuat teks miring pada HTML. Mari kita banyak belajar HTML setiap hari!

Aku membuat tutorial belajar html lengkap disertai gambar dan kode html pada menu HTML Warrior. Kamu bisa membacanya di Belajar HTML Gampang Banget! – HTML Warrior #1.

Semoga bermanfaat dan jangan lupa share yah!

Baca juga: 

Buku Belajar CSS - CSS Monster | CSSMonster.ID

Pin It on Pinterest

Shares
Scroll to Top