Cara Membuat Web Perusahaan Online dengan HTML dan CSS

Cara Membuat Web Perusahaan Online dengan HTML dan CSS – Dalam dunia digital saat ini, memiliki kehadiran online menjadi suatu keharusan bagi perusahaan yang ingin bertahan dan berkembang. Salah satu cara untuk memulai kehadiran online adalah dengan membuat sebuah website perusahaan. Dalam artikel ini, haikalweb akan membahas langkah-langkah detail tentang bagaimana cara membuat web perusahaan online menggunakan HTML dan CSS, yang mudah dipahami bahkan bagi pemula sekalipun.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat web perusahaan online dengan html dan css:

Perangkat Laptop,
Web browser (Disanrankan menggunakan chrome),
Text editor code (Sublime Text),
Niat yang kuat.

Cara Membuat Web Perusahaan Online dengan HTML dan CSS

1. Membuat Folder Project Web Perusahaan Online

Langkah pertama yang perlu dilakukan adalah membuat sebuah folder untuk menyimpan semua file terkait proyek web perusahaan online Anda. Anda dapat memberi nama folder tersebut sesuai dengan keinginan Anda, misalnya “WebPerusahaanOnline“.

2. Membuat Folder Img

Selanjutnya, di dalam folder proyek Anda, buatlah sebuah folder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website perusahaan Anda. Download gambar disini untuk dapat menerapkannya dalam project web perusahaan online.

3. Membuat File web_perusahaan_online.html

Sekarang, buatlah sebuah file HTML baru di dalam folder proyek Anda. Anda dapat menggunakan teks editor favorit Anda untuk membuat file ini. Beri nama file tersebut “web_perusahaan_online.html“. File HTML ini akan menjadi basis dari halaman utama website perusahaan Anda.

Berikut ini file yang dapat Anda tambahkan untuk dapat membuat web perusahaan online dengan 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>Web Perusahaan Online</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Selamat Datang di Web Perusahaan Online</h1>
        </div>
    </header>

    <nav>
        <div class="container">
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Produk</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </div>
    </nav>

    <section id="about">
        <div class="container">
            <h2>Tentang Perusahaan</h2>
            <p>Selamat datang di website resmi Perusahaan Online! Kami adalah perusahaan yang bergerak di bidang [tuliskan bidang perusahaan Anda].</p>
            <img src="img/tentangkami.jpg" alt="Tentang Kami">
        </div>
    </section>

    <footer>
        <div class="container">
            <p>Hak Cipta &copy; 2024 Web Perusahaan Online</p>
        </div>
    </footer>
</body>
</html>

4. Membuat File style.css

Selanjutnya, buatlah sebuah file CSS baru di dalam folder proyek Anda. Beri nama file tersebut “style.css“. File CSS ini akan digunakan untuk mendesain tampilan website perusahaan Anda.

Berikut ini file css yang dapat Anda tambahkan untuk dapat membuat web perusahaan online dengan html dan css:

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

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

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

/* Styling Navigation */
nav ul {
    list-style-type: none;
}

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

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

/* Styling Section */
section#about {
    background-color: #f4f4f4;
    padding: 50px 0;
    text-align: center;
}

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

section#about p {
    color: #666;
    margin-bottom: 20px;
}

section#about img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

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

5. Mengubah Tampilan Web Perusahaan Online

Anda dapat mengubah tampilan website perusahaan Anda dengan mengedit file style.css sesuai dengan kebutuhan dan selera desain Anda. Anda juga dapat menambahkan lebih banyak konten HTML di file web_perusahaan_online.html sesuai dengan informasi yang ingin Anda sampaikan kepada pengunjung website.

6. Menyimpan & Melihat Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, simpan semua perubahan yang Anda buat. Kemudian, buka file web_perusahaan_online.html menggunakan browser web favorit Anda untuk melihat tampilan website perusahaan Anda.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat sebuah web perusahaan online sederhana menggunakan HTML dan CSS. Selamat mencoba dan semoga sukses!