Dalam Tutorial Teks CSS kali ini, kita akan mempelajari Cara Mengatur Rata Teks HTML dengan CSS. Properti CSS yang akan kita bahas adalah: text-align. Show
Mengatur Rata Teks dengan Property: text-alignUntuk mengatur rata text HTML dengan CSS, kita menggunakan property text-align. Property text-align memiliki 4 nilai yang bisa dipilih, yakni: left, right, center, atau justify. Sesuai dengan namanya, kita menggunakan text-align: left dan text-align: right untuk membuat rata teks kiri dan rata teks kanan. Untuk membuat text berada di tengah, kita mengunakan: text-align: center. Perintah text-align: justify digunakan untuk membuat text rata kiri dan kanan. Namun efek justify ini perlu menjadi catatan. Membuat text rata kiri dan kanan sekaligus akan membuat web browser menambah jarak (spasi) antar kata, terutama untuk kata yang panjang. Hal ini bisa membuat tulisan akan susah dibaca, terutama jika diakses dari smartphone yang memiliki layar kecil. Efek justify lebih cocok jika digunakan untuk media cetak seperti buku atau majalah. Tutorial Cara Mengatur Rata Teks dengan CSSDalam tutorial kali ini saya akan membuat teks HTML sederhana, yang terdiri dari 4 paragraf menggunakan tag <p>. Masing-masing paragraf ini memiliki kode CSS text-align yang ‘ditempelkan’ menggunakan class selector. Berikut adalah contoh penggunaan property text-align: <!DOCTYPE html>
<html>
<head>
<title>Belajar Rata Teks CSS</title>
<style type="text/css">
.left { text-align: left;}
.right { text-align: right;}
.center { text-align: center;}
.justify { text-align: justify;}
</style>
</head>
<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>
</html> Dalam tutorial belajar CSS kali ini kita telah membahas Cara Mengatur Rata Teks HTML dengan CSS. Penggunaan fitur text-align ini bisa menjadi salah satu fitur untuk mempercantik hasil desain web. eBook CSS Uncover Duniailkom Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom. Mengatur posisi text di website tentu sangatlah penting. Jika text di website Anda tidak rapih tentunya orang-orang atau pengunjung website Anda malas untuk membaca isi website atau bahkan mereka tidak akan pernah mengunjunginya lagi karena posisi text di website yang Anda miliki berantakan. Maka dari itu, posisi text sangat berpengaruh dalam sebuah website. Cara Mengatur Posisi Text Pada HTMLUntuk mengatur posisi text di HTML sebenarnya tidaklah sulit. Karena HTML sudah menyediakan properti-properti pada CSS yang bisa Anda gunakan dengan sangat mudah. Langsung saja, silahkan simak penjelasannya berikut ini. Daftar Isi 1. Text AlignmentDalam mengatur posisi text di HTML umumnya terdapat 4 jenis, yaitu rata kiri, rata kanan, rata tengah, dan rata kiri kanan. Untuk membuat posisi text seperti itu, Anda membutuhkan CSS dan sebuah property yang mendukungnya yang dinamakan text-align. Nantinya dalam script CSS Anda akan menggunakan property tersebut. Langsung saja, berikut ini contoh penggunaan text-align pada CSS. Adapun penjelasan dari script di atas adalah:
Intinya dalam mengatur posisi teks baik rata kiri, kanan, tengah, atau kiri dan kanan Anda hanya perlu menambahkan property text-align diikuti dengan posisi yang diinginkan dalam penyebutan bahasa inggris. Mudah kan? Lalu, berikutnya adalah script untuk bagian tag body nya. 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 <p>. Begitu pula yang lainnya. Gambar di bawah ini adalah contoh hasil tampilan dari script di atas. Selamat mencoba! 2. Text DirectionText direction berbeda dengan text alignment sebelumnya. Property CSS yang satu ini dapat mengatur arah teks, dan kolom pada tabel. Text direction ini dapat digunakan jika Anda ingin menulis dari kanan ke kiri seperti Arab atau Ibrani, atau bahasa yang ditulis dari kiri ke kanan seperti bahasa inggris dan bahasa lainnya. Untuk menulis dari kanan ke kiri maka value yang dibuat adalah rtl (right to left), sedangkan untuk menulis dari kiri ke kanan value nya adalah ltr (left to right). Langsung saja, berikut ini contoh script-nya. Untuk membuat text direction ada 2 property yang harus Anda gunakan, yaitu:
Gambar di bawah ini adalah contoh hasil tampilan dari script di atas. Selamat mencoba! Sekian artikel kali ini yang membahas tentang bagaimana caranya mengatur posisi text di HTML. Anda bisa menggunakan beberapa property di atas sesuai dengan kebutuhan Anda. Semoga artikel ini dapat membantu dan bermanfaat bagi Anda. Terimakasih 🙂 Download berbagai jenis aplikasi terbaru, mulai dari aplikasi windows, android, driver dan sistem operasi secara gratis hanya di Nesabamedia.com: Download Software Windows Download Aplikasi Android Download Driver Printer Download Sistem Operasi Zuhroh Nilakandi Si pecinta hujan dan penikmat kopi yang suka duduk dalam lamunan sambil menghayal mimpi – mimpinya yang akan menjadi kenyataan. Bagaimana cara membuat paragraf pada HTML?Paragraf pada HTML dibuat dengan tag <p> .
Bagaimana cara mengatur rata teks HTML dengan CSS?Pengaturan perataan teks pada CSS dapat menggunakan properti text-align. Nilai pada properti ini akan membuat teks disusun sesuai dengan nilai perataannya. text-align: left | right | center | justify | inherit; Properti dengan nilai left artinya teks akan diatur dengan rata kiri.
Apa itu center di HTML?Elemen HTML center merupakan tipe block level element, yang mana elemen tipe ini akan membagi halaman HTML menjadi bagian yang terpisah, atau menjadi blok.
Apa itu text align pada HTML?Atribut HTML align merupakan atribut yang digunakan untuk menata perataan teks. Atribut align biasanya digunakan pada HTML element pada tingkatan blok seperti DIV, P (paragraf), header dan lainnya.
|
Langkah untuk membuat teks paragraf menjadi rata tengah adalah html?
Pos Terkait
Copyright © 2024 apacode Inc.
