Cara membuat paragraf datar tengah di html

Question

Pada postingan sebelumnya kita telah membahas struktur dasar HTML. Kali ini kita akan membahas cara membuat paragraf di HTML. Apa langkah-langkahnya?

Table of Contents Show

Cara membuat paragraf di HTML
Pusatkan Semua Contoh Teks
Perataan Tengah Contoh Teks Tertentu
Ratakan Pusat Div Di Halaman Web
Contoh Koordinasi Pusat Div
Bagaimana Margin Properti Bekerja?
Yang Dapat Anda Lakukan Sekarang
Bagaimana cara membuat paragraf dalam HTML?
Apa itu pusat dalam HTML?
Bagaimana cara menyelaraskan teks HTML dengan CSS?
Tag apa yang membuat teks berada di tengah?

Isi

Cara membuat paragraf di HTML

Untuk membuat paragraf di HTML, kita gunakan tag

. Kita langsung praktikkan aja yuk.

Pertama, buka editor teks, jika saya menggunakan Notepad++. Buat file baru dan ketik kode HTML seperti berikut

<!DOCTYPE html>
  <head>
    <title>Membuat Paragraf di HTML</title>
  </head>
  <body>
     <p>Ini adalah paragraf pertama. Ini adalah paragraf pertama. </p>
     <p>Ini adalah paragraf kedua. Ini adalah paragraf kedua.</p>
  </body>
</html>

Kemudian simpan file tersebut dengan nama paragraf. html. kemudian jalankan file tersebut dengan web browser

Seperti yang Anda lihat dari output di atas, semua teks disejajarkan ke kiri. Ada beberapa metode yang dapat Anda gunakan untuk memusatkan teks di atas, tetapi pertama-tama Anda harus mengidentifikasi teks mana yang ingin Anda pusatkan

Jika tujuannya adalah memusatkan semua teks pada halaman web Anda, maka kode berikut akan menyelesaikannya

Pusatkan Semua Contoh Teks


      .container{
           text-align: center;
       }

Kode CSS di atas menggunakan properti kelas untuk menargetkan semua teks di halaman web, dan ini hanya mungkin karena ada tag

induk dengan kelas penampung yang menyertakan semua teks di halaman web. Kode akan menghasilkan output berikut di browser Anda.

Seperti yang Anda lihat, semua teks di halaman web kini berada di tengah. Satu-satunya masalah adalah paragraf akan terlihat lebih baik dan lebih mudah dibaca jika disejajarkan ke kiri. Jika Anda hanya ingin memusatkan beberapa teks pada halaman web, Anda dapat menggunakan elemen HTML sebagai pemilih, bukan class dan id

Perataan Tengah Contoh Teks Tertentu


   h1, h3{
           text-align: center;
       }

_

Kode di atas hanya menargetkan elemen h1 dan h3 di halaman web, dan akan menghasilkan output berikut di browser Anda

Ratakan Pusat Div Di Halaman Web

Tren lain yang mungkin Anda perhatikan di antara situs web modern adalah teks tidak mencapai tepi. Ini adalah salah satu contoh ketika div induk digunakan. Meskipun tidak ada properti align div di CSS, properti margin dapat digunakan untuk menyelaraskan div induk dan kontennya

Contoh Koordinasi Pusat Div


  .container{
           max-width: 920px;
           margin: auto;
       }

Kode di atas melakukan beberapa hal. Pertama, ini mengatur lebar untuk semua konten di halaman web, menggunakan kelas div induk. Anda harus selalu menggunakan properti max-width alih-alih properti width saat menempatkan konten situs web ke dalam wadah, karena ini memfasilitasi daya tanggap dengan menentukan lebar maksimum alih-alih lebar tetap

Kode di atas juga menggunakan properti margin untuk menempatkan div induk di tengah halaman web, menghasilkan output berikut di browser

Seperti yang Anda lihat dari gambar di atas, lebar teks telah dikurangi menjadi 920px, dan wadah tak terlihat yang menutupi teks kini berada di tengah halaman web berkat properti margin

Bagaimana Margin Properti Bekerja?

Properti margin dapat diberikan kombinasi dari tiga nilai yang berbeda. Saat empat nilai ditetapkan ke properti CSS, setiap nilai akan menargetkan salah satu dari empat sisi elemen HTML

Saat dua nilai disetel ke properti margin, nilai pertama akan menargetkan sisi atas dan bawah elemen HTML dan nilai kedua akan menargetkan sisi kiri dan kanan elemen HTML

Pada contoh di atas, properti margin hanya diberi satu nilai yang berarti menargetkan sisi kiri dan kanan elemen HTML (yang dalam hal ini adalah tag

induk ).

Properti margin biasanya diberi nilai dalam piksel atau, seperti contoh di atas, nilai otomatis. Nilai otomatis memastikan bahwa margin yang digunakan di kedua sisi elemen HTML adalah sama. Ini secara efektif menempatkan elemen div induk (dan dengan ekstensi teks) di tengah halaman web, memberi Anda tata letak yang mencerminkan halaman web modern

Yang Dapat Anda Lakukan Sekarang

Artikel tutorial ini mengajarkan Anda beberapa hal

Cara menggunakan properti perataan teks untuk memusatkan teks pada halaman web
Cara menyelaraskan tengah kelompok teks yang berbeda yang diapit oleh tag
atau elemen HTML lainnya.
Cara memusatkan sekelompok teks menggunakan properti margin pada div induk

Namun, ini hanyalah puncak gunung es jika menyangkut alat CSS yang dapat digunakan untuk mengatur tata letak situs web Anda. Salah satu properti CSS paling populer yang dapat digunakan untuk secara khusus memetakan tata letak struktural halaman web Anda (termasuk teks perataan tengah) adalah CSS Grid

CSS Grid menyediakan struktur tata letak dua dimensi (baris dan kolom) untuk halaman web Anda, dengan kerangka kerja yang mudah dipelajari dan digunakan

Bagaimana cara membuat paragraf dalam HTML?

Paragraf dalam HTML dibuat dengan tag .

Apa itu pusat dalam HTML?

Elemen tengah HTML adalah jenis elemen tingkat blok, dimana elemen jenis ini akan membagi halaman HTML menjadi beberapa bagian terpisah, atau menjadi blok .

Bagaimana cara menyelaraskan teks HTML dengan CSS?

Pengaturan perataan teks di CSS dapat menggunakan properti perataan teks . Nilai pada properti ini akan membuat teks diratakan sesuai dengan nilai perataannya. perataan teks. kiri. Baik. tengah. membenarkan. mewarisi; .