Slide bài giảng Tin học ứng dụng 12 cánh diều bài 5: Chèn hình ảnh, âm thanh, video và sử dụng khung
Slide điện tử bài 5: Chèn hình ảnh, âm thanh, video và sử dụng khung. Trình bày với các hiệu ứng hiện đại, hấp dẫn. Giúp học sinh hứng thú học bài. Học nhanh, nhớ lâu. Có tài liệu này, hiệu quả học tập của môn Tin học ứng dụng 12 Cánh diều sẽ khác biệt
Bạn chưa đủ điều kiện để xem được slide bài này. => Xem slide bài mẫu
Tóm lược nội dung
BÀI 5. CHÈN HÌNH ẢNH, ÂM THANH, VIDEO VÀ SỬ DỤNG KHUNG
KHỞI ĐỘNG
Em có biết làm thế nào để trang web Bai3-NV1.html em tạo ở bài học trước trở nên sinh động hơn không?
Bài làm rút gọn:
- Thêm hình ảnh và đồ họa: Sử dụng hình ảnh và đồ họa để làm cho trang trở nên hấp dẫn hơn và phản ánh nội dung.
- Sử dụng CSS: Áp dụng CSS để tùy chỉnh giao diện, thay đổi màu sắc, font chữ, kích thước và kiểu chữ, background, vv.
- Hiệu ứng và chuyển động: Thêm hiệu ứng và chuyển động bằng CSS hoặc JavaScript, ví dụ như hiệu ứng hover, slide, fade, vv.
- Video và âm thanh: Thêm video hoặc âm thanh phù hợp để làm nổi bật nội dung hoặc cung cấp thông tin bổ sung.
- Tạo hiệu ứng cuộn trang: Sử dụng JavaScript để tạo hiệu ứng cuộn trang mượt mà.
- Biểu đồ và đồ thị: Thêm biểu đồ và đồ thị động bằng các thư viện như Chart.js hoặc D3.js để hiển thị dữ liệu số liệu hoặc thông tin thống kê.
- Responsive design: Đảm bảo trang web phản hồi linh hoạt trên các thiết bị khác nhau, từ máy tính để bàn đến điện thoại di động.
1. CHÈN HÌNH ẢNH
Hoạt động: Trong số các định dạng như sau: PNG, RAW, BMP, JPG, GIF, theo em, những định dạng ảnh nào được sử dụng phổ biến trên trang web? Vì sao?
Bài làm rút gọn:
Định dạng ảnh phổ biến trên web là PNG, JPG và GIF. PNG được sử dụng cho hình ảnh chất lượng cao, JPG cho hình ảnh nén không gian lưu trữ, và GIF cho các hình ảnh động và biểu tượng.
2. CHÈN ÂM THANH
3. CHÈN VIDEO
4. SỬ DỤNG KHUNG
5. THỰC HÀNH CHÈN HÌNH ẢNH, ÂM THANH VÀ SỬ DỤNG KHUNG
Vận dụng: Tạo website cá nhân:
Em hãy chèn thêm hình ảnh, âm thanh, video để hoàn thiện tiếp website cá nhân đã tạo ở các bài học trước.
Gợi ý thực hiện:
Mở tệp “album.html", thêm một số hình ảnh của em hoặc em thích (nên lưu tệp ảnh vào thư mục images).
Mở tệp “hobbies.html", bổ sung tiêu đề mục h2 là "Bài hát tôi thích” và thêm một tệp âm thanh/video cho bài hát đó.
Bài làm rút gọn:
Thêm hình ảnh vào trang "album.html":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Album ảnh của tôi</title>
</head>
<body>
<h1>Album ảnh của tôi</h1>
<img src="images/photo1.jpg" alt="BÀI 5. CHÈN HÌNH ẢNH, ÂM THANH, VIDEO VÀ SỬ DỤNG KHUNG">
<img src="images/photo2.jpg" alt="BÀI 5. CHÈN HÌNH ẢNH, ÂM THANH, VIDEO VÀ SỬ DỤNG KHUNG">
<img src="images/photo3.jpg" alt="BÀI 5. CHÈN HÌNH ẢNH, ÂM THANH, VIDEO VÀ SỬ DỤNG KHUNG">
</body>
</html>
Thêm âm thanh hoặc video vào trang "hobbies.html":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sở thích của em</title>
</head>
<body>
<h1>Sở thích của em</h1>
<h2>Bài hát tôi thích</h2>
<audio controls>
<source src="audio/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
TỰ KIỂM TRA
Câu 1: Thuộc tỉnh nào của phần tử img được dùng để hiển thị thông báo khi hình ảnh chèn vào trang web gặp lỗi trong quá trình hiển thị trên màn hình trình duyệt web?
A. link
B. title
C. src
D. alt
Bài làm rút gọn:
D. alt
Câu 2: Thuộc tính nào dùng để xác định tài nguyên được nhúng vào trang web khi khai báo iframe?
A. source
B. src
C. link
D. target
Bài làm rút gọn:
B. src
Slide bài giảng lớp 12 cánh diều
Slide bài giảng lớp 12 chân trời sáng tạo
Slide bài giảng lớp 12 kết nối tri thức
