Mengatur posisi teks pada website tentu sangat penting. Jika teks pada website Anda tidak rapi, tentunya orang atau pengunjung website Anda akan malas untuk membaca isi website tersebut atau bahkan tidak akan pernah mengunjunginya lagi karena posisi teks pada website Anda yang berantakan. Oleh karena itu, posisi teks sangat berpengaruh dalam sebuah website
Cara Menyesuaikan Posisi Teks di HTML
Untuk mengatur posisi teks pada HTML sebenarnya tidak sulit. Karena HTML sudah menyediakan properti pada CSS yang bisa anda gunakan dengan sangat mudah. Langsung saja silahkan baca penjelasan berikut ini
Daftar isi
1. Perataan Teks
Dalam mengatur posisi teks pada HTML, umumnya ada 4 macam, yaitu rata kiri, rata kanan, rata tengah, dan rata kiri kanan. Untuk membuat posisi teks seperti itu, Anda memerlukan CSS dan properti yang mendukungnya disebut perataan teks. Nanti di script CSS Anda akan menggunakan properti. Langsung saja, inilah contoh penggunaan text-align di CSS
<style type="text/css"> .left { text-align: left;} .right { text-align: right;} .center { text-align: center;} .justify { text-align: justify;} </style>Penjelasan dari script di atas adalah
- kiri {text-align. left} adalah kelas yang digunakan untuk membuat perataan kiri pada teks yang dipilih
- kanan { perataan teks. right;} adalah kelas yang digunakan untuk membuat perataan kanan pada teks yang dipilih
- pusat { perataan teks. center;} adalah kelas yang digunakan untuk membuat rata tengah pada teks yang dipilih
- membenarkan { perataan teks. justify;} adalah kelas yang digunakan untuk membuat perataan kiri dan kanan pada teks yang dipilih
Gunanya adalah untuk mengatur posisi teks baik rata kiri, kanan, tengah, maupun kiri dan kanan, Anda hanya perlu menambahkan properti text-align diikuti dengan posisi yang diinginkan dalam pengucapan bahasa Inggris. Mudah bukan?
Kemudian, selanjutnya script untuk bagian body tag
<body> <h2>Belajar Rata Teks CSS: text-align</h2> <h3>Text Align: Left</h3> <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p> <h3>Text Align: Right</h3> <p class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p> <h3>Text Align: Center</h3> <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p> <h3>Text Align: Justify</h3> <p class="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p> </body>_Nah, pada bagian body ini Anda tinggal memanggil class yang sesuai dengan keinginan. Misalnya pada contoh di atas, Anda ingin membuat paragraf pertama menjadi rata kiri, maka silahkan Anda tambahkan class=”left” pada tag
. Begitu pula yang lainnya.
Gambar dibawah ini adalah contoh hasil tampilan dari script diatas. Selamat mencoba
2. Arah Teks
Arah teks berbeda dengan perataan teks sebelumnya. Properti CSS yang satu ini dapat mengatur arah teks, dan kolom pada tabel. Arah teks ini bisa digunakan jika ingin menulis dari kanan ke kiri seperti bahasa arab atau ibrani, atau bahasa yang penulisannya dari kiri ke kanan seperti bahasa inggris dan bahasa lainnya
Untuk menulis dari kanan ke kiri maka nilai yang dibuat adalah rtl (kanan ke kiri), sedangkan untuk menulis dari kiri ke kanan nilainya adalah ltr (kiri ke kanan). Langsung saja, berikut adalah contoh scriptnya
<!DOCTYPE html> <html> <head> <style> p{ direction: rtl; unicode-bidi: bidi-override; } </style> </head> <body> <h3>This is the default text direction.</h3> <p>This is right-to-left text direction.</p> <p> طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد</p> </body> </html>Untuk membuat text direction ada 2 property yang harus anda gunakan yaitu
- arah. rtl (disesuaikan dengan nilai yang diinginkan)
- unicode-bidi. bidi-override
Gambar dibawah ini adalah contoh hasil tampilan dari script diatas. Selamat mencoba
Sekian artikel kali ini yang membahas tentang cara mengatur posisi teks pada HTML. Anda dapat menggunakan beberapa properti di atas sesuai dengan kebutuhan Anda. Semoga artikel ini dapat membantu dan bermanfaat bagi Anda. Terima kasih 🙂
Download berbagai jenis aplikasi terbaru mulai dari windows, aplikasi android, driver dan sistem operasi gratis hanya di Nesabamedia. com
Unduh perangkat lunak Windows
Unduh Aplikasi Android
Unduh Driver Printer
Unduh Sistem Operasi
Zuhroh Nilakandi
Penikmat hujan dan penikmat kopi yang suka duduk lamunan melamun mimpi - mimpi yang akan jadi kenyataan