Mengatur Posisi Paragraf Dengan HTML Dan CSS
Mengatur Posisi Paragraf Dengan HTML Dan CSS. Pada pembuatan paragraf dalam web dengan menggunakan HTML maka kita harus menggunakan kode tag <p> yang berfungsi untuk menandakan sebagai membuat baris paragraf baru. Selain menggunakan tag <p> kita juga dapat menggunakan kode tag <br> dan <div>, akan tetapi lebih lebih baik menggunakan tag <p> karena fungsinya yang sangat sesuai.
Berikut ini adalah cara mengatur posisi atau letak paragraf yang bisa kalian lakukan
<p>isi paragraf pertama kalian disini</p>
<p>paragraf kedua</p>
untuk mengatur letak atau posisi paragraf maka kita perlu menambahkan kode css, bisa dengan menggunakan metode inline, internal ataupun eksternal. Tapi kita akan menggunakan metode inline karena lebih mudah.
Membuat paragraf berada di sisi kiri
<p align="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Membuat paragraf berada di sisi kanan
<p align="right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Mengatur paragraf rata di tengah
<p align="center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Mengatur paragraf menjadi rata ke kanan dan kiri (seluruh tempat)
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Untuk menambahkan format paragraf bisa menjorok ke dalam atau ke luar maka kalian bisa menambahkan kode css berikut ini
Paragraf monjorok kedalam 100 piksel
<p style="text-align:left; text-indent:100px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Paragraf menjorok keluar 20 piksel
<p style="text-align:left; text-indent:-20px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Untuk melihat hasil output dari kode tag paragraf dengan kode css tersebut, kalian bisa melihat hasilnya di gambar berikut ini
Demikian tutorial singkat mengenai Mengatur Posisi Paragraf Dengan HTML Dan CSS
Baca juga :
Mengatur Heading Dan Format Text Web Menggunakan HTML
Tutorial Membuat Tabel Di Web Dengan HTML
Macam - Macam Tag HTML Beserta Fungsi Dan Contohnya
Berikut ini adalah cara mengatur posisi atau letak paragraf yang bisa kalian lakukan
<p>isi paragraf pertama kalian disini</p>
<p>paragraf kedua</p>
untuk mengatur letak atau posisi paragraf maka kita perlu menambahkan kode css, bisa dengan menggunakan metode inline, internal ataupun eksternal. Tapi kita akan menggunakan metode inline karena lebih mudah.
Membuat paragraf berada di sisi kiri
<p align="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Membuat paragraf berada di sisi kanan
<p align="right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Mengatur paragraf rata di tengah
<p align="center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Mengatur paragraf menjadi rata ke kanan dan kiri (seluruh tempat)
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Untuk menambahkan format paragraf bisa menjorok ke dalam atau ke luar maka kalian bisa menambahkan kode css berikut ini
Paragraf monjorok kedalam 100 piksel
<p style="text-align:left; text-indent:100px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Paragraf menjorok keluar 20 piksel
<p style="text-align:left; text-indent:-20px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
Untuk melihat hasil output dari kode tag paragraf dengan kode css tersebut, kalian bisa melihat hasilnya di gambar berikut ini
Baca juga : Belajar Cara Menggunakan Dasar Css Untuk Web Desain
Promo Menarik
Comments
Post a Comment