KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
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
Hình ảnh giúp trang web sinh động và hấp dẫn hơn. Để chèn ảnh, chúng ta cần lưu ý các nội dung sau:
Định dạng tệp ảnh:
Trình duyệt hỗ trợ các định dạng phổ biến như PNG, JPEG, GIF và các định dạng mới như WebP. Các định dạng khác như TIFF hay EPS cần được chuyển đổi trước khi sử dụng.
Thẻ <img>:
Đây là thẻ đơn dùng để nhúng ảnh trực tiếp vào nội dung trang web.
Thuộc tính src và alt:
src là đường dẫn bắt buộc tới tệp ảnh; alt là văn bản thay thế khi ảnh lỗi, giúp người đọc hình dung nội dung ảnh.
Thuộc tính kích thước (width, height):
Dùng để thiết lập chiều rộng và chiều cao cho ảnh (đơn vị pixel). Nếu chỉ dùng một thuộc tính, chiều còn lại sẽ tự tính theo tỉ lệ gốc.
Lưu ý về đường dẫn:
Nên sử dụng đường dẫn tương đối để tránh lỗi khi tài nguyên trên mạng thay đổi.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 1: Khi thiết kế giao diện cho một trang web, việc lựa chọn đúng định dạng hình ảnh là rất quan trọng để đảm bảo khả năng hiển thị. Theo tài liệu đã học, trình duyệt web hiện nay hỗ trợ trực tiếp các định dạng tệp ảnh phổ biến nào?
Câu 2: Trong ngôn ngữ đánh dấu siêu văn bản HTML, để đưa một hình ảnh minh họa vào bên trong nội dung của trang web, người lập trình sử dụng thẻ <img>. Đặc điểm cấu trúc cơ bản của loại thẻ này được định nghĩa chính xác là gì?
Câu 3: Khi sử dụng thẻ chèn hình ảnh trong ngôn ngữ HTML, người lập trình cần khai báo các thuộc tính đi kèm để bức ảnh hiển thị đúng. Thuộc tính nào là bắt buộc phải có để chỉ định đường dẫn tới tệp ảnh cần hiển thị?
Câu 4: Thuộc tính alt trong thẻ chèn hình ảnh của HTML đóng một vai trò vô cùng quan trọng đối với trải nghiệm người dùng. Chức năng chính của đoạn văn bản được khai báo bên trong thuộc tính alt này thực chất là để làm gì?
Câu 5: Trong quá trình định dạng kích thước cho một bức ảnh trên trang web bằng thẻ <img>, nếu người lập trình chỉ thiết lập giá trị cho thuộc tính width (chiều rộng) mà bỏ qua thuộc tính height (chiều cao), thì trình duyệt web sẽ xử lý như thế nào?
Câu 6: Bạn Minh nhận được một tệp hình ảnh có định dạng là logo.tiff từ bộ phận thiết kế để đưa lên trang chủ của website công ty. Để đảm bảo hình ảnh này hiển thị tốt trên mọi trình duyệt web, Minh cần phải thực hiện thao tác nào trước tiên?
2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB
Để chèn video và âm thanh, chúng ta sử dụng hai thẻ tương ứng là <video> và <audio>.
Định dạng phổ biến:
Video thường dùng mp4, webm; âm thanh thường dùng mp3, wav, ogg.
Các thuộc tính quan trọng:
- controls: Hiển thị bộ điều khiển (phát, tạm dừng, âm lượng).
- autoplay: Tự động phát khi tải trang.
- poster: Hiển thị ảnh đại diện khi video chưa chạy (chỉ có ở thẻ <video>).
- src, width, height: Tương tự thẻ ảnh (thẻ <audio> không có width, height).
Thẻ <source>:
Dùng bên trong <video> hoặc <audio> để cung cấp nhiều định dạng tệp khác nhau, giúp trình duyệt tự chọn tệp phù hợp nhất.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 7: Để tăng thêm tính đa phương tiện và sức hấp dẫn cho một bài viết trên trang web, lập trình viên thường nhúng các tệp âm thanh và video. Ngôn ngữ HTML cung cấp hai thẻ chuyên dụng nào để thực hiện thao tác nhúng dữ liệu này?
Câu 8: Khi chuẩn bị các tài nguyên đa phương tiện để đưa lên môi trường web, việc chọn đúng định dạng là điều bắt buộc. Theo tiêu chuẩn hiện nay, các định dạng tệp video và âm thanh nào thường được sử dụng phổ biến nhất trên trình duyệt?
Câu 9: Khi chèn một đoạn video vào trang web, người dùng cần có khả năng tương tác với video đó (như phát, tạm dừng, điều chỉnh âm lượng). Để làm xuất hiện bộ điều khiển này trên màn hình, lập trình viên sử dụng thuộc tính nào trong thẻ video?
Câu 10: Thuộc tính poster có chức năng hiển thị một hình ảnh đại diện trên khung phát trước khi người dùng nhấn nút chạy. Điểm khác biệt quan trọng về việc sử dụng thuộc tính này giữa thẻ chèn hình ảnh động và thẻ chèn âm thanh là gì?
Câu 11: Trong một số trường hợp, người lập trình lồng nhiều thẻ <source> vào bên trong thẻ <video> hoặc <audio> với các đường dẫn tệp có định dạng khác nhau. Cơ chế hoạt động của trình duyệt khi gặp cấu trúc mã lệnh này sẽ diễn ra như thế nào?
Câu 12: Một học sinh đang cố gắng thiết kế giao diện phát nhạc nền cho trang web của mình bằng thẻ <audio>. Học sinh này muốn khung phát nhạc có chiều rộng là 300 pixel nên đã thêm thuộc tính width="300". Tại sao giao diện lại không thay đổi kích thước?
3. TẠO KHUNG NỘI TUYẾN TRONG TRANG WEB
Khung nội tuyến (iframe) cho phép nhúng một tài nguyên web khác (như trang web khác, bản đồ, video YouTube) vào ngay trong trang web hiện tại.
Thẻ <iframe>:
Sử dụng thuộc tính src để trỏ tới trang web cần nhúng và width, height để định kích thước khung.
Kết hợp với thẻ liên kết <a>:
Sử dụng thuộc tính target của thẻ <a> trùng với id (hoặc name) của iframe để hiển thị nội dung liên kết ngay trong khung đó.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 13: Trong thiết kế web hiện đại, người ta thường nhúng trực tiếp một tài nguyên web khác (như bản đồ, video YouTube) vào ngay bên trong trang web hiện tại để tăng tính tiện ích. Kỹ thuật này được gọi bằng thuật ngữ chuyên môn nào sau đây?
Câu 14: Khi sử dụng thẻ <iframe> để nhúng một trang web khác vào trang hiện hành, người lập trình có thể kiểm soát và định cấu hình không gian hiển thị của khung nhúng này thông qua việc khai báo các thuộc tính kích thước nào?
Câu 15: Trong cấu trúc lệnh của một khung nội tuyến, thuộc tính src đóng một vai trò cốt lõi để khung này có thể hoạt động đúng mục đích. Chức năng chính xác của thuộc tính src khi được khai báo bên trong thẻ <iframe> là dùng để làm gì?
Câu 16: Khi kết hợp thẻ liên kết <a> với thẻ khung nội tuyến <iframe>, ta có thể làm cho nội dung của liên kết hiển thị ngay bên trong khung đó thay vì mở ra tab mới. Để làm được điều này, thuộc tính target của thẻ <a> phải đáp ứng điều kiện gì?
Câu 17: Bạn đang viết mã HTML với một khung nội tuyến có mã định danh là id="myFrame". Bạn muốn tạo một dòng chữ "Xem Trang 1", sao cho khi nháy chuột vào dòng chữ này, trang "trang1.html" sẽ tải trực tiếp vào khung đó. Đoạn mã nào dưới đây thực hiện đúng yêu cầu?