Pendidikan

Membangun Situs Web Dinamis dengan HTML dan CSS

Pada era digital saat ini, kemampuan untuk membuat situs web merupakan keahlian yang sangat berharga. Dengan HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets), Anda dapat menciptakan situs web yang menarik dan dinamis. Artikel ini akan membahas langkah-langkah dasar untuk membangun situs web menggunakan HTML dan CSS.

1. Persiapkan Lingkungan Kerja
Sebelum mulai, pastikan Anda memiliki teks editor yang nyaman digunakan seperti Visual Studio Code atau Sublime Text. Selain itu, pastikan juga Anda memiliki browser web untuk melihat hasil dari kode yang Anda tulis.

2. Mulai dengan HTML
HTML adalah tulang punggung dari setiap situs web. Dengan HTML, Anda mendefinisikan struktur dan konten dari halaman web Anda. Mulailah dengan membuat file HTML baru dan tulis struktur dasar seperti berikut:

html
Copy code
<!DOCTYPE html>
<html lang=””en””>
<head>
<meta charset=””UTF-8″”>
<meta name=””viewport”” content=””width=device-width, initial-scale=1.0″”>
<title>Contoh Situs Web</title>
<link rel=””stylesheet”” href=””styles.css””>
</head>
<body>
<header>
<h1>Selamat Datang di Situs Web Kami</h1>
</header>
<nav>
<ul>
<li><a href=””#””>Beranda</a></li>
<li><a href=””#””>Tentang Kami</a></li>
<li><a href=””#””>Layanan</a></li>
<li><a href=””#””>Kontak</a></li>
</ul>
</nav>
<main>
<section>
<h2>Tentang Kami</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section>
<h2>Layanan Kami</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</main>
<footer>
<p>Hak Cipta © 2024 Situs Web Kami</p>
</footer>
</body>
</html>
3. Gaya dengan CSS
Setelah memiliki struktur dasar HTML, saatnya untuk membuat situs web Anda terlihat menarik dengan CSS. Buatlah file styles.css dan tambahkan beberapa gaya dasar seperti:

css
Copy code
/* Reset CSS */
body, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}

/* Styling Header */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}

/* Styling Navigation */
nav ul {
list-style-type: none;
}

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

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

/* Styling Sections */
section {
margin: 20px;
}

/* Styling Footer */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
4. Lihat Hasilnya
Simpan file HTML dan CSS yang telah Anda buat. Buka file HTML menggunakan browser web Anda. Anda akan melihat situs web sederhana Anda dengan struktur yang telah Anda definisikan, diberi gaya dengan CSS.

Dengan terus berlatih dan mengeksplorasi lebih lanjut, Anda akan semakin mahir dalam membangun situs web dinamis menggunakan HTML dan CSS. Selamat mencoba!”

anas