05/04/2025

Thiết kế giao diện web bằng cách nhúng IFRAME vào file HTML

 Giao diện


 

1. Code file index.html 

<!doctype HTML>
<html>
   <head>
      <title>Tiêu đề trang web</title>
      <meta charshet = "UTF-8"/>
   </head>
<body>
   <iframe src="header.html" scrolling="no" allow="fullscreen" style="margin-bottom: 5px; padding: 5px; border: 2px solid red; width: 99%; height: 80px;"></iframe>
   <iframe src="menu-left.html" scrolling="no" allow="fullscreen" style="float:left; padding: 5px; border: 2px solid red; width: 20%; height: 300px;"></iframe>
   <div style="float:right; padding: 5px; border: 2px solid red; width: 77%; min-height: 300px;">
      <h4>Hiển thị nội dung</h4>
   </div>
   </div>
   <iframe src="footer.html" frameborder="0" scrolling="no" allow="fullscreen" style="margin-top: 5px; padding: 5px; border: 2px solid red; width: 99%; height: 60px;"></iframe>
</body>
</html>

2. Code file header.html 

<!doctype HTML>
<html>
<body>
    <h1>Tiêu đề trên</h1>
</body>
 </html>

3. Code file menu-left.html 

<!doctype HTML>
<html>
<body>
    <h4>Menu trái</h4>
</body>
 </html>

4. Code file footer.html 

<!doctype HTML>
<html>
<body>
    <h4>Tiêu đề dưới</h4>
</body>
 </html>


Liên hệ

Tên

Email *

Thông báo *