[Học HTML] Chèn tập tin kỹ thuật số vào web

Bài này thuộc phần 9 của 11 phần trong serie Học HTML cơ bản

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ụ:

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:

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.

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:

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ụ:

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.

Thạch Phạm

Đam mê với web và lập trình, thích viết và chia sẻ, nghiện cà phê và xăm mình, hứng thú với nhạc dân ca và nhạc không lời.

Xem thêm bài viết Subscribe

Để lại bình luận

19 Bình luận trên "[Học HTML] Chèn tập tin kỹ thuật số vào web"

avatar
Sắp xếp theo:   mới nhất | cũ nhất | đánh giá nhiều
Tuanpham
Khách

anh cho em hỏi làm cách nào để căn chỉnh được vị trí cho ảnh và video của mình ạ. Ví dụ như em muốn căn giữa thì làm như thế nào ạ?

vunguyen
Khách

anh cho em hỏi làm sao chèn 1 khung có hiển thị camera vào ạ?

Hồng A nh
Khách

có chạy được trong Adobe Flash Player k ạ

Đặng Lệ
Khách

a ơi cho e hỏi, khi e chèn video vào web khi chạy nó giật tung chảo ý, còn cách nào chèn video mà có thể chạy video mượt mà không ạ! Video đuôi *.mp4 ạ, e cảm ơn ạ!

Quang Mến
Khách

Cho mình hỏi tí !! sao mình nhúng video vào thẻ iframe không player .. ad giúp với !!
https://jwplayer.000webhostapp.com/giupdo_9.php?url=https://drive.google.com/file/d/0BzBxXi318CIHcE5XaTdsbk50WTQ/preview <Nhúng vào thẻ iframe như ad hướng dẫn nhưng ko player được >

doan
Khách

làm thế nào để chèn nhiều file.mp3 vào html mà nó autoplay
từng bài 1 mà không hiện ra ngoài trình duyệt
cứ load trang là nó phát
cam on anh

Thuận
Khách

khi load trang là tự phát

Phạm Tiến
Khách

<embed with="462" height="46" src="link nhac.mp3" autostart="true" loop="true" autoplay="true" hidden="true" nhưng còn replay chưa biết @@

todoanut
Khách

(function(w,d,s,u,n,e,c){w.PXLObject = n; w[n] = w[n] || function(){(w[n].q = w[n].q || []).push(arguments);};w[n].l = 1 * new Date();e = d.createElement(s); e.async = 1; e.src = u;c = d.getElementsByTagName(s)[0]; c.parentNode.insertBefore(e,c);})(window, document, “script”, “//api.dmcdn.net/pxl/client.js”, “pxl”);

khoa
Khách

Hiện tại em đang tự học html và css trên youtobe
em cảm thấy kiến thức thiếu sót và cơ bản
mong muốn A và mọi nguời cho lời khuyên
đăng khoa

DungBuonMessi
Khách

Chào anh,
Cách chèn ảnh và video… của html5 rất tiện lợi, tuy nhiên là em muốn hỏi lại về cơ chế chèn video của các version html cũ (nghe nói đến adobe ạ).
2 cơ chế hoạt động như thế nào, cụ thể từng cái thì tốt quá ạ.
Cảm ơn anh.

22222
Khách

2

Quang Tâm
Khách

Chào anh, cho em hỏi làm sao để mình lấy được link có đuôi định dạng mp4 vậy ạ
Em cảm ơn

wpDiscuz
menu
menu