Tiết 25
BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN VÀ KHUNG NỘI TUYẾN VÀO
TRANG WEB (Tiết 2)

4. THỰC HÀNH CHÈN TỆP ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN
Nhiệm vụ 1: Chèn tệp ảnh
Yêu cầu
Tạo hai trang the_thao.html và nghe_thuat.html và chèn hai loại ảnh minh họa.

CHÈN TỆP ẢNH VÀO TRANG WEB

Thuộc tính:
 src: đường dẫn tới tệp tin ảnh (bắt buộc)
• Tệp ảnh cùng thư mục với tệp html: đường dẫn=“tên tệp tin”
src = “hoa_mai.png”
• Tệp ảnh khác thư mục với tệp html: đường dẫn=“tên thư mục/tên tệp tin”
src = “hinh_anh/hoa_mai.png”
Các định dạng ảnh được hỗ trợ: png, jpg, gif, svg, webp
 alt: đoạn văn bản thay thế khi hình ảnh không hiển thị
 width: chiều rộng ảnh (px)
 height: chiều cao ảnh (px)

4. THỰC HÀNH CHÈN TỆP ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN
Nhiệm vụ 1: Chèn tệp ảnh
Yêu cầu
Tạo hai trang the_thao.html và nghe_thuat.html và chèn hai loại ảnh minh họa.

Hoạt động thể thao
trường THPT Hoàng Hoa
Thám

width="600px"
height="400px">

Hoạt động văn nghệ
trường THPT Hoàng Hoa
Thám

width="600px"
height="400px">

4. THỰC HÀNH CHÈN TỆP ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN
Nhiệm vụ 2: Chèn tệp âm thanh
Yêu cầu
Chèn thêm bài hát Con cào cào vào trang web

CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB
Chèn âm thanh vào trang web

Thuộc tính:
 src: đường dẫn đến tệp tin
Các định dạng audio được hỗ trợ: mp3, wav, ogg
 controls: hiển thị thành phần điều khiển
 autoplay: tự động phát ngay khi hiển thị
 muted: tắt âm thanh

4. THỰC HÀNH CHÈN TỆP ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN
Nhiệm vụ 3: Chèn khung nội tuyến
Yêu cầu
Tạo trang index.html, chèn khung nội tuyến vào trang index.html và hiển thị
nội dung hai trang the_thao.html và nghe_thuat.html trong khung nội tuyến.

3. TẠO KHUNG NỘI TUYẾN TRONG TRANG WEB
Chèn khung nội tuyến vào trang web

Thuộc tính:
 src: đường dẫn đến nội dung hiển thị trong khung
• Đường dẫn tương đối: src = “thong_tin.html”
• Đường dẫn tuyệt đối: src = “https://forlangworld.blogspot.com/”
 width: chiều rộng (px)
 height: chiều cao (px)

2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB
Chèn video vào trang web

Thuộc tính:
 src: đường dẫn đến tệp tin
Các định dạng video được hỗ trợ: mp4, webm
 width: chiều rộng (px)
 height: chiều cao (px)
 controls: hiển thị thành phần điều khiển
 autoplay: tự động phát ngay khi hiển thị
 muted: tắt âm thanh
 poster: hiển thị đường dẫn đến tệp ảnh