[Bài 10] Iframe trong HTML5

[Bài 10] Iframe trong HTML5
  1. Giới thiệu về HTML5
  2. [Bài 1] Chuẩn bị trước khi học HTML5
  3. [Bài 2] Cấu trúc HTML5 đơn giản
  4. [Bài 3] Định dạng văn bản trong HTML5
  5. [Bài 4] Thuộc tính trong HTML5
  6. [Bài 5] Liên kết trong HTML5
  7. [Bài 6] Hình ảnh trong HTML5
  8. [Bài 7] Bình luận trong HTML5
  9. [Bài 8] Danh sách trong HTML5
  10. [Bài 9] Bảng biểu trong HTML5
  11. [Bài thực hành 1] Viết cấu trúc HTML5 đơn giản
  12. [Bài 10] Iframe trong HTML5
  13. [Bài 11] Video trong HTML5
  14. HTML5 nâng cao

Bài này mình sẽ giới thiệu với các bạn một nội dung nữa, đó chính là Iframe trong HTML5.

Hẳn khi các bạn mở một số trang web thì các bạn sẽ thấy chủ web sẽ đặt một số quảng cáo, đa phần quảng cáo đến từ Google và là quảng cáo động (dạng ảnh GIF), chúng ta sẽ không tìm hiểu quảng cáo là gì, là như thế nào mà chúng ta sẽ tìm hiểu thứ chứa nội dung quảng cáo đó chính là Iframe

Iframe trong HTML5

Trong HTML5, Iframe được viết theo cú pháp như sau:

<iframe src="https://tienminhvy.com"></iframe>

Kết quả sẽ như bên dưới:

Bạn có thể lấy nội dung của website bất kỳ bằng cách đổi URL ở thuộc tính src (ví dụ như google.com,… giống như thuộc tính của thẻ hình ảnh trong HTML5, chỉ khác là thay vì src của <img> trỏ đến ảnh thì src của iframe sẽ trỏ đến một website).

Ứng dụng: chủ yếu là quảng cáo, đôi khi chủ website có thể thêm vào làm tính năng cho website của mình, tính năng thêm video vào website của Youtube dùng iframe chứ không dùng thẻ <video>. Bên cạnh đó, iframe đôi khi còn được tin tặc dùng cho mục đích phá hoại website khác (DDOS),…

Cách ghi nhớ: iframe là viết tắt của inline frame (khung nội tiếng trong tiếng Việt), bạn lấy chữ i đầu của inline ghép với frame là ra.

Các thuộc tính của iframe trong HTML5

Ngoài thuộc tính src ra, iframe còn có các thuộc tính như sau:

  • width
  • height
  • name

2 thuộc tính width và height được dùng để chỉnh chiều dài và chiều rộng của iframe, bạn xem ví dụ sau:

<iframe src="https://tienminhvy.com" width="600px" height="300px"></iframe>

Kết quả như hình dưới:

Còn thuộc tính name để đặt tên cho iframe, sau đó ta thêm thuộc tính target của thẻ <a> là tên của iframe, khi nhấn vào liên kết sẽ tự động mở trang web đã thiết lập trong thẻ <a>. Ví dụ

<iframe name='iframe_tmv' width="600px" height="300px"></iframe>
<a target='iframe_tmv' href='https://tienminhvy.com'>Truy cập website tienminhvy.com</a>

Truy cập website tienminhvy.com qua iframe

Mình có đề cập chi tiết về thuộc tính target của thẻ <a> có tác dụng như thế nào ở bài viết trước, nếu bạn chưa nhớ thì có thể xem lại tại đây: [Bài 5] Liên kết trong HTML5

Tóm lại

Qua bài viết ngắn này, mình đã giới thiệu với các bạn về các nội dung như sau:

  • Iframe trong HTML5 là gì, cú pháp, cách ghi nhớ
  • Các thuộc tính của iframe cần nhớ

Như vậy là chỉ còn vài bài nữa là chúng ta sẽ kết thúc phần HTML5 cơ bản rồi, sau phần đó chúng ta sẽ tiếp tục đến phần HTML5 nâng cao. Tuy nhiên, trước tiên, chúng ta sẽ tìm hiểu về thẻ video trong HTML5 tại đây: [Bài 11] Video trong HTML5

iframe trong html5
iframe trong html5
0 0 bình chọn
Đánh giá bài viết

Tiền Minh Vy

Xin chào! Tôi là Tiền Minh Vy, là một lập trình viên có nhiều kinh nghiệm với Wordpress, tập trung nhiều với PHP.
Đăng ký
Thông báo cho tôi về
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận