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

KHỞI ĐỘNG

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

Giải nhanh:

• Có các siêu liên kết để dễ dàng tìm kiếm các thông tin liên quan khi đọc.

• Có chứa các tệp hình ảnh, âm thanh, video, GIF,… khiến nội dung được minh họa rõ ràng hơn.

• Thông tin đa dạng hơn.

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 đồ họa vecter hoặc đồ họa điểm ảnh.

Giải nhanh:

Đồ họa vector:

• SVG (Scalable Vector Graphics)

• AI (Adobe Illustrator)

• EPS (Encapsulated PostScript)

• PDF (Portable Document Format)

• Đồ họa điểm ảnh:

• JPEG/JPG (Joint Photographic Experts Group)

• PNG (Portable Network Graphics)

• GIF (Graphics Interchange Format)

• BMP (Bitmap)

• TIFF (Tagged Image File Format)

Câu hỏi 1: Thẻ <img> chỉ dùng khi chèn ảnh jpg vào trang web có đúng không?

Giải nhanh:

Thẻ <img> không chỉ dùng để chèn ảnh JPG vào trang web mà còn hỗ trợ nhiều định dạng tệp ảnh khác. 

Câu hỏi 2: Hãy nêu một số trường hợp có thể xảy ra lỗi khi hiển thị hình ảnh.

Giải nhanh:

• Đường dẫn không chính xác.

• Tệp ảnh không tồn tại.

• Định dạng tệp ảnh không được hỗ trợ.

• Lỗi tải ảnh.

• Lỗi về quyền truy cập.

• Lỗi cú pháp HTML.

• Vấn đề với kích thước ảnh.

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 đoạn mã này có chức năng gì?

Giải nhanh:

Đoạn mã trên là một thẻ HTML <video> được sử dụng để nhúng một video vào trang web.

Câu hỏi: Thuộc tính src có tác dụng gì với thẻ <audio>?

Giải nhanh:

Thuộc tính src được sử dụng để chỉ định đường dẫn (URL) tới file âm thanh muốn phát. 

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

Hoạt động 3: Trao đổi và nhận xét

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?

Giải nhanh:

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. 

Câu hỏi: Viết các câu lệnh để 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.

Giải nhanh:

Mã HTML:

Kết quả trả về:

LUYỆN TẬP

Câu 1: Cho ảnh có kích thước gốc là 720 x 450 pixel. Chèn ảnh vào trang web bằng câu lệnh:

Hỏi ảnh trong trang web có kích thước bao nhiêu?

Giải nhanh:

Ảnh được chèn vào trang web với chiều rộng được đặt là 600 pixel thông qua thuộc tính width. 

Câu 2: Chèn thêm một số ảnh của mình vào trang web giới thiệu bản thân (em đã tạo ở phần Luyện tập Bài 10)

Giải nhanh:

Đoạn mã HTML:

Kết quả trả về:

VẬN DỤNG

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

Giải nhanh:

Đoạn mã HTML thêm vào ví dụ trước:

Kết quả trả về: