3. Tutorial HTML Membuat Paragraf Rata Tengah, Rata Kiri Dan Rata Kanan Menggunakan HTML - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Responsive Ads Here

Tuesday, May 3, 2016

3. Tutorial HTML Membuat Paragraf Rata Tengah, Rata Kiri Dan Rata Kanan Menggunakan HTML

Hay kembali dengan Om adji, om bewok nya lagi sibuk kerja jadi yang nulis sekarang ini om adji, nah kali ini kita sudah, mempelajari cara pembuatan paragraf dan format text pada HTML kali ini Om Adji akan membuat tutorial bagaimana caranya memformat paragraf menjadi rata kanan, rata kiri, dan rata tengah.Oh iya pembuatan ini di gunakan dengan 2 cara ada yang menggunakan html yang bisa di bilang lama dan menggunakan model css tapi masih  berada di HTML, maksud nya gmn sih ? oh adji sama deh bikin bingung terus. Biar ga bingung mari kita praktekan langsung,
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

No comments:

Post a Comment