Tổng hợp kiến thức: Tạo trang web với HTML & CSS

Bài 1: Làm quen với ngôn ngữ đánh dấu siêu văn bản

HTML (HyperText Markup Language) là ngôn ngữ chuyên dùng để tạo trang web. Trang web thường gồm nhiều thành phần như tiêu đề, đoạn văn, bảng biểu, hình ảnh, âm thanh và siêu liên kết.

Cấu trúc HTML gồm các phần tử (element), mỗi phần tử được khai báo bằng thẻ mở (<>)thẻ đóng (</>) (trừ một số thẻ như <img>, <meta>, <input>). Các phần tử có thể có thuộc tính (attribute) để cung cấp thông tin bổ sung.

Một tài liệu HTML cơ bản có cấu trúc gồm phần <head> và phần <body>.


Bài 2 & 3: Định dạng văn bản và tạo siêu liên kết

Tổ chức các đoạn văn bản

Sử dụng phần tử <p> để tạo các đoạn văn bản, giúp văn bản dễ hiểu.

Tạo tiêu đề mục

Sử dụng các phần tử <h1> đến <h6> để khai báo tiêu đề mục, với <h1> có cỡ chữ lớn nhất và giảm dần đến <h6>.

Làm nổi bật nội dung văn bản

Tạo siêu liên kết

Sử dụng phần tử <a> với thuộc tính href để định nghĩa đích của liên kết (URL, file, hoặc một phần khác của cùng trang web bằng id).


Bài 4: Trình bày nội dung theo dạng danh sách, bảng biểu

Tạo danh sách

Tạo bảng biểu (<table>)

Dùng để trình bày dữ liệu theo cấu trúc hàng và cột. Bảng bao gồm hàng (<tr>), ô dữ liệu (<td>) , và có thể có tiêu đề bảng (<caption>).


Bài 5: Chèn hình ảnh, âm thanh, video và sử dụng khung


Bài 6 & 7: Tạo biểu mẫu

Biểu mẫu (<form>): Dùng để thu nhận thông tin từ người dùng.

Các điều khiển nhập dữ liệu:


Bài 8, 9, 10: Làm quen với CSS và các bộ chọn

CSS (Cascading Style Sheets) là ngôn ngữ dùng để định dạng và trình bày nội dung của trang web HTML (màu sắc, phông chữ, kích thước, bố cục).

Cách khai báo CSS:

Bộ chọn:


Bài 11 & 12: Mô hình hộp, bố cục trang web và dự án

Mô hình hộp (Box model): Mỗi phần tử HTML được trình bày như một hộp, bao gồm vùng lề (margin), đường viền (border), vùng đệm (padding)nội dung (content).

Bố cục trang web: Thường chia trang web thành các vùng chính như phần đầu trang (header), thanh điều hướng (navigation menu), phần nội dung (content)phần chân trang (footer). Các vùng này thường được tạo bằng phần tử <div> và được định dạng bằng CSS.


CÂU HỎI ÔN TẬP

1. Cấu trúc cơ bản của một tài liệu HTML gồm hai phần chính nào?

2. Thẻ HTML nào được dùng để tạo tiêu đề mục có cỡ chữ lớn nhất?

3. Thuộc tính `alt` trong thẻ `<img>` có công dụng gì?

4. Để người dùng có thể chọn NHIỀU lựa chọn từ một danh sách, ta nên dùng loại `<input>` nào?

5. CSS là ngôn ngữ được dùng để làm gì?

6. Ký hiệu nào được dùng để định nghĩa một bộ chọn LỚP (Class selector) trong CSS?

7. Theo mô hình hộp (Box Model), thứ tự các vùng từ trong ra ngoài của một phần tử HTML là gì?

8. Thẻ nào được dùng để nhúng một tài liệu HTML khác vào trang web hiện tại?

9. Trong thẻ <form>, thuộc tính `action` có ý nghĩa gì?

10. Việc khai báo CSS trong một tệp .css riêng biệt và liên kết vào tệp HTML được gọi là gì?

11. Bộ chọn nào trong CSS được dùng để áp dụng quy tắc định dạng cho MỘT phần tử DUY NHẤT trên trang?

12. Các vùng chính của trang web như header, content, footer thường được tạo bằng thẻ nào và định dạng bằng CSS?