Thẻ hình ảnh, video, âm thanh, iframe

Các tập tin kỹ thuật số (media files) mà mình đang nói đến đó là hình ảnh (image), âm thanh (audio) và phim ảnh (video). Với HTML chúng ta có thể dễ dàng chèn những loại tập tin này vào tài liệu và nó sẽ hiển thị rất là sống động luôn.

Chèn ảnh vào HTML

Để chèn ảnh vào HTML, chúng ta sẽ sử dụng thẻ <img> với các tham số bắt buộc, và thẻ này không có thẻ đóng. Ví dụ:

<img src="https://huykira.net/wp-content/themes/blogv3/images/avt.jpg" title="Huy Kira" alt="Huy Kira" />

Giải thích:

• src: Đường dẫn đến tập tin hình ảnh.

• title: Tiêu đề của hình ảnh.

• alt: Tên định danh của hình ảnh.

Ngoài ra bạn có thể bổ sung thêm thuộc tính width và height để điều chỉnh kích thước hiển thị hình ảnh.

Bonus: Nếu bạn muốn upload ảnh lên internet để lấy link trực tiếp thì có thể dùng dịch vụ Imgur.

Chèn video

Chèn video chúng ta sẽ sử dụng một thẻ trong HTML để chèn video nhanh chóng đó là cặp thẻ <video> </video> như sau:

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

Nghĩa là trong cặp thẻ <video> </video> sẽ có một thẻ <source> với các thuộc tính nhằm khai báo đường dẫn tập tin video và loại tập tin. Các thuộc tính bên trong cặp thẻ này có vẻ không có gì là khó hiểu vì bạn đã sử dụng mấy lần rồi đó, bạn có thể tham khảo thêm các thuộc tính khác của thẻ <video> tại đây.

Lưu ý: Để đảm bảo tất cả các trình duyệt có thể đọc được, chỉ nên chèn video định dạng MP4. Và thẻ này chỉ hỗ trợ đối vớ HTML 5

Chèn âm thanh – nhạc

Giống như thẻ <video>, để chèn âm thanh vào tài liệu HTML thì bạn có thể sử dụng thẻ <audio> và thẻ này cũng là HTML5.

<audio controls>
  <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mp3">
  Trình duyệt của bạn không hỗ trợ HTML5
</audio>

Chèn đối tượng kỹ thuật số với thẻ <object>

Ngoài các thẻ đặc trưng cho từng loại tập tin ở trên thì bạn còn có một cách khác để chèn các đối tượng kỹ thuật số vào tài liệu HTML đó là dùng thẻ <object>, đây là một thẻ có thể giúp bạn chèn các loại đối tượng kỹ thuật số như Flash, Java, Audio, Video, PDF, ActiveX. Nhưng thông thường thì các loại mã nhúng của một số website cho phép sử dụng mã nhúng như Youtube họ sẽ dùng thẻ này để bạn chèn đối tượng vào web.

Thẻ này có khá nhiều thuộc tính nên bạn có thể tham khảo tại đây.

Nhúng tài liệu HTML vào web

Nếu bạn có nhu cầu nhúng thẳng một trang nào đó vào tài liệu HTML của bạn thì có thể sử dụng thẻ <iframe> như sau:

<iframe src="http://jks.vn" width="500px" height="800px" scrolling="auto"></iframe>

Trong đó, thuộc tính src là đường dẫn của trang bạn muốn nhúng vào, width và height là kích thước của khung hiển thị (gọi là frame).

Thẻ này còn được ứng dụng để chèn video youtube vào dự án như sau:

<iframe width="560" height="315" src="https://www.youtube.com/embed/D2lmDkG_fgs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Chèn video Youtube