Cara Membuat Web Company Profile Menggunakan HTML dan CSS – Tertarik untuk membangun website profil perusahaan (company profile) yang sederhana dan keren? Jika iya, kamu berada di tempat yang tepat! Pada pembahasan kali ini, kita akan membahas langkah-langkah pembuatan website company profile menggunakan HTML dan CSS.
Simak panduan ini untuk mendapatkan inspirasi dan referensi tampilan web yang menarik untuk tugas atau proyekmu. Karena TeknoTask sudah menyiapkan langkah langkah membuat web company profile, untuk itu simak ulasannya dibawah ini.
Apa Itu Website Company Profile?
Website Company Profile adalah situs web yang dirancang khusus untuk memberikan informasi mendalam tentang suatu perusahaan atau organisasi. Tujuannya adalah memberikan gambaran menyeluruh mengenai identitas, visi, misi, nilai-nilai, produk atau layanan, serta pencapaian perusahaan.
Website ini menjadi saluran efektif untuk memperkenalkan dan mempromosikan perusahaan kepada publik, calon pelanggan, mitra bisnis, dan pemangku kepentingan lainnya. Dengan fitur-fitur tertentu, website company profile menciptakan kehadiran online yang kuat dan memberikan kesan positif kepada pengunjungnya.
Beberapa fitur umum dalam website Company Profile meliputi:
- Tentang Kami (About Us): Sejarah, latar belakang, dan visi-misi perusahaan.
- Profil Manajemen: Informasi tentang tim manajemen, termasuk pengalaman dan peran masing-masing anggota.
- Produk atau Layanan: Penjelasan mendalam mengenai produk atau layanan, disertai dengan gambar dan spesifikasi.
- Penghargaan dan Pencapaian: Pengakuan atau penghargaan yang perusahaan peroleh, serta pencapaian signifikan lainnya.
- Nilai-nilai Perusahaan: Prinsip-prinsip inti yang dipegang teguh dalam menjalankan bisnis.
- Galeri Foto dan Video: Visualisasi perusahaan melalui gambar atau video khusus.
Website Company Profile menjadi representasi digital citra dan identitas perusahaan. Dengan kehadiran online ini, perusahaan dapat berkomunikasi secara lebih mendalam dengan audiensnya dan memberikan informasi interaktif, sehingga menjadikan pengalaman pengunjung lebih berkesan.
Cara Membuat Web Company Profile Sederhana Menggunakan HTML dan CSS
1. Persiapkan Struktur Folder
Langkah pertama yang perlu kamu lakukan adalah membuka manajer file dan membuat folder baru untuk proyek web company profile. Misalnya, beri nama folder “CompanyProfile”. Di dalamnya, buat subfolder “Gambar” untuk menyimpan logo atau gambar terkait perusahaan.
CompanyProfile
- Gambar
– logo.jpg
– layanan1.jpg
– layanan2.jpg
– portofolio1.jpg
– portofolio2.jpg - index.html
- style.css
Untuk gambar dan logo bisa kamu unduh disini.
2. Buat File HTML Utama (index.html)
Buka Sublime Text dan buat file baru dengan nama “index.html” dalam folder proyek. Selanjutnya, isi file index.html tersebut dengan struktur HTML company profile dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Company Profile XYZ</title>
</head>
<body>
<header>
<div class="logo">
<img src="company/logo.jpg" alt="Company Logo">
</div>
<h1>Company Profile TeknoTask</h1>
<p>Building a Better Future Together</p>
</header>
<nav>
<ul>
<li><a href="#about">Tentang Kami</a></li>
<li><a href="#services">Layanan</a></li>
<li><a href="#portfolio">Portofolio</a></li>
<li><a href="#contact">Hubungi Kami</a></li>
</ul>
</nav>
<section id="about">
<h2>Tentang Kami</h2>
<p>Selamat datang di Company Profile TeknoTask. Kami adalah perusahaan yang berkomitmen untuk memberikan solusi terbaik bagi pelanggan kami.</p>
</section>
<section id="services">
<h2>Layanan</h2>
<div class="service-item">
<img src="company/layanan1.webp" alt="Service 1">
<h3>Desain Kreatif</h3>
<p>Kami menyediakan layanan desain kreatif untuk memenuhi kebutuhan visual bisnis Anda.</p>
</div>
<div class="service-item">
<img src="company/layanan2.webp" alt="Service 2">
<h3>Pengembangan Web</h3>
<p>Kami ahli dalam pengembangan situs web modern dan responsif untuk meningkatkan kehadiran online Anda.</p>
</div>
<!-- Tambahkan layanan lainnya sesuai kebutuhan -->
</section>
<section id="portfolio">
<h2>Portofolio</h2>
<div class="portfolio-item">
<img src="company/portofolio1.webp" alt="Project 1">
<h3>Proyek 1</h3>
<p>Deskripsi singkat tentang proyek 1 dan hasil yang dicapai.</p>
</div>
<div class="portfolio-item">
<img src="company/portofolio2.webp" alt="Project 2">
<h3>Proyek 2</h3>
<p>Deskripsi singkat tentang proyek 2 dan hasil yang dicapai.</p>
</div>
<!-- Tambahkan portofolio lainnya sesuai kebutuhan -->
</section>
<section id="contact">
<h2>Hubungi Kami</h2>
<p>Jika Anda memiliki pertanyaan atau ingin bermitra dengan kami, hubungi kami melalui formulir di bawah ini atau melalui kontak langsung.</p>
<!-- Tambahkan formulir kontak atau informasi kontak -->
</section>
<footer>
<p>© 2024 Company Profile TeknoTask. All rights reserved.</p>
</footer>
</body>
</html>3. Buat File CSS (style.css)
Lanjutkan dengan membuat file baru bernama “style.css” dalam folder proyek. Isi file ini dengan kode CSS untuk mendesain tampilan website, berikut dibawah ini kode CSSnya.
<style type="text/css">
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 1em 0;
}
.logo img {
width: 100px; /* Sesuaikan ukuran logo sesuai kebutuhan */
height: auto;
}
nav {
background-color: #2c3e50;
padding: 0.5em 0;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
section {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.service-item,
.portfolio-item {
text-align: center;
margin: 20px;
}
.service-item img,
.portfolio-item img {
width: 100%;
max-width: 400px; /* Sesuaikan dengan kebutuhan ukuran maksimum gambar */
height: auto;
border-radius: 8px;
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
</style>4. Tambahkan Konten
Kembali ke file “index.html” menggunakan Sublime Text, tambahkan konten sesuai dengan masing-masing bagian (Tentang Kami, Layanan, Portofolio, Kontak).
<section id="services">
<h2>Layanan</h2>
<div class="service-item">
<img src="company/layanan1.webp" alt="Service 1">
<h3>Desain Kreatif</h3>
<p>Kami menyediakan layanan desain kreatif untuk memenuhi kebutuhan visual bisnis Anda.</p>
</div>
<div class="service-item">
<img src="company/layanan2.webp" alt="Service 2">
<h3>Pengembangan Web</h3>
<p>Kami ahli dalam pengembangan situs web modern dan responsif untuk meningkatkan kehadiran online Anda.</p>
</div>
<!-- Tambahkan layanan lainnya sesuai kebutuhan -->
</section>
<section id="portfolio">
<h2>Portofolio</h2>
<div class="portfolio-item">
<img src="company/portofolio1.webp" alt="Project 1">
<h3>Proyek 1</h3>
<p>Deskripsi singkat tentang proyek 1 dan hasil yang dicapai.</p>
</div>
<div class="portfolio-item">
<img src="company/portofolio2.webp" alt="Project 2">
<h3>Proyek 2</h3>
<p>Deskripsi singkat tentang proyek 2 dan hasil yang dicapai.</p>
</div>
<!-- Tambahkan portofolio lainnya sesuai kebutuhan -->
</section>
<section id="contact">
<h2>Hubungi Kami</h2>
<p>Jika Anda memiliki pertanyaan atau ingin bermitra dengan kami, hubungi kami melalui formulir di bawah ini atau melalui kontak langsung.</p>
<!-- Tambahkan formulir kontak atau informasi kontak -->
</section>5. Jalankan Kode
Simpan semua perubahan yang telah kamu buat dari semua kodenya, setelah itu buka file “index.html” menggunakan browser default untuk melihat hasilnya.
6. Tampilkan Website
Selamat! Kamu telah berhasil membuat web company profile sederhana dengan HTML dan CSS menggunakan Sublime Text. Setelah itu kamu bisa menyesuaikan konten dan desain sesuai dengan kebutuhan perusahaanmu.
Akhir Kata
Dalam hal ini website company profile yang kamu bangun tidak hanya menjadi tempat untuk mendapatkan informasi, tetapi juga dapat memperoleh pengalaman unik bagi setiap pengunjung. Jangan ragu untuk terus mengembangkan ide dan keterampilanmu dalam dunia pengembangan web. Semoga sukses!