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

BÀI 5 - CHÈN HÌNH ẢNH, ÂM THANH, VIDEO VÀ SỬ DỤNG KHUNG (CÁNH DIỀU - CS & ICT)

Bài 5 - Chèn hình ảnh, âm thanh, video và sử dụng khung (Cánh diều - cs & ict)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Cánh diều). 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.

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động
Vận dụng	Câu hỏi tự kiểm tra

Khởi động (trang 54):

Em có biết làm thế nào để trang web Bai3-NV1.html em tạo ở bài học trước trở nên đẹp và sinh động hơn không?

Gợi ý trả lời:

Để trang web Bai3-NV1.html trở nên đẹp và sinh động hơn ta có thể: Chèn thêm hình ảnh, âm thanh, video và sử dụng khung cho trang web.

Hoạt động (trang 54):

Trong số các định dạng ảnh sau: PNG, RAW, BMP, JPG, GIF, theo em, những định dạng ảnh nào được sử dụng phổ biến trên trang web? Vì sao?

Gợi ý trả lời:

Những định dạng ảnh phổ biến trên trang web:
- PNG
- JPG (JPEG)
- GIF
Tại vì: Các định dạng này có dung lượng nhỏ, tối ưu hóa tốt cho tốc độ tải trang web và được hỗ trợ trên tất cả các trình duyệt.

Vận dụng (trang 58):

Tạo website cá nhân:
Em hãy chèn thêm hình ảnh, âm thanh, video để hoàn thiện tiếp website cá nhân đã tạo ở các bài học trước.
Gợi ý thực hiện:
- Mở tệp “album.html”, thêm một số hình ảnh của em hoặc em thích (nên lưu tệp ảnh vào thư mục images).
- Mở tệp “hobbies.html", bổ sung tiêu đề mục h2 là "Bài hát tôi thích” và thêm một tệp âm thanh/video cho bài hát đó.

Hướng dẫn:

1. Thêm hình ảnh vào album.html
- Tạo thư mục images: Trong thư mục myHomepage, tạo một thư mục mới và đặt tên là images. Sao chép các hình ảnh bạn muốn hiển thị vào thư mục này.
- Chỉnh sửa album.html: Mở tệp album.html trong trình soạn thảo văn bản. Thêm các thẻ <img> để hiển thị hình ảnh.

- Thay anh1.jpg, anh2.jpg, anh3.jpg bằng tên tệp ảnh của em.
- Em có thể điều chỉnh thuộc tính width và height để thay đổi kích thước ảnh.
2. Thêm âm thanh/video vào hobbies.html
- Sao chép tệp âm thanh/video: Sao chép tệp âm thanh hoặc video bạn muốn hiển thị vào thư mục myHomepage.
- Chỉnh sửa hobbies.html: Mở tệp hobbies.html trong trình soạn thảo văn bản. Thêm thẻ <audio> hoặc <video> để hiển thị âm thanh hoặc video.

- Thay baihat.mp3 bằng tên tệp âm thanh của em.
- Nếu em muốn thêm video, hãy thay thẻ <audio> bằng thẻ <video> và thay đổi thuộc tính type thành video/mp4 hoặc định dạng video của em.
Lưu ý:
- Em có thể điều chỉnh thuộc tính controls, autoplay, loop của thẻ <audio> và <video> để thay đổi cách hiển thị và điều khiển âm thanh/video.
- Để hiển thị video, em cần có tệp video và đường dẫn đến tệp video đó.
- Để hiển thị âm thanh, em cần có tệp âm thanh và đường dẫn đến tệp âm thanh đó.

Câu hỏi tự kiểm tra (trang ):

Câu 1. Thuộc tính nào của phần tử img được dùng để hiển thị thông báo khi hình ảnh chèn vào trang web gặp lỗi trong quá trình hiển thị trên màn hình trình duyệt web?
A. link
B. title
C. src
D. alt
Câu 2. Thuộc tính nào dùng để xác định tài nguyên được nhúng vào trang web khi khai báo iframe?
A. source
B. src
C. link
D. target

Gợi ý trả lời:

Câu 1. Đáp án đúng là D (thuộc tính alt)
Câu 2. Đáp án đúng là B (thuộc tính src)

---The end!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Giữ gìn tính nhân văn trong thế giới ảo

Bài 1. Làm quen với ngôn ngữ đánh dấu siêu văn bản
Bài 2. Định dạng văn bản và siêu tạo liên kết
Bài 3. Thực hành định dạng văn bản và tạo siêu liên kết
Bài 4. Trình bày nội dung theo dạng danh sách, bảng biểu
Bài 5. Chèn hình ảnh, âm thanh, video và sử dụng khung
Bài 6. Tạo biểu mẫu
Bài 7. Thực hành tạo biểu mẫu
Bài 8. Làm quen với CSS
Bài 9. Thực hành định dạng một số thuộc tính CSS
Bài 10. Bộ chọn lớp, bộ chọn định danh
Bài 11. Mô hình hộp, bố cục trang web
Bài 12. Dự án nhỏ: Tạo trang web báo tường

Bài 1. Giới thiệu nhóm nghề Dịch vụ và Quản trị trong ngành Công nghệ thông tin
Bài 2. Một số nghề khác trong ngành Công nghệ thông tin và một số nghề ứng dụng Công nghệ thông tin
Bài 3. Dự án nhỏ: Tìm hiểu thông tin tuyển sinh và hướng nghiệp về lĩnh vực đào tạo “Máy tính và Công nghệ thông tin” ở Việt Nam.

Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng

Bài 1. Giới thiệu phần mềm tạo website
Bài 2. Tạo website bằng phần mềm
Bài 3. Tạo thanh điều hướng cho trang web
Bài 4. Tạo nội dung văn bản cho trang web
Bài 5. Tạo nội dung hình ảnh cho trang web
Bài 6. Tạo biểu mẫu cho trang web và xuất bản website
Bài 7. Tạo sản phẩm theo nhóm (Bài tập nhóm)

Bài 1. Môi trường truyền dẫn
Bài 2. Thiết bị mạng
Bài 3. Thiết kế mạng LAN
Bài 4. Thực hành về nhận diện thiết bị mạng và thiết kế mạng LAN (Bài tập nhóm)

Bài 1. Giới thiệu về học máy
Bài 2. Giới thiệu về khoa học dữ liệu
Bài 3. Giới thiệu về khoa học dữ liệu (tiếp theo)
Bài 4. Thực hành phân tích dữ liệu

Bài 1. Mô phỏng được sử dụng trong nhiều lĩnh vực
Bài 2. Thực hành về mô phỏng

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

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

BÀI 4 - TRÌNH BÀY NỘI DUNG THEO DẠNG DANH SÁCH, BẢNG BIỂU (CÁNH DIỀU - CS & ICT)

Bài 4 - Trình bày nội dung theo dạng danh sách, bảng biểu (Cánh diều - cs & ict)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động
Vận dụng	Câu hỏi tự kiểm tra

Khởi động (trang 49):

Theo em, để trình bày một văn bản, khi nào nên trình bày theo dạng liệt kê các mục và khi nào nên trình bày theo dạng bảng?

Gợi ý trả lời:

Trình bày văn bản theo dạng liệt kê (danh sách) thường phù hợp khi:
- Cần thể hiện các mục hoặc ý chính một cách rõ ràng, dễ đọc.
- Các nội dung có tính độc lập, không cần so sánh trực tiếp.
- Dữ liệu không quá phức tạp, chỉ cần liệt kê theo thứ tự logic.
- Ví dụ: Danh sách công việc cần làm, các bước thực hiện, danh sách sản phẩm, mục tiêu cần đạt được,...
Trình bày văn bản theo dạng bảng thường phù hợp khi:
- Cần so sánh thông tin giữa các đối tượng theo hàng và cột.
- Dữ liệu có tính liên quan chặt chẽ, cần hiển thị một cách có tổ chức.
- Khi có nhiều thuộc tính khác nhau cho từng mục, giúp dễ tra cứu.
- Ví dụ: Bảng điểm học sinh, bảng giá sản phẩm, lịch trình làm việc,...

Hoạt động (trang 50):

Hãy nêu một số cách em đã biết để xác định thứ tự các mục được liệt kê trong một danh sách.

Gợi ý trả lời:

- Dùng danh sách có thứ tự khi thứ tự các mục quan trọng.
- Ví dụ:

- Dùng danh sách không có thứ tự khi thứ tự không quan trọng.
- Ví dụ:

- Sử dụng số, chữ cái hoặc số La Mã để tạo sự rõ ràng.
- Ví dụ:

- Dùng danh sách phân cấp khi có nhiều mức độ thông tin.
- Ví dụ:

Vận dụng (trang ):

Tạo website cá nhân:
Em hãy bổ sung thêm một số nội dung cho website cá nhân đã được tạo ở các bài học trước.
Gợi ý thực hiện:
- Trong tệp “hobbies.html", bổ sung tiêu đề mục h1 “Sở thích của em" tạo danh sách xác định thứ tự hoặc không xác định thứ tự liệt kê các sở thích của em.
- Trong tệp “index.html", bổ sung tiêu đề mục h2 “Kế hoạch học tập" và trình bày thời khoá biểu của em dưới dạng bảng.

Hướng dẫn thực hiện:

1. Bổ sung nội dung cho hobbies.html
- Mở tệp hobbies.html trong trình soạn thảo văn bản.
- Thay thế nội dung hiện tại bằng đoạn mã HTML sau:

- Em có thể thay đổi danh sách sở thích trong thẻ <ul> và <li> để phù hợp với sở thích của mình.
- Nếu em muốn danh sách có thứ tự, hãy thay thẻ <ul> bằng <ol>.
2. Bổ sung nội dung cho index.html
- Mở tệp index.html trong trình soạn thảo văn bản.
- Thêm đoạn mã HTML sau vào cuối phần nội dung <body>:

- Em có thể thay đổi nội dung bảng thời khóa biểu để phù hợp với lịch học của mình.
- Nếu em muốn thêm hàng hoặc cột, hãy sử dụng thẻ <tr> (hàng) hoặc <td> (cột).
Giải thích mã HTML:
<ul>: Tạo danh sách không có thứ tự.
<ol>: Tạo danh sách có thứ tự.
<li>: Tạo một mục trong danh sách.
<table>: Tạo bảng.
<tr>: Tạo một hàng trong bảng.
<th>: Tạo một ô tiêu đề trong bảng.
<td>: Tạo một ô dữ liệu trong bảng.
Lưu ý:
- Em có thể chỉnh sửa nội dung, màu sắc, bố cục của website bằng cách thay đổi mã HTML và CSS.
- Để thêm nhiều thông tin hơn, em có thể tạo thêm các trang HTML và liên kết chúng với nhau.

Câu hỏi tự kiểm tra (trang ):

Câu 1. Mỗi phát biểu sau đây là đúng hay sai khi sử dụng các phần ol, ul để tạo danh sách trên trang web?
a) Khi khai báo thuộc tính type = "A" danh sách xác định thứ tự các mục theo chữ cái viết hoa.
b) Số thứ tự trong danh sách xác định thứ tự luôn là số nguyên.
c) Khi mở bằng trình duyệt web, theo mặc định mục trong danh sách không xác định thứ tự được hiển thị bắt đầu bằng dấu sao (*).
d) Có thể thay đổi số thứ tự của mục bắt đầu trong danh sách xác định thứ tự.
Câu 2. Khai báo nào sau đây sẽ tạo một bảng có hai hàng, mỗi hàng gồm một ô dữ liệu?

Gợi ý trả lời:

Câu 1.
a) Khi khai báo thuộc tính type="A" danh sách xác định thứ tự các mục theo chữ cái viết hoa. → Đúng – Trong danh sách có thứ tự (<ol>), nếu sử dụng type="A", các mục sẽ được đánh số thứ tự bằng chữ cái viết hoa (A, B, C, ...).
b) Số thứ tự trong danh sách xác định thứ tự luôn là số nguyên. → Đúng – Danh sách <ol> mặc định sử dụng số nguyên dương (1, 2, 3...) để đánh số thứ tự.
c) Khi mở bằng trình duyệt web, theo mặc định mục trong danh sách không xác định thứ tự được hiển thị bắt đầu bằng dấu sao (*). → Sai – Theo mặc định, danh sách không có thứ tự (<ul>) sẽ hiển thị các mục với dấu chấm tròn (•) chứ không phải dấu sao (*).
d) Có thể thay đổi số thứ tự của mục bắt đầu trong danh sách xác định thứ tự. → Đúng – Có thể thay đổi số bắt đầu của danh sách <ol> bằng cách dùng thuộc tính start.
Câu 2.
C. <table><tr><td>Hàng 1</td></tr><tr><td>Hàng 2</td></tr></table>
Đây là cấu trúc đúng của một bảng trong HTML:
<table>: Bắt đầu bảng.
<tr>: Xác định từng hàng.
<td>: Xác định ô dữ liệu trong hàng.

---The end!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Giữ gìn tính nhân văn trong thế giới ảo

Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng

Bài 1. Mô phỏng được sử dụng trong nhiều lĩnh vực
Bài 2. Thực hành về mô phỏng

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

BÀI 3 - THỰC HÀNH ĐỊNH DẠNG VĂN BẢN VÀ TẠO SIÊU LIÊN KẾT (CÁNH DIỀU - CS & ICT)

Bài 3 - Thực hành định dạng văn bản và tạo siêu liên kết (Cánh diều - cs & ict)

Vận dụng (trang 48):

Tạo website cá nhân:
Em hãy hoàn thành một website cá nhân của riêng mình theo ý muốn.
Gợi ý:
– Tạo thư mục myHomepage để lưu trữ website cá nhân.
– Tạo trang chủ của website bằng cách mở tệp mới, ghi và lưu trong thư mục myHomepage với tên tập là “index.html".
– Tạo hai văn bản HTML bằng cách mở tệp mới, ghi và lưu trong thư mục myHomepage với tên tệp là "hobbies.html" và "album.html".
– Sử dụng phần tử h1 để soạn tiêu đề cho văn bản index html (Ví dụ: “Website của tôi").
- Tạo các siêu liên kết sau: liên kết “Sở thích" đến tệp “hobbies.html", liên kết “Ảnh của tôi” đến tệp “album.html".
– Sử dụng phần tử p để viết đoạn văn ngắn giới thiệu về bản thân em.

Hướng dẫn thực hiện:

Bước 1: Tạo thư mục myHomepage
- Tạo một thư mục mới và đặt tên là myHomepage.
Bước 2: Tạo trang chủ index.html
- Mở trình soạn thảo văn bản (như Notepad, Sublime Text,...).
- Soạn đoạn mã như bên dưới:

- Thay [Tên của bạn] bằng tên thích hợp.
- Lưu tệp với tên index.html vào thư mục myHomepage.
Bước 3: Tạo trang hobbies.html
- Mở một tệp mới trong trình soạn thảo văn bản.
- Soạn đoạn mã như bên dưới:

- Thay [Sở thích 1], [Sở thích 2], [Sở thích 3] bằng các sở thích của em.
- Lưu tệp với tên hobbies.html vào thư mục myHomepage.
Bước 4: Tạo trang album.html
- Mở một tệp mới trong trình soạn thảo văn bản.
- Soạn đoạn mã như bên dưới:

- Thay [Đường dẫn đến ảnh của bạn] bằng đường dẫn đến ảnh thật sự (có thể lưu ảnh vào thư mục myHomepage và sử dụng tên tệp ảnh).
- Lưu tệp với tên album.html vào thư mục myHomepage.
Bước 5: Mở website
- Mở tệp index.html bằng trình duyệt web.
- Trang chủ của website có tiêu đề, đoạn giới thiệu và hai liên kết đến trang sở thích và trang ảnh.
Lưu ý:
- Có thể chỉnh sửa nội dung, màu sắc, bố cục của website bằng cách thay đổi mã HTML và CSS.
- Để hiển thị ảnh, cần có ảnh và đường dẫn đến ảnh đó.
- Để thêm nhiều trang hơn, có thể tạo thêm các tệp HTML và liên kết chúng với nhau.

---The end!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Giữ gìn tính nhân văn trong thế giới ảo

Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng

Bài 1. Mô phỏng được sử dụng trong nhiều lĩnh vực
Bài 2. Thực hành về mô phỏng

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

BÀI 2 - ĐỊNH DẠNG VĂN BẢN VÀ TẠO SIÊU LIÊN KẾT (CÁNH DIỀU - CS & ICT)

Bài 2-Định dạng văn bản và tạo siêu liên kết (Cánh diều - cs & ict)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Hoạt động 2
Luyện tập	Vận dụng	Câu hỏi tự kiểm tra

Khởi động (trang 40):

Em hãy nêu một số cách để nhận biết siêu liên kết trên trang web.

Gợi ý trả lời:

Một số cách để nhận biết siêu liên kết trên trang web:
- Thay dổi con trỏ chuột.
- Văn bản được gạch chân và/hoặc có màu khác.
-...

Hoạt động 1 (trang 41):

Em thường định dạng cho tiêu đề mục của các mục lớn và nhỏ trong một văn bản như thế nào?

Gợi ý trả lời:

- Sử dụng hệ thống phân cấp tiêu đề:
+ H1 (Heading 1): Tiêu đề chính của toàn bộ văn bản. Mỗi văn bản thường chỉ có một H1.
+ H2 (Heading 2): Tiêu đề của các phần lớn trong văn bản.
+ H3 (Heading 3): Tiêu đề của các phần nhỏ hơn bên trong H2.
+ H4, H5, H6: Tiêu đề của các phần nhỏ hơn nữa, ít được sử dụng hơn trong các văn bản thông thường.
- Định dạng nhất quán:
Đảm bảo rằng tất cả các tiêu đề ở cùng một cấp độ đều được định dạng giống nhau về:
+ Font chữ: Ví dụ: Times New Roman, Arial, Calibri.
+ Cỡ chữ: Ví dụ: H1 (16pt), H2 (14pt), H3 (12pt).
+ Kiểu chữ: Ví dụ: đậm (bold), nghiêng (italic).
+ Màu chữ: Thường là màu đen hoặc màu tối.
+ Khoảng cách: Khoảng cách trên và dưới tiêu đề.

Hoạt động 2 (trang 42):

Hãy nêu một số cách làm nổi bật nội dung văn bản ở các hệ soạn thảo văn bản mà em đã sử dụng.

Gợi ý trả lời:

Một số cách làm nổi bật nội dung văn bản ở các hệ soạn thảo văn bản mà em đã sử dụng:
- Đậm (Bold): Sử dụng để nhấn mạnh những từ khóa, cụm từ quan trọng hoặc tiêu đề.
- Nghiêng (Italic): Thường được dùng để trích dẫn, tên sách, thuật ngữ nước ngoài hoặc để tạo sự khác biệt
- Gạch chân (Underline).

Luyện tập (trang 45):

Câu 1. Em hãy sử dụng các phần tử tạo tiêu đề mục để tạo một trang web hiển thị các tiêu đề mục của nội dung bài học này.
Câu 2. Em hãy sử dụng các phần tử strong, em, mark để làm nổi bật các mục đã tạo ở Câu 1.

Gợi ý trả lời:

Câu 1.

Câu 2.

Vận dụng (trang 45):

Em hãy kết hợp sử dụng các phần tử tạo tiêu đề mục từ h1 đến h6 với phần tử tạo đoạn văn bản p và phần tử tạo siêu liên kết a để soạn văn bản HTML có nội dung giới thiệu về trường em. Lưu văn bản và mở bằng trình duyệt web.

Gợi ý trả lời:

Xem chi tiết

Câu hỏi tự kiểm tra (trang 45):

Câu 1. Trong các khai báo tạo siêu liên kết sau, khai báo nào đúng?

Câu 2. Mỗi phát biểu sau đây là đúng hay sai khi sử dụng các phần tử để định dạng văn bản trên trang web?
a) Nội dung các tiêu đề mục tạo bởi các phần tử h1, h2, h3, h4, h5, h6 khi hiển thị trên màn hình trình duyệt web đều được in đậm.
b) Nội dung của phần tử strong không thể chứa phần tử h1.
c) Nội dung của phần tử mark khi hiển thị trên màn hình trình duyệt web được tô nền màu xanh.
d) Đoạn văn bản tạo phần tử p được hiển thị trên một đoạn mới khi mở bằng trình duyệt web.

Gợi ý trả lời:

Câu 1. Các khai báo đúng là: A, B.
Câu 2.
a) Đúng – Nội dung các tiêu đề mục tạo bởi các phần tử <h1>, <h2>, <h3>, <h4>, <h5>, <h6> khi hiển thị trên trình duyệt web đều được mặc định in đậm (bold).
b) Đúng – Theo quy tắc của HTML, phần tử <h1> là một phần tử block-level (khối), trong khi <strong> là một phần tử inline (nội dòng). Theo chuẩn HTML, phần tử block-level không thể nằm trong phần tử inline, nên <strong> không thể chứa <h1>.
c) Sai – Nội dung của phần tử <mark> mặc định được trình duyệt hiển thị với nền màu vàng chứ không phải màu xanh.
d) Đúng – Khi sử dụng phần tử <p>, trình duyệt sẽ tự động hiển thị nội dung trong một đoạn mới với khoảng cách trên và dưới đoạn.

---The end!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Giữ gìn tính nhân văn trong thế giới ảo