Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web

SAU BÀI HỌC NÀY EM SẼ:

Có những điểm gì khiến em thấy thú vị hơn khi xem các trang web so với đọc sách?

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

Hoạt động 1: Các định dạng tệp ảnh

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.

Hình ảnh giúp cho các trang web sinh động hơn. Có thể chèn 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, 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 văn bản mà không tạo ra ngắt dòng (Hình 11.1).

<p>Tôi muốn uống một cốc <img src="images/coffee.png"> ngay bây giờ.</p>

a) Đoạn mã HTML

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

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

Với thẻ <img>, trình duyệt sẽ phải tải ảnh về 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ẽ 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.

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:

<img src="đường dẫn tới tệp tin ảnh" alt="đoạn văn bản thay thế">

Ví dụ, bằng cách nhập đoạn mã HTML sau, ta tạo một liên kết từ ảnh pdffiles.png trong thư mục images tới 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:

<a href="tai_lieu/bieu_mau.pdf"><img src="images/pdffiles.png" alt="Biểu mẫu xin nhập học"></a>

<p>Tải biểu mẫu xin nhập học: </p>

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 hiển thị của ảnh, ta có thể sử dụng thuộc tính width, height của 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 cao 257 pixel với các giá trị thuộc tính khác nhau.

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.

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

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

Hoạt động 2: Nhận biết các thẻ và thuộc tính thẻ liên quan tới video

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

<video src="videos/war is over.mp4" width="300" height="250" autoplay></video>

Để chèn video và âm thanh vào trang web, ta sử dụng thẻ <video> hoặc <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.

<video [audio] thuộc_tính="giá_trị_thuộc_tính"></video [audio]>

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

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> hoặc <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ụ:

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Trình duyệt của bạn không hỗ trợ HTML video </video>

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 hiển thị được các tệp tin có định dạng được hỗ trợ bởi trình duyệt, mã dùng phải đúng.

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

3 KHUNG NỘI TUYẾN

Hoạt động 3

Trong các bài 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?

Các thuộc tính thường dùng của thẻ <iframe> là:

Khung nội tuyến là một khung nhìn chứa tài nguyên web khác trong trang web (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.

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

<iframe src="CLB.html" width="600" height="400"></iframe>

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.

Thẻ <iframe> được 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.

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.

THỰC HÀNH: CHÈN TỆP TIN ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB

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

Hướng dẫn:

Chuẩn bị: Tạo thư mục images trong thư mục chứa các bài tập thực hành, sao chép một ảnh hoạt động thể thao của trường/lớp vào thư mục đó (chẳng hạn tệp thethao.png). Chèn ảnh đã chuẩn bị vào trang web:

<img src="images/thethao.png" alt="Hoạt động của các CLB Thể thao">

Nhiệm vụ 2: Chèn tệp bài hát Quốc ca vào trang web

Hướng dẫn: Chuẩn bị tệp bài hát Quốc ca (mp4 nếu là video, mp3 nếu là audio) và thực hiện chèn vào trang web bằng thẻ phù hợp và để ở chế độ autoplay.

Yêu cầu: Chèn tệp bài hát "Quốc ca" vào trang web.

Lưu ý: Em chỉ nên dùng các tài nguyên được phép sử dụng cho trang web của mình.

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

Yêu cầu: Chèn khung nội tuyến vào trang CLB.html, hiển thị nội dung của hai trang the_thao.html hoặc nghe_thuat.html tuỳ theo lựa chọn (Hình 11.5).

Hướng dẫn: Sử dụng iframe để chèn nội dung của hai trang đã viết trong Nhiệm vụ 1.

Bước 1. Tạo tệp tin index.html có nội dung "Câu lạc bộ ngoại khoá Trường Nguyễn Bỉnh Khiêm" đặt trong cặp thẻ <h2></h2>.

Bước 2. Tạo một phần tử iframe để hiển thị nội dung, phần tử iframe được gán mã định danh để đặt liên kết.

<iframe id="iframe" width="60%" height="700"></iframe>

Bước 3. Tạo 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 và đặt liên kết bằng thẻ <a> với thuộc tính target là mã định danh của khung nhìn vừa tạo.

[<a href="the_thao.html" target="iframe">Câu lạc bộ Thể thao</a>] [<a href="nghe_thuat.html" target="iframe">Câu lạc bộ Nghệ thuật</a>]

Lưu ý: Thứ tự hiển thị là thứ tự các đoạn mã lệnh, để các lựa chọn câu lạc bộ hiển thị phía trên cần viết câu lệnh trong Bước 3 ở trên câu lệnh trong Bước 2.

LUYỆN TẬP

Hỏi: Nếu không khai báo thuộc tính width, height thì ảnh trong trang web có kích thước bao nhiêu?

VẬN DỤNG

Tạo một khung nội tuyến và liên kết đến bài hát em thích (ví dụ trên YouTube) vào trang web giới thiệu bản thân.