Frame trong HTML

Frame trong HTML

Frame (hay Frame) trong HTML được sử dụng để phân tách cửa sổ trình duyệt của các bạn thành các khu vực khác nhau mà mỗi khu vực tải một ebook HTML riêng. Một tập hợp các Frame trong cửa sổ trình duyệt được biết tới như là một Frameset. Cửa sổ được chia vào các Frame theo cách cũng giống như các bảng: bên trong các hàng & cột.

Giới hạn của Frame trong HTML

Có một số sự giới hạn trong sử dụng Frame, chính vì vậy nó không được đề xuất sử dụng trong website của các bạn:

  • Thường thì một vài thiết bị nhỏ không đáp ứng được các Frame này vì màn hình của nó không đủ lớn để chia thành các Frame.
  • Đôi lúc website của các bạn có thể hiển thị khác nhau trên các laptop khác nhau do độ sắc nét của màn hình.
  • Nút quay trở lại trang trước có thể không làm việc như người dùng mong mỏi.
  • Vẫn còn tồn tại một vài trình duyệt không trợ giúp công nghệ Frame.

Tạo Frame trong HTML

Để sử dụng các Frame trên website, tất cả chúng ta sử dụng thẻ <framesetvàgt; thay cho thẻ <bodyvàgt;. Thẻ <framesetvàgt; xác nhận cách chia cửa sổ thành các Frame. Tính chất rows trong thẻ này xác nhận chiều ngang của Frame còn tính chất cols xác nhận chiều dọc của Frame. Mỗi Frame được hướng dẫn bởi một thẻ <framesetvàgt; & nó xác nhận ebook nào sẽ được mở trong Frame.

Chẳng hạn

Marketing

Chẳng hạn ở dưới tạo thành 3 Frame ngang:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Chẳng hạn tao Frame trong HTML</titlevàgt;
</headvàgt;
<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" />
   <noframesvàgt;
   <bodyvàgt;
      Trình duyet cua ban khong ho tro Frame.
   </bodyvàgt;
   </noframesvàgt;
</framesetvàgt;
</htmlvàgt;

Nó sẽ tạo thành kết quả sau:

Vi du Frame trong HTML

Chẳng hạn

Bạn theo dõi chẳng hạn trên, hiện giờ tất cả chúng ta biến đổi tính chất rows bằng tính chất cols & biến đổi độ rộng của chúng. Nó sẽ tạo thành 3 Frame dọc như dưới.

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Vi du Frame trong HTML</titlevàgt;
</headvàgt;
<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" />
   <noframesvàgt;
   <bodyvàgt;
      Trinh duyet cua ban khong ho tro Frame.
   </bodyvàgt;
   </noframesvàgt;
</framesetvàgt;
</htmlvàgt;

Kết quả là:

Vi du Frame trong HTML

Các tính chất của thẻ <framesetvàgt;

Dưới đây là các tính chất trọng yếu của thẻ <framesetvàgt;:

Xem Thêm  set to ""Jazz Band""

Thuộc tínhMiêu tả
colsXác định số cột được chứa trong frameset & kích thước của mỗi cột. Bạn có cơ thể định độ rộng của mỗi cột theo một trong 4 cách sau:

  • Theo giá trị tuyệt đối Pixels. Chẳng hạn để tạo thành 3 cột dọc, sử dụng .

  • % của cửa sổ trình duyệt. Chẳng hạn để tạo thành setup 3 Frame dọc: .

  • Sử dụng biểu tượng gán giá trị (wildcard). Chẳng hạn để tạo 3 Frame dọc, bạn sử dụng . Trong trường hợp này thì wildcard sẽ chiếm phần còn sót lại.

  • Độ rộng quan hệ của cửa sổ trình duyệt. Chẳng hạn để tạo 3 Frame dọc, sử dụng . Đây là cách thay thế cho việc sử dụng %. Ở trường hợp này, cửa sổ windows sẽ được chia thành 6 phần, cột đầu sẽ chiếm một nửa màn hình, cột thứ hai chiếm 1/3 & cột thứ ba chiếm 1/6.

rowsThuộc tính này giống như tính chất cols & sử dụng các giá trị tương đương, nhưng nó được sử dụng để xác nhận các hàng của frameset. Chẳng hạn để tạo 2 Frame ngang, bạn sử dụng . Bạn có cơ thể định chiều cao của mỗi hàng theo cách cũng giống như các cột.
borderThuộc tính này xác nhận độ rộng của Border (đường viền) của mỗi Frame theo Pixel. Chẳng hạn như border=”5″. Một giá trị bằng không có nghĩa là không có Border.
frameborderThuộc tính này xác nhận có hay không Border được hiển thị giữa các Frame. Nó nhận giá trị 1 hoặc 0. Chẳng hạn frameborder=”0″ thì xác nhận là không có Border.
framespacingXác định số lượng khoảng cách giữa các Frame trong frameset. Nó nhận giá trị nguyên. Chẳng hạn framespcing=”10″ nghĩa là có 10 pixel khoảng cách giữa các Frame.

Các tính chất của thẻ <framevàgt;

Dưới đây là các tính chất của thẻ <framevàgt;:

Thuộc tínhMiêu tả
srcThuộc tính này được sử dụng để đặt tên của file sẽ được tải trong Frame. Giá trị là bất kì địa chỉ URL. Chẳng hạn, src=”../html/top_frame.jsp” sẽ tải một file HTML có trong mục lục HTML.
nameThuộc tính này cho phép bạn đặt tên cho một Frame. Nó được sử dụng để chỉ rõ Frame nào của ebook sẽ được tải trong đó. Nó vô cùng quan trọng khi bạn mong muốn tạo các backlink trong một Frame mà tải các website trong một Frame khác, trong trường hợp đó, Frame thứ hai cần một tên để xác nhận chính nó như là đích tới của backlink.
frameborderThuộc tính xác nhận có hay không Border trong Frame đã được chỉ; tính chất này được quyền ưu tiên trước giá trị được gán trong tính chất frameborder của thẻ <framesetvàgt;. & nó nhận giá trị 1 (Yes) hoặc 0 (No).
marginwidthThuộc tính này cho phép bạn xác nhận độ rộng của khoảng cách giữa bên trái & phải của Border Frame với bài viết trong Frame. Giá trị là pixel. Chẳng hạn marginwidth=”10″.
marginheightThuộc tính cho phép bạn xác nhận chiều cao của khoảng cách giữa trên & dưới của Border Frame & bài viết của nó. Giá trị là pixel. Chẳng hạn marginheight=”10″.
noresizeTheo mặc định thì bạn có thể đặt lại kích cỡ cho Frame bằng cách Nhấp chuột vào Border Frame & kéo. Tính chất noresize ngăn cản người tiêu dùng đặt lại kích thước. Chẳng hạn noresize=”noresize”.
scrollingThuộc tính này điều khiển sự hiện ra của thanh cuốn hiện ra trên Frame. Nó nhận giá trị “yes”, “no”, hoặc “auto”. Chẳng hạn scrolling=”no” nghĩa là sẽ không có thanh cuốn (scrollbar).
longdescThuộc tính này cho phép bạn phân phối một đường backlink tới website khác chứa một sự diễn đạt dài trong bài viết của Frame. Chẳng hạn longdesc=”framedescription.jsp”.

Xem Thêm  Top 7 Phần Mềm Làm Nhạc Beat Miễn Phí Tốt Nhất Để Tạo Nhạc Từ Android - phần mềm tạo nhạc beat android

Marketing

Trình duyệt trợ giúp cho các Frame

Nếu một người dùng đang sử dụng một trình duyệt cũ hoặc trình duyệt mà không trợ giúp Frame thì khi đó phần tử <noframesvàgt; sẽ được hiển thị tới người dùng.

Chính vì vậy bạn phải đặt một phần tử <bodyvàgt; bên trong phần tử <noframesvàgt; bởi vì phần tử <framesetvàgt; được trợ giúp để đổi địa điểm của phần tử <bodyvàgt;, nhưng nếu một trình duyệt không hiểu phần tử <framesetvàgt; thì nó sẽ hiểu những gì bên trong của phần tử <bodyvàgt; mà có chứa trong phần tử <noframesvàgt;.

Bạn có thể đặt một vài nhắc nhở lịch thiệp tới người dùng của các bạn mà đang sử dụng các trình duyệt cũ. Chẳng hạn như chẳng hạn trên.

Các tính chất name & target của Frame

Một trong các cách thông dụng về sử dụng các Frame là để đặt ví trí các thanh điều hướng trong một Frame & sau này là tải các trang chủ trong một Frame biệt lập.

Chẳng hạn về đoạn code:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Vi du Target Frame trong HTML</titlevàgt;
</headvàgt;
<frameset cols="200, *">
   <frame src="../html/menu.htm" name="menu_page" />
   <frame src="../html/main.htm" name="main_page" />
   <noframesvàgt;
   <bodyvàgt;
      Trinh duyet cua ban khong ho tro Frame.
   </bodyvàgt;
   </noframesvàgt;
</framesetvàgt;
</htmlvàgt;

Tại đây bạn có thể tạo 2 cột để chứa 2 Frame. Frame trước hết rộng 200 pixel & chứa thanh danh sách điều hướng được thực hiện bởi file danh sách.htm. Cột hai trong phần trống còn sót lại & chứa phần chính của trang & được thực hiện bởi tệp main.htm. So với ba backlink có trong thanh danh sách, tất cả chúng ta đã đề cập đến Frame mục tiêu như là main_page, chính vì vậy bất kì bao giờ bạn Nhấp chuột vào các backlink trên danh sách thì backlink có sẵn sẽ mở trong main_page.

Xem Thêm  body

Dưới đây là bài viết trong danh sách.htm:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<body bgcolor="#4a7d49">
<a href="http://www.google.com" target="main_page">Googlevàlt;/avàgt;
<br /><br />
<a href="http://www.microsoft.com" target="main_page">Microsoftvàlt;/avàgt;
<br /><br />
<a href="http://news.bbc.co.uk" target="main_page">BBC Newsvàlt;/avàgt;
</bodyvàgt;
</htmlvàgt;

& bài viết trong main.htm:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<body bgcolor="#b5dcb3">
<h3vàgt;This is main page and content from any backlink will be displayed here.</h3vàgt;
<pvàgt;So now click any backlink and see the result.</pvàgt;
</bodyvàgt;
</htmlvàgt;

Khi tất cả chúng ta tải tệp check.htm, nó hiển thị kết quả:

Vi du Frame trong HTML

Hiện thời bạn có thể thử Nhấp chuột vào các backlink có trong ô bên trái & xem kết quả. Tính chất có thể nhận một trong các giá trị sau:

Tùy chọnMiêu tả
_selfTải website trong Frame bây giờ.
_blankTải một trang trong cửa sổ trình duyệt mới.
_parentTải trang trong cửa sổ chính, trong trường hợp frameset đơn là cửa sổ trình duyệt chính.
_topTải trang trong cửa sổ trình duyệt, thay cho các trang bây giờ.
targetframeTải trang trong một Frame mục tiêu đã đặt tên.

Đã có app VietJack trên smartphone, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng….Free. Tải ngay vận dụng trên Android & iOS.


Theo dõi chúng tôi Free trên mxh facebook & youtube:

Follow fanpage của đội nhóm https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài tiên tiến nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile…. tiên tiến nhất của chúng tôi.

Viết một bình luận