Lý thuyết - Bài F4 Thêm dữ liệu đa phương tiện vào trang web

Bài F4. Thêm dữ liệu đa phương tiện vào trang web

Nội dung lý thuyết

Thẻ <img> dùng để thêm tệp ảnh vào trang web.
Thẻ <img> chỉ có thẻ mở, không có thẻ đóng.
Khi sử dụng thẻ này, cần chỉ định đường dẫn của tệp ảnh trong thuộc tính src.
Ngoài ra, có thể chỉ định kích thước hiển thị của tệp ảnh (chiều rộng và chiều cao) qua hai thuộc tính width và height.

Ví dụ 1: HTML hiển thị tệp ảnh Chan_dung.jpg lên trang web:

<img src="Images/Chan_dung.jpg" width="150" height="200" alt="Ảnh chân dung">

Nếu hình ảnh không hiển thị, trình duyệt sẽ hiển thị văn bản "Ảnh chân dung" trong thuộc tính alt.

Kết quả hiển thị trên trang web

Một số thuộc tính của thẻ <img>:

Tên thuộc tính	Mô tả
`src`	Đường dẫn của tệp ảnh. Bắt buộc phải có.
`alt`	Nếu không hiển thị được ảnh, trình duyệt hiển thị văn bản thay thế.
`width`	Chiều rộng ảnh tính bằng pixel.
`height`	Chiều cao ảnh tính bằng pixel.
`title`	Hiển thị chú thích khi trỏ chuột vào ảnh.

Để thêm video/âm thanh, sử dụng thẻ <video> và <audio>.
Hai thẻ này có các thuộc tính giống nhau như: src, autoplay, controls, loop, muted.

Một số thuộc tính của thẻ <video> và <audio>:

Tên thuộc tính	Mô tả
`src`	Đường dẫn đến tệp video hoặc âm thanh (bắt buộc).
`autoplay`	Tự động phát khi trang web được truy cập.
`controls`	Hiển thị các nút điều khiển (phát, tạm dừng, âm lượng...).
`loop`	Tự động phát lại khi kết thúc.
`muted`	Tắt âm thanh.

Lưu ý:

Một số trình duyệt có thể vô hiệu hóa autoplay nếu không có muted.
Thẻ <video> có thể có thêm height, width để điều chỉnh kích thước hiển thị.

Ví dụ 2: Thêm tệp video.mp4 từ thư mục Videos vào trang web:

<video src="Videos/video.mp4" controls>
  Trình duyệt web của bạn có thể không phát được video.
</video>

Dòng văn bản giữa thẻ <video> và </video> chỉ hiển thị nếu trình duyệt không hỗ trợ phát video.

Bài F4. Thêm dữ liệu đa phương tiện vào trang web