BÀI F1 - HTML VÀ TRANG WEB (CTST

BÀI F1 - HTML VÀ TRANG WEB (CTST - CS & ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 100 sách ict, trang 67 sách cs)

Em hãy chỉ ra những thành phần chính của trang web trong Hình 1.

Gợi ý trả lời

Những thành phần chính của trang web trong Hình 1. gồm:
- Tiêu đề trang (header): Chứa tên trang, menu chính.
- Thanh điều hướng (navigation bar): Liên kết đến các phần/trang khác.
- Nội dung chính (main content): Nơi hiển thị thông tin chính.
- Thanh bên (sidebar): Có thể chứa menu phụ, liên kết, quảng cáo.
- Chân trang (footer): Chứa thông tin bản quyền, liên hệ, liên kết mạng xã hội.

(trang 101 sách ict, trang 68 sách cs)

1. Em hãy kể tên một ngôn ngữ đánh dấu dùng để tạo ra trang web và cho biết phiên bản hiện nay của ngôn ngữ này.
2. Các trình duyệt khác nhau có thể kết xuất một trang web tương tự nhau không?

Gợi ý trả lời

1. Ngôn ngữ đánh dấu và phiên bản hiện nay:
- Ngôn ngữ: HTML (HyperText Markup Language).
- Phiên bản hiện nay: HTML5.
2. Không hoàn toàn giống nhau. Các trình duyệt như Chrome, Firefox, Edge, Safari có thể hiển thị khác nhau đôi chút do cách diễn giải mã HTML và CSS khác nhau. Vì vậy, cần kiểm tra tính tương thích.

(trang 104+105 sách ict, trang 71+72 sách cs)

1. Em hãy truy cập trang web https://chantroisangtao.vn, quan sát và nhận xét về bố cục trình bày của trang web này.
2. Chọn đáp án đúng cho câu hỏi dưới đây.
Phần nội dung hiển thị trên thanh tiêu đề của cửa sổ trình duyệt được đặt trong cặp thẻ HTML nào?
A. <head></head>. B. <html></html>.
C. <title></title>. D. <body></body>.
3. Cách viết thẻ HTML có nhiều thuộc tính sau đây đúng hay sai?
<font face="Arial"; size="10px"; color="green">Xin chào</font>

Gợi ý trả lời

1. Bố cục rõ ràng, có các phần:
- Header với logo và thanh menu.
- Phần nội dung chính chia thành các mục: bài viết, hình ảnh.
- Sidebar (nếu có) với tin nổi bật hoặc liên kết nhanh.
- Footer chứa thông tin liên hệ và bản quyền.
2. Chọn đáp án đúng cho câu hỏi dưới đây.
Phần nội dung hiển thị trên thanh tiêu đề của cửa sổ trình duyệt được đặt trong cặp thẻ HTML nào?
Đáp án đúng: C. <title></title>
3. Sai.
- Dấu chấm phẩy (;) không dùng để phân cách thuộc tính trong HTML.
- Viết đúng phải là:
<font face="Arial" size="10px" color="green">Xin chào</font>

(trang 105 sách ict, trang 72 sách cs)

1. Thảo luận với bạn và trình bày những hiểu biết của em về ngôn ngữ HTML.
2. Em hãy trình bày cấu trúc của một trang web cơ bản bằng cách liệt kê tên và công dụng của các thẻ.
3. Chọn đáp án đúng cho các câu hỏi dưới đây.
a) Phần tử HTML nào sau đây chỉ có thẻ mở?
A. <h1>. B. <p>. C. <hr>. D. <div>.
b) Phần tử HTML nào sau đây có đủ thẻ mở và thẻ đóng?
A. <img>. B. <br>. C. <strong>. D. <input>.

Gợi ý trả lời

1. Hiểu biết của em về ngôn ngữ HTML.
HTML là ngôn ngữ đánh dấu siêu văn bản dùng để tạo cấu trúc cơ bản cho trang web. Nó gồm các thẻ (tag) để định nghĩa nội dung như tiêu đề, đoạn văn, hình ảnh, liên kết,...
2. Cấu trúc cơ bản của một trang web:
1. <!DOCTYPE html>
Công dụng: Khai báo kiểu tài liệu, cho trình duyệt biết đây là trang web HTML5.
2. <html> – Thẻ khai báo tài liệu HTML
- Công dụng: Bao bọc toàn bộ nội dung của trang web.
- Ghi chú: Đây là thẻ gốc (gốc cây DOM), tất cả các thẻ khác đều nằm bên trong thẻ này.
3. <head> – Phần đầu trang
- Công dụng: Chứa các thông tin "ẩn" như tiêu đề trang, mô tả, liên kết CSS, mã JavaScript, bộ ký tự,...
- Ví dụ các thẻ thường dùng trong <head>:
+ <title>: Tiêu đề của trang hiển thị trên tab trình duyệt.
+ <meta>: Khai báo thông tin bổ sung như charset (bảng mã), mô tả, từ khóa,...
+ <link>: Liên kết đến file CSS hoặc icon trang.
+ <style>: Viết CSS trực tiếp trong HTML.
+ <script>: Nhúng mã JavaScript.
4. <body> – Phần thân trang
- Công dụng: Chứa toàn bộ nội dung hiển thị ra màn hình (văn bản, hình ảnh, video, liên kết, bảng,...)
5. Các thẻ nội dung chính trong <body>:
5.1. <h1> đến <h6> – Tiêu đề (heading)
- Công dụng: Tiêu đề từ lớn đến nhỏ (h1 là lớn nhất).
- Thường dùng để phân chia các phần nội dung.
5.2. <p> – Đoạn văn (paragraph)
- Công dụng: Hiển thị đoạn văn bản.
5.3. <a> – Liên kết (anchor)
- Công dụng: Tạo liên kết đến trang khác hoặc nơi khác trên cùng trang.
- Thuộc tính thường dùng: href="URL".
5.4. <img> – Hình ảnh
- Công dụng: Chèn hình ảnh vào trang.
- Thuộc tính thường dùng: src="đường_dẫn" và alt="mô tả".
5.5. <ul>, <ol>, <li> – Danh sách
- Công dụng:
+ <ul>: Danh sách không thứ tự (dấu chấm).
+ <ol>: Danh sách có thứ tự (số).
+ <li>: Mỗi mục trong danh sách.
5.6. <div> – Khối (division)
- Công dụng: Tạo khối bao quanh nội dung, dùng để nhóm và bố cục trang.
- Thường kết hợp với CSS để định dạng.
5.7. <span> – Gắn thẻ cho nội dung trong dòng
- Công dụng: Nhóm chữ hoặc phần tử trong một dòng để định dạng (giống như <div> nhưng là inline).
6. Các thẻ hỗ trợ khác:
6.1. <br/> – Xuống dòng
- Công dụng: Ngắt dòng trong đoạn văn.
6.2. <hr> – Gạch ngang
- Công dụng: Tạo một đường kẻ ngang chia cách nội dung.
6.3. <table>, <tr>, <td>, <th> – Bảng
- Công dụng:
+ <table>: Tạo bảng.
+ <tr>: Tạo dòng trong bảng.
+ <td>: Tạo ô dữ liệu.
+ <th>: Tạo ô tiêu đề.
3. Chọn đáp án đúng cho các câu hỏi dưới đây.
a) Phần tử HTML nào sau đây chỉ có thẻ mở?
Đáp án đúng: C. <hr>
b) Phần tử HTML nào sau đây có đủ thẻ mở và thẻ đóng?
Đáp án đúng: C. <strong>

(trang 105 sách ict, trang 72 sách cs)

1. Thực hiện hiệu chỉnh trang web portfolio.html trong các ví dụ của bài học để giới thiệu vài thông tin của bản thân. Trong đó, sử dụng các thẻ <h1> và <p>. Hình 8 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

2. Em hãy sử dụng Visual Studio Code để tạo trang web index.html giới thiệu ngắn về lớp em, trong đó sử dụng những thẻ đã học để định dạng cho phần nội dung văn bản.
3. Em hãy tìm hiểu thêm một số thuộc tính khác của thẻ <body> như background-color, text-decoration, margin-left, margin-top.
4. Ngoài thẻ <meta> và <title>, hãy kể tên vài thẻ khác có thể có trong cặp thẻ <head></head>.

Gợi ý trả lời

1. Hiệu chỉnh trang portfolio.html
- Mở file portfolio.html
- Chèn nội dung như sau:

2. Tạo trang index.html giới thiệu lớp học.
Ví dụ:

3. Tìm hiểu thêm một số thuộc tính khác của thẻ <body> như background-color, text-decoration, margin-left, margin-top.
1. background-color
- Chức năng: Thay đổi màu nền của phần tử (ví dụ: trang web hoặc khối văn bản).
- Cách dùng với thẻ <body>:
<body style="background-color: lightblue;">
- Giải thích: Toàn bộ trang web sẽ có nền màu xanh nhạt.
2. text-decoration
- Chức năng: Trang trí chữ, thường dùng để gạch chân, gạch ngang, hoặc bỏ gạch chân.
- Giá trị phổ biến:
+ none – không có trang trí
+ underline – gạch chân
+ line-through – gạch ngang chữ
+ overline – gạch trên đầu chữ
- Ví dụ dùng trong phần tử con của <body>:
<p style="text-decoration: underline;">Văn bản được gạch chân</p>
<a href="#" style="text-decoration: none;">Liên kết không gạch chân</a>
Lưu ý: text-decoration thường áp dụng cho các thẻ văn bản như <p>, <a>, không dùng trực tiếp cho <body>.
3. margin-left
- Chức năng: Tạo khoảng cách bên trái giữa phần tử và cạnh trình duyệt hoặc phần tử cha.
- Đơn vị thường dùng: px, em, %, rem
- Ví dụ:
<body style="margin-left: 50px;">
- Giải thích: Toàn bộ nội dung trong trang sẽ lùi vào 50px từ mép trái của trình duyệt.
4. margin-top
- Chức năng: Tạo khoảng cách từ phía trên xuống cho phần tử.
- Ví dụ:
<body style="margin-top: 30px;">
- Giải thích: Nội dung sẽ được đẩy xuống cách mép trên của trình duyệt 30px.
4. Một số thẻ khác có trong <head> ngoài <meta> và <title>:
- <link>: liên kết tới tệp CSS.
- <style>: chèn CSS trực tiếp.
- <script>: nhúng mã JavaScript.
- <base>: xác định URL cơ sở cho các liên kết tương đối.

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài A1. Giới thiệu Trí tuệ nhân tạo
Bài A2. Trí tuệ nhân tạo và cuộc sống
Bài A3(ict). Thực hành kết nối thiết bị số với máy tính
Bài A4(ict). Thực hành kết nối thiết bị số với máy tính (tiếp theo)

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

Bài B1. Thiết bị và giao thức mạng
Bài B2. Các chức năng mạng của hệ điều hành
Bài B3. Thực hành kết nối và sử dụng mạng trên thiết bị thông minh
Bài B4(cs). Vai trò của các thiết bị mạng
Bài B5(cs). Đường truyền hữu tuyến và vô tuyến
Bài B6(cs). Thiết kế mạng nội bộ
Bài B7(cs). Thực hành thiết kế mạng nội bộ

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

Bài E1(ict). Tạo trang web, thiết lập giao diện và xem trước trang web
Bài E2(ict). Tạo, hiệu chỉnh trang web và thiết kế thanh điều hướng
Bài E3(ict). Tạo văn bản, chèn hình ảnh và tạo chân trang
Bài E4(ict). Sử dụng Content Blocks, Buttun, Divider
Bài E5(ict). Nhúng mã và tạo băng chuyền hình ảnh
Bài E6(ict). Chèn YouTube, Calendar, Drive và Collapsible group
Bài E7(ict). Sử dụng Map, Form và các thiết lập trang web
Bài E8(ict). Hoàn thiện và xuất bản trang web

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH