1 of 41

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

2 of 41

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

3 of 41

Có những điểm gì khiến em thấy hứng thú hơn khi xem các trang web so với đọc sách.

Thảo luận nhóm và đại diện nhóm trả lời phần Khởi động.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

4 of 41

Gợi ý trả lời phần Khởi động:

Trên trang web có các đối tượng đa phương tiện (âm thanh, hình ảnh, video), giúp người cảm thấy hứng thú hơn so với đọc sách.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

5 of 41

Hãy kể tên các định dạng tệp ảnh mà em biết. Phân loại chúng vào nhóm đồ họa vectơ hoặc đồ họa điểm ảnh.

Thảo luận nhóm và đại diện nhóm trả lời phần Hoạt động 1.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

6 of 41

Gợi ý trả lời phần Hoạt động 1:

* Các định dạng tệp ảnh mà em biết: PNG, JPG, JPEG, GIF, SVG,…

* Nhóm đồ họa điểm ảnh: PNG, JPG, JPEG, GIF

* Nhóm đồ họa vectơ: SVG

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

7 of 41

Thảo luận nhóm, tìm ra những nội dung cần nhớ của phần 1 (SGK trang 62, 63).

Các nhóm tóm lại những nội dung cần nhớ của phần 1.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

8 of 41

Câu hỏi 1 (trang 63): Thẻ <img> chỉ dùng khi chèn ảnh jpg vào trang web có đúng không

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

9 of 41

Gợi ý trả lời câu hỏi 1 (trang 63)

Không đúng.

Thẻ <img> không chỉ dùng để chèn ảnh JPG vào trang web mà còn có thể được sử dụng để chèn các loại tệp ảnh khác như PNG, GIF, BMP, SVG và nhiều định dạng hình ảnh khác nữa.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

10 of 41

Câu hỏi 2 (trang 63): Hãy nêu một số trường hợp có thể xảy ra lỗi khi hiển thị ảnh.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

11 of 41

Gợi ý trả lời câu hỏi 2 (trang 63)

Một số trường hợp có thể xảy ra lỗi khi hiển thị ảnh trên trang web:

- Trình duyệt không hỗ trợ loại tệp tin ảnh được dùng

- Ảnh bị lỗi (hỏng)

- Đường dẫn không đúng.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

12 of 41

Trả lời các câu hỏi trắc nghiệm sau đây để củng cố kiến thức phần 1.

Câu 1. Để chèn tệp ảnh vào trang web, ta sử dụng thẻ

A. <img>

B. <png>

C. <jpg>

D. <images>

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

13 of 41

Câu 2. Xem đoạn mã bên dưới và chọn kết quả hiển thị đúng nhất.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

14 of 41

A.

B.

C.

D.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

15 of 41

Câu 3. Để chèn ảnh, ta sử dụng đoạn mã nào sau đây?

B.

A.

C.

D.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

16 of 41

Câu 4. Để thiết lập kích thước cho ảnh ta sử dụng các thuộc tính … cho thẻ img. Điền cụm từ còn thiếu vào dấu ba chấm.

A. length, height

B. width, length

C. width, height

D. horizontal, height

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

17 of 41

Ghi nhớ (SGK trang 63)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

18 of 41

Quan sát đoạn mã sau và xác định tên đoạn mã này có chức năng gì?

Thảo luận nhóm và đại diện nhóm trả lời phần Hoạt động 2.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

19 of 41

Gợi ý trả lời phần Hoạt động 2:

Chức năng của đoạn mã này là chèn video vào trang web.

- src="video/war_is_over.mp4": Đây là thuộc tính src chỉ địa chỉ của tệp video cần phát lại. Trong trường hợp này, tệp video có tên là "war_is_over.mp4" và được lưu trong thư mục "videos".

- width="300" và height="250": Đây là thuộc tính chỉ kích thước của video khi hiển thị trên trình duyệt. Chiều rộng là 300 pixels và chiều cao là 250 pixels.

- autoplay: Đây là một thuộc tính tùy chọn cho phép video tự động phát khi trang web được tải lên.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

20 of 41

Thảo luận nhóm, tìm ra những nội dung cần nhớ của phần 2 (SGK trang 64).

Các nhóm tóm lại những nội dung cần nhớ của phần 2.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

21 of 41

Câu hỏi (trang 64): Thuộc tính scr có tác dụng gì đối với thẻ <audio>?

Gợi ý trả lời câu hỏi (trang 64)

Thuộc tính src trong thẻ <audio> được sử dụng để chỉ địa chỉ của tệp âm thanh cần phát lại. Thuộc tính này xác định nguồn dữ liệu của âm thanh, tức là đường dẫn đến tệp âm thanh.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

22 of 41

Trả lời các câu hỏi trắc nghiệm sau đây để củng cố kiến thức phần 2.

C.

A.

B.

D.

Câu 5. Để chèn tệp âm thanh vào trang web, ta sử dụng đoạn mã nào sau đây?

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

23 of 41

Câu 6. Thẻ <audio> có thuộc tính nào sau đây?

A. src

B. width

C. height

D. poster

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

24 of 41

Câu 7. Thuộc tính controls trong thẻ <video> có tác dụng:

A. Cho phép trình duyệt chạy video ngay khi hiển thị.

B. Cung cấp đường dẫn đến tệp ảnh, dùng để hiển thị khi chưa chạy video.

C. Để trình duyệt hiển thị các thành phần điều khiển như nút phát/ tạm dừng, điều khiển âm lượng,…

D. Hiển thị chiều rộng của khung video.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

25 of 41

Câu 8. Chọn phát biểu SAI trong các phát biểu dưới đây:

A. Thuộc tính src trong thẻ <audio>: Cho phép trình duyệt chạy audio ngay khi hiển thị.

B. Thuộc tính controls trong thẻ <video>: để trình duyệt hiển thị các thành phần điều khiển như nút phát/ tạm dừng, điều khiển âm lượng,…

C. Thuộc tính autoplay trong thẻ <video>: Cho phép trình duyệt chạy video ngay khi hiển thị.

D. Thuộc tính poster trong thẻ <video>: Cung cấp đường dẫn đến tệp ảnh, dùng để hiển thị khi chưa chạy video.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

26 of 41

Ghi nhớ (SGK trang 64)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

27 of 41

Trong các bài đăng có đính kèm video, một số trang web sẽ hiển thị nội dung video trong một khung và cho phép tương tác bên trong khung đó. Em có nhận xét gì về giao diện của cả trang khi thực hiện các thao tác bên trong khung này?

Thảo luận nhóm và đại diện nhóm trả lời phần Hoạt động 3.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

28 of 41

Gợi ý trả lời phần Hoạt động 3:

Khi thực hiện các thao tác bên trong một khung video trên một trang web, em có một số nhận xét về giao diện của cả trang như sau:

- Giao diện của trang web sẽ thay đổi để phù hợp với trải nghiệm người dùng.

- Giao diện của trang web cần đảm bảo sự cân bằng giữa tính tiện dụng, tính thẩm mỹ và khả năng truy cập.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

29 of 41

Thảo luận nhóm, tìm ra những nội dung cần nhớ của phần 3 (SGK trang 65).

Các nhóm tóm lại những nội dung cần nhớ của phần 3.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

30 of 41

Câu hỏi (trang 65): Viết các câu lệnh để tạo hai khung nội tuyến có kích thước bằng nhau, hiển thị song song (theo phương ngang) trên trang web.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

31 of 41

Gợi ý trả lời câu hỏi (trang 65)

Để hai khung nội tuyến hiển thị song song theo phương ngang, chiều rộng của mỗi khung cần không quá 50% chiều rộng màn hình.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

32 of 41

Trả lời các câu hỏi trắc nghiệm sau đây để củng cố kiến thức phần 1.

Câu 9. Để tạo khung nội tuyến, ta sử dụng thẻ

A. <iframe>

B. <img>

C. <video>

D. <audio>

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

33 of 41

Câu 10. Các thuộc tính thường dùng của thẻ <iframe> là:

A. src, controls, height

B. src, width, autoplay

C. src, width, height

D. controls, autoplay, height

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

34 of 41

Ghi nhớ (SGK trang 65)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

35 of 41

Luyện tập 1 (trang 66): Cho ảnh có kích thước gốc là 720x 450 Pixel chèn ảnh vào trang web bằng câu lệnh:

Hỏi ảnh trong trang web có kích thước bao nhiêu?

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

36 of 41

Gợi ý trả lời Luyện tập 1 (trang 66)

Trong trường hợp này, ảnh được chèn vào trang web với chiều rộng được đặt là 600 pixel thông qua thuộc tính width. Tuy nhiên, không có thuộc tính height được cung cấp, do đó chiều cao của ảnh sẽ được tự động tính toán để duy trì tỷ lệ khung hình ban đầu. (Kích thước tương đương 600 x 373).

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

37 of 41

Luyện tập 2 (trang 66): Chèn thêm một số ảnh của mình vào trang web giới thiệu bản thân (em đã tạo ở phần Luyện tập, Bài 10).

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

38 of 41

Gợi ý trả lời Luyện tập 2 (trang 66)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

39 of 41

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

40 of 41

1. Làm phần VẬN DỤNG (SGK trang 66)

2. Xem trước Bài 12. Tạo biểu mẫu (SGK trang 67)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

41 of 41

Các em làm trắc nghiệm Online để củng cố bài.

1. Đăng nhập vào trang thaycai.net

2. Nháy chọn Tin học 12

3. Nháy chuột vào  Trắc nghiệm tin học 12 - Kết nối tri thức

4. Nháy chuột vào Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang