Bagaimana cara menambahkan garis horizontal ke HTML

Video: Cara Membuat Garis Horizontal Halaman HTML

Isi

Langkah
Metode 1 dari 2: Bekerja dalam HTML 4.01
Metode 2 dari 2: Bekerja di CSS / HTML5

Artikel ini akan menunjukkan cara menambahkan garis horizontal dalam HTML. Garis horizontal dapat digunakan untuk memisahkan konten di situs. Kode untuk membuat garis cukup sederhana. Namun, dalam HTML 4.01, dimungkinkan untuk mengubah desain garis menggunakan perintah internal. Di HTML5, Anda harus menggunakan CSS untuk menata garis.

Langkah

Metode 1 dari 2: Bekerja dalam HTML 4.01

1 Buka dokumen HTML yang sudah ada atau buat dokumen HTML baru. Dokumen HTML dapat diedit dengan editor teks seperti Notepad atau editor kode khusus seperti Adobe Dreamweaver. Ikuti langkah-langkah ini untuk membuka dokumen HTML dalam program pilihan Anda:
- Buka Notepad atau editor teks / kode lainnya.
- Buka menunya Mengajukan.
- Klik Membuka.
- Pilih file HTMLnya.
- Klik Membuka
2 Pilih lokasi di mana Anda ingin menyisipkan garis. Gulir ke bawah hingga Anda menemukan garis di atas tempat garis itu akan muncul, lalu gerakkan kursor langsung ke awal garis itu dengan mengklik paling kiri dari garis itu.
3 Tambahkan baris kosong. Ketuk dua kali Masukuntuk memindahkan teks yang sebelumnya ingin Anda sisipkan ke bawah, lalu tempatkan kursor pada baris kosong.
4 Tambahkan tag jam>. Memasuki jam> ke ruang kosong di awal baris. Menandai jam> memungkinkan Anda menggambar garis horizontal di seluruh halaman.
5 Pindahkan kursor setelah tag "jam" ke baris baru dengan menekan Masuk. Sekarang tagnya jam> harus pada baris yang terpisah.
6 Tambahkan atribut ke garis horizontal (opsional). Tambahkan atribut seperti panjang, ketebalan, warna, dan perataan. Lampirkan mereka dalam kurung kurawal segera setelah "jam". Untuk menambahkan beberapa atribut, pisahkan dengan spasi.
- Memasuki ukuran jam = "#">untuk mengubah ketebalan garis. Ganti "#" dengan nilai ketebalan numerik (misalnya, ukuran = "10").
- Memasuki lebar jam = "#">untuk mengubah lebar garis. Ganti "#" dengan jumlah piksel atau persentase lebar halaman (misalnya, lebar = "200" atau lebar = "75%").
- Memasuki warna jam = "#">untuk mengubah warna garis. Ganti "#" dengan nama warna atau kode heksadesimalnya (misalnya, color = "red" atau color = "# FF0000").
- Memasuki jam align = "#">untuk menyelaraskan garis. Ganti "#" dengan "kanan" (kanan), "kiri" (kiri), atau "tengah" (tengah) (misalnya, lebar jam = "50%" align = "center">).
7 Simpan file HTMLnya. Untuk menyimpan file teks sebagai dokumen HTML, Anda harus mengubah ekstensi file (.txt, .docx) menjadi ".html". Ikuti langkah-langkah ini untuk menyimpan dokumen HTML Anda:
- Buka menunya Mengajukan.
- Klik Simpan sebagai.
- Masukkan nama untuk file di bidang Nama File.
- Menambahkan .html setelah nama file.
- Klik Menyimpan.
8 Periksa dokumen HTML Anda. Untuk memeriksa file HTML, klik kanan padanya dan pilih Open With. Kemudian pilih browser web Anda. Garis padat akan muncul di tempat Anda memasukkan tag "jam". Kode HTML akan terlihat seperti ini:

Metode 2 dari 2: Bekerja di CSS / HTML5

1 Buka dokumen HTML yang sudah ada atau buat dokumen HTML baru. Dokumen HTML dapat diedit dengan editor teks seperti Notepad atau editor kode khusus seperti Adobe Dreamweaver. Ikuti langkah-langkah ini untuk membuka dokumen HTML dalam program pilihan Anda:
- Buka Notepad atau editor teks / kode lainnya.
- Buka menunya Mengajukan.
- Klik Membuka.
- Pilih file HTMLnya.
- Klik Membuka
2 Tambahkan judul ke dokumen HTML Anda. Jika dokumen HTML Anda belum memiliki heading, ikuti langkah-langkah berikut untuk menambahkannya. Judul harus setelah tag html> dan sebelum tag body>.
- Memasuki kepala> di bagian atas dokumen.
- Ketuk dua kali Masukuntuk menambahkan dua baris baru.
- Memasuki / kepala>untuk menutup judul.
3 Memasuki tipe gaya = "teks / css"> di dalam header. Tag gaya ditempatkan di antara dua tag heading untuk membuat tempat di mana Anda dapat menggunakan CSS untuk memodifikasi desain HTML.
- Atau, Anda dapat menggunakan lembar gaya eksternal. Baca artikel "Cara memasukkan file CSS ke dalam HTML»Untuk mempelajari cara menautkan file CSS eksternal ke file HTML.
4 Memasuki jam {. Ini adalah tag CSS untuk menata garis horizontal. Tambahkan setelah tag "style" di header atau file CSS eksternal Anda.
5 Tambahkan gaya CSS untuk tag hr>. Mereka harus datang setelah tag "hr {". Garis horizontal dapat ditata dengan berbagai cara. Di bawah ini adalah beberapa di antaranya.
- Memasuki lebar: ## piksel;untuk mengatur lebar garis. Ganti "##" dengan lebar garis dalam piksel. Alih-alih piksel (px), Anda dapat menggunakan persentase (%).
- Memasuki tinggi: ## piksel;untuk mengatur berat garis. Ganti "##" dengan lebar garis dalam piksel.
- Memasuki warna latar belakang: ##;untuk menentukan warna garis. Ganti “##” dengan nama warna atau hash (#) diikuti dengan kode warna heksadesimal.
- Memasuki margin-kanan: ## px;untuk menentukan jumlah piksel dari tepi kanan. Ganti "##" dengan jumlah piksel numerik atau kode "otomatis". Masukkan "otomatis" untuk menyelaraskan garis ke kiri atau tengah.
- Memasuki margin-kiri: ## px;untuk menentukan jumlah piksel dari tepi kiri. Ganti "##" dengan jumlah piksel numerik atau kode "otomatis". Masukkan "otomatis" untuk menyelaraskan garis ke kanan atau tengah.
- Memasuki margin-atas: ## px; untuk menentukan padding atas untuk garis. Ganti "##" dengan nomor yang sesuai dengan padding dalam piksel.
- Memasuki margin-bawah: ## px;untuk menentukan padding bawah untuk garis. Ganti "##" dengan nomor yang sesuai dengan padding dalam piksel.
- Memasuki lebar batas: ## px;untuk menggambar kotak di sekitar garis (opsional). Ganti "##" dengan angka yang sesuai dengan lebar batas dalam piksel.
- Memasuki warna batas: ##;untuk menentukan warna batas (opsional). Ganti “##” dengan nama warna atau hash (#) diikuti dengan kode warna heksadesimal.
6 Memasuki } setelah atribut gaya untuk menyelesaikan penataan gaya untuk tag hr>.
7 Memasuki jam> di mana saja di badan dokumen HTML untuk menambahkan garis horizontal. Pengaturan gaya CSS akan diterapkan setiap kali Anda menggunakan tag hr> di dokumen HTML Anda. Kode Anda akan terlihat seperti ini: