Cara Membuat Layout Section Web dengan HTML dan CSS – Halo sobat semua! Sekarang ini kita akan membahas bagaimana cara membuat layout website sederhana menggunakan HTML dan CSS. Bagi Sobat yang baru terjun ke dunia pengembangan web, memahami dasar-dasar pembuatan layout ini sangat penting, terutama jika kamu tertarik menjadi seorang web designer.
Sekilas Tentang Layout Section Website
Layout section website adalah bagian dari struktur visual suatu situs web yang terdiri dari elemen-elemen konten tertentu yang dikelompokkan berdasarkan topik atau fungsi. Setiap bagian memiliki fokus konten yang berbeda, seperti produk, layanan, testimoni, atau informasi lainnya.
Selanjutnya TeknoTask akan memandu kalian untuk membuat layout section pada website dengan menggunakan HTML dan CSS, untuk lebih lanjutnya simak terus langkah-langkahnya dibawah ini.
Cara Membuat Layout Section Web Sederhana dengan HTML dan CSS
1. Persiapkan Struktur Folder
Langkah pertama yang perlu kamu lakukan untuk membuat section web sederhana adalah membuat folder baru untuk proyek layout section web. Beri nama folder tersebut “SectionWeb” dan didalamnya ada gambar section, untuk contoh struktur foldernya sebagai berikut:
SectionWeb
- Gambar
– gambar1.jpeg
– gambar2.jpg - index.html
- style.css
2. Buat File HTML Utama (index.html)
Buka editor teks seperti Sublime Text dan buatlah file baru dengan nama “index.html” di dalam folder proyek, lalu isi file tersebut dengan kode HTML section web 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>Layout Section Web</title>
</head>
<body>
<header>
<h1>TeknoTask</h1>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
</header>
<section id="section1">
<div class="container">
<h2>Section 1</h2>
<img src="company/portofolio1.webp" alt="Gambar 1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius euismod diam, eu rhoncus neque consequat at.</p>
</div>
</section>
<section id="section2">
<div class="container">
<h2>Section 2</h2>
<img src="company/portofolio2.webp" alt="Gambar 2">
<p>Suspendisse potenti. Nam in diam nec justo suscipit euismod. Duis ut leo vel felis egestas sodales.</p>
</div>
</section>
<footer>
<div class="container">
<p>© 2024 Section Web. All rights reserved.</p>
</div>
</footer>
</body>
</html>3. Buat File CSS (style.css)
Setelah membuat file HTML, selanjutnya buatlah file CSS dengan nama “style.css” di dalam folder proyek, lalu isi file tersebut dengan kode CSS untuk section web dibawah ini.
<style type="text/css">
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
overflow: hidden;
}
header {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
section {
background-color: #f2f2f2;
padding: 50px 0;
text-align: center;
}
section h2 {
text-align: center;
}
section img {
max-width: 40%;
height: auto;
display: block;
margin: auto; /* Memberi margin bawah agar tidak terlalu rapat dengan teks */
}
section p {
text-align: center;
}
footer {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
</style>4. Jalankan Kode
Simpan semua perubahan yang telah dilakukan pada kedua file diatas, selanjutnya, buka file “index.html” menggunakan browser default untuk melihat section layoutnya.
5. Tampilkan Layout Section Web
Selamat! Kamu telah berhasil membuat layout section web sederhana dengan HTML dan CSS menggunakan Sublime Text. Jika kamu mengklik navigasi Section 1, maka otomatis tampilan web akan mengarah ke konten Section 1 begitupun juga dengan Section 2.
Penutup
Demikianlah ulasan singkat mengenai cara membuat layout section web dengan HTML dan CSS. Semoga artikel ini dapat memberikan manfaat bagi Sobat yang ingin mempelajari lebih lanjut tentang dasar-dasar pengembangan web.