Pemrograman berbasis web dengan HTML & CSS adalah teknik untuk membuat dan mengatur tampilan visual sebuah halaman web. HTML (HyperText Markup Language) digunakan untuk membuat struktur dasar halaman web, seperti paragraf, heading, gambar, dan link. Sedangkan CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan visual halaman web, seperti warna, ukuran, dan posisi elemen-elemen di halaman.
Pentingnya HTML dan CSS
Berdasarkan data dari World Wide Web Technology Surveys, dari seluruh website yang aktif, 88.2% menggunakan HTML dan 95.6% menggunakan CSS . HTML dan CSS merupakan pengetahuan umum yang harus dimiliki oleh setiap orang yang menggeluti bidang web programming .Cara Membuat Website dengan HTML dan CSS
Sebelum memulai cara membuat website HTML dan CSS, pastikan kamu sudah menyediakan Text Editor dan Web Browser agar proses pembuatan berjalan dengan lancar. Text Editor akan digunakan sebagai tempat bagi kamu menulis kode HTML, sedangkan Web Browser digunakan untuk mengetes hasil coding .Contoh sederhana dari kode HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman Web Anda</title>
</head>
<body>
<header>
<h1>Selamat Datang di Website Saya</h1>
</header>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<section>
<h2>Tentang Saya</h2>
<p>Saya adalah seorang pengembang web yang bersemangat untuk belajar dan berkembang.</p>
</section>
<footer>
<p>Hak Cipta © 2024 - Nama Anda</p>
</footer>
</body>
</html>
Dalam contoh di atas, Anda dapat melihat struktur dasar sebuah halaman web dengan tag-tag HTML seperti `<html>`, `<head>`, `<body>`, dan sebagainya.Contoh sederhana dari kode CSS:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
Dalam contoh CSS di atas, Anda dapat melihat bagaimana gaya diterapkan pada elemen-elemen seperti `body`, `header`, `nav`, dan `footer`.