Lý thuyết Tin học 12 Bài 5 (Cánh diều): Chèn hình ảnh, âm thanh, video và sử dụng khung

Lý thuyết Tin học 12 Bài 5: Chèn hình ảnh, âm thanh, video và sử dụng khung

1. Chèn hình ảnh

Khi tạo trang web, việc sử dụng các nội dung đa phương tiện như hình ảnh, âm thanh, video giúp truyền tải thông tin hiệu quả, trực quan và sinh động hơn. Để chèn hình ảnh vào trang web, sử dụng thẻ <img> với cú pháp như sau:

<img src="Tên tệp ảnh" alt="Nội dung" width="Chiều rộng" height="Chiều cao">

Các thuộc tính của thẻ <img>:

- src: Xác định tên tệp ảnh, có thể bao gồm cả đường dẫn đến tệp ảnh.

- alt: Nội dung thay thế, hiển thị khi hình ảnh không thể hiển thị được.

- width và height: Xác định kích thước chiều rộng và chiều cao của ảnh, tính theo đơn vị pixel. Nếu không khai báo, ảnh sẽ hiển thị theo kích thước gốc.

Các định dạng ảnh phổ biến:- JPG,PNG. GIF

Lưu ý: Ảnh sẽ hiển thị theo kích thước gốc nếu không khai báo thuộc tính width và height.

2. Chèn âm thanh

Để chèn âm thanh vào trang web, sử dụng thẻ <audio> với cú pháp sau:

<audio src="Tên tệp âm thanh" controls></audio>

Các thuộc tính của thẻ <audio>:

- src: Xác định tên tệp âm thanh, có thể bao gồm cả đường dẫn đến tệp âm thanh.

- controls: Hiển thị bảng điều khiển tệp âm thanh trên trình duyệt web.

Các định dạng âm thanh phổ biến:- MP3, OGG

Chức năng của bảng điều khiển:- Phát- Tạm dừng- Tắt âm- Tăng/Giảm âm lượng

Bảng điều khiển giúp người dùng tương tác dễ dàng với tệp âm thanh trên trang web.

3. Chèn video

Để chèn video vào trang web, sử dụng thẻ `<video>` với cú pháp sau:

<video src="Tên tệp video" controls></video>

Các thuộc tính của thẻ <video>:

- src: Xác định tên tệp video, có thể bao gồm cả đường dẫn đến tệp video.

- controls: Hiển thị bảng điều khiển tệp video trên trình duyệt web.

Các định dạng video phổ biến:- MP4, OGG

Chức năng của bảng điều khiển:- Chạy- Tạm dừng- Tắt âm- Tăng/Giảm âm lượng- Phóng to/Thu nhỏ màn hình

Bảng điều khiển giúp người dùng tương tác dễ dàng với tệp video trên trang web.

4. Sử dụng khung

Để nhúng một tệp HTML hoặc tài nguyên web khác vào văn bản HTML, sử dụng thẻ <iframe> với cú pháp sau:

<iframe src="url" width="Chiều rộng" height="Chiều cao"></iframe>

Các thuộc tính của thẻ <iframe>:

- src: Đường dẫn đến tệp HTML hoặc tài nguyên web khác.

- width và height: Xác định kích thước chiều rộng và chiều cao của vùng được nhúng trên trang web, tính theo đơn vị pixel.

Sử dụng thẻ <iframe> giúp bạn nhúng nội dung từ các tài nguyên web khác vào trang web của mình một cách dễ dàng và linh hoạt.

Lưu ý: Khi chèn hình ảnh, âm thanh, video, có thể xác định vị trí tuỳ ý trên trang web để hiển thị thành phần được chèn vào. Nhưng khi nhúng nội dung trang web khác vào trang web hiện thời, không thể điều chỉnh vị trí hiển thị các thành phần trong trang web được nhúng.

5. Thực hành chèn hình ảnh, âm thanh và sử dụng khung

Nhiệm vụ 1. Chèn hình ảnh

Yêu cầu: Soạn văn bản HTML để tạo trang web có một hình ảnh giới thiệu Văn Miếu Quốc Tử Giám.

Hướng dẫn thực hiện:

Bước 1. Tạo tệp “Bai5-NV1.html”.

Bước 2. Tạo cấu trúc và khai báo phần tử head cho tệp “Bai5-NV1.html”. Bước 3. Chuẩn bị tệp hình ảnh.

Bước 3: Chuẩn bị tệp hình ảnh.

Bước 4. Chèn hình ảnh vào trang web.

Trong nội dung phần tử body: Khai báo phần tử img với thuộc tính src =‘vanmieu.jpg”, thuộc tính alt =“Văn Miếu Quốc Tử Giám”.

Bước 5. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.

Nhiệm vụ 2. Chèn âm thanh

Yêu cầu: Soạn văn bản HTML giúp Khánh Nam tạo một trang web để nghe bài hát “Nhớ về Hà Nội”.

Hướng dẫn thực hiện:

Bước 1. Tạo tệp “Bai5-NV2.html”.

Bước 2. Tạo cấu trúc và khai báo phần tử head cho tệp “Bai5-NV2.html”. Bước 3. Chuẩn bị tệp âm thanh.

– Có thể truy cập một số website như chiasenhac.vn, zingmp3.vn, nhaccuatui.com để tìm kiếm tệp âm thanh định dạng MP3.

− Tải và lưu tệp nhạc với tên mới là “nhovehanoi.mp3” trong cùng thư mục lưu têp "Bai5-NV2.html".

Bước 4. Chèn âm thanh vào trang web.

Trong nội dung phần tử body: Khai báo phần tử audio với thuộc tính:

src="nhovehanoi.mp3”.

Bước 5. Ghi lưu, mở tệp trên trình duyệt web và xem kết quả.

Nhiệm vụ 3. Nhúng tệp HTML đã có vào văn bản HTML

Yêu cầu: Sử dụng phần tử iframe để tạo trang web mới có nội dung là hai trang web đã tạo ở Nhiệm vụ 1 và Nhiệm vụ 2.

Hướng dẫn thực hiện:

Bước 1. Tạo tệp “Bai5-NV3.html”.

Bước 2. Tạo cấu trúc và khai báo phần tử head cho tệp “Bai5-NV3.html”.

Bước 3. Soạn nội dung phần tử body cho tệp “Bai5-NV3.html”.

Trong nội dung phần tử body:

– Khai báo phần tử iframe với thuộc tính src =“Bai5-NV1.html”.

- Khai báo phần tử iframe với thuộc tính sức "Bai5-NV2.html".

Lưu ý: Các tệp “Bai5-NV1.html”, “Bai5-NV2.html”, “Bai5-NV3.html” cần được lưu trong cùng một thư mục.

Bước 4. Ghi lưu, mở tệp “Bai5-NV3.html” bằng trình duyệt web và xem kết quả.

Trắc nghiệm: Chèn hình ảnh, âm thanh, video và sử dụng khung

PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

Câu 1: Thẻ nào được sử dụng để chèn hình ảnh vào trang web?

A. <img>

B. <audio>

C. <video>

D. <iframe

Câu 2: Thuộc tính nào của thẻ <img> xác định tên tệp ảnh?

A. alt

B. width

C. height

D. src

Câu 3: Thẻ nào được sử dụng để chèn âm thanh vào trang web?

A. <img>

B. <audio>

C. <video>

D. <iframe>

Câu 4: Thuộc tính nào của thẻ <audio> dùng để hiển thị bảng điều khiển âm thanh trên trình duyệt?

A. src

B. controls

C. autoplay

D. loop

Câu 5: Thẻ nào được sử dụng để chèn video vào trang web?

A. <img>

B. <audio>

C. <video>

D. <iframe>

Câu 6: Thuộc tính nào của thẻ <video> cho phép hiển thị bảng điều khiển video trên trình duyệt?

A. src

B. controls

C. autoplay

D. loop

Câu 7: Để nhúng một tệp HTML vào trang web, thẻ nào được sử dụng?

A. <img>

B. <audio>

C. <video>

D. <iframe>

Câu 8: Để xác định kích thước của vùng nhúng khi sử dụng thẻ <iframe>, thuộc tính nào được sử dụng?

A. src

B. controls

C. width và height

D. autoplay

Câu 9: Định dạng âm thanh nào không phổ biến khi sử dụng thẻ <audio>?

A. MP3

B. OGG

C. WAV

D. JPG

Câu 10: Khi chèn hình ảnh, nếu không khai báo thuộc tính width và height, ảnh sẽ hiển thị theo kích thước nào?

A. Kích thước gốc

B. Kích thước của phần tử chứa ảnh

C. Kích thước theo màn hình

D. Kích thước của thẻ <img>

PHẦN II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

Câu 1: Phát biểu sau đây đúng hay sai: Kkhi chèn hình ảnh vào trang web, thuộc tính nào của thẻ <img> là không bắt buộc?

a) src

b) alt

c) width

d) height

Câu 2: Phát biểu sau đây đúng hay sai: Để chèn tệp âm thanh vào trang web và cho phép người dùng điều khiển việc phát nhạc, thuộc tính nào của thẻ <audio> cần được thêm vào?

a) src

b) controls

c) autoplay

d) loop

PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

Câu 1: Trong thẻ <img>, thuộc tính nào dùng để xác định tên tệp ảnh hoặc đường dẫn đến tệp ảnh?

Câu 2: Thẻ <audio> cần có thuộc tính nào để hiển thị bảng điều khiển cho người dùng?

Câu 3: Khi sử dụng thẻ <iframe> liệu có thể điều chỉnh vị trí hiển thị của các thành phần trong nội dung được nhúng không?