Chèn Khung Vào Trang HTML - TUT

Trang chủ » Cách Tạo Khung Trong Html » Chèn Khung Vào Trang HTML - TUT

Có thể bạn quan tâm

Các khung HTML được sử dụng để chia cửa sổ trình duyệt của bạn thành nhiều phần trong đó mỗi phần có thể tải một tài liệu HTML riêng. Một bộ sưu tập các khung trong cửa sổ trình duyệt được gọi là bộ khung. Cửa sổ được chia thành các khung theo cách tương tự các bảng được sắp xếp thành các hàng và cột.

Nhược điểm của khung

Có một vài hạn chế khi sử dụng khung, do đó, không bao giờ nên sử dụng khung trong trang web của bạn:

  • Một số thiết bị nhỏ hơn không thể đối phó với khung thường vì màn hình của chúng không đủ lớn để phân chia.
  • Đôi khi trang của bạn sẽ được hiển thị khác nhau trên các máy tính khác nhau do độ phân giải màn hình khác nhau.
  • Nút quay lại của trình duyệt có thể không hoạt động như người dùng hy vọng.
  • Vẫn còn một vài trình duyệt không hỗ trợ công nghệ khung.

Tạo khung

Để sử dụng khung trên trang, chúng tôi sử dụng thẻ <frameset> thay vì thẻ <body>. Thẻ <frameset> xác định, cách chia cửa sổ thành các khung. Thuộc tính hàng của thẻ <frameset> xác định khung ngang và thuộc tính cols xác định khung dọc. Mỗi khung được biểu thị bằng thẻ <frame> và nó xác định tài liệu HTML nào sẽ mở vào khung.

Lưu ý – Thẻ <frame> không dùng nữa trong HTML5. Không sử dụng yếu tố này.

Sau đây là ví dụ để tạo ba khung ngang:

<!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset rows = "10%,80%,10%"> <frame name = "top" src = "/html/top_frame.htm" /> <frame name = "main" src = "/html/main_frame.htm" /> <frame name = "bottom" src = "/html/bottom_frame.htm" /> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html>

Hãy đặt ví dụ trên như sau, ở đây chúng tôi thay thế thuộc tính hàng bằng cols và thay đổi độ rộng của chúng. Điều này sẽ tạo ra tất cả ba khung hình theo chiều dọc:

<!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset cols = "25%,50%,25%"> <frame name = "left" src = "/html/top_frame.htm" /> <frame name = "center" src = "/html/main_frame.htm" /> <frame name = "right" src = "/html/bottom_frame.htm" /> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html>

Sau đây là các thuộc tính quan trọng của thẻ <frameset>:

Thứ tự Thuộc tính & Mô tả
1 cols Chỉ định có bao nhiêu cột được chứa trong bộ khung và kích thước của mỗi cột. Bạn có thể chỉ định chiều rộng của mỗi cột theo một trong bốn cách – Giá trị tuyệt đối tính bằng pixel. Ví dụ: để tạo ba khung dọc, sử dụng cols = “100, 500, 100” . Một tỷ lệ phần trăm của cửa sổ trình duyệt. Ví dụ: để tạo ba khung dọc, sử dụng cols = “10%, 80%, 10%” . Sử dụng ký hiệu đại diện. Ví dụ: để tạo ba khung dọc, sử dụng cols = “10%, *, 10%” . Trong trường hợp này, ký tự đại diện sẽ chiếm phần còn lại của cửa sổ. Là chiều rộng tương đối của cửa sổ trình duyệt. Ví dụ: để tạo ba khung dọc, sử dụng cols = “3 *, 2 *, 1 *” . Đây là một thay thế cho tỷ lệ phần trăm. Bạn có thể sử dụng chiều rộng tương đối của cửa sổ trình duyệt. Ở đây, cửa sổ được chia thành sáu phần: cột thứ nhất chiếm một nửa cửa sổ, cột thứ hai chiếm một phần ba và cột thứ ba chiếm một phần sáu.
2 rows Thuộc tính này hoạt động giống như thuộc tính cols và có cùng giá trị, nhưng nó được sử dụng để chỉ định các hàng trong bộ khung. Ví dụ: để tạo hai khung ngang, sử dụng hàng = “10%, 90%” . Bạn có thể chỉ định chiều cao của mỗi hàng theo cùng một cách như đã giải thích ở trên cho các cột.
3 border Thuộc tính này chỉ định chiều rộng của đường viền của mỗi khung hình bằng pixel. Ví dụ: đường viền = “5”. Giá trị bằng 0 có nghĩa là không có đường viền.
4 frameborder Thuộc tính này xác định xem đường viền ba chiều có được hiển thị giữa các khung không. Thuộc tính này nhận giá trị 1 (có) hoặc 0 (không). Ví dụ: frameborder = “0” chỉ định không có viền.
5 framespacing Thuộc tính này chỉ định lượng không gian giữa các khung trong bộ khung. Điều này có thể mất bất kỳ giá trị số nguyên. Ví dụ: framespaces = “10” có nghĩa là nên có khoảng cách 10 pixel giữa mỗi khung.

Thuộc tính thẻ <frame>

Sau đây là các thuộc tính quan trọng của thẻ <frame>:

Thứ tự Thuộc tính & Mô tả
1 src Thuộc tính này được sử dụng để cung cấp tên tệp nên được tải trong khung. Giá trị của nó có thể là bất kỳ URL nào. Ví dụ: src = “/html/top_frame.htm” sẽ tải một tệp HTML có sẵn trong thư mục html.
2 name Thuộc tính này cho phép bạn đặt tên cho khung. Nó được sử dụng để chỉ ra khung hình nào mà tài liệu sẽ được tải vào. Điều này đặc biệt quan trọng khi bạn muốn tạo liên kết trong một khung tải các trang vào khung khác, trong trường hợp đó, khung thứ hai cần một tên để xác định chính nó là mục tiêu của liên kết.
3 border Thuộc tính này xác định xem các đường viền của khung đó có được hiển thị hay không; nó ghi đè giá trị được cung cấp trong thuộc tính frameborder trên thẻ <frameset> nếu được đưa ra và điều này có thể lấy các giá trị 1 (có) hoặc 0 (không).
4 marginwidth Thuộc tính này cho phép bạn chỉ định chiều rộng của không gian giữa bên trái và bên phải của viền của khung và nội dung của khung. Giá trị được tính theo pixel. Ví dụ: lề băng thông = “10”.
5 marginheight Thuộc tính này cho phép bạn chỉ định chiều cao của không gian giữa đường viền trên và dưới của khung và nội dung của khung. Giá trị được tính theo pixel. Ví dụ: lềinheight = “10”.
6 noresize Theo mặc định, bạn có thể thay đổi kích thước bất kỳ khung hình nào bằng cách nhấp và kéo trên đường viền của khung. Thuộc tính noresize ngăn người dùng có thể thay đổi kích thước khung. Ví dụ noresize = “noresize”.
7 scrolling Thuộc tính này kiểm soát sự xuất hiện của các thanh cuộn xuất hiện trên khung. Điều này nhận các giá trị là “có”, “không” hoặc “tự động”. Ví dụ: scrolling = “no” có nghĩa là nó không nên có thanh cuộn.
8 longdesc Thuộc tính này cho phép bạn cung cấp một liên kết đến một trang khác có chứa một mô tả dài về nội dung của khung. Ví dụ: longdesc = “framedescrip.html”

Hỗ trợ trình duyệt cho khung

Nếu người dùng đang sử dụng bất kỳ trình duyệt cũ hoặc bất kỳ trình duyệt nào không hỗ trợ các khung thì phần tử <noframes> sẽ được hiển thị cho người dùng.

Vì vậy, bạn phải đặt phần tử <body> bên trong phần tử <noframes> vì phần tử <frameset> được cho là thay thế phần tử <body>, nhưng nếu trình duyệt không hiểu phần tử <frameset> thì nó sẽ hiểu những gì bên trong Phần tử <body> được chứa trong phần tử <noframes>.

Bạn có thể đặt một số thông điệp tốt đẹp cho người dùng của bạn có trình duyệt cũ. Ví dụ, xin lỗi !! Trình duyệt của bạn không hỗ trợ khung. như thể hiện trong ví dụ trên.

Tên và thuộc tính đích của khung

Một trong những cách sử dụng phổ biến nhất của khung là đặt các thanh điều hướng trong một khung và sau đó tải các trang chính vào một khung riêng.

Chúng ta hãy xem ví dụ sau trong đó một tệp test.htm có mã sau:

<!DOCTYPE html> <html> <head> <title>HTML Target Frames</title> </head> <frameset cols = "200, *"> <frame src = "/html/menu.htm" name = "menu_page" /> <frame src = "/html/main.htm" name = "main_page" /> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html>

Ở đây, chúng tôi đã tạo hai cột để điền vào hai khung. Khung đầu tiên có chiều rộng 200 pixel và sẽ chứa thanh menu điều hướng được triển khai bởi tệp menu.htm . Cột thứ hai lấp đầy trong không gian còn lại và sẽ chứa phần chính của trang và nó được triển khai bằng tệp main.htm . Đối với tất cả ba liên kết có sẵn trong thanh menu, chúng tôi đã đề cập khung đích là main_page , vì vậy bất cứ khi nào bạn nhấp vào bất kỳ liên kết nào trong thanh menu, liên kết có sẵn sẽ mở trong trang chính.

Sau đây là nội dung của tập tin menu.htm:

<!DOCTYPE html> <html> <body bgcolor = "#4a7d49"> <a href = "http://www.google.com" target = "main_page">Google</a> <br /> <br /> <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a> <br /> <br /> <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a> </body> </html>

Sau đây là nội dung của tệp main.htm:

<!DOCTYPE html> <html> <body bgcolor = "#b5dcb3"> <h3>This is main page and content from any link will be displayed here.</h3> <p>So now click any link and see the result.</p> </body> </html>

Bây giờ bạn có thể thử nhấp vào các liên kết có sẵn trong bảng điều khiển bên trái và xem kết quả. Mục tiêu cũng có thể lấy một trong các giá trị sau:

Thứ tự Tùy chọn & Mô tả
1 _self Tải trang vào khung hiện tại.
2 _blank Tải một trang vào một cửa sổ trình duyệt mới. Mở một cửa sổ mới.
3 _parent Tải trang vào cửa sổ cha, trong trường hợp một bộ khung đơn là cửa sổ trình duyệt chính.
4 _top Tải trang vào cửa sổ trình duyệt, thay thế bất kỳ khung hiện tại.
5 targetframe Tải trang vào một khung mục tiêu có tên.

Chia sẻ:

  • Twitter
  • Facebook
Thích Đang tải...

Có liên quan

Từ khóa » Cách Tạo Khung Trong Html