Membuat Halaman About dengan HTML dan CSS (Gratis)
Halaman About adalah bagian penting dari website Anda. Halaman ini memberikan informasi tentang website Anda, seperti siapa yang membuatnya, apa tujuannya, dan siapa tim di baliknya. Artikel ini akan memandu Anda untuk membuat halaman About sederhana dengan HTML dan CSS secara gratis.
Struktur HTML
Berikut adalah struktur dasar HTML untuk halaman About:
About Us
About Us
Who We Are
...
What We Do
...
Our Team
Penjelasan Kode:
<!DOCTYPE html>: Mendeklarasikan dokumen sebagai HTML5.<html lang="en">: Elemen root dokumen, dengan atributlanguntuk mendefinisikan bahasa halaman.<head>: Berisi meta data tentang halaman, seperti judul dan stylesheet.<title>: Menentukan judul halaman yang ditampilkan pada tab browser.<link rel="stylesheet" href="style.css">: Menyertakan file CSS untuk styling halaman.<body>: Berisi konten utama halaman.<header>: Elemen header yang berisi judul halaman.<main>: Elemen utama yang berisi konten utama halaman.<section>: Elemen untuk mengelompokkan konten yang berhubungan.<footer>: Elemen footer yang berisi informasi tambahan.
Styling CSS
Berikut adalah contoh styling CSS dasar untuk halaman About:
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
main {
padding: 20px;
}
section {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
color: #333;
}
p {
line-height: 1.6;
}
.team-members {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.team-member {
width: 200px;
margin-bottom: 20px;
}
.team-member img {
width: 100%;
border-radius: 50%;
}
.team-member h3 {
margin-top: 10px;
text-align: center;
}
footer {
text-align: center;
padding: 10px 0;
background-color: #333;
color: #fff;
}
Penjelasan Kode:
body: Menentukan font, margin, padding, dan background color untuk seluruh halaman.header: Menentukan background color, warna teks, penataan teks, dan padding untuk header.main: Menentukan padding untuk elemen main.section: Menentukan background color, padding, margin, border radius, dan box shadow untuk setiap section.h2: Menentukan warna teks untuk heading level 2.p: Menentukan jarak baris untuk paragraf..team-members: Menentukan tata letak untuk menampilkan anggota tim..team-member: Menentukan lebar dan margin untuk setiap anggota tim..team-member img: Menentukan lebar dan border radius untuk gambar anggota tim..team-member h3: Menentukan margin dan penataan teks untuk nama anggota tim.footer: Menentukan penataan teks, padding, background color, dan warna teks untuk footer.
Contoh Konten
Berikut contoh konten untuk halaman About:
Who We Are:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl at tincidunt faucibus, nisl elit varius ante, et dictum odio tellus eget dolor. Maecenas non bibendum leo, sed iaculis ligula. Donec aliquam justo et leo feugiat, ut fringilla enim aliquam.
What We Do:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl at tincidunt faucibus, nisl elit varius ante, et dictum odio tellus eget dolor. Maecenas non bibendum leo, sed iaculis ligula. Donec aliquam justo et leo feugiat, ut fringilla enim aliquam.
Our Team:
- [Nama Anggota Tim 1] - [Jabatan]
- [Nama Anggota Tim 2] - [Jabatan]
- [Nama Anggota Tim 3] - [Jabatan]
Kesimpulan
Dengan HTML dan CSS, Anda dapat dengan mudah membuat halaman About yang menarik dan informatif. Anda dapat menyesuaikan struktur dan styling sesuai dengan kebutuhan dan branding website Anda. Selamat mencoba!