Text Alignment
Dalam pembuatan dokumen HTML,kita dapat menentukan letak dari teks atau gambar yang terdapat pada halaman web apakah kita ingin rata kiri. Rata
kanan, rata kiri – kanan atau rata tengah (berada di tengah – tegah layar).
Untuk melakukan hal ini, kita dapat mengisi atribut ALIGN dengan nilai – nilai berikut :
|
Nilai atribut ALIGN
|
Keterangan
|
|
Left
|
Menentukan teks rata kiri
|
|
Right
|
Menentukan teks rata kanan
|
|
Justify
|
Menentukan teks rata kiri -
kanan
|
|
Center
|
Menentukan teks agar berada di tengah – tengah layar
(secara horizontal)
|
Atribut ALIGN dapat disisipkan ke
dalam tag – tag yang akan diatur posisi teksnya. Sebagai contoh , ALIGN dapat
disisipkan ke dalam tag <h>, yang berarti kita akan mengatur posisi dari
suatu judul. Begitu juga jika ingin mengatur posisi teks dalam suatu paragraf
maka kita perlu menyisipkan atribut ALIGN
ke dalam tag <p>. berikut ini
adalah contoh kode yang akan menunjukkan cara mengatur posisi teks dalam
dokumen HTML.
- Bukalah text Editor kalian (Notepad, Notepad ++ atau lainnya)
- Disini saya menggunakan Notepad ++
- Ketikkan atau salinlah kode di bawah ini
<html>
<head>
<title>Text
Alignment </title>
</head>
<body>
<h3
align="center"> Contoh Text Alignment </h3>
<p>
Ini adalah contoh text yang secara default akan dianggap sebagai rata kiri.
Karena HTML akan menganggap nilai
atribut ALIGN yang tidak dituliskan
secara eksplisit dengan nilai LEFT. </p>
<p
align="right"> Ini adalah
contoh teks yang diatur agar rata kanan. Teks seperti ini jarang di gunakan
atau jarang di jumpai dalam dokumen - dokumen HTML. </p>
<p
align="justify"> Ini adalah teks yang diatur dengan format rata
kanan - kiri. Yaitu dengan memasukkan nilai justify pada atribut ALIGN. Teks
dengan format seperti ini sangat cocok sekali digunakan untuk dokumen HTML yang
sifatnya formal. </p>
<p
align="center">Ini adalah teks yang diatur dengan format CENTER.
Dengan meilih format ini, teks akan berada tepat di tengah - tengah layar
browser (Secara Horizontal). </p>
</body>
</html>
4. Lalu
simpalah dengan nama textalignment.html
5. Lalu
bukalah dengan aplikasi browser kalian
![]() | ||
| Setelah Selesai dengan benar, maka tampilannya akan sama seperti gambar diatas. |
Silahkan Gabung di Page Facebook kami Harbert Share

EmoticonEmoticon