Cara Membuat Web Company Profile dengan HTML dan CSS

By Posted on

Cara Membuat Web Company Profile dengan HTML dan CSS – Apakah Anda ingin membuat website company profile untuk perusahaan Anda sendiri atau klien? Dalam panduan ini, haikalweb akan membahas langkah-langkah detail untuk membuat website company profile menggunakan HTML dan CSS. Langkah-langkahnya akan mudah dipahami bahkan untuk pemula.

Alat yang Disiapkan

Sebelum memulai belajar cara membuat web company profile lebih lanjut Anda perlu menyiapkan beberapa alat. Berikut ini beberapa alat yang harus Anda siapkan untuk membuat web company profile:

  • Laptop,
  • Web browser (Direkomendasikan chrome),
  • Text editor code (Visual studio code, notepad++, sublime text, dan lain sebagainya) cukup pilih salah satu,
  • Niat yang kuat.

Cara Membuat Web Company Profil dengan HTML dan CSS

1. Buat Folder Proyek Website Company Profile

Langkah pertama adalah membuat folder proyek di mana semua file website akan disimpan. Beri nama folder ini sesuai keinginan Anda, misalnya “Company_Profile_Website“.

2. Buat Folder Img

Di dalam folder proyek Anda, buat folder terpisah yang akan menampung semua gambar yang akan digunakan dalam website. Beri nama folder ini “img“. Download gambar disini untuk contoh gambar website Anda.

3. Buat Sebuah File web_company_profile.html

Sekarang, mari buat file HTML utama untuk website company profile Anda. Gunakan editor teks favorit Anda (seperti Notepad, Sublime Text, atau Visual Studio Code) dan buatlah file baru dengan nama “web_company_profile.html” di dalam folder proyek Anda.

Berikut ini code HTML yang dapat Anda implementasikan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Company Profile XYZ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Company Profile XYZ</h1>
        <nav>
            <ul>
                <li><a href="#about">Tentang Kami</a></li>
                <li><a href="#services">Layanan</a></li>
                <li><a href="#contact">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <section id="about">
        <h2>Tentang Kami</h2>
        <p>Selamat datang di Company Profile XYZ! Kami adalah perusahaan yang bergerak di bidang [jelaskan bidang usaha perusahaan Anda]. Kami berkomitmen untuk memberikan solusi terbaik bagi pelanggan kami.</p>
        <img src="img/aboutperusahaan.jpg" alt="Tentang Kami">
    </section>
    <section id="services">
        <h2>Layanan</h2>
        <p>Kami menyediakan berbagai layanan berkualitas tinggi, termasuk:</p>
        <ul>
            <li>Service 1</li>
            <li>Service 2</li>
            <li>Service 3</li>
        </ul>
    </section>
    <section id="contact">
        <h2>Kontak</h2>
        <p>Jika Anda tertarik dengan layanan kami atau memiliki pertanyaan, jangan ragu untuk menghubungi kami di:</p>
        <p>Email: [email protected]</p>
        <p>Telepon: 123-456-789</p>
    </section>
    <footer>
        <p>&copy; 2024 Company Profile XYZ</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, mari buat file CSS yang akan mengatur tampilan website. Buatlah file baru dengan nama “style.css” di dalam folder proyek Anda.

Artikel Terkait:  Cara Membuat Website Keren dengan HTML dan CSS

Berikut ini code CSS yang dapat Anda implementasikan:

/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

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

header h1 {
    margin: 0;
}

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

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

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

section {
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
 

5. Mengubah Tampilan Website Company Profile

Anda dapat mengubah tampilan website sesuai dengan kebutuhan perusahaan Anda dengan mengedit file HTML dan CSS sesuai keinginan.

6. Simpan & Lihat Tampilan

Setelah selesai mengedit file HTML dan CSS, simpan perubahan Anda. Kemudian, buka file “web_company_profile.html” menggunakan browser web Anda untuk melihat tampilan website company profile Anda.

Penutup

Dengan mengikuti langkah-langkah ini, Anda telah berhasil membuat sebuah website company profile sederhana namun informatif menggunakan HTML dan CSS. Jangan ragu untuk menyesuaikan konten dan gaya sesuai kebutuhan perusahaan Anda. Semoga panduan ini membantu Anda memulai!

Related posts: