BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
VÀ KHUNG NỘI TUYẾN VÀO TRANG
Mục tiêu bàiWEB
học:
Sử dụng thẻ HTML chèn được các tệp tin đa phương tiện vào trang
web và điều chỉnh kích thước cho phù hợp.

BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
VÀ KHUNG NỘI TUYẾN VÀO TRANG
1.Chèn tệp ảnh vào
trang web
WEB
2.Chèn âm thanh và video vào trang
web
3.Tạo khung nội tuyến trong trang
web

BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
VÀ KHUNG NỘI TUYẾN VÀO TRANG
1.Chèn tệp ảnh vào trang
WEB
web
Cú pháp:
alt = “đoạn văn bản thay thế” width =
“kích thước chiều rộng” height = “kích
thước chiều cao”>

BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
VÀ
KHUNG
NỘI vào
TUYẾN
VÀO TRANG
1.Chèn
tệp ảnh
trang
webWEB

BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
VÀ
KHUNG
NỘI
TUYẾN
VÀO
TRANG
1.Chèn tệp ảnh vào trang
WEB
web

BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
1.Chèn
tệp NỘI
ảnh TUYẾN
vào trang
VÀ
KHUNG
VÀO TRANG
webWEB

BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
1.Chèn
tệp ảnhNỘI
vàoTUYẾN
trang VÀO TRANG
VÀ KHUNG
web WEB

BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
VÀ KHUNG NỘI TUYẾN VÀO TRANG
1.Chèn tệp ảnh vào trang
WEB

web
Câu 1. Các định dạng tệp ảnh được chèn vào
trang web: PNG, JPG, JPEG, GIF, JPEG-XR, WebP
Câu 2. Phiếu học tập 1
1d, 2ea, 3fc, 4fb

BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
VÀ
KHUNG
NỘI
TUYẾN
VÀO
TRANG
1.Chèn tệp ảnh vào trang
WEB

web

Lưu ý: Khi chèn ảnh, nên chèn bằng đường
dẫn tương đối để tránh trường hợp xảy ra
lỗi khi ảnh trên mạng bị thay đổi.

2. Chèn âm thanh và video vào
trang
web
1. Quan sát đoạn mã
sau, xác
định đoạn mã này có chức
năng gì?


2. Đọc SGK mục 2, HS trả lời câu hỏi:
- Định dạng tệp video được phép chèn vào trang web?
- Định dạng tệp audio được phép chèn vào trang web?
3. Cú pháp lệnh chèn audio, video vào trang web + ví dụ
4. Cách chèn nhiều tệp âm thanh/video vào trang web.

2. Chèn âm thanh và video vào
trang
web
C1. Chèn video có tên “war_is_over.mp4” lưu tại đường dẫn
“video/war_is_over.mp4”, có chiều rộng 300, cao 250 px
C2. Chèn audio có tên “war_is_over.mp3” lưu tại đường dẫn
“audio/war_is_over.mp3”,
2. Định dạng tệp video được phép chèn vào trang web: mp4, webm
- Định dạng tệp audio được phép chèn vào trang web: mp3, wav, ogg,
aac, flac

2. Chèn âm thanh và video vào
Cú pháp lệnh chèn
audio, web
video vào trang web
trang



Trong đó: Các thuộc_tính:

+ src (bắt buộc), width, height (tương tự ảnh)
+ controls: boolean, không cần khai báo giá trị, giúp trình duyệt hiển thị các nút điều
khiển trong quá trình phát tệp.
+ autoplay: boolean, không cần khai báo giá trị, cho phép trình duyệt phát video ngay
khi hiển thị
+ poster: cung cấp đường dẫn đến tệp ảnh dùng để hiển thị khi chưa chạy video



Trong đó các thuộc tính: src, controls, autoplay (tương tự video)

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

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

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

Các thuộc tính thường dùng của thẻ

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

Lưu ý: Các phần tử iframe thường dùng kết hợp với thẻ
để tạo liên kết và hiển thị nội dung bằng cách
thêm thuộc tính target cho thẻ để chỉ định nơi mở
tài liệu được liên kết.

3. Tạo khung nội tuyến trong trang web
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êntrang html>
web.

4.Thực hành chèn tệp đa phương tiện và
khung nội tuyến
Nhiệm vụ 1: Tạo hai trang the_thao.html và
nghe_thuat.html và chèn hai loại hình ảnh minh họa.
Nhiệm vụ 2: Chèn thêm bài hát “Quốc ca” vào trang
web.

4.Thực hành chèn tệp đa phương tiện và
khung nội tuyến
Nhiệm vụ 3: Chen khung nội tuyến vào trang
CLB.html hiển thị nội dung của 2 trang the_thao.html
hoặc nghe_thuat.html tùy theo lựa chọn (Hình 11.5).

BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
VÀ KHUNG NỘI TUYẾN VÀO TRANG
Luyện
WEB
tập
Trong trang web ảnh có kích thước là 600×375.
Luyện tập 2 HS tự thực hành, Lựa chọn một số ảnh
và thêm vào trang web đã viết bằng thẻ img.

BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG
TIỆN
VÀ KHUNG NỘI TUYẾN VÀO TRANG
Vận
WEB

dụng

Thank You
See You Next
Time!