Giáo án Khoa học máy tính 12 Kết nối bài 11: Chèn tập tin đa phương tiện và khung nội tuyến vào trang web

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, đọc Hoạt động 1 – Các định dạng tệp ảnh SGK tr.62 và trả lời câu hỏi:

Hãy kể tên các định dạng tệp ảnh mà em biết. Phân loại chúng vào nhóm đồ hoạ vectơ hoặc đồ hoạ điểm ảnh.

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ Những định dạng tệp ảnh nào hiển thị được và không hiển thị được trên web? 

+ HTML cung cấp thẻ nào để chèn ảnh vào nội dung trang web?

+ Đoạn mã để chèn ảnh vào trang web có cú pháp như thế nào?

+ Có thể thiết lập kích thước cho ảnh bằng những thuộc tính nào?

+ Khi chèn ảnh, nên dùng đường dẫn tương đối hay đường dẫn tuyệt đối? Vì sao?

- 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 củng cố kiến thức SGK tr.63:

Câu 1. Khẳng định “Thẻ <img> chỉ dùng khi chèn ảnh dạng .jpg vào trang web” là đúng hay sai?

Câu 2. Hãy nêu một số trường hợp có thể xảy ra lỗi khi hiển thị ảnh.

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.62 – 63 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.

Hướng dẫn trả lời câu hỏi Hoạt động 1 SGK tr.62:

+ Đồ hoạ vectơ: SVG, EPS, AI,…

+ Đồ hoạ điểm ảnh: JPEG, PNG, GIF, BMP, TIFF,…

Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.63:

Câu 1. Khẳng định sai vì .jpg chỉ là một loại phần mở rộng, thẻ img có thể dùng cho nhiều loại tệp tin ảnh khác nhau.

Câu 2. Một số lỗi có thể xảy ra:

+ 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.

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:

Cách chèn ảnh vào trang web là sử dụng thẻ <img>.

1. CHÈN TỆP ẢNH VÀO TRANG WEB

- Những định dạng tệp ảnh được trình duyệt hỗ trợ để hiển thị trên trang web: PNG, JPEG, GIF, JPEG-XR, WebP.

- Những định dạng khác như TIFF, EPS,… cần được chuyển đổi sang định dạng được hỗ trợ ở trên để có thể hiển thị trên web.

- HTML sử dụng thẻ đơn <img> để chèn ảnh vào nội dung trang web.

Hình 11.1. Chèn ảnh bằng thẻ <img>

- Với thẻ <img>, trình duyệt sẽ phải tải ảnh lên trước khi hiển thị trên trang web. 

→ Cần quan tâm tới dung lượng của tệp hình ảnh vì dung lượng lớn sẽ khiến việc hiển thị hình ảnh trên trang web gặp khó khăn nếu tốc độ của mạng chậm.

- Đoạn mã chèn ảnh vào trang web:

Trong đó:

+ Thuộc tính src là bắt buộc, để chỉ đường dẫn tới tệp ảnh. 

+ Thuộc tính alt là không bắt buộc nhưng nên được sử dụng kèm để cung cấp văn bản thay thế khi việc hiển thị ảnh bị lỗi. 

Ví dụ: Tạo một liên kết từ ảnh pdffiles.png trong thư mục images tới tệp có URL tai_lieu/bieu_mau.pdf có nội dung là biểu mẫu xin nhập học bằng đoạn mã HTML:

Hình 11.2a thể hiện kết quả khi có tệp pdffiles.png trong thư mục images và Hình 11.2b trong trường hợp không có.

Hình 11.2. Kết quả khi sử dụng 
thuộc tính alt với trình duyệt 
Google Chrome

- Để thiết lập kích thước cho ảnh ta sử dụng các thuộc tính width, height cho thẻ img:

+ Thuộc tính width, height cho biết kích thước hiển thị ảnh bằng pixel. 

+ Nếu chỉ sử dụng một trong hai thuộc tính, chiều còn lại sẽ được tính toán để hiển thị theo tỉ lệ của ảnh gốc.

Ví dụ: Hình 11.3 thể hiện kết quả khi chèn ảnh hình trái tim heart.png có chiều rộng 262 pixel, chiều cao 257 pixel với các giá trị thuộc tính khác nhau.

Hình 11.3. Kết quả hiển thị với các thiết lập kích thước khác nhau của cùng một ảnh

- Lưu ý: Khi chèn ảnh, nên dù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ị thay đổi.

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, đọc Hoạt động 2 – Nhận biết các thẻ và thuộc tính thẻ liên quan tới video SGK trang 64 và trả lời câu hỏi:

Quan sát đoạn mã sau và xác định xem đoạn mã này có chức năng gì? 

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ HTML cung cấp thẻ nào để chèn video và âm thanh vào trang web?

+ Những định dạng tệp tin đa phương tiện nào được hỗ trợ bởi hầu hết trình duyệt?

+ Đoạn mã để chèn tệp video hay âm thanh vào trang web có cú pháp như thế nào?

+ Thẻ <video> và <audio> có những thuộc tính gì?

- 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 củng cố kiến thức SGK tr.64:

Em hãy mô tả tác dụng của thuộc tính src đối với thẻ <audio>.

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.64 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.

Hướng dẫn trả lời câu hỏi Hoạt động 2 SGK tr.64:

Chức năng của đoạn mã: Chèn video tên “war_is_over.mp4” có chiều rộng 300px, chiều cao 250px vào trang web.

Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.64:

Thuộc tính src có tác dụng đưa ra đường dẫn tới tệp tin âm thanh trong câu lệnh.

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ẻ <video> và thẻ <audio> dùng để chèn các tệp tin video và âm thanh vào trang web. Để các trình duyệt thể hiện đúng, các tệp tin phải có định dạng được hỗ trợ bởi trình duyệt.

2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB

- HTML sử dụng thẻ <video> và <audio>  để chèn video và âm thanh vào trang web.

- Thẻ  <video> và <audio> được hỗ trợ trong hầu hết các trình duyệt, tuy nhiên định dạng của các tệp tin đa phương tiện có thể sử dụng vẫn phụ thuộc vào trình duyệt: 

+ Hai định dạng tệp video phổ biến nhất là mp4 và webm. Định dạng mp4 hiển thị được trực tiếp trên hầu hết các trình duyệt.

+ Ba định dạng tệp âm thanh phổ biến được hỗ trợ bởi hầu hết trình duyệt hiện tại là mp3, wav và ogg.

- Đoạn mã chèn tệp video/âm thanh vào trang web:

- Thuộc tính thẻ: 

+ Thẻ <video>:  

• src.

• width.

• height. 

• controls: là thuộc tính boolean, không cần có giá trị, để trình duyệt hiển thị các thành phần điều khiển như nút phát/tạm dừng, điều khiển âm lượng..... Thuộc tính này nên được sử dụng để có thể điều khiển trong quá trình phát tệp tin đa phương tiện.

• autoplay: là thuộc tính boolean, không cần có giá trị, cho phép trình duyệt chạy video ngay khi hiển thị. Tuy nhiên, một số trình duyệt như Google Chrome thường không cho video chạy ngay khi hiển thị hoặc có thể chạy ngay khi hiển thị nếu có thuộc tính muted – không phát tiếng.

• poster: cung cấp đường dẫn đến tệp ảnh, dùng để hiển thị khi chưa chạy video.

+ Thẻ <audio>:

• src.

• controls.

• autoplay.

• Không có thuộc tính width, height và poster.

* Trong trường hợp có nhiều video hoặc nhiều tệp âm thanh tương ứng với các định dạng khác nhau, có thể sử dụng thẻ <source> trong cặp thẻ <video> hay <audio> để chỉ định các loại định dạng khác nhau. Trình duyệt sẽ tự động tìm và hiển thị tệp tin với định dạng mà nó hỗ trợ.

Ví dụ: