Cara Membuat Website Sederhana Menggunakan HTML dan CSS

Cara Membuat Website Sederhana Menggunakan HTML dan CSS – Membuat website sederhana bukanlah tugas yang sulit, terutama bagi pemula yang ingin mempelajari dasar-dasar pemrograman web. Dalam dunia digital yang terus berkembang, memiliki pemahaman dasar tentang HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets) adalah keterampilan yang sangat berharga. Dengan menguasai kedua bahasa pemrograman ini, Anda dapat menciptakan halaman web yang menarik dan fungsional.

Dalam panduan ini, riztekno akan membahas langkah-langkahnya dengan detail untuk mempermudah pemula dalam memahaminya. Mulai dari pembuatan folder proyek hingga penyusunan kode HTML dan CSS, setiap langkah akan dijelaskan secara terperinci. Bahkan jika Anda belum memiliki pengalaman sebelumnya dalam membuat website, Anda akan dapat mengikuti panduan ini dengan mudah.

Jadi, siapkanlah diri Anda untuk memulai perjalanan dalam dunia pembuatan website sederhana yang menarik! Mari kita mulai dengan langkah pertama:

Alat yang Harus Anda Siapkan

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

  • Laptop,
  • Sublime Text (Aplikasi Text Editor code),
  • Chrome (Web Browser),
  • Niat yang kuat.

Cara Membuat Website Sederhana Menggunakan HTML dan CSS

1. Buat Folder Project Website Sederhana

Langkah pertama adalah membuat folder untuk proyek website Anda. Dalam folder ini, Anda akan menyimpan semua file yang terkait dengan pembuatan website sederhana Anda.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder bernama “img“. Folder ini akan digunakan untuk menyimpan gambar-gambar yang akan Anda gunakan dalam website Anda nantinya.  Download gambar disini untuk dapat di implementasikan pada project website sederhana menggunakan html dan css

3. Buat Sebuah File HTML

Berikutnya, buatlah sebuah file HTML baru di dalam folder proyek Anda. Anda dapat menamainya sesuai keinginan, misalnya “website_sederhana.html“. File HTML inilah yang akan menjadi kerangka utama dari website Anda.

Berikut ini file html yang harus Anda buat dan tambahkan untuk dapat membuat website sederhana menggunakan 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 Saya</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Website Saya</h1>
    </header>
    <main>
        <section class="gambar-section">
            <h2>Halo selamat datang di website Saya</h2>
            <p>Di sini Anda dapat menemukan beberapa gambar keren untuk dinikmati.</p>
            <div class="gambar-container">
                <div class="gambar-frame">
                    <img src="img/gambar1.jpg" alt="Gambar 1">
                </div>
                <div class="gambar-frame">
                    <img src="img/gambar2.jpg" alt="Gambar 2">
                </div>
                <div class="gambar-frame">
                    <img src="img/gambar3.jpg" alt="Gambar 3">
                </div>
            </div>
        </section>
    </main>
    <footer>
        <p>Hak Cipta &copy; 2024 - Website Saya</p>
    </footer>
</body>
</html>
 

4. Buat File CSS

Selanjutnya, buatlah file CSS baru di dalam folder proyek Anda. Nama file bisa Anda sesuaikan, misalnya “style.css“. File CSS ini akan digunakan untuk mendesain tampilan website Anda.

Artikel Terkait:   Cara Membuat Website Lembaga dengan HTML dan CSS

Berikut ini file css yang harus Anda tambahkan untuk dapat membuat website sederhana menggunakan html dan css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

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

main {
    padding: 20px;
}

.gambar-section {
    margin-bottom: 30px;
}

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

.gambar-section p {
    text-align: center;
    margin-bottom: 30px;
}

.gambar-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.gambar-frame {
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.gambar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

5. Mengubah Tampilan Website Sederhana

Sekarang, kita akan mengubah tampilan website sederhana menggunakan HTML dan CSS yang telah kita buat. Anda dapat menambahkan konten sesuai dengan keinginan Anda. Berikut contoh sederhana:

<!-- website_sderhana.html -->

<header>
    <h1>Website Sederhana</h1>
</header>

<div class="container">
    <h2>Selamat Datang!</h2>
    <p>Ini adalah contoh website sederhana yang dibuat menggunakan HTML dan CSS.</p>
    <img src="img/sample-image.jpg" alt="Contoh Gambar">
</div>
 

6. Simpan & Lihat Tampilan

Setelah menambahkan konten pada file HTML, pastikan untuk menyimpan perubahan yang telah Anda buat. Kemudian, buka file HTML tersebut menggunakan browser untuk melihat tampilan website sederhana yang telah Anda buat.

Preview hasil

Berikut ini hasil preview yang akan ditampilkan jika Anda berhasil membuat website sederhana menggunakan html dan css:

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

Penutup

Dengan menyelesaikan panduan ini, Anda telah mempelajari dasar-dasar dalam pembuatan website sederhana menggunakan HTML dan CSS. Namun, ini hanya awal dari perjalanan Anda dalam dunia pengembangan web. Teruslah eksplorasi dan praktikkan apa yang telah Anda pelajari.

Ingatlah bahwa pembelajaran adalah proses yang berkelanjutan. Selalu cari tahu tentang teknologi dan tren terbaru dalam pengembangan web, serta jangan ragu untuk mencoba hal-hal baru. Terlibatlah dalam komunitas pengembang web, ikuti tutorial, dan berbagi pengetahuan Anda dengan orang lain.

Dengan ketekunan dan dedikasi, Anda akan semakin mahir dalam membuat website yang lebih kompleks dan menarik. Semoga panduan ini telah memberikan dasar yang kuat bagi Anda untuk melangkah lebih jauh dalam dunia pemrograman web.

Selamat mencoba dan jangan ragu untuk mengeksplorasi lebih lanjut! Sukses selalu dalam perjalanan Anda sebagai seorang pengembang web.