Lý thuyết Tin học 12 Bài 7 (Kết nối tri thức): HTML và cấu trúc trang web

Trịnh Thị Thu Hiền Ngày: 30-09-2024 Lớp 12

105

Với tóm tắt lý thuyết Tin học lớp 12 Bài 7: HTML và cấu trúc trang web sách Kết nối tri thức hay, chi tiết giúp học sinh nắm vững kiến thức trọng tâm, ôn luyện để học tốt môn Tin học 12.

Tin học 12 Bài 7: HTML và cấu trúc trang web

A. Lý thuyết Tin học 12 Bài 7: HTML và cấu trúc trang web

1. Trang web và html

a) Thẻ đánh dấu HTML

Trang web được thiết lập theo một ngôn ngữ có cấu trúc đặc biệt gọi là ngôn ngữ đánh dấu siêu văn bản HTML.

Các thẻ được viết trong cặp dấu “<”, “>”. Thông thường mỗi thẻ bao gồm thẻ bắt đầu và thẻ kết thúc, chỉ ra phạm vi tác dụng của thẻ.

Lưu ý.

Tên thẻ HTML không phân biệt chữ hoa, chữ thường nhưng mặc định tên thẻ được viết chữ thường.

Các thẻ có thể lồng nhau.

Mỗi thẻ có thể đi kèm các thông tin thuộc tính của thẻ.

Phần lớn các thẻ đều là thẻ đôi, tức là có thẻ bắt đầu (opening tag) và thẻ kết thúc (closing tag). Vị trí kết thúc thẻ có thêm dấu “/”.

Tuy nhiên có một số loại thẻ đơn, tức là chỉ có thẻ bắt đầu.

HTML và trình duyệt không nhận biết được nhiều dấu cách. Trình duyệt cũng không nhận biết dấu xuống dòng khi người dùng nhấn phím Enter.

b) Phần tử HTML

Các tệp HTML là tệp văn bản được cấu tạo từ các phần tử HTML. Mỗi phần tử HTML gồm nội dung được đánh dấu bởi các thẻ (HTML tag) có tính năng điều khiển hoặc định dạng nội dung. Trình duyệt có chức năng hiển thị nội dung trang web theo đúng định dạng được thiết lập.

2. Cấu trúc cơ bản của một tệp html

1. $<! D O C T Y P E h t m l >$ : Dòng này thông báo cho trình duyệt biết đây là tệp văn bản HTML.

2. $< h t m l >$ : Phần tử gốc chứa toàn bộ nội dung HTML của trang web, bao gồm $< h e a d >$ và $< b o d y >$ .

3. $< h e a d >$ : Chứa các thông tin chung cho trang web như $< t i t \leq >$ , $< m η >$ , $< s t y \leq >$ , $< s c r i p t >$ .

4. $< b o d y >$ : Chứa nội dung hiển thị của trang web.

5. $< m η >$ : Dùng để mô tả các thông tin bổ sung như mã hoá, từ khoá, tác giả. Nằm trong $< h e a d >$ .

6. $< t i t \leq >$ : Đặt tên cho trang web, xuất hiện trong kết quả tìm kiếm.

7. Các thẻ định dạng văn bản như $< h 1 >$ đến $< h 6 >$ và $< p >$ để biểu thị tiêu đề và đoạn văn bản.

Lưu ý: HTML không nhận biết kí tự xuống dòng để kết thúc đoạn văn bản như các phần mềm soạn thảo văn bản thông thường.

Cấu trúc cơ bản của tập HTML có dạng như một cây thông tin các phần tử HTML. Quan hệ cha – con của các nút trên cây được mô tả bằng sự lồng nhau của các phần tử (hay thẻ) HTML. Gốc của cây HTML chính là phần tử HTML.

3. Phần mềm soạn thảo của HTML

a) Phần mềm Notepad: là phần mềm soạn thảo văn bản đơn giản

b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở

- Phần mềm Notepad++

- Phần mềm Sublime Text

c) Sử dụng trang web hỗ trợ soạn thảo HTML trực tuyến

Yêu cầu máy tính có kết nối Internet và cài đặt trình duyệt chuẩn, có thể quan sát ngay kết quả hiển thị trang web trên trình duyệt.

B. Trắc nghiệm Tin học 12 Bài 7: HTML và cấu trúc trang web

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: Phần tử HTML nào chứa nội dung hiển thị của trang web?

A. <header>

B. <body>

C. <main>

D. <footer>

Hướng dẫn giải

Đáp án: B

Giải thích: Phần tử <body> chứa nội dung chính của trang web, bao gồm văn bản, hình ảnh, và các phần tử khác.

Câu 2: Thẻ nào sau đây dùng để mô tả các thông tin bổ sung như mã hoá và từ khoá?

A. <style>

B. <meta>

C. <script>

D. <link>

Hướng dẫn giải

Đáp án: B

Giải thích: Thẻ <meta> được sử dụng trong phần <head> của tài liệu HTML để cung cấp các thông tin như mã hóa ký tự, từ khóa, và thông tin tác giả.

Câu 3: Thẻ <p> trong HTML dùng để tạo phần tử nào?

A. Tiêu đề

B. Đoạn văn bản

C. Hình ảnh

D. Liên kết

Hướng dẫn giải

Đáp án: B

Giải thích: Thẻ <p> dùng để tạo đoạn văn bản trong HTML.

Câu 4: Để soạn thảo HTML chuyên nghiệp, người ta có thể sử dụng phần mềm nào sau đây?

A. WordPad

B. Notepad++

C. Microsoft Word

D. Excel

Hướng dẫn giải

Đáp án: B

Giải thích: Notepad++ là một phần mềm soạn thảo văn bản nguồn mở chuyên nghiệp, thường được sử dụng để viết mã HTML.

Câu 5: Thẻ HTML <h1> đến <h6> được sử dụng để?

A. Định dạng văn bản thành tiêu đề

B. Chèn hình ảnh

C. Tạo liên kết

D. Tạo danh sách

Hướng dẫn giải

Đáp án: A

Giải thích: Các thẻ từ <h1> đến <h6> được sử dụng để định dạng văn bản thành các tiêu đề, với <h1> là tiêu đề lớn nhất và <h6> là tiêu đề nhỏ nhất.

Câu 6: Thẻ HTML được viết trong cặp dấu nào?

A. { }

B. [ ]

C. ( )

D. < >

Hướng dẫn giải

Đáp án: D

Giải thích: Các thẻ HTML được viết trong cặp dấu < và >. Thẻ bắt đầu và thẻ kết thúc của một phần tử HTML được xác định bằng cách sử dụng dấu < và >, với thẻ kết thúc có thêm dấu gạch chéo /.

Câu 7: Tên thẻ HTML có phân biệt chữ hoa và chữ thường không?

A. Có, luôn phải viết chữ hoa

B. Có, luôn phải viết chữ thường

C. Không phân biệt, nhưng thường viết chữ thường

D. Không phân biệt, nhưng thường viết chữ hoa

Hướng dẫn giải

Đáp án: C

Giải thích: HTML không phân biệt chữ hoa và chữ thường cho tên thẻ, nhưng quy ước chung là viết bằng chữ thường.

Câu 8: Thẻ HTML nào dưới đây là thẻ đơn?

A. <div>

B. <img>

C. <h1>

D. <p>

Hướng dẫn giải

Đáp án: C

Giải thích: HTML không phân biệt chữ hoa và chữ thường cho tên thẻ, nhưng quy ước chung là viết bằng chữ thường.

Câu 9: Phần tử nào chứa toàn bộ nội dung HTML của trang web?

A. <head>

B. <body>

C. <html>

D. <footer>

Hướng dẫn giải

Đáp án: C

Giải thích: Phần tử <html> chứa toàn bộ nội dung HTML của trang web, bao gồm cả <head> và <body>.

Câu 10: Thẻ nào dùng để đặt tên cho trang web, xuất hiện trong kết quả tìm kiếm?

A. <meta>

B. <title>

C. <header>

D. <script>

Hướng dẫn giải

Đáp án: B

Giải thích: Thẻ <title> được sử dụng để đặt tên cho trang web, và tên này thường xuất hiện trên tab của trình duyệt và trong kết quả tìm kiếm.

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: Phát biểu sau đây đúng hay sai về các đặc điểm của thẻ HTML?

a) Thẻ HTML luôn phải có cả thẻ bắt đầu và thẻ kết thúc.

b) Tên thẻ HTML không phân biệt chữ hoa và chữ thường.

c) Các thẻ HTML có thể lồng nhau.

d) Trình duyệt không nhận biết được dấu cách dư thừa trong mã HTML.

Hướng dẫn giải

a) Sai - Có những thẻ đơn chỉ có thẻ bắt đầu, chẳng hạn như thẻ <img> hoặc <br>.

b) Đúng - Tên thẻ HTML không phân biệt chữ hoa và chữ thường, nhưng thông thường được viết bằng chữ thường.

c) Đúng - Các thẻ HTML có thể lồng nhau để tạo cấu trúc phức tạp.

d) Đúng - Trình duyệt không nhận biết được nhiều dấu cách dư thừa và cũng không nhận biết dấu xuống dòng khi người dùng nhấn Enter.

Câu 2: Phát biểu sau đây đúng hay sai về cấu trúc và các phần tử HTML?

a) Dòng <!DOCTYPE html> thông báo cho trình duyệt biết đây là tệp HTML5.

b) Phần tử <html> chứa tất cả các nội dung của trang web, bao gồm cả <head> và <body>.

c) Thẻ <meta> chỉ được sử dụng để xác định mã hóa ký tự cho trang web.

d) Các thẻ định dạng như <h1> đến <h6> và <p> được sử dụng để định dạng văn bản thành tiêu đề và đoạn văn bản.

Hướng dẫn giải

a) Đúng - <!DOCTYPE html> xác định tài liệu là một tài liệu HTML5.

b) Đúng - Phần tử <html> là phần tử gốc chứa toàn bộ nội dung của trang web.

c) Sai - Thẻ <meta> có thể được sử dụng cho nhiều mục đích khác nhau, bao gồm cung cấp từ khóa, tác giả, và mô tả bổ sung cho trang web.

d) Đúng - Các thẻ từ <h1> đến <h6> và <p> được sử dụng để định dạng văn bản thành các tiêu đề và đoạn văn bả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: Thẻ HTML là gì và nó có đặc điểm gì?

Hướng dẫn giải

Đáp án: Thẻ HTML là các thành phần được viết trong cặp dấu < và >, được sử dụng để đánh dấu và định dạng nội dung trên trang web. Các thẻ HTML có thể có thẻ bắt đầu và thẻ kết thúc, hoặc chỉ có thẻ bắt đầu. Tên thẻ không phân biệt chữ hoa, chữ thường và có thể lồng nhau.

Giải thích: Thẻ HTML là thành phần cơ bản để tạo nên cấu trúc và định dạng cho nội dung trang web. Các thẻ đôi có thẻ bắt đầu và thẻ kết thúc, trong khi thẻ đơn chỉ có thẻ bắt đầu. Tên thẻ HTML có thể viết bằng chữ hoa hoặc chữ thường, nhưng thông thường viết chữ thường.

Câu 2: Phần tử HTML là gì?

Hướng dẫn giải

Đáp án: Phần tử HTML là các thành phần được định nghĩa bằng thẻ HTML, chứa nội dung và có thể đi kèm với các thuộc tính. Vai trò của phần tử HTML là điều khiển hoặc định dạng nội dung, giúp trình duyệt hiển thị đúng định dạng của trang web.

Giải thích: Đúng. Phần tử HTML bao gồm nội dung và các thẻ HTML để điều khiển hoặc định dạng nội dung đó. Trình duyệt sử dụng các phần tử HTML để hiển thị trang web theo cách thức đã được định nghĩa.

Câu 3: Phần tử HTML là gì và vai trò của nó trong một tệp HTML?

Hướng dẫn giải

Đáp án: Cấu trúc cơ bản của một tệp HTML bao gồm các phần tử chính: <!DOCTYPE html>, <html>, <head>, và <body>. <html> chứa toàn bộ nội dung của trang, <head> chứa thông tin chung như <title> và <meta>, và <body> chứa nội dung hiển thị.

Giải thích: Đúng. <!DOCTYPE html> xác định tệp là tài liệu HTML5. <html> là phần tử gốc bao gồm toàn bộ nội dung, <head> chứa thông tin chung và cài đặt của trang, và <body> chứa nội dung hiển thị chính cho người dùng.

Xem thêm các bài tóm tắt lý thuyết Tin học 12 Kết nối tri thức hay, chi tiết khác:

Lý thuyết Bài 6: Giao tiếp và ứng xử trong không gian mạng

Lý thuyết Bài 7: HTML và cấu trúc trang web

Lý thuyết Bài 8: Định dạng văn bản

Lý thuyết Bài 9: Tạo danh sách, bảng

Lý thuyết Bài 10: Tạo liên kết

Lý thuyết Bài 11: Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web