Alat yang dibutuhkan
Untuk menguraikan konsep keselarasan dalam HTML, kita perlu menyebutkan beberapa alat yang diperlukan untuk menjalankan kode HTML. Salah satunya adalah editor teks, dan yang kedua adalah browser. Editor teks mungkin notepad, sublime, notepad ++, atau lainnya yang mungkin membantu. Dalam panduan ini, kami telah menggunakan notepad, aplikasi default di windows, dan Google Chrome sebagai browser.
format HTML
Untuk memahami keselarasan, pertama-tama kita perlu memiliki beberapa pengetahuan tentang dasar-dasar HTML. Kami telah menyajikan tangkapan layar dari kode sampel.
< html >
< kepala >...</ kepala >
< tubuh >….</ tubuh >
</ html >
HTML memiliki dua bagian utama. Satu adalah kepala, dan yang lainnya adalah tubuh. Semua tag ditulis dalam tanda kurung siku. Bagian kepala berkaitan dengan penamaan halaman html dengan menggunakan tag judul. Dan juga, gunakan pernyataan gaya di dalam kepala. Di sisi lain, tubuh berurusan dengan semua tag teks, gambar atau video, dll. Dengan kata lain, apa pun yang ingin Anda tambahkan ke halaman html Anda ditulis di bagian tubuh html.
Satu hal yang perlu saya soroti di sini adalah tag pembuka dan penutup. Setiap tag yang ditulis harus ditutup. Misalnya, HTML memiliki tag awal dan tag akhir adalah . Jadi diamati bahwa tag penutup memiliki garis miring diikuti dengan nama tag. Demikian pula, semua tag lain juga mengikuti pendekatan yang sama. Setiap editor teks kemudian disimpan dengan ekstensi html. Sebagai contoh, kami telah menggunakan file dengan nama example.html. Kemudian Anda akan melihat bahwa ikon notepad telah berubah menjadi ikon browser.
Karena keselarasan adalah konten gaya. Gaya dalam html terdiri dari tiga jenis. Gaya in-line, gaya internal dan eksternal. Inline menyiratkan dalam tag. Internal ditulis di dalam kepala. Pada saat yang sama, gaya eksternal ditulis dalam file CSS terpisah.
Gaya teks sebaris
Contoh 1
Sekarang saatnya untuk membahas contoh di sini. Perhatikan gambar yang ditampilkan di atas. Dalam file notepad itu, kami telah menulis teks sederhana. Ketika kita menjalankannya sebagai browser, itu akan menampilkan output yang diberikan di bawah ini di browser.
Jika kita ingin teks ini ditampilkan di tengah, kita akan mengubah tagnya.
Tag ini adalah tag sebaris. Kami akan menulis tag ini ketika kami akan memperkenalkan tag paragraf di badan html. Setelah teks, lalu tutup tag paragraf. Simpan dan kemudian buka file di browser.
Paragraf disejajarkan di tengah, seperti yang ditampilkan di browser. Tag yang digunakan dalam contoh ini digunakan untuk perataan apa pun, yaitu untuk kiri, kanan, dan tengah. Tetapi jika Anda ingin menyelaraskan teks di tengah saja, maka tag tertentu digunakan untuk tujuan ini.
< Tengah > …… ..</ Tengah >Tag tengah digunakan sebelum dan sesudah teks. Ini juga akan menunjukkan hasil yang sama seperti contoh sebelumnya.
Contoh 2
Ini adalah contoh menyelaraskan judul alih-alih paragraf dalam teks html. Sintaks untuk penyelarasan heading ini adalah sama. Ini dapat dilakukan baik melalui tag atau dengan gaya sebaris atau menambahkan tag perataan di dalam tag heading.
Outputnya ditampilkan di browser. Tag heading telah mengubah teks biasa menjadi heading, dan tag telah menyelaraskannya di tengah.
Contoh 3
Sejajarkan teks di tengah
Perhatikan contoh di mana ada paragraf yang ditampilkan di browser. Kita perlu menyelaraskan ini di tengah.
Kami akan membuka file ini di notepad dan kemudian menyelaraskannya di posisi tengah dengan menggunakan tag.
< P gaya =teks-meluruskan: pusat ;>Setelah menambahkan tag ini di tag paragraf, silakan simpan file dan jalankan di browser. Anda akan melihat bahwa paragraf sekarang rata tengah. Lihat gambar di bawah ini.
Sejajarkan teks ke kanan
Untuk memiringkan teks ke kanan mirip dengan memposisikannya di tengah halaman. Hanya kata tengah yang diganti dengan tepat di tag paragraf.
< P gaya =teks-meluruskan: benar ;>………..</ P >Perubahan tersebut dapat dilihat melalui gambar terlampir di bawah ini.
Simpan dan segarkan halaman web di browser. Teks sekarang dipindahkan ke sisi kanan halaman.
Gaya internal teks
Contoh 1
Seperti dijelaskan di atas bahwa css internal (cascading style sheet) atau gaya internal adalah jenis css yang didefinisikan di bagian kepala html halaman. Cara kerjanya mirip dengan tag internal.
Perhatikan halaman yang ditunjukkan di atas; itu berisi judul dan paragraf di dalamnya. Kami memiliki persyaratan untuk melihat teks di tengah. Penjajaran sebaris memerlukan penulisan tag secara manual di dalam setiap paragraf. Tetapi gaya internal dapat diterapkan secara otomatis ke setiap paragraf teks dengan menyebutkan p dalam pernyataan gaya. Maka tidak perlu menulis tag apa pun di dalam tag paragraf. Sekarang amati kodenya, dan itu berfungsi.
< gaya >P{Teks-meluruskan: Tengah}
</ gaya >
Tag ini ditulis dalam tag gaya di bagian kepala. Sekarang jalankan kode di browser.
Saat Anda menjalankan halaman di browser, Anda akan melihat bahwa semua paragraf sejajar di tengah halaman. Tag ini diterapkan ke setiap paragraf yang ada dalam teks.
Contoh 2
Dalam contoh ini, seperti sebuah paragraf, kita akan menyelaraskan semua judul dalam teks ke sisi kanan. Untuk tujuan ini, kami akan menyebutkan judul dalam pernyataan gaya di dalam kepala.
H2, h3{
Teks-meluruskan: Baik
}
Sekarang setelah menyimpan file, jalankan file notepad di browser. Anda akan melihat bahwa judul sejajar di sisi kanan halaman HTML.
Contoh 3
Dalam gaya internal, mungkin ada situasi di mana Anda perlu menyelaraskan teks hanya beberapa paragraf dalam teks sementara yang lain tetap sama. Oleh karena itu, kami menggunakan konsep kelas. Kami memperkenalkan kelas dengan metode titik di dalam tag gaya. Penting untuk menambahkan nama kelas di dalam tag paragraf yang ingin Anda selaraskan.
< gaya >.Tengah{
Teks-meluruskan: Tengah}
</ gaya >
kelas =tengah>……</ P >
Kami telah menambahkan kelas dalam tiga paragraf pertama. Sekarang jalankan kodenya. Anda dapat melihat di output bahwa tiga paragraf pertama sejajar di tengah, sedangkan yang lain tidak.
Kesimpulan
Artikel ini menjelaskan bahwa penyelarasan dapat dilakukan dengan berbagai cara melalui tag inline dan internal.