Cara Membuat Landing Page dengan HTML dan CSS

By Posted on

Cara Membuat Landing Page dengan HTML dan CSS – Apakah Anda tertarik untuk mempelajari cara membuat halaman landing yang menarik dan efektif menggunakan HTML dan CSS? Landing page merupakan salah satu elemen kunci dalam pemasaran online yang dapat membantu Anda menarik perhatian pengunjung dan mengubahnya menjadi pelanggan potensial. Meskipun terdengar rumit, Anda akan terkejut betapa mudahnya membuat landing page dengan bantuan panduan yang tepat.

Dalam artikel ini, haikalweb akan membimbing Anda langkah demi langkah dalam proses pembuatan landing page menggunakan HTML dan CSS. Tidak perlu khawatir jika Anda seorang pemula dalam dunia pengembangan web, karena setiap langkah akan dijelaskan secara rinci dan mudah dipahami. Dengan mengikuti panduan ini, Anda akan memiliki kemampuan untuk membuat landing page yang unik dan menarik untuk proyek Anda.

Alat yang Harus di Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat landing page dengan HTML dan CSS:

  • Perangkat laptop,
  • Web browser (disarankan menggunakan chrome),
  • Text editor code (Sublime text),
  • Niat yang sungguh-sungguh.

Cara Membuat Landing Page dengan HTML dan CSS

Langsung saja, mari kita mulai dengan langkah pertama: pembuatan folder proyek untuk landing page Anda.

1. Buat Folder Project Landing Page

Langkah pertama adalah membuat folder khusus untuk proyek landing page Anda. Ini akan membantu Anda menjaga file-file terorganisir dan mudah diakses.

2. Buat Folder Img

Dalam folder proyek Anda, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di landing page Anda nantinya. Untuk implementasi ke dalam landing page download gambar disini.

Artikel Terkait:  Cara Membuat Website Toko Alat Tulis dengan HTML dan CSS

3. Buat Sebuah File landing_page.html

Buka editor teks favorit Anda dan buatlah file baru dengan nama “landing_page.html“. Ini akan menjadi file utama yang akan menampilkan konten landing page Anda.

Berikut ini source code html yang dapat Anda implementasikan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Situs Kami</h1>
    </header>
    <section class="landing-content">
        <div class="image-container">
            <img src="img/landing_image.jpg" alt="Gambar Landing Page">
        </div>
        <div class="text-container">
            <h2>Promosi Khusus!</h2>
            <p>Dapatkan diskon 50% untuk produk pilihan kami.</p>
            <a href="#">Cek Sekarang</a>
        </div>
    </section>
    <footer>
        <p>Hak Cipta © 2024 Landing Page.</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS terpisah untuk mendesain tampilan landing page Anda. Buatlah file baru dengan nama “style.css” di folder proyek Anda.

Berikut ini source code css yang dapat Anda implementasikan:

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

header {
    background-color: #007bff;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.landing-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

.image-container {
    flex: 1;
    padding: 0 20px;
}

.image-container img {
    max-width: 100%;
    height: auto;
}

.text-container {
    flex: 1;
    padding: 0 20px;
}

.text-container h2 {
    font-size: 2em;
    margin-bottom: 10px;
}

.text-container p {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 20px;
}

a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
}

footer {
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
}
 

5. Mengubah Tampilan Landing Page

Sekarang, kita akan mulai mendesain tampilan landing page. Anda dapat menambahkan elemen-elemen HTML seperti judul, gambar, tombol, dan lainnya di dalam file “landing_page.html“. Kemudian, gunakan CSS di file “style.css” untuk mengatur tata letak, warna, dan gaya lainnya.

Artikel Terkait:  Cara Membuat Tampilan Facebook dengan HTML dan CSS

Berikut ini contoh perubahan yang dapat Anda coba:

<body>
<header>
<h1>Selamat Datang di Situs Kami</h1>
</header>
<section>
<img src="img/landing_image.jpg" alt="Gambar Landing Page">
<p>Deskripsi singkat tentang apa yang Anda tawarkan.</p>
<a href="#">Daftar Sekarang</a>
</section>
<footer>
<p>Hak Cipta © 2024 Landing Page.</p>
</footer>
</body>

/* Gaya CSS Anda di sini */
header {
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
section {
text-align: center;
}
a {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
margin-top: 20px;
}

6. Simpan & Lihat Tampilan

Setelah Anda menyelesaikan perubahan, simpan file HTML dan CSS Anda. Buka file “landing_page.html” di browser web Anda untuk melihat tampilan landing page yang baru Anda buat.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah membuat sebuah landing page sederhana menggunakan HTML dan CSS. Selamat mencoba!

Related posts: