Giáo án Tin học 12 Kết nối tri thức Bài 11: Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web

Giáo án Tin học 12 Kết nối tri thức Bài 11: Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web

Xem thử

Chỉ từ 400k mua trọn bộ Kế hoạch bài dạy (KHBD) hay Giáo án Tin học 12 Kết nối tri thức bản word chuẩn kiến thức, trình bày đẹp mắt, dễ dàng chỉnh sửa:

• B1: gửi phí vào tk: 0711000255837 - NGUYEN THANH TUYEN - Ngân hàng Vietcombank (QR)
• B2: Nhắn tin tới Zalo VietJack Official - nhấn vào đây để thông báo và nhận giáo án

I. MỤC TIÊU

1. Kiến thức

Học sinh được học về:

- Các loại tệp tin đa phương tiện có thể chèn vào trang web.

- Cách chèn các tệp tin đa phương tiện vào trang web.

- Khái niệm khung nội tuyến và ý nghĩa của việc chèn khung nội tuyến trong trang web.

2. Năng lực

- Sử dụng được các thẻ HTML để thêm ảnh, video và âm thanh và khung nội tuyến vào trang web.

- Hiểu và áp dụng các thuộc tính của thẻ <img>, <video>, <audio> , <iframe> để tuỳ chỉnh hiển thị và chức năng của các phương tiện đa phương tiện trên trang web.

3. Phẩm chất

- Hình thành tư duy tổng quan về sự liên kết giữa các thành phần trong một tổng hợp phức tạp.

- Có trách nhiệm khi chia sẻ các nguồn tài nguyên trên không mạng.

II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU

- GV chuẩn bị:

• SGK, bài giảng PPT, phòng máy tính có kết nối Internet, máy chiếu.

• Chuẩn bị một số tệp mẫu có chèn ảnh/video/audio và sử dụng khung nội tuyến.

• Chuẩn bị thêm một số tệp tin ảnh không được trình duyệt hỗ trợ (VD ảnh tiff…)

- HS: SGK, vở ghi, chuẩn bị bài ở nhà.

III. TIẾN TRÌNH DẠY HỌC

Bài học được thực hiện trong 2 tiết: 1 tiết lí thuyết, 1 tiết thực hành.

A. MỞ ĐẦU

Hoạt động 1. Khởi động (3 phút)

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, từ đó định hướng mục tiêu hoạt động học tập cho HS, tạo hứng thú bắt đầu bài học.

b) Tổ chức thực hiện

- GV dẫn dắt và đưa ra câu hỏi khởi động:

Ở bài học trước HS được học về trang web là siêu văn bản, trong đó có các đối tượng văn bản, hình ảnh, âm thanh, video (đa phương tiện). Việc sử dụng các đối tượng trên trong trang web có ý nghĩa gì?

- HS suy nghĩ và trả lời câu hỏi.

- Sau 1 phút, GV mời một số HS trả lời câu hỏi.

- HS có thể trả lời được: tác dụng thu hút người xem, minh hoạ nội dung rõ ràng, dễ hiểu, sinh động.

- GV tổng kết câu trả lời ➔ sự cần thiết của các đối tượng đa phương tiện trong trang web, GV dẫn dắt vào nội dung bài.

B. HÌNH THÀNH KIẾN THỨC MỚI

Hoạt động 2. Tìm hiểu về cách chèn tệp ảnh vào trang web (15 phút)

a) Mục tiêu

- HS biết về các định dạng tệp ảnh, tệp ảnh nào được chèn vào trang web, tệp ảnh nào không chèn được vào trang web.

- HS hiểu về cú pháp câu lệnh chèn tệp ảnh vào web.

b) Tổ chức thực hiện

# 1. Chuyển giao nhiệm vụ

- GV nêu yêu cầu hoạt động 1 (SGK). HS suy nghĩ trả lời nhanh.

- GV giới thiệu thẻ <img> và ví dụ Hình 11.1, phân tích thành phần trong ví dụ.

- GV dẫn dắt, đôi khi chèn ảnh bị lỗi, không hiển thị, kích thước ảnh không như mong muốn, quá lớn hoặc quá nhỏ, không đúng vị trí ➔ thêm các thuộc tính khác khi chèn ảnh.

- GV yêu cầu HS đọc SGK mục 1 trang 62, 63, thảo luận nhóm và hoàn thành phiếu học tập 1.

- GV yêu cầu HS thảo luận, trả lời câu hỏi.

- GV yêu cầu HS trả lời câu hỏi tự luyện SGK/63

Nội dung: 1. Hoạt động 1: Kể tên các định dạng tệp ảnh mà em biết? 2. Phiếu học tập 1. Hãy ghép nối các nội dung cột A với cột B để có kết quả đúng, có thể ghép nối 1 phương án tại cột A với nhiều phương án tại cột B Cột A Cột B 1. Thẻ <img> 2. Thuộc tính src 3. Thuộc tính alt 4. Thuộc tính width - height a. chỉ đường dẫn tới tệp ảnh b. giúp thiết lập kích thước chiều rộng - chiều cao khi hiển thị của ảnh c. khai báo nội dung văn bản thay thế khi việc hiển thị ảnh bị lỗi. d. Thẻ đơn e. là thuộc tính bắt buộc f. là thuộc tính không bắt buộc 3. Câu hỏi thảo luận 4. Câu hỏi tự luyện trang 63.

- Ví dụ câu lệnh chèn ảnh, HS phân tích các thành phần, dự đoán kết quả.

# 2. Thực hiện nhiệm vụ:

- HS nghe giảng

- HS hoạt động cá nhân, suy nghĩ trả lời nhanh câu hỏi hoạt động 1.

- HS hoạt động nhóm 3 người, đọc SGK, hoàn thiện phiếu học tập 1.

- HS thảo luận trả lời câu hỏi bổ sung.

- HS trả lời câu hỏi tự luyện.

Kết quả:

1. Các định dạng tệp ảnh được chèn vào trang web: PNG, JPG, JPEG, GIF, JPEG-XR, WebP

2. Phiếu học tập 1 1d, 2ea, 3fc, 4fb

Cú pháp:

<img src = “đường dẫn tới tệp tin ảnh” alt = “đoạn văn bản thay thế” width = “kích thước chiều rộng” height = “kích thước chiều cao”>

3. Câu hỏi thảo luận:

- Không hiển thị gì, gây khó khăn cho người xem.

- Nên đổi 1 thuộc tính, giúp giữ nguyên tỉ lệ ảnh, tránh bị bóp méo ảnh.

4. Câu hỏi tự luyện C1. Sai

C2. Các tình huống xảy ra lỗi:

- Trình duyệt không hỗ trợ loại tệp tin ảnh được dùng

- Ảnh bị lỗi (hỏng)

- Đường dẫn không đúng.

C3. Kết quả hiển thị trên trình duyệt.

# 3. Báo cáo, thảo luận

- GV mời một số HS trả lời câu hỏi Hoạt động 1. GV có thể bổ sung ví dụ. Sau khi HS trả lời, GV chỉ ra các loại ảnh nào hiển thị trên web được, loại ảnh nào không hiển thị được.

- Một số nhóm HS báo cáo kết quả phiếu học tập 1 (GV có thể cho HS up sản phẩm trên link Padlet hoặc trao đổi phiếu để kiểm tra chéo nếu sử dụng phiếu giấy).

- GV chốt kiến thức, nhấn mạnh ý nghĩa các thuộc tính alt, width, height. GV thực hành cho HS quan sát kết quả các ví dụ trong mục.

- GV nêu câu hỏi thảo luận:

- Nếu chèn ảnh bị lỗi mà không có thuộc tính alt thì sẽ hiển thị như thế nào trên trình duyệt?

- Khi thay đổi kích thước của ảnh, chỉ nên điều chỉnh 1 thuộc tính width hoặc height mà không nên điều chỉnh cả 2, vì sao?

- GV nêu lưu ý: Khi chèn ảnh, nên chèn bằng đường dẫn tương đối, tránh trường hợp xảy ra lỗi khi ảnh trên mạng bị lỗi.

# 4. Kết luận

- Chốt các kiến thức trọng tâm.

Hoạt động 3. Tìm hiểu về cách chèn âm thanh và video vào trang web (10 phút)

a) Mục tiêu:

- HS hiểu cú pháp câu lệnh chèn âm thanh và video vào trang web

b) Tổ chức thực hiện

# 1. Chuyển giao nhiệm vụ

- GV giới thiệu 2 đoạn mã, gợi ý HS tương tự cú pháp chèn tệp ảnh đã học ở phần 1, hãy xác định các thành phần và dự đoán đoạn mã có này có chức năng gì?

- Giáo viên giao nhiệm vụ HS đọc SGK, trả lời câu hỏi 2.

- GV giới thiệu cú pháp lệnh chèn audio, video và phân tích ví dụ, minh hoạ kết quả ví dụ.

- GV nêu vấn đề, đưa ví dụ về trang web có hiển thị nhiều video, audio (trang web chuyên giới thiệu phim, nhạc), giới thiệu nội dung 4.

1. Quan sát đoạn mã sau, xác định đoạn mã này có chức năng gì? 1. <video src = “video/war_is_over.mp4” width = “300” height = “250” autoplay> </video> 2. <audio src = “audio/war_is_over.mp3” > </audio> 2. Đọc SGK mục 2, HS trả lời câu hỏi: - Định dạng tệp video được phép chèn vào trang web? - Định dạng tệp audio được phép chèn vào trang web? 3. Cú pháp lệnh chèn audio, video vào trang web + ví dụ 4. Cách chèn nhiều tệp âm thanh/video vào trang web.

................................

................................

................................

(Nguồn: NXB Giáo dục)

Trên đây tóm tắt một số nội dung miễn phí trong bộ Giáo án Tin học 12 Kết nối tri thức mới nhất, để mua tài liệu đầy đủ, Thầy/Cô vui lòng xem thử:

Xem thử

Xem thêm các bài soạn Giáo án Tin học lớp 12 Kết nối tri thức hay, chuẩn khác:

• Giáo án Tin 12 Bài 12: Tạo biểu mẫu

• Giáo án Tin 12 Bài 13: Khái niệm, vai trò của CSS

• Giáo án Tin 12 Bài 14: Định dạng văn bản bằng CSS

• Giáo án Tin 12 Bài 15: Tạo màu cho chữ và nền

• Giáo án Tin 12 Bài 16: Định dạng khung

---