Cara Membuat Web Sekolah dengan HTML dan CSS

By Posted on

Cara Membuat Web Sekolah dengan HTML dan CSS – Membuat sebuah website sekolah bukanlah hal yang sulit, terutama jika Anda memiliki pemahaman dasar tentang HTML dan CSS. Dalam panduan ini, Anda akan diajarkan langkah-langkah detail untuk membuat website sekolah sederhana menggunakan HTML dan CSS. Berikut ini Langkah-langkah dari haikalweb yang mudah dipahami, cocok untuk pemula yang ingin belajar membuat website.

Alat yang Wajib Anda Siapkan

Sebelum membahas cara membuat web sekolah dengan html dan css selengkapnya, perlu diketahui jika Anda harus mempersiapkan alat yang wajib ada dan digunakan untuk membuat web sekolah. Berikut ini alat yang Wajib Anda siapkan:

  1. Perangkat Laptop,
  2. Software Text Editor code (Visual studio code, sublime text, dan lain sebagainya),
  3. Browser (Disarankan menggunakan chrome),
  4. Niat.

Cara Membuat Web Sekolah dengan HTML dan CSS

1. Buat Folder Project Web Sekolah

Langkah pertama yang perlu Anda lakukan adalah membuat folder khusus untuk proyek website sekolah Anda. Ini akan membantu Anda mengatur semua file yang akan Anda buat.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah sebuah subfolder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda nanti. Sebagai contoh asset download gambar disini.

3. Buat Sebuah File web_sekolah.html

Sekarang, buka teks editor favorit Anda dan buatlah sebuah file baru dengan nama “web_sekolah.html“. Ini akan menjadi file utama yang akan berisi struktur dasar dari website sekolah Anda.

Berikut ini adalah struktur dasar HTML yang dapat Anda gunakan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Sekolah</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <img src="img/logo.png" alt="Logo Sekolah">
            <h1>Selamat Datang di Website Sekolah</h1>
            <nav>
                <ul>
                    <li><a href="#">Beranda</a></li>
                    <li><a href="#">Tentang Kami</a></li>
                    <li><a href="#">Program Studi</a></li>
                    <li><a href="#">Kontak</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div class="container">
            <section>
                <img src="img/about.jpg" alt="Tentang Kami">
                <h2>Tentang Kami</h2>
                <p>Deskripsi singkat tentang sekolah Anda.</p>
            </section>

            <section>
                <img src="img/programs.jpg" alt="Program Studi">
                <h2>Program Studi</h2>
                <ul>
                    <li>Program Studi 1</li>
                    <li>Program Studi 2</li>
                    <li>Program Studi 3</li>
                </ul>
            </section>
        </div>
    </main>

    <footer>
        <div class="container">
            <img src="img/footer-logo.png" alt="Logo Footer">
            <p>Hak Cipta © 2024 Website Sekolah. Dibuat dengan <a href="https://www.html.com">HTML</a> dan <a href="https://www.css.com">CSS</a>.</p>
        </div>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah sebuah file dengan nama “style.css” di dalam folder proyek Anda. File ini akan berisi semua gaya dan desain untuk website sekolah Anda.

Artikel Terkait:  Cara Membuat Form Biodata dengan HTML dan CSS

Berikut ini struktur kode css yang dapat Anda gunakan:

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

.container {
    width: 80%;
    margin: 0 auto;
}

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

header img {
    width: 100px; /* Sesuaikan ukuran dengan kebutuhan */
    height: auto;
}

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

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

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

main {
    padding: 20px 0;
}

section {
    margin-bottom: 20px;
    text-align: center;
}

section img {
    max-width: 100%; /* Untuk membuat gambar responsive */
    height: auto;
}

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

footer img {
    width: 100px; /* Sesuaikan ukuran dengan kebutuhan */
    height: auto;
}

footer a {
    color: #fff;
}
 

5. Mengubah Tampilan Website Sekolah

Sekarang, saatnya untuk menambahkan konten ke dalam file “web_sekolah.html” dan mendesainnya menggunakan CSS. Anda dapat menambahkan elemen-elemen seperti header, menu navigasi, konten utama, dan footer.

Berikut contoh sederhana struktur HTML yang bisa Anda gunakan:

<header>
    <h1>Selamat Datang di Website Sekolah</h1>
    <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang Kami</a></li>
            <li><a href="#">Program Studi</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>Tentang Kami</h2>
        <p>Deskripsi singkat tentang sekolah Anda.</p>
    </section>

    <section>
        <h2>Program Studi</h2>
        <ul>
            <li>Program Studi 1</li>
            <li>Program Studi 2</li>
            <li>Program Studi 3</li>
        </ul>
    </section>
</main>

<footer>
    <p>Hak Cipta © 2024 Website Sekolah. Dibuat dengan <a href="https://www.html.com">HTML</a> dan <a href="https://www.css.com">CSS</a>.</p>
</footer>
 

6. Save & View Tampilan

Terakhir, pastikan Anda menyimpan semua perubahan yang telah Anda buat, lalu buka file “web_sekolah.html” di web browser untuk melihat tampilan website sekolah Anda. Periksa apakah semuanya berjalan dengan baik dan sesuai dengan yang Anda harapkan.

Artikel Terkait:  Cara Membuat Website Pariwisata dengan HTML dan CSS

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat sebuah website sekolah sederhana menggunakan HTML dan CSS. Selamat mencoba!

Related posts: