Bài 1: Đếm số dòng hiển thị

Đề bài: Trình duyệt hiển thị đoạn mã html sau thành mấy dòng? Em có nhận xét gì về khoảng cách giữa các dòng?

 Thẻ p tạo đoạn nội dung, 
thẻ div tạo khối chứa dữ liệu. 

Các thẻ này 
 không có hình thức trình bày riêng 
 mà được định dạng
 bằng thuộc tính style. 

Lời giải

Đầu tiên, ta tách ra có 5 đoạn

...

1. Thẻ p tạo đoạn nội dung,
2. thẻ div tạo khối chứa dữ liệu.
3. Các thẻ này
không có hình thức trình bày riêng
4. mà được định dạng
5. bằng thuộc tính style.

Trong đó đoạn thứ 3 có thẻ
nên bị xuống dòng thành 2 dòng:

• Các thẻ này
• không có hình thức trình bày riêng

Đáp án: Trình duyệt hiển thị thành 6 dòng.

Nhận xét về khoảng cách

• Giữa các đoạn

  (dòng 1↔2, 2↔3, 4↔5...) có khoảng trống lớn hơn vì thẻ

  tự thêm một khoảng cách trước và sau mỗi đoạn.

• Riêng chỗ dùng
(trong đoạn 3) chỉ đơn thuần xuống dòng, không có khoảng trống thêm, nên hai dòng đó sát nhau hơn so với khoảng cách giữa các đoạn

  .

Bài 2: Thêm đường kẻ ngang vào Ví dụ 1

Đề bài: Chỉnh sửa đoạn mã html trong Ví dụ 1 để hiển thị thêm một đường kẻ ngang phân tách giữa dòng tiêu đề "Tin học 12" và nội dung phía dưới.

Lời giải

Ví dụ 1 ở trang trước có dạng tiêu đề rồi đến nội dung, đại khái như sau. Ta chỉ cần chèn thẻ

Tin học 12

Nội dung phía dưới...

Giải thích

• Thẻ

  ---

  (horizontal rule) tạo một đường kẻ ngang trên trang web.
• Đặt

  ---

  ngay sau thẻ tiêu đề

  Tin học 12

  sẽ vẽ một đường kẻ ngăn cách phần tiêu đề với phần nội dung bên dưới, đúng yêu cầu đề bài.

Hoạt động 3 (Thảo luận)

Đề bài: Khi muốn nhấn mạnh vào một nội dung trong văn bản, em thường thấy nội dung đó được viết như thế nào?

Gợi ý trả lời

Khi muốn nhấn mạnh một nội dung, người ta thường trình bày nội dung đó khác với phần còn lại để gây chú ý, ví dụ:

• In đậm
• In nghiêng
• Gạch chân
• Tô màu nổi bật (highlight) hoặc đổi màu chữ
• Tăng cỡ chữ

Đây chính là các kiểu định dạng được giới thiệu trong Bảng 8.1 ngay sau hoạt động này (các thẻ , , , ...).