Cara Membuat Website Pemerintahan dengan HTML dan CSS

Cara Membuat Website Pemerintahan dengan HTML dan CSS – Dalam era digital yang berkembang pesat, kehadiran sebuah website pemerintahan menjadi semakin penting. Hal ini tidak hanya memudahkan akses informasi bagi masyarakat, tetapi juga mencerminkan transparansi dan keterbukaan pemerintah dalam menyajikan layanan publik. Jika Anda tertarik untuk mempelajari bagaimana membuat website pemerintahan dengan menggunakan HTML dan CSS, Anda berada di tempat yang tepat!

Dalam panduan ini, riztekno telah menguraikan langkah-langkah detail untuk menciptakan sebuah website pemerintahan yang informatif dan mudah dinavigasi. Mulai dari pembuatan struktur dasar hingga pengaturan tampilan menggunakan CSS, kami telah membahas semua hal yang perlu Anda ketahui, bahkan jika Anda seorang pemula dalam dunia pengembangan web.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang Harus Anda siapkan untuk dapat membuat website pemerintahan dengan html dan css:

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

Cara Membuat Website Pemerintahan dengan HTML dan CSS

1. Buat Folder Proyek Website Pemerintahan

Pertama-tama, buatlah folder khusus untuk proyek website pemerintahan Anda. Ini akan membantu Anda dalam mengatur semua file yang terkait dengan proyek ini.

2. Buat Folder img

Di dalam folder proyek Anda, buatlah subfolder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda. Download gambar disini untuk dapat di implementasikan dalam project website pemerintahan dengan html dan css.

3. Buat Sebuah File website_pemerintahan.html

Sekarang, mari buat file HTML untuk website pemerintahan Anda. Buka editor teks favorit Anda dan buatlah file baru dengan nama “website_pemerintahan.html“.

Berikut ini file html yang dapat Anda tambahkan untuk dapat membuat website pemerintahan 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="style.css">
    <title>Website Pemerintahan</title>
</head>
<body>
    <header>
        <div class="logo">
            <img src="img/logo.jpg" alt="Logo Pemerintahan">
        </div>
        <div class="header-text">
            <h2>Website Pemerintahan X</h2>
        </div>
        <nav>
            <ul>
                <li><a href="https://riztekno.com/">Beranda</a></li>
                <li><a href="https://riztekno.com/">Tentang Kami</a></li>
                <li><a href="https://riztekno.com/">Berita</a></li>
                <li><a href="https://riztekno.com/">Kontak</a></li>
            </ul>
        </nav>
    </header>
    

    <section class="landing-page">
        <div class="landing-content">
            <h1>Selamat Datang di Website Pemerintahan</h1>
            <p>Temukan informasi terbaru dan layanan kami</p>
            <a href="https://riztekno.com/" class="btn">Selengkapnya</a>
        </div>
        <div class="landing-image">
            <img src="img/landing.jpg" alt="Gambar Landing Page">
        </div>
    </section>

    <section class="about-us">
        <div class="about-content">
            <h2>Tentang Kami</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </section>

    <section class="latest-news">
        <h2>Berita Terkini</h2>
        <div class="news-item">
            <img src="img/news1.jpg" alt="Gambar Berita">
            <div class="news-info">
                <h3>Judul Berita</h3>
                <p>Deskripsi singkat tentang berita ini.</p>
                <a href="https://riztekno.com/" class="btn">Baca</a>
            </div>
        </div>
        <div class="news-item">
            <img src="img/news2.jpg" alt="Gambar Berita">
            <div class="news-info">
                <h3>Judul Berita</h3>
                <p>Deskripsi singkat tentang berita ini.</p>
                <a href="https://riztekno.com/" class="btn">Baca</a>
            </div>
        </div>
    </section>

    <footer>
        <p>Hak Cipta © 2024 Website Pemerintahan</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS untuk mengatur tampilan website Anda. Buatlah file baru dengan nama “style.css” di dalam folder proyek Anda.

Artikel Terkait:   Cara Membuat Halaman Login Website dengan HTML dan CSS

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

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

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

header {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.logo img {
    max-width: 80px; /* Atur ukuran maksimum lebar logo */
    height: auto; /* Biarkan tinggi logo menyesuaikan agar proporsional */
}


.header-text h2 {
    margin: 0; /* Menghapus margin default */
}

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

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

nav ul li a {
    color: #000; /* Mengubah warna teks navigasi */
    text-decoration: none;
}

nav ul li a:hover {
    color: #ffa500;
}

.landing-page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
}
/* Ukuran Gambar pada Halaman Pendaratan */
.landing-image img {
    width: 80%; /* Atur lebar gambar sesuai kebutuhan */
    height: auto; /* Biarkan tinggi otomatis untuk menjaga proporsi gambar */
    max-width: 800px; /* Ukuran maksimum lebar gambar */
    margin-right: 20px;
    border-radius: 5px;
}


.landing-content {
    flex: 1;
}

/* Mengatur Tulisan pada Halaman Pendaratan menjadi 2 Baris */
.landing-content h1 {
    display: inline-block; /* Memastikan teks bisa diatur secara inline */
    width: 100%; /* Mengisi lebar konten */
    white-space: nowrap; /* Mencegah pemutusan kata */
    overflow: hidden; /* Mengatur teks yang melebihi lebar */
    text-overflow: ellipsis; /* Menyembunyikan teks yang melebihi lebar dengan elipsis */
}

.landing-content h1::after {
    content: ""; /* Menambahkan konten pseudo */
    display: block; /* Mengatur teks ke baris baru */
    height: 1.2em; /* Tinggi teks */
}


.landing-image img {
    max-width: 100%;
}

.about-us {
    background-color: #f4f4f4;
    padding: 50px;
}

.latest-news {
    padding: 50px;
}

.news-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.news-item img {
    max-width: 200px;
    margin-right: 20px;
    border-radius: 5px;
}

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

.btn:hover {
    background-color: #0056b3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

5. Mengubah Tampilan Website Pemerintahan

Sekarang, Anda dapat mulai mengubah tampilan website pemerintahan sesuai kebutuhan Anda. Anda dapat menambahkan elemen-elemen seperti logo pemerintahan, menu navigasi, konten informasi, dan lainnya.

Artikel Terkait:   Cara Membuat Website Seperti Facebook dengan HTML dan CSS

6. Simpan & Lihat Tampilan

Setelah melakukan perubahan, pastikan untuk menyimpan semua file Anda. Lalu, buka file “website_pemerintahan.html” menggunakan browser web Anda untuk melihat tampilan website Anda. Pastikan tampilan sesuai dengan yang Anda inginkan dan lakukan perbaikan jika diperlukan.

Preview hasil

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

Penutup

Dengan mengikuti panduan ini, Anda telah melangkah lebih dekat menuju terwujudnya sebuah website pemerintahan yang profesional dan efektif. Ingatlah, keberhasilan sebuah website tidak hanya terletak pada desain visualnya, tetapi juga pada kemudahan akses informasi yang disajikan serta pengalaman pengguna yang memuaskan.

Jika Anda memiliki pertanyaan lebih lanjut atau ingin memperdalam pengetahuan Anda tentang pengembangan web, jangan ragu untuk menjelajahi sumber daya online yang tersedia atau bergabung dalam komunitas pengembang web. Semoga panduan ini bermanfaat bagi Anda dalam memulai perjalanan Anda dalam menciptakan website pemerintahan yang berkualitas dan relevan dengan kebutuhan masyarakat modern. Terima kasih telah membaca, dan selamat berkarya!