Garis Horisontal
Diterbitkan: 2021-09-01Ada banyak cara untuk membuat halaman HTML Anda terlihat lebih menakjubkan dan terstruktur dengan baik. Lebih khusus lagi, garis horizontal dapat memainkan peran khusus dalam membuat konten situs Anda seimbang, lebih jelas, dan lebih mudah dijelajahi. Setiap kali kami memutuskan untuk membuat beberapa perubahan besar di situs web kami, hal-hal kecil seperti garis dapat membuat perbedaan. Hal-hal kecil seperti itu membuat pesan situs Anda lebih komprehensif. Selain itu, mereka dapat mengubah daya tarik visual sumber daya web Anda dan cara audiens Anda melihat data Anda.
Tetapi Anda juga dapat membuat garis yang disesuaikan agar sesuai dengan halaman web Anda dan untuk memberi Anda penguasaan yang lebih baik dari ruang yang Anda manipulasi di halaman Anda. Dengan itu, mari kita lihat lebih dekat bagaimana menyesuaikan garis horizontal dalam halaman HTML Anda.Garis horizontal adalah elemen HTML yang digunakan sebagai dekorasi halaman web Anda. Namun, itu juga dapat berguna untuk banyak tujuan lain, seperti:
- Pemisah yang secara visual membagi bagian berbeda dari konten Anda dan memberi penekanan di mana satu ide berakhir dan ide lainnya dimulai.
- Penyorot yang memberi penekanan pada beberapa bagian halaman web yang bermakna.
- Garis horizontal dianggap sebagai salah satu cara paling populer dan termudah untuk mencapai berbagai tujuan di situs web. Meskipun mungkin terlihat sederhana pada pandangan pertama, ini adalah elemen multi-fungsi yang dapat Anda sesuaikan berdasarkan kebutuhan spesifik Anda. Menggunakan modifikasi sederhana dari kode HTML halaman web Anda, Anda dapat menyesuaikan spesifikasi garis horizontal berikut:
Panjangnya;
Lebar;
Warna;
Penyelarasan.
Perlu juga ditunjukkan bahwa garis horizontal mengacu pada elemen blok. Ini berarti bahwa itu ditempatkan pada baris terpisah di halaman web, dan teks yang Anda tambahkan di sebelah baris akan diletakkan di bawahnya.
Garis horizontal sangat berguna untuk memisahkan halaman Anda menjadi beberapa bagian, untuk menambahkan garis horizontal sederhana cukup ketik <hr >, dan Anda akan mendapatkan ini:
Cara Membuat Garis Horizontal
Anda dapat mengatur garis menggunakan tag <hr > sederhana. Ini adalah kependekan dari "Aturan Horizontal" dan menetapkan parameter eksternal klasik. Hal yang membedakannya dari yang lain adalah tidak memerlukan tag akhir dan dapat berdiri sendiri. Anda dapat mengubah karakteristik eksternal elemen menggunakan nilai tambahan di tag:
Ini terlihat seperti ini. Misalnya, jika kita menginginkan panjang 100 piksel, kita akan menetapkan tag seperti ini: hr width = "100.
Penyelarasan.
Anda dapat menyelaraskan garis di tepi kiri atau kanan, dan juga di tengah. Fitur ini hanya valid jika Anda telah menentukan parameter lebar karena garis satu halaman penuh tidak dapat disejajarkan. Untuk perataan, atur atribut tambahan di tag "sejajarkan" dan tambahkan arah ke sana: tengah - untuk tengah, kiri - untuk kiri dan kanan - untuk perataan kanan. Tag yang sudah selesai, dalam hal ini, akan terlihat seperti ini: jika kita perlu mengatur perataan tengah untuk garis horizontal dengan panjang 150 piksel, maka tag yang sudah selesai akan terlihat seperti ini: hr align = "center" width = " 150". Perhatikan bahwa "align", ukuran untuk keselarasan, diletakkan di posisi 1, meskipun atributnya tergantung pada panjang ukuran lebar.Lebar.
Secara opsional, Anda juga dapat menentukan lebar, membuat garis bawah tebal atau tipis. Kriteria ini tidak bergantung pada apa pun dan dapat digunakan secara independen tanpa menentukan panjang atau keselarasan. Untuk itu, kami menggunakan atribut ukuran dalam tag dan nilai numerik yang sama dengan lebar yang diinginkan dalam piksel. Nomor ditunjukkan dalam tanda kutip setelah atribut size dan simbol "=".
Jadi, jika kita perlu membuat garis dengan lebar 15 piksel, kita perlu membuat tag berikut: hr size = "15".
Warna.
Ini juga ditetapkan sebagai indikator independen. Untuk mengubahnya, gunakan atribut warna yang dikombinasikan dengan nama warna dalam bentuk kode atau dalam bahasa Inggris. Warna ditunjukkan dalam tanda kutip setelah simbol "=".
Dengan demikian, tag untuk garis putih standar dapat ditulis dengan dua cara: hr color = "#FFFFFF" atau hr color = "white"
Hitam dapat dibuat menggunakan kode # 000000.
Bagaimana cara membuat garis horizontal berwarna?
Garis horizontal bagus untuk memisahkan satu blok teks dari yang lain. Teks kecil dengan garis horizontal di bagian atas dan bawah lebih menarik perhatian pembaca daripada teks biasa.
Dengan menggunakan tag <hr >, Anda dapat menggambar garis horizontal, yang tampilannya bergantung pada atribut yang digunakan, serta browser. Tag mengacu pada elemen blok, sehingga baris selalu dimulai pada baris baru, dan setelah itu, semua elemen ditampilkan pada baris berikutnya. Berkat banyaknya atribut tag <hr >, baris yang dibuat melalui tag ini mudah dimanipulasi. Dikombinasikan dengan kekuatan gaya, menambahkan baris ke dokumen Anda sangat mudah.
Secara default, garis ditampilkan dalam warna abu-abu dan dengan efek volume. Jenis garis ini tidak selalu sesuai dengan desain situs, sehingga keinginan pengembang untuk mengubah warna dan parameter garis lainnya melalui gaya dapat dimengerti. Namun, browser ambigu tentang masalah ini, itulah sebabnya Anda harus menggunakan beberapa properti gaya sekaligus. Secara khusus, versi Internet Explorer yang lebih lama menggunakan properti warna untuk warna garis, sementara browser lain menggunakan warna latar belakang. Tapi itu tidak semua, dalam hal ini, pastikan untuk menentukan ketebalan garis (properti ketinggian) selain nol dan hapus batas di sekitar garis dengan menyetel properti perbatasan ke none. Menyatukan semua properti untuk pemilih jam, kami mendapatkan solusi universal untuk browser populer.
< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> Warna garis horizontal < /title > < style > hr { border: none; / * Hapus perbatasan * / background-color: merah; / * Warna garis * / warna: merah; / * Warna garis untuk IE6-7 * / tinggi: 2px; / * Lebar garis * / } < /style > < /head > < body > < hr > < p > Text string < /p > < hr > < /body > < /html >Contoh:
Ini:
< hr color="#c7c34c" size="2" width="50%" >memberikan ini:
Warna: warna garis:
< hr color="#c7c34c" size="2" width="50%" >Ukuran: Tinggi Garis dinyatakan dalam piksel:
< ukuran jam="x" >Lebar: Lebar garis yang dinyatakan dalam persentase (%) atau dalam piksel (dalam contoh saya ini adalah 50% dari ukuran aslinya):
< jam lebar="x%"> atau < jam lebar="x" >Lebih maju:
Ini:
< hr width="400" color="#000000" size="4" >memberikan:
Dalam hal ini kami menggunakan gaya:
Lebar batas adalah 3 piksel (3 px)
Itu bertitik
Warna dasar hitam : #000000
Titik berwarna biru: #0099CC
Contoh terakhir untuk menjelaskan lebih lanjut, jika masih diperlukan ;):
Ini
< hr width="400" color="#FFFFFF" size="6" >memberikan:
Dalam hal ini tepat di atas:
Lebar batas adalah 2 piksel (2 px)
Itu putus-putus
Warna dasar putih : #FFFFFF
Garis-garis berwarna perak: #C0C0C0
Kemungkinan gaya adalah:
-burik
- putus asa
-padat
-dobel
-alur
-awal
-sisipan
-punggung bukit
Itu saja yang saya katakan tentang garis horizontal!