Tóm tắt lý thuyết

Phần 1 – Thuộc tính thẻ

• Mọi phần tử HTML đều có thể có thuộc tính. Thuộc tính bổ sung thông tin, làm rõ cách xử lí cho thẻ chứa nó.
• Cú pháp: tên_thuộc_tính="giá trị". Một số trường hợp đặc biệt chỉ cần tên thuộc tính (xác định Có/Không).
• Thuộc tính nằm trong thẻ bắt đầu, đặt sau tên thẻ. Nếu có nhiều thuộc tính thì ngăn cách nhau bằng dấu cách.
• Cú pháp tổng quát:

 Nội dung 

• Thuộc tính hay dùng nhất là style, dùng để thiết lập định dạng: màu sắc, phông chữ, cỡ chữ, kiểu chữ, căn lề, tạo khung,...

Phần 2 – Các thẻ định dạng trình bày văn bản

• a) Định dạng tiêu đề: dùng các thẻ với x từ 1 đến 6, thể hiện độ quan trọng giảm dần.

• : tiêu đề chính của cả văn bản.

• ,

  ,... : các tiêu đề con ở mức thấp dần.

• Trình duyệt dùng các thẻ này để hiển thị và giúp đọc lướt; công cụ tìm kiếm dùng để xác định cấu trúc, nội dung trang web.

Bài 1: Câu hỏi mở đầu (Hình 8.1)

Đề bài: Cho hai đoạn văn bản như Hình 8.1. Cách trình bày đoạn văn bản nào có định dạng đẹp hơn? Tại sao?

Trả lời:

• Cách trình bày ở hình b) đẹp hơn.
• Lý do:
• Có tiêu đề "Vội vàng" được in đậm, tách riêng, làm nổi bật tên bài thơ.
• Mỗi câu thơ được xuống dòng riêng, đúng với bố cục một bài thơ, dễ đọc.
• Khoảng cách dòng hợp lí, trình bày cân đối, rõ ràng.
• Trong khi đó hình a) gộp tất cả thành một đoạn liền mạch, không phân biệt tiêu đề với nội dung, các câu thơ bị dồn lại nên khó đọc và mất đi bố cục của bài thơ.

Ý nghĩa: Ví dụ này cho thấy vai trò của việc định dạng văn bản, dẫn dắt vào nội dung bài học về thuộc tính và các thẻ định dạng.

Bài 2: Hoạt động 1 – Nhận biết thuộc tính thẻ

Đề bài: Hãy quan sát các thẻ trong tệp newpage.html ở Hoạt động 2, Bài 7. Trong các thẻ đó có một thẻ có thêm thuộc tính. Theo em đó là thẻ nào? Em hãy đưa ra dự đoán về tác dụng của các thuộc tính thẻ.

Trả lời:

• Thẻ có thêm thuộc tính thường là thẻ với thuộc tính lang (ví dụ ). Đây là thẻ duy nhất trong cấu trúc HTML cơ bản ở Bài 7 mang kèm thuộc tính.
• Dự đoán tác dụng của thuộc tính:
• Bổ sung thêm thông tin cho thẻ.
• Làm rõ cách xử lí, cách hiển thị nội dung của thẻ. Ví dụ lang="vi" cho trình duyệt biết ngôn ngữ của trang web là tiếng Việt.

Giải thích: Theo lý thuyết ngay bên dưới hoạt động, "Thuộc tính của thẻ có tác dụng bổ sung thông tin, làm rõ cách xử lí cho thẻ chứa nó" – đúng với dự đoán trên.

Bài 3: Câu hỏi củng cố (Bài 7)

Đề bài: Xác định các tên thuộc tính và thẻ chứa thuộc tính tương ứng xuất hiện trong Bài 7.

Trả lời (dựa trên cấu trúc HTML cơ bản đã học ở Bài 7):

Giải thích: Trong tài liệu HTML chuẩn, thẻ thường đi kèm thuộc tính lang, còn thẻ đi kèm thuộc tính charset. Đây là các thuộc tính phổ biến nhất xuất hiện trong khung trang web cơ bản của Bài 7.

Bài 4: Hoạt động 2 – Xác định thành phần cấu thành một văn bản

Đề bài: Thảo luận: Khi trình bày một văn bản (bài thơ, đoạn văn, trang web,...) có thể có những thành phần nào? Hãy kể tên các thành phần đó.

Trả lời: Một văn bản khi trình bày thường gồm các thành phần:

• Tiêu đề chính và các tiêu đề con (đề mục).
• Các đoạn văn bản (paragraph).
• Hình ảnh minh họa.
• Danh sách (liệt kê có thứ tự hoặc không thứ tự).
• Bảng biểu.
• Liên kết (đường dẫn).
• Các định dạng nhấn mạnh: in đậm, in nghiêng, gạch chân, màu sắc, cỡ chữ,...

Giải thích: Đây là các thành phần cơ bản tạo nên một văn bản hoàn chỉnh; mỗi thành phần đều có thẻ HTML tương ứng để biểu diễn, mở đầu là thẻ tiêu đề trình bày ngay sau hoạt động.

Bài 5: Ví dụ 1 – Định dạng tiêu đề (Hình 8.2)

Đề bài: Đoạn mã HTML dưới đây minh họa một văn bản có bốn mức tiêu đề:

Tin học 12
Phần chung
Chủ đề 1. Máy tính và xã hội tri thức
1. Trí tuệ nhân tạo và ứng dụng
2. Trí tuệ nhân tạo trong khoa học và đời sống
Chủ đề 2. Mạng máy tính và Internet
3. Một số thiết bị mạng thông dụng
Chủ đề 2. Mạng máy tính và Internet
3. Thiết bị mạng

Phân tích kết quả (Hình 8.2):

• cho cỡ chữ lớn nhất, đậm nhất → "Tin học 12" (tiêu đề chính).

• nhỏ hơn → "Phần chung".

• nhỏ hơn nữa → các "Chủ đề".

• nhỏ nhất trong ví dụ → các mục con đánh số 1, 2, 3.

Bảng tóm tắt phân cấp:

Nhận xét: Các thẻ giúp tạo cấu trúc phân cấp rõ ràng. x càng nhỏ thì mức độ quan trọng càng cao và chữ hiển thị càng to, đậm. Nhờ đó người đọc dễ nắm bố cục văn bản, còn công cụ tìm kiếm dễ hiểu cấu trúc trang web.

Một điểm em nên để ý: trong đoạn mã có một chỗ lặp lại "Chủ đề 2. Mạng máy tính và Internet" ở hai thẻ

khác nhau – đây có thể là lỗi gõ trong sách, vì hợp lí thì hai chủ đề phải khác nội dung. Khi tự viết, em hãy đảm bảo mỗi tiêu đề có nội dung riêng nhé.

Nếu em muốn, cô có thể hướng dẫn thêm cách dùng thuộc tính style để đổi màu, cỡ chữ cho từng tiêu đề ở phần tiếp theo.