Sử dụng thẻ HTML để chèn các tệp tin đa phương tiện vào trang web và điều chỉnh kích thước phù hợp bằng các thuộc tính thẻ tương ứng.
1. Chèn tệp hình ảnh vào trang web
Hình ảnh giúp cho trang web sinh động hơn. Có thể nhúng hình ảnh trực tiếp trong nội dung của trang hoặc dưới dạng hình nền.
Sử dụng thẻ <img> để thêm hình ảnh vào trang web. Ví dụ sau để chèn một tập tin hình ảnh tên coffee.png nằm trong thư mục images của dự án website:
<p>Tôi muốn một cốc <img src="images/coffee.png" alt="hình ảnh cốc cà phê"> ngay bây giờ</p>Trong ví dụ trên:
- Thuộc tính
srclà bắt buộc, chỉ định đường dẫn đến tệp - Thuộc tính
altsẽ hiển thị nội dung văn bản thay thế khi không thể hiển thị hình ảnh và để cho các máy tìm kiếm hiểu được phần nào nội dung của hình ảnh
Để thiết lập kích thước chính xác cho hình ảnh ta sử dụng thuộc tính height và width, đơn vị mặc định là pixel (px)
Ví dụ, chèn tập tin heart.png trong thư mục images của dự án website. Định dạng cho hình có kích thước chiều rộng là 100px, chiều cao là 150px.
<img src="images/heart.png" width="100" height="150">2. Chèn âm thanh và video vào trang web
Để chèn tệp video vào trang web sử dụng thẻ <video>; để chèn tệp âm thanh vào trang web sử dụng thẻ <audio>. Hai thẻ này đều được hỗ trợ trong hầu hết các trình duyệt phổ biến, tuy nhiên để phát được thì định dang của tệp tin cũng phải được trình duyệt hỗ trợ.
- Định dạng tệp video phổ biến nhất là
mp4vàwebm. - Định dạng tệp âm thanh phổ biến nhất là
mp3,wavvàogg.
Cú pháp chèn tệp video vào trang web:
<video thuộc_tính="giá_trị" > </video>Cú pháp chèn tệp âm thanh vào trang web:
<audio thuộc_tính="giá_trị" > </audio>Thuộc tính:
- Các thuộc tính cơ bản như
src,width,height controls: là thuộc tính boolean, không cần giá trị, để hiển thị các nút điều khiển (phát, tạm dừng, âm lượng,…)autoplay: cũng là thuộc tính boolean, không cần giá trị, nhằm để video tự chạy khi hiển thị. Nhưng với trình duyệt Google Chrome không cho phép video tự chạy khi hiển thị, hoặc phải thêm thuộc tínhmuted(không phát tiếng).poster: cung cấp đường dẫn đến tệp ảnh để hiển thị khi chưa chạy video.
Chú ý: Thẻ <audio> KHÔNG CÓ các thuộc tính width, height và poster
Có thể sử dụng thẻ <source> trong cặp thẻ <video> hay <audio> để đưa nhiều tệp video hoặc nhiều tệp âm thanh tương ứng với các định dạng khác nhau. Trình duyệt sẽ tự động tìm tệp tin mà nó hỗ trợ để thiển thị. Ví dụ:
<video width="320" height="240">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>Ví dụ: chèn tệp video ha_long.mp4 trong thư mục media của dự án website vào trang index.html, thiết lập thuộc tính có nút điều khiển controls và tự động chạy autoplay, để tự động phát được trên trình duyệt Google Chrome phải thêm thuộc tính muted
<video src="media/ha_long.mp4" controls autoplay muted></video>3. Tạo khung nội tuyến trong trang web
Là khung nhìn chứa tài nguyên web khác trang trang web hiện tại. Sử dụng thẻ <iframe> (viết tắt của inline frame). Thường gặp nhất là chèn video Youtube hoặc bản đồ Google Map vào trang web.
Ví dụ, trên trang index.html chèn một khung nhìn nội tuyến đến trang bai_tap.html:
<iframe src="bai_tap.html" width="600" height="400"></iframe>Trong đó:
src: chỉ đường dẫn đến trang nội dung cần hiển thịwidth, height: chiều rộng và chiều cao của khung
