HTML <p> tag

HTML "p" tag ditandai dengan tag pembuka <p> dan tag penutup </p>, dimana tag "p" mendefinisikan sebuah fungsi paragraf dan tag ini secara khusus diperuntukkan sebagai "box bagi teks". Karena memang mendefinisikan sebuah paragraf, secara otomatis semua browser akan membuat perpindahan ruang (menciptakan margin dengan tag "p" dan tag lain berikutnya) sehingga pada halaman akan terlihat sebagai perpindahan alinea baru. Sekalipun tag "p" sudah mempunyai karakter yang bersifat khusus seperti di atas, namun jika dikehendaki dapat dilakukan perubahan melalui kode css. Kondidi seperti ini sebenarnya tidak hanya berlaku bagi tag "p" akan tetapi juga berlaku bagi semua tag yang lain seperti halnya tag "DIV".

Cara menggunakan tag <p>

<p>Tuliskan teks di sini!</p>
Contoh :
<p>Tag "p" dibuka dengan &lt;p&gt; dan ditutup dengan &lt;/p&gt; Teks diletakkan diantara tag pembuka dan penutup tersebut. Tag "p" mendefifinisikan sebuah paragraf dan secara otomatis setiap kali menggunakan tag "p" semua browser akan menciptakan jarak dengan tag "p" atau tag lain berikutnya.</p>

<p>Sekalipun pada dasarnya tag ini diperuntukkan sebagai box bagi teks, namun anda tetap bisa menyisipkan dokumen dalam bentuk yang lain seperti halnya image.</p>

Kode di atas akan menghasilkan doumen seperti berikut:

Tag "p" dibuka dengan <p> dan ditutup dengan </p> Teks diletakkan diantara tag pembuka dan penutup tersebut. Tag "p" mendefifinisikan sebuah paragraf dan secara otomatis setiap kali menggunakan tag "p" semua browser akan menciptakan jarak dengan tag "p" atau tag lain berikutnya.

Sekalipun pada dasarnya tag ini diperuntukkan sebagai box bagi teks, namun anda tetap bisa menyisipkan dokumen dalam bentuk yang lain seperti halnya image.

Attribute yang dapat digunakan pada tag "p"

  • align : align="left", align="right", align="center", align="justify" 
    <p align="left">Tuliskan teks disini!</p>
  • class : Untuk membuat class harus menggunakan css.
    <style type="text/css">
p.my-class{
        background:red;
        padding:15px;
}
</style>

<p class="my-class">Text here!</p>
  • id : Untuk membuat id harus menggunakan css.
    <style type="text/css">
p.my-id{
        font:bold 14px Serif;
        line-height:20px;
        background:#555;
        color:#fff;
        padding:20px 10px;
}
</style>

<p id="my-id">Text here!</p>
  • dir : Untuk mengatur posisi elemen teks dalam tag DIV. 
    <p dir="rtl">Text here!</p>

<p dir="ltr">Text here!</p>
  • lang : berkaitan dengan penggunaan kode bahasa dan konten. 
    <p lang="en">Text here!</p>
    "en" kode untuk bahasa Inggris.
  • style : attribute style berisi properti css dan nilainya. 
    <p style="font:normal 1em Arial;padding:15px 10px;line-height:22px;background:#fff;color:#000;border:1px solid blue;margin:20px 0;width:400px;">Text here!</p>
  • title : bisa difungsikan dalam tag "p" namun biasanya sangat jarang digunakan.

Events Attribute dapat digunakan pada tag "p"

Events attribute:
onclick, ondblclick, onmousedown, onmousemove , onmouseout, onmouseover, onmouseup, onkeydown, onkeypress dan onkeyup.
Di bawah telah disertakan demo Tag "p" yang dibuat dengan kode CSS. Berbagai pengaturan thd tag "p" dapat dilakukan untuk disesuaikan dengan bentuk dan tampilan dokumen yang diinginkan.

Please click the button to display. Continue with editing code and click to see the results!
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

My ProfileC l o s e

FollowerC l o s e