Alat yang diperlukan
Untuk menghuraikan konsep penjajaran dalam HTML, kita perlu menyebut beberapa alat yang diperlukan untuk menjalankan kod HTML. Yang satu adalah penyunting teks, dan yang kedua adalah penyemak imbas. Penyunting teks mungkin notepad, luhur, notepad ++, atau yang lain yang mungkin membantu. Dalam panduan ini, kami telah menggunakan notepad, aplikasi lalai di windows, dan Google Chrome sebagai penyemak imbas.
Format HTML
Untuk memahami penjajarannya, kita perlu terlebih dahulu mengetahui asas-asas HTML. Kami telah menunjukkan tangkapan skrin contoh kod.
< html >
< kepala >...</ kepala >
< badan >….</ badan >
</ html >
HTML mempunyai dua bahagian utama. Yang satu adalah kepala, dan yang lain adalah badan. Semua teg ditulis dalam kurungan sudut. Bahagian kepala berkaitan dengan penamaan halaman html dengan menggunakan tanda tajuk. Dan juga, gunakan pernyataan gaya di dalam kepala. Sebaliknya, badan ini berurusan dengan semua tag teks, gambar atau video, dan lain-lain, dengan kata lain, apa sahaja yang anda mahu tambahkan ke halaman html anda ditulis di bahagian isi html.
Satu perkara yang perlu saya ketengahkan di sini ialah pembukaan dan penutupan teg. Setiap teg yang ditulis mesti ditutup. Sebagai contoh, Html mempunyai tag permulaan dan tanda akhir adalah. Oleh itu, diperhatikan bahawa tanda akhir mempunyai garis miring diikuti dengan nama tag. Begitu juga, semua tag lain juga mengikuti pendekatan yang sama. Setiap penyunting teks kemudian disimpan dengan peluasan html. Sebagai contoh, kami telah menggunakan fail dengan nama example.html. Kemudian anda akan melihat bahawa ikon notepad telah berubah menjadi ikon penyemak imbas.
Sebagai penjajaran adalah kandungan gaya. Gaya dalam html terdiri daripada tiga jenis. Gaya selaras, gaya dalaman dan luaran. Sebaris tersirat dalam teg. Dalaman ditulis di dalam kepala. Pada masa yang sama, gaya luaran ditulis dalam fail CSS yang berasingan.
Gaya teks sebaris
Contoh 1
Sekarang masanya untuk membincangkan contoh di sini. Pertimbangkan gambar yang dipaparkan di atas. Dalam fail notepad itu, kami telah menulis teks ringkas. Apabila kita menjalankannya sebagai penyemak imbas, ia akan menunjukkan output yang diberikan di bawah dalam penyemak imbas.
Sekiranya kami mahu teks ini dipaparkan di tengah, kami akan mengubah tag.
Teg ini adalah tag sebaris. Kami akan menulis tag ini apabila kami akan memperkenalkan tag ayat di badan html. Selepas teks, kemudian tutup tag perenggan. Simpan dan kemudian buka fail di penyemak imbas.
Perenggan tersebut sejajar di tengah, seperti yang ditunjukkan di penyemak imbas. Teg yang digunakan dalam contoh ini digunakan untuk penjajaran apa pun, iaitu untuk kiri, kanan, dan tengah. Tetapi jika anda ingin menyelaraskan teks di tengah sahaja, maka teg tertentu digunakan untuk tujuan ini.
< pusat > …… ..</ pusat >Tag tengah digunakan sebelum dan selepas teks. Ini juga akan menunjukkan hasil yang sama seperti contoh sebelumnya.
Contoh 2
Ini adalah contoh menyelaraskan tajuk dan bukannya perenggan dalam teks html. Sintaks untuk penjajaran tajuk ini adalah sama. Ini dapat dilakukan melalui tag atau dengan gaya sebaris atau menambahkan tag align di dalam tag tajuk.
Keluaran ditunjukkan dalam penyemak imbas. Tag tajuk telah mengubah teks biasa menjadi tajuk, dan tag tersebut telah menyelaraskannya di tengah.
Contoh 3
Sejajarkan teks di tengah
Pertimbangkan contoh di mana terdapat perenggan yang dipaparkan di penyemak imbas. Kita perlu menyelaraskannya di tengah.
Kami akan membuka fail ini di notepad dan kemudian menyelaraskannya di kedudukan tengah dengan menggunakan tag.
< hlm gaya =teks-sejajar: pusat;>Setelah menambahkan tag ini dalam tag perenggan, sila simpan fail dan jalankan di penyemak imbas. Anda akan melihat bahawa perenggan sekarang berpusat di tengah. Lihat gambar di bawah.
Sejajarkan teks ke kanan
Untuk menyandarkan teks ke kanan adalah serupa dengan meletakkannya di tengah halaman. Cuma kata tengah digantikan dengan tepat pada tag perenggan.
< hlm gaya =teks-sejajar: betul;> ……… ..</ hlm >Perubahannya dapat dilihat melalui gambar yang dilampirkan di bawah.
Simpan dan muat semula halaman web di penyemak imbas. Teks kini dipindahkan ke sebelah kanan halaman.
Gaya teks dalaman
Contoh1
Seperti yang dijelaskan di atas bahawa css dalaman (cascading style sheet) atau gaya dalaman adalah jenis css yang ditentukan di bahagian kepala html halaman. Ia berfungsi sama seperti tag dalaman.
Pertimbangkan halaman yang ditunjukkan di atas; ia mengandungi tajuk dan perenggan di dalamnya. Kami mempunyai syarat untuk melihat teks di tengah. Penjajaran sebaris memerlukan penulisan tag secara manual di dalam setiap perenggan. Tetapi gaya dalaman dapat diterapkan secara otomatis pada setiap perenggan teks dengan menyebutkan p dalam pernyataan gaya. Maka tidak perlu menulis tag apa pun di dalam tag perenggan. Sekarang perhatikan kodnya, dan ia berfungsi.
< gaya >P{Teks-sejajar: pusat}
</ gaya >
Teg ini ditulis dalam tanda gaya di bahagian kepala. Sekarang jalankan kod di penyemak imbas.
Apabila anda menjalankan halaman di penyemak imbas, anda akan melihat bahawa semua perenggan sejajar di tengah halaman. Tag ini digunakan untuk setiap perenggan yang terdapat dalam teks.
Contoh 2
Dalam contoh ini, seperti perenggan, kita akan menyelaraskan semua tajuk dalam teks ke sisi kanan. Untuk tujuan ini, kita akan menyebut tajuk dalam pernyataan gaya di dalam kepala.
H2, h3{
Teks-sejajar: betul
}
Sekarang setelah menyimpan fail, jalankan fail notepad di penyemak imbas. Anda akan melihat bahawa tajuk diselaraskan di sebelah kanan halaman HTML.
Contoh 3
Dalam gaya dalaman, mungkin ada situasi di mana anda perlu menyelaraskan teks hanya beberapa perenggan dalam teks sementara yang lain tetap sama. Oleh itu, kita menggunakan konsep kelas. Kami memperkenalkan kelas dengan kaedah titik di tag gaya. Anda perlu menambahkan nama kelas di dalam tag perenggan yang ingin anda sejajarkan.
< gaya >.pusat{
Teks-sejajar: pusat}
</ gaya >
kelas =pusat> ……</ hlm >
Kami telah menambah kelas dalam tiga perenggan pertama. Sekarang jalankan kodnya. Anda dapat melihat dalam output bahawa tiga perenggan pertama diselaraskan di tengah, sementara yang lain tidak.
Kesimpulannya
Artikel ini menjelaskan bahawa penjajaran dapat dilakukan dengan cara yang berbeza melalui tag sebaris dan dalaman.