Belajar html Format Teks.

ke bawah


Jika pada topik sebelumnya membahas tentang memberi variasi gaya/style pada huruf. Kali ini kita akan membahas tentang formasi dari teks atau tulisan dalam suatu kalimat, paragraf maupun alinea. Pembahasan ini meliputi perataan teks dalam paragraf, definisi dan lain-lain.

Perataan teks.

Alignment atau perataan teks dimaksudkan untuk mengatur posisi teks yang terdiri dari: rata kiri (left), rata kanan (right) dan rata tengah (center) dalam suatu paragraf atau tulisan.

Sebelumnya, yaitu pada versi html 3.2 ke bawah, untuk mengatur perataan teks digunakan atribut align,
namun atribut tersebut tidak lagi digunakan untuk perataan teks pada versi html 4 ke atas, sebagai gantinya digunakan atribut style dengan properti text-align:left (untuk rata kiri), text-align:right (untuk rata kanan) dan text-align:center (untuk teks berada ditengah). Kitapun bisa mengatur teks menjadi rata bagian kiri dan kanan, yaitu dengan properti text-align:justify pada atribut style.

Di bawah ini adalah bagaimana cara mengatur teks rata kiri, tengah, rata kanan dan rata kiri-kanan.

Mengatur teks rata kiri.

<p style="text align:left;">

Teks ini diatur dengan atribut style menjadi rata kiri.
</p>

Mengatur teks berpusat di tengah:

<p style="text-align:center">

Teks ini diatur dengan atribut style menjadi berpusat ditengah.

</p>

Mengatur teks rata kanan

<p style="text-align:right">

Teks ini diatur dengan atribut style menjadi rata kanan.
</p>

Mengatur teks rata kiri-kanan.

<p style="text-align:justify">

Text ini diatur dengan atribut style menjadi rata kiri dan rata kanan.
</p>

Di bawah ini adalah hasilnya yang tampil di halaman web.

Rata kiri.

Teks ini diatur dengan atribut style menjadi rata kiri.

Rata tengah.

Teks ini diatur menggunakan atribut style menjadi berpusat ditengah.

Rata kanan.

Teks ini diatur dengan atribut style menjadi rata kanan.

Rata kiri-kanan.

Teks diatur dengan atribut style menjadi rata kiri dan rata kanan.

Mengatur perataan teks ini, tidak hanya diterapkan pada elemen paragraf saja, tetapi kita juga bisa menerapkannya pada elemen body, heading, table, image dan lainya.


Berikut ini contoh mengatur heading berada di tengah.

<h2 style="text-align:center"> ini heading </h2>

hasilnya:

ini heading

Daftar Definisi.

Daftar definisi (Definition List) merupakan serangkaian atau kumpulan definisi dari kata atau istilah penting pada sebuah buku dan lainnya. Membuat daftar definisi dimaksudkan untuk memudahkan pembaca mencari pengertian dari kata atau istilah yang baru dikenalnya, juga untuk membuat penampilan menjadi menarik.

Berikut ini satu contoh penampilan definisi.

HTML

Merupakan singkatan dari HyperText Markup Language

Notepad

Adalah sebuah aplikasi untuk menulis dan mengedit teks.

Untuk membuat daftar definisi seperti pada pola teks diatas digunakan 3 (tiga) tag, yaitu tag <dl>, <dt> dan tag <dd>.

• 
  tag <dl> berguna untuk menandakan dimulainya pembuatan daftar definisi, dan tag </dl> sebagai akhir pembuatan daftar definisi.
• tag <dt> merupakan tempat untuk menyimpan teks/istilah yang akan diterangkan, dan teks ini akan berada pada posisi paragraf normal.
  
• 
  tag <dd> adalah tempat untuk menyimpan uraian definisi atau penjelasan. Karakter dari tag ini membuat teks menjorok ke dalam.
  
• 
  tag <dt> dan tag <dd> tidak menggunakan tag penutup.
  

Berikut ini cara menulis htmlnya.

<dl>

<dt> HTML

<dd> Merupakan singkataan dari HyperText Markup Language.

<dt> Notepad

<dd> Adalah sebuah aplikasi untuk menulis dan mengedit teks.
</dl>

Blockquote

Untuk membuat tulisan, dimana teks awal pada tiap baris masuk ke dalam, digunakan tag <blockquote>.

Berikut cara menulis htmlnya.

<blockquote>

Karakter dari tag blockquote
adalah membuat teks pada semua baris akan masuk ke dalam.

</blockquote>

Dan inilah hasilnya.

Karakter dari tag blockquote adalah membuat teks pada semua baris akan masuk ke dalam.

back to top