Cara Membuat kop surat pemerintahan dengan html css

saya akan membuatkan contoh kode HTML dan CSS untuk kop surat dinas pemerintahan Kabupaten Bungo. Desain ini akan sederhana, bersih, dan profesional, cocok untuk dokumen resmi.

Saya akan menyertakan elemen-elemen umum seperti nama pemerintah daerah, nama dinas/instansi, alamat, kontak, dan placeholder untuk logo.

Berikut adalah kode HTML dan CSS-nya:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kop Surat Dinas Pemerintahan Kabupaten Bungo</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        /* General Body Styling */
        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            color: #333;
            background-color: #f9f9f9;
        }

        /* Container for the letterhead */
        .kop-surat-container {
            width: 100%;
            max-width: 800px; /* Standard A4 width approximation */
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border: 1px solid #ddd;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-radius: 8px;
        }

        /* Header Section */
        .kop-header {
            display: flex;
            align-items: center;
            padding-bottom: 15px;
            border-bottom: 3px solid #333; /* Thick line */
            margin-bottom: 15px;
        }

        .kop-logo {
            flex-shrink: 0; /* Prevent logo from shrinking */
            margin-right: 20px;
        }

        .kop-logo img {
            width: 80px; /* Adjust logo size as needed */
            height: auto;
            display: block;
            border-radius: 4px; /* Slightly rounded corners for the logo */
        }

        .kop-info {
            flex-grow: 1; /* Allow info to take remaining space */
            text-align: center;
        }

        .kop-info h1, .kop-info h2, .kop-info p {
            margin: 0;
            line-height: 1.2;
        }

        .kop-info h1 {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a;
            text-transform: uppercase;
        }

        .kop-info h2 {
            font-size: 20px;
            font-weight: 600;
            color: #222;
            text-transform: uppercase;
            margin-top: 5px;
        }

        .kop-info p {
            font-size: 14px;
            color: #555;
            margin-top: 5px;
        }

        /* Garis Kop Surat (Optional, if you want a separate line below the main one) */
        .garis-kop-surat {
            border-bottom: 1px solid #666; /* Thinner line */
            margin-top: 5px;
            margin-bottom: 20px;
        }

        /* Content Area (for demonstration) */
        .content-area {
            padding-top: 20px;
            font-size: 16px;
            line-height: 1.6;
            color: #444;
        }

        /* Responsive Design */
        @media (max-width: 600px) {
            .kop-header {
                flex-direction: column;
                text-align: center;
            }
            .kop-logo {
                margin-right: 0;
                margin-bottom: 15px;
            }
            .kop-info h1 {
                font-size: 20px;
            }
            .kop-info h2 {
                font-size: 18px;
            }
            .kop-info p {
                font-size: 12px;
            }
            .kop-surat-container {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="kop-surat-container">
        <div class="kop-header">
            <div class="kop-logo">
                <!-- Placeholder for Kabupaten Bungo Logo -->
                <!-- Ganti URL gambar di bawah dengan URL logo Kabupaten Bungo Anda -->
                <img src="https://placehold.co/80x80/cccccc/333333?text=LOGO" alt="Logo Kabupaten Bungo">
            </div>
            <div class="kop-info">
                <h1>PEMERINTAH KABUPATEN BUNGO</h1>
                <h2>DINAS PENDIDIKAN DAN KEBUDAYAAN</h2>
                <p>Jalan Lintas Sumatera KM. 05, Kelurahan Sungai Pinang, Kecamatan Bungo Dani</p>
                <p>Kabupaten Bungo, Provinsi Jambi, Kode Pos 37211</p>
                <p>Telepon: (0747) 21xxx | Email: disdikbud@bungokab.go.id | Website: www.bungokab.go.id</p>
            </div>
        </div>
        <!-- Optional: A second, thinner line below the main header line -->
        <div class="garis-kop-surat"></div>

        <div class="content-area">
            <!-- Isi surat Anda akan dimulai dari sini -->
            <p><strong>Nomor:</strong> ....................................................</p>
            <p><strong>Lampiran:</strong> ....................................................</p>
            <p><strong>Perihal:</strong> ....................................................</p>
            <br>
            <p>Yth. Bapak/Ibu ....................................................</p>
            <p>di-</p>
            <p>Tempat</p>
            <br>
            <p style="text-indent: 40px;">Dengan hormat,</p>
            <p style="text-align: justify;">
                Sehubungan dengan .......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................                                                                                                                                                                                                                                             </p>
            <br>
            <p>Demikian surat ini kami sampaikan, atas perhatian dan kerjasamanya kami ucapkan terima kasih.</p>
            <br>
            <p style="text-align: right;">Bungo, <?php echo date('d F Y'); ?></p>
            <p style="text-align: right;">Kepala Dinas Pendidikan dan Kebudayaan,</p>
            <br><br><br><br>
            <p style="text-align: right;"><strong>(Nama Lengkap Kepala Dinas)</strong></p>
            <p style="text-align: right;">NIP. ....................................................</p>
        </div>
    </div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

<!DOCTYPE html>

<head>

<title>Kop Surat Dinas Pemerintahan Kabupaten Bungo</title>

<style>

/* General Body Styling */

body {

font-family: 'Inter', sans-serif;

margin: 0;

padding: 20px;

box-sizing: border-box;

color: #333;

background-color: #f9f9f9;

}

/* Container for the letterhead */

.kop-surat-container {

width: 100%;

max-width: 800px; /* Standard A4 width approximation */

margin: 0 auto;

background-color: #fff;

padding: 30px;

border: 1px solid #ddd;

box-shadow: 0 2px 8px rgba(0,0,0,0.1);

border-radius: 8px;

}

/* Header Section */

.kop-header {

display: flex;

align-items: center;

padding-bottom: 15px;

border-bottom: 3px solid #333; /* Thick line */

margin-bottom: 15px;

}

.kop-logo {

flex-shrink: 0; /* Prevent logo from shrinking */

margin-right: 20px;

}

.kop-logo img {

width: 80px; /* Adjust logo size as needed */

height: auto;

display: block;

border-radius: 4px; /* Slightly rounded corners for the logo */

}

.kop-info {

flex-grow: 1; /* Allow info to take remaining space */

text-align: center;

}

.kop-info h1, .kop-info h2, .kop-info p {

margin: 0;

line-height: 1.2;

}

.kop-info h1 {

font-size: 24px;

font-weight: 700;

color: #1a1a1a;

text-transform: uppercase;

}

.kop-info h2 {

font-size: 20px;

font-weight: 600;

color: #222;

text-transform: uppercase;

margin-top: 5px;

}

.kop-info p {

font-size: 14px;

color: #555;

margin-top: 5px;

}

/* Garis Kop Surat (Optional, if you want a separate line below the main one) */

.garis-kop-surat {

border-bottom: 1px solid #666; /* Thinner line */

margin-top: 5px;

margin-bottom: 20px;

}

/* Content Area (for demonstration) */

.content-area {

padding-top: 20px;

font-size: 16px;

line-height: 1.6;

color: #444;

}

/* Responsive Design */

@media (max-width: 600px) {

.kop-header {

flex-direction: column;

text-align: center;

}

.kop-logo {

margin-right: 0;

margin-bottom: 15px;

}

.kop-info h1 {

font-size: 20px;

}

.kop-info h2 {

font-size: 18px;

}

.kop-info p {

font-size: 12px;

}

.kop-surat-container {

padding: 15px;

}

</style>

</head>

<body>

</div>

<h1>PEMERINTAH KABUPATEN BUNGO</h1>

<h2>DINAS PENDIDIKAN DAN KEBUDAYAAN</h2>

<p>Jalan Lintas Sumatera KM. 05, Kelurahan Sungai Pinang, Kecamatan Bungo Dani</p>

<p>Kabupaten Bungo, Provinsi Jambi, Kode Pos 37211</p>

<p>Telepon: (0747) 21xxx | Email: disdikbud@bungokab.go.id | Website: www.bungokab.go.id</p>

</div>

<p><strong>Nomor:</strong> ....................................................</p>

<p><strong>Lampiran:</strong> ....................................................</p>

<p><strong>Perihal:</strong> ....................................................</p>

<br>

<p>Yth. Bapak/Ibu ....................................................</p>

<p>Tempat</p>

<br>

<p style="text-indent: 40px;">Dengan hormat,</p>

Sehubungan dengan ....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... </p>

<br>

<p>Demikian surat ini kami sampaikan, atas perhatian dan kerjasamanya kami ucapkan terima kasih.</p>

<br>

<p style="text-align: right;">Bungo, <?php echo date('d F Y'); ?></p>

<p style="text-align: right;">Kepala Dinas Pendidikan dan Kebudayaan,</p>

<p style="text-align: right;"><strong>(Nama Lengkap Kepala Dinas)</strong></p>

</div>

</body>

</html>

Penjelasan Kode:

HTML Structure (kop-surat-container):
- kop-surat-container: Div utama yang membungkus seluruh kop surat, memberikan batas dan bayangan agar terlihat seperti dokumen.
- kop-header: Menggunakan display: flex untuk menempatkan logo dan informasi instansi secara berdampingan.
- kop-logo: Berisi tag <img> sebagai placeholder untuk logo Kabupaten Bungo. Anda perlu mengganti src dengan URL gambar logo yang sebenarnya.
- kop-info: Berisi judul-judul (<h1> untuk nama kabupaten, <h2> untuk nama dinas) dan paragraf (<p>) untuk alamat dan kontak.
- garis-kop-surat: Div kosong yang digunakan untuk membuat garis horizontal tipis di bawah header.
- content-area: Area untuk isi surat (contoh placeholder untuk nomor, lampiran, perihal, dan isi surat).
CSS Styling (<style> tag di <head>):
- Font: Menggunakan font ‘Inter’ dari Google Fonts untuk tampilan yang modern dan mudah dibaca.
- body: Mengatur margin, padding, dan warna latar belakang dasar.
- .kop-surat-container: Memberikan lebar maksimum, margin auto (untuk centering), padding, border, shadow, dan radius sudut agar terlihat seperti kertas.
- .kop-header:
  - display: flex dan align-items: center untuk mengatur tata letak logo dan teks sejajar secara vertikal.
  - border-bottom dengan ketebalan 3px untuk garis kop surat yang tebal.
- .kop-logo: Mengatur ukuran logo dan margin.
- .kop-info:
  - flex-grow: 1 agar mengambil sisa ruang yang tersedia.
  - text-align: center untuk menengahkan teks informasi instansi.
  - Pengaturan font-size, font-weight, line-height, dan text-transform: uppercase untuk judul-judul.
- .garis-kop-surat: Membuat garis tipis kedua di bawah header.
- Responsive Design (@media (max-width: 600px)):
  - Saat lebar layar kurang dari 600px (umumnya untuk perangkat mobile), tata letak header akan berubah menjadi flex-direction: column (logo di atas, teks di bawah) dan teks akan ditengahkan.
  - Ukuran font juga disesuaikan agar lebih proporsional di layar kecil.

Cara Menggunakan:

Simpan Kode: Salin seluruh kode di atas dan simpan sebagai file .html (misalnya kop_surat.html).
Ganti Logo: Ganti src="https://placehold.co/80x80/cccccc/333333?text=LOGO" dengan URL atau path relatif ke gambar logo resmi Kabupaten Bungo Anda. Pastikan logo memiliki latar belakang transparan (PNG) jika ingin terlihat lebih baik.
Sesuaikan Informasi: Ubah DINAS PENDIDIKAN DAN KEBUDAYAAN, alamat, nomor telepon, email, dan website sesuai dengan dinas/instansi yang Anda inginkan di Kabupaten Bungo.
Buka di Browser: Buka file HTML tersebut di browser Anda untuk melihat hasilnya.

Kop surat ini dirancang agar terlihat rapi dan menyesuaikan diri dengan ukuran layar yang berbeda (responsive).

Dibaca: 186

Penjelasan Kode:

Cara Menggunakan:

Baca Juga

Rekomendasi untuk kamu