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>.
C. <title></title>.
B. <html></html>.
D. <body></body>.
Bài F1. HTML và trang web
Câu hỏi 2 mục 2 (SGK Chân trời sáng tạo - Trang 71)
Thảo luận (1)
Câu hỏi 1 mục 2 (SGK Chân trời sáng tạo - Trang 71)
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.
Thảo luận (1)Hướng dẫn giảiEm đã truy cập trang web Chân trời sáng tạo tại đây. Dưới đây là nhận xét về bố cục trình bày của trang web này:
- Chuẩn mực và gọn gàng:
+ Trang web có bố cục gọn gàng, không quá nhiều thông tin đè lên nhau.
+ Các phần được sắp xếp theo thứ tự logic, giúp người dùng dễ dàng tìm kiếm thông tin.
- Thanh điều hướng:
+ Thanh menu ở phía trên trang web chứa các mục chính như "Sách giáo khoa", "Hành trang số", "Phân loại",...
+ Thanh menu giúp người dùng dễ dàng di chuyển giữa các phần khác nhau của trang.
- Thiết kế hình ảnh và biểu đồ:
+ Trang web sử dụng hình ảnh và biểu đồ để minh họa thông tin về các bộ sách giáo khoa.
+ Các hình ảnh được chọn kỹ lưỡng, tạo ấn tượng cho người xem.
- Phần chia sẻ thông tin:
+ Trang web cung cấp thông tin về các bộ sách giáo khoa, hệ tài nguyên, sách điện tử, và các lớp học.
+ Các phần thông tin được trình bày rõ ràng, dễ hiểu.
- Chân trang:
+ Chân trang chứa các liên kết hữu ích như "Hỗ trợ", "Hệ tài nguyên", "Giới thiệu sách giáo khoa",...
+ Các liên kết này giúp người dùng tìm kiếm thông tin bổ sung.
Tổng quan, trang web Chân trời sáng tạo có bố cục hợp lý, dễ sử dụng và trình bày thông tin một cách rõ ràng.
(Trả lời bởi Nguyễn Quốc Đạt)
Luyện tập 3 (SGK Chân trời sáng tạo - Trang 72)
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>.
Thảo luận (1)Hướng dẫn giảia)
Đáp án đúng là C. <hr>. Phần tử <hr> chỉ có thẻ mở và không có thẻ đóng. Nó được sử dụng để tạo một đường ngang (horizontal rule) để phân chia nội dung trên trang web.
b)
Đáp án đúng là A. <img>. Phần tử <img> được sử dụng để chèn hình ảnh vào trang web và có cả thẻ mở và thẻ đóng.
(Trả lời bởi Nguyễn Quốc Đạt)
Câu hỏi 3 mục 2 (SGK Chân trời sáng tạo - Trang 72)
Cách viết thẻ HTML có nhiều thuộc tính sau đây đúng hay sai?
Thảo luận (1)Hướng dẫn giảiCách viết thẻ HTML có nhiều thuộc tính là đúng. Vì mỗi thẻ HTML có thể có một hoặc nhiều thuộc tính hoặc không có thuộc tính để định dạng nội dung.
(Trả lời bởi Nguyễn Quốc Đạt)
Luyện tập 2 (SGK Chân trời sáng tạo - Trang 72)
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ẻ.
Thảo luận (1)Hướng dẫn giải<html>: Định nghĩa đoạn mã HTML.
<head>: Phần mở đầu của trang web.
<title>: Tiêu đề của trang web.
<body>: Phần nội dung chính của trang web.
<h1> to <h6>: Tiêu đề của các phần.
<p>: Đoạn văn bản.
<a>: Liên kết đến các trang web khác hoặc các phần tử trong cùng một trang.
<img>: Hình ảnh.
<ul> và <li>: Danh sách không thứ tự.
<ol> và <li>: Danh sách có thứ tự.
<div>: Khối.
<span>: Đoạn văn bản nhỏ.
(Trả lời bởi Nguyễn Quốc Đạt)
Vận dụng 1 (SGK Chân trời sáng tạo - Trang 72)
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. sáng tạo.
Thảo luận (1)Hướng dẫn giải
Vận dụng 3 (SGK Chân trời sáng tạo - Trang 72)
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.
Thảo luận (1)Hướng dẫn giảiDưới đây là một số thuộc tính của thẻ <body>:
- background-color: Thuộc tính này xác định màu nền cho phần nội dung của trang web. Ví dụ: background-color: #66CC00;.
- text-decoration: Thuộc tính này thiết lập các trang trí cho văn bản. Các giá trị bao gồm:
+ none: Định dạng văn bản bình thường.
+ underline: Xác định đường gạch bên dưới văn bản.
+ overline: Xác định đường gạch bên trên văn bản.
+ line-through: Xác định đường gạch ngang văn bản.
+ blink: Xác định văn bản nhấp nháy.
- margin-left và margin-top: Đây là thuộc tính để thiết lập khoảng không gian bên trái và bên trên của phần tử. Ví dụ: margin-left: 10px; margin-top: 20px;.
(Trả lời bởi Nguyễn Quốc Đạt)
Vận dụng 4 (SGK Chân trời sáng tạo - Trang 72)
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>.
Thảo luận (1)Hướng dẫn giảiNgoài thẻ <meta> và <title>, trong cặp thẻ <head></head> của một tài liệu HTML, còn có một số thẻ khác có thể xuất hiện:
- Thẻ <style>: Dùng để khai báo mã CSS để định dạng cho các đối tượng trên trang web.
- Thẻ <link>: Dùng để liên kết với các tệp CSS bên ngoài.
- Thẻ <script>: Để định nghĩa mã kịch bản bằng JavaScript.
- Thẻ <meta>: Dùng để khai báo bảng mã, mô tả trang, từ khóa, tác giả và các siêu dữ liệu khác.
(Trả lời bởi Nguyễn Quốc Đạt)
Vận dụng 2 (SGK Chân trời sáng tạo - Trang 72)
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.
Thảo luận (1)Hướng dẫn giải
Luyện tập 1 (SGK Chân trời sáng tạo - Trang 72)
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.
Thảo luận (1)Hướng dẫn giảiSiêu văn bản (Hypertext) là tài liệu điện tử đa phương tiện chứa văn bản, hình ảnh, âm thanh, video và siêu liên kết. Trong đó, siêu liên kết giúp người đọc dễ dàng truy cập đến nội dụng khác hoặc siêu văn bản khác.
Mỗi trang web là một siêu văn bản được tạo ra bằng ngôn ngữ HTML (HyperText Markup Language). HTML là ngôn ngữ đánh dấu được phát triển bởi Tim Berners-Lee, Robert Cailliau và các cộng sự vào năm 1989, dùng để trình bày cấu trúc, nội dung và hình thức của trang web. Hiện nay, HTML5 là phiên bản thông dụng, giúp tạo ra trang web có tính tương tác cao và giúp hiển thị trang web trên các thiết bị thông minh.
Mỗi thành phần của trang web bao gồm văn bản, hình ảnh, âm thanh, video và các nội dung khác đều được định dạng bằng các phần tử IITML tương ứng. Mỗi phần tử IITML được thể hiện bằng một thẻ (tag) và có thể đính kèm các thuộc tính (attribute).
Khi người dùng truy cập trang web, trình duyệt sẽ tải xuống mã HTML tương ứng và sử dụng mã này để kết xuất nội dung, hình thức của trang web. Các trình duyệt phổ biến hiện nay như Microsoft Edge, Google Chrome, Mozilla Firefox, Safari,... đều có hỗ trợ ngôn ngữ HTML
(Trả lời bởi Nguyễn Quốc Đạt)