[Bài 9] Cách chèn ảnh, nhạc, video vào website

Bạn đang ở bài 9 trong 11 bài của serie Học HTML cơ bản.

Hôm nay mình sẽ hướng dẫn các bạn cách chèn ảnh, nhạc, video vào trong webiste.

Chèn ảnh vào website

Muốn chèn hình ảnh vào webiste chúng ta sử dụng thẻ <img />, thẻ này không có thẻ đóng, các thuộc tính cơ bản của nó gồm có srcwidth, height, borderalt, title

Ví dụ:

See the Pen ZQRoJL by BlogIT.vn (@blogitvn) on CodePen.

Như các bạn thấy ở trên, mình đã chèn ảnh vào website, bạn có thể bấm sang phần html để xem code trên ví dụ trên. Mình giải thích 1 số thuộc tính:
src: đường dẫn ảnh.
width: độ rộng của ảnh.
height: độ cao của ảnh.
alt: sẽ hiện thị khi không load được ảnh.
title: tiêu đề cho ảnh.
Chèn ảnh vào website đơn giản phải không nào, bạn chỉ cần <img src="đường dẫn ảnh" /> là có thể chèn ảnh vào website được rồi, còn các thuộc tính khác thì chỉ là để trang trí thêm thôi.

Chèn nhạc vào website

Để chèn nhạc vào website, chúng ta sử dụng thẻ <audio>, thẻ này là html5, mặc dù đây là serie học html cơ bản, nhưng vì giờ chèn nhạc hay video thường dùng thẻ của html5 nên mình cũng giới thiệu luôn.
Ví dụ:

See the Pen obydoM by BlogIT.vn (@blogitvn) on CodePen.

Bạn có thể xem code ở phần trên ví dụ, cũng đơn giản thôi, bạn chỉ cần bỏ thẻ source(đường dẫn link mp3) vào trong thẻ audio là có thể chèn nhạc vào website được rồi.

Chèn video vào website

Cũng giống như chèn nhạc vào website, chèn video vào website chúng ta cũng sử dụng thẻ của html5, ta sử dụng thẻ video, bên trong là thẻ source chứa link video.
Ví dụ:

See the Pen EPRLQb by BlogIT.vn (@blogitvn) on CodePen.

Các thuộc tính bạn có thể tham khảo tại đây

Kết luận

Nếu bạn là người bắt đầu học thiết kế website, thì tưởng chừng như việc chèn ảnh, nhạc, video khó khăn lắm nhưng như bạn thấy ở trên, nó rất dễ dàng phải không. Bạn đã học đến bài này thì cũng sắp hết serie học html cơ bản rồi đấy. Gắng lên nhé 🙂

[Bài 9] Cách chèn ảnh, nhạc, video vào website
5 (100%) 6 votes

Bình luận

Hãy trở thành người đầu tiên bình luận!

Thông báo
avatar
wpDiscuz