Cara Membuat Website Keren dengan HTML dan CSS

By Posted on

Cara Membuat Website Keren dengan HTML dan CSS – Dalam era digital ini, memiliki kemampuan untuk membuat website merupakan hal yang sangat berharga. Apakah Anda seorang pemula yang ingin belajar bagaimana membuat website yang keren dengan menggunakan HTML dan CSS? Jika ya, Anda berada di tempat yang tepat! Dalam panduan ini, haikalweb akan melangkah melalui langkah-langkah detail untuk membuat sebuah website yang menarik menggunakan HTML dan CSS.

Alat yang Harus di Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat website keren dengan HTML dan CSS:

  • Laptop,
  • Text Editor Code (Visual Studio Code, Sublime Text, Notepad++) cukup pilih gunakan salah satu,
  • Web Browser,
  • Niat yang kuat

Cara Membuat Website Keren dengan HTML dan CSS

1. Buat Folder Project Website Keren

Langkah pertama adalah membuat folder khusus untuk menyimpan semua file yang terkait dengan proyek website Anda. Beri nama folder tersebut sesuai dengan keinginan Anda, misalnya “WebsiteKeren“.

2. Buat Folder Img

Dalam folder proyek Anda, buatlah sub-folder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di dalam website Anda. Download contoh gambar disini untuk pembuatan website.

3. Buat Sebuah File website_keren.html

Buka teks editor favorit Anda, seperti Notepad atau Visual Studio Code, lalu buatlah file baru dengan nama “website_keren.html“. File ini akan menjadi halaman utama dari website Anda.

Berikut ini source code HTML yang dapat Anda gunakan untuk membuat website keren:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Keren</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <img src="img/logo1.jpg" alt="Website Keren Logo">
            <h1>Selamat Datang di Website Keren!</h1>
            <p>Temukan inspirasi, kreativitas, dan informasi terbaru di sini.</p>
        </div>
    </header>
    <nav>
        <div class="container">
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Tentang</a></li>
                <li><a href="#">Layanan</a></li>
                <li><a href="#">Portofolio</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </div>
    </nav>
    <main>
        <div class="container">
            <section>
                <h2>Tentang Kami</h2>
                <img src="img/about1.jpg" alt="Tentang Kami">
                <p>Website Keren adalah tempat untuk Anda menemukan berbagai inspirasi terbaru dalam dunia desain web. Kami memiliki tim yang berpengalaman dan berdedikasi untuk membawa Anda informasi terkini seputar tren desain, tutorial, dan tips bermanfaat untuk memperindah website Anda.</p>
            </section>
            <section>
                <h2>Layanan Kami</h2>
                <img src="img/services.jpg" alt="Layanan Kami">
                <ul>
                    <li>Desain Web Kustom</li>
                    <li>Pembuatan Logo</li>
                    <li>Optimisasi SEO</li>
                    <li>Analisis Kinerja Website</li>
                </ul>
            </section>
        </div>
    </main>
    <footer>
        <div class="container">
            <p>Hak Cipta © 2024 Website Keren. Dibuat dengan Cinta.</p>
        </div>
    </footer>
</body>
</html>
 

4. Buat File style.css

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

Artikel Terkait:  Cara Membuat Web Berita dengan HTML dan CSS

Berikut ini source code CSS yang dapat Anda implmentasikan untuk membuat website keren:

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

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

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

header img {
    max-width: 200px;
    margin-bottom: 20px;
}

header p {
    font-size: 18px;
    margin-top: 10px;
}

/* Styling Navigation */
nav {
    background-color: #444;
    color: #fff;
    text-align: center;
}

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

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

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

/* Styling Main Content */
main {
    padding: 50px 0;
    background-color: #f4f4f4;
}

main .container {
    max-width: 800px;
    margin: 0 auto;
}

section {
    margin-bottom: 40px;
}

section h2 {
    color: #333;
    margin-bottom: 20px;
}

section img {
    max-width: 100%;
    margin-bottom: 20px;
}

section p {
    font-size: 16px;
    line-height: 1.6;
}

section ul {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.6;
}

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

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

5. Mengubah Tampilan Website

Sekarang, Anda dapat mulai mengubah tampilan website Anda sesuai dengan keinginan Anda. Anda dapat menambahkan elemen-elemen HTML dan mengatur gaya mereka menggunakan CSS.

6. Save & View Tampilan

Setelah Anda puas dengan perubahan yang Anda buat, pastikan untuk menyimpan semua file Anda. Kemudian, buka file “website_keren.html” dalam browser web Anda untuk melihat tampilan akhir dari website Anda.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat sebuah website yang keren menggunakan HTML dan CSS! Teruslah eksplorasi dan latih kemampuan Anda untuk membuat website yang semakin menarik dan fungsional. Selamat mencoba!

Related posts: