HTML Frames ,Iframe -Khung Iframes
Khung à ....frame thường được dùng để à...ờ. Ví dụ, bạn làm một website, có phần đầu chứ banner, bên trái là dãy menu còn bên phải là nội dung:
Down về và giải nén ra để xem ví dụ
DOWNLOADSau khi down về nếu bạn nào không biết giải nén thì nhấp chuột phải vào chọn Extract here,mà mobile thì dùng blue FTP ấy
Bắt đầu vào phân tích cái frame này.
Mã nguồn:[Chọn]
<html>
<head>
</head>
<frameset cols="20%,*">
<frame name="menu" src="menu.htm">
<frame name="main" src="main.htm">
</frameset>
</html>
Đây là một trang frame đơn giản nhất, nó là một trang gộp lại bởi hai trang menu.htm và main.htm.
trang frame không có tag <body> frameset: tag này chứa thông tin định dạng cho trang frame và các frame nhỏ bên trong cols: thuộc tính này sẽ quyết định chiều rộng của hai cột, như ví dụ trên là20%,*, 20% sẻ là chiều rộng của cột đầu tiên, còn lại là của cột thứ 2.
<frame>: tag này mới chính thức là tag dẫn tới trang mà bạn chỉ định, với thuộc tính src là đường dẫn tới trang bạn muốn!
Còn ở ví dụ, mọi chuyện hơi khác,ở đó bạn thấy có 3 khung tất cả, một khung nằm ngang và hai khung bình thường. Đó là frame chứa frame có hai khung nhỏ.
Mã nguồn:[Chọn]
<html>
<head>
<title>trang frame</title>
</head>
<frameset rows="15%,*">
<frame name="banner" scrolling="no" noresize >
<frameset cols="10%,*">
<frame name="menu" target="contents">
<frame name="main">
</frameset>
</frameset>
</html>
Như là đã nói từ trước, thường người ta dùng frame để tạo một menu, mà để khi click vào frame này mà frame kia thay đổi, ta cần thuộc tính name và thuộc tính target.
_trong frame menu thêm thuộc tính target với giá trị là tên frame ta muốn chuyễn hướng khi click chuột
_trong trang tương ứng với frame menu, trên phần <head> ta thêm tag <base> với thuộc tính target giá trị cũng là tên frame muốn chuyển hướng
Chú ý:ta vẫn có thể dơn giản là dùng thuộc tính target giá trị cũng là tên frame muốn chuyễn hướng trong tag <a> (xem lại phần html Link)
Dàn frame
Nói chung và không chính xác frame có hai cách dàng đó là hàng và cột!
Để dàng một cái frame nằm ngang(chiều dài hơn rộng) trong tag <frameset> thuộc tính rows với giá trị là chiều cao của frame thứ nhất (tính từ trên xuống).
VD:<frameset rows="30%,*">Để dàng một cái frame đứng(chiều dài bé hơn rộng) trong tag <frameset> thuộc tính cols với giá trị là chiều cao của frame thí nhất( tính từ trên xuống)
VD:<frameset cols="30%,*">Phân tích khĩ hơn các file ví dụ
Mình cũng đả giai thích sơ qua cho mọi người hiểu ở trên, bây giờ đi sâu vào luôn mình nói là đó là một cái frame lớn, frmae này là frame chia trang ra thành 2 phần ngang
Mã nguồn:[Chọn]
<frameset framespacing="0" border="0" frameborder="0" rows="30%,*">
<frame name="banner" scrolling="no" target="contents">
</frameset>
Và một cái frame nhõ hơn
Mã nguồn:[Chọn]
<frameset cols="30%,*">
<frame name="menu" target="main">
<frame name="main">
</frameset>
Và cả cái trang này được hợp thành bởi cả hai cái này, cái nhỏ hơn chèn bên trong cái lớn hơn
Mã nguồn:[Chọn]
<frameset framespacing="0" border="0" frameborder="0" rows="30%,*">
<frame name="banner" scrolling="no" target="contents">
<frameset cols="30%,*">
<frame name="menu" target="main">
<frame name="main">
</frameset>
</frameset>
Ở đây ta hiểu là, frame nhỏ hơn, đả thế vào chỗ vị trí frame ngang thứ hai.
Còn như ta muốn tạo một trang frame, có một cột đứng bên phải, và cột bên trái chia ra làm hai nữa nằm ngang thì code lúc này sẽ là:
Mã nguồn:[Chọn]
<frameset cols="50%,*">
<frame name="left" scrolling="no" noresize target="rtop">
<frameset rows="50%,*">
<frame name="rtop" target="rbottom">
<frame name="rbottom">
</frameset>
</frameset>
Inlineframe- frame nội dòng
Đây là một hình thức frame dễ xử dụng hơn rất nhiều, ta có thể chèn frame này vào bất cứ đâu trên trang web html bình thường, giống như một phần tử.để làm được điều đó, bạn dùng tag <iframe>với các thông số sau:
name:cái này không bắt buộc,
VD:name="framename"width:chiều rộng, giá trị % màn hình hay px,
VD:width="398"height:tương tự như trên,
VD:height="227"src:link dẫn tới trang web, có thể là link tuyệt/tương đối(xem lại bài html link),
VD:src="http://wapcry.net"bên trong cặp thẻ iframe bạn có thể chèn một dòng chữ thông báo lỗi hiễn thị frame cũng được ví dụ:
Mã nguồn:[Chọn]
<iframe name="framename" width="398" height="227" src="http://vinacafe.wapsite.me">
Nếu bạn nhìn thấy dòng chữ này, tức là trình duyệt của bạn không hỗ trợ inlineframe.
</iframe>
Kết quả:
Tìm trong trang:
-Bây giờ là20:40.Chúc bạn Online vui vẻ!!!
