Cara Membuat Website Lembaga dengan HTML dan CSS

Cara Mudah Membuat Website Lembaga dengan HTML dan CSS – Dalam era digital yang semakin berkembang, kehadiran online menjadi kunci untuk memperluas jangkauan dan mengkomunikasikan pesan lembaga kepada khalayak yang lebih luas. Membangun sebuah website lembaga bukan lagi sebuah pilihan, melainkan sebuah kebutuhan. Namun, bagi banyak orang, proses pembuatan website seringkali terasa rumit dan menakutkan. Dalam panduan ini, riztekno akan menguraikan langkah-langkah sederhana untuk membuat website lembaga menggunakan bahasa pemrograman dasar, HTML dan CSS. Dengan mengikuti langkah-langkah ini, Anda akan dapat membangun kehadiran online untuk lembaga Anda dengan mudah dan efisien.

Alat yang Dibutuhkan

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

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

Cara Mudah Membuat Website Lembaga dengan HTML dan CSS

1. Buat Folder Project Website Lembaga

Langkah pertama adalah membuat folder khusus untuk proyek website lembaga Anda. Anda dapat memberi nama folder ini sesuai dengan nama lembaga atau organisasi Anda. Pastikan untuk menyimpan semua file proyek di dalam folder ini untuk organisasi yang lebih baik.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder terpisah dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan dalam website Anda nantinya. Ini membantu dalam mengatur file-file Anda dengan lebih baik. Download gambar disini untuk di implementasikan dalam proyek website lembaga dengan html dan css.

3. Buat Sebuah File website_lembaga.html

Sekarang, saatnya untuk membuat file HTML pertama kita. Gunakan editor teks favorit Anda dan buatlah file baru dengan nama “website_lembaga.html“. File ini akan menjadi halaman utama website lembaga Anda. Mulailah dengan struktur dasar HTML:

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

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

<body>
    <header>
        <div class="container">
            <a href="index.html" class="logo">
                <img src="img/logo.png" alt="Logo Website">
            </a>
            <h1>Nama Website</h1>
            <nav>
                <a href="https://riztekno.com/">Beranda</a>
                <a href="https://riztekno.com/">Tentang Kami</a>
                <a href="https://riztekno.com/">Kontak</a>
            </nav>
        </div>
    </header>

    <section id="landing">
        <img src="img/landing_lembaga.jpg" alt="Banner Lembaga">
        <h1>Kunjungi website lembaga kami</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#tentang-kami" class="button">Selengkapnya</a>
    </section>

    <section id="galeri">
        <h2>Galeri Kegiatan</h2>
        <div class="grid-container">
            <img src="img/kegiatan1.jpg" alt="Kegiatan 1">
            <img src="img/kegiatan2.jpg" alt="Kegiatan 2">
            <img src="img/kegiatan3.jpg" alt="Kegiatan 3">
            <img src="img/kegiatan1.jpg" alt="Kegiatan 4">
        </div>
    </section>

    <section id="tentang-kami">
        <h2>Tentang Kami</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Cras tincidunt, nibh
            ac ullamcorper hendrerit, justo nisi ultricies lectus, sit amet ultricies libero risus eget sapien. Nunc
            accumsan, ipsum sed ultricies hendrerit, urna augue tincidunt lectus, vitae hendrerit massa risus sed neque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Cras tincidunt, nibh
            ac ullamcorper hendrerit, justo nisi ultricies lectus, sit amet ultricies libero risus eget sapien. Nunc
            accumsan, ipsum sed ultricies hendrerit, urna augue tincidunt lectus, vitae hendrerit massa risus sed neque.
        </p>
    </section>

    <footer>
        <p>Copyright &copy; 2024 Nama Lembaga</p>
    </footer>
</body>

</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS untuk mendesain tampilan website Anda. Buat file baru dengan nama “style.css” di dalam folder proyek Anda. File ini akan digunakan untuk menambahkan gaya dan tata letak visual pada halaman website Anda.

Artikel Terkait:   Cara Membuat Website Pariwisata dengan HTML dan CSS

Berikut ini file css yang harus Anda tambahkan untuk membuat website lembaga dengan html dan css:

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

#landing {
    background-color: #f5f5f5;
    padding: 50px 20px;
    text-align: center;
}

#landing img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
}

@media (max-width: 768px) {
    #landing img {
        width: 80%;
    }
}


#galeri img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
}

@media (max-width: 768px) {
    #galeri img {
        width: 80%;
    }
}



#landing h1 {
    font-size: 24px;
    margin-top: 0;
}

#landing p {
    font-size: 16px;
    margin-bottom: 20px;
}

#landing .button {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border: none;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
}

#galeri {
    padding: 50px 20px;
}

#galeri h2 {
    font-size: 24px;
    margin-top: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}

#tentang-kami {
    padding: 50px 20px;
    margin-top: 10px;
}

  

#tentang-kami h2 {
    font-size: 24px;
    margin-top: 0;
}

#tentang-kami p {
    font-size: 16px;
    margin-bottom: 20px;
}

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

/* CSS untuk header */

header {
    background-color: #fff;
    padding: 20px 0;
  }
  
  header .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  header .logo {
    display: block;
  }
  
  header h1 {
    font-size: 24px;
    margin: 0;
  }
  
  header nav {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  header nav a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
    padding: 10px;
    margin: 0 5px;
  }
  
  header nav a:hover {
    background-color: #f5f5f5;
  }

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

5. Mengubah Tampilan Website Lembaga

Sekarang, kita akan mulai menambahkan konten dan desain ke halaman website kita. Gunakan elemen-elemen HTML seperti <header>, <nav>, <section>, <footer>, dan lainnya untuk mengorganisir konten Anda dengan baik. Selain itu, gunakan CSS untuk memberikan warna, font, dan tata letak yang sesuai dengan identitas lembaga Anda.

Artikel Terkait:   Cara Membuat Web Perpustakaan dengan HTML dan CSS

6. Simpan & Lihat Tampilan

Setelah menyelesaikan desain dan konten website Anda, simpan semua perubahan di file HTML dan CSS Anda. Lalu, buka file “website_lembaga.html” menggunakan browser web Anda untuk melihat tampilannya. Pastikan untuk memeriksa responsivitasnya dengan mengubah ukuran layar untuk memastikan tampilan yang baik di berbagai perangkat.

Preview hasil

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

Penutup

Dengan demikian, Anda telah menyelesaikan langkah-langkah dasar untuk membuat website lembaga menggunakan HTML dan CSS. Jangan ragu untuk terus bereksperimen dan mengembangkan keterampilan Anda dalam dunia pengembangan web. Website lembaga Anda adalah jendela yang menghubungkan Anda dengan dunia, memperluas jangkauan lembaga Anda, dan meningkatkan keterlibatan dengan masyarakat. Dengan memperhatikan prinsip-prinsip desain yang baik dan menyediakan konten yang relevan dan menarik, Anda dapat memastikan website Anda muncul di puncak hasil pencarian Google dan menarik lebih banyak pengunjung yang tertarik dengan misi dan layanan lembaga Anda.