☰ MENU

▼

05/04/2025

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

 1. Giao diện



2. Cấu trúc các file



3. Code file index.html 

<!DOCTYPE html>
<html>
    <head>
        <title>index</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
        <!--Nhúng file tiêu đề trên-->
        <iframe class="iframe-header" src="header.html" scrolling="no" style="text-align: center;"></iframe>

        <!--Nhúng file menu ngang-->
        <iframe class="iframe-menu-ngang" src="menu-ngang.html" scrolling="no" ></iframe>
        
        <!--Nhúng file menu trai-->
        <iframe class="iframe-menu-left" src="menu-left.html" scrolling="no" ></iframe>
        
        <!--HIỂN THỊ NỘI DUNG bằng cách nhúng thẻ iframe với thuộc tính name="hien-thi"-->
            <iframe class="iframe-noi-dung" src="trang-chu.html" name="hien-thi"></iframe>
        <!--Nhúng file menu trai-->
        <iframe class="iframe-footer" src="footer.html" scrolling="no" ></iframe>
    
    </body>
</html>

4. Code file myCSS.css 

body{
    font-size: 14px;
    color: green;
    font-family: Arial;
}

.iframe-noi-dung{
    float: left;
    width: 80%;
    height: 500px;
    margin: 5px;
    padding: 5px;
    border: 2px solid green;
}

.iframe-header{
    width: 97%;
    height: 80px;
    margin: 5px; /*K. cách bên ngoài khung*/
    padding: 5px;/*K. cách bên trong khung*/
    border: 2px solid green; /*Kẻ viền*/
    font-size: 30px;
    background:#98FB98;
}
.iframe-menu-left{
    float: left;
    width: 15%;
    height: 500px;
    margin: 5px;
    padding: 5px;
    border: 2px solid green;
    background:#98FB98;
}
.iframe-menu-ngang{
    float: left;
    width: 97%;
    height: 25px;
    margin: 5px;
    padding: 5px;
    border: 2px solid green;
    background:#4169E1;
    
}
.menu-ngang{
    color: white;
}
/*Định dạng Thẻ <a> trong .menu-ngang*/
.menu-ngang a{
    color: gold;
}
.iframe-footer{
    float: left;
    width: 97%;
    height: 50px;
    margin: 5px; /*K. cách bên ngoài khung*/
    padding: 5px;/*K. cách bên trong khung*/
    border: 2px solid green; /*Kẻ viền*/
    text-align: center;
    padding-top: 20px;
    background:#98FB98;
}
5. Code file header.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Header</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
        <div style="display: flex; justify-content: center; text-align: center;">
            <span><img src="hinh/logo.jpg" width="70px" height="70px"/> &nbsp;&nbsp;&nbsp;&nbsp;</span>  
            <span style="padding-top: 20px; color: red; font-size: 30px;">Shop Điện máy PHÚC KHANG</span>
        </div>
    </body>
</html>

6. Code file menu-ngang.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Menu ngang</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
        <div class="menu-ngang">
            <!--
            Hiển thị các trang bằng iframe có tên name="hien-thi" ở trang index.html 
            bằng thuộc tính target="hien-thi" trong thẻ a
            -->
            <span><a href="trang-chu.html" target="hien-thi">Trang chủ</a> |</span>
            <span><a href="gioi-thieu.html" target="hien-thi">Giới thiệu</a> |</span>
            <span><a href="lien-he.html" target="hien-thi">Liên hệ</a> |</span>
        </div>
    </body>
</html>

7. Code file menu-left.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Menu-left</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
      
            <p>SẢN PHẨM</p>
            <ul>
                <!--
                Hiển thị các trang bằng iframe có tên name="hien-thi" ở trang index.html 
                bằng thuộc tính target="hien-thi" trong thẻ a
                -->
                <li><a href="ti-vi.html" target="hien-thi">Ti vi</a></li>
                <li><a href="tu-lanh.html" target="hien-thi">Tủ lạnh</a></li>
                <li><a href="may-tinh.html" target="hien-thi">Máy tính</a></li>
            </ul>
   
    </body>
</html>


8. Code file trang-chu.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Trang chủ</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
        
        <h3>TRANG CHỦ</h3>
       
    </body>
</html>

9. Code file footer.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Footer</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
        <div style="text-align: center;">
            <span>Copyright: Phúc Khang </span>  
        </div>
    </body>
</html>

10. Code gioi-thieu.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Giới thiệu</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
        <h3>Giới thiệu</h3>
    </body>
</html>

11. Code lien-he.html 

<!DOCTYPE html>
<html>
    <head>
            <title>Liên hệ</title>
            <meta charset="UTF-8"/>
            <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
            <h3>Liên hệ</h3>
            <h4>ĐT:....</h4>
            <h4>ĐC:....</h4>
    </body>
</html>

12. Code ti-vi.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Ti vi</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
        <h3>Ti vi</h3>
        <p><img src="hinh/ti-vi.jpg" width="300px" height="300px"/></p>
        <p>Thông tin chi tiết</p>
        <p>...................</p>
    </body>
</html>

13. Code file tu-lanh.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Tủ lạnh</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
            <h3>Tủ lạnh</h3>
            <p><img src="hinh/tu-lanh.jpg" width="300px" height="300px"/></p>
            <p>Thông tin chi tiết</p>
            <p>...................</p>
    </body>
</html>

14. Code file may-tinh.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Máy tính</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
        <div style="width: 100%;">
       <h3>Máy tính</h3>
       <p><img src="hinh/may-tinh.jpg" width="300px" height="300px"/></p>
       <p>Thông tin chi tiết</p>
       <p>...................</p>
       <h4><a href="lien-he.html">Liên hệ</a></h4>
       <h4><a href="https://www.vnkha.com/">vnkha.com</a></h4>
    </div>
    </body>
</html>