Chèn tập tin kỹ thuật số vào tài liệu HTML

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). 

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. Bạn có thể xem ví dụ:

Giải thích các thuộc tính:

• 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.

Chèn video vào HTML

Trong HTML5  để chèn video nhanh chóng đó là cặp thẻ <video> </video> như sau:

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.Bạn có thể tham khảo thêm các thuộc tính khác của thẻ <video> sau:

• autoplay: chỉ định video bắt đầu chạy tự động. giá trị autoplay
• controls: Chỉ định rằng bảng điều khiển video sẽ được hiển thị (ví dụ như một nút play / pause vv)
• height: chiều cao video ( đơn bị px)
• loop: chỉ định video chơi lặp lại khi kết thúc. (loop)
• muted: Âm thanh video đã tắt giá trị muted
• poster: Chỉ định một hình ảnh được hiển thị trong khi video được tải về, hoặc cho đến khi người dùng chạm vào nút play( URL)
• preload: Chỉ định video sẽ được tải khi bắt đầu load trang ( auto, metadata, none)
• width: chiều rộng video (px)

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.

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.

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 thêm 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:

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).

Lời kết

Đến bài học này, kiến thức về HTML các bạn cũng đã học được kha kha rồi. Các bạn nhớ rằng vẫn thực hành liên tục cho thành thục nha. Kế tiếp ở các phần sau, chúng ta sẽ tìm hiểu thêm một vài thẻ quan trọng khác, và một số kỹ thuật quan trọng để xây dựng một website bằng HTML nhanh chóng.