Một khung nội tuyến (iframe) được sử dụng để hiển thị một trang web trong một trang web.
1. Cách chèn một khung nội tuyến (iframe) vào trang web
Để chèn một khung nội tuyến (iframe) vào trang web ta có cú pháp sau:
<iframe src=”URL”></iframe>
Thuộc tính src xác định URL (địa chỉ web) của trang web trong khung nội tuyến.
Để các bạn dễ hiểu tôi sẽ ví dụ như sau tôi muốn chèn một khung nội tuyến (iframe) với địa chỉ là http://binhnet.com vào trang web này tôi sẽ viết code như sau
<!DOCTYPE html> <html> <body> <iframe src="http://binhnet.com"></iframe> </body> </html>
thì trình duyệt sẽ hiển thị như hình dưới đây
2. Thiết lập kích thước cho khung nội tuyến (iframe)
Thuộc tính width dùng để thiết lập chiều rộng cho khung nội tuyến (iframe). Giá trị của thuộc tính width được tính bằng đơn vị px (pixel) hoặc % (được tính theo % chiều rộng của màn hình hiển thị) cái này tôi đã viết kỹ ở bài trước tôi không nhắc lại ở đây
Thuộc tính height dùng để thiết lập chiều cao cho khung nội tuyến (iframe). Giá trị của thuộc tính height được tính bằng đơn vị px (pixel).
Để các bạn dễ hiểu tôi sẽ ví dụ như sau tôi muốn chèn một khung nội tuyến (iframe) với địa chỉ là http://binhnet.com và có chiều rộng là 100% và chiều cao là 250px vào trang web này tôi sẽ viết code như sau
<!DOCTYPE html> <html> <body> <iframe src="http://binhnet.com" height="250px" width="100%"></iframe> </body> </html>
thì trình duyệt sẽ hiển thị như hình dưới đây
3. Xoá bỏ đường viền cho khung nội tuyến (iframe)
Bởi mặc định một khung nội tuyến luôn có đường viền xung quanh nó.
Để xoá bỏ đường viền cho khung nội tuyến (iframe) ta làm như hình dưới
Với CSS, bạn cũng có thể thay đổi kích thước, kiểu dáng và màu sắc đường viền của khung nội tuyến như hình dưới đây
4. Dùng khung nội tuyến (iframe) để xem các trang liên kết
Thuộc tính name dùng để đặt tên cho một khung nội tuyến (iframe).
Thuộc tính target ở thẻ <a> dùng để mở trang liên kết vào khung nội tuyến (iframe).
Để các bạn dễ hiểu tôi sẽ ví dụ và làm từng bước như sau:
Bước 1: tôi chèn một khung nội tuyến (iframe) có tên là “binhnet” (dùng thuộc tính name) với địa chỉ là http://binhnet.com và có chiều rộng là 100% và chiều cao là 300px vào trang web này tôi sẽ viết code như sau
<!DOCTYPE html> <html> <body> <iframe src="http://binhnet.com" name="binhnet" height="300px" width="100%"></iframe> </body> </html>
thì trình duyệt sẽ hiển thị như hình dưới đây
Bước 2: Thêm trang liên kết với cụm từ dùng để liên kết là “Bấm vào đây để xem series học WordPress” và địa chỉ là http://ift.tt/2vZtTaS vào khung nội tuyến (iframe) trên tôi sẽ viết code như sau
<!DOCTYPE html> <html> <body> <p><a href="http://ift.tt/2vZtTaS" target="binhnet">Bấm vào đây để xem series học Wordpress</a></p> </body> </html>
thì trình duyệt sẽ hiển thị như ở dưới
Bấm vào đây để xem series học WordPress
Bây giờ bạn chỉ cần bấm vào cụm từ “Bấm vào đây để xem series học WordPress” ở trên thì khung nội tuyến (iframe) trên (khung nội tuyến có thuộc tính name=”binhnet”) sẽ chuyển đến địa chỉ là http://ift.tt/2vZtTaS
5. Các bài tập
5.1 Bài tập 1
Tạo khung nội tuyến với địa chỉ URL chuyển đến http://binhnet.com
<!DOCTYPE html> <html> <body> </body> </html>
Câu trả lời của bài tập 1
<!DOCTYPE html> <html> <body> <iframe src="http://binhnet.com"></iframe> </body> </html>
5.2 Bài tập 2
Đặt chiều rộng của khung nội tuyến là 100%
<!DOCTYPE html> <html> <body> <iframe src="http://binhnet.com"></iframe> </body> </html>
Câu trả lời của bài tập 2
<!DOCTYPE html> <html> <body> <iframe src="http://binhnet.com" width="100%"></iframe> </body> </html>
5.3 Bài tập 3
Xóa đường viền khỏi khung nội tuyến.
<!DOCTYPE html> <html> <body> <iframe src="http://binhnet.com"></iframe> </body> </html>
Câu trả lời của bài tập 3
<!DOCTYPE html> <html> <body> <iframe src="http://binhnet.com" style="border:none"></iframe> </body> </html>
5.4 Bài tập 4
Thay đổi màu sắc đường viền của khung nội tuyến thành màu đỏ.
<!DOCTYPE html> <html> <body> <iframe src="http://binhnet.com" style="border:medium solid black"></iframe> </body> </html>
Câu trả lời của bài tập 4
<!DOCTYPE html> <html> <body> <iframe src="http://binhnet.com" style="border:medium solid red"></iframe> </body> </html>
6. Lời cuối bài
Đến đây là kết thúc phần hướng dẫn về cách chèn một khung nội tuyến (iframe) vào trang web. Ở bài tiếp theo tôi sẽ viết về một số thẻ trong HTML liên quan đến JavaScript
The post [HTML bài 24] Cách chèn một khung nội tuyến (iframe) vào trang web appeared first on Học online.
from WordPress http://ift.tt/2vzqVHy
via IFTTT
Không có nhận xét nào:
Đăng nhận xét