Perataan Teks ~ Pemrograman dan Teknologi

Untuk membuat teks berada di tengah, di kanan atau di kiri; kita bisa menggunakan properti CSS yaitu text-align. Nilai yang bisa digunakan pada properti text-align adalah "left", center, right dan justify.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <H2>Paragraf</H2>
    <p style="text-align:left">
        Ini adalah paragraf pertama. Teks pada paragraf ini menggunakan style CSS. properti CSS yang digunakan adalah text-align dg nilai "left". Kalian bisa memanjangkan teks-nya jika perbedaannya belum terlihat.
    </p>
    <p style="text-align:Justify; text-justify:distribute">
        Ini adalah paragraf kedua. Teks pada paragraf ini menggunakan style CSS. Properti CSS yang digunakan adalah text-align dg nilai "justify". Kalian bisa memanjangkan teks-nya jika perbedaannya belum terlihat.
    </p>
    <p style="text-align:Left">
        Rata kiri.
    </p>
    <p style="text-align:Center">
        Rata tengah.
    </p>
    <p style="text-align:Right">
        Rata Kanan.
    </p>
</BODY>
</HTML>

Nilai "justify" pada text-align relatif sama dengan "left" jika paragraf hanya satu baris. Jika perbedaan belum terlihat, coba panjangkan teks dari satu paragraf yang diberi properti text-align dengan nilai justify.

Saat menggunakan text-align dengan nilai "justify", ada satu properti yang bisa digunakan yaitu text-justify. Properti tersebut baru berpengaruh kalau paragrafnya ada di beberapa baris. Nilai-nilai dari properti text-justify yaitu :

auto
initial
inherit
inter-word
inter-ideograph
inter-cluster
distribute
kashida
trim

Perbedaan dari masing-masing nilai properti tersebut bisa kalian lihat sendiri dengan mencobanya.

Pada contoh di atas, saya hanya menggunakan file HTML dengan CSS internal. Sebaiknya, pisahkan html dan CSS-nya jadi 2 file supaya kalian terbiasa menggunakan CSS eksternal.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <Link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
    <H2>Paragraf</H2>
    <p id="paragraf1">
        Ini adalah paragraf pertama. Teks pada paragraf ini menggunakan style CSS. properti CSS yang digunakan adalah text-align dg nilai "left". Kalian bisa memanjangkan teks-nya jika perbedaannya belum terlihat.
    </p>
    <p class="paragraf2">
        Ini adalah paragraf kedua. Teks pada paragraf ini menggunakan style CSS. Properti CSS yang digunakan adalah text-align dg nilai "justify". Kalian bisa memanjangkan teks-nya jika perbedaannya belum terlihat.
    </p>
    <p class="rata_kiri">
        Rata kiri.
    </p>
    <p class="rata_tengah">
        Rata tengah.
    </p>
    <p class="rata_kanan">
        Rata Kanan.
    </p>
</BODY>
</HTML>

File CSS-nya (cssku.css) :

.paragraf1{
    text-align:left;
}
.paragraf2{
    text-align:Justify; text-justify:distribute;
}

.rata_kiri{
    text-align:left;
}

.rata_tengah{
    text-align:center;
}

.rata_kanan{
    text-align:right;
}

Hasilnya sama saja dengan kode HTML sebelumnya. Keuntungannya, kalian bisa menggunakan file CSS yg sama untuk beberapa file HTML.

Kalau kalian malas ngetik atau hasilnya tidak sesuai, download file-nya di sini.