Format Teks

November 26, 2009


Ada beberapa tag HTML yang digunakan untuk mengatur format teks, seperti misalnya teks miring dan teks tebal. Latihan-latihan berikut akan menjelaskan format teks yang tersedia pada kode HTML.

Latihan 1 : Format Teks

  1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
  2. Ketik baris perintah berikut ini :

<html>

<body>

<b>Teks ini tebal</b>

<strong>Teks ini juga tebal</strong>

<big>Teks ini besar</big>

<small>Teks ini kecil</small>

<u>Teks ini bergaris bawah</u>

<i>Teks ini miring</i>

Teks ini berisi <sub>subscript</sub>

Teks ini berisi <sup>superscript</sup>

</body>

</html>
  1. Simpan file di My Document sebagai “coba4-1.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik “coba4-1.html” pada bagian File name, klik tombol Save.
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-1.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-1.html), lalu klik OK.

Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana teks yang terdapat di dalam elemen body ditampilkan pada web browser sesuai format tag HTML yang diberikan :

<b></b> dan <strong></strong> membuat format teks tebal

<big></big> membuat format teks besar

<small></small> membuat format teks kecil

<u></u> membuat teks bergaris bawah

<em></em> membuat format teks penekanan

<i></i> membuat format teks miring

<sub></sub> membuat format teks subscript (huruf kecil di bawah)

<sup></sup> membuat format teks superscript (huruf kecil di atas)

Latihan 2 : Teks Preformat

  1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
  2. Ketik baris perintah berikut ini :
<html>
<body>
<pre>
Ini adalah Teks yang tidak diformat. Hal ini membuat  spasi dan pergantian baris tidak berubah.
</pre>
<p>Preformat digunakan untuk penulisan kode program:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
  1. Simpan file sebagai “coba4-2.html”
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-2.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-2.html), lalu klik OK.

Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana teks yang berada di dalam tag <pre></pre> tidak akan diformat oleh web browser, dan akan ditampilkan apa adanya sesuai dengan apa yang dituliskan.

Spasi dan pergantian baris akan diabaikan oleh web browser. Seperti pada contoh, spasi dan pergantian baris akan ditampilkan persis seperti yang dituliskan pada kode HTML.

Latihan 3 : Teks Kutipan

  1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
  2. Ketik baris perintah berikut ini :
<html>
<body>
Ini adalah teks kutipan panjang:
<blockquote>Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang.</blockquote>
Ini adalah teks kutipan pendek:
<q>Ini adalah teks kutipan pendek</q>
</body>
</html>
  1. Simpan file sebagai “coba4-3.html”
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-3.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-3.html), lalu klik OK.

Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana teks kutipan ditampilkan pada web browser. Ada dua format teks kutipan dalam HTML :

  • Teks kutipan panjang dengan tag <blockquote></blockquote>
  • Teks kutipan pendek dengan tag <q></q>

Dengan tag <blockquote> pergantian baris dan batas margin (indent) untuk teks akan secara otomatis diformat oleh web browser. Sedangkan untuk teks kutipan pendek dengan tag <q> teks tidak mengalami format apapun.

Latihan 4 : Teks List

  1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
  2. Ketik baris perintah berikut ini :
<html>
<body>
<ul>Ini adalah contoh unordered list
<li> apple
<li> banana
<li> citrus
</ul>
<ol>Ini adalah contoh ordered list
<li> satu
<li> dua
<li> tiga
</ol>
</body>
</html>
  1. Simpan file sebagai “coba4-4.html”
  2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-4.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-4.html), lalu klik OK.

Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana membuat list (daftar) teks pada HTML. Ada dua jenis list yang dapat dibuat :

  • Unordered list (list menggunakan bullet) dengan tag <ul>
  • Ordered list (list menggunakan angka) dengan tag <ol>

Kemudian untuk masing-masing teks list digunakan tag <li>

Ringkasan Format Teks HTML

Tag Keterangan
<b> Menjelaskan teks tebal
<strong> Menjelaskan teks tebal
<big> Menjelaskan teks besar
<small> Menjelaskan teks kecil
<u> Menjelaskan teks bergaris bawah
<em> Menjelaskan teks penekanan
<i> Menjelaskan teks miring
<strong> Menjelaskan teks tebal
<sub> Menjelaskan teks kecil di bawah
<sup> Menjelaskan teks kecil di atas
<blockquote> Menjelaskan teks kutipan panjang
<q> Menjelaskan teks kutipan pendek
<ul> Menjelaskan list teks unordered
<ol> Menjelaskan list teks ordered
<li> Menjelaskan list teks
Posted by aitioneyai08
Filed in HTML
Tags:
Leave a Comment »

Leave a comment