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

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

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.

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

Cộng lề ngoài hai bên: $346 + 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).

• 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.

Trình duyệt hiển thị:

Lịch ôn tập
 iii. Toán
       ◦ Đạo hàm
       ◦ Tích phân
  iv. Tin học

   1. Ngữ văn

• type="i" đánh số La Mã chữ thường, start="3" bắt đầu từ iii.
• <ul> nằm bên trong mục Toán là một danh sách riêng: hai mục của nó có dấu tròn (trình duyệt dùng dấu tròn rỗng cho danh sách không thứ tự lồng bên trong) và không làm tăng số thứ tự của <ol> bên ngoài → Tin học là iv.
• <ol> thứ hai là danh sách mới, không có type, start → bắt đầu lại từ 1.

Đáp án C. A sai vì đếm cả hai mục lồng; B coi hai <ol> là một danh sách; D quên type="i".

Đường dẫn tương đối được tính từ thư mục chứa trang hiện tại, ở đây là web-12a/bai-viet/; .. nghĩa là lùi lên thư mục cha.

• anh/lop.jpg → trình duyệt tìm bai-viet/anh/lop.jpg: không có tệp.
• lop.jpg → tìm bai-viet/lop.jpg: không có tệp.
• ../bai-viet/anh/lop.jpg → lùi ra web-12a/ rồi vào lại bai-viet/anh/: không có tệp.
• ../anh/lop.jpg → lùi ra web-12a/ rồi vào anh/: tìm thấy anh/lop.jpg, hiển thị ảnh.

Đáp án D. Khi ảnh không tải được, trình duyệt hiện dòng chữ của alt ("Ảnh lớp"). Tương tự, từ trai-he.html muốn về trang chủ viết href="../index.html", muốn nạp CSS viết href="../css/giao-dien.css".

Xét từng phần tử: quy tắc nào chọn được nó, thuộc tính nào được kế thừa từ phần tử cha.

(Thẻ h2 mặc định có cỡ chữ gấp 1,5 lần chữ thường nên là 24px.)

• a) Đúng. .khung h2 chỉ chọn h2 nằm trong .khung; h2 "Đăng kí" ở ngoài nên kế thừa màu đen từ body.
• b) Sai. .khung .phu là bộ chọn con cháu: chỉ chọn phần tử có lớp phu nằm trong .khung. Đoạn "Hạn chót" ở ngoài khung nên giữ 16px kế thừa từ body.
• c) Sai. border không được kế thừa. Trang chỉ có một khung viền bao quanh cả ba phần tử bên trong div.
• d) Đúng. Đoạn này nằm trong .khung, có lớp phu → 13px; màu đen kế thừa từ body.

Màu chữ được kế thừa từ phần tử cha, nhưng kế thừa chỉ áp dụng khi phần tử không có giá trị riêng. Trình duyệt có sẵn quy tắc tô màu cho thẻ <a> (xanh lam với liên kết chưa mở, tím với liên kết đã mở), quy tắc này đặt thẳng lên <a> nên thắng màu trắng kế thừa từ .menu. Còn text-decoration: none đã bỏ gạch chân → B.

Kết quả thực tế: hai liên kết xanh lam đậm trên nền navy, gần như không đọc được. Cách sửa: đặt màu trực tiếp cho liên kết.

.menu a {
  color: white;
  text-decoration: none;
}

A là bẫy "cứ phần tử con là nhận màu của cha"; C quên quy tắc bỏ gạch chân; D sai vì background-color không đổi màu chữ.

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

Mở trang lich-thi.html trong một thẻ (tab) mới của trình duyệt, thẻ đang xem vẫn giữ nguyên. Không có target="_blank" thì trang đích mở thay cho trang hiện tại, ngay trong thẻ đang xem.

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

Đ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).

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

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="…">.