Belajar Kode CSS & Desain Blog: tag

Seperti halnya metode penulisan teks pada umumnya, dalam web/blog juga mengenal beberapa variasi atau gaya penulisan karakter teks berbeda-beda. Beberapa yang sering dijumpai misalnya pada penulisan judul/title yang menggunakan tag h1 s/d h6 (heading) yang dibedakan melalui penggunaan ukuran font berukuran besar, sedang hingga kecil. Selain itu juga kita kenali penulisan karakter dengan bentuk tebal (menggunakan tag strong) yang bertujuan untuk menandai "sebuah teks yang dinyatakan penting". Satu lagi yang lain adalah karakter/teks dengan bentuk miring. Karakter seperti ini dibentuk melalui tag "em", dimana karakter/teks yang dibuat dalam bentuk miring dimaksudkan untuk memberi tekanan pada teks tertentu (renders as emphasized text).

Beberapa sifat dasar tag html em tag

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

Cara menggunakan

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

Contoh

teks yang diberi penekanan
hasil kode di atas akan terlihat seperti teks di bawah ini:
teks yang diberi penekanan
Bandingkan dengan teks di bawah ini (tanpa tag em):
teks yang diberi penekanan

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

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

<!DOCTYPE html>
<html>
<title>Tag <em> - html em 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;}
</style>
</head>

<body>
<div id="konten">

<h2>tag em dalam elemen html "p"</h2>
<p>Tag "em" berfungsi memberi tekanan pada teks tertentu dengan cara <em>merubah teks berbentuk miring</em>. Anda <em>dapat menggunakan secara berulang dalam elemen induk yang sama</em> seperti halnya pada tag "p" dalam demo ini. 
<h2>2 cara menuliskan tag em</h2>

<p>Menuliskan tag em dapat dilakukan dengan dua cara:
<ol>
<li><strong><em>menggunakan huruf kecil</em></strong> yang dituliskan seperti berikut:<br/>
&lt;em&gt;<strong>teks disini!</strong>&lt;/em&gt;</li>
<li><strong><EM>menggunakan huruf capital</EM></strong> dengan bentuk penulisan seperti di bawah ini:<br/>
&lt;EM&gt;<strong>Teks disini!</strong>&lt;/EM&gt;</li>
</ol></p>

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

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

Belajar Kode CSS & Desain Blog

Halaman

tag <em> - html tag em

Beberapa sifat dasar tag <em> html em tag

Cara menggunakan

Contoh

1 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.19.2012');

tag <em> - html tag em

Beberapa sifat dasar tag <em> html em tag

Cara menggunakan

Contoh

1 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