Pelajari HTML5 dan CSS3: Buat Website Sendiri dari Nol!
Daftar Isi
Pengantar HTML5
HTML5 adalah versi terbaru dari bahasa markup HTML yang digunakan untuk membuat struktur halaman web. HTML5 membawa banyak fitur baru yang memudahkan pengembangan website modern, seperti elemen multimedia, grafis, dan API yang lebih canggih.
Dengan HTML5, Anda dapat membuat website yang lebih interaktif dan responsif tanpa perlu bergantung pada plugin tambahan.
Struktur Dasar HTML
Struktur dasar sebuah dokumen HTML terdiri dari beberapa elemen utama yang wajib ada agar browser dapat menampilkan halaman dengan benar.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman</title>
</head>
<body>
Konten halaman web di sini
</body>
</html>
Penjelasan singkat:
- <!DOCTYPE html> : Mendefinisikan tipe dokumen sebagai HTML5.
- <html> : Elemen root dari halaman HTML.
- <head> : Bagian untuk metadata, judul, dan link ke file eksternal.
- <body> : Bagian utama yang berisi konten yang akan ditampilkan.
Elemen dan Tag HTML
HTML terdiri dari elemen-elemen yang dibuka dan ditutup dengan tag. Contohnya:
<p>Ini adalah paragraf.</p>
<h1>Judul Utama</h1>
<a href="https://example.com">Link ke website</a>
Beberapa elemen penting:
- <h1> sampai <h6> : Judul dengan tingkat kepentingan berbeda.
- <p> : Paragraf teks.
- <a> : Link atau tautan.
- <img> : Menampilkan gambar.
- <ul> dan <ol> : Daftar tidak berurutan dan berurutan.
Atribut HTML
Atribut adalah informasi tambahan yang diberikan pada tag HTML untuk mengatur perilaku atau tampilannya. Contoh atribut yang sering digunakan:
- href pada tag <a> untuk menentukan alamat link.
- src pada tag <img> untuk menentukan sumber gambar.
- alt pada tag <img> untuk teks alternatif gambar.
- class dan id untuk memberi nama kelas dan identitas elemen.
<a href="https://example.com" target="_blank">Kunjungi Website</a>
<img src="gambar.jpg" alt="Gambar pemandangan gunung" />
Pengantar CSS3
CSS3 adalah bahasa yang digunakan untuk mengatur tampilan dan layout halaman web. Dengan CSS, Anda dapat mengubah warna, ukuran, posisi, dan gaya elemen HTML.
CSS3 membawa banyak fitur baru seperti animasi, transisi, dan layout fleksibel yang membuat website lebih menarik dan responsif.
Cara Menyisipkan CSS
Ada tiga cara utama untuk menyisipkan CSS ke dalam halaman HTML:
-
Inline CSS:
Langsung pada elemen HTML menggunakan atribut
style.<p style="color: red; font-weight: bold;">Teks merah tebal</p> -
Internal CSS:
Menggunakan tag
<style>di dalam<head>.<style> p { color: blue; font-size: 18px; } </style> -
External CSS:
Menghubungkan file CSS terpisah menggunakan tag
<link>.<link rel="stylesheet" href="styles.css" />
Selektor CSS
Selektor digunakan untuk memilih elemen HTML yang ingin diberi gaya. Contoh selektor dasar:
-
Selektor elemen:
Memilih semua elemen tertentu, misal
puntuk paragraf. -
Selektor kelas:
Memilih elemen dengan kelas tertentu, misal
.highlight. -
Selektor ID:
Memilih elemen dengan ID tertentu, misal
#header. -
Selektor atribut:
Memilih elemen berdasarkan atribut, misal
a[href].
p {
color: green;
}
.highlight {
background-color: yellow;
}
#header {
font-size: 24px;
}
Properti CSS Dasar
Berikut beberapa properti CSS yang sering digunakan:
- color: Mengatur warna teks.
- background-color: Mengatur warna latar belakang.
- font-size: Mengatur ukuran font.
- margin: Mengatur jarak luar elemen.
- padding: Mengatur jarak dalam elemen.
- border: Mengatur garis tepi elemen.
.box {
color: white;
background-color: #3490dc;
font-size: 16px;
margin: 10px;
padding: 15px;
border: 2px solid #2779bd;
}
Layout dengan CSS (Flexbox & Grid)
CSS3 menyediakan dua metode utama untuk membuat layout yang fleksibel dan responsif: Flexbox dan Grid.
Flexbox
Flexbox memudahkan pengaturan tata letak satu dimensi (baris atau kolom). Contoh penggunaan:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Grid
Grid digunakan untuk layout dua dimensi, mengatur baris dan kolom secara bersamaan. Contoh:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
Membuat Website Sederhana
Berikut contoh kode lengkap membuat website sederhana dengan HTML dan CSS:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Website Sederhana</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
margin: 0;
padding: 0;
}
header {
background-color: #3490dc;
color: white;
padding: 20px;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
font-weight: bold;
}
main {
padding: 20px;
}
footer {
background-color: #2779bd;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Selamat Datang di Website Saya</h1>
<nav>
<a href="#">Beranda</a>
<a href="#">Tentang</a>
<a href="#">Kontak</a>
</nav>
</header>
<main>
<h2>Halo Dunia!</h2>
<p>Ini adalah website sederhana yang dibuat dengan HTML dan CSS.</p>
<img src="https://placehold.co/600x300/png?text=Gambar+Website+Sederhana" alt="Gambar ilustrasi website sederhana dengan layout bersih dan warna biru" />
</main>
<footer>
<p>Hak Cipta © 2024</p>
</footer>
</body>
</html>
Anda dapat menyalin kode di atas dan memodifikasinya sesuai kebutuhan untuk membuat website pertama Anda.
Kesimpulan
Dengan mempelajari HTML5 dan CSS3, Anda sudah memiliki dasar yang kuat untuk membuat website sendiri dari nol. HTML5 memberikan struktur dan konten, sementara CSS3 mengatur tampilan dan layout. Teruslah berlatih dan eksplorasi fitur-fitur baru agar kemampuan Anda semakin berkembang.
