Tạo Frame trong HTML, Cách tạo thẻ 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.
  • Thỉnh thoảng 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 phụ trợ 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

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

<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 ra kết quả sau:

Chẳng hạn

Bạn theo dõi chẳng hạn trên, hiện thời 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 ra 3 Frame dọc như dưới.

<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à:

Xem Thêm  or the string ""on"". Its state would be one of ""checked""

tao-frame5a062d0c0c7ea

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;:

Tính chất
Diễn đạt

cols
Xác nhận 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 ra 3 cột dọc, sử dụng cols=”100, 500,100″. % của cửa sổ trình duyệt. Chẳng hạn để tạo ra setup 3 Frame dọc: cols=”10%, 80%,10%”. 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 cols=”10%, ,10%”. 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 cols=”3,2,1″. Đâ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.

rows
Tính chất 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 rows=”10%, 90%”. 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.

border
Tính chất 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.

frameborder
Tính chất 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.

framespacing
Xác nhận 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;:

Tính chất
Diễn đạt

src
Tính chất 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.html” sẽ tải một file HTML có trong mục lục HTML.

Xem Thêm  CudaText uses file from its ""data"" folder. To specify filename in plugin folder

name
Tính chất 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.

frameborder
Tính chất 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).

marginwidth
Tính chất 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″.

marginheight
Tính chất 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″.

noresize
Theo mặc định thì bạn có thể đặt lại kích cỡ cho Frame bằng cách Click 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”.

scrolling
Tính chất 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).

longdesc
Tính chất 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.html”.

Trình duyệt phụ trợ 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 phụ trợ Frame thì khi đó phần tử <noframesvàgt; sẽ được hiển thị tới người dùng.

Chính vì như 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 phụ trợ để đổ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 cảnh báo 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 Sorry!! Trinh duyet cua ban khong ho tro Frame. như chẳng hạn trên.

Xem Thêm  two IFrames

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:

<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 Click chuột vào các backlink trên danh sách thì backlink có sẵn sẽ mở trong main_page.

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

<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:

<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ả:

tao-frame5a06302ac7cc7

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

Tùy chọn
Diễn đạt

_self
Tải website trong Frame hiện giờ.

_blank
Tải một trang trong cửa sổ trình duyệt mới.

_parent
Tả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.

_top
Tải trang trong cửa sổ trình duyệt, thay cho các trang hiện giờ.

targetframe
Tải trang trong một Frame mục tiêu đã đặt tên.

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