Pembelajaran Lengkap HTML, CSS, & JavaScript

HTML: HyperText Markup Language

HTML adalah tulang punggung dari setiap halaman web. Ini digunakan untuk menstrukturkan konten di web.

1. Elemen dan Tag

Konten HTML dibungkus dalam tag. Tag pembuka, konten, dan tag penutup bersama-sama membentuk sebuah elemen.

<p>Ini adalah sebuah paragraf.</p>

2. Struktur Dasar Halaman HTML

Setiap dokumen HTML harus memiliki struktur dasar ini.

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Judul Utama</h1>
    <p>Konten paragraf.</p>
</body>
</html>

3. Tag yang Sering Digunakan

<h1> sampai <h6> - untuk judul.
<p> - untuk paragraf.
<a href="https://google.com"> - untuk tautan (link).
<img src="url_gambar.jpg" alt="deskripsi gambar"> - untuk gambar.
<div> - pembungkus (container) blok.
<span> - pembungkus (container) inline.
<ul>, <ol>, <li> - untuk daftar (list).

CSS: Cascading Style Sheets

CSS digunakan untuk mendesain dan menata tampilan halaman web, seperti warna, font, dan layout.

1. Cara Menambahkan CSS

Ada tiga cara untuk menambahkan CSS ke HTML:

Inline CSS: Menggunakan atribut style langsung di dalam tag HTML. Kurang direkomendasikan.

<p style="color: blue; font-size: 16px;">Paragraf ini berwarna biru.</p>

Internal CSS: Menggunakan tag <style> di dalam <head>. Seperti yang digunakan di halaman ini.

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

External CSS: Menghubungkan ke file .css terpisah. Cara yang paling direkomendasikan.

<head>
    <link rel="stylesheet" href="style.css">
</head>

2. Selektor, Properti, dan Nilai

Sintaks dasar CSS terdiri dari selektor dan blok deklarasi. Blok deklarasi berisi properti dan nilainya.

/* p adalah selektor */
p {
    /* color adalah properti, red adalah nilai */
    color: red;
    /* font-size adalah properti, 18px adalah nilai */
    font-size: 18px;
}

Selektor umum:

h1, p, div (berdasarkan nama tag)
.nama-kelas (berdasarkan atribut class)
#id-unik (berdasarkan atribut id)

JavaScript (JS)

JavaScript adalah bahasa pemrograman yang membuat halaman web menjadi interaktif dan dinamis.

1. Menambahkan JavaScript

Sama seperti CSS, JS dapat ditambahkan secara internal dengan tag <script> atau eksternal dengan file .js.

<!-- Internal JS -->
<script>
    alert('Halo Dunia!');
</script>

<!-- External JS (direkomendasikan sebelum </body>) -->
<script src="skrip.js"></script>

2. Variabel dan Tipe Data

Variabel digunakan untuk menyimpan data. Gunakan let atau const.

let nama = "Budi"; // String
let umur = 25; // Number
const PI = 3.14; // Konstanta yang tidak bisa diubah

3. Fungsi

Fungsi adalah blok kode yang dapat digunakan kembali.

function sapa(nama) {
    return "Halo, " + nama + "!";
}

console.log(sapa("Ani")); // Menampilkan "Halo, Ani!" di console browser

4. Manipulasi DOM

DOM (Document Object Model) adalah representasi HTML sebagai objek. JavaScript dapat mengubah struktur, gaya, dan konten HTML.

Contoh Interaktif:

Halo! Nama saya adalah ...

// Mengakses elemen dengan ID
const tombol = document.getElementById('js-button');
const output = document.getElementById('js-output');

// Menambahkan event listener ke tombol
tombol.addEventListener('click', function() {
    output.textContent = 'Gemini';
    output.style.color = 'green';
});