HTML - Khung

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 biệt. Tập hợ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ự như các bảng được tổ chức: thành hàng và cột.

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

Có một số hạn chế khi sử dụng khung, vì vậy bạn không nên sử dụng khung trong các trang web của mình -

  • Một số thiết bị nhỏ hơn thường không thể đối phó với khung hình vì màn hình của chúng không đủ lớn để chia nhỏ.

  • Đô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 số trình duyệt không hỗ trợ công nghệ khung.

Tạo khung

Để sử dụng các khung trên một trang, chúng tôi sử dụng thẻ <frameset> thay vì thẻ <body>. Thẻ <frameset> định nghĩa, cách chia cửa sổ thành các khung. Cácrows thuộc tính của thẻ <frameset> xác định khung ngang và colsthuộc tính 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.

Note- Thẻ <frame> không được dùng nữa trong HTML5. Không sử dụng phần tử này.

Thí dụ

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>

Điều này sẽ tạo ra kết quả sau:

Thí dụ

Hãy đặt ví dụ trên như sau, ở đây chúng tôi thay thế thuộc tính row bằng cols và thay đổi chiều rộng của chúng. Điều này sẽ tạo ra tất cả ba khung 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>

Điều này sẽ tạo ra kết quả sau:

Thuộc tính thẻ <frameset>

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

Sr.No Thuộc tính & Mô tả
1

cols

Chỉ định số lượng 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 sau:

Giá trị tuyệt đối tính bằng pixel. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "100, 500, 100" .

Phần trăm của cửa sổ trình duyệt. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "10%, 80%, 10%" .

Sử dụng ký tự đại diện. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "10%, *, 10%" . Trong trường hợp này, ký tự đại diện chiếm phần còn lại của cửa sổ.

Như chiều rộng tương đối của cửa sổ trình duyệt. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "3 *, 2 *, 1 *" . Đây là một sự thay thế cho tỷ lệ phần trăm. Bạn có thể sử dụng độ 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 đầu tiên 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à nhận các giá trị giống nhau, nhưng nó được sử dụng để chỉ định các hàng trong bộ khung. Ví dụ: để tạo hai khung ngang, hãy sử dụng row = "10%, 90%" . Bạn có thể chỉ định chiều cao của mỗi hàng theo cách tương tự 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ụ: border = "5". Giá trị bằng 0 có nghĩa là không có đường viền.
4

frameborder

Thuộc tính này chỉ định xem có nên hiển thị đường viền ba chiều giữa các khung hay 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ó đường viền.
5

framespacing

Thuộc tính này chỉ định lượng không gian giữa các khung trong một bộ khung. Điều này có thể nhận bất kỳ giá trị số nguyên nào. Ví dụ: framespacing = "10" có nghĩa là phải có 10 pixel khoảng cách 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>:

Sr.No 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 sẽ đượ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 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 một khung khác, trong trường hợp này, khung thứ hai cần có tên để tự xác định là mục tiêu của liên kết.
3

frameborder

Thuộc tính này chỉ định xem các đường viền của khung đó có được hiển thị hay không; nó sẽ ghi đè giá trị đã cho trong thuộc tính frameborder trên thẻ <frameset> nếu một giá trị được cung cấp và điều này có thể nhận 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 khoảng trống giữa bên trái và bên phải của các đường viền của khung và nội dung của khung. Giá trị được tính bằng pixel. Ví dụ: marginwidth = "10".
5

marginheight

Thuộc tính này cho phép bạn chỉ định chiều cao của khoảng trống giữa phần trên và phần dưới của đường viền và nội dung của khung. Giá trị được tính bằng pixel. Ví dụ marginheight = "10".
6

noresize

Theo mặc định, bạn có thể thay đổi kích thước bất kỳ khung nào bằng cách nhấp và kéo trên các đườ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ị "có", "không" hoặc "tự động". Ví dụ: scrolling = "no" có nghĩa là nó không được có thanh cuộn.
số 8

longdesc

Thuộc tính này cho phép bạn cung cấp liên kết đến một trang khác có chứa mô tả dài về nội dung của khung. Ví dụ longdesc = "framedescription.htm"

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ũ nào hoặc bất kỳ trình duyệt nào không hỗ trợ khung thì phần tử <noframes> sẽ được hiển thị cho người dùng.

Vì vậy, bạn phải đặt mộ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ể đưa ra một số thông điệp hay 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 của khung và thuộc tính mục tiêu

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

Hãy xem ví dụ sau trong đó 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 rộng 200 pixel và sẽ chứa thanh menu điều hướng domenu.htmtập tin. Cột thứ hai lấp đầy không gian còn lại và sẽ chứa phần chính của trang và nó được thực hiện bởimain.htmtập tin. Đối với tất cả ba liên kết có sẵn trong thanh menu, chúng tôi đã đề cập đến khung mục tiêu 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ở ra trong trang chính.

Sau đây là nội dung của tệp 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>

Khi chúng tôi tải test.htm tệp, nó tạo ra kết quả sau:

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ả. Các targetattribute cũng có thể lấy một trong các giá trị sau -

Sr.No 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 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ổ mẹ, trong trường hợp chỉ có một bộ khung 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ế mọi khung hiện tại.
5

targetframe

Tải trang vào khung mục tiêu được đặt tên.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved