Slide bài giảng Khoa học máy tính 12 Chân trời bài F4: Thêm dữ liệu đa phương tiện vào trang web
Slide điện tử bài F4: Thêm dữ liệu đa phương tiện vào trang web. 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 Khoa học máy tính 12 Chân trời sáng tạo 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 F4: THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB
A. KHỞI ĐỘNG
HS suy nghĩ trả lời câu hỏi Khởi động tr.89 SGK theo hiểu biết của mình.
B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC
1. Thêm tệp ảnh vào trang web
HTML sử dụng thẻ nào để thêm tệp ảnh vào trang web? Thẻ <img> có những thuộc tính gì?
Nội dung ghi nhớ:
Thẻ <img> với các thuộc tính src, alt, width, height,… được dùng để thêm tệp ảnh vào trang web. Thẻ <img> chỉ có thẻ mở, không có thẻ đóng.
2. Thêm tệp video và âm thanh vào trang web
HTML sử dụng thẻ nào để thêm tệp video và âm thanh vào trang web? Thẻ <video> và <audio> có những thuộc tính gì?
Nội dung ghi nhớ:
Thẻ <video> và thẻ <audio> dùng để thêm tệp video và âm thanh vào trang web.
Hai thẻ này có cùng một số thuộc tính như src, autoplay, controls, loop, muted,…
THỰC HÀNH
Các bước thêm tệp ảnh vào trang web
Nội dung ghi nhớ:
- Bước 1: HS khởi động Visual Studio Code và mở tệp portfolio.html.
- Bước 2: HS bổ sung đoạn mã HTML như hướng dẫn để thêm 4 hình ảnh theo bố cục như Hình 3.
- Bước 3: HS mở trang web trong trình duyệt và kiểm tra kết quả thực hiện.
Các bước thêm tệp video vào trang web
Nội dung ghi nhớ:
- Bước 1: HS bổ sung đoạn mã HTML như hướng dẫn để thêm video vào trang web portfolio.html.
- Bước 2: HS mở trang web trong trình duyệt và kiểm tra kết quả thực hiện.
C. HOẠT ĐỘNG LUYỆN TẬP
GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập.
Gợi ý đáp án:
A. Trắc nghiệm
| Câu 1 | Câu 2 | Câu 3 | Câu 4 | Câu 5 |
| C | D | A | C | B |
B. Đúng/sai
Câu 1.
a. S
b. S
c. Đ
d. S
C. Tự luận
Câu 1. Các thuộc tính của thẻ <img>:
Câu 2. Các thuộc tính của thẻ <audio>:
| Tên thuộc tính | Chức năng |
| src | Đường dẫn tệp âm thanh thêm vào trang web. Thuộc tính này bắt buộc phải có. |
| autoplay | Tự động phát video hoặc âm thanh khi người dùng truy cập trang web. |
| controls | Hiển thị các nút điều khiển. |
| loop | Tự động phát lại khi video hoặc âm thanh kết thúc. |
| muted | Tắt âm thanh. |
| height, width | Chỉ định kích thước hiển thị cho video được thêm vào trang web. |
Câu 3. src="Asset/Sound/bai_hat.mp3".
D. HOẠT ĐỘNG VẬN DỤNG
Em hãy bổ sung các nội dung sau vào trang web portfolio.html:
- Một video clip và một bài hát mà em yêu thích với thẻ <video>, <audio>, <h1>, <h2> và các thẻ khác đã học.
2. Thêm ảnh vào mục Nội dung yêu thích sao cho mỗi hàng của bảng hiển thị ba ảnh, sử dụng thẻ <img>, các thẻ tạo bảng và các thẻ khác đã học.
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
