Menu Học Tập

Giải bài tập SGK: Bài 11: Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web – Tin học 12

Mục lục [Ẩn]

Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó

Câu hỏi mở đầu trang 62Hoạt động 1 trang 62Câu hỏi củng cố mục 1 trang…Hoạt động 2 trang 64Câu hỏi củng cố mục 2 trang…Hoạt động 3 trang 65Câu hỏi củng cố mục 3 trang…Luyện tập trang 66Vận dụng trang 66

Câu hỏi mở đầu trang 62

Đề bài: 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?

Lời giải:

Một số điểm khiến em hứng thú hơn khi xem trang web:

  • Nội dung đa phương tiện: trang web có hình ảnh, âm thanh, video sinh động, trong khi sách chủ yếu là văn bản và hình ảnh tĩnh.
  • Siêu liên kết: cho phép chuyển nhanh đến các nội dung liên quan mà không cần đọc tuần tự.
  • Tương tác: có thể phóng to, thu nhỏ, phát video, dừng, tua… trực tiếp trên trang.
  • Cập nhật liên tục: nội dung web luôn được làm mới, còn sách in ra thì không thay đổi được.

1. Chèn tệp ảnh vào trang web

Hoạt động 1 trang 62

Đề bài: 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 đồ hoạ vectơ hoặc đồ hoạ điểm ảnh.

Lời giải:

Một số định dạng tệp ảnh phổ biến:

  • Đồ hoạ điểm ảnh (bitmap): JPEG (.jpg), PNG (.png), GIF (.gif), BMP (.bmp), TIFF (.tiff), WebP, JPEG-XR.
  • Đồ hoạ vectơ: SVG (.svg), EPS (.eps), AI (.ai).

Trong đó, PNG, JPEG, GIF, WebP, JPEG-XR là các định dạng ảnh phổ biến được trình duyệt web hỗ trợ hiển thị.

Câu hỏi củng cố mục 1 trang 63

Đề bài:

1. Khẳng định “Thẻ <img> chỉ dùng khi chèn ảnh dạng .jpg vào trang web” là đúng hay sai?

Lời giải:

Sai. Vì:

  • Thẻ <img> dùng để chèn nhiều định dạng ảnh khác nhau, miễn là được trình duyệt hỗ trợ.
  • Các định dạng phổ biến được hỗ trợ gồm: PNG, JPEG, GIF, WebP, JPEG-XR… chứ không chỉ riêng .jpg.

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

Lời giải:

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

  • Đường dẫn (src) không đúng hoặc bị sai chính tả.
  • Tệp ảnh không tồn tại tại đường dẫn đã chỉ ra (đã bị xóa hoặc đổi tên).
  • Định dạng ảnh không được trình duyệt hỗ trợ (ví dụ TIFF, EPS…).
  • Tệp ảnh bị hỏng trong quá trình lưu trữ hoặc tải xuống.
  • Kết nối mạng chậm hoặc mất kết nối khi ảnh được lưu trên Internet.

→ Khi đó, nếu có thuộc tính alt thì trình duyệt sẽ hiển thị văn bản thay thế giúp người xem hiểu được nội dung ảnh.

2. Chèn âm thanh và video vào trang web

Hoạt động 2 trang 64

Đề bài: Quan sát đoạn mã sau và xác định xem đoạn mã này có chức năng gì?

<video src="videos/war_is_over.mp4" width="300" height="250" autoplay>

Lời giải:

Đoạn mã này có chức năng chèn một tệp video vào trang web. Cụ thể:

  • src="videos/war_is_over.mp4": đường dẫn tới tệp video tên war_is_over.mp4 trong thư mục videos.
  • width="300": chiều rộng khung video là 300 pixel.
  • height="250": chiều cao khung video là 250 pixel.
  • autoplay: video sẽ tự động phát ngay khi trang web được hiển thị.

Câu hỏi củng cố mục 2 trang 64

Đề bài: Em hãy mô tả tác dụng của thuộc tính src đối với thẻ <audio>.

Lời giải:

  • Thuộc tính src dùng để cung cấp đường dẫn tới tệp âm thanh cần chèn vào trang web.
  • Nhờ có src, trình duyệt biết được tệp âm thanh nào cần tải và phát khi trang web hiển thị.
  • Đây là thuộc tính bắt buộc đối với thẻ <audio> khi muốn phát một tệp âm thanh.

Ví dụ:

<audio src="music/quocca.mp3" controls></audio>

Đoạn mã trên chèn tệp âm thanh quocca.mp3 trong thư mục music vào trang web.

3. Tạo khung nội tuyến trong trang web

Hoạt động 3 trang 65

Đề bài: 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?

Lời giải:

  • Khi thực hiện các thao tác bên trong khung (phát, tạm dừng, tua, chỉnh âm lượng…), phần còn lại của trang web không bị ảnh hưởng.
  • Giao diện của cả trang được giữ nguyên, chỉ có nội dung bên trong khung thay đổi.
  • Người dùng có thể vừa xem video vừa đọc nội dung khác trên cùng một trang, giúp trải nghiệm mượt mà và tiện lợi.

Câu hỏi củng cố mục 3 trang 65

Đề bài: Viết đoạn mã HTML để 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.

Lời giải:

Vì thẻ <iframe> là phần tử inline, hai thẻ đặt liền nhau sẽ tự động hiển thị song song theo phương ngang:

<iframe src="trang1.html" width="400" height="300"></iframe>
<iframe src="trang2.html" width="400" height="300"></iframe>

Giải thích:

  • Hai thẻ <iframe> cùng có width="400" và height="300" nên kích thước bằng nhau.
  • Đặt hai thẻ này liền nhau, trình duyệt sẽ hiển thị chúng cạnh nhau theo phương ngang.
  • Trong đó trang1.html và trang2.html là hai tệp HTML cần hiển thị trong khung.

Luyện tập

Luyện tập trang 66

Đề bài:

1. Cho ảnh có kích thước gốc là 720 × 450 pixel. Chèn ảnh vào trang web bằng câu lệnh:

<img src="images/1.png" alt="chiếc lá" width="600">

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

Lời giải:

  • Câu lệnh chỉ đặt width="600", không đặt height → chiều cao sẽ được tính tự động theo tỉ lệ ảnh gốc.
  • Tỉ lệ giữa chiều cao và chiều rộng của ảnh gốc:

$$\frac{450}{720} = 0{,}625$$

  • Chiều cao mới của ảnh:

$$600 \times 0{,}625 = 375 \text{ pixel}$$

→ Kích thước ảnh trên trang web: 600 × 375 pixel.

2. 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).

Lời giải:

Sử dụng thẻ <img> để chèn các ảnh cá nhân. Ví dụ đoạn mã bổ sung vào trang web giới thiệu bản thân:

<!DOCTYPE html>
<html>
<head>
  <title>Giới thiệu bản thân</title>
</head>
<body>
  <h1>Xin chào, mình là Nguyễn Văn A</h1>

  <img src="images/anh_ca_nhan.jpg" alt="Ảnh cá nhân" width="300">

  <p>Mình là học sinh lớp 12A trường THPT XYZ.</p>

  <h2>Một số hình ảnh của mình</h2>
  <img src="images/hoat_dong_1.jpg" alt="Tham gia hoạt động thể thao" width="300">
  <img src="images/hoat_dong_2.jpg" alt="Đi dã ngoại cùng lớp" width="300">

  <h2>Các bạn thân của mình</h2>
  <ul>
    <li><a href="https://facebook.com/ban.a">Facebook bạn A</a></li>
    <li><a href="https://facebook.com/ban.b">Facebook bạn B</a></li>
    <li><a href="https://facebook.com/ban.c">Facebook bạn C</a></li>
  </ul>
</body>
</html>

(Các em chuẩn bị các tệp ảnh của mình, đưa vào thư mục images rồi thay tên tệp trong đoạn mã cho phù hợp.)

Vận dụng

Vận dụng trang 66

Đề bài: Tạo một khung nội tuyến và liên kết đến bài hát em yêu thích (ví dụ trên YouTube) vào trang web giới thiệu bản thân.

Lời giải:

Cách lấy mã nhúng video YouTube:

  • Bước 1: Mở video bài hát yêu thích trên YouTube.
  • Bước 2: Nhấn nút Chia sẻ (Share) → chọn Nhúng (Embed).
  • Bước 3: Copy đoạn mã <iframe> mà YouTube cung cấp, dán vào trang web.

Ví dụ đoạn mã bổ sung vào trang web giới thiệu bản thân:

<h2>Bài hát mình yêu thích</h2>
<iframe width="560" 
        height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

Trong đó VIDEO_ID là mã định danh của video trên YouTube.

Khi mở trang web, khung nội tuyến sẽ hiển thị video bài hát ngay trong trang. Người xem có thể phát, tạm dừng, chỉnh âm lượng trong khung mà không ảnh hưởng đến phần còn lại của trang.

Thầy Phạm Thành Danh

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa

Giải bài tập SGK: Bài 28: Thực hành tổng hợp – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 27: Biểu mẫu trên trang web – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 26: Liên kết và thanh điều hướng – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 25: Xây dựng phần thân và chân trang web – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 24: Xây dựng phần đầu trang web – Tin học 12 ( 12/07 )