Home  ›  HTML

Membuat Halaman Visi dan Misi Sekolah Berbasis Web Atau HTML

√ Membuat Halaman Visi dan Misi Sekolah Berbasis Web Atau HTML



Selamat datang di Web TulisanIB. Pada artikel kali ini penulis akan membagikan tutorial caranya membuat halaman visi dan misi sekolah berbasis web atau HTML.

Visi dan misi sekolah yang kita buat ini sifatnya universal atau bisa untuk semua jenjang pendidikan sekolah, dari Paud sampai Universitas.

Baiklah berikut visi dan misi sekolahnya.

Visi Sekolah

Hasilnya adalah seperti gambar di bawah ini:



Berikut adalah cara membuatnya:
  1. Pertama buat terlebih dulu file HTML, namanya bebas, kalau belum bisa kalian bisa membaca artikel "Cara Membuat File dengan Format Apapun di Windows dengan Mudah" yang telah penulis tulis sebelumnya.
  2. Lalu buka file HTML tersebut menggunakan teks editor, Bisa menggunakan Notepad, Notepad++, atau Sublime Text. Penulis menyarankan untuk menggunakan Sublime Text karena ringan.
  3. Copy kode berikut.
    <!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Visi Sekolah</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: linear-gradient(135deg, #eef2ff, #f8fafc);
      color: #1f2933;
    }

    .visi-section {
      max-width: 1000px;
      margin: 80px auto;
      padding: 60px 40px;
      background: #ffffff;
      border-radius: 22px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.12);
      position: relative;
      overflow: hidden;
    }

    .visi-section::before {
      content: "";
      position: absolute;
      top: -80px;
      right: -80px;
      width: 220px;
      height: 220px;
      background: radial-gradient(circle, #6366f1, transparent 70%);
      opacity: 0.25;
    }

    .visi-section::after {
      content: "";
      position: absolute;
      bottom: -80px;
      left: -80px;
      width: 220px;
      height: 220px;
      background: radial-gradient(circle, #22c55e, transparent 70%);
      opacity: 0.25;
    }

    .visi-header {
      text-align: center;
      margin-bottom: 40px;
      position: relative;
      z-index: 1;
    }

    .visi-badge {
      display: inline-block;
      padding: 8px 20px;
      border-radius: 999px;
      background: linear-gradient(135deg, #6366f1, #3b82f6);
      color: #ffffff;
      font-size: 13px;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .visi-header h2 {
      font-size: 36px;
      margin-bottom: 16px;
      color: #1e3a8a;
    }

    .visi-text {
      font-size: 18px;
      line-height: 1.8;
      max-width: 800px;
      margin: 0 auto;
      color: #374151;
    }

    @media (max-width: 600px) {
      .visi-section {
        margin: 30px 16px;
        padding: 40px 24px;
      }

      .visi-header h2 {
        font-size: 28px;
      }

      .visi-text {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>

  <section class="visi-section">
    <div class="visi-header">
      <span class="visi-badge">Visi Sekolah</span>
      <h2>Visi Pendidikan</h2>
    </div>

    <p class="visi-text">
      Terwujudnya generasi beriman, berakhlak mulia, cerdas, mandiri, berprestasi, serta mampu berkontribusi positif bagi masyarakat, bangsa, dan peradaban global.
    </p>
  </section>

</body>
</html>
  4. Lalu paste di file HTML yang telah kita buka menggunakan teks editor tadi.
  5. Save file HTML tersebut.
  6. Selesai.


Misi Sekolah

Hasilnya adalah seperti gambar di bawah ini:



Berikut adalah cara membuatnya:
  1. Pertama buat terlebih dulu file HTML, namanya bebas, kalau belum bisa kalian bisa membaca artikel "Cara Membuat File dengan Format Apapun di Windows dengan Mudah" yang telah penulis tulis sebelumnya.
  2. Lalu buka file HTML tersebut menggunakan teks editor, Bisa menggunakan Notepad, Notepad++, atau Sublime Text. Penulis menyarankan untuk menggunakan Sublime Text karena ringan.
  3. Copy kode berikut.
    <!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Misi Sekolah</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #f4f7fb;
      color: #333;
    }

    .misi-section {
      max-width: 1100px;
      margin: 60px auto;
      padding: 40px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    }

    .misi-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .misi-header h2 {
      font-size: 32px;
      margin-bottom: 10px;
      color: #1e3a8a;
    }

    .misi-header p {
      font-size: 16px;
      color: #555;
      max-width: 600px;
      margin: 0 auto;
    }

    .misi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }

    .misi-card {
      background: linear-gradient(135deg, #eef2ff, #ffffff);
      border-radius: 14px;
      padding: 24px 22px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .misi-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 30px rgba(0,0,0,0.12);
    }

    .misi-number {
      font-size: 48px;
      font-weight: 700;
      color: rgba(30,58,138,0.15);
      position: absolute;
      top: 16px;
      right: 20px;
    }

    .misi-card p {
      font-size: 15px;
      line-height: 1.7;
      position: relative;
      z-index: 1;
    }

    @media (max-width: 600px) {
      .misi-section {
        margin: 20px;
        padding: 28px 20px;
      }

      .misi-header h2 {
        font-size: 26px;
      }
    }
  </style>
</head>
<body>

  <section class="misi-section">
    <div class="misi-header">
      <h2>Misi Sekolah</h2>
      <p>Mewujudkan pendidikan yang bermutu untuk membentuk generasi beriman, berilmu, dan berkarakter.</p>
    </div>

    <div class="misi-grid">
      <div class="misi-card">
        <div class="misi-number">01</div>
        <p>Menanamkan nilai keimanan, ketakwaan, dan akhlak mulia dalam setiap proses pendidikan dan pembelajaran.</p>
      </div>

      <div class="misi-card">
        <div class="misi-number">02</div>
        <p>Menyelenggarakan pendidikan yang bermutu, inovatif, dan berkelanjutan sesuai perkembangan ilmu pengetahuan dan teknologi.</p>
      </div>

      <div class="misi-card">
        <div class="misi-number">03</div>
        <p>Mengembangkan potensi peserta didik secara optimal dalam aspek intelektual, spiritual, emosional, sosial, dan keterampilan hidup.</p>
      </div>

      <div class="misi-card">
        <div class="misi-number">04</div>
        <p>Menciptakan lingkungan belajar yang aman, nyaman, inklusif, dan berkarakter.</p>
      </div>

      <div class="misi-card">
        <div class="misi-number">05</div>
        <p>Menumbuhkan sikap mandiri, kreatif, disiplin, serta berjiwa kepemimpinan pada peserta didik.</p>
      </div>

      <div class="misi-card">
        <div class="misi-number">06</div>
        <p>Mendorong prestasi akademik dan non-akademik serta menjalin kemitraan dengan orang tua dan masyarakat.</p>
      </div>
    </div>
  </section>

</body>
</html>
  4. Lalu paste di file HTML yang telah kita buka menggunakan teks editor tadi.
  5. Save file HTML tersebut.
  6. Selesai.




Baiklah hanya segitu saja.

Sekian apa yang bisa penulis sampaikan pada artikel "Membuat Halaman Visi dan Misi Sekolah Berbasis Web Atau HTML" ini. Semoga artikel ini bisa bermanfaat untuk semua orang dan terutama bagi yang sedang membutuhkan artikel ini.
Share on Social Media