Slide bài giảng Khoa học máy tính 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 Khoa học máy tính 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.

-…

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

Em hãy cho biết mỗi phát biểu sau về AI là đúng hay sai?

a) “Turing Test” là bài kiểm tra trí tuệ của máy tính

b) Nhờ mở rộng phạm vi ứng dụng mà AI yếu phát triển thành AI mạnh

c) AI tạo sinh có thể giúp học sinh viết được một bài văn tả cảnh đẹp của quê hương

d) AI có thể tự hành động một cách hợp lí.

Bài làm rút gọn:

a và c đúng

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