This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Halaman ini memerlukan browser terbaru (dengan dukungan SharedArrayBuffer). Silakan perbarui Chrome, Edge, Firefox, atau Safari ke versi terbaru.
HTML 超文本标记语言 describes a web page with tags 标签. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element 元素.
The browser draws whatever is between the tags.
A tag you forget to close, or spell wrong, may not show correctly.
Bahasa Indonesia
HTML mendeskripsikan halaman web dengan tag. Tag adalah kata dalam kurung siku, seperti <p>. Sebagian besar datang berpasangan — tag pembuka <p> dan penutup </p> membungkus konten tertentu. Tag ditambah kontennya adalah elemen.
<p>Hello, world!</p>
<p>This is my first web page.</p>
Browser menampilkan apa pun yang ada di antara tag-tag tersebut.
Tag yang lupa ditutup, atau ejaannya salah, mungkin tidak ditampilkan dengan benar.
Satu elemen = tag pembuka + konten + tag penutup
1.2
Judul & paragraf
English
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.
Bahasa Indonesia
Judul berjalan dari <h1> (terbesar) turun ke <h6> (terkecil). Sebuah paragraf adalah <p>. Gunakan tepat satu <h1> untuk judul utama halaman.
<h1>My Blog</h1>
<h2>About me</h2>
<p>I am learning to build web pages.</p>
1.3
Format teks
English
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.
Common mistakes
Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.
The tag goes in angle brackets; the text you see goes between the opening and closing tags.
Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.
Bahasa Indonesia
Buat teks tebal dengan <strong> dan miring dengan <em>. Baris baru adalah <br> — ia tidak memiliki tag penutup.
<p><strong>Warning:</strong> read this carefully.</p>
<p>First line<br>second line</p>
<p>You can <em>emphasise</em> any word.</p>
Kesalahan umum
Sebagian besar tag datang berpasangan — <p>...</p>. Melupakan tag penutup akan merusak tata letak di bawahnya.
Tag berada dalam kurung siku; teks yang Anda lihat berada di antara tag pembuka dan penutup.
Judul berjalan <h1> (terbesar) ke <h6> — jangan pilih judul hanya karena ukurannya.
ul untuk bullet, ol untuk angka; setiap item adalah li
2.2
Tautan
English
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.
Add target="_blank" to open the link in a new tab.
Bahasa Indonesia
Tautan adalah jangkar <a>. Atribut href-nya berisi alamat yang ditunjuknya.
<a href="https://example.com">Visit Example</a>
<br>
<a href="page2.html">Go to the next page</a>
Tambahkan target="_blank" untuk membuka tautan di tab baru.
2.3
Gambar
English
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).
Common mistakes
An image needs src (the file) and alt (a description); a link needs href.
<img> has no separate closing tag.
A broken src path shows nothing — check the file name and folder.
Bahasa Indonesia
Gambar adalah <img> — ia tidak memiliki tag penutup. src adalah alamat gambar; alt adalah teks yang ditampilkan jika gambar tidak dapat dimuat (dan dibacakan untuk pengguna tunanetra).
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png"
alt="bitmap versus vector" width="120">
<p>If the picture is missing, the alt text shows instead.</p>
Kesalahan umum
Gambar membutuhkan src (file) dan alt (deskripsi); tautan membutuhkan href.
<img> tidak memiliki tag penutup terpisah.
Jalur src yang rusak tidak menampilkan apa pun — periksa nama file dan folder.
A real page has a fixed skeleton 骨架. <!DOCTYPE html> says it is HTML5. Everything sits inside <html>. The <head> holds information about the page; the <body> holds what you see.
The <title> shows in the browser tab.
<meta charset="utf-8"> lets the page show any language.
Bahasa Indonesia
Halaman yang sebenarnya memiliki kerangka tetap. <!DOCTYPE html> menyatakan bahwa itu adalah HTML5. Semua hal berada di dalam <html>. <head> berisi informasi tentang halaman; <body> berisi apa yang Anda lihat.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a complete page.</p>
</body>
</html>
Halaman adalah pohon: head mendeskripsikan halaman, body menyimpan apa yang Anda lihat
<title> muncul di tab browser.
<meta charset="utf-8"> memungkinkan halaman menampilkan bahasa apa pun.
3.2
Komentar & pengelompokan
English
A comment 注释<!-- ... --> is a note the browser ignores. Tags nest 嵌套 inside one another; indent 缩进 each level so the structure stays clear. Close tags in the reverse order you opened them.
Common mistakes
Tags must nest, not overlap: <b><i>text</i></b>, never <b><i>text</b></i>.
A page needs <html>, a <head> (for the title and links) and a <body> (for what you see).
A comment is <!-- ... -->; the browser ignores it.
Bahasa Indonesia
Sebuah komentar <!-- ... --> adalah catatan yang diabaikan browser. Tag saling bersarang; beri indentasi setiap tingkat agar strukturnya tetap jelas. Tutup tag dalam urutan terbalik dari saat Anda membukanya.
<!-- a simple navigation bar -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
Kesalahan umum
Tag harus bersarang, bukan tumpang tindih: <b><i>text</i></b>, jangan <b><i>text</b></i>.
Halaman memerlukan <html>, <head> (untuk judul dan tautan) dan <body> (untuk apa yang Anda lihat).
Komentar adalah <!-- ... -->; browser mengabaikannya.
A <div> is a generic block 块级 box that groups content on its own lines. A <span> is a generic inline 行内 box inside a line of text. You use them to group things so you can style or position them.
Semantic 语义 tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.
Common mistakes
<div> is a block (starts a new line); <span> is inline (stays in the text).
Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.
Do not use a tag just for its default look — style it with CSS instead.
Bahasa Indonesia
Sebuah <div> adalah kotak blok generik yang mengelompokkan konten pada baris sendiri. Sebuah <span> adalah kotak inline generik di dalam baris teks. Anda menggunakannya untuk mengelompokkan sesuatu agar dapat memberi gaya atau memposisikan mereka.
Tag semantik menggambarkan perannya, yang membantu pembaca layar dan mesin pencari. Preferensikan tag ini daripada <div> biasa di mana sesuai: <header>, <nav>, <main>, <section>, <article>, <footer>.
CSS 层叠样式表 styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule 规则 has a selector 选择器, then { property: value; } pairs called declarations 声明.
Bahasa Indonesia
Gaya CSS membentuk HTML. Cara termudah adalah blok <style> di dalam <head> (situs yang lebih besar menggunakan file .css terpisah dengan <link>). Aturan CSS memiliki selector, kemudian pasangan { property: value; } yang disebut deklarasi.
<style>
p { color: blue; font-size: 18px; }
h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>
Hubungkan stylesheet agar aturan CSS memberi gaya elemen HTML
6.2
Selector: class & id
English
A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.
The selectors you will meet most, in one place:
Selector
Chooses
p
every <p> element
.note
everything with class="note"
#title
the one element with id="title"
h1, h2
several selectors at once
nav a
every <a> inside a <nav>
.btn:hover
one state of an element (see topic 10)
Common mistakes
A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.
Bahasa Indonesia
A class memberi gaya banyak elemen: tambahkan class="..." di HTML dan tulis .name di CSS. An id memberi gaya SATU elemen: id="..." dan #name.
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).
Bahasa Indonesia
Tetapkan warna teks dengan color dan latar belakang dengan background-color. Warna bisa berupa nama (red), kode hex (#ff0000), atau rgb(255, 0, 0).
<style>
body { background-color: #f0f4ff; }
.card { background-color: white; color: #1e3a8a; padding: 12px; }
</style>
<div class="card">A card with its own colours.</div>
*Warna CSS: named, hex, dan rgb()
7.2
Memberi gaya teks
English
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.
Common mistakes
color sets the text colour; background-color sets the background.
A colour can be a name, a #rrggbb hex code, or rgb(...).
End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.
Bahasa Indonesia
Properti teks umum: font-size, font-weight (mis. bold), font-family, text-align (left / center / right), dan line-height untuk jarak.
<style>
h1 { font-family: Arial, sans-serif; text-align: center; }
p { font-size: 18px; line-height: 1.6; }
</style>
<h1>Centered title</h1>
<p>Readable paragraph text with comfortable line spacing.</p>
Kesalahan umum
color menetapkan warna teks; background-color menetapkan latar belakang.
Warna dapat berupa nama, kode #rrggbb heksadesimal, atau rgb(...).
Akhiri setiap deklarasi di dalam kurung kurawal dengan titik koma ; — ini memisahkan pasangan property: value (titik koma setelah deklarasi terakhir bersifat opsional). Aturan itu sendiri diakhiri dengan kurung kurawal penutup }.
Every element is a box with four layers, from inside out: the content 内容, the padding 内边距 (space inside the border), the border 边框, and the margin 外边距 (space outside the border).
Bahasa Indonesia
Setiap elemen adalah kotak dengan empat lapisan, dari dalam ke luar: konten, padding (ruang di dalam border), border, dan margin (ruang di luar border).
Model kotak: konten, lalu padding, lalu border, lalu margin
8.2
Margin & padding
English
padding adds space inside the border, pushing the content inwards. margin adds space outside, pushing other boxes away. Give one value for all sides, or four (top right bottom left).
Bahasa Indonesia
padding menambahkan ruang di dalam border, mendorong konten ke dalam. margin menambahkan ruang di luar, mendorong kotak lain menjauh. Berikan satu nilai untuk semua sisi, atau empat (atas kanan bawah kiri).
The display property sets how a box flows. block 块级 takes a whole line; inline 行内 sits within a line of text; none removes the box completely; flex lays the children in a row (next topic).
Common mistakes
Padding is inside the border; margin is the space outside it.
box-sizing: border-box makes the set width include padding and border — often what you want.
display: none hides an element completely; visibility: hidden leaves its space.
Bahasa Indonesia
Properti display menetapkan bagaimana alur sebuah kotak. block mengambil seluruh baris; inline berada di dalam baris teks; none menghilangkan kotak sepenuhnya; flex menyusun anak-anaknya dalam baris (topik berikutnya).
Flexbox 弹性布局 lays children out in a row (or a column). Set display: flex on the parent — the container 容器. gap adds space between children; flex: 1 makes them share the width.
Bahasa Indonesia
Flexbox menata anak-anaknya dalam satu baris (atau kolom). Tetapkan display: flex pada induk — yaitu kontainer. gap menambahkan ruang di antara anak-anak; flex: 1 membuat mereka berbagi lebar.
A pseudo-class 伪类 styles an element in one particular state. :hover applies while the mouse is over the element. Add transition 过渡 so the change happens smoothly instead of jumping.
Other useful pseudo-classes: :focus (an input the user clicked into) and :first-child.
Bahasa Indonesia
Pseudo-class memberi gaya elemen dalam satu keadaan tertentu. :hover berlaku saat mouse berada di atas elemen. Tambahkan transition agar perubahan terjadi mulus alih-alih melompat.
Pseudo-class berguna lainnya: :focus (input yang diklik pengguna) dan :first-child.
:hover memberi gaya elemen saat pointer berada di atasnya
10.2
Posisi
English
Positioning 定位 moves a box away from its normal place. relative nudges the box (and makes it the anchor 锚点 for its children); absolute places a box exactly, measured from the nearest positioned parent; fixed pins it to the screen even when the page scrolls.
top, right, bottom, left say how far to move — they only work on positioned boxes.
Bahasa Indonesia
Posisi memindahkan kotak menjauh dari tempat normalnya. relative menggeser kotak (dan menjadikannya jangkar bagi anak-anaknya); absolute menempatkan kotak tepat, diukur dari induk yang diposisikan terdekat; fixed menancapkannya ke layar bahkan saat halaman digulir.
top, right, bottom, left menentukan seberapa jauh untuk bergerak — mereka hanya berfungsi pada kotak yang diposisikan.
10.3
Query media & desain responsif
English
A responsive 响应式 page adapts to the screen size. A media query 媒体查询 applies its rules only while a condition about the screen holds, such as max-width.
Design mobile-first 移动优先: write the phone styles first, then add @media (min-width: ...) rules for bigger screens.
Percent widths and max-width let boxes shrink with the screen.
Common mistakes
:hover sticks to its selector with no space: .btn:hover, not .btn :hover.
position: absolute is measured from the nearest positioned parent — give that parent position: relative.
A media query wraps whole rules: @media (max-width: 600px) { .a { ... } }.
Bahasa Indonesia
Halaman responsif beradaptasi dengan ukuran layar. Query media menerapkan aturannya hanya selama kondisi tentang layar berlaku, seperti max-width.
<style>
.banner { background: #2563eb; color: white; padding: 16px; }
@media (max-width: 600px) {
.banner { background: #16a34a; } /* narrow screens turn green */
}
</style>
<div class="banner">Resize the window: blue when wide, green when narrow.</div>
Rancang mobile-first: tulis gaya telepon terlebih dahulu, lalu tambahkan aturan @media (min-width: ...) untuk layar yang lebih besar.
Lebar persentase dan max-width memungkinkan kotak menyusut seiring layar.
Kesalahan umum
:hover menempel pada selector-nya tanpa spasi: .btn:hover, bukan .btn :hover.
position: absolute diukur dari induk terposisi terdekat — berikan induk tersebut position: relative.
Media query membungkus seluruh aturan: @media (max-width: 600px) { .a { ... } }.
Pick one and the site follows you — notes, papers, videos and practice all open on it. · Pilih satu dan situs mengikuti Anda — catatan, kertas, video, dan latihan semua terbuka di sana.
Type to search notes, lessons, code, vocabulary and past-paper questions across every subject. · Ketik untuk mencari catatan, pelajaran, kode, kosakata, dan pertanyaan soal lama di setiap mata pelajaran.
