Cara Menambahkan Garis dalam HTML

Unduh PDF
Disusun bersama Staf wikiHow

Unduh PDF

Artikel wikiHow 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]

Metode 1
Metode 1 dari 2:

Menggunakan CSS/HTML5

Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ca\/658928-11-1.jpg\/v4-460px-658928-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/658928-11-1.jpg\/v4-728px-658928-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/658928-12-1.jpg\/v4-460px-658928-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/658928-12-1.jpg\/v4-728px-658928-12-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/658928-13-1.jpg\/v4-460px-658928-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/658928-13-1.jpg\/v4-728px-658928-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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]
    • 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.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/658928-14-1.jpg\/v4-460px-658928-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/658928-14-1.jpg\/v4-728px-658928-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Pengaturan gaya atau tampilan garis untuk penanda <hr> akan diakhiri.
  7. 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. 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/658928-15-1.jpg\/v4-460px-658928-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/658928-15-1.jpg\/v4-728px-658928-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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: 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 type 
 = 
 "text/css" 
 > 
 hr 
 { 
 width 
 : 
 50 
 % 
 ; 
 height 
 : 
 20 
 px 
 ; 
 background-color 
 : 
 red 
 ; 
 margin-right 
 : 
 auto 
 ; 
 margin-left 
 : 
 auto 
 ; 
 margin-top 
 : 
 5 
 px 
 ; 
 margin-bottom 
 : 
 5 
 px 
 ; 
 border-width 
 : 
 2 
 px 
 ; 
 border-color 
 : 
 green 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Ini adalah tajuk halaman </ 
 h1 
 > 
 < 
 hr 
 > 
 < 
 p1 
 > 
Ini adalah paragraf yang dipisahkan oleh garis horizontal </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Iklan
Metode 2
Metode 2 dari 2:

Menggunakan HTML 4.01

Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/658928-1-1.jpg\/v4-460px-658928-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/658928-1-1.jpg\/v4-728px-658928-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/658928-2-1.jpg\/v4-460px-658928-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/658928-2-1.jpg\/v4-728px-658928-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/658928-3-1.jpg\/v4-460px-658928-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/658928-3-1.jpg\/v4-728px-658928-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Teks yang akan diawali dengan garis horizontal akan digeser ke bawah.
  4. 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.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/658928-4-1.jpg\/v4-460px-658928-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/658928-4-1.jpg\/v4-728px-658928-4-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Penanda "<hr>" berfungsi membuat garis horizontal yang melintang di sepanjang halaman.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c0\/658928-5-1.jpg\/v4-460px-658928-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c0\/658928-5-1.jpg\/v4-728px-658928-5-1.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Pada tahap ini, penanda <hr> berada pada barisnya sendiri, tanpa kode lain di sisi kiri atau kanannya.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/658928-6-1.jpg\/v4-460px-658928-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/658928-6-1.jpg\/v4-728px-658928-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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]
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/658928-8-1.jpg\/v4-460px-658928-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/658928-8-1.jpg\/v4-728px-658928-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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] 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Ini adalah tajuk dokumen </ 
 h1 
 > 
 < 
 hr 
 size 
 = 
 "6" 
 width 
 = 
 "50%" 
 align 
 = 
 "left" 
 color 
 = 
 "green" 
 > 
 < 
 p1 
 > 
Paragraf ini dipisahkan dari tajuk dokumen dengan garis horizontal. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Iklan

wikiHow Terkait

Cara
Memperbesar Volume Komputer
Cara
Memperbaiki Laptop yang Tidak Mengisi Daya
Cara
Mengatur Kecerahan Layar di Komputer Windows 7
Cara
Mengatur Komputer untuk Mengakses LAN
Cara
Mematikan Komputer Secara Otomatis pada Waktu Tertentu
Cara
Menutup Jendela Aplikasi pada Komputer dan Ponsel
Cara
Menghubungkan Laptop ke Proyektor
Cara
Mengetikkan Simbol pada Laptop
Cara
Menghubungkan Printer ke Komputer Anda
Cara
Menghubungkan Perangkat Audio ke Komputer
Cara
Membalikkan Layar Komputer Anda
Cara
Menonaktifkan Tombol Function
Cara
Menggunakan Aplikasi AirDroid pada Android
Cara
Menghubungkan Headset ke PC
Iklan

Referensi

  1. ↑ https://www.w3schools.com/tags/tag_hr.asp
  2. ↑ https://www.w3schools.com/css/css_margin.asp#:~:targetText=The%20auto%20Value,the%20left%20and%20right%20margins .
  3. ↑ http://www.myhtmltutorials.com/line.html
  4. ↑ https://www.w3schools.com/TAGS/tag_hr.asp

Tentang wikiHow ini

Bahasa lain
Halaman ini telah diakses sebanyak 16.443 kali.

Apakah artikel ini membantu Anda?

Iklan