Bagaimana cara menambahkan garis horizontal di html. Garis horizontal dan vertikal dalam HTML

Untuk menekankan beberapa elemen situs yang sangat penting, tidak ada salahnya menggunakan semua jenis gaya dan properti CSS yang disediakan untuk ini. Tentu saja, Anda tidak perlu repot dengan teks dan menyorotnya, misalnya dalam huruf tebal atau miring, mengubah latar belakang atau membuat bingkai di sekitar teks. Tetapi tidak selalu salah satu metode yang disajikan cocok. Katakanlah Anda memiliki teks yang perlu dipisahkan karena spesifikasi beban semantiknya. Di sinilah properti HTML dan CSS masuk.

Cara membuat garis dalam teks menggunakan CSS

Untuk mengimplementasikan rencana kita, kita perlu mengacu pada file style.css dengan menulis properti yang sesuai di dalamnya berbatasan... Ini akan membuat garis di atas, di bawah, atau di sisi teks tertentu. Pada gilirannya, ada beberapa properti yang bertanggung jawab untuk menampilkan garis, yaitu:

- perbatasan-atas- garis horizontal di atas teks;

- batas-kanan- garis vertikal yang terletak di sebelah kanan teks;

- batas-bawah- garis horizontal di bawah teks;

- perbatasan-kiri- garis vertikal ke kiri.

Cara membuat garis di html

Menggunakan properti CSS, Anda dapat menulis semua nilai yang diperlukan dengan mengedit kode HTML. Untuk melakukan ini, Anda harus pergi ke bagian administrasi situs. Pilih salah satu materi yang diterbitkan, alihkan editor teks ke mode pengeditan kode HTML dan tambahkan properti CSS. Contoh dapat dilihat di bawah ini.



Bagaimana cara membuat garis putus-putus atau lurus?



Dengan menentukan sifat-sifat ini, Anda akan dapat menekankan pentingnya materi, paragraf, atau judul yang disajikan?


Penjelasan singkat tentang perintah

- lebar- panjang garis;

- padat- garis utuh;

- burik- garis putus-putus.

Untuk kenalan yang lebih dalam dengan gaya, saya sarankan membaca yang ini.

Perlu dipahami bahwa dalam proses membuat perubahan pada kode situs, properti yang menentukan jenis garis, ketebalan dan warnanya dicantumkan dipisahkan oleh spasi.

Metode ini memiliki beberapa keunggulan:

Berbagai kemungkinan yang dengannya Anda dapat membuat hampir semua garis.

Kemudahan membuat semua perubahan yang diperlukan langsung ke kode HTML. Ini sangat menyederhanakan tugas untuk pembuat situs yang tidak berpengalaman.

Cara membuat garis horizontal lurus menggunakan tag HTML

Hal pertama yang saya ingin menarik perhatian Anda adalah bahwa tag ini, terlepas dari semua seluk-beluk dan prinsip html, tidak memiliki tag penutup. Itu dapat digunakan di mana saja dalam kode html, di antara tag dan.

Tandai atribut

- lebar- bertanggung jawab atas panjang garis. Dapat ditentukan baik dalam persen maupun dalam piksel.

- ukuran- ketebalan garis. Ditentukan dalam piksel.

- warna- menentukan warna garis.

- meluruskan- atribut yang bertanggung jawab untuk penyelarasan garis. Pada gilirannya, tim merujuknya.

Pada dasarnya, garis horizontal digunakan untuk menghiasi halaman HTML situs, memberikan tampilan yang lebih menarik. Tetapi mereka juga dapat secara visual membatasi informasi dari bagian yang berdekatan, menambah kenyamanan bagi pembaca saat mempelajarinya. Secara umum, gambar garis horizontal di mana Anda perlu, itu saja.

Bagaimana cara menggambar garis horizontal?

Ada tag khusus untuk menggambar garis horizontal di HTML

... Apalagi dia adalah tanda blokir, yaitu, menciptakan jeda baris sebelum dan sesudah itu sendiri, sehingga garis selalu diperoleh pada baris yang terpisah. Oleh karena itu, hanya dapat ditentukan di dalam tag yang dapat berisi elemen blok, misalnya atau
... Tapi diriku sendiri
tidak dapat memiliki konten, karena tidak memiliki tag akhir, yaitu kosong.

Contoh menggambar garis horizontal dalam HTML

Menggambar garis horizontal

Gugus kalimat.

Gugus kalimat.

Gugus kalimat.

Hasil di browser

Gugus kalimat.

Gugus kalimat.

Gugus kalimat.

Seperti yang Anda lihat, garis-garisnya sangat tipis, tidak mencolok dan digambar dengan lebar penuh yang tersedia, jadi sekarang kita akan belajar bagaimana mengubahnya agar terlihat lebih menarik.

Bagaimana cara mengubah warna, ketebalan, dan lebar garis horizontal?

Dalam versi HTML yang lebih lama, tag

ada atribut khusus yang memungkinkan untuk mengubah warna, ketebalan, dan lebar garis horizontal. Ini adalah warna, ukuran dan lebar, masing-masing. Tetapi dalam versi yang lebih baru mereka telah dibuang demi Cascading Style Sheets (CSS), jadi, Anda dapat menebaknya, kami akan menggunakan atribut gaya favorit kami lagi. Sintaks umumnya adalah:

gaya = "latar belakang: warna">- warna garis (atau lebih tepatnya latar belakangnya).

gaya = "tinggi: ukuran">- ketebalan garis.

gaya = "lebar: ukuran">- lebar garis.

gaya = "latar belakang: warna; tinggi: ukuran; lebar: ukuran"> - tetapi Anda dapat menentukan semua parameter sekaligus, jangan lupa tentang titik koma (;).

Warna dapat ditentukan dengan namanya dalam bahasa Inggris atau dengan kode HEX warna, didahului dengan hash (#). Nah, Anda sudah tahu tentang ini dari pelajaran di mengubah warna teks dan latar belakang.

Tetapi kita akan berbicara tentang mengubah ukuran secara lebih rinci. Apakah kamu ingat dari tutorial mengubah font, ada sekitar sepuluh unit di CSS, tapi lebar garis hanya dapat ditentukan dalam piksel (px) dan persentase (%), dan ketebalan umumnya hanya dalam piksel. Jika Anda menyediakan unit lain, maka ini tidak akan menjadi kesalahan, tetapi browser akan mengabaikannya begitu saja.

Jika Anda menentukan dimensi dalam piksel, maka ketebalan dan lebar garis akan bergantung pada resolusi monitor tempat situs Anda dilihat (semakin tinggi resolusi layar, semakin tipis dan sempit garisnya).

Seperti yang saya katakan, hanya lebar garis yang dapat ditentukan sebagai persentase. Ukuran persentase selalu bergantung pada dan dihitung berdasarkan ukuran elemen penampung induk, di mana tag berada

... Dalam hal ini, ukuran induk diambil sebagai 100%. Misalnya, jika kita menempatkan tag
gaya = "lebar: 50%"> elemen dalam
, maka tidak peduli bagaimana kita mengubah ukuran jendela browser atau resolusi monitor - lebar garis akan selalu menjadi setengah lebar blok
.

Contoh perubahan warna, ketebalan dan lebar garis horizontal.

Ubah warna, ketebalan dan lebar garis horizontal.

Hasil di browser

Mengubah posisi garis horizontal

Saat Anda mengubah lebar garis horizontal, terlihat jelas bahwa browser selalu menempatkannya di tengah. Jika Anda ingin mengubah posisinya, maka gunakan saja di dalam

menyelaraskan atribut dengan nilai-nilai berikut:

  • Tengah- garis berada di tengah (nilai default).
  • kiri- ditekan ke tepi kiri.
  • Baik- ditekan ke tepi kanan.

Contoh penjajaran garis horizontal.

Ubah posisi garis horizontal.

Hasil di browser

Bagaimana cara menghapus batas di sekitar garis?

Lihatlah contoh pertama dari tutorial ini. Menurut Anda apa warna garis-garis ini? Dan di sini salah. Mereka transparan, seperti elemen halaman apa pun yang tidak memiliki warna latar belakang! Tidak percaya padaku? Kemudian lihat contoh di mana kami mengubah warna garis. Untuk yang pertama, kami tidak mengatur warnanya, tetapi hanya memperbesar ukurannya dan bukankah garis ini transparan? Yang seperti itu!

Sekarang saya akan menjelaskan. Secara default, browser menggambar batas di sekitar garis, yang menciptakan efek tiga dimensi. Jadi, ketika kita tidak menambah ketebalan garis horizontal, browser hanya menunjukkan bingkai ini kepada kita, karena ketebalan garis itu sendiri adalah 0px.

Untuk menghilangkan batas di sekitar garis, yang seringkali hanya merusak tampilan, kita akan menerapkan kembali atribut style. Dan tertulis seperti ini:

Pekerjaan rumah.

  1. Membuat judul artikel, bagian dan subbagian. Pusatkan semuanya.
  2. Atur seluruh halaman ke Arial dan Courier untuk header.
  3. Biarkan ukuran font untuk seluruh halaman menjadi 85% dari ukuran browser default. Dan judul memiliki 145%, 125% dan 110%, masing-masing, dari ukuran font pada halaman.
  4. Tulis paragraf di bawah judul pertama, kutipan panjang di bawah judul kedua, dan puisi di bawah judul ketiga. Dan biarkan puisi itu dipusatkan di halaman.
  5. Sorot tiga kata yang dicetak tebal dalam kutipan Anda.
  6. Di bawah judul artikel, gambar garis horizontal merah tiga piksel di seluruh lebar halaman.
  7. Di bagian atas dan bawah puisi, gambar garis hitam satu piksel. Biarkan lebar garis atas kira-kira sama dengan lebar ayat, dan garis bawah setengahnya.
  8. Hapus bingkai yang tidak perlu dari garis.

Dari penulis: Saya menyapa anda. Kebutuhan untuk menyajikan beberapa blok pada halaman web dalam satu baris adalah tugas yang sangat sering muncul untuk desainer tata letak. Itu terjadi selama tata letak hampir setiap templat, jadi bagaimanapun juga, kita semua perlu mengetahui dan menerapkan metode dasar untuk mengubah perilaku blok.

Sebelum kita melihat trik yang paling umum, saya ingin mengingat sedikit teori. Elemen halaman web dibagi menjadi blok dan inline. Dan perbedaan di antara mereka sangat sederhana - huruf kecil dapat ditempatkan pada satu baris, tetapi blok tidak bisa. Tentu saja, perbedaannya tidak berakhir di situ, tetapi inilah perbedaan utamanya. Sudah, blok dapat memiliki margin atas dan bawah (huruf kecil tidak), dan lebih banyak properti dapat diterapkan padanya.

Cara utama untuk menyusun blok dalam satu baris di css

Kami tidak akan mempersulit apa pun, ada 3 cara utama:

Mengonversi blok menjadi elemen sebaris. Pada saat yang sama, properti blok hilang, jadi opsi ini hampir tidak pernah digunakan.

Buat elemen yang diinginkan menjadi blok-inline. Ini adalah tipe khusus di mana elemen mempertahankan propertinya, tetapi pada saat yang sama memungkinkan blok lain untuk diposisikan berdampingan.

Elemen float menggunakan properti float.

Mari kita memikirkan opsi-opsi ini. Flexbox, tampilan tabular, dan poin lainnya tidak akan dipertimbangkan. Jadi katakanlah kita memiliki 3 subpos.

Pos 1

Pos 2

Pos 3

Secara alami, semua properti css harus ditulis dalam file terpisah (style.css), yang harus terhubung ke dokumen html. Dalam file ini saya akan menulis gaya minimal sehingga subpos kita dapat dengan mudah dilihat.

h3 (latar belakang: #EEDDCD;)

h3 (

latar belakang: #EEDDCD;

Di sini mereka berada di halaman:

Di sana mereka berperilaku seperti balok. Masing-masing terletak di jalurnya sendiri, ada lekukan di antara mereka. Jika mau, Anda juga dapat mengatur indentasi internal apa pun yang Anda inginkan dan secara umum melakukan apa pun yang Anda inginkan.

Ubah menjadi garis dan segera tambahkan padding. Untuk melakukannya, tambahkan properti berikut ke pemilih h3:

tampilan: sebaris; bantalan: 30px;

Ada 2 masalah utama dengan teknik ini. Yang pertama adalah bantalan minimum. Ini terbentuk karena fakta bahwa ada satu ruang di antara blok dalam kode, yang membentuk lekukan ini. Jika masalah ini membutuhkan solusi, ada 2 opsi utama:

Di html, atur kode blok yang diperlukan dalam satu baris tanpa spasi

Atur margin negatif di sebelah kanan -4 piksel. Itu adalah berapa banyak satu ruang yang dibutuhkan.

Masalah kedua adalah masalah tampilan dapat terjadi dengan ketinggian elemen yang berbeda. Secara umum, blok mengambang adalah pilihan terbaik. Alih-alih display: inline-block, kami menulis ini:

Blok sejalan menggunakan kerangka kerja

Saya harus segera mengatakan bahwa jika Anda akan menggunakan kerangka kerja css normal (misalnya, Bootstrap), maka masih jauh lebih mudah di sana. Semua kode css yang bertanggung jawab untuk pengaturan elemen telah ditulis dan Anda hanya perlu mengatur kelas yang benar. Yang perlu Anda lakukan adalah mempelajari sistem grid dan Anda dapat membuat template multi-kolom responsif tanpa terlalu banyak kesulitan. Setidaknya itu akan jauh lebih mudah daripada menulis css dari awal.

Tantangan lain untuk menulis kode dari awal muncul saat Anda membutuhkan desain yang responsif. Tentu saja, Anda dapat menerapkannya sendiri dengan memiliki kueri media, tetapi akan jauh lebih sulit jika Anda memiliki template yang rumit.

Misalnya, ketika Anda harus memiliki 4 kolom di layar besar, 3 di sedang, dan 2 di ponsel. Dengan bantuan kerangka kerja seperti Bootstrap, atau lebih tepatnya dengan kisi-kisinya, hanya perlu beberapa menit untuk mengimplementasikannya.

Dengan lancar mentransfer topik ke kerangka Bootstrap, saya sekali lagi akan mencatat bahwa jika Anda dihadapkan dengan tugas membuat template responsif yang kompleks, maka itu adalah dosa untuk tidak menggunakan grid. Untuk melakukan ini, Anda bahkan tidak perlu menghubungkan versi lengkap kerangka kerja - Anda dapat menyesuaikannya dan berhenti di situ hanya yang benar-benar Anda butuhkan.

Anda dapat mempelajari cara bekerja dengan kerangka kerja dengan bantuan. Dijelaskan juga teorinya, tapi yang terpenting ada prakteknya. Anda akan membuat 3 template responsif dan mendapatkan pengalaman hebat yang memungkinkan Anda membuat situs web sesuai pesanan atau untuk Anda sendiri. Dan jika Anda ingin melihat manfaat dan fitur kerangka kerja secara gratis, saya sarankan Anda melihat rangkaian artikel kami tentang Bootstrap dan tata letak sederhana. Saya berharap Anda sukses dalam tata letak dan pembangunan situs secara umum.

Saat membuat halaman HTML, tata letak memainkan peran penting. Terutama ketika kita berbicara tentang berbagai simbol dan desain dekoratif: hal-hal kecil ini membantu membuat "bahasa" halaman Anda lebih mudah diakses dan jelas, terlebih lagi, mereka secara signifikan mengubah persepsi dan penampilannya secara umum. Salah satu elemen terpenting untuk desain adalah garis horizontal, dan selanjutnya kita akan mempelajari lebih detail cara bekerja dengannya dan cara membuat garis horizontal di html.

Apa itu garis horizontal dan untuk apa?

Garis horizontal dalam html adalah elemen desain halaman yang melakukan sejumlah fungsi:

  1. Dekoratif... Membantu menambah daya tarik halaman.
  2. Pemisah... Mempromosikan pemisahan informasi yang efektif dari arti yang berbeda.
  3. Menekankan atau menggarisbawahi... Menarik perhatian pengunjung halaman ke informasi yang diperlukan dan paling penting.

Ini adalah garis horizontal yang dianggap sebagai cara paling terjangkau untuk mengimplementasikan sejumlah fungsi. Sangat sederhana untuk membuatnya, tetapi secara lahiriah terlihat sangat menguntungkan. Dengan perubahan sederhana pada kode html, Anda dapat mengatur:

  • panjang;
  • lebar;
  • karakteristik warna;
  • keselarasan ke satu atau tepi lainnya.

Perhatikan bahwa garis horizontal mengacu pada elemen blok. Ini berarti bahwa ia menempati baris baru pada halaman, dan teks yang mengikutinya akan berada di bawah.

Cara membuat garis horizontal di HTML

Anda dapat mengatur garis menggunakan tag sederhana - jam dalam tanda kurung segitiga. Ini adalah kependekan dari "Aturan Horisontal" dan menetapkan parameter eksternal klasik. Ini berbeda dari banyak orang lain karena tidak memerlukan tag akhir dan dapat berdiri sendiri. Anda dapat mengubah karakteristik eksternal suatu elemen menggunakan nilai tambahan di tag:

  1. Panjang... Jika Anda tidak ingin panjang garis memanjang di seluruh halaman, Anda dapat mengatur ukuran yang diinginkan dalam piksel atau persen. Ini dilakukan dengan bantuan kata tambahan "lebar" dalam tag dan indikator panjang numerik yang ditentukan setelah tanda kutip "=" masuk.

Ini terlihat seperti ini. Misalnya, jika kita menginginkan panjang 100 piksel, kita akan menetapkan tag seperti ini: hr width = "100

  1. Penyelarasan... Penjajaran dimungkinkan 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. Misalnya, jika kita perlu mengatur perataan tengah untuk garis horizontal dengan panjang 150 piksel, maka tag yang telah 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.

  1. 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".

  1. 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.

  1. Menyimpan bayangan... Jika Anda membutuhkan elemen yang tidak mengandung bayangan, maka atribut noshade harus digunakan dalam tag. Itu dapat digunakan sendiri atau dalam kombinasi dengan elemen lain. Sebuah tag untuk garis standar yang menggunakannya akan terlihat seperti ini: hr noshade

Buat garis horizontal menggunakan video

Dan jika Anda ingin mendapatkan informasi dalam format yang lebih visual, lihat video berikutnya, yang menjelaskan secara rinci kemungkinan bekerja dengan garis horizontal.

Setelah menentukan dimensi garis horizontal yang diperlukan, Anda dapat mendesain halaman situs sedemikian rupa sehingga informasinya terstruktur dan dibingkai secara visual. Ini membantu pengunjung untuk lebih mudah memahami informasi yang disajikan dan membuat situs Anda menonjol dari yang lain.

Salam untuk semua pembaca. Dari waktu ke waktu, para penyihir dihadapkan pada masalah bagaimana membuat garis horizontal atau vertikal menggunakan HTML atau menggunakan CSS. Inilah yang akan saya ceritakan hari ini.

Garis dalam CSS

Ada beberapa cara untuk menggambar garis. Salah satunya adalah dengan menggunakan CSS. Lebih tepatnya, dengan bantuan Border. Mari kita ambil contoh.

Dan akan seperti ini hasilnya.

Garis horizontal dan vertikal menggunakan css.

Garis dalam CSS dapat digambar menggunakan pernyataan Border. Jika Anda hanya menginginkan persegi panjang dengan lebar batas tetap, Anda cukup menggunakan operator ini dan menetapkan nilainya. Misalnya perbatasan: 5px solid # 000000; akan berarti bahwa batas blok memiliki lebar 5 piksel dalam warna hitam.

Namun, jika Anda perlu menetapkan tidak semua batasan, tetapi hanya beberapa, maka Anda perlu menuliskan dengan tepat batasan mana yang dibutuhkan, dan nilai apa yang akan dimiliki masing-masing batasan tersebut. Ini adalah operatornya:

  • border-top - menetapkan nilai batas atas
  • border-bottom - menetapkan nilai batas bawah
  • border-left - Mengatur nilai batas kiri
  • border-right - Mengatur nilai batas kanan.

Garis vertikal dan horizontal dalam HTML

Anda juga dapat membuat baris dalam HTML itu sendiri. Untuk melakukan ini, Anda dapat menggunakan tag hr.

Dalam hal ini, garis horizontal akan ditarik, satu piksel tinggi dan lebar penuh.

Tapi tag ini, Anda dapat mengatur beberapa nilai.

  • Lebar- menetapkan nilai lebar garis.
  • Warna- mengatur warna garis.
  • Meluruskan- mengatur perataan ke kiri, tengah, kanan
  • Ukuran- menetapkan nilai lebar garis dalam piksel.

Dengan tag jam, Anda juga dapat menentukan garis vertikal. Tetapi dalam hal ini, Anda harus menggunakan gaya lagi.

Dalam hal ini, garis vertikal akan digambar dengan tinggi seratus piksel, tebal satu piksel, dan indentasi lima piksel.

Kesimpulan.

Nah, sekarang Anda tahu bagaimana Anda bisa mengatur garis vertikal dan horizontal. Garis dapat diatur baik di situs biasa menggunakan HTML, dan disetel di situs yang menggunakan CMS, misalnya WordPress, tetapi dalam kasus ini, Anda harus beralih ke mode HTML.

Nah, jika Anda memiliki pertanyaan lagi, tanyakan di komentar.

ARTIKEL SEPERTI