Cara Membuat Website Perusahaan dengan HTML dan CSS

Cara Mudah Membuat Website Perusahaan dengan HTML dan CSS – Dalam era digital yang terus berkembang, memiliki kehadiran online yang kuat adalah suatu keharusan bagi perusahaan untuk bertahan dan berkembang. Website perusahaan bukan hanya sekadar alat untuk menampilkan informasi tentang produk dan layanan, tetapi juga menjadi pintu gerbang utama untuk menarik klien potensial dan memperluas jangkauan pasar. Namun, bagi banyak pemula, proses pembuatan website mungkin terasa menakutkan dan rumit.

Untungnya, dengan menggunakan bahasa pemrograman web yang sederhana seperti HTML dan CSS, Anda dapat membuat website perusahaan sendiri dengan mudah dan efektif. Dalam artikel ini, riztekno telah membahas langkah-langkah terperinci tentang cara membuat website perusahaan menggunakan HTML dan CSS. Dengan panduan yang kami berikan, Anda akan dapat memulai perjalanan pembuatan website Anda sendiri tanpa perlu keahlian teknis yang mendalam.

Alat yang Harus Disiapkan

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

  • Perangkat laptop,
  • Google chrome (Web browser),
  • Notepad++ (Text editor code),
  • Niat yang kuat.

Cara Mudah Membuat Website Perusahaan dengan HTML dan CSS

1. Buat Folder Project Website Perusahaan

Langkah pertama adalah membuat folder khusus untuk proyek website perusahaan Anda. Ini akan membantu Anda menjaga file-file terorganisir dengan baik. Anda dapat memberi nama folder ini sesuai dengan nama proyek Anda.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder bernama “img“. Folder ini nantinya akan digunakan untuk menyimpan semua gambar yang akan Anda ditampilkan di website perusahaan Anda. Download disini untuk diterapkan dalam project website perusahaan dengan html dan css

3. Buat Sebuah File website_perusahaan.html

Sekarang, mari kita mulai dengan membuat file HTML untuk website perusahaan Anda. Buka editor teks favorit Anda dan buat file baru dengan nama website_perusahaan.html. Ini akan menjadi basis dari halaman website Anda.

Berikut ini file html yang harus Anda tambahkan untuk membuat website perusahaan 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>Perusahaan XYZ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Perusahaan XYZ</h1>
            <nav>
                <ul>
                    <li><a href="https://riztekno.com/">Beranda</a></li>
                    <li><a href="https://riztekno.com/">Tentang Kami</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 Perusahaan XYZ</h2>
            <p>Kami menyediakan solusi terbaik untuk kebutuhan bisnis Anda.</p>
            <a href="https://riztekno.com/" class="btn">Pelajari lebih lanjut</a>
        </div>
    </section>
    <section class="about">
        <div class="container">
            <h2>Tentang Kami</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>
    </section>
    <section class="services">
        <div class="container">
            <h2>Layanan Kami</h2>
            <div class="service">
                <img src="img/services1.jpg" alt="Layanan 1">
                <h3>Layanan 1</h3>
                <p>Deskripsi layanan 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="service">
                <img src="img/services2.jpg" alt="Layanan 2">
                <h3>Layanan 2</h3>
                <p>Deskripsi layanan 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="service">
                <img src="img/services3.jpg" alt="Layanan 3">
                <h3>Layanan 3</h3>
                <p>Deskripsi layanan 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <p>Hak Cipta © 2024 Perusahaan XYZ. All Rights Reserved.</p>
        </div>
    </footer>
</body>
</html>
 

4. Buat File style.css

Sekarang mari kita tambahkan beberapa gaya ke website kita. Buatlah file baru bernama style.css pada folder proyek Anda. File ini akan berisi semua gaya yang diperlukan untuk membuat website Anda terlihat menarik.

Artikel Terkait:   Cara Membuat Website Yayasan dengan HTML dan CSS

Berikut ini file css yang harus Anda tambahkan untuk membuat website perusahaan dengan html dan css:

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

/* Global Styles */
body {
    font-family: Arial, sans-serif;
}

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

header {
    background-color: #333;
    color: #0ebcdf;
    padding: 20px 0;
}

header h1 {
    float: left;
}

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

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

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

.hero {
    background-image: url('img/background.jpg');
    background-size: cover;
    color: #040101;
    text-align: center;
    padding: 100px 0;
}

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

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

.btn:hover {
    background-color: #0056b3;
}

.about {
    background-color: #f4f4f4;
    padding: 100px 0;
    text-align: center;
}

.services {
    padding: 80px 0;
    text-align: center;
}

.services h2 {
    margin-bottom: 40px;
}

.service {
    margin-bottom: 40px;
}

.service img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 20px;
}

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

5. Mengubah Tampilan Website Perusahaan

Anda dapat mengubah tampilan website perusahaan sesuai kebutuhan Anda dengan menambahkan lebih banyak elemen HTML atau mengubah gaya CSS.

6. Save & View Tampilan

Setelah Anda selesai membuat perubahan, pastikan untuk menyimpan file Anda dan buka website_perusahaan.html di browser untuk melihat tampilannya. Anda dapat mengaksesnya dengan membuka file tersebut langsung di browser Anda.

Preview hasil

Berikut ini preview hasil website perusahaan dengan html dan css jika Anda berhasil membuatnya:

Penutup

Memiliki website perusahaan yang profesional dan menarik adalah langkah penting untuk memperkuat kehadiran online bisnis Anda. Dengan terus berlatih dan mengembangkan keterampilan dalam pengembangan web, Anda dapat meningkatkan pengalaman pengguna, meningkatkan daya tarik visual, dan memastikan bahwa bisnis Anda tetap relevan dalam persaingan digital yang semakin ketat.

Artikel Terkait:   Cara Membuat Landing Page dengan HTML dan CSS

Jadi, jangan ragu untuk melangkah maju dan mulailah membangun website perusahaan Anda sendiri hari ini. Dengan tekad dan ketekunan, Anda akan dapat mencapai tujuan Anda dalam membangun kehadiran online yang kuat dan berhasil untuk bisnis Anda.