Bài 4: Chèn liên kết, hình ảnh, âm thanh và video trong HTML
🎯 Mục tiêu
- Biết chèn liên kết (
a) vào trang web - Biết chèn hình ảnh bằng thẻ
img - Biết chèn âm thanh (
audio) và video (video) - Hiểu các thuộc tính quan trọng:
href,src,alt,controls,target
📘 Lý thuyết ngắn
1) Liên kết (Link)
<a href="https://www.google.com" target="_blank">Mở Google</a>
2) Hình ảnh
<img src="anh.jpg" alt="Ảnh minh họa">
3) Âm thanh
<audio controls>
<source src="nhac.mp3" type="audio/mpeg">
</audio>
4) Video
<video controls width="400">
<source src="video.mp4" type="video/mp4">
</video>
💻 Code mẫu (trang media đơn giản)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Bài 4 - Media trong HTML</title>
<style>
body {
font-family: Arial;
padding: 24px;
background: #f7f8fa;
line-height: 1.7;
}
.card {
max-width: 800px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 18px;
}
h1 {
text-align: center;
margin-top: 0;
}
img, video {
max-width: 100%;
border-radius: 10px;
margin: 10px 0;
border: 1px solid #ddd;
}
audio {
width: 100%;
margin: 10px 0;
}
a {
color: #2563eb;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="card">
<h1>Nội dung đa phương tiện</h1>
<h2>1) Liên kết</h2>
<a href="https://www.google.com" target="_blank">Mở Google (tab mới)</a>
<h2>2) Hình ảnh</h2>
<img src="https://via.placeholder.com/900x260.png?text=Demo+Image"
alt="Ảnh minh họa">
<h2>3) Âm thanh</h2>
<audio controls>
<source src="your-audio.mp3" type="audio/mpeg">
Trình duyệt không hỗ trợ audio.
</audio>
<h2>4) Video</h2>
<video controls width="600">
<source src="your-video.mp4" type="video/mp4">
Trình duyệt không hỗ trợ video.
</video>
</div>
</body>
</html>
👉 Copy code → lưu thành bai4.html → mở bằng Chrome.
⚠️ Muốn audio/video chạy được, bạn phải thay your-audio.mp3, your-video.mp4 bằng đường dẫn file thật.
✍️ Bài tập
- Đổi link Google thành link blog của bạn.
- Thay ảnh demo bằng ảnh thật (URL bất kỳ).
- Thêm một liên kết mới mở Facebook ở tab mới.
- (Nâng cao) Thêm 1 video YouTube bằng
iframe.
✅ Đáp án gợi ý
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
👉 Lấy VIDEO_ID từ link YouTube dạng:
https://www.youtube.com/watch?v=VIDEO_ID
📌 Danh sách bình luận