Belajar Kode CSS & Desain Blog: Tag

HTML tag "i" berfungsi untuk membuat karakter/teks berbentuk miring (italic). Hampir tak ada bedanya dengan html tag "em" (emphasis) yang juga mempunyai fungsi menampilkan karakter/teks miring. Sekalipun mempunyai fungsi dan kegunaan yang tak jauh berbeda, dalam web/blog disarankan untuk mengutamakan penggunaan html tag "em" dengan pertimbangan adanya perbedaan metode penulisan karakter "i" pada beberapa bahasa tertentu.

Beberapa sifat dasar tag html i tag

display inline
hanya dapat diberlakukan pada teks
dapat diselipkan dalam elemen html lain yang fungsinya untuk menampilkan teks
tag "i" dapat dipergunakan secara berulang pada elemen induk yang sama.
tag pembuka dan penutup "i" dapat dituliskan dalam huruf kecil atau huruf capital.
sifat dasar tag "i" dapat dirubah melalui penambahan attribute tertentu.

Cara menggunakan

Karakter/teks yang hendak ditampilkan dalam bentuk "miring" diletakkan diantara tag pembuka i ( atau ) dan tag penutup i ( atau ).

Contoh

teks miring
hasil kode di atas akan terlihat seperti teks di bawah ini:
teks miring
Bandingkan dengan teks di bawah ini (tanpa tag "i"):
teks miring

mengganti tag "i" dengan css font-style property

Selain lebih disarankan untuk menggunakan html tag "em" untuk membentuk karakter/teks berbentuk miring, cara lain yang juga dipandang jauh lebih baik adalah menggunakan value/nilai "italic" pada css font-style property. Kode yang dipergunakan sbb:

<style type="text/css">
span.miring {
    font-style: italic;
}
</style>

<span class="miring"> letakkan teks disini!</span>

Edit kode dalam box demo di bawah ini untuk mengetahui lebih jelas fungsi tag "i". Anda juga dapat menggabungkan tag "i" dengan tag lain untuk mendapatkan hasil berbeda, bahkan jika diperlukan bisa juga ditambahkan attribute style dengan beberapa properti css seperti misalnya color, background dan properti lainnya.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>Tag <i> - html "i" tag</title>
<head>
<style type="text/css">
#konten{margin:15px 5px;padding:20px;background:#eee;box-shadow:0 0 20px #555;border-radius:6px;}
h2{padding-bottom:5px;color:green;margin:3px 0;border-bottom:5px double #444;}
.clear{clear:both;}
pre{width:400px;padding:20px;font:normal 14px Courier New, Courier, Monospace;line-height:18px;margin:15px 0;white-space:pre-wrap;background:lightyellow;color:#222;}
</style>
</head>

<body>
<div id="konten">

<h2>tag "i" dalam elemen html "p"</h2>
<p>Tag "i" <i>berfungsi membentuk karakter/teks berbentuk miring </i>. Anda <i>dapat menggunakan secara berulang dalam elemen induk yang sama</i> seperti halnya pada tag "p" dalam demo ini. </p>
Kode html untuk teks seperti terlihat di atas adalah sbb:
<pre>&lt;p&gt;Tag "i" &lt;i&gt;berfungsi membentuk karakter/teks berbentuk miring &lt;/i&gt;. Anda &lt;i&gt;dapat menggunakan secara berulang dalam elemen induk yang sama&lt;/i&gt; seperti halnya pada tag "p" dalam demo ini. &lt;/p&gt;</pre>
<h2>Menggunakan tag "i" pada heading</h2>
<h3>Anda dapat menyisipkan tag "i" pada heading untuk membuat <i>teks</i> atau <i>K</i>arakter berbentuk <i>miring</i></h3>
Bentuk kode html teks di atas adalah sbb:<br/>
<pre>&lt;h3&gt;Anda dapat menyisipkan tag "i" pada heading untuk membuat &lt;i&gt;teks&lt;/i&gt; atau &lt;i&gt;K&lt;/i&gt;arakter berbentuk &lt;i&gt;miring&lt;/i&gt;&lt;/h3&gt;</pre>
<h2>cara menuliskan tag em</h2>
<p>Menuliskan tag em dapat dilakukan dengan dua cara:
<ol>
<li><strong><i>menggunakan huruf kecil</i></strong> yang dituliskan seperti berikut:<br/>
&lt;i&gt;<strong>teks disini!</strong>&lt;/i&gt;</li>
<li><strong><I>menggunakan huruf capital</I></strong> dengan bentuk penulisan seperti di bawah ini:<br/>
&lt;I&gt;<strong>Teks disini!</strong>&lt;/I&gt;</li>
</ol></p>

<h2>Menambah attribute style pada html pada tag "i"</h2>
<div style="background:lightblue;padding:10px;margin:20px 0;">Anda dapat merubah sifat dasar/tampilan dasar tag "i" dengan menambah attribute style dengan beberapa property css tertentu di dalamnya seperti misalnya color, background serta properti lainnya. Berikut ini adalah salah satu contoh penambahan attribute style untuk merubah tampilan dasar tag "i" :<br/>
Menambah <i style="color:yellow;background:blue;padding:0 4px;font-weight:bold;">attribute style</i> untuk merubah tampilan dasar tag "i".<br/>
Kode yang digunakan untuk membuat teks seperti di atas adalah sbb:<br/>
<pre>&lt;i style="color:yellow;background:blue;padding:0 4px;font-weight:bold;"&gt;Teks disini!&lt;/i&gt;</pre></div>

</div>
</body> 
</html>

2 komentar:

Unknown7 Desember 2015 pukul 14.00
Jadi untuk membuat teks miring yang mana lebih disarankan gan?

bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html
BalasHapus
Balasan
Unknown13 Oktober 2017 pukul 11.06
Rasakan sensasi permainan yang menakjubkan dan nikmati bonus yang kami sediakan untuk anda .

Hanya Dengan 1 USER ID anda dapat memainkan 7 GAMES !!
BandarPoker | PokerOnline | CapsaSusun | DominoQQ | BandarQ | AduQ | SAKONG

Mari bermain bersama RUBYQQ , kami Agen Judi Poker Online Terbaik .
HOT PROMO DARI RUBYQQ yang di berikan RUBYQQ untuk para pemain judi poker online yang telah bergabung bersama kami :

☆ Bonus Referral 10% + 10% ( Seumur Hidup )
☆ Bonus Turn Over 0,5% DI BAGIKAN SETIAP HARI !!
☆ NO ROBOT & ADMIN
☆ 100% Fair Play Member Vs Member
☆ Proses Deposit & Withdraw 1-2 Menit .

Pendaftaran ==> http://rubyqq99.pkr69.com
Untuk informasi lebih lengkap silahkan Hubungi Customer Service kami
BBM : 2B8938F7
FACEBOOK : rubyqq
SKYPE : RUBY QQ
BalasHapus
Balasan

Tambahkan komentar

Belajar Kode CSS & Desain Blog

Halaman

Tag <i> - html i tag

Beberapa sifat dasar tag <i> html i tag

Cara menggunakan

Contoh

mengganti tag "i" dengan css font-style property

2 komentar:

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('10.20.2012');

Tag <i> - html i tag

Beberapa sifat dasar tag <i> html i tag

Cara menggunakan

Contoh

mengganti tag "i" dengan css font-style property

2 komentar:

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e