Giáo án Khoa học máy tính 12 Cánh diều bài 5: Chèn hình ảnh, âm thanh, video và sử dụng khung
Giáo án bài 5: Chèn hình ảnh, âm thanh, video và sử dụng khung sách Tin học 12 - Khoa học máy tính cánh diều. Được thiết kế theo công văn 5512, chi tiết, đầy đủ. Giáo án là bản word, có thể tải về và dễ dàng chỉnh sửa. Bộ giáo án có đầy đủ các bài trong học kì 1 + học kì 2 của Tin học 12 cánh diều. Kéo xuống dưới để tham khảo chi tiết.
Xem: => Giáo án Tin học 12 - Định hướng khoa học máy tính cánh diều
Các tài liệu bổ trợ khác
Xem toàn bộ: Giáo án khoa học máy tính 12 cánh diều đủ cả năm
Ngày soạn:…/…/…
Ngày dạy:…/…/…
BÀI 5: CHÈN HÌNH ẢNH, ÂM THANH, VIDEO VÀ SỬ DỤNG KHUNG
(2 tiết)
I. MỤC TIÊU
1. Kiến thức
Sau bài học này, HS sẽ:
Chèn được hình ảnh, tệp âm thanh, video vào trang web.
Nhúng được nội dung trang web khác vào trang web.
2. Năng lực
Năng lực chung:
Năng lực học tập, tự học: HS biết tự tìm kiếm, chuẩn bị và lựa chọn tài liệu, phương tiện học tập trước giờ học, quá trình tự giác tham gia các và thực hiện các hoạt động học tập cá nhân trong giờ học ở trên lớp,…
Năng lực giao tiếp và hợp tác: Khả năng phân công và phối hợp thực hiện nhiệm vụ học tập.
Năng lực giải quyết vấn đề sáng tạo: HS đưa ra các phương án trả lời cho câu hỏi, bài tập xử lý tình huống, vận dụng kiến thức, kĩ năng của bài học để giải quyết vấn đề thường gặp.
Năng lực Tin học:
Chèn được các tệp tin đa phương tiện vào trang web.
Nhúng được nội dung trang web khác vào trang web.
3. Phẩm chất
Có ý thức chủ động tìm hiểu và cập nhật các kiến thức mới.
Cẩn thận, tỉ mỉ khi viết các mã lệnh HTML.
Hình thành tư duy lôgic phân tích yêu cầu cần đạt để thực hiện một nhiệm vụ cụ thể.
II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU
GV: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Cánh diều, bài trình chiếu (Slide), máy chiếu, phòng máy tính có kết nối Internet.
HS: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Cánh diều, vở ghi.
III. TIẾN TRÌNH DẠY HỌC
A. HOẠT ĐỘNG KHỞI ĐỘNG
a) Mục tiêu: HS thấy được ý nghĩa của việc sử dụng các đối tượng đa phương tiện trong trang web.
b) Nội dung: HS dựa vào hiểu biết để trả lời các câu hỏi.
c) Sản phẩm: Từ yêu cầu, HS vận dụng sự hiểu biết để trả lời câu hỏi GV đưa ra.
d) Tổ chức thực hiện:
Bước 1: GV chuyển giao nhiệm vụ:
- GV chia lớp thành các nhóm 2 – 3 HS, cho HS xem trang web https://khamphadisan.
com.vn/du-lich-da-nang-dia-diem-checkin-da-nang/, sau đó nêu câu hỏi cho các nhóm thảo luận: Theo em, việc đưa hình ảnh vào trang web có ý nghĩa gì?
Bước 2: HS thực hiện nhiệm vụ học tập:
- Các nhóm HS thảo luận về trang web mà GV cho xem.
- GV quan sát quá trình các nhóm thảo luận, giải đáp thắc mắc nếu HS chưa rõ.
Bước 3: Báo cáo kết quả hoạt động, thảo luận.
- GV mời một số nhóm báo cáo kết quả thảo luận.
Gợi ý trả lời: Việc đưa hình ảnh vào trang web giúp thu hút người xem, giúp cho trang web trở nên sinh động và trực quan hơn. Nhờ có hình ảnh, người xem sẽ dễ dàng hình dung về các địa điểm du lịch và thông tin mà trang web muốn truyền đạt.
- Các nhóm khác lắng nghe và góp ý.
Bước 4: Đánh giá kết quả thực hiện:
GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: Việc đưa các tệp tin đa phương tiện như hình ảnh, âm thanh, video vào trang web sẽ giúp diễn tả thông tin tốt hơn và thu hút được sự chú ý của người xem. Vậy để giúp các em biết cách sử dụng thẻ HTML thực hiện được các thao tác đó, chúng ta sẽ cùng nhau đến với Bài 5: Chèn hình ảnh, âm thanh, video và sử dụng khung.
B. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Chèn hình ảnh
a) Mục tiêu: Cung cấp cho HS cách sử dụng phần tử img để chèn hình ảnh vào trang web.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Chèn hình ảnh, thảo luận nhóm và thực hiện nhiệm vụ.
c) Sản phẩm: HS chèn được hình ảnh vào trang web.
d) Tổ chức thực hiện:
HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS vận dụng kiến thức thực tiễn, trả lời câu hỏi Hoạt động SGK tr.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? - GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi: + Theo em, việc sử dụng các nội dung đa phương tiện trong trang web có ý nghĩa gì? + HTML định nghĩa phần tử nào để chèn hình ảnh vào trang web? + Phần tử img có cú pháp khai báo như thế nào? + Mặc định, kích thước của hình ảnh trên trình duyệt web được tính theo đơn vị gì? Bước 2: HS thực hiện nhiệm vụ học tập: - HS tìm hiểu nội dung mục 1 SGK tr.54 – 55 và thảo luận theo nhóm thực hiện nhiệm vụ. - GV quan sát và trợ giúp HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - Đại diện các nhóm HS trả lời. - Các nhóm khác đưa ra ý kiến nhận xét. Bước 4: Đánh giá kết quả thực hiện: - GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS. | 1. Chèn hình ảnh - Khi tạo trang web, cần có thêm các nội dung đa phương tiện như hình ảnh, âm thanh, video để việc truyền tải thông tin hiệu quả, trực quan và sinh động hơn. - HTML định nghĩa phần tử img để chèn hình ảnh vào trang web. - Phần tử img có cú pháp khai báo như sau: ![]() Trong đó: + Thuộc tính src xác định Tên tệp ảnh được chèn vào trang web. Lưu ý: Tên tệp ảnh có thể bao gồm cả đường dẫn đến tệp ảnh. Ảnh được sử dụng trên trình duyệt web thường ở các định dạng JPG, PNG, GIF. + Thuộc tính alt xác định Nội dung thay thế sẽ hiển thị vào vùng của hình ảnh trên trình duyệt web trong trường hợp việc hiển thị hình ảnh gặp lỗi. + Thuộc tính width, height:
Lưu ý: Ảnh sẽ được hiển thị theo kích thước ảnh gốc nếu không khai báo thuộc tính width, height. Ví dụ 1: Nội dung phần body của văn bản HTML trong Hình 1a chèn tệp ảnh “canhdieu.jpg” vào trang web. Kết quả hiển thị như Hình 1b. ![]() Hình 1a. Ví dụ sử dụng phần tử img chèn hình ảnh vào trang web ![]() Hình 1b. Kết quả khi mở văn bản HTML ở Hình 1a bằng trình duyệt web - Lưu ý: Phải lưu trữ tệp ảnh trong cùng thư mục với văn bản HTML nếu thuộc tính src chỉ xác định tên tệp ảnh mà không bao gồm đường dẫn đến tệp ảnh. |
Hướng dẫn trả lời câu hỏi Hoạt động SGK tr.54: - Những định dạng ảnh được sử dụng phổ biến trên trang web: + JPEG (Joint Photographic Experts Group): Định dạng ảnh nén làm mất thông tin thường được sử dụng cho hình ảnh chất lượng cao như ảnh chụp. JPEG tạo ra kích thước tệp nhỏ hơn nhưng có thể làm giảm chất lượng ảnh nếu nén quá mức. + PNG (Portable Network Graphics): Định dạng ảnh không làm mất thông tin, hỗ trợ độ trong suốt và lưu trữ thông tin màu sắc tốt. PNG thường được sử dụng cho biểu đồ và ảnh có phần trong suốt. + GIF (Graphics Interchange Format): Định dạng ảnh không làm mất thông tin, hỗ trợ các hình ảnh động, GIF thường được sử dụng cho biểu đồ đơn giản, biểu tượng và hình ảnh động nhỏ. - Không nên dùng ảnh định dạng BMP bởi kích thước ảnh lớn làm ảnh hưởng đến tốc độ tải trang web. |
Hoạt động 2: Chèn âm thanh
a) Mục tiêu: Cung cấp cho HS cách sử dụng phần tử audio để chèn âm thanh vào trang web.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. Chèn âm thanh, thảo luận nhóm và thực hiện nhiệm vụ.
c) Sản phẩm: HS chèn được tệp âm thanh vào trang web.
d) Tổ chức thực hiện:
HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi: + Em hãy kể tên một số định dạng âm thanh mà em biết. + HTML định nghĩa phần tử nào để chèn âm thanh vào trang web? + Phần tử audio có cú pháp khai báo như thế nào? Bước 2: HS thực hiện nhiệm vụ học tập: - HS tìm hiểu nội dung mục 2 SGK tr.55 và thảo luận theo nhóm thực hiện nhiệm vụ. - GV quan sát và trợ giúp HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - Đại diện các nhóm HS trả lời. - Các nhóm khác đưa ra ý kiến nhận xét. Bước 4: Đánh giá kết quả thực hiện: - GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS. | 2. Chèn âm thanh - Một số định dạng âm thanh thường sử dụng: + MP3 (MPEG Audio Layer 3): Định dạng âm thanh phổ biến với chất lượng tốt và kích thước tệp nhỏ. Tuy nhiên có thể cần sử dụng các trình duyệt tương thích để phát tệp MP3. + OGG: Kích thước tệp thường nhỏ hơn so với các định dạng khác. + WAV (Waveform Audio File Format): Định dạng âm thanh không nén, cung cấp chất lượng tốt nhưng có kích thước tệp lớn hơn, được hỗ trợ rộng rãi trên nhiều trình duyệt. + AAC (Advanced Audio Coding): Định dạng âm thanh chất lượng cao và được sử dụng phổ biến trong các dịch vụ phát trực tuyến. - HTML định nghĩa phần tử audio để chèn âm thanh vào trang web. - Phần tử audio có cú pháp khai báo như sau: ![]() Trong đó: + Thuộc tính src xác định Tên tệp âm thanh được chèn vào trang web. Lưu ý: Tên tệp âm thanh có thể bao gồm đường dẫn đến tệp âm thanh. Định dạng tệp âm thanh thường được sử dụng trên trang web là MP3, OGG. + Thuộc tính controls được khai báo để hiển thị bảng điều khiển tệp âm thanh trên trình duyệt web. Bảng điều khiển cung cấp một số nút lệnh có chức năng: Phát, Tạm dừng, Tắt, Tăng/Giảm âm lượng,… Ví dụ 2: Nội dung phần body của văn bản HTML ở Hình 2a chèn tệp âm thanh “QueHuong.mp3” vào trang web. Kết quả hiển thị như Hình 2b. ![]() Hình 2a. Ví dụ sử dụng phần tử audio chèn âm thanh vào trang web Hình 2b. Kết quả khi mở văn bản HTML ở Hình 2a bằng trình duyệt web |
Hoạt động 3: Chèn video
a) Mục tiêu: Cung cấp cho HS cách sử dụng phần tử video để chèn video vào trang web.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 3. Chèn video, thảo luận nhóm và thực hiện nhiệm vụ.
c) Sản phẩm: HS chèn được tệp video vào trang web.
d) Tổ chức thực hiện:
HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi: + Em hãy kể tên một số định video mà em biết. + HTML định nghĩa phần tử nào để chèn video vào trang web? + Phần tử video có cú pháp khai báo như thế nào? Bước 2: HS thực hiện nhiệm vụ học tập: - HS tìm hiểu nội dung mục 3 SGK tr.55 và thảo luận theo nhóm thực hiện nhiệm vụ. - GV quan sát và trợ giúp HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - Đại diện các nhóm HS trả lời. - Các nhóm khác đưa ra ý kiến nhận xét. Bước 4: Đánh giá kết quả thực hiện: - GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS. | 3. Chèn video - Một số định dạng video thường sử dụng: + MP4 (MPEG-4): Định dạng video phổ biến, hỗ trợ chất lượng tốt và kích thước tệp nhỏ. MP4 là định dạng video chuẩn cho hầu hết các trình duyệt. + OGG: Thường được sử dụng cho video với chất lượng tốt. Tệp OGG thường nhỏ hơn so với MP4. - HTML định nghĩa phần tử video để chèn âm thanh vào trang web. - Phần tử video có cú pháp khai báo như sau: ![]() Trong đó: + Thuộc tính src xác định Tên tệp video được chèn vào trang web. Lưu ý: Tên tệp video có thể bao gồm đường dẫn đến tệp video. Định dạng tệp video thường được sử dụng trên trang web là MP4, OGG. + Thuộc tính controls được khai báo để hiển thị bảng điều khiển tệp video trên trình duyệt web. Bảng điều khiển cung cấp một số nút lệnh có chức năng: Chạy, Tạm dừng, Tắt, Tăng/Giảm âm lượng, Phóng to/Thu nhỏ màn hình,… Ví dụ 3: Nội dung phần body của văn bản HTML ở Hình 3a chèn tệp video “monguockyniemxua.mp4” vào trang web. Kết quả hiển thị như Hình 3b. ![]() Hình 3a. Ví dụ sử dụng phần tử video chèn video vào trang web Hình 3b. Kết quả khi mở văn bản HTML ở Hình 3a bằng trình duyệt web |
Hoạt động 4: Sử dụng khung
a) Mục tiêu: Cung cấp cho HS cách sử dụng phần tử iframe để nhúng một tệp HTML hoặc tài nguyên web khác vào văn bản HTML.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 4. Sử dụng khung, thảo luận nhóm và thực hiện nhiệm vụ.
c) Sản phẩm: HS nhúng được nội dung trang web khác vào trang web.
d) Tổ chức thực hiện:
HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi: + HTML định nghĩa phần tử nào để nhúng một tệp HTML hoặc tài nguyên web khác vào văn bản HTML? + Phần tử iframe có cú pháp khai báo như thế nào? Bước 2: HS thực hiện nhiệm vụ học tập: - HS tìm hiểu nội dung mục 4 SGK tr.56 và thảo luận theo nhóm thực hiện nhiệm vụ. - GV quan sát và trợ giúp HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - Đại diện các nhóm HS trả lời. - Các nhóm khác đưa ra ý kiến nhận xét. Bước 4: Đánh giá kết quả thực hiện: - GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS. - GV tóm tắt bài học:
| 4. Sử dụng khung - HTML định nghĩa phần tử iframeđể nhúng một tệp HTML hoặc tài nguyên web khác vào văn bản HTML. - Phần tử iframe có cú pháp khai báo như sau: ![]() Trong đó: + url là đường dẫn đến tệp HTML hoặc tài nguyên web khác. + Thuộc tính width, height:
Ví dụ 4: Nội dung phần body của văn bản HTML ở Hình 4a nhúng trang web Bai4-NV2.html. Kết quả hiển thị như Hình 4b. ![]() Hình 4a. Ví dụ tạo khung bằng Hình 4b. Kết quả hiển thị khung trên màn hình trình duyệt web - Lưu ý: Khi chèn hình ảnh, âm thanh, video, có thể xác định vị trí tuỳ ý trên trang web để hiển thị thành phần được chèn vào. Nhưng khi nhúng nội dung trang web khác vào trang web hiện thời, không thể điều chỉnh vị trí hiển thị các thành phần trong trang web được nhúng. |
---------------------------------------
----------------------Còn tiếp---------------------
Trên chỉ là 1 phần của giáo án. Giáo án khi tải về có đầy đủ nội dung của bài. Đủ nội dung của học kì I + học kì II
MỘT VÀI THÔNG TIN:
- Word được soạn: Chi tiết, rõ ràng, mạch lạc
- Giáo án soạn đầy đủ các bài trong SGK
- Nếu có thiếu, sai sót. Sẽ được bổ sung miễn phí trong suốt năm học
- Các phản hồi của giáo viên sẽ được trả lời gần như ngay lập tức
Thời gian bàn giao giáo án word
- Khi đặt, nhận luôn giáo án kì I
- 15/11 bàn giao 1/2 học kì II
- 15/12 bàn giao đủ cả năm
Phí giáo án
- Giáo án word: 600k - Đặt bây giờ: 450k
- Khi đặt chỉ cần gửi 250k
- Đến lúc nhận đủ kì 1. Gửi số còn lại
=>Khi đặt sẽ nhận ngay và luôn:
- Giáo án word - đủ kì I.
- Phiếu trắc nghiệm cấu trúc mới: 10 - 12 phiếu
- Mẫu đề thi cấu trúc mới: Ma trận, lời giải, thang điểm
- PPCT, file word đáp án sgk
Cách đặt:
- Bước 1: Gửi phí vào tk: 10711017 - Chu Văn Trí - Ngân hàng ACB (QR)
- Bước 2: Nhắn tin tới Zalo Fidutech - nhấn vào đây để thông báo và nhận giáo án
Xem toàn bộ: Giáo án khoa học máy tính 12 cánh diều đủ cả năm
ĐẦY ĐỦ GIÁO ÁN CÁC BỘ SÁCH KHÁC
GIÁO ÁN WORD LỚP 12 CÁNH DIỀU
Giáo án hoạt động trải nghiệm hướng nghiệp 12 cánh diều
Giáo án Tin học 12 - Định hướng khoa học máy tính cánh diều
Giáo án Tin học 12 - Định hướng Tin học ứng dụng cánh diều
GIÁO ÁN POWERPOINT LỚP 12 CÁNH DIỀU
Giáo án Powerpoint Toán 12 Cánh diều
Giáo án powerpoint hình học 12 cánh diều
Giáo án powerpoint đại số 12 cánh diều
Giáo án powerpoint vật lí 12 cánh diều
Giáo án powerpoint sinh học 12 cánh diều
Giáo án powerpoint hoá học 12 cánh diều
Giáo án powerpoint ngữ văn 12 cánh diều
Giáo án powerpoint lịch sử 12 cánh diều
Giáo án powerpoint địa lí 12 cánh diều
Giáo án powerpoint Kinh tế pháp luật 12 cánh diều
Giáo án powerpoint Công nghệ 12 Công nghệ điện - điện tử cánh diều
Giáo án powerpoint Công nghệ 12 Lâm nghiệp - Thuỷ sản cánh diều
Giáo án powerpoint Tin học 12 - Định hướng Tin học ứng dụng cánh diều
Giáo án powerpoint Tin học 12 - Định hướng khoa học máy tính cánh diều
Giáo án powerpoint hoạt động trải nghiệm hướng nghiệp 12 cánh diều
GIÁO ÁN CHUYÊN ĐỀ LỚP 12 CÁNH DIỀU
GIÁO ÁN POWERPOINT CHUYÊN ĐỀ 12 CÁNH DIỀU
GIÁO ÁN DẠY THÊM LỚP 12 CÁNH DIỀU
Giáo án dạy thêm toán 12 cánh diều
Giáo án dạy thêm ngữ văn 12 cánh diều
Giáo án powerpoint dạy thêm ngữ văn 12 cánh diều
Giáo án powerpoint dạy thêm toán 12 cánh diều