Ok langsung saja, pemformatan rata kanan, kiri, dan tengah dapat dilakukan dengan menambahkan atribut align pada tag<p></p>
Kita langsung ke coding saja untuk cara penulisannya :
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat format paragraf</title>
</head>
<body>
<h3>Paragraf ini akan rata kiri</h3>
<p align="left">Paragraf ini diatur supaya rata kiri, jadi semua tulisan pada paragraf ini akan menjadi rata kiri dengan penggunaan atribut align left sekarang anda bisa membuat paragraf dan mengatur tampilan tulisannya menjadi rata kiri. Lorem ipsum dolor sit amet, consectetur adipisicing 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 commodconsequat. Duis aute irure dolor in reprehenderit in voluptate velit ess cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></br>
<h3>Paragraf ini akan rata tengah</h3>
<p align="center">Paragraf ini diatur supaya rata tengah, jadi semua tulisan pada paragraf ini akan menjadi rata tengah dengan penggunaan atribut align center sekarang anda bisa membuat paragraf dan mengatur tampilan tulisannya menjadi rata tengah. Lorem ipsum dolor sit amet, consectetur adipisicing 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 commod consequat. Duis aute irure dolor in reprehenderit in voluptate velit e cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat noproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Paragraf ini akan rata kanan</h3>
<p align="right">Paragraf ini diatur supaya rata kanan, jadi semua tulisan pada paragraf ini akan menjadi rata kanan dengan penggunaan atribut align right sekarang anda bisa membuat paragraf dan mengatur tampilan tulisannya menjadi rata kanan. Lorem ipsum dolor sit amet, consectetur adipisicing 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 commod consequat. Duis aute irure dolor in reprehenderit in voluptate velit e cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Paragraf ini akan rata kanan-kiri</h3>
<p align="justify">Paragraf ini diatur supaya rata kanan-kiri, jadi semua tulisan pada paragraf ini akan menjadi rata kanan dengan penggunaan atribut align justify sekarang anda bisa membuat paragraf dan mengatur tampilan tulisannya menjadi rata kanan-kiri. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Hasil nya akan seperti ini
DEMO
Dengan menggunakan cara diatas kita sudah bisa mengatur paragraf menjadi rata kanan, rata kiri, dan rata tengah. namun sebenarnya cara diatas sudah dianggap usang atau tidak disarankan dalam HTML5 meskipun masih bisa diterima oleh browser manapun.
pada HTML5 semua pengaturan format text diarahkan untuk ditulis pada CSS(Cascading Style Sheet). untuk pembahasan CSS kita bahas lain kali saja. lain kali gmn ? ini kok di jelasin, maksudnya adalah CSS yang ditulis secara terpisah dari script HTML. Untuk sekarang kita gunakan yang penulisanya berada di dalam scrip HTML saja dulu :))
Berikut cara pemformatan paragraf menggunakan CSS melalui HTML.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat format paragraf</title>
</head>
<body>
<h3>Paragraf ini akan rata kiri</h3>
<p style=text-align:"left">Paragraf ini diatur supaya rata kiri, jadi semua tulisan pada paragraf ini akan menjadi rata kiri dengan penggunaan atribut align left sekarang anda bisa membuat paragraf dan mengatur tampilan tulisannya menjadi rata kiri. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></br>
<h3>Paragraf ini akan rata tengah</h3>
<p style="text-align: center;">Paragraf ini diatur supaya rata tengah, jadi semua tulisan pada paragraf ini akan menjadi rata tengah dengan penggunaan atribut align center sekarang anda bisa membuat paragraf dan mengatur tampilan tulisannya menjadi rata tengah Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Paragraf ini akan rata kanan</h3>
<p style="text-align: right;">Paragraf ini diatur supaya rata kanan, jadi semua tulisan pada paragraf ini akan menjadi rata kanan dengan penggunaan atribut align right sekarang anda bisa membuat paragraf dan mengatur tampilan tulisannya menjadi rata kanan Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Paragraf ini akan rata kanan-kiri</h3>
<p style="text-align: justify;">Paragraf ini diatur supaya rata kanan-kiri, jadi semua tulisan pada paragraf ini akan menjadi rata kanan dengan penggunaan atribut align justify sekarang anda bisa membuat paragraf dan mengatur tampilan tulisannya menjadi rata kanan-kiri Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Maka Hasil nya akan seperti ini
Sekian turorial kali ini, kita bertemu lagi pada tutorial lainnya
nb :
Text Editor : Sublime Text
Text Editor Online : JSfiddle.net
Kalau untuk sekaligus semua bukan per paragraf begitu bagaimana ka?
ReplyDeleteScript always helpfull for web programming
ReplyDeleteTerima kasih sudah berbagi, bermanfaat sekali mas, semoga sukses selalu
ReplyDelete