Lý thuyết Tin học 12 Bài 2 (Cánh diều): Định dạng văn bản và tạo siêu liên kết

Lý thuyết Tin học 12 Bài 2: Định dạng văn bản và tạo siêu liên kết

1. Tổ chức các đoạn văn bản trong trang web

Phân đoạn văn bản trên trang web:

- Nội dung trên trang web thường được chia thành các đoạn văn bản để làm rõ các ý và làm cho văn bản dễ hiểu, dễ đọc hơn cho người dùng.

- Phần tử `<p>` được sử dụng để tạo các đoạn văn bản trên trang web, ví dụ như:

<p>Văn bản</p>

- Trên màn hình của trình duyệt web, "Văn bản" sẽ hiển thị trên một đoạn mới và được phân tách với các thành phần khác bằng một khoảng trống giữa hai đoạn văn bản.

- Các đoạn văn bản có thể chứa các phần tử HTML khác nhau để định dạng và cấu trúc hóa nội dung.

Tóm lại, phần tử `<p>` giúp tạo ra các đoạn văn bản rõ ràng và dễ đọc trên trang web, cung cấp một phương tiện hiệu quả để tổ chức và hiển thị nội dung cho người dùng.

2. Tạo đề mục

- HTML hỗ trợ sáu cấp tiêu đề mục được phân cấp từ lớn đến nhỏ, đánh số từ h1 đến h6. Các phần tử này được định nghĩa bởi các thẻ `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` tương ứng.

- Các phần tử tiêu đề mục được khai báo như sau:

<Cấp của tiêu đề mục> Tiêu đề mục </Cấp của tiêu đề mục>

trong đó `<Cấp của tiêu đề mục>` là một trong các thẻ `<h1>` đến `<h6>`.

- Mặc định, trình duyệt web sẽ hiển thị các tiêu đề mục với kiểu chữ in đậm và kích thước chữ khác nhau.

- Phần tử `<h1>` tạo tiêu đề mục có kích thước chữ lớn nhất và từ `<h2>` đến `<h6>`, kích thước chữ sẽ giảm dần.

=> Các phần tử tiêu đề mục trong HTML cho phép tổ chức nội dung của trang web theo mức độ quan trọng và cung cấp các lựa chọn khác nhau về kiểu chữ và kích thước để làm nổi bật các phần nội dung khác nhau.

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

HTML làm nổi bật nội dung trong văn bản bằng cách thay đổi định dạng của phần nội dung đó khi hiển thị trên màn hình trình duyệt web.

Ví dụ 3. Nội dung trong phần body của văn bản HTML

Hình 3a có sử dụng các phần tử strong, em, mark để làm nổi bật nội dung văn bản.

Hình 3b là kết quả hiển thị văn bản HTML ở Hình 3a trên màn hình trình duyệt web.

Lưu ý: HTML định nghĩa thêm phần tử b để in đậm văn bản và phần tử i để in nghiêng văn bản.

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

- Phần tử `<a>` trong HTML:

- Được sử dụng để tạo các siêu liên kết (hyperlinks) trong trang web để kết nối với các tài nguyên web khác như trang web, hình ảnh, âm thanh, đoạn phim, vv.

- Định dạng khai báo của phần tử `<a>` là

<a href=“URL”>Liên kết web <a

Trong đó thuộc tính `href` xác định địa chỉ của tài nguyên web trên Internet.

- URL (Uniform Resource Locator) bao gồm giao thức, tên miền và đường dẫn đến tài nguyên cụ thể.

Hiển thị và chức năng của siêu liên kết:

- Siêu liên kết là các đoạn văn bản hiển thị trên trình duyệt web cho phép người dùng nhấp chuột để điều hướng đến tài nguyên được liên kết.

- Nếu chỉ cung cấp tên miền trong URL mà không có giao thức (`http://` hoặc `https://`), trình duyệt sẽ mở trang chủ của tên miền đó khi nhấp vào liên kết.

- Liên kết đến phần tử trong cùng một trang web:

- Để liên kết đến một phần tử trong cùng trang web, mỗi phần tử có thể được gán một định danh duy nhất (`id`) bằng thuộc tính `id="Tên_định_danh"`.

- Để tạo siêu liên kết đến phần tử này, bạn sử dụng URL theo cú pháp `#Tên_định_danh`.

=> Phần tử `<a>` trong HTML cho phép tạo ra các liên kết giữa các trang web và đến các phần tử cụ thể trên cùng một trang, cung cấp cho người dùng cách tiếp cận nhanh chóng và thuận tiện đến các tài nguyên trên Internet.

Trắc nghiệm: Định dạng văn bản và tạo siêu liên kết

PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

Câu 1: Thẻ nào được sử dụng để tạo các đoạn văn bản trên trang web trong HTML?

A. <h1>

B. <a>

C. <p>

D. <div>

Câu 2: HTML hỗ trợ bao nhiêu cấp tiêu đề mục từ lớn đến nhỏ?

A. 3

B. 4

C. 5

D. 6

Câu 3: Phần tử nào trong HTML được sử dụng để in đậm văn bản?

A. <strong>

B. <em>

C. <mark>

D. <b>

Câu 4: Phần tử <a> trong HTML được sử dụng để làm gì?

A. Tạo các đoạn văn bản

B. Tạo các tiêu đề

C. Tạo các siêu liên kết

D. Tạo các bảng

Câu 5: Thuộc tính nào trong thẻ <a> xác định địa chỉ của tài nguyên web?

A. id

B. src

C. href

D. class

Câu 6: Để tạo siêu liên kết đến một phần tử trong cùng trang web, bạn sử dụng cú pháp nào?

A. <a href="http://example.com">

B. <a href="#Tên_định_danh">

C. <a href="mailto:email@example.com">

D. <a href="tel:123456789">

Câu 7: Phần tử nào được sử dụng để làm nổi bật văn bản bằng cách thay đổi định dạng?

A. <b>

B. <i>

C. <mark>

D. <p>

Câu 8: Nếu bạn chỉ cung cấp tên miền trong URL mà không có giao thức, trình duyệt sẽ làm gì?

A. Mở trang chủ của tên miền đó

B. Hiển thị lỗi

C. Tìm kiếm trên Internet

D. Chuyển hướng đến trang mặc định

Câu 9: Phần tử nào trong HTML được sử dụng để in nghiêng văn bản?

A. <b>

B. <i>

C. <u>

D. <strong>

Câu 10: Các phần tử tiêu đề mục trong HTML được hiển thị với kiểu chữ và kích thước như thế nào?

A. Tất cả đều có cùng kích thước và kiểu chữ

B. Kích thước chữ giảm dần từ <h1> đến <h6> và kiểu chữ in đậm

C. Kích thước chữ tăng dần từ <h1> đến <h6> và kiểu chữ in nghiêng

D. Kích thước chữ không thay đổi và kiểu chữ khác nhau tùy thuộc vào trình duyệt

PHẦN II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

Câu 1: Xác định câu đúng/sai về việc sử dụng thẻ <p> trong HTML để phân đoạn văn bản:

a) Thẻ <p> được sử dụng để tạo các đoạn văn bản, và mỗi đoạn văn bản được phân tách bằng một khoảng trống giữa các đoạn.

b) Thẻ <p> không thể chứa các phần tử HTML khác mà chỉ dùng để tạo các đoạn văn bản đơn thuần.

c) Trên màn hình trình duyệt, nội dung trong thẻ <p> sẽ được hiển thị trong một đoạn mới với khoảng trống giữa các đoạn văn bản.

d) Thẻ <p> giúp tổ chức nội dung văn bản trên trang web nhưng không ảnh hưởng đến cách hiển thị trên trình duyệt.

Câu 2: Xác định câu đúng/sai về việc sử dụng thẻ <a> để tạo siêu liên kết trong HTML:

a) Thẻ <a> dùng để tạo siêu liên kết với thuộc tính href để xác định địa chỉ của tài nguyên web.

b) Nếu URL trong thuộc tính href không có giao thức (http:// hoặc https://), trình duyệt sẽ không mở trang web mà hiển thị lỗi.

c) Thẻ <a> có thể tạo liên kết đến phần tử trong cùng một trang bằng cách sử dụng cú pháp #Tên_định_danh trong thuộc tính href.

d) Thẻ <a> không hỗ trợ liên kết đến các tài nguyên như hình ảnh hoặc âm thanh, chỉ có thể liên kết đến các trang web.

PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

Câu 1: Mục đích của thẻ <p> trong HTML là gì?

Câu 2: Các thẻ tiêu đề trong HTML được phân cấp từ lớn đến nhỏ như thế nào?

Câu 3: Thẻ <a> trong HTML được sử dụng để làm gì và thuộc tính nào xác định địa chỉ của tài nguyên?