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