Cara Membuat Website Properti dengan HTML dan CSS

Cara Mudah Membuat Website Properti dengan HTML dan CSS – Jika Anda tertarik untuk memasuki dunia digital dan ingin memulai bisnis properti online, membuat website properti sendiri bisa menjadi langkah awal yang sempurna. Dalam panduan ini, riztekno akan memandu Anda melalui langkah-langkah sederhana untuk membuat website properti menggunakan HTML dan CSS, bahasa pemrograman dasar untuk web yang mudah dipahami oleh pemula.

Membuat website properti dengan HTML dan CSS bukanlah tugas yang sulit, bahkan bagi mereka yang baru memulai perjalanan mereka dalam dunia pengembangan web. Dengan langkah-langkah yang kami sediakan di bawah ini, Anda akan dapat membuat website properti yang menarik dan fungsional dalam waktu singkat.

Mari kita mulai dengan langkah-langkah dasar yang diperlukan untuk membuat website properti menggunakan HTML dan CSS:

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda Siapkan untuk membuat website properti dengan html dan css:

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

Cara Mudah Membuat Website Properti dengan HTML dan CSS

1. Buat Folder Proyek Website Properti

Langkah pertama dalam membuat website properti adalah dengan membuat folder proyek yang akan menjadi tempat Anda menyimpan semua file terkait proyek ini. Anda dapat memberikan nama folder sesuai keinginan Anda, misalnya “Website_Properti“.

2. Buat Folder img

Setelah membuat folder proyek, langkah selanjutnya adalah membuat folder baru di dalamnya untuk menyimpan semua gambar yang akan digunakan dalam website properti Anda. Beri nama folder ini sesuai kebutuhan, seperti “img“. Download gambar disini untuk diterapkan dalam proyek website properti dengan html dan css.

3. Buat Sebuah File website_properti.html

Sekarang, mari kita mulai membuat file HTML utama untuk website properti kita. Buka editor teks favorit Anda dan buatlah file baru dengan nama “website_properti.html” di dalam folder proyek yang telah Anda buat sebelumnya.

Artikel Terkait:   Cara Membuat Web Biodata Diri dengan HTML dan CSS

Berikut ini file html yang dapat Anda tambahkan untuk membuat website properti 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>Website Properti</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Website Properti</h1>
        <img src="img/landing.jpg" alt="Property Image">
        <a href="#" class="btn">Lihat Selengkapnya</a>
    </header>

    <section id="about" class="container">
        <h2>Tentang Kami</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat nibh. Phasellus eu arcu nec libero elementum ultrices. Nam vel turpis justo.</p>
        <p>Aliquam consequat enim ut urna vehicula tincidunt. Vestibulum tempor sapien et elit tincidunt, eget consectetur ipsum vehicula.</p>
    </section>

    <section class="properties">
        <div class="property">
            <img src="img/properti1.jpg" alt="Property 1">
            <div class="description">
                <h2>Properti 1</h2>
                <p>Deskripsi properti 1</p>
                <a href="https://riztekno.com/" class="btn">Lihat</a>
            </div>
        </div>
        <div class="property">
            <img src="img/properti2.jpeg" alt="Property 2">
            <div class="description">
                <h2>Properti 2</h2>
                <p>Deskripsi properti 2</p>
                <a href="https://riztekno.com/" class="btn">Lihat</a>
            </div>
        </div>
    </section>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, kita akan membuat file CSS untuk mengatur tata letak dan gaya visual dari website properti kita. Buatlah file baru dengan nama “style.css” di dalam folder proyek website properti Anda.

Artikel Terkait:   Cara Membuat Form Pendaftaran HTML dan CSS

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

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

header {
    text-align: center;
    padding: 50px 0;
}

header h1 {
    margin-bottom: 20px;
}

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

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

#about {
    text-align: center;
    margin-bottom: 50px;
}

.properties {
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
}

.property {
    width: 45%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
}

.property img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
}

.description {
    text-align: center;
}

.description h2 {
    margin-bottom: 10px;
}

.description p {
    margin-bottom: 20px;
}
 

5. Mengubah Tampilan Website Properti

Saatnya untuk mengubah tampilan website properti Anda! Dalam file “website_properti.html” yang telah Anda buat sebelumnya, Anda dapat menambahkan struktur HTML dan menghubungkannya dengan file CSS Anda untuk mengatur tata letak dan gaya halaman web.

6.  Simpan & Lihat Tampilan

Setelah Anda selesai melakukan perubahan, pastikan untuk menyimpan semua file Anda. Kemudian, buka file “website_properti.html” di browser web Anda untuk melihat tampilan website properti Anda yang telah diperbarui.

Preview hasil

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

Penutup

Dengan mengikuti langkah-langkah sederhana ini, Anda dapat membuat website properti yang menarik dan profesional menggunakan HTML dan CSS. Selanjutnya, Anda dapat terus mengembangkan website Anda dengan menambahkan fitur-fitur tambahan dan konten yang relevan untuk menarik calon pelanggan.

Semoga panduan ini bermanfaat bagi Anda yang ingin memulai perjalanan Anda dalam membangun website properti sendiri. Jika Anda memiliki pertanyaan lebih lanjut seputar pembuatan website, jangan ragu untuk bertanya kepada kami. Selamat mencoba!