Format Teks HTML


Pemrogaman WEB dengan HTML, Format Teks HTML, Pemformatan Teks, Teks Preformat, Computer Output, Address, Singkatan, Arah Teks, Quotation, Teks Yang Disisipkan atau Dihapus, Tag-tag Pemformatan, Tag-tag Computer Output, Tag Citation, Quotation, Definition
Pemformatan Teks
Teks dalam dokumen web dapat di format secara kusus untuk menunjukkan pernedaan dan penekannan terhadap isi dan maksud dari teks tersebut. Pembedaan ditampilkan dalam bentuk huruf tebal, miring (italic), digarisbawahi, dan semacamnya.
  • Beberapa pemformatan teks:
  • Menebalkan huruf (bold)
  • Memiringkan huruf (italic)
  • Member tekanan pada teks (emphasize)
  • Mengecilkan huruf
  • Superscript
  • Subscript

Contoh ini mendemontrasikan bagaimana anda dapat memformat teks dalam suatu dokumen HTML.
<!—coba_teksformat.htmlà
<html>
<body>
<b>Teks ini ditebalkan</b>
<br>
<strong>Teks ini tebal (strong)</strong>
<br>
<big>Teks ini besar</big>
<br>
<em>Teks ini emphasize</em>
<br>
<i>Teks ini miring</i>
<br>
<small> Teks ini kecil</small>
<br>
Teks ini berisi <sub>subscript</sub>
<br>
Teks ini berisi <sup>superscript</sup>
</body>
</html>

Teks Preformat
Jarak antar kata suatu teks atau kalimat di dalam dokumen web adalah sebesar satu spasi. Jarak antar kata atau kalimat dalam browser web adalah satu spasi, berapapun jumlah spasi ataupun jumlah baris dalam dokumen web yang sesungguhnya.

Agar browser web menampilkan sesuai dengan dokumen web tersebut didalam editor teks, maka teks yang bersangkutan harus diberi tanda tag <pre> diawalnya, dan </pre> diakhir teks yang bersangkutan.

Dengan tag <pre>, yang mempunyai kepanjangan “preformatted”, teks akan ditampilkan dalam browser dengan ukuran font dengan lebar-fix. Tag ini juga akan menjaga spasi, baris baru, dan tab sesuai dengan aslinya pada saat ditampilkan dalam browser. Salah satu penggunaan dari pre adalah untuk menampilkan suatu source program dalam web.

Contoh ini mendemontrasikan bagaimana anda dapat mengendalikan line break dan spasi dengan menggunakan tag pre.
<!—coba)preformet.htmlà
<html>
<body>
<pre>
                Void Node:: remove()
                {
                                If (prev)
                                                Prev->next = next;
                                Else if (parent)
                                                Parent->SetContent (null);
                                If (next)
                                                Next->prev = prev;
                                Parent = null;
                }
</pre>
</body>
</html>


Dalam teks yang disisipkan dengan menggunakan tag <pre> kita masig bisa menyisipkan tag lain untuk melakukan pemformatan, akan tetapi hal ini tidak direkomendasikan sama sekali.

Computer Output
Contoh ini mendemontrasikan bagaimana tag “computer-output” berbeda akan ditampilkan.
<!—coba_computeroutput.htmlà
<html>
<body>
<code>Computer Code</code>
<br>
<kbd>Input Keyboard</kbd>
<br>
<pre>
For I = 1 to 10
                Print I
Next I
</pre>
<tt>Teks teletype</tt>
<br>
<samp>Teks Sample</samp>
<br>
<var>Variable Komputer</var>
<br>
</body>
</html> 

Address
Alamat (address) merupakan salah satu elemen yang umum didalam suatu dokumen. Dalam HTML disediakan secara kusus tag address. Dengan adanya tag ini maka penulisan alamat dapat distandarkan.
Diawali dengan tag <address>, dan diakhiri dengan </address>. Setiap baris dalam penulisan alamat dipisahkan dengan menggunakan tag <br>.
Contoh ini mendemontrasikan bagaimana menuliskan sebuah alamat dalam suatu dokumen HTML.
<!—coba_address.htmlà
<html>
<body>
<address>
Pusat Komputer PIKSI ITB<br>
Jl. Ganesha 10<br>
Bandung<br>
Indonesia
</address>
</body>
<html> 

Singkatan
Terkadang kita menuliskan suatu dokumen dan ada beberapa istilah yang kita gunakan dan dinyatakan dalam menggunakan singkatan (akronim) saja. Tag<abbr> dan tag <acronym> dapat digunakan untuk menyimpan kepanjangan dari suatu singkatan yabg ditampilkan dalam dokumen tersebut, dengan menggunakan atribut title.

Sintaks:
<abbr title=”kepanjangannya”>singkatan</abbr>
<acronym title=”kepanjangannya”>sinkatan</acronym>

Dengan menggunakan tag tersebut di atas, maka pada saat mouse pointer kita berada di atas singkatan tersebut, pada saat dokumen tersebut ditampilkan dalam browser web, maka kepanjangan dari singkatan tersebut akan ditampilkan mengambang diatasnya.

Contoh ini mendemonstrasikan bagaimana untuk menangani suatu singkatan atau akronim.
<!—coba_abbrev.htmlà
<html>
<body>
<abbr title=”dan lail-lain”>
Dll
</abbr><br>
<acronym title=”World Wide Web”>
WWW
</acronym>
<p>Pada beberapa browser atribut title dapat digunakan untuk menampilkan kepanjangan dari teks singkatan/akronim tersebut apabila mouse berada diatasnya.</p>
</body>
</html> 

Arah Teks
Cara menuliskan teks dapat diubah dari kelaziman dari kiri ke kanan (ltr) menjadi dari kanan ke kiri (rtl). Tag <bdo> - bidirectional override, merupakan  tag yang digunakan untuk mendefinisikan arah penulisan teks.
Conroh ini mendemonstrasikan bagaimana untuk mengubah arah teks.
<!—coba_teksdirect.htmlà
<html>
<body>
<p>
Jika browsr mwndukung bi-directional override (bdo), baris berikut akan ditulis dari kanan  ke kiri (rtl) :
</p>
<bdo dir=”rtl”> Ini beberapa teks Hebrew</bdo>
</body>
</html> 

Quotation
Suatu kutipan teks lazim ada dalm suatu dokumen , ada dua macam kutipan:
ü  Kutipan pendek – tag <q>
ü  Kutipan panjang – tag <blockquote>
Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai suatu block sendiri. Kebanyakan browser umumnya mengubah margin untuk kutipan teks tadi untuk memisahkan dari teks yang mengelilinginya.
Tag <q> tidak melakukan suatu yang khusus, tetapi dengan kita telah mendefinisikan sebagai kutipan, kemudian kita menggunakan style sheet maka kutipan ini dapat diatur pemformatannya dengan menggunakan style sheet.
Contoh ini mendemonstrasikan bagaimana untuk menangani quotation yang panjang dan pendek.
<!—coba_quotation.htmlà
<html>
<body>
Berikut adalah teks dengan quotation yang panjang:<blockquote>
Berikut adalah teks dengan quotation yang panjang
Berikut adalah teks dengan quotation yang panjang
Berikut adalah teks dengan quotation yang panjang
Berikut adalah teks dengan quotation yang panjang
Berikut adalah teks dengan quotation yang panjang
Berikut adalah teks dengan quotation yang panjang
Berikut adalah teks dengan quotation yang panjang</blockquote>
Berikut adalah teks dengan quotation yang panjang
<q>
Isi quotation pendek
</q>
<p>Dengan elemen blockquote, browser menyisipkan line break dan margin baru, tetapi elemen q tidak melakukan sesuatu yang khusus.
</p>
</body>
<html> 

Teks Yang Disisipkan atau Dihapus
Dalam suatu workflow lazim adanya suatu koreksi atas pekerjaan, koreksi terhadap suatu teks dapat disimulasikan /diperlihatkan dengan menggunakan tag <ins> dan tag <del> untuk menunjukan hasil koreksi yang disisipkan dan yang dihapus.

Contoh ini mendemontrasikan bagaimana untuk menandai suatu teks yang dihapus atau yang disisipkan pada suatu dokumen.
<!—coba_insdel.htmlà
<html>
<body>
<p>
Satu lusin adalah
<del>dua puluh</del>
<ins> dua belas</ins>
Buah
</p>
<p>
Umumnya browser akan mencoret teks yang dihapus dan menggaris bawahi teks yang disisipkan.
</p>
<p>
Beberapa browser yang lebih lama akan menampilkan teks yang dihapus atau yang disisipkan sebagai teks biasa – tidak dibedakan.
</p>
</body>
</html> 

Tag-tag Pemformatan
Tag awal
NN
IE
W3
Kegunaan
<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<ins>
<del>
<s>
<strike>
<u>
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
4.0
4.0
3.2
3.2
3.2
3.2
3.2
3.2
3.2
3.2
4.0
4.0
Definisi teks yang ditebalkna
Definisi teks yang besar ukurannya
Definisi teks yang yang ditekan
Definisi teks yang yang miring - italic
Definisi teks yang yang kecil ukurannya
Definisi teks yang yang ditebalkan
Definisi teks yang jadi subscript
Definisi teks yang jadi super script
Definisi teks yang disisipkan
Definisi teks yang dihapus
Deprecated. Use <del> instead
Deprecated. Use <del> instead
Deprecated. Use styles instead



Diposting oleh