Thầy Cải - Quốc Thái

BÀI F4 - THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB
(CTST - CS & ICT)

BÀI F4 - THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO 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 122 sách ict, trang 89 sách cs)

Theo em, một trang web có nội dung chỉ thuần văn bản sẽ có những hạn chế gì so với trang web có thêm hình ảnh và âm thanh?

Gợi ý trả lời

Theo em, một trang web có nội dung chỉ thuần văn bản sẽ:
- Gây nhàm chán, kém sinh động.
- Khó thu hút người xem, nhất là với nội dung giải trí, giáo dục, quảng bá.
- Không truyền tải đầy đủ cảm xúc hoặc thông tin như hình ảnh và âm thanh mang lại.

(trang 123 sách ict, trang 90 sách cs)

Em hãy bổ sung thuộc tính title cho thẻ <img> trong mã lệnh HTML ở Ví dụ 1.

Gợi ý trả lời

Giải thích: title="Chân dung của nhân vật". Khi người dùng di chuột lên ảnh, dòng chữ này sẽ hiện ra như một chú thích (tooltip).

(trang 124 sách ict, trang 91 sách cs)

Em hãy bổ sung thuộc tỉnh cho đoạn mã HTML ở Ví dụ 2 để kích thước hiển thị của video là 800 x 600 pixels và video tự động phát không có âm thanh.

Gợi ý trả lời

Giải thích các thuộc tính được thêm:
width="800" và height="600": đặt kích thước video là 800 x 600 pixels.
autoplay: video sẽ tự động phát khi trang web được tải.
muted: tắt tiếng video (bắt buộc khi dùng autoplay trong nhiều trình duyệt).
controls: hiển thị các nút điều khiển video như play, pause,...

(trang 124 sách ict, trang 91 sách cs)

1. Chức năng các thuộc tính của thẻ <img> khi thêm tệp ảnh vào trang web là gì?
2. Em hãy liệt kê và nêu chức năng các thuộc tỉnh của thẻ <audio> khi thêm tệp âm thanh vào trang web.
3. Giả sử tệp portfolio.html nằm cùng nơi với thư mục Asset. Thư mục Sound, là thư mục con của thư mục Asset, có chứa tệp bai_hat.mp3. Theo em, đường dẫn cho thuộc tính src để thêm tệp bai_hat.mp3 này vào tệp portfolio.html là gì?

Gợi ý trả lời

1. Chức năng các thuộc tính của thẻ <img> khi thêm tệp ảnh vào trang web:

2. Chức năng các thuộc tỉnh của thẻ <audio> khi thêm tệp âm thanh vào trang web:

3. Theo em, đường dẫn cho thuộc tính src để thêm tệp bai_hat.mp3 này vào tệp portfolio.html là: src="Asset/Sound/bai_hat.mp3"

(trang 125+126 sách ict, trang 92+93 sách cs)

Em hãy bổ sung các nội dung sau vào trang web portfolio.html:
1. Một video clip và một bài hát mà em yêu thích với thẻ <video>, <audio>, <h1>, <h2> và các thẻ khác đã học.
2. Thêm ảnh vào mục Nội dung yêu thích sao cho mỗi hàng của bảng hiển thị ba ảnh, sử dụng thẻ <img>, các thẻ tạo bảng và các thẻ khác đã học.
Hình 4 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

3. Thêm ảnh đại diện vào bên phải của mục Giới thiệu chung để được kết quả như Hình 5.

Gợi ý trả lời

1. Thêm video clip và bài hát yêu thích vào portfolio.html:
Ví dụ:

2. Thêm ảnh vào mục “Nội dung yêu thích” với bố cục mỗi hàng 3 ảnh:

Giải thích:
- Sử dụng thẻ <table> để tạo bảng.
- Mỗi dòng dùng <tr>, mỗi cột chứa ảnh dùng <td>.
- Mỗi ảnh được chèn bằng thẻ <img>, có đặt kích thước (width, height) và văn bản thay thế (alt).
- Ảnh được lưu trong thư mục Images, em cần thay đổi tên file ảnh (hinh1.jpg, hinh2.jpg, ...) cho đúng với ảnh thực tế của mình.
3. Thêm ảnh đại diện vào bên phải mục “Giới thiệu chung”:

Giải thích:
- Dùng <table> để chia layout thành 2 phần ngang hàng.
- Ảnh đại diện nằm bên phải trong cột thứ 2.
- Có thể thay đổi width, height, hoặc căn giữa bằng CSS nếu muốn đẹp hơn.

---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

Bài F1. HTML và trang web
Bài F2. Tạo và định dạng trang web với các thẻ HTML
Bài F3. Tạo bảng và khung trong trang web với HTML
Bài F4. Thêm dữ liệu đa phương tiện vào trang web
Bài F5. Tạo biểu mẫu trong trang web
Bài F6. Dự án tạo trang web
Bài F7. Giới thiệu CSS
Bài F8. Một số thuộc tính cơ bản của CSS
Bài F9. Một số thuộc tính định kiểu bằng vùng chọn trong CSS
Bài F10. Định kiểu CSS cho siêu liên kết và danh sách
Bài F11. Định kiểu CSS cho bảng và phần tử div
Bài F12. Định kiểu CSS cho biểu mẫu
Bài F13. Dự án tạo trang web (tiếp theo)
Bài F14(cs). Học máy
Bài F15(cs). Khoa học dữ liệu
Bài F16(cs). Máy tính, thuật toán và Khoa học dữ liệu
Bài F17(cs). Hoạt động trải nghiệm về Khoa học dữ liệu
Bài F18(cs). Kĩ thuật mô phỏng
Bài F19(cs). Sử dụng phần mềm mô phỏng

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài G1. Nhóm nghề dịch vụ thuộc ngành Công nghệ thông tin
Bài G2. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài G3. Một số nghề ứng dụng tin học và một số ngành thuộc lĩnh vực Công nghệ thông tin

CÁC CHUYÊN MỤC LIÊN QUAN:

☞ Kiểm tra tin học 12 - Chân trời sáng tạo
☞ Lý thuyết tin học 12 - Chân trời sáng tạo
☞ Thực hành tin học 12 - Chân trời sáng tạo
☞ Gợi ý trả lời tin học 12 - Chân trời sáng tạo
☞ Trắc nghiệm tin học 12 - Chân trời sáng tạo
☞ Bài giảng điện tử tin học 12 - Chân trời sáng tạo

BÀI F3 - TẠO BẢNG VÀ KHUNG TRONG TRANG WEB VỚI HTML
(CTST - CS & ICT)

BÀI F3 - TẠO BẢNG VÀ KHUNG TRONG TRANG WEB VỚI HTML (CTST - CS & ICT)

(trang 114 sách ict, trang 81 sách cs)

Nêu ba nội dung khi trình bày ở dạng bảng sẽ phù hợp và trực quan hơn so với cách trình bày liệt kê theo đoạn văn.

Gợi ý trả lời

Ba nội dung nên trình bày dưới dạng bảng:
- Thời khoá biểu hoặc lịch làm việc.
- So sánh đặc điểm giữa các đối tượng.
- Danh sách có nhiều cột như: họ tên, điểm số, ngày tháng.

(trang 116 sách ict, trang 83 sách cs)

Em hãy bổ sung thêm cột nội dung công việc của các ngày còn lại cho Lịch sinh hoạt hằng tuần ở Ví dụ 1.

Gợi ý trả lời

Giả sử bảng ban đầu chỉ có 2 ngày (thứ Hai, thứ Ba), em cần bổ sung thêm cột cho các ngày còn lại:

(trang 117 sách ict, trang 84 sách cs)

Em hãy tạo thêm một khung để nhúng trang web www.learnpython.org vào trong mục Những trang web thường ghé thăm.

Gợi ý trả lời

(trang 117 sách ict, trang 84 sách cs)

1. Chức năng của các thẻ và thuộc tính dùng để tạo bảng trong trang web là gì?
2. Em hãy nêu chức năng của thẻ <iframe> và một số thuộc tính dùng để nhúng trang web khác vào trang web hiện tại.

Gợi ý trả lời

1. Chức năng của các thẻ tạo bảng:

2. Chức năng của thẻ <iframe> và thuộc tính liên quan:

(trang 120+121 sách ict, trang 87+88 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
1. Bổ sung những nội dung sau vào trang web portfolio.html:
a) Mục Lịch sinh hoạt hằng tuần với các thẻ tạo bảng đã học.
b) Mục Những trang web thường ghé thăm với các thẻ tạo khung và danh sách đã học. Hình 6 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

2. Trang trí thời khoá biểu trong Nhiệm vụ 1 ở THỰC HÀNH bằng cách tô màu các ô và văn bản.
3. Bổ sung trang thông tin cho các thành viên còn lại của lớp trong Nhiệm vụ 2 ở THỰC HÀNH.
4. Định dạng lại màu sắc và kích thước cho các trang web trong Nhiệm vụ 2 ở THỰC HÀNH.

Gợi ý trả lời

1. Bổ sung những nội dung vào trang web portfolio.html:
a) Mục Lịch sinh hoạt hằng tuần với các thẻ tạo bảng đã học.

b) Mục Những trang web thường ghé thăm:

2. Trang trí thời khoá biểu bằng màu sắc:

3. Bổ sung trang thông tin cho các thành viên còn lại:
Mỗi thành viên tạo 1 file HTML, ví dụ: nguyenvana.html

Liên kết trong thanhvienlop.html:

4. Định dạng lại màu sắc và kích thước cho các trang web:

---The end!---

CÙNG CHUYÊN MỤC:

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

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

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

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

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML
(CTST - CS & ICT)

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML (CTST - CS & ICT)

(trang 106 sách ict, trang 73 sách cs)

Trong Hình 1, mỗi dòng trên trang web được định nghĩa bằng thẻ nào trong số các thẻ sau: <h1>, <h2>, <p>, <hr>?

Gợi ý trả lời

- Dòng tiêu đề lớn: dùng <h1>
- Dòng tiêu đề nhỏ hơn: dùng <h2>
- Dòng văn bản thông thường: dùng <p>
- Dòng kẻ ngang phân cách: dùng <hr>

(trang 108 sách ict, trang 75 sách cs)

1. Theo em, trong HTML có những thẻ nào dùng để định dạng để mục?
2. Cho mã lệnh:

Em hãy cho biết nội dung được kết xuất trên trang web.

Gợi ý trả lời

1. Các thẻ định dạng đề mục từ <h1> đến <h6>: tiêu đề từ lớn đến nhỏ.
2. Nội dung được kết xuất trên trang web là:

X² + Y² = 1

(trang 110 sách ict, trang 77 sách cs)

1. Thẻ <a> có thể tạo được liên kết đến những loại tài nguyên nào?
2. Nếu thẻ <a> không được khai báo thuộc tính href thì người dùng có thể nháy chuột vào nội dung bên trong thẻ <a> này không? Tại sao?

Gợi ý trả lời

1. Thẻ <a> có thể liên kết đến:
- Trang web khác (URL)
- Tệp tin (PDF, hình ảnh...)
- Địa chỉ email (mailto:)
- Vị trí trong cùng trang (liên kết neo)
- Trang khác trong cùng thư mục
2. Người dùng không thể nháy chuột như một liên kết thực sự. Vì khi thiếu href, thẻ <a> không có đích đến, nên không tạo được liên kết chức năng.

(trang 112 sách ict, trang 79 sách cs)

Chọn đáp án đúng cho câu hỏi dưới đây.
Thẻ nào được sử dụng để tạo danh sách có thứ tự?
A<li>. B. <h1>. C. <ol>. D. <p>.

Gợi ý trả lời

Chọn đáp án C. <ol>

(trang 112 sách ict, trang 79 sách cs)

1. Tác dụng của các thẻ <h1>, <h2>,..., <h6> là gì?
2. Em hãy trình bày các bước tạo siêu liên kết chuyển đến trang web trong cửa sổ khác.
3. Trong đoạn mã HTML ở Ví dụ 7, nếu thay cặp thẻ <ul></ul> thành <ol></ol> và hai cặp thẻ <ol></ol> thành <ul></ul> thì trang web hiển thị trong trình duyệt sẽ như thế nào?

Gợi ý trả lời

1. Là các thẻ tiêu đề, dùng để đánh dấu tiêu đề và phân cấp nội dung:
- <h1>: Tiêu đề lớn nhất.
- <h6>: Tiêu đề nhỏ nhất.
⇒ Giúp bố cục trang web rõ ràng và hỗ trợ SEO.
2. Các bước tạo siêu liên kết mở trang trong cửa sổ mới:
Sử dụng thuộc tính target="_blank":
<a href="https://example.com" target="_blank">Truy cập trang</a>
3. Kết quả hiển thị trên trình duyệt sẽ thay đổi như sau:
- Danh sách không thứ tự (<ul>) sẽ trở thành danh sách có thứ tự (<ol>): các dấu chấm đầu dòng sẽ được thay bằng số thứ tự (1., 2., 3.,…).
- Danh sách có thứ tự (<ol>) sẽ trở thành danh sách không thứ tự (<ul>): các số thứ tự sẽ được thay bằng dấu chấm hoặc ký hiệu khác tuỳ theo trình duyệt.

(trang 113 sách ict, trang 80 sách cs)

1. Em hãy bổ sung tên các bạn trong lớp vào ngay sau phần Thành viên lớp của trang web thanhvienlop.html ở THỰC HÀNH. Sau đó, tạo liên kết từ tên của mình trong trang web thanhvienlop.html đến trang web portfolio.html.
2. Em hãy bổ sung Sở thích và Các hoạt động đã tham gia cho trang web portfolio.html, sử dụng các thẻ tạo danh sách và các thẻ định dạng văn bản đơn giản đã học. Hình 11 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

Gợi ý trả lời

1. Bổ sung tên các bạn vào thanhvienlop.html và tạo liên kết đến portfolio.html:
Ví dụ:

2. Bổ sung “Sở thích” và “Các hoạt động” trong portfolio.html:
Ví dụ:

---The end!---

CÙNG CHUYÊN MỤC:

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

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

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

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

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

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

(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

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

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

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

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F4 - THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB
(CTST - CS & ICT)

BÀI F3 - TẠO BẢNG VÀ KHUNG TRONG TRANG WEB VỚI HTML
(CTST - CS & ICT)

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML
(CTST - CS & ICT)

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

Chuyên mục bài viết

Các trang web hữu ích

Các video clip đáng xem

Tổng số lượt xem

BÀI F4 - THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB(CTST - CS & ICT)

BÀI F3 - TẠO BẢNG VÀ KHUNG TRONG TRANG WEB VỚI HTML(CTST - CS & ICT)

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML(CTST - CS & ICT)

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

Chuyên mục bài viết

Các trang web hữu ích

Các video clip đáng xem

Tổng số lượt xem

BÀI F4 - THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB
(CTST - CS & ICT)

BÀI F3 - TẠO BẢNG VÀ KHUNG TRONG TRANG WEB VỚI HTML
(CTST - CS & ICT)

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML
(CTST - CS & ICT)