Giáo án Khoa học máy tính 12 chân trời Bài F4: Thêm dữ liệu đa phương tiện vào trang web
Giáo án Bài F4: Thêm dữ liệu đa phương tiện vào trang web sách Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo. Đượ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 chân trời sáng tạo. 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 chân trời sáng tạo
Xem video về mẫu Giáo án Khoa học máy tính 12 chân trời Bài F4: Thêm dữ liệu đa phương tiện vào trang web
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 chân trời sáng tạo đủ cả năm
Ngày soạn:…/…/…
Ngày dạy:…/…/…
BÀI F4: THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB
(2 tiết)
I. MỤC TIÊU
1. Kiến thức
Sau bài học này, HS sẽ:
Sử dụng được các thẻ HTML để thêm ảnh, video và âm thanh vào trang web.
2. Năng lực
Năng lực chung:
Tự chủ và tự học: Tự lực (Chủ động, tích cực thực hiện công việc của bản thân).
Giao tiếp và hợp tác: Xác định trách nhiệm và hoạt động của bản thân (Phân tích được các công việc cần thực hiện để hoàn thành nhiệm vụ của nhóm trong các hoạt động nhóm).
Giải quyết vấn đề và sáng tạo: Hình thành và triển khai ý tưởng mới (Nêu được nhiều ý tưởng mới trong học tập, suy nghĩ không theo lối mòn, tạo ra yếu tố mới dựa trên những ý tưởng khác nhau).
Năng lực Tin học:
NLc (Giải quyết vấn đề với sự hỗ trợ của công nghệ thông tin và truyền thông): Thêm được ảnh, video và âm thanh vào trang web bằng thẻ HTML.
3. Phẩm chất
Chăm chỉ: Tích cực tìm tòi và sáng tạo trong việc học tập.
Trách nhiệm: Tích cực, tự giác và nghiêm túc rèn luyện sử dụng thành thạo các mã lệnh.
II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU
1. Đối với giáo viên
SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Chân trời sáng tạo, bài trình chiếu (Slide), máy chiếu, phiếu học tập.
Máy tính có cài sẵn phần mềm Visual Studio Code và có kết nối Internet, các tệp HTML dùng trong hoạt động Thực hành.
2. Đối với học sinh
SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Chân trời sáng tạo, vở ghi.
III. TIẾN TRÌNH DẠY HỌC
A. HOẠT ĐỘNG KHỞI ĐỘNG
a) Mục tiêu: Sử dụng tình huống thực tế để dẫn dắt nhu cầu sử dụng các tệp đa phương tiện (âm thanh, hình ảnh, video,…) vào trang web.
b) Nội dung: HS suy nghĩ trả lời câu hỏi Khởi động tr.89 SGK theo hiểu biết của mình.
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 Khởi động tr.89 SGK.
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 3 – 4 HS, cho HS xem trang web https://www.literature.org/ và https://www.elle.vn/, sau đó nêu câu hỏi Khởi động SGK trang 89 cho các nhóm thảo luận: 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?
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à trả lời câu hỏi.
- 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:
Trang web chỉ có nội dung văn bản sẽ gặp một số hạn chế so với trang web có hình ảnh và âm thanh như sau:
Giới hạn trong việc truyền đạt thông tin: Hình ảnh, âm thanh, video có thể giúp bổ sung thông tin, tạo trải nghiệm đa dạng và hấp dẫn hơn cho người dùng.
Giới hạn về tương tác: Văn bản không cung cấp sự tương tác trực tiếp như âm thanh và hình ảnh. Ví dụ, khung phát video trong trang web có các nút nhấn, điều hướng để người dùng tương tác.
Hạn chế về truyền đạt cảm xúc và tinh thần: Văn bản thường không thể truyền đạt được cảm xúc và tinh thần một cách hiệu quả. Ví dụ, âm thanh từ bản nhạc có thể truyền đạt cảm xúc đến người nghe một cách tốt hơn.
Hạn chế về việc thu hút, tiếp cận người dùng: Trang web chỉ có văn bản dễ làm người dùng không có ấn tượng, dẫn đến việc họ không quay lại xem trang web này nữa.
- 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 vào trang web sẽ giúp thể hiện 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 các thẻ HTML để thêm ảnh, video và âm thanh vào trang web, chúng ta sẽ cùng nhau đến với Bài F4: Thêm dữ liệu đa phương tiện vào trang web.
B. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Thêm tệp ảnh vào trang web
a) Mục tiêu: HS sử dụng được thẻ <img> để thêm 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. Thêm tệp ảnh vào trang web và thực hiện nhiệm vụ.
c) Sản phẩm: HS biết cách sử dụng thẻ <img> để thêm tệp ả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 hoạt động cá nhân và trả lời các câu hỏi: + HTML sử dụng thẻ nào để thêm tệp ảnh vào trang web? + Thẻ <img> có thẻ đóng không? + Thẻ <img> có những thuộc tính gì? - GV phân tích Ví dụ 1 để HS hiểu về cấu trúc của đoạn mã HTML dùng để thêm tệp ảnh vào trang web. - GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.90 SGK: Em hãy bổ sung thuộc tính title cho thẻ <img> trong mã lệnh HTML ở Ví dụ 1. 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.89 – 90 và 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: - HS trả lời câu hỏi và nhận xét lẫn nhau. 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 kết luận: Thẻ <img> với các thuộc tính src, alt, width, height,… được dùng để thêm tệp ảnh vào trang web. Thẻ <img> chỉ có thẻ mở, không có thẻ đóng. | 1. Thêm tệp ảnh vào trang web - HTML sử dụng thẻ <img> để thêm tệp ảnh vào trang web. - Thẻ <img> chỉ có thẻ mở, không có thẻ đóng. - Một số thuộc tính của thẻ <img>: Bảng 1. Một số thuộc tính của thẻ <img> Ví dụ 1: Mã lệnh HTML sau hiển thị tệp ảnh Chan_dung.jpg lên trang web (Hình 1). Hình 1. Kết quả trên trang web khi hình ảnh hiển thị được Trong mã lệnh trên: + Tệp Chan_dung.jpg được chứa trong thư mục Images nằm cùng nơi với tệp .html hiện hành. + Hình ảnh được hiển thị trên trang web với chiều rộng là 150 pixels và chiều cao là 200 pixels. + Nếu hình ảnh không hiển thị được, trình duyệt sẽ hiển thị văn bản “Ảnh chân dung” trong thuộc tính alt để thay thế (Hình 2). Hình 2. Kết quả trên trang web khi hình ảnh không hiển thị được |
Hướng dẫn trả lời câu hỏi hoạt động Làm tr.90 SGK: |
Hoạt động 2: Thêm tệp video và âm thanh vào trang web
a) Mục tiêu: HS biết cách sử dụng thẻ <video>, <audio> để thêm tệp video và â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. Thêm tệp video và âm thanh vào trang web, thảo luận nhóm và thực hiện nhiệm vụ.
c) Sản phẩm: Cách sử dụng thẻ <video>, <audio>.
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 sử dụng thẻ nào để thêm tệp video và âm thanh vào trang web? + Thẻ <video> và <audio>có những thuộc tính gì? + Có thể thêm các tệp hình ảnh, video và âm thanh từ trên Internet và trang web được không? - GV phân tích Ví dụ 2 để HS hiểu về cấu trúc của đoạn mã HTML dùng để thêm tệp video vào trang web. - GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.91 SGK: 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 600 pixels và video tự động phát không có âm thanh. 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.90 – 91 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 kết luận:
| 2. Thêm tệp video và âm thanh vào trang web - HTML sử dụng thẻ <video> và thẻ <audio> để thêm tệp video và âm thanh vào trang web. - Thẻ <video> và <audio> có cùng một số thuộc tính sau: Bảng 2. Một số thuộc tính của thẻ Lưu ý: Một số trình duyệt có thể vô hiệu hoá thuộc tính autoplay hoặc cho phép thuộc tính autoplay đi kèm với thuộc tính muted. - Ngoài những thuộc tính trên, thẻ <video> còn có thuộc tính height và width dùng để chỉ định kích thước hiển thị cho video được thêm vào trang web. Ví dụ 2: Đoạn mã HTML thêm tệp video.mp4 vào trang web. Trong đoạn mã trên: + Tệp video.mp4 nằm trong thư mục Videos. + Dòng văn bản nằm giữa hai thẻ <video> và </video> chỉ hiển thị trong trường hợp trình duyệt không hỗ trợ thẻ <video>. - Có thể thêm các tệp hình ảnh, video và âm thanh từ trên Internet vào trang web. Tuy nhiên, để tránh trường hợp nguồn tài nguyên trên Internet có thay đổi làm ảnh hưởng tới nội dung trang web, em nên tải xuống và đặt ở cùng thư mục với tệp trang web trước khi chèn. |
Hướng dẫn trả lời câu hỏi hoạt động Làm tr.91 SGK: |
Hoạt động 3: Thực hành
a) Mục tiêu: Thêm tệp ảnh và video vào trang web.
b) Nội dung: GV hướng dẫn HS thực hiện theo hai nhiệm vụ trong SGK để thêm tệp ảnh và video vào trang web theo yêu cầu.
c) Sản phẩm: HS thêm được tệp ảnh và video vào trang web theo yêu cầu.
d) Tổ chức thực hiện:
HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN |
Nhiệm vụ 1. Thêm tệp ảnh vào trang web Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 1 SGK tr.91 và thực hành cá nhân theo hướng dẫn. Yêu cầu: Trong trang web portfolio.html, hãy thêm 4 hình ảnh theo bố cục như Hình 3. Hình 3. Bố cục các ảnh trong trang web portfolio.html Hướng dẫn: + Bước 1: Khởi động Visual Studio Code và mở tệp portfolio.html. + Bước 2: Viết thêm đoạn mã HTML vào phần mã lệnh của thẻ <body>: Ý tưởng thực hiện:
+ Bước 3: Nháy đúp chuột vào tệp portfolio.html để kiểm tra kết quả. - GV đưa ra một số lưu ý cho HS khi thêm ảnh vào trang web: + Không phải ảnh nào trên Internet cũng đều được tự do sử dụng. Do đó, khi thêm ảnh vào trang web của mình, em cần kiểm tra tình trạng bản quyền của những ảnh đó và xin phép quyền sử dụng. Nếu chưa được phép, em buộc phải thay thế bằng những ảnh khác mà cho phép sử dụng tự do. + Có những dịch vụ lưu trữ ảnh cho phép chỉ định đường dẫn trực tiếp đến ảnh (ví dụ, imgur.com). Ngược lại, cũng có những dịch vụ lưu trữ ảnh không cho lấy đường dẫn trực tiếp (ví dụ, Google Photos). + Tệp ảnh có dung lượng lớn sẽ làm ảnh hưởng tốc độ tải trang web. Nói cách khác, trang web càng có nhiều ảnh dung lượng lớn thì tải càng chậm. Bước 2: HS thực hiện nhiệm vụ học tập: - HS tiếp nhận và thực hiện theo đúng hướng dẫn để hoàn thành Nhiệm vụ 1. - Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS quan sát bài làm của các bạn khác, nhận xét nhau. Bước 4: Đánh giá kết quả thực hiện: - GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 1 của HS. - Nhiệm vụ 1 được gọi là hoàn thành khi HS thêm được 4 hình ảnh theo bố cục như Hình 3 vào trang web portfolio.html. | Nhiệm vụ 1. Thêm tệp ảnh vào trang web GV có thể chuẩn bị sẵn ảnh cho HS hoặc HS tự tìm ảnh trên Internet. - Bước 1: HS khởi động Visual Studio Code và mở tệp portfolio.html. - Bước 2: HS bổ sung đoạn mã HTML như hướng dẫn để thêm 4 hình ảnh theo bố cục như Hình 3. - Bước 3: HS mở trang web trong trình duyệt và kiểm tra kết quả thực hiện.
|
Nhiệm vụ 2. Thêm tệp video vào trang web Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 1 SGK tr.92 và thực hành cá nhân theo hướng dẫn. Yêu cầu: Trong trang web portfolio.html vừa thực hiện ở trên, hãy thêm hai video về hoạt động của lớp. Hướng dẫn: + Bước 1: Viết thêm đoạn mã HTML vào phần mã lệnh của thẻ <body>: Em thêm tệp video trong thư mục Videos nằm cùng nơi với tệp portfolio.html (clip_keo_co.mp4) bằng đường dẫn của tệp hoặc thêm tệp video từ trang web khác bằng đường liên kết đến tệp đó. Lưu ý: Các trang web cho phép thêm tệp video theo những cách khác nhau và trình duyệt có thể không hỗ trợ thẻ <video>. + Bước 2: Nháy đúp chuột vào tệp portfolio.html để kiểm tra kết quả. Bước 2: HS thực hiện nhiệm vụ học tập: - HS tiếp nhận và thực hiện theo đúng hướng dẫn để hoàn thành Nhiệm vụ 2. - Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS quan sát bài làm của các bạn khác, nhận xét nhau. Bước 4: Đánh giá kết quả thực hiện: - GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 2 của HS. - Nhiệm vụ 2 được gọi là hoàn thành khi HS thêm được tệp video vào trang web portfolio.html. | Nhiệm vụ 2. Thêm tệp video vào trang web GV chuẩn bị trước tệp video .mp4 có dung lượng đủ nhỏ để HS thực hiện nhiệm vụ thực hành này. - Bước 1: HS bổ sung đoạn mã HTML như hướng dẫn để thêm video vào trang web portfolio.html. - Bước 2: HS mở trang web trong trình duyệt và kiểm tra kết quả thực hiện.
|
------------------------------------------
-------------------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
Hệ thống có đầy đủ các tài liệu:
- Giáo án word (400k)
- Giáo án Powerpoint (500k)
- Trắc nghiệm theo cấu trúc mới (250k)
- Đề thi cấu trúc mới: ma trận, đáp án, thang điểm..(250k)
- Phiếu trắc nghiệm câu trả lời ngắn (250k)
- Trắc nghiệm đúng sai (250k)
- Lý thuyết bài học và kiến thức trọng tâm (200k)
- File word giải bài tập sgk (150k)
- Phiếu bài tập để học sinh luyện kiến thức (200k)
- .....
- Các tài liệu được bổ sung liên tục để 30/01 có đủ cả năm
Có thể chọn nâng cấp lên VIP đê tải tất cả ở tài liệu trên
- Phí nâng cấp VIP: 800k/năm
=> Chỉ gửi 450k. Tải về dùng thực tế. Nếu hài lòng, 7 ngày sau mới gửi phí còn lại
Cách nâng cấp:
- Bước 1: Chuyển phí vào STK: 1214136868686 - cty Fidutech - MB(QR)
- Bước 2: Nhắn tin tới Zalo Fidutech - nhấn vào đây để thông báo và nhận tài liệu
Xem toàn bộ: Giáo án khoa học máy tính 12 chân trời sáng tạo đủ cả năm
ĐẦY ĐỦ GIÁO ÁN CÁC BỘ SÁCH KHÁC
Đủ giáo án word và powerpoint các môn lớp 12 kết nối tri thức
Đủ giáo án word và powerpoint các môn lớp 12 cánh diều
GIÁO ÁN WORD LỚP 12 CHÂN TRỜI SÁNG TẠO
Giáo án toán 12 chân trời sáng tạo
Giáo án đại số 12 chân trời sáng tạo
Giáo án hình học 12 chân trời sáng tạo
Giáo án sinh học 12 chân trời sáng tạo
Giáo án hoá học 12 chân trời sáng tạo
Giáo án vật lí 12 chân trời sáng tạo
Giáo án ngữ văn 12 chân trời sáng tạo
Giáo án lịch sử 12 chân trời sáng tạo
Giáo án kinh tế pháp luật 12 chân trời sáng tạo
Giáo án âm nhạc 12 chân trời sáng tạo
Giáo án Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo
Giáo án Tin học 12 - Định hướng Tin học ứng dụng chân trời sáng tạo
Giáo án hoạt động trải nghiệm hướng nghiệp 12 chân trời sáng tạo bản 1
Giáo án hoạt động trải nghiệm hướng nghiệp 12 chân trời sáng tạo bản 2
GIÁO ÁN POWERPOINT LỚP 12 CHÂN TRỜI SÁNG TẠO
Giáo án powerpoint đại số 12 chân trời sáng tạo
Giáo án powerpoint hình học 12 chân trời sáng tạo
Giáo án powerpoint Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo
Giáo án powerpoint Tin học 12 - Định hướng Tin học ứng dụng chân trời sáng tạo
Giáo án powerpoint hoạt động trải nghiệm hướng nghiệp 12 chân trời sáng tạo bản 2
GIÁO ÁN CHUYÊN ĐỀ LỚP 12 CHÂN TRỜI SÁNG TẠO
Giáo án chuyên đề ngữ văn 12 chân trời sáng tạo
Giáo án chuyên đề toán 12 chân trời sáng tạo
Giáo án chuyên đề kinh tế pháp luật 12 kết nối tri thức
Giáo án chuyên đề vật lí 12 chân trời sáng tạo
Giáo án chuyên đề hoá học 12 chân trời sáng tạo
Giáo án chuyên đề sinh học 12 chân trời sáng tạo
Giáo án chuyên đề lịch sử 12 chân trời sáng tạo
Giáo án chuyên đề địa lí 12 chân trời sáng tạo
Giáo án chuyên đề âm nhạc 12 chân trời sáng tạo
Giáo án chuyên đề Tin học 12 - Định hướng Tin học ứng dụng chân trời sáng tạo
Giáo án chuyên đề Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo
GIÁO ÁN POWERPOINT CHUYÊN ĐỀ LỚP 12 CHÂN TRỜI SÁNG TẠO
Giáo án powerpoint chuyên đề ngữ văn 12 chân trời sáng tạo
Giáo án powerpoint chuyên đề địa lí 12 chân trời sáng tạo
Giáo án powerpoint chuyên đề Tin học Khoa học máy tính 12 chân trời sáng tạo
GIÁO ÁN DẠY THÊM LỚP 12 CHÂN TRỜI SÁNG TẠO
Giáo án dạy thêm ngữ văn 12 chân trời sáng tạo
Giáo án powerpoint dạy thêm ngữ văn 12 chân trời sáng tạo
Giáo án dạy thêm toán 12 chân trời sáng tạo
Giáo án powerpoint dạy thêm toán 12 chân trời sáng tạo