Web Cơ Bản

Thẻ <frameset> trong HTML

1) Cách sử dụng thẻ <frameset> trong HTML

- Thẻ <frameset> dùng để xác định một bộ khung

- Trong một bộ khung sẽ có một hoặc nhiều khung, mỗi khung là một phần tử <frame>

- Phần tử <frameset> chỉ định trong một bộ khung sẽ có bao nhiu hàng, bao nhiu cột, và kích thước của mỗi phần đó.

Ví dụ 1:

- Phần tử <frameset> bên dưới xác định bộ khung sẽ có hai cột (tương ứng hai phần tử <frame>)

  • Phần tử <frame> thứ nhất có chiều rộng bằng 35% chiều rộng của phần tử <frameset>
  • Phần tử <frame> thứ hai có chiều rộng bằng 65% chiều rộng của phần tử <frameset>

<frameset cols="35%,65%">
    <frame src="http://webcoban.vn/html/demo?file=1434">
    <frame src="http://webcoban.vn/html/demo?file=1435">
</frameset>
Xem ví dụ
Ví dụ 2:

- Phần tử <frameset> bên dưới xác định bộ khung sẽ có ba hàng (tương ứng ba phần tử <frame>)

  • Phần tử <frame> thứ nhất có chiều cao bằng 15% chiều cao của phần tử <frameset>
  • Phần tử <frame> thứ hai có chiều cao bằng 50% chiều cao của phần tử <frameset>
  • Phần tử <frame> thứ ba có chiều cao bằng 35% chiều cao của phần tử <frameset>

<frameset rows="15%,50%,35%">
    <frame src="http://webcoban.vn/html/demo?file=1434">
    <frame src="http://webcoban.vn/html/demo?file=1435">
    <frame src="http://webcoban.vn/html/demo?file=1436">
</frameset>
Xem ví dụ
Ví dụ 3:

<frameset cols="20%,60%,20%" rows="30%,50%">
    <frame src="http://webcoban.vn/html/demo?file=1434">
    <frame src="http://webcoban.vn/html/demo?file=1435">
    <frame src="http://webcoban.vn/html/demo?file=1436">
    <frame src="http://webcoban.vn/html/demo?file=1439">
    <frame src="http://webcoban.vn/html/demo?file=1440">
    <frame src="http://webcoban.vn/html/demo?file=1441">
</frameset>
Xem ví dụ

- Ngoài ra, chúng ta có thể đặt một bộ khung bên trong một bộ khung khác để tăng tính đa dạng của bộ khung.

Ví dụ 4:

<frameset rows="50%,50%">
    <frame src="http://webcoban.vn/html/demo?file=1434">
    <frameset cols="30%,70%">
        <frame src="http://webcoban.vn/html/demo?file=1435">
        <frame src="http://webcoban.vn/html/demo?file=1436">
    </frameset>
</frameset>
Xem ví dụ

2) Các thuộc tính của thẻ <frameset>

- Thẻ <frameset> có ba thuộc tính cơ bản.

- Dưới đây là bảng mô tả sơ lược về ba thuộc tính đo:

cols

Xác định số lượng cột và chiều rộng mỗi cột trong phần tử <frameset>

rows

Xác định số lượng hàng và chiều cao mỗi hàng trong phần tử <frameset>

noresize

Ngăn chặn hành động kéo thả làm thay đổi kích thước của các phần tử <frame> bên trong phần tử <frameset>

2.1) Thuộc tính cols

- Thuộc tính cols dùng để xác định số lượng cột và chiều rộng mỗi cột trong phần tử <frameset>

(Thuộc tính cols có bao nhiu giá trị thì sẽ tương ứng với bấy nhiu cột, và mỗi giá trị đó cũng xác định chiều rộng của mỗi cột. Lưu ý, các giá trị được ngăn cách bởi dấu phẩy)

- Giá trị của thuộc tính cols được xác định bởi một trong ba đơn vị:

  • px
  • %
  • * (tức là bằng chiều rộng của phần tử <frameset> trừ đi tổng chiều rộng của những cột khác)
Ví dụ:

- Phần tử <frameset> bên dưới xác định bộ khung sẽ có ba cột (tương ứng ba phần tử <frame>)

  • Phần tử <frame> thứ nhất có chiều rộng bằng 20% chiều rộng của phần tử <frameset>
  • Phần tử <frame> thứ hai có chiều rộng bằng 30% chiều rộng của phần tử <frameset>
  • Phần tử <frame> thứ ba có chiều rộng bằng 50% chiều rộng của phần tử <frameset>

<frameset cols="20%,30%,*">
    <frame src="http://webcoban.vn/html/demo?file=1434">
    <frame src="http://webcoban.vn/html/demo?file=1435">
    <frame src="http://webcoban.vn/html/demo?file=1436">
</frameset>
Xem ví dụ

2.2) Thuộc tính rows

- Thuộc tính rows dùng để xác định số lượng hàng và chiều cao mỗi hàng trong phần tử <frameset>

(Thuộc tính rows có bao nhiu giá trị thì sẽ tương ứng với bấy nhiu hàng, và mỗi giá trị đó cũng xác định chiều cao của mỗi hàng. Lưu ý, các giá trị được ngăn cách bởi dấu phẩy)

- Giá trị của thuộc tính rows được xác định bởi một trong ba đơn vị:

  • px
  • %
  • * (tức là bằng chiều cao của phần tử <frameset> trừ đi tổng chiều cao của những hàng khác)
Ví dụ:

- Phần tử <frameset> bên dưới xác định bộ khung sẽ có ba hàng (tương ứng ba phần tử <frame>)

  • Phần tử <frame> thứ nhất có chiều cao bằng 20% chiều cao của phần tử <frameset>
  • Phần tử <frame> thứ hai có chiều cao bằng 30% chiều cao của phần tử <frameset>
  • Phần tử <frame> thứ ba có chiều cao bằng 50% chiều cao của phần tử <frameset>

<frameset rows="20%,30%,*">
    <frame src="http://webcoban.vn/html/demo?file=1434">
    <frame src="http://webcoban.vn/html/demo?file=1435">
    <frame src="http://webcoban.vn/html/demo?file=1436">
</frameset>
Xem ví dụ

2.3) Thuộc tính noresize

- Mặc định, khi ta dí chuột vào các cạnh của một phần tử <frame> thì nó sẽ hiện lên con trỏ giống như hoặc giúp chúng ta có thể kéo thả để thay đổi kích thước của phần tử <frame>

- Từ đây, thuộc tính noresize dùng để xác dịnh việc ngăn chặn hành động kéo thả làm thay đổi kích thước của phần tử <frame>

Ví dụ:

- Bạn không thể kéo thả làm thay đổi kích thước các phần tử <frame> trong phần tử <frameset> bên dưới


<frameset rows="20%,30%,50%" noresize>
    <frame src="http://webcoban.vn/html/demo?file=1434">
    <frame src="http://webcoban.vn/html/demo?file=1435">
    <frame src="http://webcoban.vn/html/demo?file=1436">
</frameset>
Xem ví dụ