Cara Membuat Halaman Utama Website dengan HTML dan CSS

by

Cara Membuat Halaman Utama Website dengan HTML dan CSS – Membangun halaman utama website merupakan langkah awal yang menarik dalam perjalanan Anda memasuki dunia pengembangan web. Dengan menggunakan HTML dan CSS, Anda dapat menciptakan halaman yang menarik dan informatif. Dalam panduan ini, kita akan menjelajahi langkah-langkah yang mudah dipahami untuk menciptakan halaman utama website yang sesuai dengan kebutuhan Anda.

Pembuatan halaman utama website tidak perlu rumit. Bahkan bagi pemula sekalipun, Anda dapat dengan mudah mengikuti langkah-langkah sederhana yang akan saya bagikan di artikel ini. Mari kita mulai dengan membentuk dasar-dasar proyek dan memahami cara mengatur tampilan halaman web menggunakan HTML dan CSS.

Dengan berbekal pemahaman dasar dan semangat belajar yang tinggi, Anda akan menjadi lebih percaya diri dalam mengembangkan halaman web yang menakjubkan. Selain itu, proses ini akan membuka pintu bagi Anda untuk menjelajahi lebih jauh dunia pengembangan web dan meningkatkan keterampilan Anda.

Jadi, mari kita mulai petualangan Anda dalam menciptakan halaman utama website yang menakjubkan menggunakan HTML dan CSS! Ikuti langkah-langkah dengan cermat dan Anda akan melihat betapa mudahnya menghasilkan halaman web yang memikat dan berfungsi dengan baik.

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat halaman utama website dengan html dan css:

  • Perangkat laptop,
  • Goole chrome (Web browser),
  • Notepad++ (Text editor code),
  • Niat yang kuat.

Cara Mudah Halaman Website Sederhana dengan HTML dan CSS

1. Buat Folder Project Halaman Utama Website

Langkah pertama adalah membuat folder khusus untuk proyek halaman utama website Anda. Ini akan membantu Anda menjaga kerapihan dan organisasi proyek.

2. Buat Folder “img”

Dalam folder proyek, buat folder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di halaman web Anda. Download gambar disini untuk dapat diimplementasikan ke dalam halaman utama website dengan html dan css.

Artikel Terkait:   Cara Membuat Sidebar dengan HTML dan CSS

3. Buat File “halaman_utama_website.html”

Buka editor teks atau IDE yang Anda sukai, lalu buat file baru dengan nama “halaman_utama_website.html“. Ini akan menjadi file utama yang akan menampilkan konten halaman utama website Anda.

Berikut ini file html yang dapat Anda tambahkan untuk membuat halaman website dengan html dan css:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Utama</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>Website Saya</h1>
        <nav>
            <ul>
                <li><a href="https://riztekno.com/">Beranda</a></li>
                <li><a href="https://riztekno.com/">Tentang</a></li>
                <li><a href="https://riztekno.com/">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <img src="img/landing_page.jpg" alt="Hero Image">
        <h2>Selamat Datang!</h2>
        <p>Selamat datang di website kami yang fantastis.</p>
        <a href="https://riztekno.com/" class="btn">Selengkapnya</a>
      </section>
      
      <section class="features">
        <div class="feature">
          <img src="img/image1.jpg" alt="Fitur 1">
          <h3>Fitur 1</h3>
          <p>Deskripsi singkat fitur 1.</p>
        </div>
        <div class="feature">
          <img src="img/image2.jpg" alt="Fitur 2">
          <h3>Fitur 2</h3>
          <p>Deskripsi singkat fitur 2.</p>
        </div>
        <div class="feature">
          <img src="img/image3.jpg" alt="Fitur 3">
          <h3>Fitur 3</h3>
          <p>Deskripsi singkat fitur 3.</p>
        </div>
      </section>
      

    <footer>
        <p>Hak Cipta &copy; 2024 Website Saya. Hak Cipta Dilindungi Undang-Undang.</p>
    </footer>
</body>

</html>
 

4. Buat File “style.css”

Selanjutnya, buat file CSS terpisah dengan nama “style.css“. File ini akan digunakan untuk mengatur tata letak, warna, dan gaya lainnya dari elemen-elemen di halaman web Anda.

Artikel Terkait:   Cara Membuat Website Keren dengan HTML dan CSS

Berikut ini file css yang dapat Anda tambahkan untuk membuat halaman website dengan html dan css:

/* Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    margin: 0;
    padding: 0;
  }
  
  header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
  }
  
  nav ul {
    list-style-type: none;
  }
  
  nav ul li {
    display: inline;
    margin-right: 20px;
  }
  
  nav ul li a {
    color: #fff;
    text-decoration: none;
  }
  
  .hero {
    background-color: #f4f4f4;
    padding: 50px;
    text-align: center;
  }
  
  .hero img {
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  
  .hero h2 {
    color: #333;
    font-size: 36px;
  }
  
  .hero p {
    color: #555;
    font-size: 18px;
    margin-bottom: 30px;
  }
  
  .hero .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .hero .btn:hover {
    background-color: #555;
  }
  
  .features {
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }
  
  .feature {
    flex: 1;
    margin: 0 20px;
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }
  
  .feature img {
    width: 100%;
    max-width: 200px;
    border-radius: 50%;
    margin-bottom: 20px;
  }
  
  .feature h3 {
    color: #333;
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .feature p {
    color: #555;
  }
  
  footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
  }
 

5. Mengubah Tampilan Halaman Utama

Dalam file “halaman_utama_website.html“, Anda akan menggunakan tag HTML untuk struktur halaman dan menghubungkan file CSS untuk mengatur gaya tampilan. Mulailah dengan menambahkan elemen-elemen dasar seperti header, navigasi, konten, dan footer. Kemudian, gunakan CSS untuk mengatur tata letak dan gaya tampilan sesuai keinginan Anda. Pastikan untuk menggunakan prinsip-prinsip desain responsif agar halaman web terlihat baik di berbagai perangkat.

Artikel Terkait:   Cara Membuat Website Pariwisata dengan HTML dan CSS

6. Save & View Tampilan

Terakhir simpan semua perubahan yang telah Anda buat dalam file HTML dan CSS. Buka file “halaman_utama_website.html” menggunakan browser web untuk melihat tampilan halaman utama website yang telah Anda buat. Pastikan untuk menguji tampilan di berbagai perangkat untuk memastikan responsivitasnya.

Preview hasil

Berikut ini preview hasil halaman utama website dengan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah membuat halaman utama website sederhana menggunakan HTML dan CSS. Terakhir, ingatlah bahwa perjalanan ini hanya awal dari banyaknya kesempatan yang dapat Anda jelajahi dalam dunia pengembangan web. Tetaplah bersemangat dan teruslah belajar, karena dengan dedikasi dan kerja keras, Anda akan menguasai keterampilan ini dengan sempurna. Selamat mencoba, dan semoga berhasil dalam penciptaan halaman utama website Anda Selamat mencoba!.

Related posts: