Nội dung chính Tin học ứng dụng 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

BÀI 11: CHÈN TỆP TIN ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB

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.

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

- Để 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.

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

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

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. 

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

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

4. THỰC HÀNH CHÈN TỆP ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYỂN

Nhiệm vụ 1: Chèn tập ảnh

- Bước 1: HS tạo được trang the_thao.html và chèn ảnh đã chuẩn bị vào trang web bằng thẻ <img>.

- Bước 2: HS tạo được trang nghe_thuat.html.

Nhiệm vụ 2: Chèn tập âm thanh

- Bước 1: HS chuẩn bị tệp bài hát “Quốc ca” (mp4 hoặc mp3).

- Bước 2: HS chèn được tệp bài hát vào trang web.

Nhiệm vụ 3: Chèn khung nội tuyến

- Bước 1: HS tạo được tệp index.html có nội dung:

- Bước 2: HS tạo được phần tử iframe có gán mã định danh để đặt liên kết.

- Bước 3: HS tạo được hai vị trí đặt liên kết tương ứng với hai lựa chọn là câu lạc bộ thể thao hoặc câu lạc bộ nghệ thuật.