Cara Membuat Website Edukasi dengan HTML dan CS

Cara Membuat Website Edukasi dengan HTML dan CSS – Dalam dunia digital yang terus berkembang, keterampilan membuat website menjadi semakin penting. Salah satu cara paling efektif untuk berbagi pengetahuan dan informasi adalah melalui website edukasi. Dalam artikel ini, riztekno akan memberikan panduan langkah demi langkah tentang bagaimana Anda, bahkan sebagai pemula sekalipun, dapat membuat website edukasi menggunakan HTML dan CSS. Dengan mengikuti langkah-langkah ini, Anda akan memiliki landasan kuat untuk memulai perjalanan Anda dalam membangun sebuah website yang informatif dan menarik. Mari kita mulai dengan membahas langkah-langkahnya secara rinci.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda Siapkan untuk membuat Website edukasi dengan html dan css:

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

Cara Membuat Website Edukasi dengan HTML dan CSS

1. Buat Folder Project Website Edukasi

Langkah pertama yang perlu dilakukan adalah membuat sebuah folder khusus untuk menyimpan semua file terkait dengan proyek pembuatan website edukasi kita. Ini akan membantu dalam mengorganisir file dan memudahkan pengelolaan.

2. Buat Folder Img

Di dalam folder proyek tersebut, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar atau visual yang akan digunakan dalam website edukasi kita. Download gambar disini untuk diterapkan dalam proyek website edukasi.

3. Buat Sebuah File website_edukasi.html

Selanjutnya, buatlah sebuah file HTML baru dengan nama “website_edukasi.html“. File ini akan menjadi halaman utama dari website edukasi yang kita buat. Gunakan editor teks seperti Notepad++ atau Visual Studio Code untuk membuat dan mengedit file HTML.

Berikut ini file html yang dapat Anda tambahkan untuk membuat website edukasi 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">
    <title>Website Edukasi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Website Edukasi</h1>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Tentang</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Selamat Datang di Website Edukasi</h2>
            <p>Website ini didedikasikan untuk memberikan informasi edukatif kepada pengguna.</p>
            <img src="img/image.jpg" alt="Ilustrasi Edukasi" class="gambar-utama">
        </section>

        <section>
            <h2>Artikel Terbaru</h2>
            <article>
                <img src="img/article1.jpg" alt="Gambar Artikel 1">
                <h3>Judul Artikel 1</h3>
                <p>Deskripsi singkat artikel 1.</p>
                <a href="#">Baca Selengkapnya</a>
            </article>
            <article>
                <img src="img/article2.jpg" alt="Gambar Artikel 2">
                <h3>Judul Artikel 2</h3>
                <p>Deskripsi singkat artikel 2.</p>
                <a href="#">Baca Selengkapnya</a>
            </article>
        </section>

        <section>
            <h2>Video Edukasi</h2>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
        </section>
    </main>
    <footer>
        <p>Hak Cipta © 2024 Website Edukasi. All rights reserved.</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Setelah membuat file HTML, sekarang saatnya untuk membuat file CSS yang akan digunakan untuk mendesain tampilan website kita. Buatlah file baru dengan nama “style.css” di dalam folder proyek.

Artikel Terkait:   Cara Membuat Website Properti dengan HTML dan CSS

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

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

/* Body */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Header */
header {
    background-color: #333;
    color: #fff;
    padding: 20px;
}

header h1 {
    margin: 0;
}

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

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

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

/* Main Content */
main {
    padding: 20px;
}

section {
    margin-bottom: 40px;
}

h2 {
    margin-bottom: 10px;
}

article {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}

article img {
    max-width: 30%;
    height: auto;
    margin-bottom: 10px;
}

article h3 {
    margin-top: 0;
}

article p {
    margin-bottom: 10px;
}

/* Perkecil gambar pertama */
.gambar-utama {
    max-width: 100%;
    max-height: 500px;
}

/* Footer */
footer {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}
 

5. Mengubah Tampilan Website Edukasi

Sekarang, mari kita mulai mengubah tampilan website edukasi menggunakan CSS. Anda dapat menggunakan berbagai properti CSS seperti warna, font, ukuran, dan tata letak untuk membuat tampilan yang menarik dan mudah dipahami. Pastikan juga untuk memberikan judul, header, footer, dan konten yang relevan dalam file HTML.

6. Save & View Tampilan

Setelah selesai mengubah tampilan website dengan CSS, simpan semua perubahan yang telah dilakukan. Kemudian, buka file HTML di browser untuk melihat tampilan website edukasi yang telah dibuat. Pastikan untuk melakukan pengujian pada berbagai browser untuk memastikan kompatibilitas yang baik.

Preview hasil

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

Artikel Terkait:   Cara Membuat Website Hotel Menggunakan HTML dan CSS

Penutup

Jangan ragu untuk terus eksplorasi dan berkreasi dengan desain dan konten website Anda. Ingatlah bahwa pembelajaran adalah proses yang berkelanjutan, dan semakin Anda berlatih, semakin baik Anda akan menjadi dalam membuat website yang memukau. Jika Anda memiliki pertanyaan lebih lanjut atau ingin berbagi pengalaman Anda dalam membuat website edukasi, jangan ragu untuk berkomunikasi dengan komunitas online atau bergabung dengan forum-forum diskusi terkait. Selamat mencoba, dan semoga website edukasi Anda menjadi sumber pengetahuan yang berharga bagi banyak orang!