Cara Membuat Website Kelurahan dengan HTML dan CSS

Cara Membuat Website Kelurahan dengan HTML dan CSS – Selamat datang di panduan langkah demi langkah tentang cara membuat website kelurahan menggunakan HTML dan CSS! Apakah Anda tertarik untuk membangun platform online yang informatif dan berguna bagi komunitas Anda? Jika benar, Anda ada ditempat yang sangat tepat.

Dalam era digital yang semakin berkembang, memiliki website kelurahan dapat menjadi langkah penting dalam memperkuat keterlibatan masyarakat dan menyediakan akses mudah terhadap informasi yang relevan. Namun, bagi pemula, ide untuk memulai proyek web seringkali terasa menakutkan. Tapi jangan khawatir, kami akan membimbing Anda melalui setiap langkah dengan cara yang mudah dipahami.

Dalam artikel ini, riztekno akan menjelaskan langkah demi langkah bagaimana Anda dapat membuat sebuah website kelurahan sederhana namun efektif menggunakan bahasa pemrograman web standar, yaitu HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets). Dengan mengikuti panduan ini, Anda akan belajar untuk membuat folder proyek, menambahkan gambar, membuat halaman web utama, menyesuaikan tampilan dengan CSS, dan melihat hasilnya secara langsung.

Tidak perlu memiliki pengalaman sebelumnya dalam pemrograman web untuk memulai. Kami akan memberikan instruksi yang jelas dan mudah diikuti sehingga siapa pun dapat mengikuti tutorial ini dengan percaya diri.

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda Siapkan untuk Membuat Website Kelurahan dengan HTML dan CSS:

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

Cara Membuat Website kelurahan dengan HTML dan CSS

1. Buat Folder Project Website Kelurahan

Pertama-tama, buatlah folder di komputer Anda dan beri nama sesuai dengan proyek ini. Misalnya, “Website_Kelurahan_Project“.

2. Buat Folder “img”

Dalam folder proyek Anda, buatlah subfolder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di dalam website. Download gambar disini untuk diterapkan dalam proyek website kelurahan dengan html dan css.

3. Buat Sebuah File “website_kelurahan.html”

Gunakan editor teks favorit Anda (misalnya Notepad, Visual Studio Code, atau Sublime Text) dan buatlah file baru dengan nama “website_kelurahan.html” di dalam folder proyek Anda. Ini akan menjadi file utama untuk halaman web kelurahan Anda.

Berikut ini source code html yang harus Anda tambahkan untuk membuat website kelurahan 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">
    <link rel="stylesheet" href="sytle.css">
    <title>Kelurahan Website</title>
</head>

<body>
    <!-- Header -->
    <header>
        <div class="logo">
            <img src="img/logo.png" alt="Kelurahan Logo">
        </div>
        <div class="title">
            <h1>Kelurahan Website</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#gallery">Gallery</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>

    <!-- Landing Page -->
    <!-- Landing Page -->
    <section id="home" class="landing">
        <div class="landing-content">
            <img src="img/landing.jpg" alt="Landing Image" class="landing-image">
            <h2>Selamat datang di Kelurahan XYZ</h2>
            <p>Temukan informasi terbaru tentang kami</p>
            <a href="#about" class="btn">Tentang Kami</a>
        </div>
    </section>


    <!-- Gallery -->
    <section id="gallery">
        <h2>Galeri</h2>
        <div class="gallery">
            <div class="gallery-item">
                <img src="img/galeri1.jpg" alt="Gallery Image 1">
            </div>
            <div class="gallery-item">
                <img src="img/galeri2.jpg" alt="Gallery Image 2">
            </div>
            <div class="gallery-item">
                <img src="img/galeri3.jpg" alt="Gallery Image 3">
            </div>
            <!-- Add more gallery items as needed -->
        </div>
    </section>

    <!-- About Us -->
    <section id="about">
        <div class="about-content">
            <div class="about-text">
                <h2>Tentang Kami</h2>
                <p>Kelurahan XYZ adalah sebuah kelurahan yang terletak di...</p>
            </div>
            <div class="about-image">
                <img src="img/about.jpg" alt="About Image">
            </div>
        </div>
    </section>
    <footer>
        <div class="footer-content">
            <p>&copy; 2024 Kelurahan XYZ. All rights reserved.</p>
        </div>
    </footer>
</body>

</html>
 

4. Buat File “style.css”

Selanjutnya, buatlah file CSS baru dengan nama “style.css“. File ini akan digunakan untuk mengatur tampilan dan gaya halaman web Anda.

Artikel Terkait:   Cara Membuat Website Keren dengan HTML dan CSS

Berikut ini source code css yang harus Anda tambahkan untuk membuat website kelurahan dengan html dan css:

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    width: 50px;
    height: 50px;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
}

.landing {
    text-align: center;
    padding: 100px 0;
}

.landing-content {
    max-width: 800px;
    margin: auto;
}

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

.btn:hover {
    background-color: #555;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    padding: 20px;
    margin-left: 10px;
    /* Menambahkan margin kiri */
}

#gallery h2 {
    text-align: left;
    margin-left: 20px;
    /* Menambahkan sedikit ruang di sebelah kiri */
    margin-right: 50px;
    /* Untuk memberikan sedikit ruang di sebelah kanan */
}

.gallery-item img {
    width: 100%;
    height: auto;
}

.about-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
}

.about-text {
    max-width: 50%;
    padding-right: 20px;
}

.about-image img {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    /* Menentukan tinggi maksimum gambar */
}

/* Responsiveness */
.landing img {
    max-width: 100%;
    height: auto;
    max-height: 500px;
    /* Menentukan tinggi maksimum gambar */
}

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

.footer-content {
    max-width: 1200px;
    margin: auto;
}

.footer-content p {
    margin: 0;
}
 

5. Mengubah Tampilan Website Kelurahan

Sekarang, mari kita mulai mengubah tampilan website kelurahan menggunakan HTML dan CSS. Pertama, setelah anda menambahkan struktur dasar HTML di dalam file “website_kelurahan.html” yang mencakup elemen-elemen seperti <!DOCTYPE html>, <html>, <head>, dan <body>. Setelah itu, anda dapat merubah konten penting seperti judul halaman, header, menu navigasi, informasi tentang kelurahan, dan footer jika memang diperlukan.

Artikel Terkait:   Cara Membuat Menu Vertikal dengan HTML dan CSS

Selanjutnya, buka file “style.css” untuk menggunakan CSS guna mempercantik tampilan halaman web Anda. Di sini, Anda dapat mengatur warna, font, layout, dan elemen-elemen lainnya sesuai dengan keinginan Anda.

Jika Anda memiliki logo atau gambar lain yang ingin ditampilkan, letakkan gambar-gambar tersebut di dalam folder “img” yang telah Anda buat sebelumnya. Kemudian, tambahkan gambar-gambar tersebut ke halaman web menggunakan tag <img> di HTML. Dengan langkah-langkah ini, Anda dapat membuat tampilan website kelurahan Anda menjadi lebih menarik dan informatif bagi pengunjungnya.

6. Save & View Tampilan

Setelah Anda selesai mengedit dan memperindah halaman web serta file CSS, jangan lupa untuk menyimpan perubahan yang Anda buat. Kemudian, buka file “website_kelurahan.html” menggunakan browser web favorit Anda untuk melihat tampilan akhir dari website kelurahan yang telah Anda buat.

Preview hasil

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

Penutup

Dengan mengikuti langkah-langkah yang kami bagikan dalam panduan ini, Anda telah berhasil membuat sebuah website kelurahan sederhana namun efektif menggunakan HTML dan CSS. Kini, Anda memiliki platform yang dapat digunakan untuk menyebarkan informasi penting kepada warga kelurahan, mempromosikan acara komunitas, atau bahkan mengumpulkan umpan balik dari penduduk setempat.

Ingatlah bahwa membangun sebuah website adalah langkah pertama. Untuk menjaga agar website tetap relevan dan bermanfaat bagi komunitas Anda, pastikan untuk terus memperbarui konten, menyediakan informasi terbaru, dan merespons umpan balik dari pengguna. Selain itu, Anda juga dapat mempertimbangkan untuk memperluas fitur dan fungsionalitas website Anda seiring dengan berkembangnya kebutuhan kelurahan Anda.

Jangan ragu untuk menjelajahi lebih lanjut tentang HTML dan CSS, serta belajar tentang konsep-konsep web desain dan pengembangan yang lebih lanjut. Dunia internet terus berkembang, dan dengan pengetahuan dan keterampilan yang Anda peroleh, Anda dapat terus mengembangkan website Anda untuk menjadi lebih baik dan lebih bermanfaat.

Terakhir, tetaplah kreatif dan terbuka terhadap ide-ide baru. Website kelurahan Anda adalah representasi dari komunitas Anda, jadi jadikanlah itu sebagai tempat yang ramah, informatif, dan inklusif bagi semua orang. Kami berharap panduan ini telah memberikan nilai tambah bagi Anda dalam memulai perjalanan Anda dalam membangun dan mengelola website kelurahan.

Selamat kepada Anda atas pencapaian Anda dalam membuat website kelurahan Anda sendiri! Kami berharap website Anda menjadi sumber daya yang berharga bagi warga kelurahan Anda dan memberikan dampak positif pada komunitas Anda secara keseluruhan.