Giáo án NLS Tin học 12 THUD 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

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 và yêu cầu:

Sử dụng công cụ số tìm kiếm thông tin kết hợp đọc SGK để trả lời các câu hỏi sau:

+ 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 sử dụng công cụ số tìm hiểu kiến thức.

- 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: 

- HS đọc kết quả tìm kiếm, đối chiếu với SGK và rút ra kết 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.

a) Đoạn mã HTML

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

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

a)

b)

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.

- 1.1.NC1b: Áp dụng được kỹ thuật tìm kiếm để lấy được dữ liệu, thông tin và nội dung trong môi trường số.

- 5.2.NC1b: HS sử dụng công cụ số để tìm kiếm thông tin.

- 1.3.NC1a: Xác định cấu trúc, lưu trữ và biểu diễn dữ liệu (sử dụng các thẻ HTML) trong các hệ thống phức tạp.

- 3.4.NC1a: Viết được mã lệnh chèn tệp ảnh vào trang web.

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 3 – Tìm hiểu ý nghĩa của khung nội tuyến SGK trang 65 và trả lời câu hỏi:

Trong các bài đăng có đính kèm video, một số trang web sẽ hiển thị nội dung video trong một khung và cho phép tương tác bên trong khung đó. Em có nhận xét gì về giao diện của cả trang khi thực hiện các thao tác bên trong khung này? 

- GV chia lớp thành các nhóm 2 – 3 HS và yêu cầu:

Sử dụng công cụ số tìm kiếm thông tin kết hợp đọc SGK để trả lời các câu hỏi sau:

+ Khung nội tuyến là gì?

+ HTML cung cấp thẻ nào để tạo khung nội tuyến?

+ Em hãy nêu ví dụ sử dụng khung nội tuyến.

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

+ Thẻ <iframe> 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.65:

Viết đoạn mã HTML để tạo hai khung nội tuyến có kích thước bằng nhau, hiển thị song song (theo phương ngang) trên trang web.

Bước 2: HS thực hiện nhiệm vụ học tập:

- HS sử dụng công cụ số tìm hiểu kiến thức. 

- HS tìm hiểu nội dung mục 3 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: 

- HS đọc kết quả tìm kiếm, đối chiếu với SGK và rút ra kết 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 3 SGK tr.65:

Khi video được hiển thị trong một khung và cho phép tương tác bên trong khung đó, giao diện của trang web có thể mang lại trải nghiệm tốt hơn cho người dùng. Điều này cho phép người dùng xem video mà không cần rời khỏi trang web chính và tương tác với nội dung khác cùng một lúc. Giao diện này cung cấp tính tiện ích và thuận lợi cho người dùng, giúp họ tiết kiệm thời gian và nâng cao trải nghiệm duyệt web.

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

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ẻ <iframe> sử dụng để chèn một trang web hoặc một tài nguyên web vào trong một trang web khác.

3. TẠO KHUNG NỘI TUYẾN TRONG TRANG WEB

- Khung nội tuyến là một khung nhìn chứa tài nguyên web khác trong trang web hiện tại.  

- HTML sử dụng thẻ <iframe> để tạo khung nội tuyến. 

Ví dụ: 

+ Khi cần chèn nội dung từ YouTube hoặc bản đồ từ Google Maps vào trang web của mình, các nền tảng đều cung cấp cho ta một đoạn mã sử dụng iframe để ta sao chép và dán vào trang web.

Chèn bản đồ từ Google Maps vào trang web

Chèn video YouTube vào trang web

+ iframe cũng là công cụ tiêu chuẩn để chèn các nội dung quảng cáo.

Chèn nội dung quảng cáo vào 
trang web

- Đoạn mã chèn khung nội tuyến:

Trong đó:

+ src: đường dẫn tới nội dung hiển thị trong khung nội tuyến.

+ width, height: chiều rộng và chiều cao của khung nội tuyến.

Ví dụ: Tạo một trang web có tên iframe.html và chèn vào một khung nội tuyến có kích thước 600 x 400 pixel. Trong khung nội tuyến hiển thị nội dung của trang web CLB.html.

Đoạn mã để thực hiện việc này trong tệp iframe.html là:

Khi đó trình duyệt sẽ hiển thị trang web iframe.html như Hình 11.4.

Hình 11.4. Ví dụ khung nội tuyến

- Lưu ý: Các phần tử iframe thường dùng kết hợp với thẻ <a> để tạo liên kết và hiển thị nội dung bằng cách thêm thuộc tính target cho thẻ <a> để chỉ định nơi mở tài liệu được liên kết.

- 1.1.NC1b: Áp dụng được kỹ thuật tìm kiếm để lấy được dữ liệu, thông tin và nội dung trong môi trường số.

- 5.2.NC1b: HS sử dụng công cụ số để tìm kiếm thông tin.

- 1.3.NC1a: Xác định cấu trúc, lưu trữ và biểu diễn dữ liệu (sử dụng các thẻ HTML) trong các hệ thống phức tạp.

- 3.1.NC1a: HS phân biệt được các định dạng tệp đa phương tiện, từ đó thao tác viết mã HTML để thiết lập trải nghiệm nghe nhìn tự động cho người dùng.

- 3.4.NC1a: Viết được mã lệnh tạo khung nội tuyến trong trang web.

Trường THPT:………………………………………….

Lớp:……………………………………………………...

Họ và tên:……………………………………………….

PHIẾU BÀI TẬP TIN HỌC 12

ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG – 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

A. PHẦN TRẮC NGHIỆM NHIỀU PHƯƠNG ÁN LỰA CHỌN

Khoanh tròn vào chữ cái đứng trước câu trả lời đúng nhất:

Câu 1. Thẻ <audio> không có thuộc tính nào sau đây?

A. preload.

B. width.

C. muted.

D. autoplay.

Câu 2. 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, em có thể sử dụng thẻ HTML nào để chỉ định các loại định dạng khác nhau?

A. type.

B. source.

C. control.

D. form.

Câu 3. Để trình duyệt chạy video ngay khi hiển thị, em cần sử dụng thuộc tính nào cho thẻ <video>?

A. autoplay.

B. controls.

C. poster.

D. active.

Câu 4. Thuộc tính nào của thẻ <img> là bắt buộc?

A. alt.

B. height.

C. width.

D. src.

Câu 5. Phương án nào sau đây là một định dạng tệp video?

A. wav.

B. ogg.

C. webm.

D. flac.

B. PHẦN TRẮC NGHIỆM ĐÚNG – SAI

Câu 1. Có thể chèn hình ảnh trực tiếp vào nội dung trang web bằng thẻ <img>.

a. Thẻ <img> là thẻ đôi.

b. Khi chèn hình ảnh vào trang web, ta cần quan tâm tới dung lượng của tệp hình ảnh.

c. Thuộc tính alt của thẻ <img> được sử dụng để cung cấp văn bản thay thế khi việc hiển thị ảnh bị lỗi.

d. Khi chèn ảnh, nên dùng đường dẫn tuyệt đối để tránh trường hợp tệp ảnh lưu trong máy tính bị lỗi.