Membuat sebuah website tentunya tidak terlepas dari konten yang akan ditampilkan. Untuk menampilkan konten biasanya kita dapat menggunakan teks maupun gambar atau dapat digabungkan keduanya untuk menghasilkan konten yang menarik. Dalam aplikasi berbasis Web yang digunakan untuk mengisi konten biasanya terdapat teks editor seperti pada blogspot contohnya yang menerapkan konsep WYSIWYG (What You See Is What You Get) yaitu suatu editor yang mampu menampilkan apa yang kita ketikan dalam editor akan sama dengan tampilan pada saat dipublikasi.
Kemampuan editor tersebut biasanya memilki standarisasi yang ditentukan oleh editor tersebut sebelumnya. Biasanya sebuah website memiliki standar ganda dalam menampilkan konten yang kadang bercampur dengan template/themes atau bahkan melakukan coding css secara manual dimana dimungkinkan terjadi bntrok style antara editor dan css yang dimodifikasi.
Namun demikian ada perlunya kita juga mengetahui kode dasar bagaimana menyusun alignment suatu tulisan menggunakan kode HTML. Kenapa? karena pada dasarnya output dari sebuah aplikasi web adalah dalam bentuk kode HTML dan CSS yang diterjemahkan oleh browser sehingga menghasilkan tampilan sesuai dengan apa yang dirancang.
Pada dasarnya pengaturan alignment sama pada umumnya yaitu rata kiri, rata kanan, rata tengah dan rata kiri-kanan atau yang sering dikenal dengan justify. Untuk menerapkannya pun cukup beragam dimana kita bisa menggunakannya secara langsung di dalam kode html atau menggunakan css untuk standarisasi. Ok, mari kita coba kode berikut:
Poin yang perlu dipahami adalah:
Rata kiri = left
Rata kanan = right
Rata Tengah = center
Rata Kiri-Kanan = Justify
Contoh tag <p></p>
Hasil untuk kode ini dapat dilihat pada screenshot dibawah:
Bagaimana cukup mudah bukan? tag <p></p> biasanya digunakan oleh editor teks berbasis html dan css untuk menstandarisasi pergantian paragraf, namun untuk optimasi biasanya kita bisa juga mengganti tag <p></p> dengan tag <div></div> atau kolom pada tabel yaitu tag <td></td>
Kemudian bagaimana dengan CSS? tentunya sama juga namun dengan css kita bisa membuatnya menjadi lebih simpel lagi dan dengan penamaan yang kita tentukan sendiri. berikut contohnya:
Nah kode diatas kita menggunakan tag <div></div> dimana hasilnya akan sama dengan screenshot diatas. Namun apa bedanya? tentu saja ada perbedaan dalam hal efisiensi yaitu dengan class pada CSS kita dapat mengatur sendiri secara khusus desain dari class tersebut dengan mudah. Misalnya untuk rata kiri kita beri warna biru, sedangkan rata tengah kita beri warna merah.
Dengan CSS kita cukup satu kali melakukan perubahan di kode css nya dan maka semua tag yang mangandung class tersebut akan berubah sesuai kondisi yang sudah kita tentukan :)
Menarik bukan, berikut kodenya selamat mencoba yha ^^
Hasilnya:
Kemampuan editor tersebut biasanya memilki standarisasi yang ditentukan oleh editor tersebut sebelumnya. Biasanya sebuah website memiliki standar ganda dalam menampilkan konten yang kadang bercampur dengan template/themes atau bahkan melakukan coding css secara manual dimana dimungkinkan terjadi bntrok style antara editor dan css yang dimodifikasi.
Namun demikian ada perlunya kita juga mengetahui kode dasar bagaimana menyusun alignment suatu tulisan menggunakan kode HTML. Kenapa? karena pada dasarnya output dari sebuah aplikasi web adalah dalam bentuk kode HTML dan CSS yang diterjemahkan oleh browser sehingga menghasilkan tampilan sesuai dengan apa yang dirancang.
Pada dasarnya pengaturan alignment sama pada umumnya yaitu rata kiri, rata kanan, rata tengah dan rata kiri-kanan atau yang sering dikenal dengan justify. Untuk menerapkannya pun cukup beragam dimana kita bisa menggunakannya secara langsung di dalam kode html atau menggunakan css untuk standarisasi. Ok, mari kita coba kode berikut:
Poin yang perlu dipahami adalah:
Rata kiri = left
Rata kanan = right
Rata Tengah = center
Rata Kiri-Kanan = Justify
Contoh tag <p></p>
<p align="left"> <b>Contoh artikel dengan rata kiri</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <p align="right"> <b>Contoh artikel dengan rata kanan</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <p align="center"> <b>Contoh artikel dengan rata tengah</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <p align="justify"> <b>Contoh artikel dengan rata kiri-kanan</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
Hasil untuk kode ini dapat dilihat pada screenshot dibawah:
Bagaimana cukup mudah bukan? tag <p></p> biasanya digunakan oleh editor teks berbasis html dan css untuk menstandarisasi pergantian paragraf, namun untuk optimasi biasanya kita bisa juga mengganti tag <p></p> dengan tag <div></div> atau kolom pada tabel yaitu tag <td></td>
Kemudian bagaimana dengan CSS? tentunya sama juga namun dengan css kita bisa membuatnya menjadi lebih simpel lagi dan dengan penamaan yang kita tentukan sendiri. berikut contohnya:
<style type="text/css">
.ratakiri { text-align: left; }
.ratakanan { text-align: right; }
.ratatengah { text-align: center; }
.ratakirikanan { text-align: justify; }
</style>
<div class="ratakiri">
<b>Contoh artikel dengan rata kiri</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakanan">
<b>Contoh artikel dengan rata kanan</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratatengah">
<b>Contoh artikel dengan rata tengah</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakirikanan">
<b>Contoh artikel dengan rata kiri-kanan</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
Nah kode diatas kita menggunakan tag <div></div> dimana hasilnya akan sama dengan screenshot diatas. Namun apa bedanya? tentu saja ada perbedaan dalam hal efisiensi yaitu dengan class pada CSS kita dapat mengatur sendiri secara khusus desain dari class tersebut dengan mudah. Misalnya untuk rata kiri kita beri warna biru, sedangkan rata tengah kita beri warna merah.
Dengan CSS kita cukup satu kali melakukan perubahan di kode css nya dan maka semua tag yang mangandung class tersebut akan berubah sesuai kondisi yang sudah kita tentukan :)
Menarik bukan, berikut kodenya selamat mencoba yha ^^
<style type="text/css">
.ratakiri { text-align: left; color: blue; }
.ratakanan { text-align: right; }
.ratatengah { text-align: center; color: red; }
.ratakirikanan { text-align: justify; }
</style>
<div class="ratakiri">
<b>Contoh artikel dengan rata kiri</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakanan">
<b>Contoh artikel dengan rata kanan</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratatengah">
<b>Contoh artikel dengan rata tengah</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakirikanan">
<b>Contoh artikel dengan rata kiri-kanan</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakiri">
<b>Contoh artikel dengan rata kiri</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakiri">
<b>Contoh artikel dengan rata kiri</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
Hasilnya:
1 Comment for "Membuat Teks Rata Kiri, Tengah, Kanan Dan Justify Dengan HTML Dan CSS"
✅ Ngisi data = bukan berarti harus beli. Bunda boleh tanya-tanya dulu kok..
😇 Habis ngisi data berikut ini, Bunda akan dihubungi admin kami via WhatsApp