HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat dan menyusun halaman web. HTML bukan bahasa pemrograman, melainkan bahasa yang digunakan untuk menyusun struktur dari sebuah dokumen web.
Fungsi HTML
HTML digunakan untuk:
- Menampilkan teks,gambar,Dan media lainnya di halaman web.
- Menyusun struktur konten,seperti heading, paragraf, daftar, tabel, dan formulir.
- Membuat tautan antar halaman (hyperlink).
- Menjadi fondasi
- dari semua halaman web (biasanya digunakan bersama CSS dan JavaScript).
Struktur Dasar HTML
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Ini Judul Utama</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>
Penjelasan struktur:
<!DOCTYPE html>: Menyatakan bahwa dokumen ini adalah HTML5.<html>: Elemen akar dari halaman HTML.<head>: Berisi informasi meta, judul halaman, link CSS, dll.<title>: Judul yang muncul di tab browser.<body>: Tempat konten utama ditampilkan (teks, gambar, dll).
3. Elemen Umum HTML
Beberapa elemen penting:
<h1>sampai<h6>: Heading (judul), dari paling besar (<h1>) sampai paling kecil (<h6>).<p>: Paragraf.<a href="url">: Link.<img src="gambar.jpg" alt="deskripsi">: Gambar.<ul>,<ol>,<li>: Daftar tak berurutan (unordered) dan berurutan (ordered).<div>dan<span>: Elemen wadah (container), untuk keperluan layout dan styling.
4. HTML + CSS + JavaScript
- HTML = Struktur
- CSS = Tampilan/Desain (warna, ukuran, layout)
- Javascript = Interaktivitas (tombol klik, validasi form, dll)
Contoh kombinasi sederhana:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightblue; }
h1 { color: navy; }
</style>
</head>
<body>
<h1>Hello, HTML!</h1>
<p>Ini halaman web pertamaku.</p>
</body>
</html>1. CSS (Cascading Style Sheets)
Apa itu CSS?
CSS adalah bahasa styling yang digunakan untuk mengatur tampilan (desain) dari halaman web yang dibuat dengan HTML.
Fungsi CSS:
- Mengubah warna, ukuran, font, dan layout elemen HTML.
- Membuat tampilan yang konsisten di seluruh halaman web.
- Membuat halaman menjadi responsif (tampil bagus di semua ukuran layar).
Contoh CSS:
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
p {
color: gray;
line-height: 1.5;
}1.Cara Menggunakan CSS:
- inline CSS (di dalam tag HTML):
<h1 style="color: red;">Judul- Internal CSS (di dalam
<style>di head):
<style>
body { background-color: lightgray; }
</style>- External CSS (file terpisah
.css):
<link rel="stylesheet" href="style.css">
2. JavaScript (JS)
Apa itu JavaScript?
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif dan dinamis.
Fungsi JavaScript:
- Menangani event (misalnya klik tombol, isi formulir).
- Mengubah konten secara dinamis tanpa me-reload halaman.
- Memvalidasi form.
- Membuat animasi, popup, kalkulasi, dll.
- Mengambil data dari server secara real-time (AJAX).
Contoh JavaScript:
<button onclick="sayHello()">Klik Aku!</button>
<script>
function sayHello() {
alert("Halo, Dunia!");
}
</script>Fitur JavaScript:
- Dijalankan di browser pengguna (client-side).
- Bisa berinteraksi langsung dengan HTML/CSS (DOM Manipulation).
- Dapat juga digunakan di server (dengan Node.js).