Cara Membuat Website Yayasan dengan HTML dan CSS

Cara Membuat Website Yayasan dengan HTML dan CSS – Cara Membuat Website Yayasan dengan HTML dan CSS – Membuat sebuah website untuk yayasan adalah langkah yang penting dalam memperluas jangkauan dan meningkatkan kesadaran masyarakat tentang tujuan dan kegiatan yayasan tersebut. Dalam era digital saat ini, memiliki sebuah website bukan lagi menjadi pilihan, melainkan suatu kebutuhan. Namun, banyak orang mungkin merasa terintimidasi dengan proses pembuatan website, terutama jika mereka belum memiliki pengalaman dalam pemrograman web.

Dalam panduan ini, riztekno akan membantu Anda memahami langkah-langkah dasar untuk membuat website yayasan menggunakan HTML dan CSS. Anda tidak perlu menjadi seorang ahli dalam pemrograman untuk mengikuti panduan ini. Kami akan memberikan instruksi langkah demi langkah yang mudah dipahami oleh pemula sekalipun.

Mulai dari membuat folder proyek hingga menambahkan desain yang menarik dengan CSS, panduan ini akan memandu Anda melalui setiap langkah dengan jelas dan rinci. Dengan mengikuti panduan ini, Anda akan dapat membuat sebuah website yang profesional dan informatif untuk yayasan Anda tanpa harus bergantung pada platform pembuat website yang mungkin membatasi kreativitas dan fungsionalitas Anda.

Jadi, mari kita mulai dengan langkah pertama: membuat folder proyek untuk website yayasan Anda.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda Siapkan untuk membuat website yayasan dengan html dan css:

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

Cara Membuat Website Yayasan dengan HTML dan CSS

1. Buat Folder Project Website Yayasan

Langkah pertama adalah membuat folder untuk proyek website yayasan Anda. Ini akan membantu Anda menjaga semua file terorganisir dengan baik.

2. Buat Folder Img

Di dalam folder proyek, buatlah folder terpisah bernama “img” untuk menyimpan semua gambar yang akan Anda gunakan di website yayasan Anda. Download gambar disini untuk di implementasikan ke dalam project website yayasan.

3. Buat Sebuah File website_yayasan.html

Sekarang, mari kita mulai membuat file HTML utama untuk website yayasan. Anda dapat menggunakan editor teks favorit Anda, seperti Notepad atau Visual Studio Code. Ketik kode HTML dasar untuk struktur dasar halaman web:

<!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>Yayasan Website</title>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <img src="img/logo.png" alt="Yayasan Logo">
            </div>
            <h1>Judul Website</h1>
            <nav>
                <ul>
                    <li><a href="https://riztekno.com/">Home</a></li>
                    <li><a href="https://riztekno.com/">About</a></li>
                    <li><a href="https://riztekno.com/">Gallery</a></li>
                    <li><a href="https://riztekno.com/">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="landing-page">
        <div class="container">
            <img src="img/landing_image.jpg" alt="Landing Image">
            <p>Kalimat penjelasan mengenai yayasan.</p>
            <button>Learn More</button>
        </div>
    </div>

    <section class="gallery">
        <h2>Galeri</h2>
        <div class="container">
            <div class="gallery-item">
                <img src="img/gambar1.jpg" alt="Gallery Image 1">
                <p>Keterangan untuk gambar 1</p>
            </div>
            <div class="gallery-item">
                <img src="img/gambar2.jpg" alt="Gallery Image 2">
                <p>Keterangan untuk gambar 2</p>
            </div>
            <div class="gallery-item">
                <img src="img/gambar3.jpg" alt="Gallery Image 3">
                <p>Keterangan untuk gambar 3</p>
            </div>
        </div>
    </section>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, mari kita tambahkan file CSS untuk merancang tampilan website. Selanjutnya buat file baru bernama “style.css” dalam folder proyek Anda. Berikut adalah contoh kode CSS untuk gaya dasar:

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    border-bottom: 4px solid #ff7f50;
}

.logo img {
    height: 50px;
    width: auto;
}

h1 {
    margin: 0;
    font-size: 24px;
}

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

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

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

.landing-page {
    background-color: #f9f9f9;
    padding: 50px 0;
    text-align: center;
}

.landing-page img {
    max-width: 80%;
}

.gallery {
    text-align: center;
    padding: 50px 0;
}

.gallery h2 {
    margin-bottom: 30px;
}

.gallery-item {
    display: inline-block;
    margin: 0 10px;
}

.gallery-item img {
    max-width: 50%;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.gallery-item p {
    margin-top: 10px;
}

button {
    background-color: #ff7f50;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #ff6347;
}

.gallery-item p {
    font-style: italic;
    color: #666;
}
 

5. Mengubah Tampilan Website Yayasan

Anda dapat mengubah tampilan website yayasan dengan menyesuaikan file HTML dan CSS sesuai kebutuhan Anda. Tambahkan konten seperti gambar, teks, dan link sesuai dengan misi dan tujuan yayasan Anda.

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

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Buka file “website_yayasan.html” di browser web Anda untuk melihat tampilan website yayasan Anda.

Preview hasil

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

Penutup

Membuat sebuah website yayasan dengan HTML dan CSS dapat menjadi langkah awal yang sangat bermanfaat dalam memperluas jangkauan dan meningkatkan pengaruh yayasan Anda di dunia digital. Dengan mengikuti panduan ini, Anda telah belajar cara membuat struktur dasar website menggunakan HTML, serta bagaimana memberikan tampilan yang menarik dan profesional dengan CSS.

Ingatlah bahwa pembelajaran tidak berhenti di sini. Dunia web terus berkembang, dan ada banyak sumber daya dan tutorial yang dapat membantu Anda mengembangkan keterampilan Anda lebih lanjut. Teruslah eksplorasi, berlatih, dan jangan ragu untuk mencoba hal-hal baru dalam perjalanan Anda menuju keahlian dalam pembuatan website.

Dengan memiliki sebuah website yang informatif, menarik, dan mudah diakses, Anda dapat memperluas jangkauan yayasan Anda, menarik lebih banyak perhatian dan dukungan dari masyarakat, serta meningkatkan dampak positif yang dapat Anda berikan kepada mereka yang membutuhkan.

Sekali lagi, terima kasih telah mengikuti panduan ini. Semoga website yayasan yang Anda buat dapat menjadi sarana yang efektif dalam mencapai tujuan dan visi yayasan Anda. Jika Anda memiliki pertanyaan lebih lanjut atau ingin berbagi pengalaman Anda, jangan ragu untuk menghubungi kami melalui kolom komentas. Sukses selalu untuk Anda dalam perjalanan membangun dunia yang lebih baik melalui yayasan Anda!