Apa itu Html Css Javascript ?

HTML (HyperText Markup Language)

1.1 Pengertian HTML

HTML adalah bahasa markup yang digunakan untuk membangun struktur sebuah halaman web. HTML bukan bahasa pemrograman, melainkan bahasa penanda (markup) yang memberi tahu browser bagaimana menampilkan konten.

Sejarah HTML (Hypertext Markup Language)

1991: Tim Berners-Lee menciptakan HTML di CERN agar para ilmuwan bisa berbagi dokumen dengan mudah.

1993–1995: Perkembangan awal versi HTML 1 hingga HTML 2.0 yang mulai mendukung formulir (form).

1997–1999: Rilis HTML 3.2 dan 4.0 yang membawa dukungan multimedia lebih baik.

2014–Sekarang: Rilis HTML5 yang memperkenalkan fitur audio, video, serta tampilan yang lebih responsif untuk perangkat seluler (mobile)

1.2 Struktur Dasar Dokumen HTML

<!DOCTYPE html>

<head>

<title>Judul Halaman</title>

</head>

<body>

<h1>Selamat Datang</h1>

<p>Ini adalah paragraf pertama saya.</p>

</body>

</html>

1.3 Daftar Tag HTML dan Fungsinya

A. Tag Struktur Dasar

Tag / Elemen	Fungsi
<!DOCTYPE html>	Mendeklarasikan bahwa dokumen menggunakan HTML5
<html>	Elemen akar (root) yang membungkus seluruh isi dokumen HTML
<head>	Berisi metadata (informasi tentang dokumen) yang tidak tampil di halaman
<meta>	Menyediakan metadata seperti encoding karakter, deskripsi, penulis
<title>	Menentukan judul halaman yang tampil di tab browser
<body>	Berisi seluruh konten yang tampil di halaman web
<link>	Menghubungkan file eksternal, biasanya file CSS
<style>	Menuliskan CSS langsung di dalam dokumen HTML
<script>	Menyisipkan atau menghubungkan kode JavaScript

B. Tag Teks dan Heading

Tag / Elemen	Fungsi
<h1> s.d. <h6>	Judul/heading, dari yang terbesar (h1) hingga terkecil (h6)
<p>	Membuat paragraf teks
<br>	Membuat baris baru (line break) tanpa membuat paragraf baru
<hr>	Membuat garis horizontal pemisah konten
<b>	Menebalkan teks (tanpa makna penting secara semantik)
<strong>	Menebalkan teks dan menandakan teks tersebut penting
<i>	Memiringkan teks (tanpa makna khusus)
<em>	Memiringkan teks dan menandakan penekanan (emphasis)
<u>	Memberi garis bawah pada teks
<small>	Memperkecil ukuran teks
<mark>	Menyorot/highlight teks
<sub>	Membuat teks subskrip (contoh: H2O)
<sup>	Membuat teks superskrip (contoh: 2 pangkat 3)
<span>	Elemen inline generik untuk menandai bagian kecil teks

C. Tag Struktur Konten (Semantik)

Tag / Elemen	Fungsi
<div>	Elemen blok generik untuk mengelompokkan konten
<header>	Menandai bagian kepala/header halaman atau bagian
<nav>	Menandai bagian navigasi/menu
<main>	Menandai konten utama halaman
<section>	Mengelompokkan konten menjadi satu bagian tematik
<article>	Menandai konten yang berdiri sendiri, misalnya artikel berita
<aside>	Menandai konten tambahan/sampingan, misalnya sidebar
<footer>	Menandai bagian kaki/footer halaman atau bagian

D. Tag List (Daftar)

Tag / Elemen	Fungsi
<ul>	Membuat daftar tak berurutan (bullet list)
<ol>	Membuat daftar berurutan (numbered list)
<li>	Menandai setiap item dalam daftar <ul> atau <ol>
<dl>	Membuat daftar deskripsi
<dt>	Istilah dalam daftar deskripsi
<dd>	Deskripsi/penjelasan dari istilah <dt>

E. Tag Link dan Media

Tag / Elemen	Fungsi
<a href="">	Membuat hyperlink/tautan ke halaman lain
<img src="">	Menampilkan gambar
<audio>	Menyisipkan dan memutar file audio
<video>	Menyisipkan dan memutar file video
<source>	Menentukan sumber file media (di dalam <audio>/<video>)
<iframe>	Menyisipkan halaman web lain di dalam halaman saat ini

F. Tag Tabel

Tag / Elemen	Fungsi
<table>	Membuat tabel
<tr>	Membuat baris (table row)
<th>	Membuat sel header/judul kolom
<td>	Membuat sel data biasa
<thead>	Mengelompokkan bagian header tabel
<tbody>	Mengelompokkan bagian isi/body tabel
<tfoot>	Mengelompokkan bagian footer tabel

G. Tag Form (Formulir)

Tag / Elemen	Fungsi
<form>	Membuat formulir untuk input data pengguna
<input>	Membuat kolom input (teks, angka, password, checkbox, dll)
<label>	Memberi label/nama pada elemen input
<textarea>	Membuat kolom input teks panjang (multi-baris)
<button>	Membuat tombol yang dapat diklik
<select>	Membuat dropdown/menu pilihan
<option>	Menentukan pilihan di dalam <select>
<fieldset>	Mengelompokkan elemen-elemen form
<legend>	Memberi judul pada <fieldset>

Contoh atribut penting pada <input>:

CSS (Cascading Style Sheets)

2.1 Pengertian CSS

CSS digunakan untuk mengatur tampilan (warna, ukuran, tata letak) dari elemen HTML.

Sejarah CSS (Cascading Style Sheets)

1994: Håkon Wium Lie mengusulkan CSS untuk memisahkan bagian konten (HTML) dari gaya visual/desain.

1996: Organisasi W3C (World Wide Web Consortium) meresmikan standar CSS1 untuk mengatur warna, font, dan spasi.

1998: Rilis CSS2 yang menambahkan pengaturan tata letak posisi elemen dan dukungan berbagai jenis perangkat.

CSS3: Perkembangan selanjutnya yang membagi fitur menjadi modul-modul terpisah (animasi, flexbox, dll.) hingga saat ini.

2.2 Cara Menyisipkan CSS

1. Inline CSS (langsung di tag)

<p style="color: red;">Teks merah</p>

2. Internal CSS (di dalam <style> pada <head>)

<style>

p { color: blue; }

</style>

3. External CSS (file terpisah, disarankan)

2.3 Struktur Dasar CSS

selector {

properti: nilai;

}

/* Contoh */

h1 {

color: navy;

font-size: 32px;

}

2.4 Selector CSS dan Fungsinya

Selector / Contoh	Fungsi
Element — p {}	Memilih semua elemen <p>
.judul {}	Memilih elemen dengan class="judul"
#header {}	Memilih elemen dengan id="header"
* {}	Memilih semua elemen (universal selector)
div p {}	Memilih <p> di dalam <div> (descendant selector)
a:hover {}	Memilih elemen saat kondisi tertentu, misalnya saat dihover

2.5 Properti CSS Umum dan Fungsinya

A. Teks dan Font

Properti	Fungsi
color	Mengatur warna teks
font-family	Mengatur jenis huruf
font-size	Mengatur ukuran huruf
font-weight	Mengatur ketebalan huruf (normal, bold)
font-style	Mengatur gaya huruf (normal, italic)
text-align	Mengatur perataan teks (left, center, right, justify)
text-decoration	Menambah/menghapus dekorasi teks (underline, none)
line-height	Mengatur jarak antar baris
letter-spacing	Mengatur jarak antar huruf

B. Background dan Border

Properti	Fungsi
background-color	Mengatur warna latar belakang
background-image	Menambahkan gambar latar belakang
border	Mengatur garis pinggir elemen
border-radius	Membuat sudut elemen melengkung
box-shadow	Menambahkan efek bayangan pada elemen

C. Layout dan Ukuran

Properti	Fungsi
width	Mengatur lebar elemen
height	Mengatur tinggi elemen
margin	Mengatur jarak di luar elemen (dengan elemen lain)
padding	Mengatur jarak di dalam elemen (antara border dan konten)
display	Mengatur jenis tampilan elemen (block, inline, flex, grid, none)
position	Mengatur posisi elemen (static, relative, absolute, fixed)
top / left / right / bottom	Mengatur jarak posisi saat position digunakan
z-index	Mengatur urutan tumpukan (layer) elemen

D. Flexbox (Layout Modern)

Properti	Fungsi
display: flex	Mengaktifkan mode flexbox pada elemen induk
justify-content	Mengatur perataan elemen anak secara horizontal
align-items	Mengatur perataan elemen anak secara vertikal
flex-direction	Mengatur arah elemen anak (row/column)
gap	Mengatur jarak antar elemen anak

Contoh CSS:

.container {

display: flex;

justify-content: center;

align-items: center;

gap: 10px;

}

.box {

width: 100px;

height: 100px;

background-color: skyblue;

border-radius: 10px;

}

JAVASCRIPT

3.1 Pengertian JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk memberi interaktivitas dan logika pada halaman web (dinamis).

Sejarah JavaScript

1995: Brendan Eich menciptakan bahasa ini hanya dalam waktu 10 hari untuk browser Netscape Navigator, yang awalnya bernama Mocha, lalu LiveScript, dan akhirnya diubah menjadi JavaScript.

1996: Distandarisasi oleh ECMA (European Computer Manufacturers Association) dengan nama resmi ECMAScript.

2009: Rilis ES5 dan peluncuran Node.js oleh Ryan Dahl yang memungkinkan JavaScript berjalan di luar browser (sisi server).

2015: Rilis besar ES6 (ECMAScript 2015) yang merevolusi penulisan kode JavaScript modern menjadi jauh lebih rapi dan canggih.

3.2 Cara Menyisipkan JavaScript

console.log("Halo dunia");

</script>

3.3 Variabel dalam JavaScript

Kata Kunci	Fungsi
var	Mendeklarasikan variabel (cara lama, jarang dipakai sekarang)
let	Mendeklarasikan variabel yang nilainya bisa diubah
const	Mendeklarasikan variabel dengan nilai tetap (tidak bisa diubah)

let nama = "Andi";

const usia = 20;

3.4 Tipe Data

Tipe	Contoh
String	"Halo"
Number	10, 3.14
Boolean	true, false
Array	[1, 2, 3]
Object	{nama: "Budi", umur: 21}
Undefined	Variabel belum diberi nilai
Null	Nilai kosong secara sengaja

3.5 Operator

Operator	Fungsi
*+ - / %**	Operator aritmatika (tambah, kurang, kali, bagi, sisa bagi)
= == === != !==	Operator penugasan dan perbandingan (=== membandingkan nilai & tipe)
&& \|\| !	Operator logika (AND, OR, NOT)
++ --	Operator increment dan decrement

3.6 Struktur Kontrol

If-Else

let nilai = 80;

if (nilai >= 75) {

console.log("Lulus");

} else {

console.log("Tidak Lulus");

}

Perulangan (Loop)

for (let i = 0; i < 5; i++) {

console.log("Perulangan ke-" + i);

}

let i = 0;

while (i < 5) {

console.log(i);

i++;

}

3.7 Fungsi (Function)

function sapa(nama) {

return "Halo, " + nama + "!";

}

console.log(sapa("Dewi"));

// Arrow function (cara modern)

const tambah = (a, b) => a + b;

console.log(tambah(5, 3));

3.8 DOM (Document Object Model)

DOM memungkinkan JavaScript mengakses dan mengubah elemen HTML secara dinamis.

Fungsi / Metode	Fungsi
document.getElementById()	Mengambil elemen berdasarkan id
document.getElementsByClassName()	Mengambil elemen berdasarkan class
document.querySelector()	Mengambil elemen pertama sesuai selector CSS
document.querySelectorAll()	Mengambil semua elemen sesuai selector CSS
.innerHTML	Mengambil/mengubah isi HTML sebuah elemen
.textContent	Mengambil/mengubah isi teks sebuah elemen
.style	Mengubah properti CSS elemen melalui JavaScript
.addEventListener()	Menambahkan aksi/respon saat terjadi event (klik, hover, dll)

Contoh penggunaan DOM:

<p id="teks">Belum diklik</p>

document.getElementById("tombol").addEventListener("click", function() {

document.getElementById("teks").textContent = "Tombol sudah diklik!";

});

</script>

3.9 Event Umum JavaScript

Event	Fungsi
click	Terjadi saat elemen diklik
mouseover	Terjadi saat kursor berada di atas elemen
keydown	Terjadi saat tombol keyboard ditekan
submit	Terjadi saat form dikirim
change	Terjadi saat nilai input berubah
load	Terjadi saat halaman selesai dimuat

CONTOH WEBSITE SEDERHANA

Berikut contoh gabungan HTML, CSS, dan JavaScript dalam satu halaman: sebuah tombol pengubah warna latar belakang.

<!DOCTYPE html>

<head>

<title>Contoh Gabungan</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

transition: background-color 0.5s;

}

button {

padding: 10px 20px;

font-size: 16px;

border-radius: 8px;

border: none;

background-color: #4CAF50;

color: white;

cursor: pointer;

}

</style>

</head>

<body>

<h1>Klik Tombol untuk Ganti Warna</h1>

<button onclick="gantiWarna()">Ganti Warna</button>

function gantiWarna() {

const warna = ["#f4a261", "#2a9d8f", "#e76f51", "#264653"];

const acak = warna[Math.floor(Math.random() * warna.length)];

document.body.style.backgroundColor = acak;

}

</script>

</body>

</html>

Penjelasan alur kerja:

1. HTML membangun struktur: judul dan tombol.

2. CSS mengatur tampilan: font, tombol, dan transisi warna.

3. JavaScript menambahkan fungsi gantiWarna() yang dijalankan setiap tombol diklik (onclick), mengubah background-color dari <body> secara acak.

LATIHAN UNTUK SISWA

4. Buat halaman biodata diri menggunakan tag heading, paragraf, list, dan gambar.

5. Beri gaya (CSS) pada biodata tersebut: warna latar, font, dan border.

6. Tambahkan tombol menggunakan JavaScript yang menampilkan pesan "Terima kasih sudah berkunjung!" saat diklik.

7. Buat form sederhana (nama & email) dan tampilkan pesan konfirmasi menggunakan JavaScript saat tombol submit ditekan.

RINGKASAN

Bahasa	Fungsi Utama
HTML	Membangun struktur dan konten halaman web
CSS	Mengatur tampilan visual halaman web
JavaScript	Menambahkan interaktivitas dan logika pada halaman web

Ketiganya bekerja sama: HTML sebagai kerangka/tulang, CSS sebagai kulit/pakaian, dan JavaScript sebagai otak/perilaku dari sebuah halaman web.

Apa itu Html Css Javascript ?

HTML (HyperText Markup Language)

1.1 Pengertian HTML

1.2 Struktur Dasar Dokumen HTML

1.3 Daftar Tag HTML dan Fungsinya

A. Tag Struktur Dasar

B. Tag Teks dan Heading

C. Tag Struktur Konten (Semantik)

D. Tag List (Daftar)

E. Tag Link dan Media

F. Tag Tabel

G. Tag Form (Formulir)

CSS (Cascading Style Sheets)

2.1 Pengertian CSS

2.2 Cara Menyisipkan CSS

2.3 Struktur Dasar CSS

2.4 Selector CSS dan Fungsinya

2.5 Properti CSS Umum dan Fungsinya

A. Teks dan Font

B. Background dan Border

C. Layout dan Ukuran

D. Flexbox (Layout Modern)

JAVASCRIPT

3.1 Pengertian JavaScript

3.2 Cara Menyisipkan JavaScript

3.3 Variabel dalam JavaScript

3.4 Tipe Data

3.5 Operator

3.6 Struktur Kontrol

3.7 Fungsi (Function)

3.8 DOM (Document Object Model)

3.9 Event Umum JavaScript

CONTOH WEBSITE SEDERHANA

LATIHAN UNTUK SISWA

RINGKASAN

Post a Comment