12_Lesson5.cdf

CHÈN ĐA PHƯƠNG TIỆN VÀ SỬ DỤNG KHUNG

​CHÈN ĐA PHƯƠNG TIỆN VÀ SỬ DỤNG KHUNG

​1. Chèn ảnh

Cấu trúc cơ bản của thẻ <img>:

<img src="duong_dan_toi_anh.jpg" alt="Mô tả thay thế">

• src: Chỉ đường dẫn đến tệp ảnh. Bạn có thể sử dụng:

  • Đường dẫn tương đối: Phù hợp với các tệp trong cùng thư mục hoặc các thư mục con.

    • Ví dụ: src="images/hinh_anh.png"

  • Đường dẫn tuyệt đối: Liên kết trực tiếp đến tệp trên mạng.

    • Ví dụ: src="https://example.com/hinh_anh.png"

• alt: Văn bản thay thế, giúp mô tả nội dung ảnh khi không thể tải ảnh.

​CHÈN ĐA PHƯƠNG TIỆN VÀ SỬ DỤNG KHUNG

​1. Chèn ảnh

Chèn ảnh làm liên kết

Ví dụ: Chèn ảnh làm liên kết tới tệp PDF:

<a href="tai_lieu/bieu_mau.pdf"> <img src="images/pdles.png" alt="Biểu mẫu xin nhập học"> </a>

Khi nhấn vào ảnh, người dùng sẽ được chuyển tới file PDF.

​CHÈN ĐA PHƯƠNG TIỆN VÀ SỬ DỤNG KHUNG

​1. Chèn ảnh

Điều chỉnh kích thước ảnh

Bạn có thể sử dụng các thuộc tính width và height để điều chỉnh kích thước ảnh theo pixel. Ví dụ:

<img src="images/hinh_anh.png" alt="Mô tả thay thế" width="300" height="200">

• Nếu chỉ đặt width hoặc height, trình duyệt sẽ tự động tính toán kích thước còn lại dựa trên tỉ lệ ảnh gốc.

​CHÈN ĐA PHƯƠNG TIỆN VÀ SỬ DỤNG KHUNG

​1. Chèn ảnh

Tối ưu hóa hiển thị ảnh

• Giảm kích thước ảnh: Dùng công cụ nén ảnh trước khi tải lên để cải thiện tốc độ tải.

• Sử dụng định dạng phù hợp:

  • JPEG: Phù hợp cho ảnh chụp, hình ảnh phức tạp.

  • PNG: Hỗ trợ nền trong suốt, phù hợp cho ảnh đồ họa.

  • WebP: Hiệu quả cao hơn về nén và hiển thị.

Multiple Choice

Thuộc tính nào bắt buộc phải có trong thẻ <img> để ảnh được hiển thị?

• alt

• title

• src

• width

Multiple Choice

Thẻ <img> nào sau đây được viết đúng cú pháp?

• <img href="hinh_anh.png">

• <img src="hinh_anh.png" alt="Hình minh họa">

• <img alt="Hình minh họa">

• <img>

Multiple Choice

Trong thẻ <img>, thuộc tính alt có tác dụng gì?

• Là đường dẫn đến tệp ảnh.

• Định nghĩa kích thước ảnh.

• Hiển thị văn bản thay thế khi ảnh không tải được.

• Chỉ sử dụng trong các trình duyệt cũ.

Multiple Choice

Điều gì xảy ra nếu không sử dụng thuộc tính width và height trong thẻ <img>?

• Ảnh sẽ không hiển thị.

• Ảnh sẽ bị lỗi hiển thị.

• Trình duyệt tự động điều chỉnh ảnh về kích thước 100x100 px.

• Ảnh được hiển thị theo kích thước gốc.

Multiple Choice

Để tạo liên kết từ ảnh đến một trang web khác, cú pháp nào sau đây đúng?

• <a><img src="image.png"></a>

• <a href="https://example.com"><img src="image.png" alt="Ảnh"></a>

• <img src="image.png" href="https://example.com">

• <img href="https://example.com" src="image.png">

Multiple Choice

Khi chỉ đặt một thuộc tính kích thước (ví dụ: width="200") cho thẻ <img>, điều gì sẽ xảy ra?

• Ảnh chỉ thay đổi chiều rộng, chiều cao không thay đổi.

• Trình duyệt tự động thay đổi chiều còn lại để giữ đúng tỷ lệ gốc.

• Ảnh sẽ bị méo vì chỉ thay đổi một chiều.

• Ảnh không hiển thị.

Multiple Choice

Định dạng tệp ảnh nào dưới đây phù hợp để sử dụng cho nền trong suốt?

• JPEG

• PNG

• BMP

• GIF

Multiple Choice

Khi sử dụng ảnh trên trang web, yếu tố nào sau đây không giúp tối ưu hóa tốc độ tải?

• Nén ảnh trước khi tải lên.

• Sử dụng ảnh có kích thước phù hợp với nội dung.

• Sử dụng ảnh có độ phân giải lớn hơn cần thiết.

• Sử dụng định dạng ảnh như WebP hoặc JPEG.

Multiple Choice

Bạn muốn hiển thị một ảnh có kích thước cố định là 300px x 200px. Hãy chọn đoạn mã đúng:

• <img src="image.jpg" width="300px" height="200px">

• <img src="image.jpg" width="300" height="200">

• <img src="image.jpg" alt="Ảnh" width="300" height="200">

• <img alt="Ảnh" src="image.jpg" 300 200>

Multiple Choice

Một trang web có ảnh không hiển thị khi bị lỗi tải. Để cải thiện trải nghiệm người dùng, cần thêm gì vào thẻ <img>?

• Thêm thuộc tính srcset để chỉ định nhiều ảnh thay thế.

• Thêm thuộc tính alt để hiển thị văn bản thay thế.

• Thêm thuộc tính title để hiển thị tiêu đề khi di chuột.

• Thêm thuộc tính atl để hiển thị văn bản thay thế.

Multiple Choice

Một nhà thiết kế web muốn đảm bảo ảnh tải nhanh và thân thiện với người dùng. Phương pháp nào sau đây nên được áp dụng?

• Nén ảnh để giảm dung lượng mà không ảnh hưởng lớn đến chất lượng.

• Dùng ảnh định dạng BMP vì định dạng này chất lượng cao hơn.

• Sử dụng ảnh có độ phân giải lớn để đảm bảo chất lượng.

• Không cần tối ưu hóa vì mạng hiện đại đủ nhanh.

Multiple Choice

Để chèn một ảnh vào trang web mà ảnh đó liên kết đến https://example.com, đoạn mã nào sau đây là đúng?

• <img src="image.jpg" href="https://example.com">

• <a><img src="image.jpg" href="https://example.com"></a>

• <img href="https://example.com" src="image.jpg" alt="Link đến Example">

• <a href="https://example.com"><img src="image.jpg" alt="Link đến Example"></a>

Multiple Choice

Trong trường hợp bạn muốn hiển thị một ảnh có kích thước đầy đủ chiều rộng của trình duyệt, đoạn mã nào dưới đây phù hợp?

• <img src="image.jpg" alt="Ảnh minh họa" width="100%">

• <img alt="Ảnh minh họa" src="image.jpg" width="max">

• <img src="image.jpg" alt="Ảnh minh họa" >

• <img src="image.jpg" alt="Ảnh minh họa" >

​CHÈN ĐA PHƯƠNG TIỆN VÀ SỬ DỤNG KHUNG

​2. Chèn âm thanh và video

Để chèn video hoặc âm thanh vào trang web, ta sử dụng thẻ <video> và <audio> được hỗ trợ trong hầu hết các trình duyệt, định dạng của các tập tin đa phương tiện có thể sử dụng vẫn phụ thuộc vào trình duyệt.

• Hai định dạng tệp video phổ biến nhất là mp4 và webm. Định dạng mp4 chạy được trực tiếp trên hầu hết các trình duyệt.

• Ba định dạng tệp âm thanh phổ biến được hỗ trợ bởi hầu hết trình duyệt hiện tại là mp3, wav và ogg.c="video.webm" type="video/webm">
  </video>

​CHÈN ĐA PHƯƠNG TIỆN VÀ SỬ DỤNG KHUNG

​2. Chèn âm thanh và video

• Để chèn tệp video hay âm thanh vào trang web, ta sử dụng thẻ <video> hoặc <audio>:

 <video[audio] thuộc_tính="giá_trị_thuộc_tính"></video[audio]>

​CHÈN ĐA PHƯƠNG TIỆN VÀ SỬ DỤNG KHUNG

​2. Chèn âm thanh và video

• Hai thẻ có các thuộc tính cơ bản giống img và một số thuộc tính khác: 

  • controls: là thuộc tính boolean, không cần có giá trị, để trình duyệt hiển thị các thành phần điều khiển như nút phát/tạm dừng, điều khiển âm lượng,... 

  • autoplay: là thuộc tính boolean, không cần có giá trị, cho phép trình duyệt chạy 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. Thẻ <audio> không có thuộc tính width, height và poster.

  Sử dụng thẻ <sources> trong cặp thẻ <video> hay <audio> để chỉ định các loại định dạng khác nhau. Trình duyệt sẽ tự động tìm và hiển thị tệp tin với định dạng mà nó hỗ trợ.
  

Multiple Choice

Kiểu thuộc tính của controls là

• float.

• string.

• integer.

• boolean.

Multiple Choice

Thuộc tính nào sau đây giúp hiển thị các nút điều khiển khi chèn video hoặc âm thanh?

• autoplay

• controls

• poster

• type

Multiple Choice

Thuộc tính nào được sử dụng để cung cấp hình ảnh hiển thị trước khi video chạy?

• src

• poster

• autoplay

• width

Multiple Choice

Cú pháp nào đúng để chèn một video vào trang web?

• <video src="video.mp4" type="video/mp4"></video>

• <source src="video.mp4" type="video/mp4"></video>

• <audio><source src="video.mp4" type="video/mp4"></audio>

• <video><source src="video.mp4" type="video/mp4"></source></video>

Multiple Choice

Định dạng tệp video nào được hỗ trợ bởi hầu hết các trình duyệt?

• avi

• flv

• mp4

• wmv

Multiple Choice

Định dạng âm thanh nào sau đây được hỗ trợ phổ biến?

• ogg

• aac

• midi

• flac

Multiple Choice

Thuộc tính autoplay trong thẻ <audio> hoặc <video> có tác dụng gì?

• Tự động phát ngay khi tải trang.

• Hiển thị các nút điều khiển.

• Chỉ định định dạng tệp.

• Chạy tệp khi người dùng bấm nút.

Multiple Choice

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

• <video>

• <audio>

• <source>

• <media>

Multiple Choice

Cách viết nào sau đây dùng để cung cấp nhiều định dạng video?

• <video controls autoplay><source src="video.mp4" type="video/mp4"><source src="video.ogg"></video>

• <video><source src="video.mp4"><source src="video.webm"></video>

• <video><source src="video.mp4" poster="image.jpg"></video>

• <video src="video.mp4" poster="image.jpg"></video>

Multiple Choice

Thuộc tính nào chỉ dành cho thẻ <video> mà không có trong thẻ <audio>?

• autoplay

• poster

• controls

• src

Multiple Choice

Nội dung nào bên trong thẻ <audio> sẽ hiển thị khi trình duyệt không hỗ trợ âm thanh?

• Nội dung trong thẻ <source>.

• Không hiển thị gì cả.

• Văn bản thay thế nằm bên trong <audio>.

• Đường dẫn đến âm thanh được chỉ định trong src.

Multiple Choice

Thuộc tính nào giúp chỉ định loại tệp trong thẻ <source>?

• poster

• type

• format

• mime

Multiple Choice

Câu nào sau đây là đúng về thứ tự ưu tiên khi sử dụng thẻ <source>?

• Trình duyệt sẽ chọn tệp đầu tiên mà nó hỗ trợ.

• Trình duyệt sẽ tải tất cả các tệp được liệt kê.

• Trình duyệt chỉ hỗ trợ một định dạng duy nhất.

• Trình duyệt không ưu tiên thứ tự, mà hiển thị lỗi nếu không tương thích.

Multiple Choice

Khi không thêm thuộc tính controls, điều gì xảy ra với thẻ <video>?

• Video vẫn hiển thị nhưng không thể điều khiển.

• Video không hiển thị.

• Video tự động phát.

• Video không thể chạy.

Multiple Choice

Định dạng nào sau đây không được khuyến nghị khi chèn video trên web?

• mp4

• webm

• flv

• ogg

Multiple Choice

Câu nào sau đây đúng khi sử dụng thẻ <audio>?

• Thẻ <audio> bắt buộc phải có thuộc tính autoplay.

• Thẻ <audio> không cần thẻ <source> nếu dùng thuộc tính src.

• Thẻ <audio> không hỗ trợ thuộc tính controls.

• Thẻ <audio> yêu cầu tệp âm thanh phải ở định dạng wav.

​CHÈN ĐA PHƯƠNG TIỆN VÀ SỬ DỤNG KHUNG

3. Tạo khung nội tuyến trong trang web
Khung nội tuyến là một khung nhìn chứa tài nguyên web khác trong trang web hiện tại.

Sử dụng thẻ <iframe> (viết tắt của inline frame – khung nội tuyến). Ví dụ, khi cần chèn nội dung từ YouTube hoặc bản đồ từ Google Maps vào trang web của mình, các nền tảng đều cung cấp cho ta một đoạn mã sử dụng iframe (công cụ tiêu chuẩn để chèn các nội dung quảng cáo) để ta sao chép và dán vào trang web.

Các thuộc tính thường dùng của thẻ <iframe> là:

• src: đường dẫn tới nội dung hiển thị trong khung nội tuyến.

• width, height: chiều rộng và chiều cao của khung nội tuyến.
  

​CHÈN ĐA PHƯƠNG TIỆN VÀ SỬ DỤNG KHUNG

3. Tạo khung nội tuyến trong trang web
🔹Ví dụ, tạo một trang web có tên iframe.html và chèn vào một khung nội tuyến có kích thước 600 x 400 pixel. Trong khung nội tuyến ta hiển thị nội dung của trang web CLB.html.

Lưu ý: Các phần tử iframe thường dùng kết hợp với thẻ <a> để 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ẻ <a> để chỉ định nơi mở tài liệu được liên kết.

Multiple Choice

Thẻ iframe được sử dụng với mục đích là

• nhúng hình ảnh động vào trang hiện tại.

• nhúng một tệp âm thanh vào trang hiện tại.

• nhúng một trang khác vào trang hiện tại.

• nhúng bảng tính Excel vào trang hiện tại.

Multiple Choice

Cú pháp nào sau đây là đúng để tạo một khung nội tuyến với chiều rộng 600 pixel và chiều cao 400 pixel?

• <iframe src="example.html"></iframe>

• <iframe src="example.html" width="600px" height="400px"></iframe>

• <iframe src="example.html" width="600" height="400"></iframe>

• <iframe src="example.html" sizes="600x400"></iframe>

Multiple Choice

Đoạn mã nào sau đây sẽ hiển thị trang web Google trong một khung nội tuyến?

• <iframe src="https://www.google.com"></iframe>

• <iframe href="https://www.google.com"></iframe>

• <iframe name="https://www.google.com"></iframe>

• <iframe alt="https://www.google.com"></iframe>

Multiple Choice

Thuộc tính nào cần thêm vào thẻ <iframe> để hiển thị thanh cuộn nếu nội dung lớn hơn kích thước khung?

• scrolling="yes"

• overflow="auto"

• resize="true"

• content-scroll="true"

Multiple Choice

Câu nào sau đây đúng khi sử dụng thẻ <iframe> kết hợp với thẻ <a>?

• Thuộc tính name của <iframe> phải trùng với thuộc tính target trong <a>.

• Thẻ <iframe> không hỗ trợ hiển thị liên kết từ thẻ <a>.

• Không thể kết hợp <iframe> với thẻ <a>.

• Thuộc tính src trong <iframe> sẽ ghi đè liên kết của thẻ <a>.

Multiple Choice

Thuộc tính allowfullscreen trong thẻ <iframe> dùng để:

• Chỉ cho phép hiển thị nội dung toàn màn hình.

• Cho phép người dùng chuyển sang chế độ toàn màn hình.

• Bắt buộc khung nội tuyến luôn hiển thị toàn màn hình.

• Không có tác dụng gì với thẻ <iframe>.

Multiple Choice

Khi chèn iframe, nếu không thể tải được tài nguyên, điều gì xảy ra?

• Trình duyệt sẽ hiển thị lỗi "Tài nguyên không khả dụng".

• Khung sẽ tự động bị xóa khỏi trang.

• Nội dung từ một tài nguyên dự phòng sẽ tự động tải.

• Nội dung thay thế (nếu có) trong thẻ <iframe> sẽ được hiển thị.

Multiple Choice

Thuộc tính src trong thẻ <iframe> dùng để:

• Chỉ định chiều rộng của khung nội tuyến.

• Thêm văn bản thay thế cho khung.

• Chỉ định tài nguyên được hiển thị trong khung.

• Thiết lập tiêu đề cho khung.

Multiple Choice

Làm thế nào để hiển thị Google Maps trong khung nội tuyến trên trang web của bạn?

• Sử dụng mã nhúng iframe được cung cấp bởi Google Maps.

• Sử dụng liên kết Google Maps với thẻ <iframe>.

• Chèn API của Google Maps vào thẻ <iframe>.

• Ghi địa chỉ Google Maps trong thuộc tính src của iframe.

Multiple Choice

Bạn muốn hiển thị thanh cuộn trong iframe nếu nội dung dài hơn kích thước khung, bạn cần làm gì?

• Thêm thuộc tính scrolling="yes" vào thẻ iframe.

• Tăng kích thước khung nội tuyến bằng thuộc tính height.

• Sử dụng thuộc tính overflow="auto" để hiển thị thanh cuộn.

• Sử dụng CSS để hiển thị thanh cuộn trong khung nội tuyến.

Multiple Choice

Để nội dung liên kết từ thẻ <a> hiển thị trong iframe, bạn cần:

• Sử dụng thuộc tính target trong thẻ <a> trỏ đến thuộc tính name của iframe.

• Đặt nội dung liên kết của thẻ <a> vào thuộc tính src của iframe.

• Thêm thuộc tính href trong thẻ <iframe> thay vì sử dụng thẻ <a>.

• Sử dụng thuộc tính onclick trong thẻ <a> để mở nội dung trong iframe.

Multiple Choice

Làm thế nào để tạo khung nội tuyến hiển thị video từ YouTube?

• Nhúng mã iframe do YouTube cung cấp để nhúng video.

• Sao chép URL video YouTube vào thuộc tính src của iframe.

• Đặt URL video YouTube vào thuộc tính data của iframe.

• Chèn video bằng cách sử dụng thẻ <video> thay cho iframe.