Cara Menambahkan Garis dalam HTML

Artikel How.com.vn ini akan mengajarkan kepada Anda cara membuat garis horizontal dalam HTML dan CSS. Garis horizontal (dikenal juga dengan istilah horizontal rule) dapat digunakan untuk memisahkan sebagian teks dari konten lain pada situs web. Cara terkini untuk menambahkan garis pada dokumen HTML adalah menggunakan kode CSS dan HTML5. Namun, untuk saat ini Anda juga bisa bisa menggunakan penanda HTML "HR".^{[1]XTeliti sumber}

Metode 1

Metode 1 dari 2:

Menggunakan CSS/HTML5

Unduh PDF

1
Buka atau buat dokumen HTML baru. Dokumen HTML bisa disunting menggunakan program penyunting teks seperti Notepad. Anda juga bisa memanfaatkan program penyunting kode seperti Adobe Dreamweaver. Ikuti langkah-langkah berikut untuk membuka dokumen HTML pada program yang diinginkan:
- Buka Notepad atau program penyunting teks/kode yang diinginkan.
- Klik menu “File”.
- Klik “Open”.
- Pilih berkas HTML.
- Klik “Open”.
2
Tambahkan kepala dokumen HTML. Jika dokumen belum memiliki kepala, ikuti langkah-langkah berikut untuk menambahkannya. Bagian kepala ditambahkan setelah penanda "<html>" dan sebelum penanda "<body>".
- Tikkan <head> di bagian atas dokumen.
- Tekan tombol “Enter” dua kali untuk menambahkan dua baris baru.
- Tikkan </head> untuk mengakhiri bagian kepala dokumen.
3
Tikkan <style type="text/css"> pada bagian kepala. Penanda gaya ini berada di antara dua penanda bagian kepala. Dengan penanda ini, Anda bisa memasukkan kode CSS untuk mendesain HTML.
- Sebagai alternatif, Anda bisa menggunakan lembar gaya (style sheet) eksternal untuk dokumen HTML.
Kode ini merupakan penanda CSS untuk menambahkan dan menyesuaikan garis horizontal. Tambahkan penanda gaya ini pada bagian kepala atau berkas CSS eksternal (jika Anda menggunakannya).
5
Tambahkan penyesuaian gaya CSS untuk penanda "<hr>". Kode ini dimasukkan setelah penanda "hr {". Ada beragam cara yang bisa diikuti untuk memodifikasi tampilan garis horizontal. Berikut adalah beberapa contohnya.
- Tikkan width: ##px; untuk menetapkan panjang garis. Ganti “##” dengan angka (dalam piksel) untuk menentukan panjang garis. Anda juga bisa menggunakan satuan persentase (%) sebagai pengganti satuan piksel (px).
- Tikkan height: ##px; untuk menentukan ketebalan garis. Ganti “##” dengan angka (dalam piksel) untuk menentukan ketebalan garis yang akan dibuat.
- Tikkan background-color: ##; untuk menetapkan warna garis. Ganti “##” dengan nama warna. Anda juga bisa menggantinya dengan simbol tagar (#), diikuti oleh kode heksadesimal warna.
- Tikkan margin-right: ##px; untuk menetapkan margin kanan garis (dalam hitungan piksel). Ganti “##” dengan angka dalam satuan piksel atau kode "auto". Dengan kode "auto", garis akan ditempatkan secara seimbang di tengah halaman, sesuai panjang garis yang sebelumnya ditentukan. Setelah garis diratatengahkan, ruang yang tersisa akan dibagi rata untuk margin kiri dan kanan.
- Tikkan margin-left: ##px; untuk menetapkan margin kiri garis (dalam hitungan piksel). Ganti “##” dengan angka dalam satuan piksel atau kode "auto". Dengan kode "auto", garis akan ditempatkan secara seimbang di tengah halaman, sesuai panjang garis yang sebelumnya ditentukan. Setelah garis diratatengahkan, ruang yang tersisa akan dibagi rata untuk margin kiri dan kanan.^{[2]XTeliti sumber}
- Tikkan margin-top: ##px; untuk menetapkan margin atas garis. Ganti “##” dengan besaran yang diinginkan (dalam piksel) untuk menetapkan ketebalan atau jarak margin.
- Tikkan margin-bottom: ##px; untuk mengatur margin bawah garis. Ganti “##” dengan besaran yang diinginkan (dalam piksel) untuk menetapkan ketebalan atau jarak margin.
- Tikkan border-width: ##px; untuk membuat bingkai di sekitar garis (opsional). Ganti “##” dengan besaran ketebalan bingkai yang diinginkan (dalam piksel).
- Tikkan border-color: ##; untuk menetapkan warna bingkai (opsional Ganti “##” dengan nama warna. Anda juga bisa menggantinya dengan simbol tagar (#), diikuti oleh kode heksadesimal warna.
Pengaturan gaya atau tampilan garis untuk penanda <hr> akan diakhiri.
7
Tekan tombol ↵ Enter dan tikkan </style>. Baris baru akan dibuat dan penanda penutup segmen gaya HTML akan ditambahkan. Penanda "</style>" dimasukkan setelah Anda selesai memasukkan semua elemen HTML yang dibutuhkan untuk menyesuaikan gaya/tampilan halaman dengan CSS.
8
Tikkan <hr> di mana pun pada bagian tubuh atau utama dokumen HTML. Bagian tubuh atau utama HTML berada di antara penanda "<body>" dan "</body>". Garis horizontal akan ditambahkan ke dokumen HTML. Pengaturan gaya CSS yang sebelumnya ditetapkan akan diterapkan setiap kali Anda menambahkan penanda <hr> pada dokumen HTML.
9
Simpan berkas HTML. Untuk menyimpan berkas teks sebagai dokumen HTML, Anda perlu mengganti ekstensi berkas (mis. “.txt” atau “.docx”) dengan ".html". Ikuti langkah-langkah berikut untuk menyimpan dokumen HTML:
- Klik menu “File”.
- Klik “Save As” jika Anda membuat berkas HTML baru. Klik “Save” untuk menyimpan perubahan pada berkas HTML yang sudah ada.
- Tikkan nama berkas pada kolom "File name".
- Tikkan ".html" di akhir nama berkas.
- Klik “Save”.
10
Uji dokumen HTML. Untuk menguji dokumen, klik kanan berkas dan pilih “Open with”. Setelah itu, pilih peramban web. Garis horizontal solid akan ditempatkan pada bagian yang Anda tambahi penanda "hr". Secara keseluruhan, kode HTML yang Anda masukkan akan tampak seperti ini:
Iklan

Metode 2

Metode 2 dari 2:

Menggunakan HTML 4.01

Unduh PDF

1
Buka atau buat dokumen HTML baru. Dokumen HTML bisa disunting menggunakan program penyunting teks seperti Notepad. Anda juga bisa memanfaatkan program penyunting kode seperti Adobe Dreamweaver. Ikuti langkah-langkah berikut untuk membuka dokumen HTML pada program yang diinginkan:
- Buka Notepad atau program penyunting teks/kode yang diinginkan.
- Klik menu “File”.
- Klik “Open”.
- Pilih berkas HTML.
- Klik “Open”.
Geser layar hingga Anda menemukan ruang atau baris yang ingin ditambahi garis, di atas paragraf atau teks tertentu. Setelah itu, klik ujung kiri baris untuk menempatkan kursor tepat sebelum awal baris.
Teks yang akan diawali dengan garis horizontal akan digeser ke bawah.
4
Pindahkan kembali kursor ke bagian yang ingin ditambahi garis. Cukup klik area tersebut atau gunakan tombol panah pada kibor untuk memindahkan kembali kursor ke bagian yang Anda ingin tambahi garis.
Penanda "<hr>" berfungsi membuat garis horizontal yang melintang di sepanjang halaman.
Pada tahap ini, penanda <hr> berada pada barisnya sendiri, tanpa kode lain di sisi kiri atau kanannya.
7
Tambahkan atribut garis horizontal (opsional). Anda bisa menerapkan atribut pada garis, seperti panjang, lebar, warna, dan perataan. Gunakan kode-kode berikut setelah kode "hr" di dalam tanda kurung kode. Anda bisa menerapkan lebih dari satu atribut di dalam tanda kurung dan memisahkan setiap atribut dengan satu spasi.^{[3]XTeliti sumber}
- Tikkan <hr size="#"> untuk mengubah ketebalan garis. Ganti “#” dengan besaran ketebalan yang diinginkan (mis. size="10").
- Tikkan <hr width="#"> untuk mengubah panjang garis. Ganti “#” dengan besaran panjang garis (dalam piksel), atau persentase panjang garis berdasarkan lebar halaman (mis. width="200" atau width="75%").
- Tikkan <hr color="#"> untuk mengubah warna garis. Ganti “#” dengan nama warna atau kode heksadesimal warna yang diinginkan (mis. color="red" atau color="#FF0000").
- Tikkan <hr align="#"> untuk menyesuaikan perataan garis. Ganti “#” dengan "right" untuk rata kanan, "left" untuk rata kiri, atau "center" untuk rata tengah (mis. align="center">).
8
Simpan berkas HTML. Untuk menyimpan berkas teks sebagai dokumen HTML, Anda perlu mengganti ekstensi berkas (mis. “.txt” atau “.docx”) menjadi ".html". Ikuti langkah-langkah berikut untuk menyimpan dokumen:
- Klik menu “File”.
- Klik “Save As” jika Anda membuat berkas HTML baru. Klik “Save” untuk menyimpan perubahan pada berkas HTML yang sudah ada.
- Tikkan nama berkas pada kolom di samping tulisan "File name".
- Tikkan ".html" di akhir nama berkas.
- Klik “Save”.
9
Uji dokumen HTML. Untuk menguji dokumen, klik kanan berkas dan pilih “Open with”. Setelah itu, pilih peramban web. Garis horizontal solid akan ditempatkan pada bagian yang Anda tambahi penanda "hr". Secara keseluruhan, kode HTML yang Anda masukkan akan tampak seperti ini:^{[4]XTeliti sumber}
Iklan