Cara Membuat Website Perusahaan dengan HTML

by

Cara Membuat Website Perusahaan dengan HTML – Membuat website perusahaan bisa menjadi langkah yang sangat penting dalam membangun kehadiran online yang profesional. Di era digital saat ini, memiliki website yang menarik dan informatif merupakan salah satu kunci utama untuk menarik perhatian calon pelanggan dan memperluas jangkauan bisnis Anda.

Dalam panduan ini, caramembuatweb akan melangkah dari awal hingga akhir, membantu Anda membuat website perusahaan dengan menggunakan HTML, bahasa pemrograman web yang paling dasar. Meskipun terdengar menakutkan bagi beberapa orang, proses pembuatan website dengan HTML sebenarnya cukup mudah dipahami, bahkan bagi pemula sekalipun.

Jadi, jika Anda ingin memulai langkah pertama menuju keberhasilan online bagi bisnis Anda, ikuti langkah-langkah ini dengan seksama, dan Anda akan segera memiliki website perusahaan yang menarik dan berfungsi dengan baik!

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang Harus Anda siapkan untuk dapat membuat website perusahaan dengan html:

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

Cara Membuat Website Perusahaan dengan HTML

1. Membuat Folder Project Website Perusahaan

Pertama, mari kita mulai dengan membuat folder untuk proyek website perusahaan kita di komputer Anda. Anda bisa memberi nama folder ini sesuai keinginan Anda, seperti “Website Perusahaan” agar lebih mudah mencarinya.

2. Membuat Folder Img

Di dalam folder proyek Anda, buatlah folder baru dengan nama “img“. Folder ini nantinya akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan pada website perusahaan Anda. Download gambar disini untuk dapat di implementasikan dalam project website perusahaan.

3. Membuat File website_perusahaan.html

Selanjutnya, buatlah sebuah file HTML baru di dalam folder proyek Anda dan beri nama “website_perusahaan.html“. Anda bisa menggunakan editor teks sederhana seperti Notepad atau aplikasi pengembangan web seperti Visual Studio Code.

Artikel Terkait:   Cara Membuat Web Company Profil dengan HTML dan CSS

Berikut ini file html yang dapat Anda tambahkan untuk membuat website perusahaan dengan html:

<!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</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="landing">
        <div class="container">
            <div class="landing-content">
                <div class="landing-image">
                    <img src="img/landing_page.jpg" alt="Perusahaan XYZ">
                </div>
                <div class="landing-text">
                    <h2>Selamat datang di Perusahaan XYZ</h2>
                    <p>Kami adalah perusahaan yang bergerak di bidang XYZ. Dengan visi dan misi yang jelas, kami siap melayani Anda dengan sepenuh hati.</p>
                    <a href="https://riztekno.com/" class="btn">Selengkapnya</a>
                </div>
            </div>
        </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 singkat tentang layanan 1.</p>
            </div>
            <div class="service">
                <img src="img/services2.jpg" alt="Layanan 2">
                <h3>Layanan 2</h3>
                <p>Deskripsi singkat tentang layanan 2.</p>
            </div>
            <div class="service">
                <img src="img/services3.jpg" alt="Layanan 3">
                <h3>Layanan 3</h3>
                <p>Deskripsi singkat tentang layanan 3.</p>
            </div>
        </div>
    </section>
</body>
</html>
 

4. Membuat File style.css

Sekarang, buatlah file CSS baru di dalam folder proyek Anda dan beri nama “style.css“. File ini akan digunakan untuk menyesuaikan tampilan website Anda.

Artikel Terkait:   Cara Membuat Website Makanan dengan HTML dan CSS

Berikut ini file css yang dapat Anda tambahkan untuk membuat website perusahaan dengan css:

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    width: 80%;
    margin: 0 auto;
}

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

header h1 {
    margin: 0;
    font-size: 24px;
}

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

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

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

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

.landing h2 {
    margin-top: 0;
}

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

.btn:hover {
    background-color: #555;
}

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

.services h2 {
    margin-top: 0;
}

.service {
    margin-bottom: 30px;
}

.service img {
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
}

.service h3 {
    margin-top: 10px;
}

.service p {
    color: #777;
}

.landing {
    background-color: #f4f4f4;
    padding: 50px 0;
}

.landing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-text {
    text-align: center;
}

.landing-image {
    margin-top: 20px;
}

.landing-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
 

5. Mengubah Tampilan Website Perusahaan

Anda dapat mengubah tampilan website perusahaan sesuai dengan kebutuhan dan preferensi Anda dengan mengedit file HTML dan CSS yang telah dibuat. Tambahkan konten, gambar, dan elemen desain lainnya sesuai dengan visi Anda untuk website perusahaan Anda.

6. Simpan & Lihat Tampilan

Setelah selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Kemudian buka file “website_perusahaan.html” di browser web Anda untuk melihat tampilan website perusahaan yang telah Anda buat.

Preview hasil

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

Penutup

Membuat website perusahaan bukanlah hanya tentang membangun halaman web. Ini tentang membangun kepercayaan pelanggan, menunjukkan profesionalisme, dan memperluas cakupan bisnis Anda ke ranah digital yang luas. Dengan memahami dasar-dasar HTML dan menerapkannya untuk membuat website perusahaan Anda sendiri, Anda mengambil langkah besar menuju pencapaian tujuan ini.

Artikel Terkait:   Cara Membuat Website Keren dengan HTML dan CSS

Tetapi perjalanan Anda dalam membangun website tidak berakhir di sini. Dunia web terus berubah dan berkembang, dan Anda juga harus beradaptasi. Lanjutkan belajar tentang HTML, CSS, dan bahasa pemrograman web lainnya. Jangan ragu untuk mengeksplorasi desain dan fitur baru untuk meningkatkan pengalaman pengguna di website Anda.

Terakhir, ingatlah bahwa membuat website perusahaan adalah tentang memberikan nilai kepada pengunjung. Jaga website Anda tetap relevan, informatif, dan mudah dinavigasi. Dengan konsistensi dan dedikasi, Anda akan melihat website perusahaan Anda tumbuh dan menjadi aset yang berharga bagi bisnis Anda.

Semoga panduan ini bermanfaat bagi Anda dalam memulai perjalanan Anda menuju pembuatan website perusahaan yang sukses. Selamat mencoba, dan semoga sukses dalam semua upaya bisnis Anda!

Related posts: