Hướng dẫn Cách chèn tập tin media vào website

[PVS]

Cách chèn tập tin media vào website

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.

Lưu ý rằng các tập tin kỹ thuật số được chèn vào phải có đường dẫn tuyệt đối dẫn trực tiếp đến tập tin đó (ví dụ: http://domain.com/file/image.jpg hoặc audio.mp3, video.mp4,…).

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="http://i878.photobucket.com/albums/ab343/VampireDuracellBunny/hello-kitty.jpg" title="Hello Kitty" alt="Hello Kitty Vector" />

Kết quả:

​

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.

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
Mặc dù hiện tại bạn chưa học đến HTML5 nhưng ở chức năng chèn video này 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="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Trình duyệt của bạn không hỗ trợ HTML5.
</video>

Kết quả:

​

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.

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="http://www.w3schools.com/tags/horse.mp3" type="audio/mp3">
  Trình duyệt của bạn không hỗ trợ HTML5
</audio>

Kết quả:

​

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://vnxf.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).

Ngoài ra, có một cách nữa để chèn một liên kết và ép nó mở bằng frame trên website đó là sử dụng thuộc tính name trong thẻ <iframe> và thuộc tính target trong thẻ <a>, xem ví dụ:

<p><a target="window" href="http://vnxf.vn">Truy cập</a></p>
<iframe src="http://www.w3schools.com/" name="window" width="500px" height="800px"></iframe>

Trong đó, giá trị của thuộc tính target trong thẻ <a> phải trùng với giá trị trong thuộc tính name của thẻ <iframe>.

Lời kết
Kết thúc bài này thì bây giờ bạn đã có kha khá kiến thức về HTML để có thể soạn nội dung một tài liệu web HTML tương đối đầy đủ rồi. 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 nhất trong HTML khi tiến hành xây dựng website.

Chúc các bạn thành công.

Nguồn: thachpham.com​