Thẻ hiển thị hình ảnh <img>
Trong HTML, hình ảnh được định nghĩa bởi thẻ <img> có cấu trúc như sau:
<img src="liên kết" alt="nội dung thay thế" >
Thuộc tính src xác định đường dẫn đến hình ảnh và thuộc tính alt là xác định một đoạn nội dung thay thế khi hình ảnh không được hiển thị do đường dẫn lỗi hoặc tải không được ảnh.
Các thuộc tính của <img>
src: liên kết đến file hình ảnh.alt: nội dung thay thế nếu không tải được ảnh.width: độ rộng của ảnh (px, %).height: độ cao của ảnh (px, %).
Ví dụ sử dụng width, height
Hiển thị logo của STDIO Training sử dụng thuộc tính width, height.
<!DOCTYPE html>
<html>
<head></head>
<body>
<img
src="https://resources.stdio.vn/content/article/5ef62da35ef9e26f89a5c78d/resources/res-1598668801-1598668801813.png"
alt="STDIO Training"
width="200px"
height="32px"
/>
</body>
</html>
Hiển thị logo của STDIO Training không có thuộc tính width, height, kích thước do ảnh tự quyết định.
<!DOCTYPE html>
<html>
<head></head>
<body>
<img
src="https://resources.stdio.vn/content/article/5ef62da35ef9e26f89a5c78d/resources/res-1598668801-1598668801813.png"
alt="STDIO Training"
/>
</body>
</html>
- * Nếu
widthvàheightkhông tỷ lệ với kích thước thật của ảnh sẽ làm ảnh hiển thị không chính xác. - * Thẻ
<img>không có thẻ đóng nhưng có thể dùng<img />theo tiêu chuẩn.
Thẻ phát âm thanh <audio>
Trước khi HTML5 ra đời để chơi audio phải sử dụng plug-in thêm vào trình duyệt web như Flash, hiện tại HTML5 hỗ trợ chơi audio thông qua thẻ <audio>.
<audio controls> <source src="liên kết" type="media type"> Nội dung hiển thị nếu trình duyệt web không hỗ trợ thẻ audio </audio>
Các thuộc tính của <audio>
controls: công cụ dùng để chơi nhạc như play, pause, volume.autoplay: tự động chơi nhạc sau khi tải xong.
Trong <audio> có thể có nhiều <source>, hỗ trợ nhiều loại định dạng cho trình duyệt, trình duyệt web sẽ lựa chọn <source> để phát.
Các thuộc tính của <source>
Thẻ source chứa thông tin về file nhạc: đường dẫn đến file, và định dạng của file.
src: liên kết đến file âm thanh.type: định dạng của file âm thanh.audio/mpeg: định dạng MP3.audio/ogg: định dạng OGG.audio/wav: định dạng WAV.
Ví dụ phát audio sử dụng thẻ <audio>
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>Sins Salvation gameplay music.</h3>
<audio controls>
<source src="https://resources.stdio.vn/content/article/5ef62da35ef9e26f89a5c78d/resources/res-1598673079-1598673079825.mp3" type="audio/mpeg" />
Trình duyệt web hiện tại không hỗ trợ phát nhạc, hãy thử lại bằng trình
duyệt web khác.
</audio>
</body>
</html>
Thẻ trình chiếu phim <video>
Sử dụng thẻ <video> để trình chiếu video clip với cấu trúc như sau:
<video controls height="value" width="value"> <source src="liên kết" type="media type"> Nội dung hiển thị nếu trình duyệt web không hỗ trợ thẻ video </video>
Các thuộc tính của <video>
controls: công cụ dùng để hỗ trợ trình chiếu như play, pause, volume.width: độ rộng hiển thị (px, %).height: độ cao hiển thị (px, %).
Trong <video> có thể có nhiều <source>, hỗ trợ nhiều loại định dạng cho trình duyệt, trình duyệt web sẽ lựa chọn <source> để chiếu.
Các thuộc tính của <source>
Thẻ source chứa thông tin về file video: đường dẫn đến file, và định dạng của file.
src: liên kết đến file video.type: định dạng của file video.video/mp4: định dạng MP4.video/webm: định dạng WebM.video/ogg: định dạng OGG.
Ví dụ trình chiếu video clip sử dụng thẻ <video>
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>Play Video Demo</h3>
<video controls autoplay height="400" width="600">
<source src="video_demo.mp4" type="video/mp4" />
Trình duyệt web hiện tại không hỗ trợ phát nhạc, hãy thử lại bằng trình
duyệt web khác.
</video>
</body>
</html>
Phụ lục - Hiển thị video từ Youtube
Nếu website có nhu cầu liên kết video từ Youtube có thể sử dụng <iframe> để nhúng các clip từ Youtube vào trang web.
Bài chung series
- HTML - Phần 0: Trang Web Đầu Tiên
- HTML - Phần 1: Cơ Bản về HTML
- HTML - Phần 2: Các Thẻ Định Dạng Văn Bản
- HTML - Phần 3: Thẻ Liên Kết trong HTML
- HTML - Phần 4: Các Thẻ Định Dạng Danh Sách
- HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio
- HTML - Phần 6: Các Thẻ Input trong HTML
- HTML - Phần 7: Thẻ Table trong HTML
- HTML - Phần 8: Thẻ Form trong HTML
