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

Bài 11 - Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
1. Chèn tệp ảnh vào trang web
2. Chèn âm thanh và video vào trang web
3. Tạo khung nội tuyến trong trang web
4. Thực hành chèn tệp đa phương tiện và khung nội tuyến

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

Hình ảnh giúp cho các trang web sinh động hơn. Có thể nhúng hình ảnh trực tiếp trong nội dung của trang hoặc dưới dạng hình nền. Trong bài này, chúng ta sẽ tìm hiểu cách chèn ảnh vào nội dung trang web bằng thẻ <img>.
Để có thể hiển thị trên web, các tệp ảnh cần được định dạng là một trong những loại được trình duyệt web hỗ trợ. Các định dạng phổ biến như PNG, JPEG hoặc GIF và một số định dạng mới, phổ biến cho web như JPEG-XR hay WebP. Các ảnh có định dạng khác như TIFF, EPS,… cần được chuyển đổi sang định dạng được hỗ trợ ở trên.
Thẻ <img> là thẻ đơn, dùng để thêm ảnh vào trang web. Khi gặp thẻ <img>, trình duyệt hiểu là “cần đặt một hình ảnh vào đây”. Hình ảnh có thể được chèn ngay trong dòng văn bản mà không tạo ra ngắt dòng (Hình 11.1):

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. Do vậy, 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 vì dung lượng lớn sẽ làm 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.
Trong các thuộc tính của thẻ <img>, thuộc tính src là bắt buộc, để chỉ đường dẫn tới tệp ảnh. Ngoài ra, thuộc tính quan trọng khác là alt 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ăn bản thay thế cần có tác dụng giúp người đọc hình dung ra nội dung bức ảnh. Đoạn mã để chèn ảnh có thể như sau:

Ví dụ, ta tạo một liên kết từ ảnh pdffiles.png trong thư mục images tới một tệp có đường dẫn 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 sau:

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

Để thiết lập kích thước cho ảnh ta sử dụng các thuộc tính width, height hay cho thẻ img. Thuộc tính width, height cho biết kích thước hiển thị ảnh bằng pixel. Khi sử dụng các thuộc tính này, trình duyệt sẽ giữ đúng không gian trong bố cục khi hình ảnh đang tải giúp hiển thị trang nhanh hơn. Nếu chỉ sử dụng một trong hai thuộc tính (width hoặc height), 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 dài 257 pixel với các giá trị thuộc tính khác nhau.

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ị thay đổi.

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

Để chèn video hoặc âm thanh vào trang web, ta sử dụng thẻ <video> và <audio>. Hai thẻ này đượ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. Mp4 chạy đượ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 nay là mp3, wav và ogg.

Để chèn tệp video hay âm thanh vào trang web, ta sử dụng thẻ <video> hoặc <audio>:

Tương tự như thẻ <img> thẻ <video> cũng có các thuộc tính cơ bản như <src, <width, <height. Ngoài ra còn có các thuộc tính khác như:

• 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> 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, ta 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ụ:

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. Để tạo khung nội tuyến ta sử dụng thẻ <iframe> (viết tắt của inline frame - 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, iframe cũng là công cụ tiêu chuẩn để chèn các nội dung quảng cáo.

Các thuộc tính thường dùng của thẻ <iframe> là:
• 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 ta 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.

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.