Bài viết dưới đây Taimienphi.vn sẽ giới thiệu cho bạn về thẻ iframe trong HTML. Ngoài ra bạn đọc có thể tham khảo một số bài viết khác đã có trên Taimienphi.vn để tìm hiểu về thuộc tính id trong HTML.
1. Thẻ iframe trong HTML
Chúng ta có thể chỉ định khung nội tuyến (inline frame) bằng cách sử dụng thẻ iframe. Thẻ iframe không liên quan đến thẻ frameset, và có thể xuất hiện ở vị trí bất kỳ trên tài liệu.
Thuộc tính src được sử dụng để chỉ định URL của trang chứa iframe.
2. Cú pháp iframe trong HTML
iframe trong HTML được chỉ định bằng thẻ iframe.
Thuộc tính src chỉ định URL (địa chỉ web) của trang chứa khung nội tuyến(inline frame).
3. Thiết lập chiều cao và chiều rộng iframe trong HTML
Chúng ta sử dụng các thuộc tính height và width để chỉ định kích thước của iframe.
- Mặc định chiều cao và chiều rộng iframe được chỉ định bằng đơn vị pixel.
Ví dụ 1: trong ví dụ dưới đây chúng ta chỉ định kích thước cho iframe bằng đơn vị pixel:
Kết quả trả về sau khi áp dụng các thuộc tính height và width bằng đơn vị pixel để chỉ định kích thước của iframe có dạng như dưới đây:
- Ngoài ra chúng ta có thể chỉ định kích thước iframe bằng đơn vị phần trăm (%):
Ví dụ 2: trong ví dụ dưới đây chúng ta chỉ định kích thước cho iframe bằng đơn vị %:
Kết quả trả về sau khi áp dụng các thuộc tính height và width bằng đơn vị % để chỉ định kích thước của iframe có dạng như dưới đây:
- Hoặc sử dụng CSS để thiết lập chiều rộng và chiều cao iframe.
Ví dụ 3: trong ví dụ này chúng ta sử dụng CSS để thiết lập chiều rộng và chiều cao cho iframe:
Kết quả trả về sau khi áp dụng CSS để chỉ định kích thước của iframe có dạng như dưới đây:
4. Xóa đường viền trên iframe
Mặc định iframe có đường viền xung quanh.
Để xóa đường viền này, chúng ta thêm thuộc tính style và sử dụng thuộc tính border trong CSS.
Ví dụ 1: trong ví dụ dưới đây minh họa cách xóa đường viền cho iframe trong HTML:
Kết quả trả về có dạng như dưới đây:
Với CSS, chúng ta có thể thay đổi kích thước, style và màu sắc cho đường viền của iframe.
Ví dụ 2: trong ví dụ dưới đây chúng ta sẽ thay đổi kích thước, style và màu sắc cho đường viền của iframe:
Kết quả trả về có dạng như dưới đây:
5. Sử dụng iframe làm khung đích cho link
Ngoài ra chúng ta có thể sử dụng iframe để làm khung đích cho link (liên kết).
Thuộc tính target của link (liên kết) phải tham chiếu đến thuộc tính name của iframe.
Ví dụ: trong ví dụ dưới đây chúng ta sử dụng iframe làm khung đích cho link:
Kết quả trả về có dạng như dưới đây:
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn thẻ iframe trong HTML. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé. Bạn muốn học HTML và tìm hiểu thêm trong bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về cách nhúng JavaScript vào HTML.