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ả.