Cara Membuat Homepage HTML

Cara Membuat Homepage HTML – Bagi yang ingin mempelajari cara membuat website, tak perlu bingung lagi! Kita bisa memulainya dari dasar dengan HTML dan CSS. Dua bahasa pemrograman ini menjadi pondasi utama dalam mengembangkan sebuah website. Jadi, mari kita mulai dan terus simak ulasan dibawah ini!

Apa Itu Homepage Pada Website?

Homepage adalah halaman pertama atau halaman utama dari sebuah situs web. Ketika pengunjung membuka domain atau URL situs web, mereka akan diarahkan ke halaman ini. Homepage berperan sebagai wajah situs web yang memberikan gambaran umum tentang apa yang ada di dalamnya.

Homepage memiliki tujuan untuk memberikan pengantar yang jelas kepada pengunjung serta membantu mereka menjelajahi lebih lanjut ke bagian-bagian lain dari situs web. Sebuah desain homepage yang baik akan menarik perhatian, memberikan informasi yang diperlukan, dan mengarahkan pengunjung untuk mengambil tindakan tertentu.

Sekarang langsung saja, mari kita pelajari cara membuat homepage web sederhana menggunakan HTML dan CSS yang sudah TeknoTask ringkas dibawah ini.

Cara Membuat Homepage Web Sederhana Menggunakan HTML dan CSS

1. Persiapkan Struktur Folder

Buka manajer file dan buat folder baru untuk proyek homepage, misalnya beri nama folder “Homepage”. Di dalamnya isi dengan folder gambar dan didalamnya terdapat beberapa gambar konten web, contoh struktur foldernya sebagai berikut:

Homepage

Gambar
– gambar1.jpeg
– gambar2. webp
– gambar3.jpg
index.html
style.css

2. Buat File HTML Utama (index.html)

Buka editor teks seperti Sublime Text dan buat file baru dengan nama “index.html” dalam folder proyek, jika sudah isilah file tersebut dengan kerangka dasar HTML dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Homepage TeknoTask Web</title>
</head>
<body>
    <header>
        <h1>Selamat Datang di Website TeknoTask</h1>
        <p>Temukan dunia kreativitas!</p>
    </header>
    <nav>
        <ul>
            <li><a href="https://teknotask.com/">Beranda</a></li>
            <li><a href="https://teknotask.com/">Tentang</a></li>
            <li><a href="https://teknotask.com/">Layanan</a></li>
            <li><a href="https://teknotask.com/">Kontak</a></li>
        </ul>
    </nav>
    <section id="hero">
        <h2>Temukan Kreasi Menakjubkan</h2>
        <p>Temukan inspirasi, lepaskan kreativitasmu, dan wujudkan ide-ide mu.</p>
        <a href="https://teknotask.com/" class="btn">Mulai</a>
    </section>
    <section id="features">
        <h2>Fitur Kami</h2>
        <div class="feature" id="left-feature">
            <img src="Produk/produk1.webp" alt="Gambar Fitur 1" class="feature-img">
            <h3>Fitur 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="feature" id="center-feature">
            <img src="Produk/produk2.webp" alt="Gambar Fitur 2" class="feature-img">
            <h3>Fitur 2</h3>
            <p>Nulla facilisi. Etiam et porttitor justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </div>
        <div class="feature" id="right-feature">
            <img src="Produk/produk3.webp" alt="Gambar Fitur 3" class="feature-img">
            <h3>Fitur 3</h3>
            <p>Proin eu erat nec tellus ultricies accumsan.</p>
        </div>
    </section>
    <footer>
        <p>© 2024 Homepage. Hak cipta dilindungi.</p>
    </footer>
</body>
</html>

3. Buat File CSS (style.css)

Selanjutnya, buatlah file CSS dengan nama “style.css” di dalam folder proyek, jika sudah isilah file tersebut dengan kode CSS web dibawah ini.

<style type="text/css">
 body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: seagreen;
    color: #fff;
    text-align: center;
    padding: 50px 0;
}

nav {
    background-color: greenyellow;
    padding: 20px 0;
    text-align: center;
}

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

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

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

nav ul li a:hover {
    color: #000;
}

#hero {
    background-image: url('https://scenelab.io/static/1824093e5c847dd45aa13bed243d5b95/96311/hero_image_main_thumbnail.jpg'); /* Ganti 'background.jpg' dengan nama berkas gambar Anda */
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

#hero h2 {
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    background-color: red;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

#features {
    padding: 50px 0;
    text-align: center;
}

.feature {
    margin-bottom: 30px;
    text-align: center; /* Pusatkan teks */
}

.feature-img {
    width: 200px; /* Atur ukuran gambar */
    height: 200px; /* Atur ukuran gambar */
    margin-bottom: 10px; /* Berikan sedikit margin bawah */
}

#left-feature,
#right-feature {
    width: 30%; /* Atur lebar fitur kiri dan kanan */
    display: inline-block;
}

#center-feature {
    width: 30%; /* Atur lebar fitur tengah */
    display: inline-block;
    margin: 0 auto; /* Pusatkan fitur tengah */
}

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

</style>

4. Tambahkan Konten (index.html)

Jika dirasa perlu, kamu bisa menambahkan konten sesuai kebutuhan dengan menambahkan kode di file index.html.

5. Jalankan Kode

Simpan semua perubahan yang telah dilakukan pada kedua file diatas, lalu buka file “index.html” menggunakan browser default untuk melihat hasil desain web homepage yang sudah dibuat.

6. Tampilkan Homepage

Selamat! Kamu telah berhasil membuat homepage sederhana dengan HTML dan CSS menggunakan Sublime Text.

Kesimpulan

Baiklah Sobat Tekno, demikian cara membuat homepage dengan HTML dan CSS. Semoga panduan ini membantu Sobat dalam memulai belajar dalam dunia web development. Teruslah belajar dan jangan ragu untuk mencoba konsep desain website yang lebih menarik lagi.