Giáo án điện tử Tin học ứng dụng 12 cánh diều Bài 5: Chèn hình ảnh, âm thanh, video và sử dụng khung

BÀI 5. CHÈN HÌNH ẢNH, ÂM THANH, VIDEO VÀ SỬ DỤNG KHUNG

KHỞI ĐỘNG

• 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 sinh động hơn không?

• Làm thế nào để em thêm hình ảnh vào trang web Bai3-NV1.html để làm cho nó sinh động hơn?

• Em có kế hoạch sử dụng CSS như thế nào để cải thiện giao diện của trang web Bai3-NV1.html?

• Theo em, việc thêm hiệu ứng và chuyển động như thế nào có thể làm cho trang web Bai3-NV1.html trở nên hấp dẫn hơn?

• Em có kế hoạch thêm video và âm thanh vào trang web Bai3-NV1.html như thế nào để tăng tính tương tác?

• Làm thế nào để em thiết kế trang web Bai3-NV1.html để nó phản hồi tốt trên các thiết bị khác nhau?

1. CHÈN HÌNH ẢNH

Hoạt động: 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?

2. CHÈN ÂM THANH

3. CHÈN VIDEO

4. SỬ DỤNG KHUNG

5. THỰC HÀNH CHÈN HÌNH ẢNH, ÂM THANH VÀ SỬ DỤNG KHUNG

Vận dụng: 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.

• Bạn đã chọn những hình ảnh nào để thêm vào trang "album.html" của website cá nhân của bạn? Và tại sao bạn chọn những hình ảnh đó?

• Làm thế nào bạn thực hiện để chèn hình ảnh vào trang "album.html" và làm cho chúng phù hợp với nội dung và thiết kế của trang?

• Bạn có sử dụng công cụ nào để tối ưu hóa hình ảnh trước khi chèn vào trang "album.html"? Nếu có, bạn thực hiện như thế nào?

• Trong trang "hobbies.html", bạn đã thêm âm thanh hoặc video như thế nào để thể hiện sở thích của mình? Và âm thanh/video đó có ý nghĩa gì đối với bạn?

• Bạn thấy việc thêm âm thanh hoặc video vào trang "hobbies.html" làm cho website của bạn trở nên sinh động hơn như thế nào so với trước khi chưa có nó?

• Làm thế nào bạn lựa chọn định dạng và loại âm thanh/video phù hợp cho trang "hobbies.html"? Và bạn có gặp phải bất kỳ vấn đề kỹ thuật nào trong quá trình này không?

• Bạn có tham khảo các nguồn tài nguyên nào để chọn âm thanh/video cho sở thích của mình trên trang "hobbies.html"? Nếu có, bạn đã áp dụng những gì bạn học được từ các nguồn đó?

TỰ KIỂM TRA

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