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?
Một số nhận xét về giao diện của cả trang web khi thực hiện các thao tác bên trong: tập trung vào video, tăng tính tương tác, cải thiện trải nghiệm người dùng, tối ưu hóa không gian,…
Bên cạnh ưu điểm cũng có một số nhược điểm còn thấy rõ.
Khi thực hiện các thao tác bên trong một khung video trên một trang web, có một số nhận xét về giao diện của cả trang:
- Tập trung vào video: Khung video thường thu hút sự chú ý của người dùng, làm cho học tập trung vào nội dung video chính. Điều này có thể làm giảm sự chú ý của họ đối với các phần khác của trang.
- Tăng tính tương tác: Việc cho phép tương tác bên trong khung video tạo ra trải nghiệm người dùng tích hợp và tương tác hơn. Người dùng có thể xem video và thực hiện các hành động khác ngay trên cùng một trang, thay vì phải chuyển đến trang khác hoặc tắt video để thực hiện các tác vụ khác.
- Cải thiện trải nghiệm người dùng: Khi người dùng có thể thực hiện các thao tác bên trong khung video, họ có thể tương tác với nội dung một cách trực quan và tự nhiên hơn. Điều này có thể cải thiện trải nghiệm người dùng và làm cho trang web trở nên dễ sử dụng hơn.
- Tối ưu hóa không gian: Sử dụng khung video để hiển thị nội dung video giúp tối ưu hóa không gian trên trang web. Thay vì chiếm quá nhiều không gian trên trang, video chỉ chiếm một phần nhỏ và cho phép trang web hiển thị các phần khác một cách hiệu quả.
Tuy nhiên, cũng cần lưu ý rằng việc sử dụng khung video có thể làm mất quá nhiều không gian và chú ý của người dùng nếu không được thực hiện một cách cân nhắc và tối ưu. Điều này có thể ảnh hưởng đến trải nghiệm người dùng và hiệu suất của trang web.
Các bài tập cùng chuyên đề
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.
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 vectơ hoặc đồ họa điểm ảnh.
Thẻ <img> chỉ dùng khi chèn ảnh jpg vào trang web có đúng không?
Hãy Nêu một số trường hợp có thể xảy ra lỗi khi hiển thị ảnh
Quan sát đoạn mã sau và xác định tên đoạn mã này có chức năng gì?
<video src=”video/war_is_over.mp4 ”with=”300” height= “250” autoplay>
Thuộc tính scr có tác dụng gì đối với thẻ audio?
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.
Cho ảnh có kích thước gốc là 720x 450 Pixel chèn ảnh vào trang web bằng câu lệnh:
<img src= “images/1.png” alt = “ chiếc lá” width 600>.
Hỏi ảnh trong trang web có kích thước bao nhiêu?
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).
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.
Theo em, một trang web có nội dung chỉ thuần văn bản sẽ có những hạn chế gì so với trang web có thêm hình ảnh và âm thanh?
Em hãy bổ xung thuộc tính title cho thẻ <img> trong mã lệnh HTML ở ví dụ 1.
Em hãy bổ xung thuộc tính cho đoạn mã HTML ở ví dụ 2 để kích thước hiển thị của video là 800x600 pixels và video tự động phát không có âm thanh.
Chức năng các thuộc tính của thẻ <img> khi thêm tệp ảnh vào trang web là gì?
Em hãy liệt kê và nêu chức năng các thuộc tính của thẻ <audio> khi thêm tập âm thanh vào trang web.
Giả sử tệp portfolio.html nằm cùng nơi với thư mục Asset. Thư mục Sound, là thư mục con của thư mục Asset, có chứa tệp bai_hat.mp3. Theo em, đường dẫn cho thuộc tính src để thêm tệp bai_hat.mp3 này vào tệp portfolio.html là gì?
Thêm tệp ảnh vào trang web
Yêu cầu: Trong trang web portfolio.html, hãy thêm 4 hình ảnh theo bố cục như Hình 3.
Yêu cầu: Trong trang web portfolio.html vừa thực hiện ở trên, hãy thêm hai video vẽ hoạt động của lớp.
Em hãy bổ sung các nội dung sau vào trang web portfolio.html:
1. Một video clip và một bài hát mà em yêu thích với thẻ <video>,<audio), <h1>, <h2> và các thể khác đã học.
2. Thêm ảnh vào mục Nội dung yêu thích sao cho mỗi hàng của bảng hiển thị ba ảnh, sử dụng thẻ <img>, các thẻ tạo bảng và các thẻ khác đã học.
Hình 4 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.
3. Thêm ảnh đại diện vào bên phải của mục Giới thiệu chung để được kết quả như Hình 5.
Em có biết làm thế nào để trang web Bài3-NV1.html em tạo ở bài học trước trở nên xinh đẹp và sinh động hơn?
Trong số các định dạng sau: PNG, RAW, BMP, JPG, GIF, theo em, những định dạng nào được sử dụng phổ biến trên trang web? Vì sao?
Tạo website cá nhân:
Em hãy chèn thêm hình ảnh, âm thanh, video để hoàn thiện tiếp website cá nhân đã tạo ở các bài học trước.
Thuộc tính nào của phần tử img được dùng để hiển thị thông báo khi hình ảnh chèn vào trang web gặp lỗi trong quá trình hiển thị trên màn hình trình duyệt web?
A. link
B. title
C. src
D. alt
Thuộc tính nào dùng để xác định tài nguyên được nhúng vào trang web khi khai báo iframe?
A. source
B. src
C. link
D. target
