Cara Membuat Halaman Utama Website dengan HTML dan CSS

Cara Membuat Halaman Utama Website dengan HTML dan CSS – Apakah Anda ingin memulai perjalanan Anda dalam dunia pengembangan web? Mungkin Anda ingin belajar bagaimana membuat halaman utama untuk website Anda sendiri? Jika Anda adalah seorang pemula yang mencari langkah-langkah yang jelas dan mudah dipahami, Anda telah sampai pada artikel yang tepat!

Dalam dunia digital yang terus berkembang, memiliki pengetahuan tentang HTML dan CSS adalah keterampilan yang sangat berharga. HTML (Hypertext Markup Language) digunakan untuk membuat struktur dasar halaman web, sementara CSS (Cascading Style Sheets) digunakan untuk mempercantik tampilannya. Meskipun terdengar menakutkan bagi sebagian orang, pembuatan halaman web sebenarnya bisa menjadi proses yang menyenangkan dan bermanfaat.

Dalam artikel ini, riztekno akan memandu Anda melalui langkah-langkah detail untuk membuat halaman utama website menggunakan HTML dan CSS. Kami akan mulai dari dasar-dasarnya, sehingga bahkan jika Anda tidak memiliki pengalaman sebelumnya dalam pengembangan web, Anda akan dapat mengikuti dengan mudah.

Mari kita mulai dengan membuat folder proyek dan menyusun fondasi halaman utama Anda. Siapkan diri Anda untuk menjelajahi dunia pengembangan web dengan percaya diri!

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang Harus Anda siapkan untuk dapat membuat halaman utama website dengan html dan css:

  • Perangkat laptop,
  • Google chrome (Web browser),
  • Sublime text (Text Editor code),
  • Niat yang kuat.

Cara Membuat Halaman Utama Website dengan HTML dan CSS

1. Buat Folder Project Halaman Utama

Langkah pertama yang perlu Anda lakukan adalah membuat sebuah folder untuk proyek halaman utama Anda. Ini akan membantu Anda untuk menjaga semua file terorganisir dengan baik.

2. Buat Folder Img

Setelah membuat folder proyek, buatlah folder baru di dalamnya dan namai sebagai “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di halaman utama Anda. Download gambar disini untuk dapat diterapkan dalam project halaman utama website.

3. Buat Sebuah File halaman_utama.html

Sekarang, mari kita mulai membuat halaman utama HTML. Buka editor teks favorit Anda dan buat file baru dengan nama “halaman_utama.html“. Anda dapat menggunakan tag HTML dasar untuk memulai halaman web Anda. Berikut file HTML yang dapat Anda tambahkan untuk membuat halaman utama website:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Utama Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Website Saya</h1>
            <nav>
                <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/">Layanan</a></li>
                    <li><a href="https://riztekno.com/">Kontak</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section class="hero">
        <div class="container">
            <h2>Selamat Datang di Website Kami</h2>
            <p>Temukan informasi terkini dan layanan berkualitas di sini.</p>
            <a href="https://riztekno.com/" class="btn">Pelajari Lebih Lanjut</a>
        </div>
    </section>
    <section class="features">
        <div class="container grid">
            <div class="feature">
                <img src="img/gambar1.jpg" alt="Fitur 1">
                <h3>Fitur 1</h3>
                <p>Deskripsi singkat tentang fitur 1.</p>
            </div>
            <div class="feature">
                <img src="img/gambar2.jpg" alt="Fitur 2">
                <h3>Fitur 2</h3>
                <p>Deskripsi singkat tentang fitur 2.</p>
            </div>
            <div class="feature">
                <img src="img/gambar3.jpg" alt="Fitur 3">
                <h3>Fitur 3</h3>
                <p>Deskripsi singkat tentang fitur 3.</p>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <p>Hak Cipta &copy; 2024 Website Saya. All rights reserved.</p>
        </div>
    </footer>
    <div class="shapes">
        <div class="circle"></div>
        <div class="triangle"></div>
    </div>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS baru dengan nama “style.css” di dalam folder proyek Anda. File ini akan digunakan untuk menambahkan gaya dan tata letak pada halaman utama Anda.

Artikel Terkait:   Cara Membuat Website Kelurahan dengan HTML dan CSS

Berikut ini file css yang dapat Anda tambahkan untuk dapat membuat halaman utama website:

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

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    position: relative;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

/* Header Styles */
header {
    background: #333;
    color: #fff;
    padding-top: 20px;
    min-height: 70px;
}

header h1 {
    float: left;
}

nav ul {
    float: right;
    list-style-type: none;
}

nav ul li {
    display: inline;
    padding: 0 20px;
}

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

/* Hero Section Styles */
.hero {
    background: #f4f4f4;
    padding: 50px 0;
    text-align: center;
    position: relative;
}

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

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

.btn:hover {
    background: #555;
}

/* Features Section Styles */
.features {
    padding: 50px 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-content: center;
}

.feature {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.feature img {
    max-width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
}

.feature h3 {
    margin-bottom: 10px;
}

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

/* Shapes */
.shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
}

.triangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 260px solid rgba(255, 255, 255, 0.1);
}
 

5. Mengubah Tampilan Halaman Utama

Sekarang, mari kita tambahkan beberapa elemen ke halaman utama kita. Anda dapat menggunakan tag HTML untuk menambahkan judul, teks, gambar, dan lainnya. Pastikan untuk menggunakan kelas dan ID CSS untuk mempermudah styling. Berikut contoh sederhana:

<div class="container">
    <header>
        <h1>Selamat Datang di Website Kami</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang Kami</a></li>
            <li><a href="#">Layanan</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>
    <section>
        <h2>Tentang Kami</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
    </section>
    <footer>
        <p>Hak Cipta &copy; 2024. Hak Cipta Dilindungi.</p>
    </footer>
</div>
 

6. Save & View Tampilan

Setelah menambahkan konten ke halaman utama Anda, simpan semua perubahan yang telah Anda buat. Kemudian, buka file “halaman_utama.html” menggunakan browser web untuk melihat tampilan halaman utama Anda. Pastikan untuk membuka file “halaman_utama.html” langsung dari folder proyek Anda agar semua tautan dan gambar dapat dimuat dengan benar.

Artikel Terkait:   Cara Membuat Website Pariwisata dengan HTML dan CSS

Preview hasil

Berikut ini preview hasil yang tampil nantinya jika Anda berhasil memuat halaman utama website dengan html dan css:

Penutup

Apakah Anda merasa lebih percaya diri sekarang setelah mempelajari langkah-langkah dasar untuk membuat halaman utama website menggunakan HTML dan CSS? Saya harap Anda menemukan tutorial ini bermanfaat dan menginspirasi untuk terus belajar dalam dunia pengembangan web.

Ingatlah bahwa keterampilan ini adalah investasi yang berharga. Dengan terus berlatih dan bereksperimen, Anda akan semakin mahir dalam mengembangkan halaman web yang menarik dan fungsional.

Tetapi jangan berhenti di sini! Dunia pengembangan web terus berkembang, dan ada begitu banyak hal baru yang dapat Anda pelajari. Cobalah untuk mengeksplorasi konsep-konsep lanjutan seperti responsif design, animasi CSS, dan kerangka kerja (framework) web seperti Bootstrap atau Tailwind CSS.

Dan ingatlah, salah satu cara terbaik untuk belajar adalah dengan praktek. Jangan ragu untuk mencoba-coba dan membuat proyek-proyek kecil untuk menguji pengetahuan baru Anda.

Terima kasih telah mengikuti panduan ini. Semoga Anda menikmati perjalanan Anda dalam dunia pengembangan web!