Trang chủ Web DevelopmentHTML/CSS [Học HTML] Chèn tập tin kỹ thuật số vào web

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

bởi Thạch Phạm
25 bình luận 13002 views
Khuyến mãi hosting

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

25 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
25 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments
Cá cược ESPORTS

Thanks ad nhiều, để e test trên page e ngay và luôn!!!

[…] Source link […]

hoàng

bây giờ học lập trình web thì 3 4 năm nữa có nhiều cơ hội ko ạ

Trẻ Con

BẠN GIỎI THÌ ĐÂU CŨNG CÓ VIỆC CHO BẠN LÀM NHÉ

Minh Chiến Trần

…….

Tuanpham

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 ạ?

Minh Chiến Trần
vunguyen

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

Hồng A nh

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

Đặng Lệ

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

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

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

Phạm Tiến

<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 @@

Thuận

khi load trang là tự phát

todoanut

(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”);

0
Trả lời
khoa

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

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.

DungBuonMessi

Cảm ơn anh.
Vậy là mình chỉ sử dụng thẻ object như này để chèn video:

trên máy có cái Adobe Flash phải không ạ.
(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object)

Cảm ơn anh.

22222

2

Quang Tâm

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

Quang Tâm

Dạ em xem source thì nó không có link dạng *.mp4 ạ, nếu mình dùng thẻ như trên youtube thì không cần link có đuôi định dạng, còn dùng thẻ thì bắt buộc có đuôi phải không anh.
Còn dùng IDM để lấy link có đuôi định dạng mp4 em cũng không làm được.
Mong anh chỉ giáo cho ạ. Em cảm ơn

Quang Tâm

Ụa em viết thẻ theo kiểu mẫu, lúc post bài nó lại không hiện tên thẻ. Em bổ sung lại ạ:
“…nếu mình dùng thẻ iframe như trên youtube…..còn dùng thẻ video thì bắt buộc….”

25
0
Would love your thoughts, please comment.x
()
x