Ngôn ngữ HTML - Frame HTML

Thiết kế Khung (Frame) trong HTML

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

Hạn chế của Frame trong HTML
Có một số sự hạn chế trong sử dụng Frame, vì thế nó không được đề nghị sử dụng trong trang web của bạn:

  • Thường thì một vài thiết bị nhỏ không giải quyết đượ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 khi trang web của bạn có thể hiển thị khác nhau trên các máy tính khác nhau do độ phân giải 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 muốn.
  • Vẫn còn có một vài trình duyệt không hỗ trợ công nghệ Frame.
     

1. Thiết Kế Khung - Frame

  • Là 1 kỹ thuật chia trang web thành nhiều Khung, mỗi khung hiển thị 1 trang web hoặc 1 tập tin ảnh.
  • Không sử dụng thẻ Body khi thiết kế khung.

Cú pháp:

<FrameSet Rows="Trị các cột"  Cols="Trị các dòng">
    <Frame Name ="name1"  Src="Url1">
         . . . . . . . . . . . . .
    <Frame Name ="namen"  Src="Urln">
</FrameSet>

“Trị các cột”, “Trị các dòng”: 
    + Kích thuớc tuyệt đối tính theo pixel
    + % kích thước tương đối theo cửa sổ trình duyệt.
“Url”: Địa chỉ tập tin hiển thị trong khung.

Ghi chú : Cho phép thiết kế khung lồng nhau

 

2. Định Dạng Khung  
a. Xác lập đường viền.
Mặc định khung được tạo có đường viền là 5 Pixel. Có thay thể thay đổi bằng cách dùng các thuộc tính sau:

<FrameSet FrameBorder=n1  FrameSpacing=n2 BorderColor=trị>
 . . . . . . .
</FrameSet>

n1=1/0:Đường viền hiển thị (Mặc định)/không hiển thị
n2: Độ dày đường viền
Trị: Tên màu cho đường viền

b. Xác lập khoảng cách lề khung.
Mặc định khoảng cách nội dung với khung là 8 Pixel. Có thể xác lập lề khung bằng:

<Frame . . . .  MarginWidth=n1  MarginHeight=n2>


n1: Khoảng cách lề trái, phải
n2: Khoảng cách lế trên, dưới

c. Xác lập thanh cuộn.
Mặc định thanh cuộn sẽ hiển thị khi kích thước khung không đủ cho nội dung. 

<Frame . . . . .Scrolling=trị>
Trị Giải thích
Auto Trị mặc định chỉ hiển thị khi nội dung vượt quá kích thước khung. 
Yes Luôn hiển thi
No Không bao giờ hiển thi


d. Cố định kích thước khung 
Mặc định kích thước sẽ thay đổi khi người dùng kéo viền khung. Để ngăn cản việc hiệu chính kích thước

<Frame . . . . . NoResize>


3. Chỉ định khung hiển thị cho liên kết.
Bước 1: Đặt tên khung cho tập tin thiết kế khung. Dùng thuộc tính Name của thẻ Frame.
Bước 2: Xác định đích đến cho liên kết. Trong tập tin chứa liên kết, dùng thuộc tính Target của thẻ <a href> chỉ định khung hiển thi 

Ví dụ: Tạo tập tin tintuc.html với nội dung như sau:

<html>
<head><title></title></head>
<frameset rows="100,500" framespacing="0" border="0" frameborder="0" >
  <frame name="Top" scrolling="no" noresize  src="images/banner.jpg" marginwidth="0" marginheight="0">
  <frameset cols="150,600">
    <frame name="Left"   src="dmtintuc.html">
    <frame name="Right"  noresize  src="tincn.html">
  </frameset>
  </frameset><noframes></noframes>
</html>

Ví dụ: Tạo tập tin dmtintuc.html với nội dung như sau:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body  >
<H3 Align= Center>TIN TỨC</H3>
<a href="tinkt.html" target="right" >Kinh tế </a><BR>
<a href="tincn.html" target="right">Tin công nghệ </a>
</body>

</html>

Trang tinkt.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<H3 ALIGN=CENTER> 
Cầm cố chứng khoán: Kênh tạo vốn cho nhà đầu tư?</H3>
<img src="images/tinchungkhoan.jpg" align=left width=120> 
<P Align=Justify><font size="2">
Mới đây UBCKNN đã gửi công văn  đề nghị các công ty chứng khoán, 
ngân hàng kiểm soát chặt giao dịch và cho vay cầm cố mua cổ phiếu, 
nhằm hạn chế rủi ro. Giới chuyên môn cho rằng, chưa cần thiết phải lo lắng, 
bởi chứng khoán tăng là dấu hiệu tốt và vẫn trong tầm kiểm soát. Theo UBCKNN,
 đến ngày 20-3 có khoảng 13 triệu cổ phiếu các loại được cầm cố với 
tổng giá trị khoảng 751 tỷ đồng. Ủy ban đã có yêu cầu phối hợp với 
Ngân hàng Nhà nước để liên kết quản lý việc cho vay v cầm cố chứng khóan 
ở các ngân hng thương mại.
</font></P>
</Body>

</body>
</html>

Trang tincn.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<H3 ALIGN=CENTER> 
Công nghiệp 4.0</H3>
<img src="images/Industry_4.0.png" align=left width=120> 
<P Align=Justify><font size="2">
Thuật ngữ "Công nghiệp 4.0" (tiếng Đức: Industrie 4.0)
 khởi nguồn từ một dự án trong chiến lược công nghệ cao của 
chính phủ Đức, nó thúc đẩy việc sản xuất điện toán hóa sản xuất.[5]

Một số đã so sánh Công nghiệp 4.0 với cuộc cách mạng Công nghiệp lần thứ tư.
 Tuy nhiên, điều này đề cập đến một sự chuyển đổi có tính hệ thống bao
 gồm tác động lên xã hội dân sự, cơ cấu quản trị và bản sắc con người, 
ngoài các chi nhánh kinh tế / sản xuất.
 Cuộc cách mạng công nghiệp đầu tiên đã huy động việc cơ giới hóa sản xuất
 sử dụng nước và hơi nước; Cuộc cách mạng kỹ thuật số] và việc sử dụng các
 thiết bị điện tử và công nghệ thông tin để tiếp tục tự động hoá sản xuất[6] 
Thuật ngữ "Cách mạng công nghiệp lần thứ tư" Đã được áp dụng cho sự phát triển 
công nghệ quan trọng một vài lần trong 75 năm qua, và là để thảo luận về học thuật.
[7][8][9] Công nghiệp 4.0, mặt khác, tập trung vào sản xuất đặc biệt trong bối cảnh hiện tại, 
và do đó là tách biệt với cuộc cách mạng công nghiệp lần thứ tư về phạm vi.

Thuật ngữ "Công nghiệp 4.0" đã được nhắc lại vào năm 2011 tại Hội chợ Hannover.
[10] Tháng 10 năm 2012, Nhóm Công tác về Công nghiệp 4,0 trình bày một loạt
 các khuyến nghị về thực hiện Công nghiệp 4.0 cho chính phủ liên bang Đức. 
Các thành viên của Nhóm Công nghiệp 4.0 được công nhận là những người cha 
sáng lập và là động lực đằng sau Industry 4.0.
</font></P>
</Body>

</body>
</html>

Xem ví dụ