Tutorial HTML 5 - Format Teks

Memformat teks seperti membuat teks menjadi miring, tebal, besar, dan sebagainya dapat dilakukan dengan menambahkan tag-tag untuk memformat HTML.
Coba lihat contoh berikut!

<html>
<body>

<p><b> Teks tebal </b></p>
<p><strong> Teks tebal dengan tag strong </strong></p>
<p><i> Teks miring </i></p>
<p><em> Teks miring dengan tag em (emphasize) </em></p>
<p><u>Teks ini bergaris bawah </u></p>
<p><strike> Teks tercoret dengan garis tengah </strike></p>
<p><big> Teks ini besar </big> </p>
<p><small> Teksini kecil</small></p>
<p><tt> Teks mesin ketik</tt></p>
<p>Teks kecil di bawah: H<sub>2</sub></p>
<p>Teks kecil di atas: 20<sup>10</sup></p>

</body>
</html>

Kode HTML di atas akan menghasilkan seperti dibawah ini





























Format Teks HTML

<html>
<body>

<p><b>Teks tebal</b></p>
<p><strong>Teks tebal (strong)</strong></p>
<p><i>Teks miring</i></p>
<p><em>Teks miring (emphasize)</em><p>
<p><u>Teks bergaris bawah</u></p>
<p><strike>Teks tercoret</strike></p>
<p><big>Teks besar</big></p>
<p><small>Teks kecil</small></p>
<p><sub>Teks kecil di bawah</sub></p>
<p><sup>Teks kecil di atas</sup></p>
<p><ins>Teks bergaris bawah (Inserted text) </ins></p>
<p><del>Teks tercoret (di hapus)</del></p>

</body>
</html>

Perbedaan <b>, <i> dengan <strong>, <em>

Walaupun <b> dengan <strong> dan <i> dengan <em> menghasilkan output yang sama, tapi itu berbeda dalam pengartiannya.
<b> dan <i> mendefinisikan teks tebal dan miring saja. Sedangkan <strong> dan <em> mendefinisikan bahwa sebuah teks diartikan sebagai "penting".
Tapi sekarang semua Browser utama (Firefox, Chrome, Opera, IE, Safari) telah merender (mengubah) <strong> sebagai <b>, dan <em> sebvagai <i>.

Teks yang dihapus dan dimasukan  (<del> dan <ins>)

Gunakan tag del dengan ins.
ins digunakan untuk teks yang dimasukan (dipilih), dan tag del menndakakn bahwa teks tersebut dihapus
Praktekan contoh berikut dan lihat hasilnya

<html>
<body>

<p>Saya memilih Partai <del>Satu</del> <ins>Dua</ins></p>

<body>
<html>

Pada cotoh di atas teks satu akan dicoret dan teks dua akan digaris bawahi.
Maksud kalimat di atas adalah memilih Partai Dua, tetapi partai satu sengaja ditampilkan dengan dicoret (tidak dipilih), karena alasan tertentu, ngerti kan maksudnya?

Tag                      Fungsi                                                                                        
<b>Membuat teks tebal (Bold)
<strong>Membuat teks tebal (Strong)
<i>Membuat teks miring (Italic)
<em>Membuat teks miring (Emphasiz)
<u>Membuat teks bergaris bawah (Underlined)
<strike>Membuat teks tercoret dengan garis di tengah 
<big>Membuat teks besat (Big)
<small>Membuat teks kecil (Small)
<sub>Membuat teks kecil di bawah (Subscript)
<sup>Membuat teks kecil di atas (Superscript)
<ins>Membuat teks bergaris bawah (yang benar dari yang di coret) (Inserted)   
<del>Membuat teks dicoret tengah (teks salah) (Deleted)


Kode komputer

<html>
<body>

<code>Teks kode komputer</code>
<kbd>Keyboard input</kbd>
<samp>Sampel kode</samp>
<tt>Teks teletip (Teletype)</tt>
<pre>Teks terformat (Preformatted)</pre>
<var>Teks variabel</var>

</body>
</html>

Kode di atas bagus untuk menampilkan kode komputer, lihat contoh di bawah

<pre>
harga = 1000
if harga:
     print <var>"Harga Barang - "</var>, harga
</pre>

Kode di atas akan menghasilkan tampilan seperti ini


harga = 1000
if harga:
     print "Harga Barang - ", harga



Tag                      Fungsi                                                                                                
<code>Teks kode komputer                                                                                   
<kbd>Teks keyboard
<samp>Sampel kode komputer (Sample)
<tt>Teks Teletip (Teletype)
<pre>Teks terformat (Preformatted)
<var>Membuat teks variabel (Variable)


Definisi dan kutipan

Singkatan dan akronim

<html>
<body>

<p>
<abbr title="Tentara Nasional Indonesia">TNI</abbr><br />
<abbr title="Hyper Text Markup Language">HTML</abbr><br />
<abbr title="Random Access Memory">RAM</abbr>
</p>
<p>

<acronym title="Surat Tanda Nomor Kendaraan">STNK</acronym><br />
<acronym title="Kepala Desa">Kades</acronym><br />
<acronym title="Sinema elektronik">Sinetron</acronym>
</p>
<p>Letakan pointer mouse pada teks diatas</p>

</body>
</html>

Dengan meletakan pointer mouse pada teks dengan tag <abbr> atau <acronym>, maka akan tampil teks akronim atau singkatan dari teks tersebut.


Address

Mendefinisikan informasi kontak dari penulis/pemilik dari dokumen HTML

<html>
<body>

<address>
Writteb by Alusplus<br />
<a href="mailto:nama@contoh.com">Email us</a><br />
Address: Jl. dunia maya, indonesia<br />
Phone: +12345678
</address>

</body>
</html>


Arah teks

Contoh dibawah akan membuat teks ditulis dari kanan ke kiri

<html>
<body>

<bdo dir="rtl">Teks ini ditulis dari kanan ke kiri</bdo>
<p>Jika browser kalian mendukung bi-directional override (bdo), maka teks di atas akan ditulis dari kanan ke kiri / right to left (rtl) </p>

</body>
</html>

Kutipan (Quotations)

<html>
<body>

Kutipan panjang:
<blockquote>
Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang.
</blockquote>

<p>Browser akan memberikan beberapa jarak dari kiri dan memberikan baris kosong sebelum dan sesudah elemen blockquote</p>

Kutipan pendek: <q>Ini adalah kutipan pendek</q>
<p>Browser akan memberikan tanda kutip antara teks diatas</p>

</body>
</html>


Tag                      Fungsi                                                                                                       
<abbr>Membuat singkatan (Abbrevations)
<acronym>Membuat akronim
<address>Mendefinisikan informasi kontak dari penulis 
<bdo>Mendefinisikan arah teks (Bi-Directional Override)
<blockquote>Mendefinisikan kutipan panjang (long quotation)
<q>Mendefinisikan kutipan pendek (Short quotation)
<cite>Mendefinisikan kutipan (Citation)
<dfn>Mendefinisikan istilah (Definition term)




coba kode html di sini

0 komentar:

Posting Komentar

 
© 2012 Alusplus | Blogger.com