Ôn Thi Đại Họcby ToanKhonTech
Kiến thức trọng tâmLớp 12

Tạo trang web với HTML và CSS

Tóm tắt cấu trúc trang HTML, thẻ và thuộc tính thông dụng, bảng, biểu mẫu, liên kết, CSS, bộ chọn class/id, mức ưu tiên và mô hình hộp; dạng bài thi Tin học.

HTML và CSS là chủ đề nặng điểm nhất của lớp 12: phần I thường có 5–7 câu, phần II hay có một câu đúng/sai cho cả một trang web. Phần lớn câu hỏi yêu cầu đọc đoạn mã và đoán kết quả hiển thị, nên em cần nhớ chính xác thẻ, thuộc tính và quy tắc ưu tiên của CSS.

Kiến thức trọng tâm

Cấu trúc một trang HTML

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>CLB Tin học</title>
  <link rel="stylesheet" href="giao-dien.css">
</head>
<body>
  <h1>Câu lạc bộ Tin học</h1>
  <p>Sinh hoạt <b>thứ Năm</b> hằng tuần.</p>
  <img src="anh/logo.png" alt="Biểu tượng CLB" width="120">
  <a href="lich.html">Xem lịch sinh hoạt</a>
</body>
</html>
  • <head> chứa thông tin về trang (tiêu đề trên thẻ tab, bảng mã, liên kết tệp CSS); <body> chứa mọi nội dung hiển thị.
  • Phần tử = thẻ mở + nội dung + thẻ đóng. Thẻ rỗng không có thẻ đóng: <img>, <br>, <hr>, <input>, <meta>, <link>.
  • Thuộc tính viết trong thẻ mở dạng ten="giá trị". Thẻ lồng nhau phải mở sau, đóng trước: <b><i>…</i></b>.

Thẻ HTML thông dụng

Thẻ Công dụng Thuộc tính hay hỏi
<h1>…<h6> Tiêu đề mục, h1 lớn nhất
<p>, <br>, <hr> Đoạn văn, xuống dòng, đường kẻ ngang
<b>/<strong>, <i>/<em>, <u> Đậm, nghiêng, gạch chân
<sub>, <sup> Chỉ số dưới (H₂O), chỉ số trên (x²)
<a> Liên kết href, target="_blank" (mở thẻ mới)
<img> Ảnh src, alt, width, height
<ul>, <ol>, <li> Danh sách không thứ tự, có thứ tự, mục ol: type (1, A, a, I, i), start
<table>, <tr>, <th>, <td> Bảng, hàng, ô tiêu đề, ô dữ liệu colspan (gộp cột), rowspan (gộp hàng)
<div>, <span> Khối (chiếm cả dòng), nội tuyến (nằm trong dòng) class, id
<video>, <audio> Video, âm thanh src, controls, autoplay
<iframe> Nhúng trang khác (bản đồ, video) src, width, height
<form>, <input>, <label>, <select>, <textarea> Biểu mẫu type, name, id, for, required

Liên kết

Cách viết href Ý nghĩa
https://example.com/tin Đường dẫn tuyệt đối tới trang khác
lien-he.html Tương đối: tệp cùng thư mục với trang hiện tại
../index.html Tệp ở thư mục cha
#lien-he Tới phần tử có id="lien-he" trong cùng trang
mailto:clb@example.com Mở chương trình soạn thư

Bảng: gộp ô bằng rowspan, colspan

<table border="1">
  <tr>
    <th>Buổi</th><th>Môn</th><th>Phòng</th>
  </tr>
  <tr>
    <td rowspan="2">Sáng</td><td>Toán</td><td>P201</td>
  </tr>
  <tr>
    <td>Tin học</td><td>P305</td>
  </tr>
  <tr>
    <td>Chiều</td><td colspan="2">Tự học</td>
  </tr>
</table>

Bảng hiển thị 4 hàng × 3 cột. Ô "Sáng" kéo dài qua 2 hàng nên hàng thứ ba chỉ cần viết 2 ô; ô "Tự học" chiếm 2 cột:

Buổi Môn Phòng
Sáng (gộp 2 hàng) Toán P201
↑ Tin học P305
Chiều Tự học (gộp 2 cột) ←

Biểu mẫu

type của <input> Tạo ra
text, email, number, date Ô nhập chữ, thư điện tử, số, ngày
password Ô nhập che kí tự
radio Nút chọn một trong nhóm có cùng name
checkbox Ô đánh dấu, chọn nhiều
submit Nút gửi biểu mẫu

<label for="x"> gắn với ô có id="x": nháy vào chữ cũng chọn ô. Thuộc tính required bắt buộc nhập trước khi gửi.

CSS: cú pháp và cách nhúng

Quy tắc CSS: bộ chọn { thuộc tính: giá trị; }. Ba cách đưa CSS vào trang:

Cách Viết ở đâu Phạm vi
Nội tuyến style="color: red;" trong thẻ Một phần tử
CSS trong Thẻ <style> trong <head> Một trang
CSS ngoài Tệp .css, liên kết bằng <link rel="stylesheet" href="…"> Nhiều trang dùng chung
Thuộc tính Tác dụng Ví dụ
color, background-color Màu chữ, màu nền #1e40af, rgb(30, 64, 175), navy
font-family, font-size Phông, cỡ chữ Arial, 18px
font-weight, font-style Đậm, nghiêng bold, italic
text-align, text-decoration Căn lề, gạch chân/gạch ngang center, underline
line-height, text-indent Giãn dòng, thụt đầu dòng 1.5, 20px
width, height Kích thước vùng nội dung 300px, 50%
padding, border, margin Vùng đệm, viền, lề ngoài 10px, 2px solid gray

Bộ chọn và mức ưu tiên

Bộ chọn Chọn Mức ưu tiên
p Mọi thẻ p Thấp
.ghi-chu Phần tử có class="ghi-chu" (nhiều phần tử dùng chung) Trung bình
a:hover Liên kết khi rê chuột lên (lớp giả) Trung bình
#han-nop Phần tử có id="han-nop" (duy nhất trong trang) Cao
div p Thẻ p nằm bên trong div (con cháu) Cộng dồn
h2, h3 Nhóm: cả h2 và h3 Tính riêng từng bộ chọn

Mô hình hộp

nội dung width margin (lề ngoài) border (viền) padding (vùng đệm) content (nội dung)
Mô hình hộp — từ trong ra ngoài là nội dung, padding, border, margin.

Mặc định, width chỉ là chiều rộng vùng nội dung. Chiều rộng tính đến hết viền:

W=width+2⋅padding+2⋅borderW = \text{width} + 2 \cdot \text{padding} + 2 \cdot \text{border}

Cộng thêm 2⋅margin2 \cdot \text{margin} là khoảng chiếm chỗ trên trang. Viết tắt padding/margin: 1 giá trị → cả 4 phía; 2 giá trị → (trên-dưới) (trái-phải); 4 giá trị → trên, phải, dưới, trái (theo chiều kim đồng hồ).

Dạng bài thường gặp trong đề thi

Dạng 1: Xác định định dạng khi nhiều quy tắc xung đột

Xem lời giải

Xét từng thuộc tính, chỉ so những quy tắc áp dụng được cho đoạn đó:

Đoạn Quy tắc đặt color Thắng font-size
1 p (0; 0; 1), .ghi-chu (0; 1; 0) xanh lá (class) 18px
2 p, .ghi-chu, #han-nop (1; 0; 0) đỏ (id) 18px
3 p, nội tuyến xanh dương (nội tuyến) 18px

Cỡ chữ: div p (0; 0; 2) cao hơn p (0; 0; 1) và cả ba đoạn đều nằm trong div, nên đều là 18px — dù p ghi 16px.

Dạng 2: Tính kích thước theo mô hình hộp

Xem lời giải

padding: 12px 20px → trên-dưới 12px, trái-phải 20px. Chiều rộng đến hết viền:

300+2⋅20+2⋅3=346 px300 + 2 \cdot 20 + 2 \cdot 3 = 346\ \text{px}

Cộng lề ngoài hai bên: 346+2⋅10=366346 + 2 \cdot 10 = 366 px. Bẫy thường gặp: lấy nhầm 12px làm padding trái-phải (ra 330px).

Dạng 3: Câu đúng/sai về biểu mẫu

Xem lời giải
  • a) Đúng. Hai nút radio cùng name="khoi" tạo thành một nhóm, chỉ chọn được một.
  • b) Sai. checkbox cho phép đánh dấu nhiều ô; cùng name chỉ để gửi các giá trị về cùng một trường.
  • c) Đúng. <label for="m1"> gắn với ô có id="m1".
  • d) Sai. Ô họ tên có required, trình duyệt báo lỗi và không gửi khi ô còn trống.

Lỗi thường gặp

Mẹo làm bài

Tự kiểm tra nhanh

  1. Thẻ nào hiển thị chữ "2" ở vị trí chỉ số dưới trong công thức H₂O?
Xem đáp án

<sub>: viết H<sub>2</sub>O. (<sup> là chỉ số trên, như x².)

  1. Liên kết <a href="#gioi-thieu">Giới thiệu</a> hoạt động thế nào?
Xem đáp án

Nháy vào sẽ chuyển (cuộn) tới phần tử có id="gioi-thieu" trong cùng trang.

  1. Danh sách <ol type="A" start="3"> có hai mục. Hai mục được đánh dấu bằng gì?
Xem đáp án

C và D (kiểu chữ in hoa, bắt đầu từ vị trí thứ 3).

  1. Ở Dạng 1, nếu thêm quy tắc div .ghi-chu { color: purple; } vào cuối thẻ <style>, màu của đoạn 1 và đoạn 2 là gì?
Xem đáp án

Đoạn 1 màu tím: div .ghi-chu (0; 1; 1) cao hơn .ghi-chu (0; 1; 0). Đoạn 2 vẫn màu đỏ: #han-nop (1; 0; 0) cao hơn (0; 1; 1).

  1. Khối có width: 200px; padding: 10px; border: 1px solid; margin: 5px;. Chiều rộng tính đến hết viền là bao nhiêu?
Xem đáp án

200+2⋅10+2⋅1=222200 + 2 \cdot 10 + 2 \cdot 1 = 222 px (chiếm chỗ 222+2⋅5=232222 + 2 \cdot 5 = 232 px).

  1. Muốn 20 trang của một website dùng chung giao diện và chỉ sửa ở một nơi, nên dùng cách nhúng CSS nào?
Xem đáp án

CSS ngoài: viết quy tắc vào một tệp .css và liên kết vào từng trang bằng <link rel="stylesheet" href="…">.

Kiểm tra lại kiến thức vừa ôn

Làm 10 câu luyện tập về tạo trang web với html và css và xem lời giải ngay sau mỗi câu.

Luyện tập ngay

Đề có câu hỏi về chủ đề này

ĐỀ SỐ 01Trung bìnhLàm thử miễn phí
Tin học — Đề ôn luyện số 1

Đề bám sát cấu trúc 2026: trí tuệ nhân tạo, thiết bị và giao thức mạng, HTML/CSS, đạo đức số, SQL và đọc chương trình Python/C++; phần đúng/sai gồm mạng gia đình, trang web lớp học, sắp xếp nổi bọt, học máy, phần mềm tạo trang web và CSDL thư viện.

30 câu · 50 phút
ĐỀ SỐ 02Cơ bảnLàm thử miễn phí
Tin học — Đề ôn luyện số 2

Đề cơ bản củng cố kiến thức nền: khái niệm và ứng dụng AI, thiết bị và dịch vụ mạng, thẻ HTML và cách dùng CSS, an toàn tài khoản, hệ quản trị CSDL, rẽ nhánh và vòng lặp; phần đúng/sai gồm thư lừa đảo, AI trong trường học, tìm kiếm nhị phân, làm sạch dữ liệu, trang web làng nghề và CSDL câu lạc bộ thể thao.

30 câu · 50 phút
ĐỀ SỐ 03Nâng caoLàm thử miễn phí
Tin học — Đề ôn luyện số 3

Đề nâng cao, nhiều câu vận dụng: hệ chuyên gia, trình tự DNS – TCP – HTTP, quyền hình ảnh và giấy phép sử dụng, bộ chọn và tính kế thừa CSS, biểu mẫu, bảng gộp ô, phạm vi biến; phần đúng/sai gồm sự cố mã độc trong mạng trường, truy vấn nối ba bảng, kiểm thử sắp xếp chèn, phân loại k láng giềng gần nhất, trang web hội chợ khoa học và CSDL cửa hàng.

30 câu · 50 phút