Cara Membuat Website Sederhana dengan HTML dan CSS

by

Cara Membuat Website Sederhana dengan HTML dan CSS – Membuat website sederhana dengan HTML dan CSS bisa menjadi langkah pertama yang menyenangkan dalam memahami dasar-dasar pengembangan web. Dalam panduan ini, Anda akan diajak melalui langkah-langkah detail untuk membuat sebuah website sederhana menggunakan HTML untuk struktur konten dan CSS untuk tata letak dan gaya.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat website sederhan dengan html dan css:

  • Perangkat laptop,
  • Sublime Text (Text Editor Code),
  • Web browser (Chrome),
  • Niat yang kuat.

Cara Membuat Website Sederhana dengan HTML dan CSS

1. Buat Folder Project Website Sederhana

Pertama-tama, buatlah sebuah folder di komputer Anda untuk menyimpan proyek website sederhana ini. Beri nama folder tersebut sesuai dengan keinginan Anda, misalnya “WebsiteSederhana“.

2. Buat Folder “img”

Di dalam folder proyek Anda, buatlah subfolder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan digunakan dalam website Anda nanti. Download gambar disini untuk dapat di implementasikan dalam project website sederhana.

3. Buat Sebuah File “website_sederhana.html”

Buka teks editor atau IDE (Integrated Development Environment) favorit Anda, lalu buatlah sebuah file baru dengan nama “website_sederhana.html”. Ini akan menjadi file utama yang akan menampilkan konten website Anda.

4. Buat File “style.css”

Selanjutnya, buatlah file CSS untuk mengatur tampilan dan gaya dari website Anda. Buatlah sebuah file baru dengan nama “style.css” di dalam folder proyek Anda.

5. Mengubah Tampilan Website Sederhana

Sekarang, mari kita mulai menulis kode HTML dan CSS untuk membuat tampilan website sederhana. Berikut langkah-langkah yang dapat Anda ikuti:

Artikel Terkait:   Cara Membuat Template Website Sederhana dengan HTML dan CSS
a. Struktur Dasar HTML

Buka file “website_sederhana.html” yang telah Anda buat. Tuliskan kode HTML berikut untuk membuat 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">
    <title>Website Sederhana</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <img src="img/logo.jpg" alt="Logo Website Sederhana">
            <h1>Selamat Datang di Website Sederhana!</h1>
        </div>
    
    </header>
    <nav>
        <div class="container">
            <ul>
                <li><a href="#https://riztekno.com/">Beranda</a></li>
                <li><a href="#https://riztekno.com/">Tentang</a></li>
                <li><a href="#https://riztekno.com/">Kontak</a></li>
            </ul>
        </div>
    </nav>
    <main>
        <div class="container">
            <section>
                <h2>Artikel Terbaru</h2>
                <div class="articles">
                    <article>
                        <h3>Judul Artikel Pertama</h3>
                        <img src="img/gambar1.jpg" alt="Deskripsi Gambar 1">
                        <p>Isi artikel pertama...</p>
                    </article>
                    <article>
                        <h3>Judul Artikel Kedua</h3>
                        <img src="img/gambar2.jpg" alt="Deskripsi Gambar 2">
                        <p>Isi artikel kedua...</p>
                    </article>
                </div>
            </section>
        </div>
    </main>
    <footer>
        <div class="container">
            <p>Hak Cipta &copy; 2024 Website Sederhana</p>
        </div>
    </footer>
</body>
</html>
 
b. Gaya dengan CSS

Buka file “style.css” dan tambahkan kode CSS berikut untuk mengubah tampilan website:

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

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

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

header .container {
    display: flex;
    align-items: center;
}

header img {
    width: 50px; /* Sesuaikan lebar logo sesuai kebutuhan Anda */
    margin-right: 20px; /* Sesuaikan jarak antara logo dan teks */
}

header h1 {
    margin: 0;
}


nav {
    background-color: #666;
}

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

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

nav ul li:last-child {
    margin-right: 0;
}

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

main {
    background-color: #f2f2f2;
    padding: 20px 0;
}

.articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

article {
    flex-basis: calc(50% - 20px);
    margin-bottom: 20px;
}

article h3 {
    margin-top: 0;
}

article img {
    display: block;
    margin-bottom: 10px;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

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

6. Simpan & Lihat Tampilan

Setelah Anda selesai menulis kode HTML dan CSS, simpan kedua file tersebut. Buka file “website_sederhana.html” menggunakan browser web untuk melihat tampilan website sederhana yang telah Anda buat.

Artikel Terkait:   Cara Membuat Website Keren dengan HTML dan CSS

Preview Tampilan

Berikut ini hasil website jika Anda berhasil membuat website sederhana dengan html dan css:

Penutup

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat sebuah website sederhana menggunakan HTML dan CSS. Selamat mencoba dan selamat berkarya dalam mengembangkan website Anda!

Related posts: