Tin học 12 · Chủ đề 4Giải quyết vấn đề với sự trợ giúp của máy tính

Các bài trong sách

Bài 7. HTML và cấu trúc trang web
Bài 8. Định dạng văn bản
Bài 9. Tạo danh sách, bảng
Bài 10. Tạo liên kết
Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web
Bài 12. Tạo biểu mẫu
Bài 13. Khái niệm, vai trò của CSS
Bài 14. Định dạng văn bản bằng CSS
Bài 15. Tạo màu cho chữ và nền
Bài 16. Định dạng khung
Bài 17. Các mức ưu tiên của bộ chọn
Bài 18. Thực hành tổng hợp thiết kế trang web

Ý chính cần nhớ

HTML là ngôn ngữ đánh dấu siêu văn bản, dùng để tạo cấu trúc trang web. Phần tử thường gồm thẻ mở, nội dung, thẻ đóng: <p>Xin chào</p>. Thuộc tính viết trong thẻ mở: <img src="anh.jpg" alt="Sân trường">. Một số thẻ không có thẻ đóng: <br>, <hr>, <img>, <input>.
Khung trang: <!DOCTYPE html>, rồi <html> chứa <head> (tiêu đề trang trong <title>, khai báo bảng mã kí tự, liên kết tệp CSS) và <body> (mọi thứ hiện trong cửa sổ trình duyệt). Tiêu đề mục có sáu cấp từ <h1> đến <h6>; đoạn văn là <p>.
Danh sách: <ul> không thứ tự, <ol> có thứ tự (type="1", "a", "A", "i", "I" đổi kiểu đánh số, start đổi số bắt đầu), mỗi mục là <li>. Bảng: <table>, mỗi hàng là <tr>, ô dữ liệu là <td>, ô tiêu đề là <th>; colspan gộp theo chiều ngang, rowspan gộp theo chiều dọc.
Liên kết: <a href="dia-chi">chữ hiện ra</a>; target="_blank" mở ở thẻ mới; href="#muc-2" nhảy tới phần tử có id="muc-2" trong cùng trang. Đa phương tiện: <img>, <video controls>, <audio controls>; <iframe> nhúng một trang khác vào trang. Biểu mẫu: <form> chứa <input> (text, password, radio, checkbox, submit…), <select>, <textarea>; các nút radio cùng name chỉ chọn được một.
CSS quy định cách hiển thị. Cú pháp: bộ chọn { thuộc tính: giá trị; }. Ba cách đưa CSS vào trang: nội tuyến (thuộc tính style trong thẻ), trong (thẻ <style> ở <head>), ngoài (tệp .css gắn bằng <link rel="stylesheet" href="...">). Màu viết bằng tên, mã #rrggbb hoặc rgb(r, g, b), mỗi thành phần từ 0 đến 255. Khung gồm nội dung, padding, border, margin; theo cách tính mặc định, bề rộng hiển thị = width + padding trái, phải + border trái, phải.
Nhiều luật cùng đặt một thuộc tính cho một phần tử thì: CSS nội tuyến thắng CSS viết trong <style> hay tệp ngoài; giữa các bộ chọn, bộ chọn id (#) mạnh hơn bộ chọn lớp (.), bộ chọn lớp mạnh hơn bộ chọn phần tử (tên thẻ); ngang nhau thì luật viết sau thắng. Các thuộc tính như color, font-family được phần tử con kế thừa từ phần tử cha.

⚠ Lỗi hay gặp

Quên rằng <ol start="3"> đánh số 3 cho mục đầu tiên, không phải cho mục thứ ba.
Đếm số cột của bảng theo số thẻ <td> trong một hàng mà quên phần tử có colspan chiếm nhiều cột.
Nghĩ luật CSS viết sau luôn thắng. Chỉ đúng khi hai bộ chọn mạnh ngang nhau; luật #id viết trước vẫn thắng luật p viết sau.

Tự kiểm tra

Làm ra giấy trước, rồi mới bấm xem đáp án.

Câu 1.Danh sách <ol type="a" start="4"> có ba mục <li>. Mục cuối cùng được đánh kí hiệu gì?
Xem đáp án ▾
✓ f. type="a" đánh bằng chữ thường, start="4" nên mục đầu là d, rồi e, f.
Câu 2.Mã màu #00ff00 là màu gì?
Xem đáp án ▾
✓ Xanh lá, tức rgb(0, 255, 0). Hai chữ số đầu là đỏ (00 = 0), hai chữ số giữa là xanh lá (ff = 255), hai chữ số cuối là xanh dương (00 = 0).
Câu 3.Một khung có width: 200px; padding: 10px; border: 2px solid gray. Theo cách tính mặc định, bề rộng hiển thị của khung là bao nhiêu?
Xem đáp án ▾
✓ 224px. 200 + 10 × 2 + 2 × 2 = 224px. Padding và border mỗi thứ có hai phía trái, phải.

Bài kiểm tra chủ đề 4

25 phút, cùng các dạng câu hỏi của đề tốt nghiệp, chỉ hỏi chủ đề này. Chấm ngay, có lời giải từng câu.

Làm bài kiểm tra