Cara Membuat Garis Horizontal di HTML

By Posted on

Cara Membuat Garis Horizontal di HTML – Apakah Anda baru memulai perjalanan Anda dalam pengembangan web dan penasaran tentang cara membuat garis horizontal di HTML? Garis horizontal adalah elemen sederhana namun penting dalam desain web yang dapat membantu membagi konten dengan jelas atau menambahkan sentuhan visual yang menarik. Dalam artikel ini, kelashtml akan membahas langkah-langkahnya secara detail agar mudah dipahami oleh pemula, sambil memberikan wawasan yang berguna untuk meningkatkan pengalaman pencarian Anda. Mari kita mulai dengan memahami langkah-langkah dasar untuk membuat garis horizontal di HTML.

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat garis horizontal di html:

  • Perangkat laptop,
  • Notepadd++ (Text editor code),
  • Google chrome,
  • Niat yang kuat.

Cara Membuat Garis Horizontal di HTML

1. Buat Folder Project Garis Horizontal

Langkah pertama adalah membuat folder untuk proyek Anda. Ini akan membantu Anda menjaga file-file terorganisir. Anda dapat memberi nama folder sesuai keinginan Anda, misalnya “ProyekGarisHorizontal“.

Baca Juga:  Cara Membuat Background Gif di HTML

2. Buat Sebuah File garis_horizontal.html

Berikutnya, buatlah sebuah file HTML di dalam folder proyek Anda. Anda dapat menggunakan teks editor seperti Notepad, Sublime Text, atau Visual Studio Code. Buat file baru dan beri nama “garis_horizontal.html” dalam folder proyek Anda.

Berikut ini file html yang harus Anda tambahkan untuk membuat garis horizontal di html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Line</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="horizontal-line"></div>
</body>
</html>
 

3. Buat File style.css

Sekarang, mari buat file CSS untuk mengatur tampilan garis horizontal. Buatlah file baru di dalam folder proyek dan beri nama “style.css“.

Berikut ini file css yang harus Anda tambahkan untuk membuat garis horizontal di html:

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .horizontal-line {
    width: 80%; /* Sesuaikan lebar garis sesuai kebutuhan */
    height: 1px; /* Sesuaikan tinggi garis sesuai kebutuhan */
    background-color: black; /* Warna garis */
  }
 

4. Mengubah Tampilan Garis Horizontal

Anda dapat mengubah tampilan garis horizontal sesuai keinginan Anda dengan mengedit properti CSS di file “style.css“. Misalnya, Anda dapat mengubah warna, lebar, atau gaya garis sesuai preferensi desain Anda.

Baca Juga:  Cara Membuat Background Color di HTML

5. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Buka file “garis_horizontal.html” di browser web Anda untuk melihat tampilan garis horizontal yang telah Anda buat.

Preview hasil

Berikut ini preview hasil garis horizontal di html jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat garis horizontal di HTML! Jika Anda ingin mempelajari lebih lanjut, jangan ragu untuk mengeksplorasi lebih dalam tentang pengembangan web dan eksperimen dengan berbagai elemen dan gaya. Semoga artikel ini bermanfaat untuk Anda dalam memahami dasar-dasar pembuatan garis horizontal di HTML.

Related posts: